diff --git a/.changeset/property-checkbox-spacing.md b/.changeset/property-checkbox-spacing.md
new file mode 100644
index 00000000000..29c5330532b
--- /dev/null
+++ b/.changeset/property-checkbox-spacing.md
@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Polish properties panels with readable, clickable checkbox labels, animated capacity options, a single equation link, consistent fields, and clearer section controls and dividers.
diff --git a/libs/@hashintel/petrinaut/docs/code-editor.md b/libs/@hashintel/petrinaut/docs/code-editor.md
index d84aefedeb4..206b803e702 100644
--- a/libs/@hashintel/petrinaut/docs/code-editor.md
+++ b/libs/@hashintel/petrinaut/docs/code-editor.md
@@ -11,7 +11,7 @@ Select a place, transition, or differential equation in the canvas or left sideb
 - **Differential Equation** contains the equation’s properties and code.
 - **Visualizer** contains a place’s visualization code and preview.
 
-The item’s menu in the left sidebar opens its code directly. For a place with dynamics, **Open equation code** beside its assigned differential equation opens that equation.
+The item’s menu in the left sidebar opens its code directly. For a place with dynamics, **View equation** below its assigned differential equation opens that equation’s properties and code.
 
 ## Fill the panel
 
diff --git a/libs/@hashintel/petrinaut/docs/drawing-a-net.md b/libs/@hashintel/petrinaut/docs/drawing-a-net.md
index a5131580fbe..a01b681a076 100644
--- a/libs/@hashintel/petrinaut/docs/drawing-a-net.md
+++ b/libs/@hashintel/petrinaut/docs/drawing-a-net.md
@@ -21,6 +21,16 @@ into it, and the rest comes back for as long as you stay on it.
 
 <img width="1793" height="1175" alt="full-editor" src="https://github.com/user-attachments/assets/ea41efe8-9056-479b-a936-e0d5e4196b11" />
 
+## Properties panel
+
+Select an entity to inspect its properties. Places use the same Name and Description fields as transitions and types.
+
+Place settings include an **Options** section for **Component port**, **Token capacity**, and **Default starting place**. Click a checkbox or its label to toggle the setting. Enabling Token capacity expands a compact **Maximum tokens** row beneath it. Point at the info icons for an explanation of each option.
+
+Click **View type** or **View equation** to open the assigned definition. These navigation actions are available when the net is read-only.
+
+The **State** and **Visualizer** section headers have visible expand arrows. Click a header to expand its content and drag the divider to give it more room. The Visualizer switch remains available while its section is collapsed.
+
 ## Top bar
 
 Spans the full editor width and has three sections.
diff --git a/libs/@hashintel/petrinaut/docs/petri-net-extensions.md b/libs/@hashintel/petrinaut/docs/petri-net-extensions.md
index 148d3c8d7dd..835cf00373b 100644
--- a/libs/@hashintel/petrinaut/docs/petri-net-extensions.md
+++ b/libs/@hashintel/petrinaut/docs/petri-net-extensions.md
@@ -73,7 +73,7 @@ Differential equations define how token data evolves continuously over time. The
 
 1. Create a differential equation in the **Differential Equations** group (left sidebar).
 2. Give it a name and associate it with a **type** (the equation applies to tokens of that type).
-3. Select a place, enable **Dynamics**, and choose an equation that matches the type assigned to the place.
+3. Select a place, enable **Dynamics**, and choose an equation that matches the type assigned to the place. Click **View equation** below the dropdown to open its definition.
 
 **Function body:**
 
@@ -93,7 +93,7 @@ The code is a plain function body ending in `return`, with `tokens` (the current
 
 A visualizer renders a custom view of a place's tokens during simulation. It is a React component that returns JSX (SVG is recommended).
 
-**To enable:** select a place, then toggle **Visualizer** in its properties. A code editor opens.
+**To enable:** select a place, then turn on the **Visualizer** switch in its properties. Click the **Visualizer** header to expand its code editor.
 
 ```tsx
 export default Visualization(({ tokens, parameters }) => {
diff --git a/libs/@hashintel/petrinaut/src/ui/components/section.tsx b/libs/@hashintel/petrinaut/src/ui/components/section.tsx
index 139f03304f0..b25d32b7b3a 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/section.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/section.tsx
@@ -19,7 +19,7 @@ const sectionListStyle = css({
   "& > *:not(:last-child)": {
     borderBottomWidth: "[1px]",
     borderBottomStyle: "solid",
-    borderBottomColor: "neutral.a20",
+    borderBottomColor: "neutral.a40",
   },
 });
 
diff --git a/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx b/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx
index 6d7495a9fcd..0c745c9d8b8 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx
@@ -192,7 +192,7 @@ const scrollShadowStyle = cva({
 
 const resizeHandleStyle = css({
   borderTopWidth: "thin",
-  borderTopColor: "neutral.a20",
+  borderTopColor: "neutral.a40",
   cursor: "ns-resize",
   backgroundColor: "[transparent]",
   transition: "[background-color 0.15s ease]",
@@ -219,7 +219,7 @@ const headerRowStyle = cva({
     alignItems: "center",
 
     borderBottomWidth: "thin",
-    borderBottomColor: "neutral.a20",
+    borderBottomColor: "neutral.a40",
   },
   variants: {
     isCollapsed: {
@@ -240,7 +240,7 @@ const mainHeaderRowStyle = css({
   alignItems: "center",
 
   borderBottomWidth: "thin",
-  borderBottomColor: "neutral.a20",
+  borderBottomColor: "neutral.a40",
 });
 
 const headerActionVisibleStyle = css({
@@ -273,12 +273,8 @@ const sectionToggleStyle = css({
   minWidth: "[0]",
   overflow: "hidden",
 
-  /* Reveal the chevron icon on toggle section hover */
   "& [data-toggle-icon]": {
     width: "3.5",
-    opacity: "[0]",
-  },
-  "&:hover [data-toggle-icon]": {
     opacity: "[1]",
   },
 });
@@ -534,27 +530,30 @@ const SubViewHeader: React.FC<SubViewHeaderProps> = ({
         </span>
       </div>
     )}
-    {isExpanded && (renderHeaderAction || onExpand) && (
-      <div
-        {...(!alwaysShowHeaderAction && { "data-header-action": true })}
-        className={
-          alwaysShowHeaderAction ? headerActionVisibleStyle : headerActionStyle
-        }
-      >
-        {onExpand && (
-          <Button
-            size="xs"
-            variant="ghost"
-            iconName="expand"
-            data-expand-subview
-            aria-label={`Expand ${title}`}
-            tooltip="Fill panel"
-            onClick={onExpand}
-          />
-        )}
-        {renderHeaderAction?.()}
-      </div>
-    )}
+    {(isExpanded || alwaysShowHeaderAction) &&
+      (renderHeaderAction || onExpand) && (
+        <div
+          {...(!alwaysShowHeaderAction && { "data-header-action": true })}
+          className={
+            alwaysShowHeaderAction
+              ? headerActionVisibleStyle
+              : headerActionStyle
+          }
+        >
+          {isExpanded && onExpand && (
+            <Button
+              size="xs"
+              variant="ghost"
+              iconName="expand"
+              data-expand-subview
+              aria-label={`Expand ${title}`}
+              tooltip="Fill panel"
+              onClick={onExpand}
+            />
+          )}
+          {renderHeaderAction?.()}
+        </div>
+      )}
   </div>
 );
 
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx
index 4328f705489..509e32a2fbb 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx
@@ -45,9 +45,9 @@ const listItemRowStyle = cva({
     minHeight: "8",
     p: "1",
     borderRadius: "lg",
-    fontSize: "sm",
-    fontWeight: "medium",
-    color: "neutral.s115",
+    fontSize: "[13px]",
+    fontWeight: "normal",
+    color: "neutral.fg.body",
     backgroundColor: "[transparent]",
     cursor: "pointer",
     transition: "[background-color 100ms ease-out, opacity 150ms ease-out]",
@@ -103,10 +103,10 @@ const listItemContentStyle = css({
 const listItemNameStyle = css({
   flex: "[1]",
   minWidth: "[0]",
-  fontSize: "sm",
-  fontWeight: "medium",
+  fontSize: "[13px]",
+  fontWeight: "normal",
   lineHeight: "snug",
-  color: "neutral.s115",
+  color: "neutral.fg.body",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
index b4763d48ddd..674c20f6746 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
@@ -160,8 +160,8 @@ const DeleteArcAction: React.FC = () => {
 
   return (
     <Button
-      aria-label="Delete"
-      size="xs"
+      aria-label="Delete arc"
+      size="sm"
       variant="ghost"
       tone="error"
       iconName="trash"
@@ -170,7 +170,7 @@ const DeleteArcAction: React.FC = () => {
         clearSelection();
       }}
       disabled={isReadOnly}
-      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"}
+      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete arc"}
     />
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx
index cfbfe5c020a..8ce54853d37 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx
@@ -188,14 +188,16 @@ const DeleteComponentInstanceAction: React.FC = () => {
 
   return (
     <Button
-      aria-label="Delete"
-      size="xs"
+      aria-label="Delete component instance"
+      size="sm"
       variant="ghost"
       tone="error"
       iconName="trash"
       onClick={() => removeComponentInstance({ instanceId: instance.id })}
       disabled={isReadOnly}
-      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"}
+      tooltip={
+        isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete component instance"
+      }
     />
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.test.tsx
new file mode 100644
index 00000000000..172a2755c0b
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.test.tsx
@@ -0,0 +1,188 @@
+/** @vitest-environment jsdom */
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { use, useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import {
+  DEFAULT_PETRINAUT_EXTENSIONS,
+  type Place,
+  type SelectionItem,
+} from "@hashintel/petrinaut-core";
+
+import { ActiveNetContext } from "../../../../../../../react/state/active-net-context";
+import { EditorContext } from "../../../../../../../react/state/editor-context";
+import { SDCPNContext } from "../../../../../../../react/state/sdcpn-context";
+import { CodeNavigationProvider } from "../../../../../../monaco/code-navigation";
+import { PlacePropertiesProvider } from "../context";
+import { placeMainContentSubView } from "./main";
+
+afterEach(cleanup);
+
+const PlaceMainContent = placeMainContentSubView.component;
+const initialPlace: Place = {
+  id: "place-1",
+  name: "Orders",
+  colorId: "type-1",
+  dynamicsEnabled: true,
+  differentialEquationId: "equation-1",
+  x: 0,
+  y: 0,
+};
+
+const Harness = ({
+  readOnly = false,
+  selectItem = vi.fn(),
+}: {
+  readOnly?: boolean;
+  selectItem?: (item: SelectionItem) => void;
+}) => {
+  const sdcpnDefaults = use(SDCPNContext);
+  const editorDefaults = use(EditorContext);
+  const activeNetDefaults = use(ActiveNetContext);
+  const [place, setPlace] = useState(initialPlace);
+  const types = [
+    {
+      id: "type-1",
+      name: "Order",
+      iconSlug: "circle",
+      displayColor: "#3366ff",
+      elements: [],
+    },
+  ];
+
+  return (
+    <SDCPNContext
+      value={{
+        ...sdcpnDefaults,
+        readonly: readOnly,
+        extensions: DEFAULT_PETRINAUT_EXTENSIONS,
+      }}
+    >
+      <EditorContext value={{ ...editorDefaults, selectItem }}>
+        <ActiveNetContext
+          value={{
+            ...activeNetDefaults,
+            activeNet: {
+              ...activeNetDefaults.activeNet,
+              types,
+              differentialEquations: [
+                {
+                  id: "equation-1",
+                  name: "Order aging",
+                  colorId: "type-1",
+                  code: "return [];",
+                },
+              ],
+            },
+          }}
+        >
+          <PlacePropertiesProvider
+            place={place}
+            placeType={null}
+            types={types}
+            isReadOnly={readOnly}
+            updatePlace={({ update }) =>
+              setPlace((currentPlace) => ({ ...currentPlace, ...update }))
+            }
+          >
+            <CodeNavigationProvider>
+              <PlaceMainContent />
+            </CodeNavigationProvider>
+          </PlacePropertiesProvider>
+        </ActiveNetContext>
+      </EditorContext>
+    </SDCPNContext>
+  );
+};
+
+describe("Place properties", () => {
+  it.each(["Component port", "Token capacity", "Default starting place"])(
+    "toggles %s by clicking its visible label",
+    async (label) => {
+      render(<Harness />);
+      const input = screen.getByRole<HTMLInputElement>("checkbox", {
+        name: label,
+      });
+      expect(input.checked).toBe(false);
+      await act(async () => {
+        fireEvent.click(screen.getByText(label, { exact: true }));
+      });
+      expect(input.checked).toBe(true);
+      await act(async () => {
+        fireEvent.click(screen.getByText(label, { exact: true }));
+      });
+      expect(input.checked).toBe(false);
+    },
+  );
+
+  it("keeps label clicks read-only", async () => {
+    render(<Harness readOnly />);
+    for (const label of [
+      "Component port",
+      "Token capacity",
+      "Default starting place",
+    ]) {
+      const input = screen.getByRole<HTMLInputElement>("checkbox", {
+        name: label,
+      });
+      expect(input.disabled).toBe(true);
+      await act(async () => {
+        fireEvent.click(screen.getByText(label, { exact: true }));
+      });
+      expect(input.checked).toBe(false);
+    }
+  });
+
+  it("shows a labelled capacity input only when enabled", async () => {
+    render(<Harness />);
+    expect(screen.queryByLabelText("Maximum tokens")).toBeNull();
+    await act(async () => {
+      fireEvent.click(screen.getByText("Token capacity", { exact: true }));
+    });
+    expect(
+      screen.getByLabelText<HTMLInputElement>("Maximum tokens").value,
+    ).toBe("1");
+    await act(async () => {
+      fireEvent.click(screen.getByText("Token capacity", { exact: true }));
+    });
+    await waitFor(() => {
+      expect(screen.queryByLabelText("Maximum tokens")).toBeNull();
+    });
+  });
+
+  it.each([false, true])(
+    "opens the assigned type and equation (read-only: %s)",
+    (readOnly) => {
+      const selectItem = vi.fn();
+      render(<Harness readOnly={readOnly} selectItem={selectItem} />);
+      fireEvent.click(screen.getByRole("button", { name: /View type/ }));
+      expect(selectItem).toHaveBeenLastCalledWith({
+        type: "type",
+        id: "type-1",
+      });
+      fireEvent.click(screen.getByRole("button", { name: /View equation/ }));
+      expect(
+        screen.queryByRole("button", { name: "Open equation code" }),
+      ).toBeNull();
+      expect(selectItem).toHaveBeenLastCalledWith({
+        type: "differentialEquation",
+        id: "equation-1",
+      });
+    },
+  );
+
+  it("associates the name and description labels with their fields", () => {
+    render(<Harness />);
+    expect(
+      screen.getByRole<HTMLInputElement>("textbox", { name: "Name" }).value,
+    ).toBe("Orders");
+    expect(screen.getByRole("textbox", { name: "Description" })).toBeDefined();
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
index d86a69536df..f76ed0b78aa 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
@@ -1,12 +1,13 @@
-import { use, useEffect, useRef, useState } from "react";
+import { Collapsible } from "@ark-ui/react/collapsible";
+import { use } from "react";
 
 import {
   Button,
   Checkbox,
-  Icon,
+  Form,
+  HelpTooltip,
   NumberInput,
   Select,
-  TextInput,
   Toggle,
   Tooltip,
 } from "@hashintel/ds-components";
@@ -17,25 +18,51 @@ import { usePetrinautMutations } from "../../../../../../../react";
 import { ActiveNetContext } from "../../../../../../../react/state/active-net-context";
 import { EditorContext } from "../../../../../../../react/state/editor-context";
 import { SDCPNContext } from "../../../../../../../react/state/sdcpn-context";
-import { DescriptionTextArea } from "../../../../../../components/description-field";
+import { UserSettingsContext } from "../../../../../../../react/state/user-settings-context";
+import { DescriptionField } from "../../../../../../components/description-field";
+import { DraftFieldInput } from "../../../../../../components/draft-field-input";
 import { PropertyValue } from "../../../../../../components/property-value";
 import { Section, SectionList } from "../../../../../../components/section";
 import { PlaceIcon } from "../../../../../../constants/entity-icons";
 import { UI_MESSAGES } from "../../../../../../constants/ui-messages";
-import { useDraftField } from "../../../../../../hooks/use-draft-field";
-import { useCodeNavigation } from "../../../../../../monaco/code-navigation";
-import { getDocumentUri } from "../../../../../../monaco/editor-paths";
 import { usePlacePropertiesContext } from "../context";
 
 import type { SubView } from "../../../../../../components/sub-view/types";
 
-const errorMessageStyle = css({
-  fontSize: "xs",
-  color: "red.s100",
+const fieldsSectionStyle = css({
+  paddingY: "3",
 });
 
-const jumpButtonContainerStyle = css({
-  textAlign: "right",
+const relatedActionsStyle = css({
+  display: "flex",
+  justifyContent: "flex-end",
+  flexWrap: "wrap",
+  gap: "1",
+});
+
+const optionRowStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "1.5",
+});
+
+const capacityContentStyle = css({
+  overflow: "hidden",
+  "&[data-animate=true]": {
+    animationDuration: "[180ms]",
+    animationTimingFunction: "ease-in-out",
+    "&[data-state=open]": { animationName: "[petrinautExpand]" },
+    "&[data-state=closed]": { animationName: "[petrinautCollapse]" },
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    animation: "none!",
+  },
+});
+
+const capacityFieldStyle = css({
+  paddingTop: "2",
+  paddingLeft: "6",
+  "& label": { fontWeight: "normal" },
 });
 
 const hintTextStyle = css({
@@ -61,65 +88,17 @@ const arcStyle = css({
  * Rendered as a headerless SubView at the top of the proportional layout.
  */
 const PlaceMainContent: React.FC = () => {
-  const codeNavigation = useCodeNavigation();
   const { place, types, isReadOnly, updatePlace } = usePlacePropertiesContext();
   const { selectItem } = use(EditorContext);
+  const { showAnimations } = use(UserSettingsContext);
+  const capacityEnabled =
+    place.capacity !== undefined && place.capacity !== null;
 
-  const { getItemType, extensions } = use(SDCPNContext);
+  const { extensions } = use(SDCPNContext);
   const {
     activeNet: { differentialEquations, types: availableTypes },
   } = use(ActiveNetContext);
 
-  const nameField = useDraftField({
-    sourceId: place.id,
-    sourceValue: place.name,
-  });
-  const [isNameInputFocused, setIsNameInputFocused] = useState(false);
-  const nameInputRef = useRef<HTMLInputElement>(null);
-  const rootDivRef = useRef<HTMLDivElement>(null);
-
-  // Handle clicks outside when name input is focused
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        isNameInputFocused &&
-        rootDivRef.current &&
-        !rootDivRef.current.contains(event.target as Node)
-      ) {
-        // Click is outside the root div and input is focused
-        event.stopPropagation();
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        nameInputRef.current?.blur();
-      }
-    };
-
-    if (isNameInputFocused) {
-      // Use capture phase to catch the event before it propagates
-      document.addEventListener("click", handleClickOutside, true);
-      return () => {
-        document.removeEventListener("click", handleClickOutside, true);
-      };
-    }
-  }, [isNameInputFocused]);
-
-  const handleNameBlur = () => {
-    const result = validateEntityName(nameField.value);
-
-    if (!result.valid) {
-      nameField.setError(result.error);
-      return;
-    }
-
-    nameField.setError(null);
-    if (result.name !== place.name) {
-      updatePlace({
-        placeId: place.id,
-        update: { name: result.name },
-      });
-    }
-  };
-
   const placeTypeName =
     types.find((candidate) => candidate.id === place.colorId)?.name ?? "None";
 
@@ -129,322 +108,274 @@ const PlaceMainContent: React.FC = () => {
     : [];
 
   return (
-    <div ref={rootDivRef}>
-      <SectionList>
-        <Section title="Name">
-          <PropertyValue text={place.name}>
+    <SectionList>
+      <Form.Section className={fieldsSectionStyle}>
+        <DraftFieldInput
+          label="Name"
+          sourceId={place.id}
+          sourceValue={place.name}
+          validate={validateEntityName}
+          onCommit={(name) =>
+            updatePlace({ placeId: place.id, update: { name } })
+          }
+          disabled={isReadOnly}
+          tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : undefined}
+        />
+        <DescriptionField
+          sourceId={place.id}
+          sourceValue={place.description}
+          onCommit={(description) =>
+            updatePlace({ placeId: place.id, update: { description } })
+          }
+          disabled={isReadOnly}
+          tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : undefined}
+        />
+      </Form.Section>
+
+      {extensions.colors && (
+        <Section
+          title="Accepted token type"
+          tooltip={`If tokens in this place should carry data ("colour"), assign a data type here.${
+            availableTypes.length === 0
+              ? " You must create a data type in the left-hand sidebar first."
+              : ""
+          } Tokens in places don't have to carry data, but they need one to enable dynamics (token data changing over time when in a place).`}
+        >
+          <PropertyValue text={placeTypeName}>
             <Tooltip
               content={UI_MESSAGES.READ_ONLY_MODE}
               disableTooltip={!isReadOnly}
             >
-              <TextInput
+              <Select
+                aria-label="Accepted token type"
+                required
                 size="sm"
-                inputRef={nameInputRef}
-                value={nameField.value}
-                onChange={(name) => {
-                  nameField.setValue(name);
-                  if (nameField.error) {
-                    nameField.setError(null);
-                  }
+                value={place.colorId ?? ""}
+                onChange={(colorId) => {
+                  const nextColorId = colorId === "" ? null : colorId;
+                  updatePlace({
+                    placeId: place.id,
+                    update: {
+                      colorId: nextColorId,
+                      dynamicsEnabled:
+                        nextColorId === null && place.dynamicsEnabled
+                          ? false
+                          : place.dynamicsEnabled,
+                    },
+                  });
                 }}
-                onFocus={() => setIsNameInputFocused(true)}
-                onBlur={() => {
-                  setIsNameInputFocused(false);
-                  handleNameBlur();
+                items={[
+                  { value: "", text: "None" },
+                  ...types.map((type) => ({
+                    value: type.id,
+                    text: type.name,
+                  })),
+                ]}
+                renderItem={(value) => {
+                  const type = types.find((tp) => tp.id === value);
+                  return (
+                    <div className={arcStyle}>
+                      {type?.displayColor && (
+                        <div
+                          className={typeColorDotStyle}
+                          style={{ backgroundColor: type.displayColor }}
+                        />
+                      )}
+                      {type?.name ?? "None"}
+                    </div>
+                  );
                 }}
                 disabled={isReadOnly}
-                invalid={!!nameField.error}
               />
             </Tooltip>
           </PropertyValue>
-          {!isReadOnly && nameField.error && (
-            <div className={errorMessageStyle}>{nameField.error}</div>
+
+          {place.colorId && (
+            <div className={relatedActionsStyle}>
+              <Button
+                variant="ghost"
+                tone="neutral"
+                size="xs"
+                onClick={() => {
+                  if (place.colorId) {
+                    selectItem({ type: "type", id: place.colorId });
+                  }
+                }}
+                iconName="arrowRight"
+                iconPosition="right"
+              >
+                View type
+              </Button>
+            </div>
           )}
         </Section>
+      )}
 
-        <Section title="Description">
-          <DescriptionTextArea
-            sourceId={place.id}
-            sourceValue={place.description}
-            onCommit={(description) =>
-              updatePlace({
-                placeId: place.id,
-                update: { description },
-              })
-            }
-            disabled={isReadOnly}
-            tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : undefined}
-          />
-        </Section>
+      {extensions.colors && extensions.dynamics && (
+        <Section
+          title="Dynamics"
+          tooltip="Token data can dynamically change over time when tokens remain in a place, governed by a differential equation."
+          renderHeaderAction={() => {
+            const dynamicsTooltip = isReadOnly
+              ? UI_MESSAGES.READ_ONLY_MODE
+              : place.colorId === null
+                ? UI_MESSAGES.DYNAMICS_REQUIRES_TYPE
+                : availableDiffEqs.length === 0
+                  ? "Create a differential equation for this type first"
+                  : undefined;
 
-        {extensions.colors && (
-          <Section
-            title="Accepted token type"
-            tooltip={`If tokens in this place should carry data ("colour"), assign a data type here.${
-              availableTypes.length === 0
-                ? " You must create a data type in the left-hand sidebar first."
-                : ""
-            } Tokens in places don't have to carry data, but they need one to enable dynamics (token data changing over time when in a place).`}
-          >
-            <PropertyValue text={placeTypeName}>
+            return (
               <Tooltip
-                content={UI_MESSAGES.READ_ONLY_MODE}
-                disableTooltip={!isReadOnly}
+                content={dynamicsTooltip}
+                disableTooltip={!dynamicsTooltip}
               >
-                <Select
-                  required
+                <Toggle
+                  aria-label="Dynamics"
                   size="sm"
-                  value={place.colorId ?? ""}
-                  onChange={(colorId) => {
-                    const nextColorId = colorId === "" ? null : colorId;
+                  tone="success"
+                  value={!!place.colorId && place.dynamicsEnabled}
+                  disabled={
+                    isReadOnly ||
+                    place.colorId === null ||
+                    availableDiffEqs.length === 0
+                  }
+                  onChange={(checked) => {
+                    const update: {
+                      dynamicsEnabled: boolean;
+                      differentialEquationId?: string | null;
+                    } = { dynamicsEnabled: checked };
+
+                    if (checked) {
+                      // Auto-select first available diff eq if none selected or previous no longer exists
+                      const currentIsValid = availableDiffEqs.some(
+                        (eq) => eq.id === place.differentialEquationId,
+                      );
+                      if (!currentIsValid && availableDiffEqs.length > 0) {
+                        update.differentialEquationId = availableDiffEqs[0]!.id;
+                      }
+                    }
+
                     updatePlace({
                       placeId: place.id,
-                      update: {
-                        colorId: nextColorId,
-                        dynamicsEnabled:
-                          nextColorId === null && place.dynamicsEnabled
-                            ? false
-                            : place.dynamicsEnabled,
-                      },
+                      update,
                     });
                   }}
-                  items={[
-                    { value: "", text: "None" },
-                    ...types.map((type) => ({
-                      value: type.id,
-                      text: type.name,
-                    })),
-                  ]}
-                  renderItem={(value) => {
-                    const type = types.find((tp) => tp.id === value);
-                    return (
-                      <div className={arcStyle}>
-                        {type?.displayColor && (
-                          <div
-                            className={typeColorDotStyle}
-                            style={{ backgroundColor: type.displayColor }}
-                          />
-                        )}
-                        {type?.name ?? "None"}
-                      </div>
-                    );
-                  }}
-                  disabled={isReadOnly}
                 />
               </Tooltip>
-            </PropertyValue>
-
-            {place.colorId && (
-              <div className={jumpButtonContainerStyle}>
-                <Button
-                  variant="subtle"
-                  tone="neutral"
-                  size="xs"
-                  onClick={() => {
-                    if (place.colorId) {
-                      const itemType = getItemType(place.colorId);
-                      if (itemType) {
-                        selectItem({ type: itemType, id: place.colorId });
-                      }
-                    }
-                  }}
-                  suffix={<Icon name="arrowRight" />}
-                >
-                  Jump to Type
-                </Button>
-              </div>
-            )}
-          </Section>
-        )}
-
-        {extensions.colors && extensions.dynamics && (
-          <Section
-            title="Dynamics"
-            tooltip="Token data can dynamically change over time when tokens remain in a place, governed by a differential equation."
-            renderHeaderAction={() => {
-              const dynamicsTooltip = isReadOnly
-                ? UI_MESSAGES.READ_ONLY_MODE
-                : place.colorId === null
-                  ? UI_MESSAGES.DYNAMICS_REQUIRES_TYPE
-                  : availableDiffEqs.length === 0
-                    ? "Create a differential equation for this type first"
-                    : undefined;
-
-              return (
+            );
+          }}
+        >
+          {place.colorId === null ? (
+            <div className={hintTextStyle}>
+              {availableTypes.length === 0
+                ? "Create a type in the left-hand sidebar first, then select it to enable dynamics."
+                : "Select a type to enable dynamics"}
+            </div>
+          ) : availableDiffEqs.length === 0 ? (
+            <div className={hintTextStyle}>
+              Create a differential equation for the selected type in the
+              left-hand sidebar first
+            </div>
+          ) : (
+            place.dynamicsEnabled && (
+              <>
                 <Tooltip
-                  content={dynamicsTooltip}
-                  disableTooltip={!dynamicsTooltip}
+                  content={UI_MESSAGES.READ_ONLY_MODE}
+                  disableTooltip={!isReadOnly}
                 >
-                  <Toggle
+                  <Select
+                    aria-label="Differential equation"
+                    required
+                    value={place.differentialEquationId ?? ""}
                     size="sm"
-                    tone="success"
-                    value={!!place.colorId && place.dynamicsEnabled}
-                    disabled={
-                      isReadOnly ||
-                      place.colorId === null ||
-                      availableDiffEqs.length === 0
-                    }
-                    onChange={(checked) => {
-                      const update: {
-                        dynamicsEnabled: boolean;
-                        differentialEquationId?: string | null;
-                      } = { dynamicsEnabled: checked };
-
-                      if (checked) {
-                        // Auto-select first available diff eq if none selected or previous no longer exists
-                        const currentIsValid = availableDiffEqs.some(
-                          (eq) => eq.id === place.differentialEquationId,
-                        );
-                        if (!currentIsValid && availableDiffEqs.length > 0) {
-                          update.differentialEquationId =
-                            availableDiffEqs[0]!.id;
-                        }
+                    onChange={(differentialEquationId) => {
+                      if (differentialEquationId) {
+                        updatePlace({
+                          placeId: place.id,
+                          update: { differentialEquationId },
+                        });
                       }
-
-                      updatePlace({
-                        placeId: place.id,
-                        update,
-                      });
                     }}
+                    items={availableDiffEqs.map((eq) => ({
+                      value: eq.id,
+                      text: eq.name,
+                    }))}
+                    disabled={isReadOnly}
                   />
                 </Tooltip>
-              );
-            }}
-          >
-            {place.colorId === null ? (
-              <div className={hintTextStyle}>
-                {availableTypes.length === 0
-                  ? "Create a type in the left-hand sidebar first, then select it to enable dynamics."
-                  : "Select a type to enable dynamics"}
-              </div>
-            ) : availableDiffEqs.length === 0 ? (
-              <div className={hintTextStyle}>
-                Create a differential equation for the selected type in the
-                left-hand sidebar first
-              </div>
-            ) : (
-              place.dynamicsEnabled && (
-                <>
-                  <Tooltip
-                    content={UI_MESSAGES.READ_ONLY_MODE}
-                    disableTooltip={!isReadOnly}
-                  >
-                    <Select
-                      required
-                      value={place.differentialEquationId ?? ""}
-                      size="sm"
-                      onChange={(differentialEquationId) => {
-                        if (differentialEquationId) {
-                          updatePlace({
-                            placeId: place.id,
-                            update: { differentialEquationId },
+
+                {place.differentialEquationId && (
+                  <div className={relatedActionsStyle}>
+                    <Button
+                      variant="ghost"
+                      tone="neutral"
+                      size="xs"
+                      onClick={() => {
+                        if (place.differentialEquationId) {
+                          selectItem({
+                            type: "differentialEquation",
+                            id: place.differentialEquationId,
                           });
                         }
                       }}
-                      items={availableDiffEqs.map((eq) => ({
-                        value: eq.id,
-                        text: eq.name,
-                      }))}
-                      disabled={isReadOnly}
-                    />
-                  </Tooltip>
-
-                  {place.differentialEquationId && (
-                    <div className={jumpButtonContainerStyle}>
-                      <Button
-                        variant="subtle"
-                        tone="neutral"
-                        size="xs"
-                        onClick={() => {
-                          if (place.differentialEquationId) {
-                            selectItem({
-                              type: "differentialEquation",
-                              id: place.differentialEquationId,
-                            });
-                          }
-                        }}
-                        suffix={<Icon name="arrowRight" />}
-                      >
-                        Jump to Differential Equation
-                      </Button>
-                      {codeNavigation.enabled && (
-                        <Button
-                          size="xs"
-                          variant="ghost"
-                          iconName="code"
-                          onClick={() => {
-                            if (place.differentialEquationId)
-                              codeNavigation.open(
-                                getDocumentUri(
-                                  "differential-equation",
-                                  place.differentialEquationId,
-                                ),
-                              );
-                          }}
-                        >
-                          Open equation code
-                        </Button>
-                      )}
-                    </div>
-                  )}
-                </>
-              )
-            )}
-          </Section>
-        )}
-        <Section
-          title="Component port"
-          tooltip="Exposes this place as an arc endpoint when its subnet is instantiated as a component."
-          renderHeaderLeading={() => (
-            <Checkbox
-              value={!!place.isPort}
-              disabled={isReadOnly}
-              onChange={(checked) => {
-                updatePlace({
-                  placeId: place.id,
-                  update: { isPort: checked === true },
-                });
-              }}
-            />
+                      iconName="arrowRight"
+                      iconPosition="right"
+                    >
+                      View equation
+                    </Button>
+                  </div>
+                )}
+              </>
+            )
           )}
-        >
-          <div className={hintTextStyle}>
-            {place.isPort
-              ? "Transitions in the parent net can connect arcs to this subnet place through a component instance."
-              : "Enable this for subnet boundary places that should be available as component instance arc endpoints."}
-          </div>
         </Section>
-        <Section
-          title="Token capacity"
-          tooltip="Optional maximum number of tokens this place can hold. Transitions that would take it over the limit cannot fire."
-          renderHeaderLeading={() => (
+      )}
+      <Section title="Options">
+        <div className={optionRowStyle}>
+          <Checkbox
+            size="sm"
+            label="Component port"
+            value={!!place.isPort}
+            disabled={isReadOnly}
+            onChange={(checked) =>
+              updatePlace({ placeId: place.id, update: { isPort: checked } })
+            }
+          />
+          <HelpTooltip content="Expose this place as an arc endpoint when its subnet is used as a component." />
+        </div>
+        <Collapsible.Root open={capacityEnabled} lazyMount unmountOnExit>
+          <div className={optionRowStyle}>
             <Checkbox
               size="sm"
-              value={place.capacity !== undefined && place.capacity !== null}
+              label="Token capacity"
+              value={capacityEnabled}
               disabled={isReadOnly}
-              onChange={(checked) => {
+              onChange={(checked) =>
                 updatePlace({
                   placeId: place.id,
-                  // Starts at 1; a scenario marking above the cap fails the
-                  // build with a message naming the place, so a too-low
-                  // default is loud rather than silent.
-                  update: { capacity: checked === true ? 1 : null },
-                });
-              }}
+                  update: { capacity: checked ? 1 : null },
+                })
+              }
             />
-          )}
-        >
-          {place.capacity === undefined || place.capacity === null ? (
-            <div className={hintTextStyle}>
-              This place can hold any number of tokens. Enable to cap it and
-              block the transitions that feed it once it is full.
-            </div>
-          ) : (
-            <>
+            <HelpTooltip content="Limit how many tokens this place can hold. Transitions that would exceed this limit cannot fire." />
+          </div>
+          <Collapsible.Content
+            className={capacityContentStyle}
+            data-animate={showAnimations}
+            inert={!capacityEnabled}
+          >
+            <Form.Field
+              label="Maximum tokens"
+              size="xs"
+              layout="inline"
+              inputAlign="end"
+              className={capacityFieldStyle}
+              disabled={isReadOnly}
+            >
               <NumberInput
-                size="sm"
+                size="xs"
+                width="maxNumber"
                 min={0}
-                // One below the engine's unbounded sentinel (2^32 - 1).
                 max={4294967294}
                 value={place.capacity}
                 onChange={(nextCapacity) => {
@@ -461,40 +392,26 @@ const PlaceMainContent: React.FC = () => {
                 }}
                 disabled={isReadOnly}
               />
-              <div className={hintTextStyle}>
-                A transition whose firing would take this place above{" "}
-                {place.capacity} {place.capacity === 1 ? "token" : "tokens"}{" "}
-                cannot fire, the same way a transition without enough input
-                tokens cannot fire.
-              </div>
-            </>
-          )}
-        </Section>
-        <Section
-          title="Default starting place"
-          tooltip="Pre-selects this place when creating a new scenario."
-          renderHeaderLeading={() => (
-            <Checkbox
-              size="sm"
-              value={!!place.showAsInitialState}
-              disabled={isReadOnly}
-              onChange={(checked) => {
-                updatePlace({
-                  placeId: place.id,
-                  update: { showAsInitialState: checked === true },
-                });
-              }}
-            />
-          )}
-        >
-          <div className={hintTextStyle}>
-            {place.showAsInitialState
-              ? "This place should have an initial marking defined to run the net, and will be pre-selected in new scenarios."
-              : "Enable if this place should have an initial marking defined to run the net. It will be pre-selected in new scenarios."}
-          </div>
-        </Section>
-      </SectionList>
-    </div>
+            </Form.Field>
+          </Collapsible.Content>
+        </Collapsible.Root>
+        <div className={optionRowStyle}>
+          <Checkbox
+            size="sm"
+            label="Default starting place"
+            value={!!place.showAsInitialState}
+            disabled={isReadOnly}
+            onChange={(checked) =>
+              updatePlace({
+                placeId: place.id,
+                update: { showAsInitialState: checked },
+              })
+            }
+          />
+          <HelpTooltip content="Pre-select this place when creating a scenario so you can define its initial tokens." />
+        </div>
+      </Section>
+    </SectionList>
   );
 };
 
@@ -504,14 +421,14 @@ const DeletePlaceAction: React.FC = () => {
 
   return (
     <Button
-      aria-label="Delete"
-      size="xs"
+      aria-label="Delete place"
+      size="sm"
       variant="ghost"
       tone="error"
       iconName="trash"
       onClick={() => removePlace({ placeId: place.id })}
       disabled={isReadOnly}
-      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"}
+      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete place"}
     />
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx
index 098ae06fdd5..698190cec9f 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx
@@ -180,6 +180,7 @@ const PlaceInitialStateContent: React.FC = () => {
           disableTooltip={!hasSimulationFrames && !isReadOnly}
         >
           <NumberInput
+            size="sm"
             min={0}
             value={currentTokenCount}
             onChange={(tokenCount) => {
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
index 1a164018f62..90c9f0972ca 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
@@ -61,7 +61,7 @@ const panelStyle = css({
 const messageStyle = css({
   padding: "[12px]",
   fontSize: "xs",
-  color: "[#666]",
+  color: "neutral.fg.muted",
   lineHeight: "[1.5]",
 });
 
@@ -174,6 +174,7 @@ const VisualizerHeaderAction: React.FC = () => {
           disableTooltip={!isReadOnly}
         >
           <Toggle
+            aria-label="Visualizer"
             size="sm"
             tone="success"
             value={hasVisualizer}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/properties-panel.stories.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/properties-panel.stories.tsx
index 88d914b6439..14025d470a1 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/properties-panel.stories.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/properties-panel.stories.tsx
@@ -1,40 +1,28 @@
-import {
-  type Dispatch,
-  type ReactNode,
-  type SetStateAction,
-  useState,
-} from "react";
+import { useEffect, useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
 
 import {
-  arcMatchesEndpoint,
-  DEFAULT_PETRINAUT_EXTENSIONS,
-  placeArcEndpoint,
+  createJsonDocHandle,
+  createPetrinaut,
   type Color,
   type DifferentialEquation,
   type Parameter,
   type Place,
+  type SelectionItem,
   type Transition,
 } from "@hashintel/petrinaut-core";
 
 import {
-  SDCPNContext,
-  type SDCPNContextValue,
-} from "../../../../../react/state/sdcpn-context";
+  defaultPetrinautNavigationState,
+  type PetrinautNavigationState,
+} from "../../../../../react/navigation";
+import { PetrinautProvider } from "../../../../../react/petrinaut-provider";
 import { MonacoProvider } from "../../../../monaco/provider";
-import { DifferentialEquationProperties } from "./differential-equation-properties/main";
-import { ParameterProperties } from "./parameter-properties/main";
-import { PlaceProperties } from "./place-properties/main";
-import { TransitionProperties } from "./transition-properties/main";
-import { TypeProperties } from "./type-properties/main";
+import { SelectedItemProperties } from "./selected-item-properties";
 
-import type { PetrinautMutations } from "../../../../../react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-// ---------------------------------------------------------------------------
-// Fake data
-// ---------------------------------------------------------------------------
-
-const TYPES: Color[] = [
+const types: Color[] = [
   {
     id: "type-1",
     name: "Protein",
@@ -54,7 +42,7 @@ const TYPES: Color[] = [
   },
 ];
 
-const DIFF_EQS: DifferentialEquation[] = [
+const differentialEquations: DifferentialEquation[] = [
   {
     id: "eq-1",
     name: "Decay Equation",
@@ -83,7 +71,7 @@ const DIFF_EQS: DifferentialEquation[] = [
   },
 ];
 
-const PLACES: Place[] = [
+const places: Place[] = [
   {
     id: "place-1",
     name: "PlantASupply",
@@ -113,7 +101,7 @@ const PLACES: Place[] = [
   },
 ];
 
-const TRANSITION: Transition = {
+const transition: Transition = {
   id: "transition-1",
   name: "ProcessOrder",
   inputArcs: [
@@ -128,7 +116,7 @@ const TRANSITION: Transition = {
   y: 100,
 };
 
-const PARAMETER: Parameter = {
+const parameter: Parameter = {
   id: "param-1",
   name: "Reaction Rate",
   variableName: "reaction_rate",
@@ -136,325 +124,95 @@ const PARAMETER: Parameter = {
   defaultValue: "0.5",
 };
 
-// ---------------------------------------------------------------------------
-// Stub SDCPN context (provides fake petriNetDefinition so panels can read
-// types / differential equations from the net).
-// EditorContext, SimulationContext, and PlaybackContext all have sensible
-// createContext() defaults so they don't need explicit providers here.
-// ---------------------------------------------------------------------------
-
-const SDCPN_STUB: SDCPNContextValue = {
-  createNewNet: () => {},
-  existingNets: [],
-  loadPetriNet: () => {},
-  petriNetId: "story-net",
-  petriNetDefinition: {
-    places: PLACES,
-    transitions: [TRANSITION],
-    types: TYPES,
-    differentialEquations: DIFF_EQS,
-    parameters: [PARAMETER],
-  },
-  readonly: false,
-  extensions: DEFAULT_PETRINAUT_EXTENSIONS,
-  setTitle: () => {},
-  title: "Story Net",
-  getItemType: () => null,
+const emptyPlace: Place = {
+  id: "place-empty",
+  name: "NewPlace",
+  colorId: null,
+  dynamicsEnabled: false,
+  differentialEquationId: null,
+  x: 0,
+  y: 0,
 };
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
+const emptyTransition: Transition = {
+  id: "transition-empty",
+  name: "NewTransition",
+  inputArcs: [],
+  outputArcs: [],
+  lambdaType: "predicate",
+  lambdaCode: "",
+  transitionKernelCode: "",
+  x: 0,
+  y: 0,
+};
 
-/** Deep-clone story state so local Storybook updates mimic app mutations. */
-function clone<T>(value: T): T {
-  return JSON.parse(JSON.stringify(value)) as T;
-}
+const PropertiesPanelStory = ({ selection }: { selection: SelectionItem }) => {
+  const [instance] = useState(() =>
+    createPetrinaut({
+      document: createJsonDocHandle({
+        id: "properties-panel-story",
+        initial: {
+          places: [...places, emptyPlace],
+          transitions: [transition, emptyTransition],
+          types,
+          differentialEquations,
+          parameters: [parameter],
+        },
+      }),
+    }),
+  );
+  const [navigationState, setNavigationState] =
+    useState<PetrinautNavigationState>(() => ({
+      ...defaultPetrinautNavigationState,
+      selection: [selection],
+    }));
 
-function applyStoryUpdate<T>(
-  setValue: Dispatch<SetStateAction<T>>,
-  update: Partial<T>,
-): void {
-  setValue((prev) => ({ ...clone(prev), ...clone(update) }));
-}
+  useEffect(() => () => instance.dispose(), [instance]);
 
-/** Wraps panel content with the required contexts, filling the viewport. */
-const PanelFrame = ({ children }: { children: ReactNode }) => (
-  <MonacoProvider>
-    <SDCPNContext value={SDCPN_STUB}>
-      <div
-        style={{
-          width: "100%",
-          height: "100vh",
-          display: "flex",
-          overflow: "hidden",
-        }}
-      >
+  return (
+    <PetrinautProvider
+      instance={instance}
+      netManagement={{
+        title: "Story Net",
+        existingNets: [],
+        createNewNet: () => {},
+        loadPetriNet: () => {},
+      }}
+      navigation={{ state: navigationState, onNavigate: setNavigationState }}
+    >
+      <MonacoProvider>
         <div
           style={{
-            flex: 1,
-            minWidth: 0,
+            width: "100%",
+            height: "100vh",
             display: "flex",
-            flexDirection: "column",
+            overflow: "hidden",
           }}
         >
-          {children}
+          <div
+            style={{
+              flex: 1,
+              minWidth: 0,
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <SelectedItemProperties />
+          </div>
         </div>
-      </div>
-    </SDCPNContext>
-  </MonacoProvider>
-);
-
-// ---------------------------------------------------------------------------
-// Interactive story components (manage local state)
-// ---------------------------------------------------------------------------
-
-const PlacePanelStory = () => {
-  const [place, setPlace] = useState<Place>(PLACES[0]!);
-  const updatePlace: PetrinautMutations["updatePlace"] = (input) => {
-    applyStoryUpdate(setPlace, input.update);
-  };
-  return (
-    <PanelFrame>
-      <PlaceProperties place={place} types={TYPES} updatePlace={updatePlace} />
-    </PanelFrame>
-  );
-};
-
-const PlaceEmptyPanelStory = () => {
-  const [place, setPlace] = useState<Place>({
-    id: "place-empty",
-    name: "NewPlace",
-    colorId: null,
-    dynamicsEnabled: false,
-    differentialEquationId: null,
-    x: 0,
-    y: 0,
-  });
-  const updatePlace: PetrinautMutations["updatePlace"] = (input) => {
-    applyStoryUpdate(setPlace, input.update);
-  };
-  return (
-    <PanelFrame>
-      <PlaceProperties place={place} types={TYPES} updatePlace={updatePlace} />
-    </PanelFrame>
-  );
-};
-
-const TransitionPanelStory = () => {
-  const [transition, setTransition] = useState<Transition>(TRANSITION);
-  const endpointFromInput = (input: {
-    placeId?: string;
-    endpoint?: Parameters<typeof arcMatchesEndpoint>[1];
-  }) => input.endpoint ?? placeArcEndpoint(input.placeId ?? "");
-  const updateTransition: PetrinautMutations["updateTransition"] = (input) => {
-    applyStoryUpdate(setTransition, input.update);
-  };
-  const updateArcWeight: PetrinautMutations["updateArcWeight"] = (input) => {
-    setTransition((prev) => {
-      const next = clone(prev);
-      const arcs =
-        input.arcDirection === "input" ? next.inputArcs : next.outputArcs;
-      const endpoint = endpointFromInput(input);
-      const arc = arcs.find((item) => arcMatchesEndpoint(item, endpoint));
-      if (arc) {
-        arc.weight = input.weight;
-      }
-      return next;
-    });
-  };
-  const updateArcPlace: PetrinautMutations["updateArcPlace"] = (input) => {
-    setTransition((prev) => {
-      const next = clone(prev);
-      const arcs =
-        input.arcDirection === "input" ? next.inputArcs : next.outputArcs;
-      const oldEndpoint =
-        input.oldEndpoint ?? placeArcEndpoint(input.oldPlaceId ?? "");
-      const newEndpoint =
-        input.newEndpoint ?? placeArcEndpoint(input.newPlaceId ?? "");
-      const arc = arcs.find((item) => arcMatchesEndpoint(item, oldEndpoint));
-      if (arc) {
-        delete arc.placeId;
-        delete arc.endpoint;
-        Object.assign(
-          arc,
-          newEndpoint.kind === "place"
-            ? { placeId: newEndpoint.placeId }
-            : { endpoint: newEndpoint },
-        );
-      }
-      return next;
-    });
-  };
-  const removeArc: PetrinautMutations["removeArc"] = (input) => {
-    setTransition((prev) => {
-      const next = clone(prev);
-      const arcs =
-        input.arcDirection === "input" ? next.inputArcs : next.outputArcs;
-      const endpoint = endpointFromInput(input);
-      const index = arcs.findIndex((arc) => arcMatchesEndpoint(arc, endpoint));
-      if (index !== -1) {
-        arcs.splice(index, 1);
-      }
-      return next;
-    });
-  };
-  return (
-    <PanelFrame>
-      <TransitionProperties
-        transition={transition}
-        net={{ places: PLACES, componentInstances: [] }}
-        places={PLACES}
-        types={TYPES}
-        updateTransition={updateTransition}
-        onArcWeightUpdate={updateArcWeight}
-        updateArcPlace={updateArcPlace}
-        removeArc={removeArc}
-      />
-    </PanelFrame>
-  );
-};
-
-const TransitionEmptyPanelStory = () => {
-  const [transition, setTransition] = useState<Transition>({
-    id: "transition-empty",
-    name: "NewTransition",
-    inputArcs: [],
-    outputArcs: [],
-    lambdaType: "predicate",
-    lambdaCode: "",
-    transitionKernelCode: "",
-    x: 0,
-    y: 0,
-  });
-  const updateTransition: PetrinautMutations["updateTransition"] = (input) => {
-    applyStoryUpdate(setTransition, input.update);
-  };
-  return (
-    <PanelFrame>
-      <TransitionProperties
-        transition={transition}
-        net={{ places: PLACES, componentInstances: [] }}
-        places={PLACES}
-        types={TYPES}
-        updateTransition={updateTransition}
-        onArcWeightUpdate={() => {}}
-        updateArcPlace={() => {}}
-        removeArc={() => {}}
-      />
-    </PanelFrame>
-  );
-};
-
-const TypePanelStory = () => {
-  const [type, setType] = useState<Color>(TYPES[0]!);
-  const updateType: PetrinautMutations["updateType"] = (input) => {
-    applyStoryUpdate(setType, input.update);
-  };
-  const addTypeElement: PetrinautMutations["addTypeElement"] = (input) => {
-    setType((prev) => {
-      const next = clone(prev);
-      next.elements.push(clone(input.element));
-      return next;
-    });
-  };
-  const updateTypeElement: PetrinautMutations["updateTypeElement"] = (
-    input,
-  ) => {
-    setType((prev) => {
-      const next = clone(prev);
-      const element = next.elements.find(
-        (item) => item.elementId === input.elementId,
-      );
-      if (element) {
-        Object.assign(element, clone(input.update));
-      }
-      return next;
-    });
-  };
-  const removeTypeElement: PetrinautMutations["removeTypeElement"] = (
-    input,
-  ) => {
-    setType((prev) => ({
-      ...clone(prev),
-      elements: prev.elements.filter(
-        (element) => element.elementId !== input.elementId,
-      ),
-    }));
-  };
-  const moveTypeElement: PetrinautMutations["moveTypeElement"] = (input) => {
-    setType((prev) => {
-      const next = clone(prev);
-      const fromIndex = next.elements.findIndex(
-        (element) => element.elementId === input.elementId,
-      );
-      if (fromIndex !== -1) {
-        const [element] = next.elements.splice(fromIndex, 1);
-        if (element) {
-          next.elements.splice(input.toIndex, 0, element);
-        }
-      }
-      return next;
-    });
-  };
-  return (
-    <PanelFrame>
-      <TypeProperties
-        type={type}
-        updateType={updateType}
-        addTypeElement={addTypeElement}
-        updateTypeElement={updateTypeElement}
-        removeTypeElement={removeTypeElement}
-        moveTypeElement={moveTypeElement}
-      />
-    </PanelFrame>
+      </MonacoProvider>
+    </PetrinautProvider>
   );
 };
 
-const ParameterPanelStory = () => {
-  const [parameter, setParameter] = useState<Parameter>(PARAMETER);
-  const updateParameter: PetrinautMutations["updateParameter"] = (input) => {
-    applyStoryUpdate(setParameter, input.update);
-  };
-  return (
-    <PanelFrame>
-      <ParameterProperties
-        parameter={parameter}
-        updateParameter={updateParameter}
-      />
-    </PanelFrame>
-  );
-};
-
-const DifferentialEquationPanelStory = () => {
-  const [diffEq, setDiffEq] = useState<DifferentialEquation>(DIFF_EQS[0]!);
-  const updateDiffEq: PetrinautMutations["updateDifferentialEquation"] = (
-    input,
-  ) => {
-    applyStoryUpdate(setDiffEq, input.update);
-  };
-  return (
-    <PanelFrame>
-      <DifferentialEquationProperties
-        differentialEquation={diffEq}
-        types={TYPES}
-        places={PLACES}
-        updateDifferentialEquation={updateDiffEq}
-      />
-    </PanelFrame>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Storybook
-// ---------------------------------------------------------------------------
-
 const meta = {
   title: "Panels / Properties Panel",
+  component: PropertiesPanelStory,
   parameters: {
     layout: "fullscreen",
   },
-} satisfies Meta;
+  render: (args) => <PropertiesPanelStory key={args.selection.id} {...args} />,
+} satisfies Meta<typeof PropertiesPanelStory>;
 
 export default meta;
 
@@ -462,35 +220,52 @@ type Story = StoryObj<typeof meta>;
 
 export const PlaceWithType: Story = {
   name: "Place (with type & dynamics)",
-  render: () => <PlacePanelStory />,
+  args: { selection: { type: "place", id: "place-1" } },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      await canvas.findByRole("textbox", { name: "Name" }),
+    ).toHaveValue("PlantASupply");
+    for (const label of [
+      "Component port",
+      "Token capacity",
+      "Default starting place",
+    ]) {
+      const checkbox = canvas.getByRole("checkbox", { name: label });
+      await userEvent.click(canvas.getByText(label, { exact: true }));
+      await expect(checkbox).toBeChecked();
+      await userEvent.click(canvas.getByText(label, { exact: true }));
+      await expect(checkbox).not.toBeChecked();
+    }
+  },
 };
 
 export const PlaceEmpty: Story = {
   name: "Place (no type)",
-  render: () => <PlaceEmptyPanelStory />,
+  args: { selection: { type: "place", id: "place-empty" } },
 };
 
 export const TransitionWithArcs: Story = {
   name: "Transition (with arcs)",
-  render: () => <TransitionPanelStory />,
+  args: { selection: { type: "transition", id: "transition-1" } },
 };
 
 export const TransitionEmpty: Story = {
   name: "Transition (empty)",
-  render: () => <TransitionEmptyPanelStory />,
+  args: { selection: { type: "transition", id: "transition-empty" } },
 };
 
 export const Type: Story = {
   name: "Type",
-  render: () => <TypePanelStory />,
+  args: { selection: { type: "type", id: "type-1" } },
 };
 
 export const ParameterPanel: Story = {
   name: "Parameter",
-  render: () => <ParameterPanelStory />,
+  args: { selection: { type: "parameter", id: "param-1" } },
 };
 
 export const DifferentialEquationPanel: Story = {
   name: "Differential Equation",
-  render: () => <DifferentialEquationPanelStory />,
+  args: { selection: { type: "differentialEquation", id: "eq-1" } },
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx
index 59022cb2f49..d1cace9e19b 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx
@@ -29,7 +29,7 @@ import type { SubView } from "../../../../../../components/sub-view/types";
 
 const emptyArcMessageStyle = css({
   fontSize: "xs",
-  color: "[#999]",
+  color: "neutral.fg.muted",
 });
 
 const fieldsSectionStyle = css({
@@ -283,14 +283,14 @@ const DeleteTransitionAction: React.FC = () => {
 
   return (
     <Button
-      aria-label="Delete"
-      size="xs"
+      aria-label="Delete transition"
+      size="sm"
       variant="ghost"
       tone="error"
       iconName="trash"
       onClick={() => removeTransition({ transitionId: transition.id })}
       disabled={isReadOnly}
-      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"}
+      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete transition"}
     />
   );
 };