import type { App } from '../App'; import type { UiThemeTokens } from '../components/uiTheme'; /** Diagram design tokens — tuned for dark canvas backgrounds */ export declare const DIAGRAM: { readonly fontFamily: "'Inter', 'Segoe UI', system-ui, sans-serif"; readonly fontMono: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace"; readonly fontSize: { readonly xs: 9; readonly sm: 10; readonly md: 11; readonly base: 12; readonly lg: 13; readonly xl: 14; }; readonly radii: { readonly sm: 4; readonly md: 6; readonly lg: 8; readonly pill: 20; readonly round: 999; }; readonly spacing: { readonly xs: 4; readonly sm: 8; readonly md: 12; readonly lg: 16; readonly xl: 24; }; readonly shadow: { readonly color: "rgba(0,0,0,0.35)"; readonly blur: 10; readonly offsetX: 0; readonly offsetY: 3; }; readonly shadowSoft: { readonly color: "rgba(0,0,0,0.22)"; readonly blur: 6; readonly offsetX: 0; readonly offsetY: 2; }; readonly shadowElevated: { readonly color: "rgba(0,0,0,0.42)"; readonly blur: 14; readonly offsetX: 0; readonly offsetY: 4; }; readonly sheen: "rgba(255,255,255,0.08)"; readonly sheenStrong: "rgba(255,255,255,0.12)"; readonly cardInnerBorder: "rgba(255,255,255,0.05)"; readonly canvasBg: "#0d1322"; readonly surface: "#151d2e"; readonly surfaceElevated: "#1c2740"; readonly nodeFill: "#1c2740"; readonly nodeStroke: "#3b82f6"; readonly nodeText: "#f1f5f9"; readonly nodeTextMuted: "#94a3b8"; /** Connector palette */ readonly edge: "#60a5fa"; readonly edgeGlow: "rgba(96,165,250,0.12)"; readonly edgeMuted: "#64748b"; readonly edgeMutedGlow: "rgba(100,116,139,0.14)"; readonly edgeLabel: "#e2e8f0"; readonly labelPillFill: "#1a2336"; readonly labelPillStroke: "#3b4f6b"; /** Flowchart semantic colors */ readonly flowchartStart: { readonly fill: "#14532d"; readonly stroke: "#22c55e"; readonly accent: "#4ade80"; }; readonly flowchartEnd: { readonly fill: "#1e1b4b"; readonly stroke: "#818cf8"; readonly accent: "#a5b4fc"; }; readonly flowchartProcess: { readonly fill: "#1c2740"; readonly stroke: "#3b82f6"; readonly accent: "#60a5fa"; }; readonly flowchartDecision: { readonly fill: "#422006"; readonly stroke: "#f59e0b"; readonly accent: "#fbbf24"; }; readonly decisionFill: "#422006"; readonly decisionStroke: "#f59e0b"; readonly terminalFill: "#14532d"; readonly terminalStroke: "#22c55e"; readonly stateFill: "#1c2740"; readonly stateStroke: "#818cf8"; readonly stateInitialFill: "#422006"; readonly stateInitialStroke: "#f59e0b"; readonly stateFinalFill: "#14532d"; readonly stateFinalStroke: "#22c55e"; readonly classFill: "#1c2740"; readonly classStroke: "#475569"; readonly classHeaderBg: "#243044"; readonly classHeader: "#f1f5f9"; readonly classBody: "#94a3b8"; readonly classDivider: "#334155"; /** UML relation edge colors */ readonly umlInheritance: "#f59e0b"; readonly umlAssociation: "#60a5fa"; readonly umlImplements: "#a78bfa"; readonly umlComposition: "#f472b6"; readonly networkRouter: { readonly fill: "#1e3a5f"; readonly stroke: "#3b82f6"; readonly glyph: "#60a5fa"; readonly edge: "#60a5fa"; }; readonly networkServer: { readonly fill: "#14532d"; readonly stroke: "#22c55e"; readonly glyph: "#4ade80"; readonly edge: "#4ade80"; }; readonly networkSwitch: { readonly fill: "#422006"; readonly stroke: "#f59e0b"; readonly glyph: "#fbbf24"; readonly edge: "#fbbf24"; }; readonly networkClient: { readonly fill: "#3b0764"; readonly stroke: "#a855f7"; readonly glyph: "#c084fc"; readonly edge: "#c084fc"; }; readonly networkDefault: { readonly fill: "#1c2740"; readonly stroke: "#64748b"; readonly glyph: "#94a3b8"; readonly edge: "#94a3b8"; }; /** Category colors for the expanded network icon catalog */ readonly networkCategories: { readonly infra: { readonly fill: "#1e3a5f"; readonly stroke: "#3b82f6"; readonly glyph: "#60a5fa"; readonly edge: "#60a5fa"; }; readonly security: { readonly fill: "#450a0a"; readonly stroke: "#ef4444"; readonly glyph: "#f87171"; readonly edge: "#f87171"; }; readonly server: { readonly fill: "#14532d"; readonly stroke: "#22c55e"; readonly glyph: "#4ade80"; readonly edge: "#4ade80"; }; readonly storage: { readonly fill: "#164e63"; readonly stroke: "#06b6d4"; readonly glyph: "#22d3ee"; readonly edge: "#22d3ee"; }; readonly endpoint: { readonly fill: "#3b0764"; readonly stroke: "#a855f7"; readonly glyph: "#c084fc"; readonly edge: "#c084fc"; }; readonly cloud: { readonly fill: "#1e1b4b"; readonly stroke: "#818cf8"; readonly glyph: "#a5b4fc"; readonly edge: "#a5b4fc"; }; readonly data: { readonly fill: "#1c1917"; readonly stroke: "#f59e0b"; readonly glyph: "#fbbf24"; readonly edge: "#fbbf24"; }; readonly messaging: { readonly fill: "#312e81"; readonly stroke: "#6366f1"; readonly glyph: "#818cf8"; readonly edge: "#818cf8"; }; readonly monitor: { readonly fill: "#0f172a"; readonly stroke: "#38bdf8"; readonly glyph: "#7dd3fc"; readonly edge: "#7dd3fc"; }; readonly iot: { readonly fill: "#14532d"; readonly stroke: "#84cc16"; readonly glyph: "#a3e635"; readonly edge: "#a3e635"; }; readonly auto: { readonly fill: "#422006"; readonly stroke: "#f97316"; readonly glyph: "#fb923c"; readonly edge: "#fb923c"; }; readonly external: { readonly fill: "#1e293b"; readonly stroke: "#94a3b8"; readonly glyph: "#cbd5e1"; readonly edge: "#cbd5e1"; }; readonly link: { readonly fill: "#0f172a"; readonly stroke: "#64748b"; readonly glyph: "#94a3b8"; readonly edge: "#94a3b8"; }; readonly zone: { readonly fill: "#111827"; readonly stroke: "#475569"; readonly glyph: "#64748b"; readonly edge: "#64748b"; }; }; readonly pipelineDone: "#22c55e"; readonly pipelineActive: "#3b82f6"; readonly pipelinePending: "#64748b"; readonly pipelinePendingFill: "#1c2740"; readonly pipelineActiveFill: "#1e3a5f"; readonly pipelineDoneFill: "#14532d"; readonly pipelineErrorFill: "#450a0a"; readonly pipelineErrorStroke: "#ef4444"; readonly mindCenter: { readonly fill: "#422006"; readonly stroke: "#f59e0b"; readonly accent: "#fbbf24"; }; readonly mindBranch: { readonly fill: "#1e3a5f"; readonly stroke: "#0ea5e9"; readonly accent: "#38bdf8"; }; readonly mindLeaf: { readonly fill: "#1c2740"; readonly stroke: "#64748b"; readonly accent: "#94a3b8"; }; readonly mindBranchPalette: readonly [{ readonly fill: "#1e3a5f"; readonly stroke: "#0ea5e9"; readonly accent: "#38bdf8"; readonly glow: "rgba(14,165,233,0.22)"; }, { readonly fill: "#1e1b4b"; readonly stroke: "#818cf8"; readonly accent: "#a5b4fc"; readonly glow: "rgba(129,140,248,0.2)"; }, { readonly fill: "#14532d"; readonly stroke: "#22c55e"; readonly accent: "#4ade80"; readonly glow: "rgba(34,197,94,0.2)"; }, { readonly fill: "#3b0764"; readonly stroke: "#a855f7"; readonly accent: "#c084fc"; readonly glow: "rgba(168,85,247,0.2)"; }]; readonly orgTier: readonly [{ readonly fill: "#1c2740"; readonly stroke: "#3b82f6"; readonly accent: "#60a5fa"; }, { readonly fill: "#1e293b"; readonly stroke: "#6366f1"; readonly accent: "#818cf8"; }, { readonly fill: "#1a2332"; readonly stroke: "#64748b"; readonly accent: "#94a3b8"; }]; /** Branch / sub-branch grouping colors (top-level teams inherit to descendants) */ readonly orgBranchPalette: readonly [{ readonly fill: "#1e3a5f"; readonly stroke: "#3b82f6"; readonly accent: "#60a5fa"; }, { readonly fill: "#1e1b4b"; readonly stroke: "#818cf8"; readonly accent: "#a5b4fc"; }, { readonly fill: "#14532d"; readonly stroke: "#22c55e"; readonly accent: "#4ade80"; }, { readonly fill: "#3b0764"; readonly stroke: "#a855f7"; readonly accent: "#c084fc"; }, { readonly fill: "#422006"; readonly stroke: "#f59e0b"; readonly accent: "#fbbf24"; }, { readonly fill: "#164e63"; readonly stroke: "#06b6d4"; readonly accent: "#22d3ee"; }]; /** Minimize control (branch expanded — click to collapse) */ readonly orgToggleExpanded: { readonly fill: "#1e293b"; readonly stroke: "#64748b"; readonly glyph: "#e2e8f0"; }; /** Maximize control (branch collapsed — click to expand) */ readonly orgToggleCollapsed: { readonly fill: "#1e3a5f"; readonly stroke: "#3b82f6"; readonly glyph: "#93c5fd"; }; readonly orgToggle: "#cbd5e1"; readonly orgToggleBg: "#243044"; readonly orgRole: "#94a3b8"; /** Connector color for org charts (neutral professional) */ readonly orgEdge: "#64748b"; readonly orgEdgeWidth: 1.75; readonly orgCardShadow: { readonly color: "rgba(0,0,0,0.38)"; readonly blur: 12; readonly offsetX: 0; readonly offsetY: 4; }; readonly canBus: "#3b82f6"; readonly canBusGlow: "rgba(59,130,246,0.25)"; readonly canTermination: "#22c55e"; readonly canEcuPalette: readonly ["#3b82f6", "#6366f1", "#0ea5e9", "#22c55e", "#a855f7"]; readonly schematicStroke: "#cbd5e1"; readonly schematicWire: "#60a5fa"; readonly schematicWireGlow: "rgba(96,165,250,0.2)"; readonly schematicFill: "#1a2336"; readonly schematicLedFill: "#fde047"; readonly schematicLedStroke: "#eab308"; readonly schematicLabel: "#94a3b8"; readonly schematicBattery: "#22c55e"; readonly schematicResistor: "#f59e0b"; readonly schematicSwitch: "#60a5fa"; /** Stroke widths — screen defaults; use resolveStrokeWidth for print/compact */ readonly stroke: { readonly node: 1.5; readonly nodeEmphasis: 2; readonly edge: 2; readonly edgeThin: 1.5; readonly edgeGlow: 5; readonly label: 1; readonly arrow: 1.75; }; }; export type DiagramTheme = { -readonly [K in keyof typeof DIAGRAM]: (typeof DIAGRAM)[K] extends readonly (infer U)[] ? U[] : (typeof DIAGRAM)[K] extends object ? { -readonly [P in keyof (typeof DIAGRAM)[K]]: (typeof DIAGRAM)[K][P]; } : (typeof DIAGRAM)[K]; }; export type DiagramStrokeContext = 'screen' | 'print' | 'compact'; /** Merge UI theme tokens into diagram palette. Empty input → default DIAGRAM look. */ export declare function resolveDiagramTheme(ui?: Partial, pack?: Record): DiagramTheme; /** Module pack stored on the App theme. */ export declare function diagramPackFromApp(app?: App | null): Record; export declare function syncActiveDiagramTheme(tokens?: Partial, app?: App | null, pack?: Record): DiagramTheme; /** * Current diagram palette for builders. * Prefer calling inside a create/rebuild (stack); optional `app` uses WeakMap snapshot. */ export declare function getActiveDiagram(app?: App | null): DiagramTheme; /** Run factory/rebuild with a fixed palette on the build stack. */ export declare function runWithDiagramTheme(theme: DiagramTheme, fn: () => R): R; export declare function getDiagramTheme(app?: App | null): DiagramTheme; /** Print-safe and compact-canvas stroke scaling */ export declare function resolveStrokeWidth(base: number, context?: DiagramStrokeContext): number; /** Pick stroke context from canvas dimensions */ export declare function strokeContextForCanvas(width: number, height: number): DiagramStrokeContext;