@arach/arc-iso 0.4.5 → 0.6.0

package/dist/index.d.ts

@@ -22,7 +22,21 @@ export declare interface ArcConnectorStyle {
     dashed?: boolean;
 }
 
-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 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;
+
+declare interface ArcDiagram_2 {
+    layout: DiagramLayout_2;
+    grid: GridConfig;
+    layoutHints?: LayoutHints_2;
+    nodes: Record<string, NodePosition_2>;
+    nodeData: Record<string, NodeData>;
+    connectors: Connector[];
+    connectorStyles: Record<string, ConnectorStyle_2>;
+    groups?: GroupShape_2[];
+    focusTargets?: Record<string, FocusTarget_2>;
+    images?: DiagramImage[];
+    exportZone?: ExportZone | null;
+}
 
 export declare interface ArcDiagramData {
     id?: string;
@@ -74,6 +88,8 @@ 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). */
@@ -106,6 +122,8 @@ export declare interface ArcNodeData {
     subtitle?: string;
     description?: string;
     color: DiagramColor;
+    /** Per-node silhouette. Omit to follow the theme's own node shape. */
+    shape?: NodeShape;
 }
 
 export declare interface ArcNodePosition {
@@ -174,8 +192,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. */
@@ -277,7 +298,7 @@ export declare function deleteDiagramSession(id: string): void;
 /** Derive a URL-safe session ID from a diagram's source path or ID */
 export declare function deriveSessionId(source: string): string;
 
-export declare function DiagramCanvas({ onViewportChange, embedConfig, zoomConfig, themeOverride, isDark }: DiagramCanvasProps): JSX.Element;
+export declare function DiagramCanvas({ onViewportChange, embedConfig, zoomConfig, surface, themeOverride, isDark }: DiagramCanvasProps): JSX.Element;
 
 declare interface DiagramCanvasProps {
     onViewportChange?: (bounds: {
@@ -288,6 +309,10 @@ declare interface DiagramCanvasProps {
     }) => void;
     embedConfig?: EmbedConfig;
     zoomConfig?: ZoomConfig;
+    /** Workspace backdrop: 'theme' paints the diagram theme's container (embeds,
+     *  where the frame is part of the artifact), 'chrome' paints the app canvas
+     *  so the editor's infinite surface matches the shell skin. */
+    surface?: 'theme' | 'chrome';
     /** Override canvas background with an Arc theme. */
     themeOverride?: string;
     isDark?: boolean;
@@ -302,6 +327,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;
@@ -329,6 +356,7 @@ declare interface DiagramConfig_2 {
     title: string;
     description: string;
     theme: 'dark' | 'light';
+    style?: 'solid' | 'blueprint' | 'cyanotype';
     canvas: {
         width: number;
         height: number;
@@ -360,6 +388,17 @@ export declare function DiagramEditor({ initialData, themeId, colorMode, session
     initialDiagramMeta?: Record<string, any>;
 }): JSX.Element;
 
+declare interface DiagramImage {
+    id: string;
+    src: string;
+    name: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number;
+}
+
 export declare interface DiagramLayout {
     width: number;
     height: number;
@@ -372,6 +411,8 @@ declare interface DiagramLayout_2 {
 
 export declare interface DiagramMeta {
     themeId?: string | null;
+    isoStyle?: IsoStyleId;
+    viewMode?: ViewMode;
     colorMode?: 'light' | 'dark';
     viewport?: {
         width: number;
@@ -438,6 +479,7 @@ export declare function EditorProvider({ children, initialDiagram, initialThemeI
 
 export declare interface EmbedConfig {
     defaultViewMode?: ViewMode;
+    defaultIsoStyle?: IsoStyleId;
     enableViewModeToggle?: boolean;
     enableZoom?: boolean;
     enablePan?: boolean;
@@ -448,6 +490,13 @@ export declare interface EmbedConfig {
     showGrid?: boolean;
 }
 
+declare interface ExportZone {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
 export declare interface FocusConnectorRef {
     from: string;
     to: string;
@@ -500,6 +549,14 @@ export declare function getThemeList(): {
     description: string;
 }[];
 
+declare interface GridConfig {
+    enabled: boolean;
+    size: number;
+    color: string;
+    opacity: number;
+    type: 'dots' | 'lines';
+}
+
 export declare type GroupLayoutDirection = 'horizontal' | 'vertical';
 
 declare type GroupLayoutDirection_2 = 'horizontal' | 'vertical';
@@ -601,6 +658,7 @@ declare const initialState: {
         template: string;
         zoom: number;
         viewMode: string;
+        isoStyle: string;
         themeId: string;
         colorMode: string;
     };
@@ -616,6 +674,8 @@ declare const initialState: {
     };
 };
 
+export declare function isDiagramShape(value: unknown): boolean;
+
 /** Preset HSL palettes matching Arc's diagram colors. */
 export declare const ISO_COLORS: {
     violet: IsoColorDef;
@@ -686,6 +746,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;
 
@@ -734,6 +796,8 @@ declare interface NodeData {
     subtitle?: string;
     description?: string;
     color: DiagramColor_2;
+    /** Per-node silhouette. Omit to follow the theme's own node shape. */
+    shape?: NodeShape;
 }
 
 export declare interface NodeLayoutHint {
@@ -769,11 +833,13 @@ declare interface NodePosition_2 {
     size: NodeSize_2;
 }
 
+declare type NodeShape = 'rounded' | 'square' | 'chamfer' | 'notch' | 'pill';
+
 export declare type NodeSize = 'xs' | 's' | 'm' | 'l';
 
 declare type NodeSize_2 = 'xs' | 's' | 'm' | 'l';
 
-declare type NodeSize_3 = 'large' | 'normal' | 'small';
+declare type NodeSize_3 = 'xs' | 's' | 'm' | 'l';
 
 /**
  * Parse YAML config into DiagramConfig
@@ -881,9 +947,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;
@@ -925,6 +988,10 @@ declare interface TitleBlockInfo {
     sheet?: string;
 }
 
+export declare function toExportFormat(diagram: ArcDiagram_2): ArcDiagramData_2;
+
+export declare function toTypeScriptSource(diagram: ArcDiagram_2, name?: string): string;
+
 export declare function useColorMode(): string;
 
 export declare function useDiagram(): {
@@ -971,6 +1038,7 @@ export declare function useEditorState(): {
     template: string;
     zoom: number;
     viewMode: string;
+    isoStyle: string;
     themeId: string;
     colorMode: string;
 };
@@ -993,6 +1061,9 @@ export declare function useThemeId(): string;
 
 export declare function useViewMode(): string;
 
+/** Human-readable reason this is not a diagram, or null if it is. */
+export declare function validateDiagramShape(value: unknown): string | null;
+
 export declare type ViewMode = '2d' | 'isometric';
 
 declare interface ZoomConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arach/arc-iso",
-  "version": "0.4.5",
+  "version": "0.6.0",
   "type": "module",
   "publishConfig": {
     "access": "public",