@toolr/ui-design 0.1.0

package/dist/diagrams.d.ts

@@ -0,0 +1,371 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Variants } from 'motion/react';
+export { Variants, motion } from 'motion/react';
+
+/** Pre-built viewBox strings: `"0 0 420 <height>"` */
+declare const viewBox: {
+    readonly compact: "0 0 420 200";
+    readonly standard: "0 0 420 240";
+    readonly tall: "0 0 420 280";
+    readonly extended: "0 0 420 340";
+    readonly large: "0 0 420 420";
+    readonly xlarge: "0 0 420 520";
+    readonly xxlarge: "0 0 420 580";
+};
+/** Font size tiers (SVG units). 1 SVG unit ≈ 3px at max-width 1260px (3×420). */
+declare const font: {
+    readonly icon: 10;
+    readonly primary: 5.33;
+    readonly secondary: 4.67;
+    readonly small: 4;
+    readonly micro: 3;
+};
+/** Standard box dimensions [width, height] by role. */
+declare const box: {
+    readonly nodeMain: {
+        readonly w: 120;
+        readonly h: 55;
+    };
+    readonly nodeCard: {
+        readonly w: 95;
+        readonly h: 50;
+    };
+    readonly nodeSmall: {
+        readonly w: 80;
+        readonly h: 32;
+    };
+    readonly infoBox: {
+        readonly w: 360;
+        readonly h: 28;
+    };
+    readonly codeBlock: {
+        readonly w: 360;
+        readonly h: 28;
+    };
+};
+/** Spacing constants (SVG units). */
+declare const spacing: {
+    readonly margin: 20;
+    readonly gapSm: 10;
+    readonly gapMd: 20;
+    readonly gapLg: 35;
+    readonly centerX: 210;
+    readonly titleY: 18;
+};
+/** Border radius tiers. */
+declare const radius: {
+    readonly lg: 8;
+    readonly md: 6;
+    readonly sm: 4;
+};
+/** Stroke width tiers. */
+declare const stroke: {
+    readonly bold: 2;
+    readonly normal: 1.5;
+    readonly thin: 1;
+    readonly hairline: 0.5;
+};
+/** Semantic text colors. */
+declare const color: {
+    readonly textBright: "#e5e7eb";
+    readonly textMedium: "#9ca3af";
+    readonly textDim: "#6b7280";
+    readonly bgDark: "#1f2937";
+    readonly bgDarker: "#0f172a";
+    readonly border: "#374151";
+};
+/** Dark tint backgrounds for colored overlays (use with fillOpacity). */
+declare const tint: {
+    readonly red: "#7f1d1d";
+    readonly emerald: "#064e3b";
+    readonly blue: "#1e3a5f";
+};
+/** Accent palette – pick by semantic intent, not by hue. */
+declare const accent: {
+    readonly cyan: "#22d3ee";
+    readonly teal: "#2dd4bf";
+    readonly blue: "#60a5fa";
+    readonly purple: "#a78bfa";
+    readonly violet: "#c084fc";
+    readonly green: "#34d399";
+    readonly lime: "#4ade80";
+    readonly yellow: "#fbbf24";
+    readonly orange: "#fb923c";
+    readonly red: "#ef4444";
+    readonly redLight: "#f87171";
+    readonly pink: "#f472b6";
+    readonly pinkLight: "#fda4af";
+    readonly indigo: "#a5b4fc";
+    readonly emerald: "#10b981";
+    readonly amber: "#f59e0b";
+    readonly fuchsia: "#d946ef";
+    readonly rose: "#fb7185";
+    readonly sky: "#38bdf8";
+};
+/**
+ * Convenience bundle for imports:
+ *   import { D } from './diagram-utils'
+ *   <rect rx={D.radius.md} strokeWidth={D.stroke.normal} />
+ */
+declare const D: {
+    readonly viewBox: {
+        readonly compact: "0 0 420 200";
+        readonly standard: "0 0 420 240";
+        readonly tall: "0 0 420 280";
+        readonly extended: "0 0 420 340";
+        readonly large: "0 0 420 420";
+        readonly xlarge: "0 0 420 520";
+        readonly xxlarge: "0 0 420 580";
+    };
+    readonly font: {
+        readonly icon: 10;
+        readonly primary: 5.33;
+        readonly secondary: 4.67;
+        readonly small: 4;
+        readonly micro: 3;
+    };
+    readonly box: {
+        readonly nodeMain: {
+            readonly w: 120;
+            readonly h: 55;
+        };
+        readonly nodeCard: {
+            readonly w: 95;
+            readonly h: 50;
+        };
+        readonly nodeSmall: {
+            readonly w: 80;
+            readonly h: 32;
+        };
+        readonly infoBox: {
+            readonly w: 360;
+            readonly h: 28;
+        };
+        readonly codeBlock: {
+            readonly w: 360;
+            readonly h: 28;
+        };
+    };
+    readonly spacing: {
+        readonly margin: 20;
+        readonly gapSm: 10;
+        readonly gapMd: 20;
+        readonly gapLg: 35;
+        readonly centerX: 210;
+        readonly titleY: 18;
+    };
+    readonly radius: {
+        readonly lg: 8;
+        readonly md: 6;
+        readonly sm: 4;
+    };
+    readonly stroke: {
+        readonly bold: 2;
+        readonly normal: 1.5;
+        readonly thin: 1;
+        readonly hairline: 0.5;
+    };
+    readonly color: {
+        readonly textBright: "#e5e7eb";
+        readonly textMedium: "#9ca3af";
+        readonly textDim: "#6b7280";
+        readonly bgDark: "#1f2937";
+        readonly bgDarker: "#0f172a";
+        readonly border: "#374151";
+    };
+    readonly tint: {
+        readonly red: "#7f1d1d";
+        readonly emerald: "#064e3b";
+        readonly blue: "#1e3a5f";
+    };
+    readonly accent: {
+        readonly cyan: "#22d3ee";
+        readonly teal: "#2dd4bf";
+        readonly blue: "#60a5fa";
+        readonly purple: "#a78bfa";
+        readonly violet: "#c084fc";
+        readonly green: "#34d399";
+        readonly lime: "#4ade80";
+        readonly yellow: "#fbbf24";
+        readonly orange: "#fb923c";
+        readonly red: "#ef4444";
+        readonly redLight: "#f87171";
+        readonly pink: "#f472b6";
+        readonly pinkLight: "#fda4af";
+        readonly indigo: "#a5b4fc";
+        readonly emerald: "#10b981";
+        readonly amber: "#f59e0b";
+        readonly fuchsia: "#d946ef";
+        readonly rose: "#fb7185";
+        readonly sky: "#38bdf8";
+    };
+};
+declare function DiagramWrapper({ children }: {
+    children: ReactNode;
+    sourceUrl?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Container variant that staggers children.
+ * @param staggerDelay – seconds between each child (default 0.05)
+ * @param delayStart  – initial delay before first child (default 0)
+ */
+declare function stagger(staggerDelay?: number, delayStart?: number): Variants;
+/** Standard fade-in-up item variant (replaces all FADE_IN_UP_* constants). */
+declare const item: Variants;
+/** Slide-in from left variant. */
+declare const slideInItem: Variants;
+/** Scale-in item variant (good for circles / icons). */
+declare const scaleItem: Variants;
+/**
+ * An SVG <path> with an infinite animated dash offset.
+ * Replaces:
+ *   <path strokeDasharray="4 3">
+ *     <animate attributeName="stroke-dashoffset" values="0;-14" dur="1.2s" ... />
+ *   </path>
+ */
+declare function AnimatedDashPath({ d, stroke, strokeWidth, dashArray, opacity, duration, delay, }: {
+    d: string;
+    stroke: string;
+    strokeWidth?: number;
+    dashArray?: string;
+    opacity?: number;
+    duration?: number;
+    delay?: number;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Standard diagram title text rendered at top center.
+ * Every diagram should have exactly one of these.
+ */
+declare function DiagramTitle({ children, y }: {
+    children: string;
+    y?: number;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * A rounded rectangle node with a heading and optional body text.
+ * Renders a filled rect with border, centered heading, and up to two body lines.
+ *
+ * Use explicit `headingY` / `bodyY` / `body2Y` to match hand-positioned layouts.
+ * When omitted, text positions are calculated from the box dimensions.
+ */
+declare function DiagramNode({ x, y, width, height, heading, body, body2, accentColor, rx, fill: bgFill, strokeWidth: sw, headingWeight, headingColor, bodyColor, headingY: explicitHeadingY, bodyY: explicitBodyY, body2Y: explicitBody2Y, }: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    heading: string;
+    body?: string;
+    body2?: string;
+    accentColor: string;
+    rx?: number;
+    fill?: string;
+    strokeWidth?: number;
+    headingWeight?: string;
+    headingColor?: string;
+    bodyColor?: string;
+    headingY?: number;
+    bodyY?: number;
+    body2Y?: number;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Full-width info strip at the bottom of a diagram.
+ * Renders a rect with one or more centered text lines inside.
+ */
+declare function DiagramInfoBox({ y, height, children, borderColor, fill: bgFill, rx, }: {
+    y: number;
+    height?: number;
+    children: ReactNode;
+    borderColor?: string;
+    fill?: string;
+    rx?: number;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Full-width code display box with a dark background.
+ * Children should be <text> elements with monospace font.
+ */
+declare function DiagramCodeBlock({ x, y, width, height, children, borderColor, rx, }: {
+    x?: number;
+    y: number;
+    width?: number;
+    height?: number;
+    children?: ReactNode;
+    borderColor?: string;
+    rx?: number;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Small text badge/pill with tinted background.
+ */
+declare function DiagramBadge({ x, y, width, height, label, accentColor, fillOpacity, rx, }: {
+    x: number;
+    y: number;
+    width: number;
+    height?: number;
+    label: string;
+    accentColor: string;
+    fillOpacity?: number;
+    rx?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function StepMarker({ cx, cy, n, accentColor, connectorToY, r, }: {
+    cx: number;
+    cy: number;
+    n: number;
+    accentColor: string;
+    connectorToY?: number;
+    r?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowMarker({ id, color: fill, opacity, }: {
+    id: string;
+    color: string;
+    opacity?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowPath({ d, color: strokeColor, dashed, strokeWidth: sw, markerEnd, opacity: op, }: {
+    d: string;
+    color: string;
+    dashed?: boolean;
+    strokeWidth?: number;
+    markerEnd?: string;
+    opacity?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function LayerBar({ x, y, width, label, detail, accentColor, opacity: op, height, }: {
+    x: number;
+    y: number;
+    width: number;
+    label: string;
+    detail?: string;
+    accentColor: string;
+    opacity?: number;
+    height?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function GridCard({ x, y, width, icon, label, desc, codeHint, accentColor, }: {
+    x: number;
+    y: number;
+    width: number;
+    icon: string;
+    label: string;
+    desc?: string;
+    codeHint?: string;
+    accentColor: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ActorNode({ cx, cy, r, label, labelPos, accentColor, }: {
+    cx: number;
+    cy: number;
+    r?: number;
+    label: string;
+    labelPos?: 'above' | 'below' | 'left' | 'right';
+    accentColor: string;
+}): react_jsx_runtime.JSX.Element;
+declare function KeyValueRow({ x, y, field, value, fieldColor, }: {
+    x: number;
+    y: number;
+    field: string;
+    value: string;
+    fieldColor: string;
+}): react_jsx_runtime.JSX.Element;
+declare function WarningIndicator({ cx, cy, color: fillColor, size, }: {
+    cx: number;
+    cy: number;
+    color: string;
+    size?: number;
+}): react_jsx_runtime.JSX.Element;
+
+export { ActorNode, AnimatedDashPath, ArrowMarker, ArrowPath, D, DiagramBadge, DiagramCodeBlock, DiagramInfoBox, DiagramNode, DiagramTitle, DiagramWrapper, GridCard, KeyValueRow, LayerBar, StepMarker, WarningIndicator, accent, box, color, font, item, radius, scaleItem, slideInItem, spacing, stagger, stroke, tint, viewBox };