feat(apollo-react): add NodePropertyPanel editor stories with inline editing

- Editor Full, Compact, and Inline stories for NodePropertyPanel
- Inline title/category editing on all editor stories (click-to-edit)
- CasePanel with inline title editing and delete-on-hover for Compact
- InlineCaseRow with 40px Monaco field and Fixed/Expression mode toggle
- Monaco Future Dark/Light backgrounds updated to surface-overlay
- Switch component replaced with apollo-wind Switch in all editor stories
- @monaco-editor/react added as devDependency
- biome: noAutofocus off for stories files; noUnused cleanup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 1980computer

packages/apollo-react/biome.json

@@ -75,6 +75,16 @@
     }
   },
   "overrides": [
+    {
+      "includes": ["**/*.stories.tsx"],
+      "linter": {
+        "rules": {
+          "a11y": {
+            "noAutofocus": "off"
+          }
+        }
+      }
+    },
     {
       "includes": ["src/canvas/**"],
       "linter": {

packages/apollo-react/package.json

@@ -239,6 +239,7 @@
     "zustand": "^5.0.9"
   },
   "devDependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@lingui/cli": "^5.6.1",
     "@lingui/conf": "^5.6.1",
     "@lingui/format-json": "^5.6.1",

packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx

@@ -48,6 +48,7 @@ export function NodePropertyPanel({
   resetKey,
   className,
   contentInset = '1.5rem',
+  children,
 }: NodePropertyPanelProps) {
   const hasNodeHeader = !!(nodeLabel || nodeCategory || nodeIcon || action);
 
@@ -60,10 +61,13 @@ export function NodePropertyPanel({
   );
 
   return (
-    <div className={cn('flex min-h-0 flex-col bg-surface-raised', className)}>
+    <div
+      className={cn('flex min-h-0 flex-col bg-surface-raised', className)}
+      style={{ '--mf-content-inset': contentInset } as CSSProperties}
+    >
       {/* ── Title bar (optional; host panel system may own it) ── */}
       {panelTitle && (
-        <div className="flex h-10 shrink-0 items-center justify-between border-b border-border-subtle px-2">
+        <div className="flex h-10 shrink-0 items-center justify-between px-2">
           <div className="flex items-center gap-1">
             <div className="grid size-8 place-items-center text-foreground-subtle">
               <GripVertical size={14} />
@@ -86,8 +90,8 @@ export function NodePropertyPanel({
 
       {/* ── Node identity row ── */}
       {hasNodeHeader && (
-        <div className="flex shrink-0 items-center justify-between gap-4 border-b border-border-subtle px-6 py-4">
-          <div className="flex min-w-0 flex-1 items-center gap-3">
+        <div className="flex shrink-0 items-center justify-between gap-4 py-4 [padding-inline:var(--mf-content-inset,1.5rem)]">
+          <div className="flex min-w-0 flex-1 items-center gap-3.5">
             {nodeIcon && (
               <div className="grid size-11 shrink-0 place-items-center rounded-xl bg-surface-overlay text-foreground-subtle [&>svg]:size-5">
                 {nodeIcon}
@@ -97,12 +101,12 @@ export function NodePropertyPanel({
               {nodeLabel && (
                 // <span>, not <p>: host apps (e.g. Angular Material's `.mat-typography p`)
                 // inject a bottom margin on <p> that breaks the header alignment.
-                <span className="block truncate text-lg font-semibold leading-6 tracking-[-0.4px] text-foreground">
+                <span className="block truncate text-base font-semibold leading-5 tracking-[-0.3px] text-foreground">
                   {nodeLabel}
                 </span>
               )}
               {nodeCategory && (
-                <span className="block truncate text-sm leading-5 text-foreground-muted">
+                <span className="block truncate text-xs leading-4 text-foreground-muted">
                   {nodeCategory}
                 </span>
               )}
@@ -112,19 +116,16 @@ export function NodePropertyPanel({
         </div>
       )}
 
-      {/* ── Form ── */}
-      {!formSchema ? (
+      {/* ── Content (children) or Form ── */}
+      {children ? (
+        <div className="min-h-0 flex-1 overflow-auto">{children}</div>
+      ) : !formSchema ? (
         <div className="px-6 py-4 text-xs text-foreground-subtle">
           No form schema defined for this node.
         </div>
       ) : (
         <div className="min-h-0 flex-1 overflow-auto">
-          <div
-            style={{ ...SURFACE_REMAP, '--mf-content-inset': contentInset } as CSSProperties}
-            className="[&_label]:text-foreground-muted"
-          >
-            {/* Horizontal padding + the tab underline's full-bleed both derive from
-                `--mf-content-inset`, so they stay in lockstep. */}
+          <div style={SURFACE_REMAP} className="[&_label]:text-foreground-muted">
             <MetadataForm
               key={resetKey}
               schema={formSchema}

packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx

@@ -46,4 +46,11 @@ export interface NodePropertyPanelProps {
    * edges and re-insets its labels to line up with the fields. Default `1.5rem`.
    */
   contentInset?: string;
+  /**
+   * Arbitrary content rendered in the panel body instead of a `MetadataForm`.
+   * Use when the node's properties are not schema-driven (e.g. an expression
+   * editor, a preview pane, or a custom layout). When provided, `schema` is
+   * ignored and the children fill the scrollable content area.
+   */
+  children?: ReactNode;
 }

packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.types.ts

@@ -387,20 +387,15 @@ function TabbedStepForm({
   return (
     <>
       <Tabs value={currentTab} onValueChange={setActiveTab} className="flex flex-col gap-4">
-        {/* Underline tabs (properties-panel style), overriding the primitive's
-          default segmented/pill look. Scoped here so the shared Tabs primitive
-          stays segmented for other consumers. */}
-        {/* Horizontal scroll when the tabs overflow a narrow panel (scrollbar hidden; tabs
-          stay on one line instead of clipping). The underline can optionally bleed past the
-          form's horizontal padding to the panel edges: a consumer sets `--mf-content-inset`
-          to its content inset and the list bleeds by that, re-insetting the labels. Default
-          0 keeps the underline at content width — correct for any padding. */}
-        <TabsList className="h-auto justify-start gap-4 overflow-x-auto rounded-none border-b border-border bg-transparent py-0 text-muted-foreground [-ms-overflow-style:none] [margin-inline:calc(var(--mf-content-inset,0px)*-1)] [padding-inline:var(--mf-content-inset,0px)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {/* Segmented pill tabs (properties-panel style). Horizontal scroll when
+          tabs overflow a narrow panel; scrollbar is hidden so tabs stay on one
+          line without clipping. */}
+        <TabsList className="h-auto justify-start gap-0.5 overflow-x-auto rounded-lg bg-transparent p-0.5 text-muted-foreground [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {visibleSteps.map((step) => (
             <TabsTrigger
               key={step.id}
               value={step.id}
-              className="-mb-px shrink-0 whitespace-nowrap rounded-none border-b-2 border-transparent bg-transparent px-1 pb-2 pt-1 font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none"
+              className="inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm"
             >
               {step.title}
             </TabsTrigger>

packages/apollo-wind/src/components/forms/metadata-form.tsx

@@ -105,7 +105,7 @@ export const apolloFutureDarkMonaco = {
   inherit: false,
   rules: darkRules,
   colors: {
-    'editor.background': '#18181b', // zinc-900  surface-raised
+    'editor.background': '#27272a', // zinc-800  surface-overlay
     'editor.foreground': '#a1a1aa', // zinc-400  --code-rest
     'editorLineNumber.foreground': '#52525b', // zinc-600  comment level
     'editorLineNumber.activeForeground': '#a1a1aa', // zinc-400
@@ -149,7 +149,7 @@ export const apolloFutureLightMonaco = {
   inherit: false,
   rules: lightRules,
   colors: {
-    'editor.background': '#f4f4f5', // zinc-100  surface-raised
+    'editor.background': '#e4e4e7', // zinc-200  surface-overlay
     'editor.foreground': '#52525b', // zinc-600  --code-rest
     'editorLineNumber.foreground': '#a1a1aa', // zinc-400  comment level
     'editorLineNumber.activeForeground': '#71717a', // zinc-500