@principal-ai/subsystems-react 0.52.0 → 0.53.1

package/src/stories/Subsystem/C4Graph/C4CardGrow.stories.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { C4NodeCard, NODE_W, NODE_H } from '../../../subsystem/C4NodeCard';
+import type { C4Container, C4Component } from '../../../subsystem/c4';
+
+const meta = {
+  title: 'Subsystem/C4Graph/C4CardGrow',
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Isolated grow/shrink of one container card — no graph, no frames, no
+// components. Toggling the expand affordance animates the card's own size
+// between the box dimensions and an expanded rectangle, so the FLIP motion can
+// be judged on its own.
+// ---------------------------------------------------------------------------
+
+const GROWN_W = 420;
+const GROWN_H = 300;
+
+const card: C4Container = {
+  kind: 'container',
+  id: 'container:studio-host',
+  label: 'Subsystem Studio — host',
+  containerKind: 'application',
+  technology: 'Bun + Electrobun',
+  description: 'Owns the model store on disk and serves the renderer over RPC.',
+  state: 'accepted',
+  parentId: 'system:acme',
+};
+
+const COMPONENTS: C4Component[] = [
+  {
+    kind: 'component',
+    id: 'component:audit-verification',
+    label: 'Audit & verification',
+    container: card.id,
+    technology: 'Bun',
+    description: 'Checks a subsystem model and reports what is wrong.',
+    state: 'accepted',
+  },
+  {
+    kind: 'component',
+    id: 'component:model-store',
+    label: 'Model store I/O',
+    container: card.id,
+    technology: 'Bun fs',
+    description: 'Reads and writes model JSON under ~/.principal.',
+    state: 'accepted',
+  },
+];
+
+function Demo() {
+  const [open, setOpen] = useState(false);
+  const [grown, setGrown] = useState(false);
+  // True when the card has finished shrinking back to its box — only then is the
+  // description shown again (it stays hidden through open *and* the shrink).
+  const [settled, setSettled] = useState(true);
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#12141a',
+      }}
+    >
+      <div
+        onTransitionEnd={(e) => {
+          // The card's own size transition bubbles here.
+          if (e.propertyName !== 'width') return;
+          if (open) setGrown(true);
+          else setSettled(true);
+        }}
+      >
+        <C4NodeCard
+          node={card}
+          width={open ? GROWN_W : NODE_W}
+          height={open ? GROWN_H : NODE_H}
+          showDescription={settled}
+          onExpand={() => {
+            // Leaving the resting state: hide the description immediately.
+            setSettled(false);
+            if (open) setGrown(false);
+            setOpen((v) => !v);
+          }}
+        >
+          {grown && (
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
+                gap: 10,
+                marginTop: 8,
+                minHeight: 0,
+              }}
+            >
+              {COMPONENTS.map((c) => (
+                <C4NodeCard key={c.id} node={c} />
+              ))}
+            </div>
+          )}
+        </C4NodeCard>
+      </div>
+    </div>
+  );
+}
+
+export const Grow: Story = {
+  render: () => <Demo />,
+};

package/src/stories/Subsystem/C4Graph/C4Component.stories.tsx

@@ -3,7 +3,7 @@ import '@xyflow/react/dist/style.css';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import { C4Graph } from '../../../subsystem/C4Graph';
-import type { C4Edge, C4Group, C4Model, C4Element, C4Component } from '../../../subsystem/c4';
+import type { C4Edge, C4Model, C4Element, C4Component, C4Container } from '../../../subsystem/c4';
 
 const meta = {
   title: 'Subsystem/C4Graph/C4Component',
@@ -53,7 +53,25 @@ function component(
   };
 }
 
+/** A container element. Its components make it frame in the renderer. */
+function container(over: Partial<C4Container> & Pick<C4Container, 'id' | 'label'>): C4Element {
+  return {
+    kind: 'container',
+    containerKind: 'application',
+    technology: '',
+    state: 'accepted',
+    members: [],
+    constructs: [],
+    parentId: SYSTEM.id,
+    ...over,
+  };
+}
+
 const NODES: C4Element[] = [
+  // --- the containers these components sit in ------------------------------
+  container({ id: HOST, label: 'Subsystem Studio — host', technology: 'Bun + Electrobun' }),
+  container({ id: RENDERER, label: 'Subsystem Studio — renderer', technology: 'React 19' }),
+
   // --- inside the host ------------------------------------------------------
   component({
     id: 'component:audit-verification',
@@ -131,13 +149,6 @@ const NODES: C4Element[] = [
   }),
 ];
 
-/** The two containers at this level, drawn as frames. */
-const GROUPS: C4Group[] = [
-  { id: HOST, kind: 'container', label: 'Subsystem Studio — host', parentId: SYSTEM.id, memberIds: NODES.filter((n) => n.parentId === HOST).map((n) => n.id) },
-  { id: RENDERER, kind: 'container', label: 'Subsystem Studio — renderer', parentId: SYSTEM.id, memberIds: NODES.filter((n) => n.parentId === RENDERER).map((n) => n.id) },
-  { id: SYSTEM.id, kind: 'system', label: SYSTEM.label, memberIds: [HOST, RENDERER] },
-];
-
 /** A line between components — protocol-labelled, like the container view. */
 function edge(id: string, source: string, target: string, protocol: string): C4Edge {
   return { id, source, target, label: protocol, protocol, mechanisms: [], count: 1 };
@@ -158,7 +169,6 @@ const componentModel: C4Model = {
   view: 'component',
   system: SYSTEM,
   nodes: NODES,
-  groups: GROUPS,
   edges: EDGES,
 };
 
@@ -170,7 +180,7 @@ function Demo() {
   return (
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
-        <C4Graph model={model} title="Subsystem Modeling" onSelectNode={setSelected} />
+        <C4Graph model={model} onSelectNode={setSelected} />
       </div>
       <div
         style={{
@@ -184,7 +194,7 @@ function Demo() {
           borderTop: '1px solid #333',
         }}
       >
-        <span>{components} components in {model.groups.filter((g) => g.kind === 'container').length} containers</span>
+        <span>{components} components in {model.nodes.filter((n) => n.kind === 'container').length} containers</span>
         <span>{model.edges.length} lines</span>
         <span>selected: {selected ?? '(none)'}</span>
         <span style={{ color: '#777' }}>each component is a grouping stitched across many models</span>

package/src/stories/Subsystem/C4Graph/C4Container.stories.tsx

@@ -195,14 +195,6 @@ const containerModel: C4Model = {
   view: 'container',
   system: SYSTEM,
   nodes: NODES,
-  groups: [
-    {
-      id: SYSTEM.id,
-      kind: 'system',
-      label: SYSTEM.label,
-      memberIds: NODES.filter((n) => n.parentId === SYSTEM.id).map((n) => n.id),
-    },
-  ],
   edges: EDGES,
 };
 
@@ -218,7 +210,7 @@ function Demo() {
   return (
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
-        <C4Graph model={model} title="Subsystem Modeling" onSelectNode={setSelected} />
+        <C4Graph model={model} onSelectNode={setSelected} />
       </div>
       <div
         style={{

package/src/stories/Subsystem/C4Graph/C4Transition.stories.tsx

@@ -0,0 +1,131 @@
+import React, { useMemo, useState } from 'react';
+import '@xyflow/react/dist/style.css';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { C4Graph } from '../../../subsystem/C4Graph';
+import type { C4Edge, C4Model, C4Element, C4Component, C4Container } from '../../../subsystem/c4';
+
+const meta = {
+  title: 'Subsystem/C4Graph/C4Transition',
+  component: C4Graph,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof C4Graph>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Drill-down: two layouts, one transition.
+//
+// Closed, the container is a box. Its expand affordance (bottom-right) opens it,
+// and the graph swaps to a *second, already-computed* layout in which the same
+// element is an ELK parent — so ELK sizes it to hold its own components, and they
+// arrive as nested cards. The same affordance closes it again.
+//
+// Nothing is a frame here: the container stays a card and grows (its own
+// width/height transition), while the system frame around it morphs by transform.
+// Components stay hidden until the grow settles, and the card's description
+// returns only after the shrink — hence the two settled states below.
+//
+// The story also carries component→component edges, which the nested layout
+// routes inside the parent.
+// ---------------------------------------------------------------------------
+
+const SYSTEM = { id: 'system:acme', label: 'Subsystem Modeling', repoKey: 'pkg:github/acme/subsystem-modeling' };
+const HOST = 'container:studio-host';
+
+function container(over: Partial<C4Container> & Pick<C4Container, 'id' | 'label'>): C4Element {
+  return {
+    kind: 'container',
+    containerKind: 'application',
+    technology: '',
+    state: 'accepted',
+    members: [],
+    constructs: [],
+    parentId: SYSTEM.id,
+    ...over,
+  };
+}
+
+function component(
+  over: Partial<C4Component> & Pick<C4Component, 'id' | 'label' | 'container'>,
+): C4Element {
+  return {
+    kind: 'component',
+    members: [],
+    constructs: [],
+    state: 'accepted',
+    parentId: over.container,
+    technology: 'Bun',
+    ...over,
+  };
+}
+
+const NODES: C4Element[] = [
+  container({ id: HOST, label: 'Subsystem Studio — host', technology: 'Bun + Electrobun', description: 'The Electron main process.' }),
+  component({ id: 'component:audit-verification', label: 'Audit & verification', container: HOST, description: 'Checks a model, reports problems.' }),
+  component({ id: 'component:maintain-proposals', label: 'Maintain & proposals', container: HOST, description: 'Runs the maintain agent, records proposals.' }),
+  component({ id: 'component:model-store', label: 'Model store I/O', container: HOST, technology: 'Bun fs', description: 'Reads and writes model JSON.' }),
+];
+
+function edge(id: string, source: string, target: string, protocol: string): C4Edge {
+  return { id, source, target, label: protocol, protocol, mechanisms: [], count: 1 };
+}
+
+const EDGES: C4Edge[] = [
+  edge('e:audit-store', 'component:audit-verification', 'component:model-store', 'fs · JSON'),
+  edge('e:proposals-store', 'component:maintain-proposals', 'component:model-store', 'fs · JSON'),
+];
+
+function Demo() {
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const model = useMemo<C4Model>(
+    () => ({ view: 'container', system: SYSTEM, nodes: NODES, edges: EDGES, openContainerId: openId }),
+    [openId],
+  );
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
+        <C4Graph
+          model={model}
+          onSelectNode={setSelected}
+          onOpenContainer={setOpenId}
+          onCloseContainer={() => setOpenId(null)}
+        />
+      </div>
+      <div
+        style={{
+          padding: '6px 12px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 18,
+          fontFamily: 'monospace',
+          fontSize: 12,
+          color: '#aaa',
+          borderTop: '1px solid #333',
+        }}
+      >
+        <span>{openId ? `opened: ${openId}` : 'closed'}</span>
+        <span>selected: {selected ?? '(none)'}</span>
+        <span style={{ color: '#777' }}>
+          the expand icon (bottom-right of the container) opens it, and closes it again
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export const DrillDown: Story = {
+  render: () => <Demo />,
+};