@principal-ai/subsystems-react 0.24.24 → 0.24.26

package/src/subsystem/model.ts

@@ -502,6 +502,27 @@ export function moduleGroupNodeId(moduleKey: string): string {
   return `module:${moduleKey}`;
 }
 
+export const MODULE_BADGE_INSET = 12;
+const MODULE_BADGE_CHAR_WIDTH = 12.5;
+const MODULE_BADGE_CHROME = 16;
+const MODULE_FRAME_BORDER = 4;
+
+export function moduleBadgeLabel(path: string, availableWidth = 0): string {
+  if (path.length * MODULE_BADGE_CHAR_WIDTH + MODULE_BADGE_CHROME <= availableWidth) {
+    return path;
+  }
+  const parts = path.split(/[\\/]/).filter((part) => part !== '' && part !== '.');
+  if (parts.length <= 2) return path;
+  return `${parts[0]}/…/${parts[parts.length - 1]}`;
+}
+
+export function moduleMinWidthForBadge(path: string): number {
+  return Math.ceil(
+    moduleBadgeLabel(path).length * MODULE_BADGE_CHAR_WIDTH +
+      MODULE_BADGE_CHROME + MODULE_BADGE_INSET * 2 + MODULE_FRAME_BORDER,
+  );
+}
+
 /** React Flow id for a package (repo) boundary group node. */
 export function packageGroupNodeId(packageKey: string): string {
   return `package:${packageKey}`;
@@ -1363,6 +1384,7 @@ export async function buildSubsystemGraph(
           id: g.id,
           memberIds: g.memberIds,
           parentId: g.parentId,
+          minWidth: g.region.kind === 'module' ? moduleMinWidthForBadge(g.region.label) : undefined,
         })),
       });
       const builtGroupIds = new Set(result.groupBounds.keys());

package/src/subsystem/nodes.test.ts

@@ -1,5 +1,9 @@
-import { describe, expect, test } from 'bun:test';
-import { EDGE_DIM_ALPHA, fileMatchForNode, flowElementVisibility, hexWithAlpha } from './nodes';
+import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
+import { createElement, type ComponentProps } from 'react';
+import { cleanup, fireEvent, render } from '@testing-library/react/pure';
+import { ThemeProvider } from '@principal-ade/industry-theme';
+import { Window } from 'happy-dom';
+import { EDGE_DIM_ALPHA, fileMatchForNode, flowElementVisibility, hexWithAlpha, SubsystemGroupNode } from './nodes';
 
 describe('hexWithAlpha', () => {
   test('appends a two-digit alpha to #rrggbb', () => {

package/src/subsystem/nodes.tsx

@@ -29,6 +29,8 @@ import {
   deriveNameFromSymbol,
   BADGE_EDGE_INSET,
   nodeMinWidthForBadges,
+  MODULE_BADGE_INSET,
+  moduleBadgeLabel,
   packageColor,
   type SubsystemGraphNodeData,
   type SubsystemGroupNodeData,
@@ -352,6 +354,12 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
   // Kind is carried by frame chrome (square = process; rounded = module/package)
   // — don't prefix `module ·` / `package ·` or the path reads twice.
   const label = region?.label ?? '';
+  const [expandedLabel, setExpandedLabel] = useState<string | null>(null);
+  const isModule = region?.kind === 'module';
+  const expanded = isModule && expandedLabel === label;
+  const availableBadgeWidth = Math.max(0, (width ?? 400) - MODULE_BADGE_INSET * 2 - 4);
+  const collapsedLabel = isModule ? moduleBadgeLabel(label, availableBadgeWidth) : label;
+  const canExpand = isModule && collapsedLabel !== label;
   // Process frames match external nodes — square corners (outside the soft
   // component language). Module / package frames keep the rounded look.
   const isProcess = region?.kind === 'process';
@@ -382,6 +390,26 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
       }}
     >
       <div
+        className={isModule ? 'nodrag nopan' : undefined}
+        role={canExpand ? 'button' : undefined}
+        tabIndex={canExpand && !hidden ? 0 : undefined}
+        aria-expanded={canExpand ? expanded : undefined}
+        aria-label={canExpand ? `${expanded ? 'Collapse' : 'Expand'} module path: ${label}` : undefined}
+        title={isModule ? label : undefined}
+        onClick={canExpand ? (event) => {
+          event.stopPropagation();
+          setExpandedLabel(expanded ? null : label);
+        } : undefined}
+        onKeyDown={canExpand ? (event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            setExpandedLabel(expanded ? null : label);
+          } else if (event.key === 'Escape' && expanded) {
+            event.stopPropagation();
+            setExpandedLabel(null);
+          }
+        } : undefined}
         style={{
           position: 'absolute',
           // Process: badge fill starts with the process fill (inside the

package/src/utils/elkLayout.ts

@@ -79,7 +79,7 @@ export interface ElkLayoutOptions {
    * nests this group under another group; omit for a root-level frame.
    * Members reference their immediate parent via React Flow `parentId`.
    */
-  groups?: Array<{ id: string; memberIds: string[]; parentId?: string }>;
+  groups?: Array<{ id: string; memberIds: string[]; parentId?: string; minWidth?: number }>;
 }
 
 /** Result of ELK layout computation */
@@ -587,7 +587,11 @@ export async function computeElkLayout(
       builtGroups.set(g.id, {
         id: g.id,
         children: childNodes,
-        layoutOptions: compoundLayoutOptions,
+        layoutOptions: g.minWidth == null ? compoundLayoutOptions : {
+          ...compoundLayoutOptions,
+          'elk.nodeSize.constraints': 'MINIMUM_SIZE',
+          'elk.nodeSize.minimum': `(${g.minWidth},0)`,
+        },
       });
     }
     if (!progress) {