@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/canvas/index.d.ts

@@ -0,0 +1,14 @@
+export { NodeCanvas } from "./NodeCanvas";
+export { BaseNode, type BaseNodeProps } from "./BaseNode";
+export { Handle } from "./Handle";
+export { Background, type BackgroundProps, type BackgroundVariant } from "./Background";
+export { NodeControls, type NodeControlsProps } from "./NodeControls";
+export { MiniMap, type MiniMapProps } from "./MiniMap";
+export { CanvasToolbar, type CanvasToolbarProps, type CanvasToolbarNodeOption, } from "./CanvasToolbar";
+export { type CanvasTool } from "./context/CanvasContext";
+export { applyNodeChanges, applyEdgeChanges } from "./changes";
+export { layoutGraph, type LayoutOptions } from "./layout";
+export { useNodeCanvasContext } from "./context/CanvasContext";
+export { useCanvasInteraction } from "./context/InteractionContext";
+export { useNodeId } from "./context/NodeIdContext";
+export type { NodeCanvasProps, NodeCanvasNode, NodeCanvasEdge, EdgeType, NodeCanvasConnection, NodeCanvasViewport, NodeCanvasNodeTypes, NodeChange, EdgeChange, NodeProps, HandleProps, HandleType, HandlePosition, EdgeProps, XYPosition, SetViewport, NodeCanvasThemeOverrides, } from "./NodeCanvas.types";

package/dist/components/canvas/index.js

@@ -0,0 +1,12 @@
+export { NodeCanvas } from './NodeCanvas.js';
+export { BaseNode } from './BaseNode.js';
+export { Handle } from './Handle.js';
+export { Background } from './Background.js';
+export { NodeControls } from './NodeControls.js';
+export { MiniMap } from './MiniMap.js';
+export { CanvasToolbar } from './CanvasToolbar.js';
+export { applyEdgeChanges, applyNodeChanges } from './changes.js';
+export { layoutGraph } from './layout.js';
+export { useNodeCanvasContext } from './context/CanvasContext.js';
+export { useCanvasInteraction } from './context/InteractionContext.js';
+export { useNodeId } from './context/NodeIdContext.js';

package/dist/components/canvas/layout.d.ts

@@ -0,0 +1,22 @@
+import type { NodeCanvasEdge, NodeCanvasNode } from "./NodeCanvas.types";
+export interface LayoutOptions {
+    /** `LR` = layers flow left→right (default); `TB` = top→bottom. */
+    direction?: "LR" | "TB";
+    /** Assumed node width / height for spacing (no real measurement). */
+    nodeWidth?: number;
+    nodeHeight?: number;
+    /** Gap between layers / within a layer. */
+    gapX?: number;
+    gapY?: number;
+    /** Top-left origin of the laid-out graph. */
+    originX?: number;
+    originY?: number;
+}
+/**
+ * A small dependency-free layered (Sugiyama-lite) auto-layout for DAGs: each node's
+ * layer is the longest path from a root, nodes stack within their layer. Cycles are
+ * tolerated (a back-edge just doesn't deepen the layer). Returns new nodes with
+ * updated `position`; other node fields are preserved. Good enough for tidy flow
+ * graphs without pulling in dagre/elk.
+ */
+export declare function layoutGraph(nodes: NodeCanvasNode[], edges: NodeCanvasEdge[], options?: LayoutOptions): NodeCanvasNode[];

package/dist/components/canvas/layout.js

@@ -0,0 +1,67 @@
+/**
+ * A small dependency-free layered (Sugiyama-lite) auto-layout for DAGs: each node's
+ * layer is the longest path from a root, nodes stack within their layer. Cycles are
+ * tolerated (a back-edge just doesn't deepen the layer). Returns new nodes with
+ * updated `position`; other node fields are preserved. Good enough for tidy flow
+ * graphs without pulling in dagre/elk.
+ */
+function layoutGraph(nodes, edges, options = {}) {
+    var _a, _b;
+    const { direction = "LR", nodeWidth = 200, nodeHeight = 100, gapX = 80, gapY = 40, originX = 0, originY = 0, } = options;
+    if (nodes.length === 0)
+        return nodes;
+    const ids = new Set(nodes.map((n) => n.id));
+    const preds = new Map();
+    for (const n of nodes)
+        preds.set(n.id, []);
+    for (const e of edges) {
+        if (ids.has(e.source) && ids.has(e.target) && e.source !== e.target) {
+            preds.get(e.target).push(e.source);
+        }
+    }
+    // layer = 1 + max(layer of predecessors); memoized, cycle-guarded.
+    const layerOf = new Map();
+    const inProgress = new Set();
+    const computeLayer = (id) => {
+        var _a;
+        const cached = layerOf.get(id);
+        if (cached !== undefined)
+            return cached;
+        if (inProgress.has(id))
+            return 0; // back-edge in a cycle
+        inProgress.add(id);
+        let max = -1;
+        for (const p of (_a = preds.get(id)) !== null && _a !== void 0 ? _a : [])
+            max = Math.max(max, computeLayer(p));
+        const layer = max + 1;
+        inProgress.delete(id);
+        layerOf.set(id, layer);
+        return layer;
+    };
+    for (const n of nodes)
+        computeLayer(n.id);
+    // Group by layer (preserving input order for stable stacking).
+    const byLayer = new Map();
+    for (const n of nodes) {
+        const l = (_a = layerOf.get(n.id)) !== null && _a !== void 0 ? _a : 0;
+        const list = (_b = byLayer.get(l)) !== null && _b !== void 0 ? _b : [];
+        list.push(n);
+        byLayer.set(l, list);
+    }
+    const positioned = new Map();
+    for (const [layer, layerNodes] of byLayer) {
+        layerNodes.forEach((n, i) => {
+            const along = i * (direction === "LR" ? nodeHeight + gapY : nodeWidth + gapX);
+            const across = layer * (direction === "LR" ? nodeWidth + gapX : nodeHeight + gapY);
+            positioned.set(n.id, direction === "LR"
+                ? { x: originX + across, y: originY + along }
+                : { x: originX + along, y: originY + across });
+        });
+    }
+    return nodes.map((n) => {
+        const p = positioned.get(n.id);
+        return p ? { ...n, position: p } : n;
+    });
+}
+
+export { layoutGraph };

package/dist/components/canvas/layout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/canvas/utils.d.ts

@@ -0,0 +1,4 @@
+/** Clamp `value` to the inclusive range `[min, max]`. */
+export declare function clamp(value: number, min: number, max: number): number;
+/** True when an event target is a text input / contentEditable host. */
+export declare function isEditableTarget(target: EventTarget | null): boolean;

package/dist/components/canvas/utils.js

@@ -0,0 +1,16 @@
+/** Clamp `value` to the inclusive range `[min, max]`. */
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/** True when an event target is a text input / contentEditable host. */
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    const tag = target.tagName;
+    return (tag === "INPUT" ||
+        tag === "TEXTAREA" ||
+        tag === "SELECT" ||
+        target.isContentEditable);
+}
+
+export { clamp, isEditableTarget };

package/dist/components/canvas/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/charts/ActivityRings/ActivityRings.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
 import { motion, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { activityRingsTheme } from './ActivityRings.theme.js';
 import { ACTIVITY_RINGS_DEFAULTS } from './ActivityRings.types.js';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { Warning } from '@phosphor-icons/react';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { getSpringAnimation, CIRCULAR_CHART_ANIMATIONS, getStaggerDelay } from '../utils/animation-utils.js';
@@ -81,10 +82,6 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
             }
         });
     }
-    // Early return for invalid configuration
-    if (!Array.isArray(rings) || rings.length === 0) {
-        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-sm text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
-    }
     // State for controlling initial animation
     const [hasAnimated, setHasAnimated] = useState(false);
     useEffect(() => {
@@ -96,23 +93,42 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
             setHasAnimated(true);
         }
     }, [showAnimation, shouldReduceMotion]);
-    // Normalize ring values (clamp to 0-100)
-    const normalizedRings = useMemo(() => rings.map((ring) => ({
-        ...ring,
-        value: Math.min(Math.max(ring.value, 0), 100),
-    })), [rings]);
+    // Normalize ring values (clamp to 0-100). Guarded for a non-array/empty
+    // `rings` (returns `[]`) so this hook stays safe to call unconditionally
+    // above the early return.
+    const normalizedRings = useMemo(() => Array.isArray(rings)
+        ? rings.map((ring) => ({
+            ...ring,
+            value: Math.min(Math.max(ring.value, 0), 100),
+        }))
+        : [], [rings]);
     // SVG parameters
     const svgSize = 100;
     const center = 50;
     // Calculate ring radii based on count
     const ringRadii = useMemo(() => {
-        normalizedRings.length;
         const maxRadius = center - strokeWidth / 2 - 2; // Leave 2px padding
         return normalizedRings.map((_, index) => {
             // index 0 (outer) = largest radius, index N-1 (inner) = smallest
             return maxRadius - index * (strokeWidth + gap);
         });
-    }, [normalizedRings.length, strokeWidth, gap, center]);
+    }, [normalizedRings, strokeWidth, gap, center]);
+    // Calculate average progress for ARIA
+    const averageProgress = useMemo(() => {
+        if (normalizedRings.length === 0)
+            return 0;
+        const sum = normalizedRings.reduce((acc, ring) => acc + ring.value, 0);
+        return Math.round(sum / normalizedRings.length);
+    }, [normalizedRings]);
+    // --- Every hook above this line runs unconditionally, every render, in the
+    // same order. Only NOW — after the last hook — do we branch on validity, so
+    // a chart going from populated → empty/invalid `rings` (a common
+    // loading-state transition) never changes its hook count mid-lifetime. See
+    // BarChart.tsx.
+    // Early return for invalid configuration
+    if (!Array.isArray(rings) || rings.length === 0) {
+        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(Warning, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
+    }
     // Get color for a ring by index
     // Priority: ring.color > colors prop > theme colors > fallback
     const getRingColor = (ring, index) => {
@@ -134,11 +150,6 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
     };
     // Container size
     const containerSize = typeof size === "number" ? `${size}px` : size;
-    // Calculate average progress for ARIA
-    const averageProgress = useMemo(() => {
-        const sum = normalizedRings.reduce((acc, ring) => acc + ring.value, 0);
-        return Math.round(sum / normalizedRings.length);
-    }, [normalizedRings]);
     return (jsxs("div", { ref: containerRef, className: cn(theme.baseStyle, darkMode && "dark", className), style: { width: containerSize, height: containerSize }, role: "progressbar", "aria-valuenow": averageProgress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": title ||
             `Activity rings: ${normalizedRings
                 .map((r, i) => `${r.label || `Ring ${i + 1}`} ${r.value}%`)
@@ -157,7 +168,7 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
                 }) }), (centerLabel || centerSuffix) && (jsx(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", initial: { opacity: 0, scale: 0.8 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion
                     ? {
                         delay: CIRCULAR_CHART_ANIMATIONS.activityRings.centerLabelDelay,
-                        duration: 0.4,
+                        duration: CIRCULAR_CHART_ANIMATIONS.activityRings.centerLabelDuration,
                     }
                     : { duration: 0 }, children: centerLabel && (jsxs("div", { className: cn((_e = theme.centerText) === null || _e === void 0 ? void 0 : _e.label, "flex  flex-col items-center"), children: [jsx("span", { children: centerLabel }), centerSuffix && (jsx("span", { className: (_f = theme.centerText) === null || _f === void 0 ? void 0 : _f.suffix, children: centerSuffix }))] })) })), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 } })] }));
 };

package/dist/components/charts/ActivityRings/ActivityRings.types.d.ts

@@ -1,4 +1,4 @@
-import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
+import { BaseChartProps } from '../types/chart.types';
 /**
  * Individual ring configuration
  */
@@ -34,7 +34,7 @@ export interface ActivityRingsThemeOverrides {
 /**
  * ActivityRings props - multiple concentric circular progress rings
  */
-export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | 'children' | 'title' | 'description'>, Pick<StandardChartDisplayProps, 'variant'> {
+export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | 'children' | 'title' | 'description'> {
     /** Array of rings (ordered from outer to inner) */
     rings: RingData[];
     /** Center label content (text or ReactNode) */
@@ -75,5 +75,4 @@ export declare const ACTIVITY_RINGS_DEFAULTS: {
     readonly strokeWidth: 14;
     readonly gap: 4;
     readonly showAnimation: true;
-    readonly variant: "default";
 };

package/dist/components/charts/ActivityRings/ActivityRings.types.js

@@ -3,6 +3,7 @@ const ACTIVITY_RINGS_DEFAULTS = {
     size: 240,
     strokeWidth: 14,
     gap: 4,
-    showAnimation: true};
+    showAnimation: true,
+};
 
 export { ACTIVITY_RINGS_DEFAULTS };