@steez-ui/ui 0.1.3 → 0.1.5

package/dist/components/HexagonGrid.js

@@ -0,0 +1,284 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import styles from "./HexagonGrid.module.css";
+const RADIUS = 25;
+const RATE = 0.98;
+const COUNT_MIN = 5;
+const COUNT_MAX = 50;
+const LUMINANCE_MIN = 8;
+const LUMINANCE_MAX = 50;
+function randomFloat() {
+    return Math.random();
+}
+function randomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+export function HexagonGrid({ width: initialWidth = 800, height: initialHeight = 600, pointerReactive = false, backgroundOpacity = 0.4, tone = "default", autoTriggerBaseDelayMs = 2000, autoTriggerJitterMs = 1000, }) {
+    const containerRef = React.useRef(null);
+    const canvasRef = React.useRef(null);
+    const hexagonsRef = React.useRef([]);
+    const animationRef = React.useRef(0);
+    const lastPointerSelectionRef = React.useRef(0);
+    const autoTriggerTimeoutRef = React.useRef(null);
+    const [dimensions, setDimensions] = React.useState({
+        width: initialWidth,
+        height: initialHeight,
+    });
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return undefined;
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                if (width > 0 && height > 0) {
+                    setDimensions({ width: Math.floor(width), height: Math.floor(height) });
+                }
+            }
+        });
+        resizeObserver.observe(container);
+        return () => resizeObserver.disconnect();
+    }, []);
+    const width = dimensions.width;
+    const height = dimensions.height;
+    const triggerHexSelection = React.useCallback((x, y) => {
+        const hexagons = hexagonsRef.current;
+        const hexWidth = RADIUS * Math.cos(Math.PI / 6) * 2;
+        for (const hex of hexagons) {
+            if (x < hex.x - hexWidth / 2 ||
+                x > hex.x + hexWidth / 2 ||
+                y < hex.y - RADIUS ||
+                y > hex.y + RADIUS ||
+                (y < hex.y &&
+                    Math.abs((x - hex.x) / (y - hex.y + RADIUS)) > Math.tan(Math.PI / 3)) ||
+                (y > hex.y &&
+                    Math.abs((x - hex.x) / (y - hex.y - RADIUS)) > Math.tan(Math.PI / 3))) {
+                continue;
+            }
+            hex.selections.push({ count: 0, hue: randomInt(180, 220) });
+            break;
+        }
+    }, []);
+    const init = React.useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        const hexWidth = RADIUS * Math.cos(Math.PI / 6) * 2;
+        const hexHeight = RADIUS * (2 - Math.sin(Math.PI / 6));
+        const countX = Math.ceil(width / hexWidth) + 1;
+        const countY = Math.ceil(height / hexHeight) + 1;
+        const offsetX = -((countX * hexWidth - width) / 2);
+        const offsetY = -((countY * hexHeight - height) / 2);
+        const hexagons = [];
+        for (let gridY = 0; gridY < countY; gridY += 1) {
+            for (let gridX = 0; gridX < countX; gridX += 1) {
+                hexagons.push({
+                    x: offsetX +
+                        (gridX + 0.5) * hexWidth -
+                        (gridY % 2 === 1 ? 0 : hexWidth / 2),
+                    y: offsetY + (gridY + 0.5) * hexHeight,
+                    hue: 0,
+                    selections: [],
+                    neighbors: new Array(6).fill(null),
+                    sourceIndices: [],
+                });
+            }
+        }
+        for (let gridY = 0; gridY < countY; gridY += 1) {
+            for (let gridX = 0; gridX < countX; gridX += 1) {
+                const hexagon = hexagons[gridY * countX + gridX];
+                if (gridX < countX - 1) {
+                    hexagon.neighbors[0] = hexagons[gridY * countX + gridX + 1];
+                }
+                if ((gridX < countX - 1 || gridY % 2 === 0) && gridY < countY - 1) {
+                    hexagon.neighbors[1] =
+                        hexagons[(gridY + 1) * countX + gridX + (gridY % 2 === 1 ? 1 : 0)];
+                }
+                if ((gridX > 0 || gridY % 2 === 1) && gridY < countY - 1) {
+                    hexagon.neighbors[2] =
+                        hexagons[(gridY + 1) * countX + gridX + (gridY % 2 === 1 ? 0 : -1)];
+                }
+                if (gridX > 0) {
+                    hexagon.neighbors[3] = hexagons[gridY * countX + gridX - 1];
+                }
+                if ((gridX > 0 || gridY % 2 === 1) && gridY > 0) {
+                    hexagon.neighbors[4] =
+                        hexagons[(gridY - 1) * countX + gridX + (gridY % 2 === 1 ? 0 : -1)];
+                }
+                if ((gridX < countX - 1 || gridY % 2 === 0) && gridY > 0) {
+                    hexagon.neighbors[5] =
+                        hexagons[(gridY - 1) * countX + gridX + (gridY % 2 === 1 ? 1 : 0)];
+                }
+            }
+        }
+        hexagons[randomInt(0, hexagons.length - 1)]?.selections.push({
+            count: 0,
+            hue: randomInt(180, 220),
+        });
+        hexagonsRef.current = hexagons;
+        const autoTrigger = () => {
+            const activeHexagons = hexagonsRef.current;
+            if (activeHexagons.length > 0) {
+                const randomHex = activeHexagons[randomInt(0, activeHexagons.length - 1)];
+                randomHex?.selections.push({
+                    count: 0,
+                    hue: randomInt(180, 220),
+                });
+            }
+            autoTriggerTimeoutRef.current = window.setTimeout(autoTrigger, autoTriggerBaseDelayMs + randomFloat() * autoTriggerJitterMs);
+        };
+        autoTriggerTimeoutRef.current = window.setTimeout(autoTrigger, autoTriggerBaseDelayMs);
+    }, [autoTriggerBaseDelayMs, autoTriggerJitterMs, height, width]);
+    const drawHexagon = React.useCallback((ctx, x, y, radius, fillLightness, strokeLightness, hue, opacity) => {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.beginPath();
+        for (let index = 0; index < 6; index += 1) {
+            const vertexX = radius * Math.sin((Math.PI / 3) * index);
+            const vertexY = -radius * Math.cos((Math.PI / 3) * index);
+            ctx[index === 0 ? "moveTo" : "lineTo"](vertexX, vertexY);
+        }
+        ctx.closePath();
+        const isAccent = tone === "default" && hue > 0 && hue !== 210;
+        const actualHue = isAccent ? hue : 0;
+        const saturation = isAccent ? 15 : 0;
+        ctx.fillStyle = `hsla(${actualHue}, ${saturation}%, ${fillLightness}%, ${opacity * 0.25})`;
+        ctx.fill();
+        ctx.strokeStyle = `hsla(${actualHue}, ${saturation}%, ${strokeLightness}%, ${opacity * 0.35})`;
+        ctx.stroke();
+        ctx.restore();
+    }, [tone]);
+    const render = React.useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            return;
+        }
+        const hexagons = hexagonsRef.current;
+        if (hexagons.length === 0) {
+            return;
+        }
+        if (backgroundOpacity > 0) {
+            ctx.fillStyle = `rgba(0, 0, 0, ${backgroundOpacity})`;
+            ctx.fillRect(0, 0, width, height);
+        }
+        else {
+            ctx.clearRect(0, 0, width, height);
+        }
+        const radius = RADIUS * RATE;
+        for (const hex of hexagons) {
+            const baseFillLightness = tone === "light" ? 88 : tone === "dark" ? 10 : LUMINANCE_MIN;
+            const baseStrokeLightness = tone === "light" ? 96 : tone === "dark" ? 16 : LUMINANCE_MIN;
+            const baseOpacity = tone === "default" ? 0.3 : 0.92;
+            drawHexagon(ctx, hex.x, hex.y, radius, baseFillLightness, baseStrokeLightness, 0, baseOpacity);
+            for (const selection of hex.selections) {
+                let fillLightness;
+                let opacity;
+                if (selection.count < COUNT_MIN) {
+                    fillLightness =
+                        LUMINANCE_MIN +
+                            (LUMINANCE_MAX - LUMINANCE_MIN) *
+                                Math.pow(Math.sin((Math.PI / 2) * selection.count / COUNT_MIN), 3);
+                    opacity = selection.count / COUNT_MIN;
+                }
+                else if (selection.count < COUNT_MAX) {
+                    fillLightness =
+                        LUMINANCE_MIN +
+                            (LUMINANCE_MAX - LUMINANCE_MIN) *
+                                Math.sin((Math.PI / 2) *
+                                    (1 + (selection.count - COUNT_MIN) / (COUNT_MAX - COUNT_MIN)));
+                    opacity = 1;
+                }
+                else {
+                    fillLightness = LUMINANCE_MAX;
+                    opacity = 1;
+                }
+                drawHexagon(ctx, hex.x, hex.y, radius, fillLightness, fillLightness, selection.hue, opacity);
+                selection.count += 1;
+            }
+            hex.selections = hex.selections.filter((selection) => selection.count <= COUNT_MAX + COUNT_MIN);
+        }
+        for (const hex of hexagons) {
+            if (hex.selections.length === 0) {
+                continue;
+            }
+            for (const selection of hex.selections) {
+                if (selection.count !== COUNT_MIN) {
+                    continue;
+                }
+                hex.sourceIndices.push({
+                    indices: [randomInt(0, 5)],
+                    hue: selection.hue,
+                    count: 0,
+                });
+            }
+        }
+        for (const hex of hexagons) {
+            if (hex.sourceIndices.length === 0) {
+                continue;
+            }
+            for (const sourceIndex of hex.sourceIndices) {
+                if (sourceIndex.count >= 2) {
+                    continue;
+                }
+                const targetIndices = [];
+                const currentIndices = sourceIndex.indices;
+                for (const index of currentIndices) {
+                    const neighbor = hex.neighbors[index];
+                    if (!neighbor) {
+                        continue;
+                    }
+                    neighbor.selections.push({
+                        count: COUNT_MIN,
+                        hue: sourceIndex.hue,
+                    });
+                    targetIndices.push((index + 4) % 6, index, (index + 2) % 6);
+                }
+                sourceIndex.indices = targetIndices;
+                sourceIndex.count += 1;
+            }
+            hex.sourceIndices = hex.sourceIndices.filter((sourceIndex) => sourceIndex.count < 2);
+        }
+        animationRef.current = window.requestAnimationFrame(render);
+    }, [backgroundOpacity, drawHexagon, height, tone, width]);
+    React.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return undefined;
+        }
+        canvas.width = width;
+        canvas.height = height;
+        init();
+        render();
+        return () => {
+            window.cancelAnimationFrame(animationRef.current);
+            if (autoTriggerTimeoutRef.current !== null) {
+                window.clearTimeout(autoTriggerTimeoutRef.current);
+            }
+        };
+    }, [height, init, render, width]);
+    const handlePointerMove = React.useCallback((event) => {
+        if (!pointerReactive) {
+            return;
+        }
+        const now = performance.now();
+        if (now - lastPointerSelectionRef.current < 90) {
+            return;
+        }
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const rect = container.getBoundingClientRect();
+        triggerHexSelection(event.clientX - rect.left, event.clientY - rect.top);
+        lastPointerSelectionRef.current = now;
+    }, [pointerReactive, triggerHexSelection]);
+    return (_jsx("div", { ref: containerRef, className: styles.root, onMouseMove: handlePointerMove, "aria-hidden": "true", children: _jsx("canvas", { ref: canvasRef, className: styles.canvas }) }));
+}
+export default HexagonGrid;
+//# sourceMappingURL=HexagonGrid.js.map

package/dist/components/HexagonGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HexagonGrid.js","sourceRoot":"","sources":["../../src/components/HexagonGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport styles from \"./HexagonGrid.module.css\";\n\nexport interface HexagonGridProps {\n  width?: number;\n  height?: number;\n  pointerReactive?: boolean;\n  backgroundOpacity?: number;\n  tone?: \"default\" | \"light\" | \"dark\";\n  autoTriggerBaseDelayMs?: number;\n  autoTriggerJitterMs?: number;\n}\n\nconst RADIUS = 25;\nconst RATE = 0.98;\nconst COUNT_MIN = 5;\nconst COUNT_MAX = 50;\nconst LUMINANCE_MIN = 8;\nconst LUMINANCE_MAX = 50;\n\ninterface HexagonData {\n  x: number;\n  y: number;\n  hue: number;\n  selections: Array<{ count: number; hue: number }>;\n  neighbors: Array<HexagonData | null>;\n  sourceIndices: Array<{ indices: number[]; hue: number; count: number }>;\n}\n\nfunction randomFloat() {\n  return Math.random();\n}\n\nfunction randomInt(min: number, max: number) {\n  return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\nexport function HexagonGrid({\n  width: initialWidth = 800,\n  height: initialHeight = 600,\n  pointerReactive = false,\n  backgroundOpacity = 0.4,\n  tone = \"default\",\n  autoTriggerBaseDelayMs = 2000,\n  autoTriggerJitterMs = 1000,\n}: HexagonGridProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const hexagonsRef = React.useRef<HexagonData[]>([]);\n  const animationRef = React.useRef<number>(0);\n  const lastPointerSelectionRef = React.useRef(0);\n  const autoTriggerTimeoutRef = React.useRef<number | null>(null);\n  const [dimensions, setDimensions] = React.useState({\n    width: initialWidth,\n    height: initialHeight,\n  });\n\n  React.useEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return undefined;\n    }\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const { width, height } = entry.contentRect;\n        if (width > 0 && height > 0) {\n          setDimensions({ width: Math.floor(width), height: Math.floor(height) });\n        }\n      }\n    });\n\n    resizeObserver.observe(container);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  const width = dimensions.width;\n  const height = dimensions.height;\n\n  const triggerHexSelection = React.useCallback((x: number, y: number) => {\n    const hexagons = hexagonsRef.current;\n    const hexWidth = RADIUS * Math.cos(Math.PI / 6) * 2;\n\n    for (const hex of hexagons) {\n      if (\n        x < hex.x - hexWidth / 2 ||\n        x > hex.x + hexWidth / 2 ||\n        y < hex.y - RADIUS ||\n        y > hex.y + RADIUS ||\n        (y < hex.y &&\n          Math.abs((x - hex.x) / (y - hex.y + RADIUS)) > Math.tan(Math.PI / 3)) ||\n        (y > hex.y &&\n          Math.abs((x - hex.x) / (y - hex.y - RADIUS)) > Math.tan(Math.PI / 3))\n      ) {\n        continue;\n      }\n\n      hex.selections.push({ count: 0, hue: randomInt(180, 220) });\n      break;\n    }\n  }, []);\n\n  const init = React.useCallback(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) {\n      return;\n    }\n\n    const hexWidth = RADIUS * Math.cos(Math.PI / 6) * 2;\n    const hexHeight = RADIUS * (2 - Math.sin(Math.PI / 6));\n\n    const countX = Math.ceil(width / hexWidth) + 1;\n    const countY = Math.ceil(height / hexHeight) + 1;\n    const offsetX = -((countX * hexWidth - width) / 2);\n    const offsetY = -((countY * hexHeight - height) / 2);\n\n    const hexagons: HexagonData[] = [];\n\n    for (let gridY = 0; gridY < countY; gridY += 1) {\n      for (let gridX = 0; gridX < countX; gridX += 1) {\n        hexagons.push({\n          x:\n            offsetX +\n            (gridX + 0.5) * hexWidth -\n            (gridY % 2 === 1 ? 0 : hexWidth / 2),\n          y: offsetY + (gridY + 0.5) * hexHeight,\n          hue: 0,\n          selections: [],\n          neighbors: new Array(6).fill(null),\n          sourceIndices: [],\n        });\n      }\n    }\n\n    for (let gridY = 0; gridY < countY; gridY += 1) {\n      for (let gridX = 0; gridX < countX; gridX += 1) {\n        const hexagon = hexagons[gridY * countX + gridX];\n\n        if (gridX < countX - 1) {\n          hexagon.neighbors[0] = hexagons[gridY * countX + gridX + 1];\n        }\n        if ((gridX < countX - 1 || gridY % 2 === 0) && gridY < countY - 1) {\n          hexagon.neighbors[1] =\n            hexagons[(gridY + 1) * countX + gridX + (gridY % 2 === 1 ? 1 : 0)];\n        }\n        if ((gridX > 0 || gridY % 2 === 1) && gridY < countY - 1) {\n          hexagon.neighbors[2] =\n            hexagons[(gridY + 1) * countX + gridX + (gridY % 2 === 1 ? 0 : -1)];\n        }\n        if (gridX > 0) {\n          hexagon.neighbors[3] = hexagons[gridY * countX + gridX - 1];\n        }\n        if ((gridX > 0 || gridY % 2 === 1) && gridY > 0) {\n          hexagon.neighbors[4] =\n            hexagons[(gridY - 1) * countX + gridX + (gridY % 2 === 1 ? 0 : -1)];\n        }\n        if ((gridX < countX - 1 || gridY % 2 === 0) && gridY > 0) {\n          hexagon.neighbors[5] =\n            hexagons[(gridY - 1) * countX + gridX + (gridY % 2 === 1 ? 1 : 0)];\n        }\n      }\n    }\n\n    hexagons[randomInt(0, hexagons.length - 1)]?.selections.push({\n      count: 0,\n      hue: randomInt(180, 220),\n    });\n\n    hexagonsRef.current = hexagons;\n\n    const autoTrigger = () => {\n      const activeHexagons = hexagonsRef.current;\n      if (activeHexagons.length > 0) {\n        const randomHex = activeHexagons[randomInt(0, activeHexagons.length - 1)];\n        randomHex?.selections.push({\n          count: 0,\n          hue: randomInt(180, 220),\n        });\n      }\n      autoTriggerTimeoutRef.current = window.setTimeout(\n        autoTrigger,\n        autoTriggerBaseDelayMs + randomFloat() * autoTriggerJitterMs,\n      );\n    };\n\n    autoTriggerTimeoutRef.current = window.setTimeout(autoTrigger, autoTriggerBaseDelayMs);\n  }, [autoTriggerBaseDelayMs, autoTriggerJitterMs, height, width]);\n\n  const drawHexagon = React.useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      x: number,\n      y: number,\n      radius: number,\n      fillLightness: number,\n      strokeLightness: number,\n      hue: number,\n      opacity: number,\n    ) => {\n      ctx.save();\n      ctx.translate(x, y);\n      ctx.beginPath();\n\n      for (let index = 0; index < 6; index += 1) {\n        const vertexX = radius * Math.sin((Math.PI / 3) * index);\n        const vertexY = -radius * Math.cos((Math.PI / 3) * index);\n        ctx[index === 0 ? \"moveTo\" : \"lineTo\"](vertexX, vertexY);\n      }\n      ctx.closePath();\n\n      const isAccent = tone === \"default\" && hue > 0 && hue !== 210;\n      const actualHue = isAccent ? hue : 0;\n      const saturation = isAccent ? 15 : 0;\n\n      ctx.fillStyle = `hsla(${actualHue}, ${saturation}%, ${fillLightness}%, ${\n        opacity * 0.25\n      })`;\n      ctx.fill();\n      ctx.strokeStyle = `hsla(${actualHue}, ${saturation}%, ${strokeLightness}%, ${\n        opacity * 0.35\n      })`;\n      ctx.stroke();\n      ctx.restore();\n    },\n    [tone],\n  );\n\n  const render = React.useCallback(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) {\n      return;\n    }\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) {\n      return;\n    }\n\n    const hexagons = hexagonsRef.current;\n    if (hexagons.length === 0) {\n      return;\n    }\n\n    if (backgroundOpacity > 0) {\n      ctx.fillStyle = `rgba(0, 0, 0, ${backgroundOpacity})`;\n      ctx.fillRect(0, 0, width, height);\n    } else {\n      ctx.clearRect(0, 0, width, height);\n    }\n\n    const radius = RADIUS * RATE;\n\n    for (const hex of hexagons) {\n      const baseFillLightness =\n        tone === \"light\" ? 88 : tone === \"dark\" ? 10 : LUMINANCE_MIN;\n      const baseStrokeLightness =\n        tone === \"light\" ? 96 : tone === \"dark\" ? 16 : LUMINANCE_MIN;\n      const baseOpacity = tone === \"default\" ? 0.3 : 0.92;\n\n      drawHexagon(\n        ctx,\n        hex.x,\n        hex.y,\n        radius,\n        baseFillLightness,\n        baseStrokeLightness,\n        0,\n        baseOpacity,\n      );\n\n      for (const selection of hex.selections) {\n        let fillLightness: number;\n        let opacity: number;\n\n        if (selection.count < COUNT_MIN) {\n          fillLightness =\n            LUMINANCE_MIN +\n            (LUMINANCE_MAX - LUMINANCE_MIN) *\n              Math.pow(\n                Math.sin((Math.PI / 2) * selection.count / COUNT_MIN),\n                3,\n              );\n          opacity = selection.count / COUNT_MIN;\n        } else if (selection.count < COUNT_MAX) {\n          fillLightness =\n            LUMINANCE_MIN +\n            (LUMINANCE_MAX - LUMINANCE_MIN) *\n              Math.sin(\n                (Math.PI / 2) *\n                  (1 + (selection.count - COUNT_MIN) / (COUNT_MAX - COUNT_MIN)),\n              );\n          opacity = 1;\n        } else {\n          fillLightness = LUMINANCE_MAX;\n          opacity = 1;\n        }\n\n        drawHexagon(\n          ctx,\n          hex.x,\n          hex.y,\n          radius,\n          fillLightness,\n          fillLightness,\n          selection.hue,\n          opacity,\n        );\n        selection.count += 1;\n      }\n\n      hex.selections = hex.selections.filter(\n        (selection) => selection.count <= COUNT_MAX + COUNT_MIN,\n      );\n    }\n\n    for (const hex of hexagons) {\n      if (hex.selections.length === 0) {\n        continue;\n      }\n\n      for (const selection of hex.selections) {\n        if (selection.count !== COUNT_MIN) {\n          continue;\n        }\n\n        hex.sourceIndices.push({\n          indices: [randomInt(0, 5)],\n          hue: selection.hue,\n          count: 0,\n        });\n      }\n    }\n\n    for (const hex of hexagons) {\n      if (hex.sourceIndices.length === 0) {\n        continue;\n      }\n\n      for (const sourceIndex of hex.sourceIndices) {\n        if (sourceIndex.count >= 2) {\n          continue;\n        }\n\n        const targetIndices: number[] = [];\n        const currentIndices = sourceIndex.indices;\n\n        for (const index of currentIndices) {\n          const neighbor = hex.neighbors[index];\n          if (!neighbor) {\n            continue;\n          }\n\n          neighbor.selections.push({\n            count: COUNT_MIN,\n            hue: sourceIndex.hue,\n          });\n          targetIndices.push((index + 4) % 6, index, (index + 2) % 6);\n        }\n\n        sourceIndex.indices = targetIndices;\n        sourceIndex.count += 1;\n      }\n\n      hex.sourceIndices = hex.sourceIndices.filter((sourceIndex) => sourceIndex.count < 2);\n    }\n\n    animationRef.current = window.requestAnimationFrame(render);\n  }, [backgroundOpacity, drawHexagon, height, tone, width]);\n\n  React.useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) {\n      return undefined;\n    }\n\n    canvas.width = width;\n    canvas.height = height;\n    init();\n    render();\n\n    return () => {\n      window.cancelAnimationFrame(animationRef.current);\n      if (autoTriggerTimeoutRef.current !== null) {\n        window.clearTimeout(autoTriggerTimeoutRef.current);\n      }\n    };\n  }, [height, init, render, width]);\n\n  const handlePointerMove = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (!pointerReactive) {\n        return;\n      }\n\n      const now = performance.now();\n      if (now - lastPointerSelectionRef.current < 90) {\n        return;\n      }\n\n      const container = containerRef.current;\n      if (!container) {\n        return;\n      }\n\n      const rect = container.getBoundingClientRect();\n      triggerHexSelection(event.clientX - rect.left, event.clientY - rect.top);\n      lastPointerSelectionRef.current = now;\n    },\n    [pointerReactive, triggerHexSelection],\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      className={styles.root}\n      onMouseMove={handlePointerMove}\n      aria-hidden=\"true\"\n    >\n      <canvas ref={canvasRef} className={styles.canvas} />\n    </div>\n  );\n}\n\nexport default HexagonGrid;\n"]}

package/dist/components/HexagonGrid.module.css

@@ -0,0 +1,14 @@
+.root {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}
+
+.canvas {
+  display: block;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}

package/dist/components/LoadingProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingProgressBar.js","sourceRoot":"","sources":["../../src/components/LoadingProgressBar.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAErD,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,CAAC;AAEjD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,8BAA8B,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AAQhG,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,UAAU,GACc;IACxB,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,8BAA8B,CAAC,CAAC;IAExF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,aACrE,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC5B,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBACzB,MAAM,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;oBACpC,OAAO,CACL,cAEE,SAAS,EAAE,GAAG,MAAM,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EACrE,KAAK,EAAE,EAAE,CAAC,aAAuB,CAAC,EAAE,GAAG,KAAK,GAAG,EAAE,IAAI,EAAE,IAFlD,KAAK,CAGV,CACH,CAAC;gBACJ,CAAC,CAAC,GACE,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,GAAO,IACjF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"LoadingProgressBar.js","sourceRoot":"","sources":["../../src/components/LoadingProgressBar.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAErD,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,CAAC;AAEjD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,8BAA8B,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AAQhG,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,UAAU,GACc;IACxB,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,8BAA8B,CAAC,CAAC;IAExF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,aACrE,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC5B,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBACzB,MAAM,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;oBACpC,OAAO,CACL,cAEE,SAAS,EAAE,GAAG,MAAM,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EACrE,KAAK,EAAE,EAAE,CAAC,aAAuB,CAAC,EAAE,GAAG,KAAK,GAAG,EAAE,IAAI,EAAE,IAFlD,KAAK,CAGV,CACH,CAAC;gBACJ,CAAC,CAAC,GACE,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,GAAO,IACjF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./LoadingProgressBar.module.css\";\n\nexport const LOADING_PROGRESS_SEGMENT_COUNT = 20;\n\nconst BAR_INDEXES = Array.from({ length: LOADING_PROGRESS_SEGMENT_COUNT }, (_, index) => index);\n\nexport interface LoadingProgressBarProps {\n  progress: number;\n  className?: string;\n  valueLabel?: string;\n}\n\nexport function LoadingProgressBar({\n  progress,\n  className,\n  valueLabel,\n}: LoadingProgressBarProps) {\n  const clampedProgress = Math.max(0, Math.min(100, progress));\n  const filledBars = Math.round((clampedProgress / 100) * LOADING_PROGRESS_SEGMENT_COUNT);\n\n  return (\n    <div className={className ? `${styles.root} ${className}` : styles.root}>\n      <div className={styles.barGroup}>\n        {BAR_INDEXES.map((index) => {\n          const isFilled = index < filledBars;\n          return (\n            <div\n              key={index}\n              className={`${styles.bar} ${isFilled ? styles.barFilled : \"\"}`.trim()}\n              style={{ [\"--bar-delay\" as string]: `${index * 20}ms` }}\n            />\n          );\n        })}\n      </div>\n      <div className={styles.value}>{valueLabel ?? `${Math.round(clampedProgress)}%`}</div>\n    </div>\n  );\n}\n\n"]}

package/dist/components/MarqueeStrip.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface MarqueeStripProps<T> extends React.HTMLAttributes<HTMLDivElement> {
+    items: readonly T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    ariaLabel?: string;
+    durationSeconds?: number;
+    gap?: number | string;
+    pauseOnHover?: boolean;
+    trackClassName?: string;
+    itemClassName?: string;
+}
+export declare function MarqueeStrip<T>({ items, renderItem, ariaLabel, durationSeconds, gap, pauseOnHover, className, trackClassName, itemClassName, style, ...props }: MarqueeStripProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MarqueeStrip.d.ts.map

package/dist/components/MarqueeStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarqueeStrip.d.ts","sourceRoot":"","sources":["../../src/components/MarqueeStrip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,SAAS,EACT,eAAoB,EACpB,GAAc,EACd,YAAoB,EACpB,SAAc,EACd,cAAmB,EACnB,aAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA6BtB"}

package/dist/components/MarqueeStrip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./MarqueeStrip.module.css";
+export function MarqueeStrip({ items, renderItem, ariaLabel, durationSeconds = 24, gap = "0.7rem", pauseOnHover = false, className = "", trackClassName = "", itemClassName = "", style, ...props }) {
+    const doubledItems = [...items, ...items];
+    const mergedStyle = {
+        ...style,
+        ["--marquee-duration"]: `${durationSeconds}s`,
+        ["--marquee-gap"]: typeof gap === "number" ? `${gap}px` : gap,
+    };
+    return (_jsx("div", { className: `${styles.root} ${pauseOnHover ? styles.pauseOnHover : ""} ${className}`.trim(), "aria-label": ariaLabel, style: mergedStyle, ...props, children: _jsx("div", { className: `${styles.track} ${trackClassName}`.trim(), children: doubledItems.map((item, index) => (_jsx("div", { className: `${styles.item} ${itemClassName}`.trim(), "aria-hidden": index >= items.length, children: renderItem(item, index % items.length) }, index))) }) }));
+}
+//# sourceMappingURL=MarqueeStrip.js.map

package/dist/components/MarqueeStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarqueeStrip.js","sourceRoot":"","sources":["../../src/components/MarqueeStrip.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAa/C,MAAM,UAAU,YAAY,CAAI,EAC9B,KAAK,EACL,UAAU,EACV,SAAS,EACT,eAAe,GAAG,EAAE,EACpB,GAAG,GAAG,QAAQ,EACd,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,EAAE,EACnB,aAAa,GAAG,EAAE,EAClB,KAAK,EACL,GAAG,KAAK,EACa;IACrB,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG;QAClB,GAAG,KAAK;QACR,CAAC,oBAA8B,CAAC,EAAE,GAAG,eAAe,GAAG;QACvD,CAAC,eAAyB,CAAC,EACzB,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG;KACtB,CAAC;IAEzB,OAAO,CACL,cACE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,gBAC9E,SAAS,EACrB,KAAK,EAAE,WAAW,KACd,KAAK,YAET,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,YACvD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,cAEE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,aAAa,EAAE,CAAC,IAAI,EAAE,iBACtC,KAAK,IAAI,KAAK,CAAC,MAAM,YAEjC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAJlC,KAAK,CAKN,CACP,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./MarqueeStrip.module.css\";\n\nexport interface MarqueeStripProps<T> extends React.HTMLAttributes<HTMLDivElement> {\n  items: readonly T[];\n  renderItem: (item: T, index: number) => React.ReactNode;\n  ariaLabel?: string;\n  durationSeconds?: number;\n  gap?: number | string;\n  pauseOnHover?: boolean;\n  trackClassName?: string;\n  itemClassName?: string;\n}\n\nexport function MarqueeStrip<T>({\n  items,\n  renderItem,\n  ariaLabel,\n  durationSeconds = 24,\n  gap = \"0.7rem\",\n  pauseOnHover = false,\n  className = \"\",\n  trackClassName = \"\",\n  itemClassName = \"\",\n  style,\n  ...props\n}: MarqueeStripProps<T>) {\n  const doubledItems = [...items, ...items];\n  const mergedStyle = {\n    ...style,\n    [\"--marquee-duration\" as string]: `${durationSeconds}s`,\n    [\"--marquee-gap\" as string]:\n      typeof gap === \"number\" ? `${gap}px` : gap,\n  } as React.CSSProperties;\n\n  return (\n    <div\n      className={`${styles.root} ${pauseOnHover ? styles.pauseOnHover : \"\"} ${className}`.trim()}\n      aria-label={ariaLabel}\n      style={mergedStyle}\n      {...props}\n    >\n      <div className={`${styles.track} ${trackClassName}`.trim()}>\n        {doubledItems.map((item, index) => (\n          <div\n            key={index}\n            className={`${styles.item} ${itemClassName}`.trim()}\n            aria-hidden={index >= items.length}\n          >\n            {renderItem(item, index % items.length)}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/MarqueeStrip.module.css

@@ -0,0 +1,36 @@
+.root {
+  position: relative;
+  overflow: hidden;
+}
+
+.track {
+  display: flex;
+  align-items: center;
+  gap: var(--marquee-gap, 0.7rem);
+  width: max-content;
+  animation: marqueeStrip var(--marquee-duration, 24s) linear infinite;
+}
+
+.pauseOnHover:hover .track {
+  animation-play-state: paused;
+}
+
+.item {
+  flex: 0 0 auto;
+}
+
+@keyframes marqueeStrip {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(calc(-50% - (var(--marquee-gap, 0.7rem) / 2)));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track {
+    animation: none;
+  }
+}

package/dist/components/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/components/PageHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG7D,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAoB7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACV,cAAc,EACd,MAAM,EACN,UAAU,EACV,cAAc,EACd,aAAa,EACb,eAAe,GAAG,aAAa,EAC/B,eAAe,GAAG,aAAa,GACf;IAChB,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;IAEtE,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,YACpD,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9B,eAAK,SAAS,EAAE,MAAM,CAAC,YAAY,aAChC,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,CACvB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,gBACL,cAAc,YAE1B,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,GACjE,CACV,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAClC,yBACG,IAAI,CAAC,CAAC,CAAC,CACN,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GACtC,CACR,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,IACH,EACJ,WAAW,CAAC,CAAC,CAAC,sBAAI,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,IACtC,IACF,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAC/B,KAAK,EACL,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,gBAAa,SAAS,YACvF,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC3C,CACV,CAAC,CAAC,CAAC,IAAI,EACP,UAAU,CAAC,CAAC,CAAC,CACZ,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,gBAAa,eAAe,YACjG,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC/B,CACV,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,CAAC,CAAC,CAAC,CAChB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,OAAO,EAAE,cAAc,gBACX,WAAW,EACvB,KAAK,EAAE,WAAW,YAElB,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC3B,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/components/PageHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG7D,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAoB7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACV,cAAc,EACd,MAAM,EACN,UAAU,EACV,cAAc,EACd,aAAa,EACb,eAAe,GAAG,aAAa,EAC/B,eAAe,GAAG,aAAa,GACf;IAChB,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;IAEtE,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,YACpD,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9B,eAAK,SAAS,EAAE,MAAM,CAAC,YAAY,aAChC,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,CACvB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,gBACL,cAAc,YAE1B,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,GACjE,CACV,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAClC,yBACG,IAAI,CAAC,CAAC,CAAC,CACN,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GACtC,CACR,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,IACH,EACJ,WAAW,CAAC,CAAC,CAAC,sBAAI,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,IACtC,IACF,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAC/B,KAAK,EACL,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,gBAAa,SAAS,YACvF,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC3C,CACV,CAAC,CAAC,CAAC,IAAI,EACP,UAAU,CAAC,CAAC,CAAC,CACZ,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,gBAAa,eAAe,YACjG,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC/B,CACV,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,CAAC,CAAC,CAAC,CAChB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,OAAO,EAAE,cAAc,gBACX,WAAW,EACvB,KAAK,EAAE,WAAW,YAElB,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC3B,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,IACF,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React, { ReactNode } from \"react\";\n\nimport { EyeIcon, Icon, SlidersIcon } from \"@steez-ui/icons\";\nimport type { SteezIconName } from \"@steez-ui/icons\";\n\nimport styles from \"./PageHeader.module.css\";\n\nexport interface PageHeaderProps {\n  title: string;\n  description?: string;\n  icon?: SteezIconName;\n  extra?: ReactNode;\n  className?: string;\n  brand?: ReactNode;\n  onBrandClick?: () => void;\n  brandTitle?: string;\n  brandAriaLabel?: string;\n  onBack?: () => void;\n  onSettings?: () => void;\n  onViewerToggle?: () => void;\n  viewerVisible?: boolean;\n  viewerShowLabel?: string;\n  viewerHideLabel?: string;\n}\n\nexport function PageHeader({\n  title,\n  description,\n  icon,\n  extra,\n  className = \"\",\n  brand,\n  onBrandClick,\n  brandTitle,\n  brandAriaLabel,\n  onBack,\n  onSettings,\n  onViewerToggle,\n  viewerVisible,\n  viewerShowLabel = \"Show viewer\",\n  viewerHideLabel = \"Hide viewer\",\n}: PageHeaderProps) {\n  const viewerLabel = viewerVisible ? viewerHideLabel : viewerShowLabel;\n\n  return (\n    <div className={`${styles.header} ${className}`.trim()}>\n      <div className={styles.headerRow}>\n        <div className={styles.brandCluster}>\n          {brand || onBrandClick ? (\n            <button\n              type=\"button\"\n              className={styles.brandButton}\n              onClick={onBrandClick}\n              title={brandTitle}\n              aria-label={brandAriaLabel}\n            >\n              <span className={styles.brandVisual}>{brand ?? title.slice(0, 1)}</span>\n            </button>\n          ) : null}\n          <div className={styles.headerContent}>\n            <h2>\n              {icon ? (\n                <span className={styles.titleIcon}>\n                  <Icon icon={icon} width={18} height={18} />\n                </span>\n              ) : null}\n              {title}\n            </h2>\n            {description ? <p>{description}</p> : null}\n          </div>\n        </div>\n        <div className={styles.headerExtra}>\n          {extra}\n          {onBack ? (\n            <button type=\"button\" className={styles.iconButton} onClick={onBack} aria-label=\"Go back\">\n              <Icon icon=\"chevronLeft\" width={18} height={18} />\n            </button>\n          ) : null}\n          {onSettings ? (\n            <button type=\"button\" className={styles.iconButton} onClick={onSettings} aria-label=\"Open settings\">\n              <SlidersIcon width={18} height={18} />\n            </button>\n          ) : null}\n          {onViewerToggle ? (\n            <button\n              type=\"button\"\n              className={styles.iconButton}\n              onClick={onViewerToggle}\n              aria-label={viewerLabel}\n              title={viewerLabel}\n            >\n              <EyeIcon width={18} height={18} />\n            </button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/PageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplate.js","sourceRoot":"","sources":["../../src/components/PageTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAC;AACnE,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAmC/C,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,cAAc,EACd,MAAM,EACN,UAAU,EACV,KAAK,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,eAAe,EACf,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,EAAE,GACI;IAClB,MAAM,WAAW,GAAG,KAAK,IAAI,OAAO,CAAC;IAErC,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aACjD,SAAS,CAAC,CAAC,CAAC,CACX,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,YAC3B,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,GAChC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CACjB,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,gBAAa,GAAG,KAAK,WAAW,YAC3E,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EACvC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,YAAY,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EACtG,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,YAAY,KAAK,GAAG,CAAC,EAAE,YAErC,GAAG,CAAC,KAAK,IAPL,GAAG,CAAC,EAAE,CAQJ,CACV,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAER,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC3B,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,2BAAkB,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,GAC1E,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PageTemplate.js","sourceRoot":"","sources":["../../src/components/PageTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAC;AACnE,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAmC/C,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,cAAc,EACd,MAAM,EACN,UAAU,EACV,KAAK,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,eAAe,EACf,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,EAAE,GACI;IAClB,MAAM,WAAW,GAAG,KAAK,IAAI,OAAO,CAAC;IAErC,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aACjD,SAAS,CAAC,CAAC,CAAC,CACX,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,YAC3B,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,GAChC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CACjB,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,gBAAa,GAAG,KAAK,WAAW,YAC3E,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EACvC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,YAAY,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EACtG,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,YAAY,KAAK,GAAG,CAAC,EAAE,YAErC,GAAG,CAAC,KAAK,IAPL,GAAG,CAAC,EAAE,CAQJ,CACV,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAER,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC3B,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,2BAAkB,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,GAC1E,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from \"react\";\n\nimport { PageHeader, type PageHeaderProps } from \"./PageHeader.js\";\nimport styles from \"./PageTemplate.module.css\";\n\ninterface SubTab {\n  id: string;\n  label: string;\n}\n\nexport interface PageTemplateProps\n  extends Pick<\n    PageHeaderProps,\n    | \"title\"\n    | \"description\"\n    | \"icon\"\n    | \"onBack\"\n    | \"onSettings\"\n    | \"brand\"\n    | \"onBrandClick\"\n    | \"onViewerToggle\"\n    | \"viewerVisible\"\n  > {\n  actions?: React.ReactNode;\n  extra?: React.ReactNode;\n  className?: string;\n  subTabs?: SubTab[];\n  activeSubTab?: string;\n  onSubTabChange?: (tabId: string) => void;\n  children?: React.ReactNode;\n  loading?: boolean;\n  showTitle?: boolean;\n  brandTitle?: string;\n  brandAriaLabel?: string;\n  viewerShowLabel?: string;\n  viewerHideLabel?: string;\n}\n\nexport function PageTemplate({\n  title,\n  actions,\n  extra,\n  description,\n  icon,\n  subTabs,\n  activeSubTab,\n  onSubTabChange,\n  onBack,\n  onSettings,\n  brand,\n  onBrandClick,\n  onViewerToggle,\n  viewerVisible,\n  brandTitle,\n  brandAriaLabel,\n  viewerShowLabel,\n  viewerHideLabel,\n  children,\n  loading,\n  showTitle = true,\n  className = \"\",\n}: PageTemplateProps) {\n  const headerExtra = extra ?? actions;\n\n  return (\n    <div className={`${styles.root} ${className}`.trim()}>\n      {showTitle ? (\n        <div className={styles.header}>\n          <PageHeader\n            title={title}\n            description={description}\n            icon={icon}\n            extra={headerExtra}\n            onBack={onBack}\n            onSettings={onSettings}\n            brand={brand}\n            onBrandClick={onBrandClick}\n            brandTitle={brandTitle}\n            brandAriaLabel={brandAriaLabel}\n            onViewerToggle={onViewerToggle}\n            viewerVisible={viewerVisible}\n            viewerShowLabel={viewerShowLabel}\n            viewerHideLabel={viewerHideLabel}\n          />\n        </div>\n      ) : null}\n\n      {subTabs?.length ? (\n        <div className={styles.subTabs} role=\"tablist\" aria-label={`${title} sections`}>\n          {subTabs.map((tab) => (\n            <button\n              key={tab.id}\n              onClick={() => onSubTabChange?.(tab.id)}\n              className={`${styles.subTabButton} ${activeSubTab === tab.id ? styles.subTabButtonActive : \"\"}`.trim()}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={activeSubTab === tab.id}\n            >\n              {tab.label}\n            </button>\n          ))}\n        </div>\n      ) : null}\n\n      <div className={styles.content}>\n        {loading ? <div className={styles.loading}>Loading...</div> : children ?? null}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/RuntimeOrbitDiagram.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { SteezIconProps } from "@steez-ui/icons";
+export interface RuntimeOrbitNode {
+    id: string;
+    label: string;
+    icon: React.ComponentType<SteezIconProps>;
+    x: number;
+    y: number;
+}
+export interface RuntimeOrbitDiagramProps {
+    nodes: RuntimeOrbitNode[];
+    className?: string;
+    durationSeconds?: number;
+    pathOrder?: readonly string[];
+    iconSize?: number;
+}
+export declare function RuntimeOrbitDiagram({ nodes, className, durationSeconds, pathOrder, iconSize, }: RuntimeOrbitDiagramProps): import("react/jsx-runtime").JSX.Element;
+export default RuntimeOrbitDiagram;
+//# sourceMappingURL=RuntimeOrbitDiagram.d.ts.map

package/dist/components/RuntimeOrbitDiagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeOrbitDiagram.d.ts","sourceRoot":"","sources":["../../src/components/RuntimeOrbitDiagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAcD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,SAAc,EACd,eAAqB,EACrB,SAAS,EACT,QAAa,GACd,EAAE,wBAAwB,2CA4E1B;AAED,eAAe,mBAAmB,CAAC"}

package/dist/components/RuntimeOrbitDiagram.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import styles from "./RuntimeOrbitDiagram.module.css";
+function buildPath(points) {
+    if (points.length === 0) {
+        return "";
+    }
+    return `${points
+        .map((point, index) => `${index === 0 ? "M" : "L"} ${point.x.toFixed(2)} ${point.y.toFixed(2)}`)
+        .join(" ")} Z`;
+}
+export function RuntimeOrbitDiagram({ nodes, className = "", durationSeconds = 5.4, pathOrder, iconSize = 22, }) {
+    const orderedNodes = React.useMemo(() => {
+        if (!pathOrder?.length) {
+            return nodes;
+        }
+        const nodeMap = new Map(nodes.map((node) => [node.id, node]));
+        const sequence = pathOrder
+            .map((id) => nodeMap.get(id))
+            .filter((node) => Boolean(node));
+        return sequence.length === nodes.length ? sequence : nodes;
+    }, [nodes, pathOrder]);
+    const pathD = React.useMemo(() => buildPath(orderedNodes), [orderedNodes]);
+    const nodeSequenceIndex = React.useMemo(() => new Map(orderedNodes.map((node, index) => [node.id, index])), [orderedNodes]);
+    return (_jsxs("div", { className: `${styles.root} ${className}`.trim(), style: { "--orbit-duration": `${durationSeconds}s` }, children: [_jsxs("svg", { className: styles.svg, viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [pathD ? _jsx("path", { className: styles.track, d: pathD, pathLength: 100 }) : null, pathD ? _jsx("path", { className: styles.pathLine, d: pathD, pathLength: 100 }) : null, pathD ? (_jsx("circle", { className: styles.dot, cx: "0", cy: "0", r: "1.45", children: _jsx("animateMotion", { calcMode: "linear", dur: `${durationSeconds}s`, path: pathD, repeatCount: "indefinite" }) })) : null] }), nodes.map((node) => {
+                const IconComponent = node.icon;
+                const sequenceIndex = nodeSequenceIndex.get(node.id) ?? 0;
+                const nodeDelayMs = Math.round((durationSeconds * 1000 * sequenceIndex) /
+                    Math.max(orderedNodes.length, 1) -
+                    120);
+                return (_jsxs("div", { className: styles.node, style: {
+                        "--node-x": `${node.x}%`,
+                        "--node-y": `${node.y}%`,
+                        "--node-delay": `${nodeDelayMs}ms`,
+                    }, title: node.label, children: [_jsx("div", { className: styles.nodeInner, children: _jsx(IconComponent, { width: iconSize, height: iconSize }) }), _jsx("span", { className: styles.srOnly, children: node.label })] }, node.id));
+            })] }));
+}
+export default RuntimeOrbitDiagram;
+//# sourceMappingURL=RuntimeOrbitDiagram.js.map

package/dist/components/RuntimeOrbitDiagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeOrbitDiagram.js","sourceRoot":"","sources":["../../src/components/RuntimeOrbitDiagram.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport type { SteezIconProps } from \"@steez-ui/icons\";\n\nimport styles from \"./RuntimeOrbitDiagram.module.css\";\n\nexport interface RuntimeOrbitNode {\n  id: string;\n  label: string;\n  icon: React.ComponentType<SteezIconProps>;\n  x: number;\n  y: number;\n}\n\nexport interface RuntimeOrbitDiagramProps {\n  nodes: RuntimeOrbitNode[];\n  className?: string;\n  durationSeconds?: number;\n  pathOrder?: readonly string[];\n  iconSize?: number;\n}\n\nfunction buildPath(points: RuntimeOrbitNode[]) {\n  if (points.length === 0) {\n    return \"\";\n  }\n\n  return `${points\n    .map((point, index) =>\n      `${index === 0 ? \"M\" : \"L\"} ${point.x.toFixed(2)} ${point.y.toFixed(2)}`,\n    )\n    .join(\" \")} Z`;\n}\n\nexport function RuntimeOrbitDiagram({\n  nodes,\n  className = \"\",\n  durationSeconds = 5.4,\n  pathOrder,\n  iconSize = 22,\n}: RuntimeOrbitDiagramProps) {\n  const orderedNodes = React.useMemo(() => {\n    if (!pathOrder?.length) {\n      return nodes;\n    }\n\n    const nodeMap = new Map(nodes.map((node) => [node.id, node] as const));\n    const sequence = pathOrder\n      .map((id) => nodeMap.get(id))\n      .filter((node): node is RuntimeOrbitNode => Boolean(node));\n\n    return sequence.length === nodes.length ? sequence : nodes;\n  }, [nodes, pathOrder]);\n\n  const pathD = React.useMemo(() => buildPath(orderedNodes), [orderedNodes]);\n  const nodeSequenceIndex = React.useMemo(\n    () => new Map(orderedNodes.map((node, index) => [node.id, index] as const)),\n    [orderedNodes],\n  );\n\n  return (\n    <div\n      className={`${styles.root} ${className}`.trim()}\n      style={{ \"--orbit-duration\": `${durationSeconds}s` } as React.CSSProperties}\n    >\n      <svg\n        className={styles.svg}\n        viewBox=\"0 0 100 100\"\n        preserveAspectRatio=\"none\"\n        aria-hidden=\"true\"\n      >\n        {pathD ? <path className={styles.track} d={pathD} pathLength={100} /> : null}\n        {pathD ? <path className={styles.pathLine} d={pathD} pathLength={100} /> : null}\n        {pathD ? (\n          <circle className={styles.dot} cx=\"0\" cy=\"0\" r=\"1.45\">\n            <animateMotion\n              calcMode=\"linear\"\n              dur={`${durationSeconds}s`}\n              path={pathD}\n              repeatCount=\"indefinite\"\n            />\n          </circle>\n        ) : null}\n      </svg>\n\n      {nodes.map((node) => {\n        const IconComponent = node.icon;\n        const sequenceIndex = nodeSequenceIndex.get(node.id) ?? 0;\n        const nodeDelayMs = Math.round(\n          (durationSeconds * 1000 * sequenceIndex) /\n            Math.max(orderedNodes.length, 1) -\n            120,\n        );\n\n        return (\n          <div\n            key={node.id}\n            className={styles.node}\n            style={\n              {\n                \"--node-x\": `${node.x}%`,\n                \"--node-y\": `${node.y}%`,\n                \"--node-delay\": `${nodeDelayMs}ms`,\n              } as React.CSSProperties\n            }\n            title={node.label}\n          >\n            <div className={styles.nodeInner}>\n              <IconComponent width={iconSize} height={iconSize} />\n            </div>\n            <span className={styles.srOnly}>{node.label}</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default RuntimeOrbitDiagram;\n"]}