semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/stream/OrdinalSVGOverlay.js

@@ -0,0 +1,130 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrdinalSVGOverlay = OrdinalSVGOverlay;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const Legend_1 = __importDefault(require("../Legend"));
+function isLegendConfig(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        "legendGroups" in value);
+}
+function defaultRFormat(v) {
+    return String(Math.round(v * 100) / 100);
+}
+function OrdinalSVGOverlay(props) {
+    const { width, height, totalWidth, totalHeight, margin, scales, showAxes, oLabel, rLabel, oFormat, rFormat, showGrid, title, legend, foregroundGraphics, annotations, svgAnnotationRules, annotationFrame, children } = props;
+    const isRadial = scales?.projection === "radial";
+    const isHorizontal = scales?.projection === "horizontal";
+    // Category labels (band scale)
+    const categoryTicks = (0, react_1.useMemo)(() => {
+        if (!showAxes || !scales || isRadial)
+            return [];
+        return scales.o.domain().map(cat => ({
+            value: cat,
+            pixel: (scales.o(cat) ?? 0) + scales.o.bandwidth() / 2,
+            label: oFormat ? oFormat(cat) : cat
+        }));
+    }, [showAxes, scales, oFormat, isRadial]);
+    // Value ticks (linear scale)
+    const valueTicks = (0, react_1.useMemo)(() => {
+        if (!showAxes || !scales || isRadial)
+            return [];
+        return scales.r.ticks(5).map(v => ({
+            value: v,
+            pixel: scales.r(v),
+            label: (rFormat || defaultRFormat)(v)
+        }));
+    }, [showAxes, scales, rFormat, isRadial]);
+    // Annotations
+    const renderedAnnotations = (0, react_1.useMemo)(() => {
+        if (!annotations || annotations.length === 0 || !svgAnnotationRules)
+            return null;
+        return annotations
+            .map((annotation, i) => svgAnnotationRules(annotation, i, {
+            scales: scales ? { time: scales.r, value: scales.r } : null,
+            timeAxis: "x",
+            width,
+            height
+        }))
+            .filter(Boolean);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [annotations, svgAnnotationRules, width, height, annotationFrame]);
+    const hasContent = showAxes || title || legend || foregroundGraphics || (renderedAnnotations && renderedAnnotations.length > 0) || showGrid || children;
+    if (!hasContent)
+        return null;
+    return (React.createElement("svg", { width: totalWidth, height: totalHeight, style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            pointerEvents: "none"
+        } },
+        React.createElement("g", { transform: `translate(${margin.left},${margin.top})` },
+            showGrid && scales && !isRadial && (React.createElement("g", { className: "ordinal-grid" }, valueTicks.map((tick, i) => (React.createElement("line", { key: `grid-${i}`, x1: isHorizontal ? tick.pixel : 0, y1: isHorizontal ? 0 : tick.pixel, x2: isHorizontal ? tick.pixel : width, y2: isHorizontal ? height : tick.pixel, stroke: "#e0e0e0", strokeWidth: 1 }))))),
+            showAxes && scales && !isRadial && (React.createElement("g", { className: "ordinal-axes" }, isHorizontal ? (React.createElement(React.Fragment, null,
+                React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: height, stroke: "#ccc", strokeWidth: 1 }),
+                categoryTicks.map((tick, i) => (React.createElement("g", { key: `cat-${i}`, transform: `translate(0,${tick.pixel})` },
+                    React.createElement("line", { x2: -5, stroke: "#ccc", strokeWidth: 1 }),
+                    React.createElement("text", { x: -8, textAnchor: "end", dominantBaseline: "middle", fontSize: 10, fill: "#666", style: { userSelect: "none" } }, tick.label)))),
+                oLabel && (React.createElement("text", { x: -margin.left + 15, y: height / 2, textAnchor: "middle", fontSize: 12, fill: "#333", transform: `rotate(-90, ${-margin.left + 15}, ${height / 2})`, style: { userSelect: "none" } }, oLabel)),
+                React.createElement("line", { x1: 0, y1: height, x2: width, y2: height, stroke: "#ccc", strokeWidth: 1 }),
+                valueTicks.map((tick, i) => (React.createElement("g", { key: `val-${i}`, transform: `translate(${tick.pixel},${height})` },
+                    React.createElement("line", { y2: 5, stroke: "#ccc", strokeWidth: 1 }),
+                    React.createElement("text", { y: 18, textAnchor: "middle", fontSize: 10, fill: "#666", style: { userSelect: "none" } }, tick.label)))),
+                rLabel && (React.createElement("text", { x: width / 2, y: height + 40, textAnchor: "middle", fontSize: 12, fill: "#333", style: { userSelect: "none" } }, rLabel)))) : (React.createElement(React.Fragment, null,
+                React.createElement("line", { x1: 0, y1: height, x2: width, y2: height, stroke: "#ccc", strokeWidth: 1 }),
+                categoryTicks.map((tick, i) => (React.createElement("g", { key: `cat-${i}`, transform: `translate(${tick.pixel},${height})` },
+                    React.createElement("line", { y2: 5, stroke: "#ccc", strokeWidth: 1 }),
+                    React.createElement("text", { y: 18, textAnchor: "middle", fontSize: 10, fill: "#666", style: { userSelect: "none" } }, tick.label)))),
+                oLabel && (React.createElement("text", { x: width / 2, y: height + 40, textAnchor: "middle", fontSize: 12, fill: "#333", style: { userSelect: "none" } }, oLabel)),
+                React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: height, stroke: "#ccc", strokeWidth: 1 }),
+                valueTicks.map((tick, i) => (React.createElement("g", { key: `val-${i}`, transform: `translate(0,${tick.pixel})` },
+                    React.createElement("line", { x2: -5, stroke: "#ccc", strokeWidth: 1 }),
+                    React.createElement("text", { x: -8, textAnchor: "end", dominantBaseline: "middle", fontSize: 10, fill: "#666", style: { userSelect: "none" } }, tick.label)))),
+                rLabel && (React.createElement("text", { x: -margin.left + 15, y: height / 2, textAnchor: "middle", fontSize: 12, fill: "#333", transform: `rotate(-90, ${-margin.left + 15}, ${height / 2})`, style: { userSelect: "none" } }, rLabel)))))),
+            renderedAnnotations,
+            foregroundGraphics,
+            children),
+        title && (React.createElement("text", { x: totalWidth / 2, y: 20, textAnchor: "middle", fontSize: 14, fontWeight: "bold", fill: "#333", style: { userSelect: "none" } }, typeof title === "string" ? title : null)),
+        legend && (React.createElement("g", { transform: `translate(${totalWidth - margin.right + 10}, ${margin.top})` }, isLegendConfig(legend)
+            ? React.createElement(Legend_1.default, { legendGroups: legend.legendGroups, title: "", width: 100 })
+            : legend))));
+}

package/ai/dist/src/components/stream/ParticlePool.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParticlePool = void 0;
+/**
+ * Object-pool particle manager for high-performance canvas rendering.
+ *
+ * Pre-allocates a fixed-size array to avoid GC pressure.
+ * Particles travel along bezier paths within link bands.
+ */
+class ParticlePool {
+    constructor(capacity) {
+        this.capacity = capacity;
+        this.particles = new Array(capacity);
+        for (let i = 0; i < capacity; i++) {
+            this.particles[i] = {
+                t: 0,
+                offset: 0,
+                edgeIndex: 0,
+                active: false,
+                x: 0,
+                y: 0
+            };
+        }
+    }
+    /**
+     * Spawn a new particle on the given edge.
+     * Returns the particle if a free slot was found, null otherwise.
+     */
+    spawn(edgeIndex) {
+        for (let i = 0; i < this.capacity; i++) {
+            const p = this.particles[i];
+            if (!p.active) {
+                p.active = true;
+                p.t = 0;
+                p.offset = Math.random() - 0.5; // [-0.5, 0.5]
+                p.edgeIndex = edgeIndex;
+                p.x = 0;
+                p.y = 0;
+                return p;
+            }
+        }
+        return null; // Pool exhausted
+    }
+    /**
+     * Advance all active particles by deltaTime.
+     * Recycles particles that have completed their journey (t >= 1).
+     */
+    step(deltaTime, speed, edges) {
+        for (let i = 0; i < this.capacity; i++) {
+            const p = this.particles[i];
+            if (!p.active)
+                continue;
+            const edge = edges[p.edgeIndex];
+            if (!edge || !edge.bezier) {
+                p.active = false;
+                continue;
+            }
+            // Advance t — speed is normalized so 1.0 = traverse full path in 1 second
+            p.t += deltaTime * speed;
+            if (p.t >= 1) {
+                p.active = false;
+                continue;
+            }
+            // Evaluate position along the bezier path
+            const pos = evaluateBezier(edge.bezier, p.t, p.offset);
+            p.x = pos.x;
+            p.y = pos.y;
+        }
+    }
+    /** Count active particles for a specific edge index */
+    countForEdge(edgeIndex) {
+        let count = 0;
+        for (let i = 0; i < this.capacity; i++) {
+            if (this.particles[i].active && this.particles[i].edgeIndex === edgeIndex) {
+                count++;
+            }
+        }
+        return count;
+    }
+    /** Deactivate all particles */
+    clear() {
+        for (let i = 0; i < this.capacity; i++) {
+            this.particles[i].active = false;
+        }
+    }
+    /** Resize the pool (creates a new array) */
+    resize(newCapacity) {
+        if (newCapacity <= this.capacity)
+            return;
+        const oldParticles = this.particles;
+        this.particles = new Array(newCapacity);
+        for (let i = 0; i < newCapacity; i++) {
+            if (i < oldParticles.length) {
+                this.particles[i] = oldParticles[i];
+            }
+            else {
+                this.particles[i] = {
+                    t: 0,
+                    offset: 0,
+                    edgeIndex: 0,
+                    active: false,
+                    x: 0,
+                    y: 0
+                };
+            }
+        }
+        this.capacity = newCapacity;
+    }
+}
+exports.ParticlePool = ParticlePool;
+/**
+ * Evaluate a point along a bezier path at parameter t with perpendicular offset.
+ *
+ * Uses the chord direction (P0→P3) for perpendicular offset instead of the
+ * local tangent. This gives a stable perpendicular across the entire curve,
+ * eliminating the pivot/rotation artifact visible on short curves.
+ */
+function evaluateBezier(cache, t, offset) {
+    if (cache.circular && cache.segments) {
+        return evaluateMultiSegment(cache.segments, t, offset, cache.halfWidth);
+    }
+    if (!cache.points)
+        return { x: 0, y: 0 };
+    const [p0, p1, p2, p3] = cache.points;
+    const pos = cubicBezier(p0, p1, p2, p3, t);
+    // Use chord direction (P0→P3) for stable perpendicular offset
+    const dx = p3.x - p0.x;
+    const dy = p3.y - p0.y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len > 0.001) {
+        // Perpendicular to the chord (rotated 90 degrees)
+        const nx = -dy / len;
+        const ny = dx / len;
+        pos.x += nx * offset * cache.halfWidth * 2;
+        pos.y += ny * offset * cache.halfWidth * 2;
+    }
+    return pos;
+}
+/**
+ * Evaluate position along a multi-segment bezier path.
+ * Maps global t [0,1] to the appropriate segment.
+ * Uses segment chord direction for stable perpendicular offset.
+ */
+function evaluateMultiSegment(segments, t, offset, halfWidth) {
+    const n = segments.length;
+    const globalT = t * n;
+    const segIndex = Math.min(Math.floor(globalT), n - 1);
+    const localT = globalT - segIndex;
+    const [p0, p1, p2, p3] = segments[segIndex];
+    const pos = cubicBezier(p0, p1, p2, p3, localT);
+    // Use segment chord direction for stable perpendicular
+    const dx = p3.x - p0.x;
+    const dy = p3.y - p0.y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len > 0.001) {
+        const nx = -dy / len;
+        const ny = dx / len;
+        pos.x += nx * offset * halfWidth * 2;
+        pos.y += ny * offset * halfWidth * 2;
+    }
+    return pos;
+}
+/** Cubic bezier evaluation: B(t) = (1-t)^3*P0 + 3*(1-t)^2*t*P1 + 3*(1-t)*t^2*P2 + t^3*P3 */
+function cubicBezier(p0, p1, p2, p3, t) {
+    const mt = 1 - t;
+    const mt2 = mt * mt;
+    const mt3 = mt2 * mt;
+    const t2 = t * t;
+    const t3 = t2 * t;
+    return {
+        x: mt3 * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t3 * p3.x,
+        y: mt3 * p0.y + 3 * mt2 * t * p1.y + 3 * mt * t2 * p2.y + t3 * p3.y
+    };
+}