FE-1595: Polish properties-panel controls

.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.

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
 

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.

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 }) => {

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",
   },
 });
 

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>
 );
 

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",

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"}
     />
   );
 };

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"
+      }
     />
   );
 };