@arach/arc-iso 0.4.4 → 0.5.0

package/dist/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, showLegend, 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,10 @@ declare interface ArcDiagramProps {
     showControls?: boolean;
     /** Show a minimap overview (bottom-left). Default: false */
     showMinimap?: boolean;
+    /** Show a key for the connector styles and labelled groups (bottom-left). Default: false */
+    showLegend?: 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 +135,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,8 +176,11 @@ 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';
+    /** Node silhouette. 'chamfer' cuts all four corners, 'notch' cuts the top-right;
+     *  both are drawn with clip-path, not rounding. See utils/nodeShape.ts. */
+    nodeShape?: 'rounded' | 'square' | 'chamfer' | 'notch' | 'pill';
+    /** Ornament on the node shell — supersedes accentBar, which still works. */
+    nodeDecor?: 'none' | 'bar-left' | 'bar-top' | 'ticks' | 'rule' | 'dot' | 'stripe';
     /** Overall node opacity (0–1). */
     nodeOpacity?: number;
     /** Frosted glass backdrop on nodes. */
@@ -291,6 +307,8 @@ export declare interface DiagramConfig {
     title: string;
     description?: string;
     theme: 'dark' | 'light';
+    /** Render style: shaded solids, or a technical line-art plate. */
+    style?: IsoStyleId;
     canvas: {
         width: number;
         height: number;
@@ -318,6 +336,7 @@ declare interface DiagramConfig_2 {
     title: string;
     description: string;
     theme: 'dark' | 'light';
+    style?: 'solid' | 'blueprint' | 'cyanotype';
     canvas: {
         width: number;
         height: number;
@@ -361,6 +380,8 @@ declare interface DiagramLayout_2 {
 
 export declare interface DiagramMeta {
     themeId?: string | null;
+    isoStyle?: IsoStyleId;
+    viewMode?: ViewMode;
     colorMode?: 'light' | 'dark';
     viewport?: {
         width: number;
@@ -427,6 +448,7 @@ export declare function EditorProvider({ children, initialDiagram, initialThemeI
 
 export declare interface EmbedConfig {
     defaultViewMode?: ViewMode;
+    defaultIsoStyle?: IsoStyleId;
     enableViewModeToggle?: boolean;
     enableZoom?: boolean;
     enablePan?: boolean;
@@ -437,6 +459,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;
 
@@ -451,6 +511,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;
@@ -504,6 +612,7 @@ declare const initialState: {
         template: string;
         zoom: number;
         viewMode: string;
+        isoStyle: string;
         themeId: string;
         colorMode: string;
     };
@@ -589,6 +698,8 @@ declare interface IsoShadingResult {
     left: string;
 }
 
+declare type IsoStyleId = 'solid' | 'blueprint' | 'cyanotype';
+
 /** Convert 3D isometric coordinates to 2D screen coordinates. */
 export declare function isoToScreen(x: number, y: number, z?: number): IsoScreenPoint;
 
@@ -596,6 +707,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;
@@ -625,6 +750,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;
@@ -644,7 +785,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';
 
@@ -704,6 +845,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;
 
@@ -749,9 +895,6 @@ export declare type ThemeId = 'default' | 'warm' | 'cool' | 'mono' | 'engineerin
 
 export declare const THEMES: Record<ThemeId, Theme>;
 
-/**
- * Arc Isometric Types
- */
 export declare interface TierConfig {
     name: string;
     elevation: number;
@@ -839,6 +982,7 @@ export declare function useEditorState(): {
     template: string;
     zoom: number;
     viewMode: string;
+    isoStyle: string;
     themeId: string;
     colorMode: string;
 };

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@arach/arc-iso",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "description": "Isometric diagrams as code for React and the browser",
   "author": "Arach Tchoupani",
   "license": "MIT",