@arach/arc 0.4.3 → 0.4.5

package/lib/index.d.ts

@@ -22,23 +22,30 @@ export declare interface ArcConnectorStyle {
     dashed?: boolean;
 }
 
-export declare function ArcDiagram({ data, className, interactive, mode, theme, label, labelPosition, defaultZoom, zoomLevels, showArcToggle, showAutoLayout, showControls, showMinimap, frame, hoverEffects, onNodeHover, titleBlock, maxFitZoom, }: ArcDiagramProps): JSX.Element;
+export declare function ArcDiagram({ data, className, interactive, mode, theme, label, labelPosition, defaultZoom, zoomLevels, showArcToggle, showAutoLayout, showControls, showMinimap, showFocusStory, frame, hoverEffects, onNodeHover, titleBlock, maxFitZoom, }: ArcDiagramProps): JSX.Element;
 
 export declare interface ArcDiagramData {
     id?: string;
     layout: DiagramLayout;
+    layoutHints?: LayoutHints;
     nodes: Record<string, ArcNodePosition>;
     nodeData: Record<string, ArcNodeData>;
     connectors: ArcConnector[];
     connectorStyles: Record<string, ArcConnectorStyle>;
+    focusTargets?: Record<string, FocusTarget>;
+    groups?: GroupShape[];
 }
 
 declare interface ArcDiagramData_2 {
+    id?: string;
     layout: DiagramLayout_2;
+    layoutHints?: LayoutHints_2;
     nodes: Record<string, NodePosition_2>;
     nodeData: Record<string, NodeData>;
     connectors: Connector[];
     connectorStyles: Record<string, ConnectorStyle_2>;
+    focusTargets?: Record<string, FocusTarget_2>;
+    groups?: GroupShape_2[];
 }
 
 export declare function ArcDiagramIsometric({ config, options, className, style, onNodeClick, onLayerClick }: ArcDiagramProps_2): JSX.Element;
@@ -67,6 +74,8 @@ declare interface ArcDiagramProps {
     showControls?: boolean;
     /** Show a minimap overview (bottom-left). Default: false */
     showMinimap?: boolean;
+    /** Show the active focus target's caption and steps. Default: false */
+    showFocusStory?: boolean;
     /** Override the edge/frame treatment (else the theme's brand.frame). */
     frame?: BrandSpec['frame'];
     /** Control hover behavior. true = all effects (default), false = none, object = granular control */
@@ -124,6 +133,8 @@ export declare interface AsciiOptions {
  * Generate a diagram from minimal input — no positions or anchors needed.
  */
 export declare interface AutoDiagramInput {
+    layoutHints?: ArcDiagramData_2['layoutHints'];
+    groups?: ArcDiagramData_2['groups'];
     nodeData: ArcDiagramData_2['nodeData'];
     connectors: Array<Omit<Connector, 'fromAnchor' | 'toAnchor'> & {
         fromAnchor?: AnchorPosition_2;
@@ -163,6 +174,16 @@ declare interface BrandSpec {
     frame?: 'hairline' | 'inset' | 'brackets' | 'ticks' | 'cropmarks' | 'corners' | 'sheet' | 'reticle' | 'none';
     /** Render an engineering-drawing title block in the bottom-right corner. */
     titleBlock?: boolean;
+    /** Node silhouette when nodeRadius is not set explicitly. */
+    nodeShape?: 'rounded' | 'square' | 'chamfer' | 'pill';
+    /** Overall node opacity (0–1). */
+    nodeOpacity?: number;
+    /** Frosted glass backdrop on nodes. */
+    nodeGlass?: boolean;
+    /** Colored accent stripe on the node shell. */
+    accentBar?: 'left' | 'top' | 'none';
+    /** Soft bloom on connector strokes. */
+    connectorGlow?: boolean;
 }
 
 export declare interface ColorPalette {
@@ -331,9 +352,7 @@ declare interface DiagramConfig_2 {
     }[];
 }
 
-export declare function DiagramEditor({ isDark, onToggleTheme, initialData, themeId, colorMode, sessionId, initialDiagramMeta }: {
-    isDark: boolean;
-    onToggleTheme: () => void;
+export declare function DiagramEditor({ initialData, themeId, colorMode, sessionId, initialDiagramMeta, }: {
     initialData?: any;
     themeId?: string | null;
     colorMode?: 'light' | 'dark';
@@ -429,6 +448,44 @@ export declare interface EmbedConfig {
     showGrid?: boolean;
 }
 
+export declare interface FocusConnectorRef {
+    from: string;
+    to: string;
+}
+
+declare interface FocusConnectorRef_2 {
+    from: string;
+    to: string;
+}
+
+export declare interface FocusStep {
+    icon: string;
+    label: string;
+}
+
+declare interface FocusStep_2 {
+    icon: string;
+    label: string;
+}
+
+export declare interface FocusTarget {
+    mode?: 'append' | 'replace';
+    nodes?: string[];
+    connectors?: FocusConnectorRef[];
+    caption?: string;
+    steps?: FocusStep[];
+}
+
+/** A declarative highlight story activated by hovering or selecting a node. */
+declare interface FocusTarget_2 {
+    /** `append` includes direct neighbors; `replace` uses only the explicit story. */
+    mode?: 'append' | 'replace';
+    nodes?: string[];
+    connectors?: FocusConnectorRef_2[];
+    caption?: string;
+    steps?: FocusStep_2[];
+}
+
 /** Generate a short session ID (first 8 hex chars of a UUID for brevity in URLs) */
 export declare function generateSessionId(): string;
 
@@ -443,6 +500,54 @@ export declare function getThemeList(): {
     description: string;
 }[];
 
+export declare type GroupLayoutDirection = 'horizontal' | 'vertical';
+
+declare type GroupLayoutDirection_2 = 'horizontal' | 'vertical';
+
+export declare interface GroupLayoutHint {
+    direction?: GroupLayoutDirection;
+    padding?: number;
+    layerGap?: number;
+    itemGap?: number;
+    align?: LayoutAlignment;
+    justify?: LayoutAlignment | 'space-between';
+}
+
+/** Layout policy for the nodes inside one group frame. */
+declare interface GroupLayoutHint_2 {
+    /** `horizontal` lays layers left-to-right; `vertical` lays them top-to-bottom. */
+    direction?: GroupLayoutDirection_2;
+    padding?: number;
+    layerGap?: number;
+    itemGap?: number;
+    align?: LayoutAlignment_2;
+    justify?: LayoutAlignment_2 | 'space-between';
+}
+
+export declare interface GroupShape {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    type: 'rect' | 'circle';
+    color: DiagramColor;
+    label?: string;
+    dashed?: boolean;
+}
+
+declare interface GroupShape_2 {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    type: 'rect' | 'circle';
+    color: DiagramColor_2;
+    label?: string;
+    dashed?: boolean;
+}
+
 declare interface HoverEffectsConfig {
     /** Dim unrelated nodes/connectors. Default: true */
     dim?: boolean;
@@ -496,7 +601,7 @@ declare const initialState: {
         template: string;
         zoom: number;
         viewMode: string;
-        themeId: any;
+        themeId: string;
         colorMode: string;
     };
     meta: {
@@ -588,6 +693,20 @@ declare type LabelAlign = 'left' | 'right' | 'center';
 
 declare type LabelCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
+export declare type LayoutAlignment = 'start' | 'center' | 'end';
+
+declare type LayoutAlignment_2 = 'start' | 'center' | 'end';
+
+export declare interface LayoutHints {
+    nodes?: Record<string, NodeLayoutHint>;
+    groups?: Record<string, GroupLayoutHint>;
+}
+
+declare interface LayoutHints_2 {
+    nodes?: Record<string, NodeLayoutHint_2>;
+    groups?: Record<string, GroupLayoutHint_2>;
+}
+
 declare interface LayoutOptions {
     /** Horizontal gap between columns */
     columnGap?: number;
@@ -617,6 +736,22 @@ declare interface NodeData {
     color: DiagramColor_2;
 }
 
+export declare interface NodeLayoutHint {
+    group?: string;
+    layer?: number;
+    order?: number;
+}
+
+/** Optional placement hints used by autoLayout when nodes belong to groups. */
+declare interface NodeLayoutHint_2 {
+    /** ID of the group frame that owns this node. */
+    group?: string;
+    /** Explicit layer within the group. Connected nodes are layered automatically otherwise. */
+    layer?: number;
+    /** Stable ordering within a layer. Lower values render first. */
+    order?: number;
+}
+
 export declare interface NodePosition {
     x: number;
     y: number;
@@ -636,7 +771,7 @@ declare interface NodePosition_2 {
 
 export declare type NodeSize = 'xs' | 's' | 'm' | 'l';
 
-declare type NodeSize_2 = 's' | 'm' | 'l';
+declare type NodeSize_2 = 'xs' | 's' | 'm' | 'l';
 
 declare type NodeSize_3 = 'large' | 'normal' | 'small';
 
@@ -696,6 +831,11 @@ export declare function renderToElement(container: HTMLElement, config: DiagramC
  */
 export declare function renderToString(config: DiagramConfig): string;
 
+export declare function resolveFocusState(activeNodeId: string | null, connectors: ArcConnector[], focusTargets?: Record<string, FocusTarget>): {
+    nodeIds: Set<string>;
+    connectorIndexes: Set<number>;
+};
+
 /** Save a diagram session to localStorage */
 export declare function saveDiagramSession(id: string, data: Omit<DiagramSession, 'updatedAt'>): void;
 
@@ -737,7 +877,7 @@ declare interface ThemeBackground {
     };
 }
 
-export declare type ThemeId = 'default' | 'warm' | 'cool' | 'mono' | 'engineering' | 'workbench' | 'tactical';
+export declare type ThemeId = 'default' | 'warm' | 'cool' | 'mono' | 'engineering' | 'workbench' | 'tactical' | 'command';
 
 export declare const THEMES: Record<ThemeId, Theme>;
 
@@ -831,10 +971,13 @@ export declare function useEditorState(): {
     template: string;
     zoom: number;
     viewMode: string;
-    themeId: any;
+    themeId: string;
     colorMode: string;
 };
 
+/** Returns the active theme's brand spec (typography, node shape, connector treatment). */
+export declare function useResolvedBrand(): BrandSpec;
+
 /** Returns the resolved theme palette (light or dark) for the current theme and color mode. */
 export declare function useResolvedTheme(): {
     palette: ColorPalette;
@@ -846,7 +989,7 @@ export declare function useResolvedTheme(): {
     };
 };
 
-export declare function useThemeId(): any;
+export declare function useThemeId(): string;
 
 export declare function useViewMode(): string;
 

package/lib/lang-css_hudsonkit_false-oeV3Hq1J.js

@@ -0,0 +1,5 @@
+const o = {};
+throw new Error('Could not resolve "@codemirror/lang-css" imported by "hudsonkit".');
+export {
+  o as default
+};

package/lib/lang-html_hudsonkit_false-CCxA3CYh.js

@@ -0,0 +1,5 @@
+const o = {};
+throw new Error('Could not resolve "@codemirror/lang-html" imported by "hudsonkit".');
+export {
+  o as default
+};

package/lib/lang-javascript_hudsonkit_false-SQgz3iJM.js

@@ -0,0 +1,5 @@
+const o = {};
+throw new Error('Could not resolve "@codemirror/lang-javascript" imported by "hudsonkit".');
+export {
+  o as default
+};

package/lib/lang-json_hudsonkit_false-BksH8zxC.js

@@ -0,0 +1,5 @@
+const o = {};
+throw new Error('Could not resolve "@codemirror/lang-json" imported by "hudsonkit".');
+export {
+  o as default
+};

package/lib/lang-markdown_hudsonkit_false-B5TeQsd5.js

@@ -0,0 +1,5 @@
+const o = {};
+throw new Error('Could not resolve "@codemirror/lang-markdown" imported by "hudsonkit".');
+export {
+  o as default
+};

package/lib/language_hudsonkit_false-D4r7WoC5.js

@@ -0,0 +1,5 @@
+const o = {};
+throw new Error('Could not resolve "@codemirror/language" imported by "hudsonkit".');
+export {
+  o as default
+};

package/lib/state_hudsonkit_false-Rl5x6lAJ.js

@@ -0,0 +1,5 @@
+const o = {};
+throw new Error('Could not resolve "@codemirror/state" imported by "hudsonkit".');
+export {
+  o as default
+};

package/lib/view_hudsonkit_false-Cv9f7Eek.js

@@ -0,0 +1,5 @@
+const o = {};
+throw new Error('Could not resolve "@codemirror/view" imported by "hudsonkit".');
+export {
+  o as default
+};

package/lib/xterm_hudsonkit_false-C1tkX9GJ.js

@@ -0,0 +1,5 @@
+const t = {};
+throw new Error('Could not resolve "@xterm/xterm" imported by "hudsonkit".');
+export {
+  t as default
+};

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "@arach/arc",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "packageManager": "bun@1.3.11",
   "workspaces": [
     "packages/*"
   ],
-  "description": "Visual diagram editor for creating architecture diagrams",
+  "description": "Diagrams as code for React — design, render, and export typed architecture diagrams",
   "author": "Arach Tchoupani",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/arach/arc.git"
   },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "keywords": [
     "diagram",
     "editor",
     "architecture",
+    "diagrams-as-code",
     "visualization",
     "react",
     "isometric"
@@ -25,9 +30,9 @@
     "arc-ascii": "./bin/arc-ascii.mjs"
   },
   "files": [
-    "lib/arc.es.js",
-    "lib/arc.umd.js",
-    "lib/index.d.ts",
+    "lib/*.js",
+    "lib/*.d.ts",
+    "lib/*.css",
     "bin/arc-ascii.mjs"
   ],
   "main": "./lib/arc.umd.js",
@@ -50,24 +55,17 @@
     "typecheck": "tsc --noEmit",
     "preview": "vite preview",
     "generate-og": "node scripts/generate-og.js",
-    "check:dist": "attw --pack . --ignore-rules cjs-resolves-to-esm unexpected-module-syntax && publint",
+    "check:dist": "attw --pack . --ignore-rules cjs-resolves-to-esm unexpected-module-syntax && publint && node scripts/check-packlist.mjs",
     "prepublishOnly": "bun run build:lib && bun run check:dist"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "lucide-react": ">=0.400.0"
-  },
-  "dependencies": {
-    "@arach/dewey": "^0.2.0",
-    "@base-ui/react": "^1.0.0",
-    "js-yaml": "^4.1.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^7.12.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@arach/dewey": "^0.2.0",
     "@arethetypeswrong/cli": "^0.18.4",
+    "@base-ui/react": "^1.0.0",
     "@eslint/js": "^9.39.1",
     "@tailwindcss/vite": "^4.1.18",
     "@types/js-yaml": "^4.0.9",
@@ -79,9 +77,14 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "hudsonkit": "^0.3.3",
+    "js-yaml": "^4.1.1",
     "lucide-react": "^0.562.0",
     "publint": "^0.3.21",
     "puppeteer": "^24.34.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.12.0",
     "rollup-plugin-visualizer": "^6.0.5",
     "satori": "^0.18.3",
     "sharp": "^0.34.5",