@almadar/ui 2.15.8 → 2.15.10

package/dist/illustrations/index.js

@@ -0,0 +1,2971 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+
+function buildForkPaths(x, y, branches, scale) {
+  const inLength = 30 * scale;
+  const outLength = 30 * scale;
+  const fanSpread = 20 * scale;
+  const junctionX = x + inLength;
+  const paths = [];
+  paths.push(`M ${x} ${y} L ${junctionX} ${y}`);
+  for (let i = 0; i < branches; i++) {
+    const fraction = branches === 1 ? 0 : i / (branches - 1) * 2 - 1;
+    const endY = y + fraction * fanSpread;
+    const endX = junctionX + outLength;
+    const cpX = junctionX + outLength * 0.5;
+    paths.push(`M ${junctionX} ${y} C ${cpX} ${y} ${cpX} ${endY} ${endX} ${endY}`);
+  }
+  return paths;
+}
+function buildMergePaths(x, y, branches, scale) {
+  const inLength = 30 * scale;
+  const outLength = 30 * scale;
+  const fanSpread = 20 * scale;
+  const junctionX = x + inLength;
+  const paths = [];
+  for (let i = 0; i < branches; i++) {
+    const fraction = branches === 1 ? 0 : i / (branches - 1) * 2 - 1;
+    const startY = y + fraction * fanSpread;
+    const cpX = x + inLength * 0.5;
+    paths.push(`M ${x} ${startY} C ${cpX} ${startY} ${cpX} ${y} ${junctionX} ${y}`);
+  }
+  paths.push(`M ${junctionX} ${y} L ${junctionX + outLength} ${y}`);
+  return paths;
+}
+function buildDiamondPoints(x, y, scale) {
+  const w = 20 * scale;
+  const h = 14 * scale;
+  return [
+    `${x + w} ${y}`,
+    `${x + w * 2} ${y + h}`,
+    `${x + w} ${y + h * 2}`,
+    `${x} ${y + h}`
+  ].join(" ");
+}
+var SvgBranch = ({
+  x,
+  y,
+  variant = "fork",
+  branches = 2,
+  size = 1,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  if (variant === "diamond") {
+    const points = buildDiamondPoints(x, y, size);
+    return /* @__PURE__ */ jsx("g", { className, opacity, children: /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        points,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinejoin: "round"
+      }
+    ) });
+  }
+  const paths = variant === "fork" ? buildForkPaths(x, y, branches, size) : buildMergePaths(x, y, branches, size);
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    paths.map((d, i) => /* @__PURE__ */ jsx(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinecap: "round"
+      },
+      i
+    )),
+    variant === "fork" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color }),
+    variant === "merge" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color })
+  ] });
+};
+SvgBranch.displayName = "SvgBranch";
+var SvgConnection = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  variant = "solid",
+  color = "var(--color-primary)",
+  strokeWidth = 1.5,
+  opacity = 1,
+  className
+}) => {
+  const dashProps = variant === "solid" ? {} : {
+    strokeDasharray: "8 6"
+  };
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      className: [
+        variant === "animated" ? "almadar-svg-flow-dash" : void 0,
+        className
+      ].filter(Boolean).join(" ") || void 0,
+      x1,
+      y1,
+      x2,
+      y2,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      opacity,
+      ...dashProps
+    }
+  );
+};
+SvgConnection.displayName = "SvgConnection";
+var flowIdCounter = 0;
+var SvgFlow = ({
+  points,
+  color = "var(--color-primary)",
+  strokeWidth = 1.5,
+  animated = false,
+  opacity = 1,
+  className
+}) => {
+  const markerId = React.useMemo(() => {
+    flowIdCounter += 1;
+    return `almadar-flow-arrow-${flowIdCounter}`;
+  }, []);
+  if (points.length < 2) {
+    return null;
+  }
+  const pathData = points.map((pt, i) => `${i === 0 ? "M" : "L"}${pt[0]},${pt[1]}`).join(" ");
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+      "marker",
+      {
+        id: markerId,
+        markerWidth: "8",
+        markerHeight: "6",
+        refX: "7",
+        refY: "3",
+        orient: "auto",
+        markerUnits: "strokeWidth",
+        children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: pathData,
+        fill: "none",
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        markerEnd: `url(#${markerId})`,
+        className: animated ? "almadar-svg-flow-dash" : void 0,
+        strokeDasharray: animated ? "8 6" : void 0
+      }
+    )
+  ] });
+};
+SvgFlow.displayName = "SvgFlow";
+var SvgGrid = ({
+  x,
+  y,
+  cols = 4,
+  rows = 3,
+  spacing = 20,
+  nodeRadius = 3,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className,
+  highlights = []
+}) => {
+  const highlightSet = new Set(highlights);
+  return /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: rows }).map(
+    (_, row) => Array.from({ length: cols }).map((_2, col) => {
+      const index = row * cols + col;
+      const isHighlighted = highlightSet.has(index);
+      const cx = x + col * spacing;
+      const cy = y + row * spacing;
+      return /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: isHighlighted ? nodeRadius * 1.6 : nodeRadius,
+          fill: color,
+          opacity: isHighlighted ? 1 : 0.4
+        },
+        index
+      );
+    })
+  ) });
+};
+SvgGrid.displayName = "SvgGrid";
+var SvgLobe = ({
+  cx,
+  cy,
+  rx = 14,
+  ry = 20,
+  rotation = 0,
+  shells = 2,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const clampedShells = Math.max(1, Math.min(3, shells));
+  const renderShell = (shellIndex) => {
+    const scale = shellIndex === 0 ? 1 : 1 - shellIndex * 0.3;
+    const shellOpacity = shellIndex === 0 ? 1 : 0.5;
+    const sRx = rx * scale;
+    const sRy = ry * scale;
+    return /* @__PURE__ */ jsxs("g", { opacity: shellOpacity, children: [
+      /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx,
+          cy: cy - sRy,
+          rx: sRx,
+          ry: sRy,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx,
+          cy: cy + sRy,
+          rx: sRx,
+          ry: sRy,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5
+        }
+      )
+    ] }, shellIndex);
+  };
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      className,
+      opacity,
+      transform: `rotate(${rotation}, ${cx}, ${cy})`,
+      children: Array.from({ length: clampedShells }, (_, i) => renderShell(i))
+    }
+  );
+};
+SvgLobe.displayName = "SvgLobe";
+function getNodePositions(cx, cy, count, radius) {
+  return Array.from({ length: count }).map((_, i) => {
+    const angle = i / count * Math.PI * 2 - Math.PI / 2;
+    return {
+      x: cx + Math.cos(angle) * radius,
+      y: cy + Math.sin(angle) * radius
+    };
+  });
+}
+function getConnections(count, density) {
+  const allPairs = [];
+  for (let i = 0; i < count; i++) {
+    for (let j = i + 1; j < count; j++) {
+      allPairs.push([i, j]);
+    }
+  }
+  const connectCount = Math.round(allPairs.length * Math.max(0, Math.min(1, density)));
+  return allPairs.slice(0, connectCount);
+}
+var SvgMesh = ({
+  cx,
+  cy,
+  nodes = 6,
+  radius = 50,
+  color = "var(--color-primary)",
+  connectionDensity = 0.5,
+  opacity = 1,
+  className
+}) => {
+  const positions = getNodePositions(cx, cy, nodes, radius);
+  const connections = getConnections(nodes, connectionDensity);
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    connections.map(([a, b]) => /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: positions[a].x,
+        y1: positions[a].y,
+        x2: positions[b].x,
+        y2: positions[b].y,
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.3
+      },
+      `${a}-${b}`
+    )),
+    positions.map((pos, i) => /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: pos.x,
+        cy: pos.y,
+        r: 4,
+        fill: color
+      },
+      i
+    ))
+  ] });
+};
+SvgMesh.displayName = "SvgMesh";
+var TextLines = ({
+  x,
+  y,
+  scale,
+  color
+}) => {
+  const widths = [28, 22, 26];
+  return /* @__PURE__ */ jsx("g", { children: widths.map((w, i) => /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x,
+      y: y + i * 8 * scale,
+      width: w * scale,
+      height: 3 * scale,
+      rx: 1.5 * scale,
+      fill: color,
+      opacity: 0.7 - i * 0.1
+    },
+    i
+  )) });
+};
+TextLines.displayName = "TextLines";
+var CodeBrackets = ({
+  x,
+  y,
+  scale,
+  color
+}) => {
+  const h = 20 * scale;
+  const w = 8 * scale;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${x + w} ${y} L ${x} ${y + h / 2} L ${x + w} ${y + h}`,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2 * scale,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${x + w * 2} ${y} L ${x + w * 3} ${y + h / 2} L ${x + w * 2} ${y + h}`,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2 * scale,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+};
+CodeBrackets.displayName = "CodeBrackets";
+var AppRect = ({
+  x,
+  y,
+  scale,
+  color
+}) => {
+  const w = 22 * scale;
+  const h = 20 * scale;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width: w,
+        height: h,
+        rx: 4 * scale,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2 * scale
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: x + 4 * scale,
+        y: y + 4 * scale,
+        width: w - 8 * scale,
+        height: 3 * scale,
+        rx: 1 * scale,
+        fill: color,
+        opacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: x + 4 * scale,
+        y: y + 10 * scale,
+        width: (w - 8 * scale) * 0.6,
+        height: 3 * scale,
+        rx: 1 * scale,
+        fill: color,
+        opacity: 0.3
+      }
+    )
+  ] });
+};
+AppRect.displayName = "AppRect";
+var FlowArrow = ({ x1, y, x2, scale, color }) => {
+  const arrowSize = 4 * scale;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1,
+        y1: y,
+        x2: x2 - arrowSize,
+        y2: y,
+        stroke: color,
+        strokeWidth: 1.5 * scale,
+        strokeDasharray: `${3 * scale} ${3 * scale}`,
+        opacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        points: `${x2} ${y}, ${x2 - arrowSize} ${y - arrowSize / 2}, ${x2 - arrowSize} ${y + arrowSize / 2}`,
+        fill: color,
+        opacity: 0.6
+      }
+    )
+  ] });
+};
+FlowArrow.displayName = "FlowArrow";
+var SvgMorph = ({
+  x,
+  y,
+  size = 1,
+  variant = "generic",
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const gap = 40 * size;
+  const midY = y + 10 * size;
+  if (variant === "text-to-code") {
+    const leftEnd = x + 30 * size;
+    const rightStart = leftEnd + gap;
+    return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      /* @__PURE__ */ jsx(TextLines, { x, y, scale: size, color }),
+      /* @__PURE__ */ jsx(FlowArrow, { x1: leftEnd, y: midY, x2: rightStart, scale: size, color }),
+      /* @__PURE__ */ jsx(CodeBrackets, { x: rightStart, y, scale: size, color })
+    ] });
+  }
+  if (variant === "code-to-app") {
+    const leftEnd = x + 26 * size;
+    const rightStart = leftEnd + gap;
+    return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      /* @__PURE__ */ jsx(CodeBrackets, { x, y, scale: size, color }),
+      /* @__PURE__ */ jsx(FlowArrow, { x1: leftEnd, y: midY, x2: rightStart, scale: size, color }),
+      /* @__PURE__ */ jsx(AppRect, { x: rightStart, y, scale: size, color })
+    ] });
+  }
+  const circleR = 10 * size;
+  const circleX = x + circleR;
+  const squareStart = x + circleR * 2 + gap;
+  const squareSize = circleR * 2;
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: circleX,
+        cy: midY,
+        r: circleR,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2 * size
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FlowArrow,
+      {
+        x1: circleX + circleR + 2 * size,
+        y: midY,
+        x2: squareStart,
+        scale: size,
+        color
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: squareStart,
+        y: midY - circleR,
+        width: squareSize,
+        height: squareSize,
+        rx: 3 * size,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2 * size
+      }
+    )
+  ] });
+};
+SvgMorph.displayName = "SvgMorph";
+var SvgNode = ({
+  x,
+  y,
+  r = 6,
+  variant = "filled",
+  color = "var(--color-primary)",
+  opacity = 1,
+  className,
+  label
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    variant === "pulse" && /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: r * 2,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.3,
+        className: "almadar-svg-pulse-ring"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r,
+        fill: variant === "stroked" ? "none" : color,
+        stroke: variant === "stroked" ? color : "none",
+        strokeWidth: variant === "stroked" ? 2 : 0
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + r + 14,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 11,
+        fontFamily: "inherit",
+        children: label
+      }
+    )
+  ] });
+};
+SvgNode.displayName = "SvgNode";
+var PULSE_KEYFRAMES = `
+@keyframes almadar-svg-pulse-expand {
+  0% {
+    transform: scale(0.3);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+`;
+var SvgPulse = ({
+  cx,
+  cy,
+  rings = 3,
+  maxRadius = 60,
+  color = "var(--color-primary)",
+  animated = true,
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    animated && /* @__PURE__ */ jsx("style", { children: PULSE_KEYFRAMES }),
+    Array.from({ length: rings }).map((_, i) => {
+      const ringRadius = (i + 1) / rings * maxRadius;
+      const ringOpacity = 1 - i / rings * 0.6;
+      const delay = i * 0.6;
+      return /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: ringRadius,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5,
+          opacity: animated ? void 0 : ringOpacity * 0.4,
+          style: animated ? {
+            transformOrigin: `${cx}px ${cy}px`,
+            animation: `almadar-svg-pulse-expand 2s ease-out ${delay}s infinite`
+          } : void 0
+        },
+        i
+      );
+    }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: 3, fill: color })
+  ] });
+};
+SvgPulse.displayName = "SvgPulse";
+var ringIdCounter = 0;
+var SvgRing = ({
+  cx,
+  cy,
+  r = 40,
+  variant = "solid",
+  color = "var(--color-primary)",
+  strokeWidth = 1.5,
+  opacity = 1,
+  className,
+  label
+}) => {
+  const gradientId = React.useMemo(() => {
+    ringIdCounter += 1;
+    return `almadar-ring-glow-${ringIdCounter}`;
+  }, []);
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    variant === "glow" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ jsx("circle", { cx, cy, r, fill: `url(#${gradientId})` })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: "none",
+        stroke: color,
+        strokeWidth,
+        strokeDasharray: variant === "dashed" ? "6 4" : void 0
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - r - 6,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 11,
+        fontFamily: "inherit",
+        children: label
+      }
+    )
+  ] });
+};
+SvgRing.displayName = "SvgRing";
+var SHIELD_PATH = "M15,2 C15,2 5,5 2,6 C2,6 2,18 5,24 C8,30 15,34 15,34 C15,34 22,30 25,24 C28,18 28,6 28,6 C25,5 15,2 15,2 Z";
+var CHECK_PATH = "M10,18 L14,22 L21,13";
+var SvgShield = ({
+  x,
+  y,
+  size = 1,
+  variant = "outline",
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className,
+      opacity,
+      transform: `translate(${x - 15 * size}, ${y - 18 * size}) scale(${size})`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: SHIELD_PATH,
+            fill: variant === "filled" || variant === "check" ? color : "none",
+            stroke: color,
+            strokeWidth: 2,
+            strokeLinejoin: "round"
+          }
+        ),
+        variant === "check" && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: CHECK_PATH,
+            fill: "none",
+            stroke: variant === "check" ? "white" : color,
+            strokeWidth: 2.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+SvgShield.displayName = "SvgShield";
+var SvgStack = ({
+  x,
+  y,
+  layers: rawLayers = 3,
+  width = 60,
+  height = 40,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className,
+  labels
+}) => {
+  const layers = Math.max(2, Math.min(4, rawLayers));
+  const verticalOffset = 8;
+  const horizontalOffset = 4;
+  return /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: layers }).map((_, i) => {
+    const layerIndex = layers - 1 - i;
+    const layerX = x + layerIndex * horizontalOffset;
+    const layerY = y - layerIndex * verticalOffset;
+    const layerOpacity = 0.3 + layerIndex / (layers - 1) * 0.7;
+    const label = labels?.[layerIndex];
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: layerX,
+          y: layerY,
+          width,
+          height,
+          rx: 6,
+          ry: 6,
+          fill: color,
+          opacity: layerOpacity,
+          stroke: color,
+          strokeWidth: 1,
+          strokeOpacity: layerOpacity * 0.6
+        }
+      ),
+      label && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: layerX + width / 2,
+          y: layerY + height / 2 + 4,
+          textAnchor: "middle",
+          fill: "white",
+          fontSize: 10,
+          fontFamily: "inherit",
+          opacity: layerOpacity,
+          children: label
+        }
+      )
+    ] }, layerIndex);
+  }) });
+};
+SvgStack.displayName = "SvgStack";
+var aiGeneratesId = 0;
+var CHAOS_PARTICLES = [
+  { x: 50, y: 90, r: 3 },
+  { x: 85, y: 140, r: 2.5 },
+  { x: 40, y: 200, r: 3.5 },
+  { x: 100, y: 250, r: 2 },
+  { x: 70, y: 310, r: 3 },
+  { x: 120, y: 100, r: 2 },
+  { x: 110, y: 180, r: 3 },
+  { x: 60, y: 260, r: 2.5 },
+  { x: 130, y: 300, r: 2 },
+  { x: 90, y: 60, r: 2.5 },
+  { x: 140, y: 220, r: 3 },
+  { x: 55, y: 340, r: 2 },
+  { x: 115, y: 150, r: 2 },
+  { x: 75, y: 290, r: 3 },
+  { x: 135, y: 80, r: 2.5 }
+];
+var AIGenerates = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    aiGeneratesId += 1;
+    const base = `ag-${aiGeneratesId}`;
+    return {
+      glow: `${base}-glow`,
+      flowGrad: `${base}-fg`,
+      nucGlow: `${base}-ng`,
+      arrow: `${base}-arrow`
+    };
+  }, []);
+  const orbX = 480;
+  const orbY = 200;
+  const orbR = 55;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nucGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.flowGrad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: color, stopOpacity: 0.4 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.6 })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: ids.arrow,
+              markerWidth: "8",
+              markerHeight: "6",
+              refX: "7",
+              refY: "3",
+              orient: "auto",
+              markerUnits: "strokeWidth",
+              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.5 })
+            }
+          )
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes ag-converge {
+            0% { stroke-dashoffset: 30; }
+            100% { stroke-dashoffset: 0; }
+          }
+          @keyframes ag-chaos-drift {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(3px, -2px); }
+          }
+        ` }),
+        CHAOS_PARTICLES.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: p.x,
+            cy: p.y,
+            r: p.r,
+            fill: color,
+            opacity: 0.2 + i % 4 * 0.1,
+            style: animated ? { animation: `ag-chaos-drift ${1.5 + i % 3 * 0.5}s ease-in-out ${i * 0.2}s infinite` } : void 0
+          },
+          `chaos-${i}`
+        )),
+        [120, 170, 220, 270, 320].map((sy, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${150 + i * 5},${sy} C${250},${sy + (i - 2) * 15} ${350},${200 + (i - 2) * 8} ${orbX - orbR - 15},${200}`,
+            fill: "none",
+            stroke: `url(#${ids.flowGrad})`,
+            strokeWidth: 1,
+            strokeDasharray: "4 8",
+            markerEnd: `url(#${ids.arrow})`,
+            style: animated ? { animation: `ag-converge 2s linear ${i * 0.3}s infinite` } : void 0
+          },
+          `flow-${i}`
+        )),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: orbR + 15, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.05 }),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: 30, fill: `url(#${ids.nucGlow})` }),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: orbR, fill: "none", stroke: color, strokeWidth: 1.5, opacity: 0.35 }),
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: orbX,
+            cy: orbY,
+            rx: orbR * 0.6,
+            ry: orbR * 0.4,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1,
+            opacity: 0.25,
+            transform: `rotate(-30, ${orbX}, ${orbY})`
+          }
+        ),
+        [0, 1.5, 3, 4.5].map((a, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: orbX + Math.cos(a) * orbR,
+            cy: orbY + Math.sin(a) * orbR,
+            r: 4,
+            fill: color,
+            opacity: 0.55
+          },
+          `op-${i}`
+        )),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: 7, fill: color, opacity: 0.75, filter: `url(#${ids.glow})` })
+      ]
+    }
+  );
+};
+AIGenerates.displayName = "AIGenerates";
+var closedCircuitId = 0;
+function pentagonPoint(cx, cy, r, index) {
+  const angle = Math.PI * 2 * index / 5 - Math.PI / 2;
+  return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
+}
+var ClosedCircuit = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    closedCircuitId += 1;
+    const base = `cc-${closedCircuitId}`;
+    return {
+      glow: `${base}-glow`,
+      grad: `${base}-grad`,
+      arrow: `${base}-arrow`,
+      nodeGlow: `${base}-ng`
+    };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const r = 130;
+  const points = Array.from({ length: 5 }, (_, i) => pentagonPoint(cx, cy, r, i));
+  const gx = points[1][0];
+  const gy = points[1][1];
+  const ds = 10;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nodeGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.15 })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: ids.arrow,
+              markerWidth: "8",
+              markerHeight: "6",
+              refX: "7",
+              refY: "3",
+              orient: "auto",
+              markerUnits: "strokeWidth",
+              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.5 })
+            }
+          )
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes cc-energy-flow {
+            from { stroke-dashoffset: 28; }
+            to { stroke-dashoffset: 0; }
+          }
+        ` }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 50, fill: "none", stroke: color, strokeWidth: 0.5, opacity: 0.06 }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: r + 20, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.04 }),
+        points.map((pt, i) => {
+          const next = points[(i + 1) % 5];
+          const mx = (pt[0] + next[0]) / 2 + (cy - (pt[1] + next[1]) / 2) * 0.15;
+          const my = (pt[1] + next[1]) / 2 + ((pt[0] + next[0]) / 2 - cx) * 0.15;
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: `M${pt[0]},${pt[1]} Q${mx},${my} ${next[0]},${next[1]}`,
+              fill: "none",
+              stroke: `url(#${ids.grad})`,
+              strokeWidth: 1.5,
+              strokeDasharray: animated ? "8 6" : void 0,
+              markerEnd: `url(#${ids.arrow})`,
+              style: animated ? { animation: "cc-energy-flow 1.5s linear infinite" } : void 0
+            },
+            `flow-${i}`
+          );
+        }),
+        points.map((pt, i) => /* @__PURE__ */ jsx("circle", { cx: pt[0], cy: pt[1], r: 22, fill: `url(#${ids.nodeGlow})` }, `glow-${i}`)),
+        points.map((pt, i) => {
+          if (i === 1) return null;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("circle", { cx: pt[0], cy: pt[1], r: 12, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.2 }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: pt[0],
+                cy: pt[1],
+                r: 7,
+                fill: color,
+                opacity: 0.6,
+                filter: `url(#${ids.glow})`
+              }
+            )
+          ] }, `node-${i}`);
+        }),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${gx},${gy - ds} ${gx + ds},${gy} ${gx},${gy + ds} ${gx - ds},${gy}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.5,
+            opacity: 0.6,
+            filter: `url(#${ids.glow})`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${gx},${gy - ds * 0.5} ${gx + ds * 0.5},${gy} ${gx},${gy + ds * 0.5} ${gx - ds * 0.5},${gy}`,
+            fill: color,
+            opacity: 0.3
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 3, fill: color, opacity: 0.4 })
+      ]
+    }
+  );
+};
+ClosedCircuit.displayName = "ClosedCircuit";
+var communityOwnershipId = 0;
+var ORBITAL_UNITS = [
+  { x: 85, y: 90, r: 22 },
+  { x: 240, y: 60, r: 18 },
+  { x: 420, y: 80, r: 20 },
+  { x: 540, y: 100, r: 16 },
+  { x: 60, y: 220, r: 19 },
+  { x: 200, y: 200, r: 24 },
+  { x: 370, y: 210, r: 20 },
+  { x: 530, y: 240, r: 18 },
+  { x: 120, y: 340, r: 17 },
+  { x: 300, y: 330, r: 21 },
+  { x: 480, y: 340, r: 18 }
+];
+function dist(a, b) {
+  return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+}
+var CommunityOwnership = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    communityOwnershipId += 1;
+    const base = `co-${communityOwnershipId}`;
+    return { unitGlow: `${base}-ug` };
+  }, []);
+  const threads = [];
+  for (let i = 0; i < ORBITAL_UNITS.length; i++) {
+    for (let j = i + 1; j < ORBITAL_UNITS.length; j++) {
+      const d = dist(ORBITAL_UNITS[i], ORBITAL_UNITS[j]);
+      if (d < 230) {
+        threads.push({ a: i, b: j, d });
+      }
+    }
+  }
+  const highlightedPairs = /* @__PURE__ */ new Set(["0-5", "5-6", "6-10", "2-6", "1-5"]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: ids.unitGlow, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.12 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+        ] }) }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes co-thread-pulse {
+            0%, 100% { opacity: 0.08; }
+            50% { opacity: 0.2; }
+          }
+        ` }),
+        threads.map(({ a, b, d }, i) => {
+          const isHighlighted = highlightedPairs.has(`${a}-${b}`);
+          const opacity = isHighlighted ? 0.2 : Math.max(0.04, 0.12 - d / 230 * 0.08);
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: ORBITAL_UNITS[a].x,
+              y1: ORBITAL_UNITS[a].y,
+              x2: ORBITAL_UNITS[b].x,
+              y2: ORBITAL_UNITS[b].y,
+              stroke: color,
+              strokeWidth: isHighlighted ? 1.5 : 0.7,
+              opacity,
+              style: animated && isHighlighted ? { animation: "co-thread-pulse 3s ease-in-out infinite" } : void 0
+            },
+            `thread-${i}`
+          );
+        }),
+        ORBITAL_UNITS.map((unit, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: unit.x, cy: unit.y, r: unit.r + 10, fill: `url(#${ids.unitGlow})` }),
+          /* @__PURE__ */ jsx("circle", { cx: unit.x, cy: unit.y, r: unit.r, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.25 }),
+          /* @__PURE__ */ jsx(
+            "ellipse",
+            {
+              cx: unit.x,
+              cy: unit.y,
+              rx: unit.r * 0.55,
+              ry: unit.r * 0.35,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 0.7,
+              opacity: 0.15,
+              transform: `rotate(${i * 30 % 180}, ${unit.x}, ${unit.y})`
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: unit.x, cy: unit.y, r: 3.5, fill: color, opacity: 0.5 })
+        ] }, `unit-${i}`))
+      ]
+    }
+  );
+};
+CommunityOwnership.displayName = "CommunityOwnership";
+var compileAnywhereId = 0;
+var TARGETS = [
+  { y: 90, shape: "circle" },
+  { y: 200, shape: "rect" },
+  { y: 310, shape: "diamond" }
+];
+var CompileAnywhere = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    compileAnywhereId += 1;
+    const base = `ca-${compileAnywhereId}`;
+    return {
+      glow: `${base}-glow`,
+      beamGrad: `${base}-bg`,
+      nucGlow: `${base}-ng`,
+      arrow: `${base}-arrow`
+    };
+  }, []);
+  const orbX = 150;
+  const orbY = 200;
+  const orbR = 45;
+  const targetX = 490;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nucGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.beamGrad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: ids.arrow,
+              markerWidth: "6",
+              markerHeight: "5",
+              refX: "5",
+              refY: "2.5",
+              orient: "auto",
+              markerUnits: "strokeWidth",
+              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L6,2.5 L0,5 Z", fill: color, opacity: 0.4 })
+            }
+          )
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes ca-beam-flow {
+            from { stroke-dashoffset: 24; }
+            to { stroke-dashoffset: 0; }
+          }
+          @keyframes ca-orbit-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        ` }),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: orbR + 20, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.04 }),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: 30, fill: `url(#${ids.nucGlow})` }),
+        /* @__PURE__ */ jsxs("g", { style: animated ? { transformOrigin: `${orbX}px ${orbY}px`, animation: "ca-orbit-spin 15s linear infinite" } : void 0, children: [
+          /* @__PURE__ */ jsx("ellipse", { cx: orbX, cy: orbY, rx: orbR, ry: orbR * 0.65, fill: "none", stroke: color, strokeWidth: 1.5, opacity: 0.3 }),
+          [0, 2.1, 4.2].map((a, i) => /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: orbX + Math.cos(a) * orbR,
+              cy: orbY + Math.sin(a) * orbR * 0.65,
+              r: 3,
+              fill: color,
+              opacity: 0.5
+            },
+            `p-${i}`
+          ))
+        ] }),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: 7, fill: color, opacity: 0.7, filter: `url(#${ids.glow})` }),
+        TARGETS.map((target, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${orbX + orbR + 10},${orbY} Q${(orbX + targetX) / 2},${(orbY + target.y) / 2} ${targetX - 20},${target.y}`,
+            fill: "none",
+            stroke: `url(#${ids.beamGrad})`,
+            strokeWidth: 1.5,
+            strokeDasharray: animated ? "6 6" : "3 8",
+            markerEnd: `url(#${ids.arrow})`,
+            style: animated ? { animation: `ca-beam-flow 1.5s linear ${i * 0.3}s infinite` } : void 0
+          },
+          `beam-${i}`
+        )),
+        TARGETS.map((target, i) => {
+          const tx = targetX;
+          const ty = target.y;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("circle", { cx: tx, cy: ty, r: 18, fill: "none", stroke: color, strokeWidth: 0.8, opacity: 0.15 }),
+            target.shape === "circle" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("circle", { cx: tx, cy: ty, r: 10, fill: "none", stroke: color, strokeWidth: 1.5, opacity: 0.5 }),
+              /* @__PURE__ */ jsx("circle", { cx: tx, cy: ty, r: 4, fill: color, opacity: 0.4 })
+            ] }),
+            target.shape === "rect" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("rect", { x: tx - 10, y: ty - 8, width: 20, height: 16, rx: 3, fill: "none", stroke: color, strokeWidth: 1.5, opacity: 0.5 }),
+              /* @__PURE__ */ jsx("rect", { x: tx - 4, y: ty - 2, width: 8, height: 4, rx: 1, fill: color, opacity: 0.4 })
+            ] }),
+            target.shape === "diamond" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "polygon",
+                {
+                  points: `${tx},${ty - 10} ${tx + 10},${ty} ${tx},${ty + 10} ${tx - 10},${ty}`,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: 1.5,
+                  opacity: 0.5
+                }
+              ),
+              /* @__PURE__ */ jsx("circle", { cx: tx, cy: ty, r: 3, fill: color, opacity: 0.4 })
+            ] })
+          ] }, `target-${i}`);
+        })
+      ]
+    }
+  );
+};
+CompileAnywhere.displayName = "CompileAnywhere";
+var composableModelsId = 0;
+var ComposableModels = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    composableModelsId += 1;
+    const base = `cm-${composableModelsId}`;
+    return {
+      glow: `${base}-glow`,
+      gradL: `${base}-gl`,
+      gradR: `${base}-gr`,
+      sharedGlow: `${base}-sg`
+    };
+  }, []);
+  const leftCx = 210;
+  const rightCx = 390;
+  const cy = 200;
+  const ringR = 130;
+  const leftPrivate = [
+    { x: 110, y: 140 },
+    { x: 95, y: 220 },
+    { x: 140, y: 270 },
+    { x: 170, y: 110 }
+  ];
+  const rightPrivate = [
+    { x: 490, y: 140 },
+    { x: 505, y: 220 },
+    { x: 460, y: 270 },
+    { x: 430, y: 110 }
+  ];
+  const shared = [
+    { x: 300, y: 160 },
+    { x: 300, y: 240 },
+    { x: 280, y: 200 },
+    { x: 320, y: 200 }
+  ];
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.sharedGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.gradL, x1: "0%", y1: "50%", x2: "100%", y2: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.08 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.gradR, x1: "0%", y1: "50%", x2: "100%", y2: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.08 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.3 })
+          ] })
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes cm-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
+        ` }),
+        /* @__PURE__ */ jsx("circle", { cx: leftCx, cy, r: ringR + 20, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
+        /* @__PURE__ */ jsx("circle", { cx: rightCx, cy, r: ringR + 20, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
+        /* @__PURE__ */ jsx("circle", { cx: leftCx, cy, r: ringR, fill: "none", stroke: `url(#${ids.gradL})`, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("circle", { cx: rightCx, cy, r: ringR, fill: "none", stroke: `url(#${ids.gradR})`, strokeWidth: 1.5 }),
+        leftPrivate.map((pt, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: pt.x,
+            y1: pt.y,
+            x2: shared[i % shared.length].x,
+            y2: shared[i % shared.length].y,
+            stroke: color,
+            strokeWidth: 0.5,
+            opacity: 0.1
+          },
+          `lc-${i}`
+        )),
+        rightPrivate.map((pt, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: pt.x,
+            y1: pt.y,
+            x2: shared[(i + 1) % shared.length].x,
+            y2: shared[(i + 1) % shared.length].y,
+            stroke: color,
+            strokeWidth: 0.5,
+            opacity: 0.1
+          },
+          `rc-${i}`
+        )),
+        shared.map((pt, i) => {
+          const next = shared[(i + 1) % shared.length];
+          return /* @__PURE__ */ jsx("line", { x1: pt.x, y1: pt.y, x2: next.x, y2: next.y, stroke: color, strokeWidth: 1, opacity: 0.25 }, `sc-${i}`);
+        }),
+        /* @__PURE__ */ jsx("circle", { cx: leftCx, cy, r: 5, fill: color, opacity: 0.5 }),
+        /* @__PURE__ */ jsx("circle", { cx: rightCx, cy, r: 5, fill: color, opacity: 0.5 }),
+        leftPrivate.map((pt, i) => /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 3.5, fill: color, opacity: 0.35 }, `lp-${i}`)),
+        rightPrivate.map((pt, i) => /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 3.5, fill: color, opacity: 0.35 }, `rp-${i}`)),
+        /* @__PURE__ */ jsx("circle", { cx: 300, cy: 200, r: 40, fill: `url(#${ids.sharedGlow})` }),
+        shared.map((pt, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: pt.x,
+            cy: pt.y,
+            r: 5,
+            fill: color,
+            opacity: 0.7,
+            filter: `url(#${ids.glow})`,
+            style: animated ? { animation: `cm-pulse 2s ease-in-out ${i * 0.5}s infinite` } : void 0
+          },
+          `sp-${i}`
+        ))
+      ]
+    }
+  );
+};
+ComposableModels.displayName = "ComposableModels";
+var describeProveDeployId = 0;
+var SCATTER_PARTICLES = [
+  { x: 40, y: 100, r: 3 },
+  { x: 80, y: 150, r: 2.5 },
+  { x: 55, y: 220, r: 3 },
+  { x: 100, y: 260, r: 2 },
+  { x: 70, y: 300, r: 3.5 },
+  { x: 120, y: 130, r: 2 },
+  { x: 95, y: 190, r: 2.5 },
+  { x: 45, y: 340, r: 2 },
+  { x: 130, y: 80, r: 2.5 },
+  { x: 110, y: 310, r: 3 },
+  { x: 60, y: 160, r: 2 },
+  { x: 85, y: 280, r: 2.5 }
+];
+var CONSTELLATION = [
+  { x: 450, y: 90, r: 16 },
+  { x: 530, y: 140, r: 14 },
+  { x: 490, y: 220, r: 18 },
+  { x: 430, y: 300, r: 15 },
+  { x: 540, y: 310, r: 13 }
+];
+var DescribeProveDeploy = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    describeProveDeployId += 1;
+    const base = `dpd-${describeProveDeployId}`;
+    return {
+      glow: `${base}-glow`,
+      flowGrad: `${base}-fg`,
+      nucGlow: `${base}-ng`,
+      arrow: `${base}-arrow`
+    };
+  }, []);
+  const orbX = 270;
+  const orbY = 200;
+  const orbR = 50;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nucGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.flowGrad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.4 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: ids.arrow,
+              markerWidth: "7",
+              markerHeight: "5",
+              refX: "6",
+              refY: "2.5",
+              orient: "auto",
+              markerUnits: "strokeWidth",
+              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L7,2.5 L0,5 Z", fill: color, opacity: 0.4 })
+            }
+          )
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes dpd-drift {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(2px, -1px); }
+          }
+          @keyframes dpd-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
+        ` }),
+        SCATTER_PARTICLES.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: p.x,
+            cy: p.y,
+            r: p.r,
+            fill: color,
+            opacity: 0.15 + i % 4 * 0.08,
+            style: animated ? { animation: `dpd-drift ${1.5 + i % 3 * 0.4}s ease-in-out ${i * 0.15}s infinite` } : void 0
+          },
+          `scatter-${i}`
+        )),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M150,${orbY} Q${200},${orbY} ${orbX - orbR - 10},${orbY}`,
+            fill: "none",
+            stroke: `url(#${ids.flowGrad})`,
+            strokeWidth: 1.5,
+            strokeDasharray: "5 6",
+            markerEnd: `url(#${ids.arrow})`,
+            style: animated ? { animation: "dpd-flow 1.5s linear infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: 25, fill: `url(#${ids.nucGlow})` }),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: orbR, fill: "none", stroke: color, strokeWidth: 1.5, opacity: 0.35 }),
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: orbX,
+            cy: orbY,
+            rx: orbR * 0.6,
+            ry: orbR * 0.35,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1,
+            opacity: 0.2,
+            transform: `rotate(-25, ${orbX}, ${orbY})`
+          }
+        ),
+        [0.5, 2, 3.5, 5].map((a, i) => /* @__PURE__ */ jsx("circle", { cx: orbX + Math.cos(a) * orbR, cy: orbY + Math.sin(a) * orbR, r: 3, fill: color, opacity: 0.45 }, `op-${i}`)),
+        /* @__PURE__ */ jsx("circle", { cx: orbX, cy: orbY, r: 6, fill: color, opacity: 0.65, filter: `url(#${ids.glow})` }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${orbX + orbR + 10},${orbY} Q${380},${orbY} ${CONSTELLATION[2].x - CONSTELLATION[2].r - 10},${orbY}`,
+            fill: "none",
+            stroke: `url(#${ids.flowGrad})`,
+            strokeWidth: 1.5,
+            strokeDasharray: "5 6",
+            markerEnd: `url(#${ids.arrow})`,
+            style: animated ? { animation: "dpd-flow 1.5s linear 0.5s infinite" } : void 0
+          }
+        ),
+        CONSTELLATION.map((a, i) => {
+          const next = CONSTELLATION[(i + 1) % CONSTELLATION.length];
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: a.x,
+              y1: a.y,
+              x2: next.x,
+              y2: next.y,
+              stroke: color,
+              strokeWidth: 0.7,
+              opacity: 0.12
+            },
+            `cline-${i}`
+          );
+        }),
+        /* @__PURE__ */ jsx("line", { x1: CONSTELLATION[0].x, y1: CONSTELLATION[0].y, x2: CONSTELLATION[2].x, y2: CONSTELLATION[2].y, stroke: color, strokeWidth: 0.5, opacity: 0.08 }),
+        /* @__PURE__ */ jsx("line", { x1: CONSTELLATION[1].x, y1: CONSTELLATION[1].y, x2: CONSTELLATION[3].x, y2: CONSTELLATION[3].y, stroke: color, strokeWidth: 0.5, opacity: 0.08 }),
+        CONSTELLATION.map((unit, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: unit.x, cy: unit.y, r: unit.r, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.25 }),
+          /* @__PURE__ */ jsx("circle", { cx: unit.x, cy: unit.y, r: 3, fill: color, opacity: 0.45 })
+        ] }, `cunit-${i}`))
+      ]
+    }
+  );
+};
+DescribeProveDeploy.displayName = "DescribeProveDeploy";
+var domainGridId = 0;
+var CLUSTERS = [
+  { x: 60, y: 70, size: 8, dots: 3, highlighted: true },
+  { x: 170, y: 50, size: 6, dots: 2, highlighted: false },
+  { x: 290, y: 65, size: 7, dots: 3, highlighted: false },
+  { x: 420, y: 55, size: 8, dots: 3, highlighted: true },
+  { x: 530, y: 80, size: 6, dots: 2, highlighted: false },
+  { x: 100, y: 170, size: 7, dots: 3, highlighted: false },
+  { x: 220, y: 155, size: 6, dots: 2, highlighted: false },
+  { x: 350, y: 160, size: 9, dots: 4, highlighted: true },
+  { x: 480, y: 175, size: 6, dots: 2, highlighted: false },
+  { x: 50, y: 270, size: 6, dots: 2, highlighted: false },
+  { x: 160, y: 260, size: 7, dots: 3, highlighted: false },
+  { x: 280, y: 250, size: 6, dots: 2, highlighted: false },
+  { x: 400, y: 265, size: 8, dots: 3, highlighted: true },
+  { x: 530, y: 270, size: 6, dots: 2, highlighted: false },
+  { x: 90, y: 350, size: 7, dots: 3, highlighted: false },
+  { x: 230, y: 340, size: 6, dots: 2, highlighted: false },
+  { x: 370, y: 350, size: 8, dots: 3, highlighted: true },
+  { x: 510, y: 345, size: 6, dots: 2, highlighted: false }
+];
+function dist2(a, b) {
+  return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+}
+var DomainGrid = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    domainGridId += 1;
+    const base = `dg-${domainGridId}`;
+    return { clusterGlow: `${base}-cg` };
+  }, []);
+  const connections = [];
+  for (let i = 0; i < CLUSTERS.length; i++) {
+    for (let j = i + 1; j < CLUSTERS.length; j++) {
+      const d = dist2(CLUSTERS[i], CLUSTERS[j]);
+      if (d < 180) {
+        connections.push({ a: i, b: j });
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: ids.clusterGlow, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+        ] }) }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes dg-twinkle {
+            0%, 100% { opacity: 0.4; }
+            50% { opacity: 0.8; }
+          }
+        ` }),
+        connections.map(({ a, b }, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: CLUSTERS[a].x,
+            y1: CLUSTERS[a].y,
+            x2: CLUSTERS[b].x,
+            y2: CLUSTERS[b].y,
+            stroke: color,
+            strokeWidth: 0.5,
+            opacity: 0.06
+          },
+          `conn-${i}`
+        )),
+        CLUSTERS.map((cluster, ci) => {
+          const baseOpacity = cluster.highlighted ? 0.6 : 0.3;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            cluster.highlighted && /* @__PURE__ */ jsx("circle", { cx: cluster.x, cy: cluster.y, r: cluster.size + 10, fill: `url(#${ids.clusterGlow})` }),
+            Array.from({ length: cluster.dots }, (_, di) => {
+              const angle = di / cluster.dots * Math.PI * 2;
+              const spread = cluster.size * 0.6;
+              const dx = cluster.x + Math.cos(angle) * spread;
+              const dy = cluster.y + Math.sin(angle) * spread;
+              const dotR = cluster.highlighted ? 2.5 : 2;
+              return /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: dx,
+                  cy: dy,
+                  r: dotR,
+                  fill: color,
+                  opacity: baseOpacity - di * 0.05,
+                  style: animated && cluster.highlighted ? { animation: `dg-twinkle 3s ease-in-out ${ci * 0.3}s infinite` } : void 0
+                },
+                `dot-${ci}-${di}`
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: cluster.x,
+                cy: cluster.y,
+                r: cluster.highlighted ? 3.5 : 2.5,
+                fill: color,
+                opacity: baseOpacity
+              }
+            )
+          ] }, `cluster-${ci}`);
+        })
+      ]
+    }
+  );
+};
+DomainGrid.displayName = "DomainGrid";
+var eventBusId = 0;
+var OUTER_COUNT = 6;
+var OUTER_RADIUS = 150;
+var CX = 300;
+var CY = 200;
+function getOuterPositions() {
+  return Array.from({ length: OUTER_COUNT }, (_, i) => {
+    const angle = i / OUTER_COUNT * Math.PI * 2 - Math.PI / 2;
+    return {
+      x: CX + Math.cos(angle) * OUTER_RADIUS,
+      y: CY + Math.sin(angle) * OUTER_RADIUS
+    };
+  });
+}
+var EventBus = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    eventBusId += 1;
+    const base = `eb-${eventBusId}`;
+    return {
+      glow: `${base}-glow`,
+      pulseGlow: `${base}-pg`,
+      connGrad: `${base}-cg`,
+      unitGlow: `${base}-ug`
+    };
+  }, []);
+  const positions = getOuterPositions();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.pulseGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.unitGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.12 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.connGrad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.08 })
+          ] })
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes eb-wave-expand {
+            0% { transform: scale(0.3); opacity: 0.4; }
+            100% { transform: scale(1); opacity: 0; }
+          }
+        ` }),
+        /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: OUTER_RADIUS + 30, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
+        positions.map((pos, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: CX,
+            y1: CY,
+            x2: pos.x,
+            y2: pos.y,
+            stroke: color,
+            strokeWidth: 0.8,
+            opacity: 0.12,
+            strokeDasharray: "3 6"
+          },
+          `conn-${i}`
+        )),
+        /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: 40, fill: `url(#${ids.pulseGlow})` }),
+        [30, 50, 75].map((r, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: CX,
+            cy: CY,
+            r,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.2,
+            opacity: animated ? void 0 : 0.12 - i * 0.03,
+            style: animated ? {
+              transformOrigin: `${CX}px ${CY}px`,
+              animation: `eb-wave-expand 2.5s ease-out ${i * 0.6}s infinite`
+            } : void 0
+          },
+          `wave-${i}`
+        )),
+        /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: 6, fill: color, opacity: 0.7, filter: `url(#${ids.glow})` }),
+        positions.map((pos, i) => {
+          const unitR = 20;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("circle", { cx: pos.x, cy: pos.y, r: unitR + 8, fill: `url(#${ids.unitGlow})` }),
+            /* @__PURE__ */ jsx("circle", { cx: pos.x, cy: pos.y, r: unitR, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.25 }),
+            /* @__PURE__ */ jsx(
+              "ellipse",
+              {
+                cx: pos.x,
+                cy: pos.y,
+                rx: unitR * 0.6,
+                ry: unitR * 0.35,
+                fill: "none",
+                stroke: color,
+                strokeWidth: 0.6,
+                opacity: 0.15,
+                transform: `rotate(${i * 30}, ${pos.x}, ${pos.y})`
+              }
+            ),
+            /* @__PURE__ */ jsx("circle", { cx: pos.x, cy: pos.y, r: 3.5, fill: color, opacity: 0.5 })
+          ] }, `unit-${i}`);
+        })
+      ]
+    }
+  );
+};
+EventBus.displayName = "EventBus";
+var orbitalUnitId = 0;
+var OrbitalUnit = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    orbitalUnitId += 1;
+    const base = `ou-${orbitalUnitId}`;
+    return {
+      glow: `${base}-glow`,
+      grad1: `${base}-grad1`,
+      grad2: `${base}-grad2`,
+      grad3: `${base}-grad3`,
+      nucleusGlow: `${base}-ng`
+    };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const outerR = 140;
+  const outerPoints = Array.from({ length: 5 }, (_, i) => {
+    const a = i / 5 * Math.PI * 2 - Math.PI / 2;
+    return { x: cx + Math.cos(a) * outerR, y: cy + Math.sin(a) * outerR };
+  });
+  const midRx = 90;
+  const midRy = 65;
+  const midRot = 25;
+  const midParticles = [0, 2.1, 4.2].map((a) => {
+    const rad = a;
+    const px = midRx * Math.cos(rad);
+    const py = midRy * Math.sin(rad);
+    const rotRad = midRot * Math.PI / 180;
+    return {
+      x: cx + px * Math.cos(rotRad) - py * Math.sin(rotRad),
+      y: cy + px * Math.sin(rotRad) + py * Math.cos(rotRad)
+    };
+  });
+  const innerRx = 50;
+  const innerRy = 35;
+  const innerRot = -15;
+  const innerParticles = [0.8, 3.9].map((a) => {
+    const rad = a;
+    const px = innerRx * Math.cos(rad);
+    const py = innerRy * Math.sin(rad);
+    const rotRad = innerRot * Math.PI / 180;
+    return {
+      x: cx + px * Math.cos(rotRad) - py * Math.sin(rotRad),
+      y: cy + px * Math.sin(rotRad) + py * Math.cos(rotRad)
+    };
+  });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nucleusGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad1, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.4 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad2, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.5 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.15 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad3, x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.6 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
+          ] })
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes ou-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+          @keyframes ou-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
+        ` }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 170, fill: "none", stroke: color, strokeWidth: 0.5, opacity: 0.04 }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 180, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 30, fill: `url(#${ids.nucleusGlow})` }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx,
+            cy,
+            r: outerR,
+            fill: "none",
+            stroke: `url(#${ids.grad1})`,
+            strokeWidth: 1,
+            strokeDasharray: "4 8"
+          }
+        ),
+        outerPoints.map((pt, i) => /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 3.5, fill: color, opacity: 0.3 }, `op-${i}`)),
+        /* @__PURE__ */ jsx(
+          "g",
+          {
+            style: animated ? { transformOrigin: `${cx}px ${cy}px`, animation: "ou-spin-slow 30s linear infinite" } : void 0,
+            children: /* @__PURE__ */ jsx(
+              "ellipse",
+              {
+                cx,
+                cy,
+                rx: midRx,
+                ry: midRy,
+                fill: "none",
+                stroke: `url(#${ids.grad2})`,
+                strokeWidth: 1.5,
+                transform: `rotate(${midRot}, ${cx}, ${cy})`
+              }
+            )
+          }
+        ),
+        midParticles.map((pt, i) => /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 4, fill: color, opacity: 0.5 }, `mp-${i}`)),
+        /* @__PURE__ */ jsx(
+          "g",
+          {
+            style: animated ? { transformOrigin: `${cx}px ${cy}px`, animation: "ou-spin-rev 20s linear infinite" } : void 0,
+            children: /* @__PURE__ */ jsx(
+              "ellipse",
+              {
+                cx,
+                cy,
+                rx: innerRx,
+                ry: innerRy,
+                fill: "none",
+                stroke: `url(#${ids.grad3})`,
+                strokeWidth: 1.5,
+                transform: `rotate(${innerRot}, ${cx}, ${cy})`
+              }
+            )
+          }
+        ),
+        innerParticles.map((pt, i) => /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 3.5, fill: color, opacity: 0.6 }, `ip-${i}`)),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx,
+            cy,
+            r: 7,
+            fill: color,
+            opacity: 0.8,
+            filter: `url(#${ids.glow})`
+          }
+        )
+      ]
+    }
+  );
+};
+OrbitalUnit.displayName = "OrbitalUnit";
+var planVerifyRememberId = 0;
+var LOOPS = [
+  { cx: 130, cy: 190, r: 55, particles: [0.3, 2.4, 4.5] },
+  { cx: 300, cy: 190, r: 55, particles: [1, 3.1, 5.2] },
+  { cx: 470, cy: 190, r: 55, particles: [0.8, 2.9, 5] }
+];
+var PlanVerifyRemember = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    planVerifyRememberId += 1;
+    const base = `pvr-${planVerifyRememberId}`;
+    return {
+      glow: `${base}-glow`,
+      fwdGrad: `${base}-fg`,
+      fbGrad: `${base}-fbg`,
+      loopGlow: `${base}-lg`,
+      arrow: `${base}-arrow`
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.loopGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.fwdGrad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.5 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.fbGrad, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.3 })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: ids.arrow,
+              markerWidth: "7",
+              markerHeight: "5",
+              refX: "6",
+              refY: "2.5",
+              orient: "auto",
+              markerUnits: "strokeWidth",
+              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L7,2.5 L0,5 Z", fill: color, opacity: 0.4 })
+            }
+          )
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes pvr-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
+          @keyframes pvr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        ` }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${LOOPS[0].cx + LOOPS[0].r + 5},${LOOPS[0].cy} L${LOOPS[1].cx - LOOPS[1].r - 5},${LOOPS[1].cy}`,
+            fill: "none",
+            stroke: `url(#${ids.fwdGrad})`,
+            strokeWidth: 1.5,
+            markerEnd: `url(#${ids.arrow})`,
+            strokeDasharray: animated ? "6 5" : void 0,
+            style: animated ? { animation: "pvr-flow 1.5s linear infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${LOOPS[1].cx + LOOPS[1].r + 5},${LOOPS[1].cy} L${LOOPS[2].cx - LOOPS[2].r - 5},${LOOPS[2].cy}`,
+            fill: "none",
+            stroke: `url(#${ids.fwdGrad})`,
+            strokeWidth: 1.5,
+            markerEnd: `url(#${ids.arrow})`,
+            strokeDasharray: animated ? "6 5" : void 0,
+            style: animated ? { animation: "pvr-flow 1.5s linear 0.5s infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${LOOPS[2].cx},${LOOPS[2].cy + LOOPS[2].r + 5} Q${LOOPS[1].cx},${LOOPS[2].cy + 120} ${LOOPS[0].cx},${LOOPS[0].cy + LOOPS[0].r + 5}`,
+            fill: "none",
+            stroke: `url(#${ids.fbGrad})`,
+            strokeWidth: 1,
+            strokeDasharray: "4 6",
+            markerEnd: `url(#${ids.arrow})`,
+            style: animated ? { animation: "pvr-flow 2.5s linear infinite" } : void 0
+          }
+        ),
+        LOOPS.map((loop, li) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: loop.cx, cy: loop.cy, r: loop.r + 15, fill: `url(#${ids.loopGlow})` }),
+          /* @__PURE__ */ jsx("circle", { cx: loop.cx, cy: loop.cy, r: loop.r + 8, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.05 }),
+          /* @__PURE__ */ jsx("circle", { cx: loop.cx, cy: loop.cy, r: loop.r, fill: "none", stroke: color, strokeWidth: 1.5, opacity: 0.3 }),
+          li === 0 && // Plan: branching pattern
+          /* @__PURE__ */ jsxs("g", { opacity: 0.25, children: [
+            /* @__PURE__ */ jsx("line", { x1: loop.cx - 15, y1: loop.cy, x2: loop.cx + 5, y2: loop.cy, stroke: color, strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx("line", { x1: loop.cx + 5, y1: loop.cy, x2: loop.cx + 18, y2: loop.cy - 10, stroke: color, strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx("line", { x1: loop.cx + 5, y1: loop.cy, x2: loop.cx + 18, y2: loop.cy + 10, stroke: color, strokeWidth: 1.5 })
+          ] }),
+          li === 1 && // Verify: checkmark pattern
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: `M${loop.cx - 10},${loop.cy} L${loop.cx - 3},${loop.cy + 8} L${loop.cx + 12},${loop.cy - 8}`,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              opacity: 0.3
+            }
+          ),
+          li === 2 && // Remember: stacked layers
+          /* @__PURE__ */ jsxs("g", { opacity: 0.25, children: [
+            /* @__PURE__ */ jsx("rect", { x: loop.cx - 12, y: loop.cy - 8, width: 24, height: 6, rx: 2, fill: color, opacity: 0.4 }),
+            /* @__PURE__ */ jsx("rect", { x: loop.cx - 12, y: loop.cy, width: 24, height: 6, rx: 2, fill: color, opacity: 0.3 }),
+            /* @__PURE__ */ jsx("rect", { x: loop.cx - 12, y: loop.cy + 8, width: 24, height: 6, rx: 2, fill: color, opacity: 0.2 })
+          ] }),
+          /* @__PURE__ */ jsx("g", { style: animated ? { transformOrigin: `${loop.cx}px ${loop.cy}px`, animation: `pvr-spin ${20 + li * 5}s linear infinite` } : void 0, children: loop.particles.map((a, pi) => /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: loop.cx + Math.cos(a) * loop.r,
+              cy: loop.cy + Math.sin(a) * loop.r,
+              r: 3,
+              fill: color,
+              opacity: 0.45
+            },
+            `p-${li}-${pi}`
+          )) }),
+          /* @__PURE__ */ jsx("circle", { cx: loop.cx, cy: loop.cy, r: 5, fill: color, opacity: 0.6, filter: `url(#${ids.glow})` })
+        ] }, `loop-${li}`))
+      ]
+    }
+  );
+};
+PlanVerifyRemember.displayName = "PlanVerifyRemember";
+var proveCorrectId = 0;
+var VALIDATION_POINTS = Array.from({ length: 8 }, (_, i) => {
+  const angle = i / 8 * Math.PI * 2 - Math.PI / 2;
+  return { angle, x: 300 + Math.cos(angle) * 140, y: 200 + Math.sin(angle) * 140 };
+});
+var ProveCorrect = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    proveCorrectId += 1;
+    const base = `pc-${proveCorrectId}`;
+    return {
+      glow: `${base}-glow`,
+      shieldGrad: `${base}-sg`,
+      nucGlow: `${base}-ng`,
+      ringGrad: `${base}-rg`
+    };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const shieldPath = `M${cx},${cy - 150} C${cx - 80},${cy - 130} ${cx - 155},${cy - 100} ${cx - 155},${cy - 30}
+    C${cx - 155},${cy + 40} ${cx - 80},${cy + 110} ${cx},${cy + 150}
+    C${cx + 80},${cy + 110} ${cx + 155},${cy + 40} ${cx + 155},${cy - 30}
+    C${cx + 155},${cy - 100} ${cx + 80},${cy - 130} ${cx},${cy - 150} Z`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nucGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.shieldGrad, x1: "50%", y1: "0%", x2: "50%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.3 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.ringGrad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.1 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.3 })
+          ] })
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes pc-verify-pulse {
+            0%, 100% { opacity: 0.15; }
+            50% { opacity: 0.35; }
+          }
+        ` }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: shieldPath,
+            fill: color,
+            fillOpacity: 0.03,
+            stroke: `url(#${ids.shieldGrad})`,
+            strokeWidth: 2,
+            style: animated ? { animation: "pc-verify-pulse 3s ease-in-out infinite" } : void 0
+          }
+        ),
+        VALIDATION_POINTS.map((pt, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: cx,
+            y1: cy,
+            x2: pt.x,
+            y2: pt.y,
+            stroke: color,
+            strokeWidth: 0.8,
+            opacity: 0.12,
+            strokeDasharray: "4 6"
+          },
+          `link-${i}`
+        )),
+        VALIDATION_POINTS.map((pt, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 10, fill: "none", stroke: color, strokeWidth: 0.5, opacity: 0.15 }),
+          /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 4.5, fill: color, opacity: 0.4 })
+        ] }, `vp-${i}`)),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 60, fill: "none", stroke: `url(#${ids.ringGrad})`, strokeWidth: 1.5 }),
+        [0.5, 2.5, 4.5].map((a, i) => {
+          const px = cx + Math.cos(a) * 60;
+          const py = cy + Math.sin(a) * 60;
+          return /* @__PURE__ */ jsx("circle", { cx: px, cy: py, r: 3, fill: color, opacity: 0.45 }, `op-${i}`);
+        }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 25, fill: `url(#${ids.nucGlow})` }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${cx - 12},${cy} L${cx - 3},${cy + 10} L${cx + 14},${cy - 10}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 3,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            opacity: 0.7,
+            filter: `url(#${ids.glow})`
+          }
+        )
+      ]
+    }
+  );
+};
+ProveCorrect.displayName = "ProveCorrect";
+var serviceLayersId = 0;
+var LAYERS = [
+  { r: 55, nodes: 3, opacity: 0.5 },
+  // Inner: Brains
+  { r: 110, nodes: 5, opacity: 0.35 },
+  // Mid: Metal
+  { r: 165, nodes: 7, opacity: 0.2 }
+  // Outer: Integrations
+];
+var ServiceLayers = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    serviceLayersId += 1;
+    const base = `sly-${serviceLayersId}`;
+    return {
+      glow: `${base}-glow`,
+      innerGrad: `${base}-ig`,
+      midGrad: `${base}-mg`,
+      outerGrad: `${base}-og`,
+      coreGlow: `${base}-cg`
+    };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const layerNodes = LAYERS.map(
+    (layer) => Array.from({ length: layer.nodes }, (_, i) => {
+      const angle = i / layer.nodes * Math.PI * 2 - Math.PI / 2;
+      return { x: cx + Math.cos(angle) * layer.r, y: cy + Math.sin(angle) * layer.r };
+    })
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.coreGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.innerGrad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.45 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.45 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.midGrad, x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.12 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.3 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.outerGrad, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.06 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
+          ] })
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes sly-pulse {
+            0%, 100% { opacity: 0.08; }
+            50% { opacity: 0.2; }
+          }
+        ` }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 185, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: LAYERS[0].r, fill: color, opacity: 0.04 }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 30, fill: `url(#${ids.coreGlow})` }),
+        [ids.innerGrad, ids.midGrad, ids.outerGrad].map((gradId, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx,
+            cy,
+            r: LAYERS[i].r,
+            fill: "none",
+            stroke: `url(#${gradId})`,
+            strokeWidth: i === 0 ? 2 : 1.5,
+            strokeDasharray: i === 2 ? "4 6" : void 0
+          },
+          `ring-${i}`
+        )),
+        layerNodes[0].map((inner, i) => {
+          const outer = layerNodes[1][i % layerNodes[1].length];
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: inner.x,
+              y1: inner.y,
+              x2: outer.x,
+              y2: outer.y,
+              stroke: color,
+              strokeWidth: 0.6,
+              opacity: 0.1,
+              style: animated ? { animation: `sly-pulse 3s ease-in-out ${i * 0.5}s infinite` } : void 0
+            },
+            `cross-01-${i}`
+          );
+        }),
+        layerNodes[1].map((mid, i) => {
+          const outer = layerNodes[2][i % layerNodes[2].length];
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: mid.x,
+              y1: mid.y,
+              x2: outer.x,
+              y2: outer.y,
+              stroke: color,
+              strokeWidth: 0.5,
+              opacity: 0.07
+            },
+            `cross-12-${i}`
+          );
+        }),
+        LAYERS.map((layer, li) => /* @__PURE__ */ jsx("g", { children: layerNodes[li].map((node, ni) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r: 12, fill: "none", stroke: color, strokeWidth: 0.5, opacity: layer.opacity * 0.3 }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: node.x,
+              cy: node.y,
+              r: li === 0 ? 6 : li === 1 ? 5 : 4,
+              fill: color,
+              opacity: layer.opacity,
+              filter: li === 0 ? `url(#${ids.glow})` : void 0
+            }
+          )
+        ] }, `node-${li}-${ni}`)) }, `layer-${li}`)),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 4, fill: color, opacity: 0.6, filter: `url(#${ids.glow})` })
+      ]
+    }
+  );
+};
+ServiceLayers.displayName = "ServiceLayers";
+var sharedRealityId = 0;
+var UNITS = [
+  { x: 80, y: 80, r: 18 },
+  { x: 200, y: 55, r: 15 },
+  { x: 340, y: 70, r: 20 },
+  { x: 500, y: 60, r: 16 },
+  { x: 60, y: 200, r: 16 },
+  { x: 180, y: 180, r: 22 },
+  { x: 320, y: 200, r: 17 },
+  { x: 470, y: 185, r: 19 },
+  { x: 100, y: 320, r: 17 },
+  { x: 240, y: 330, r: 15 },
+  { x: 400, y: 310, r: 20 },
+  { x: 530, y: 330, r: 16 }
+];
+function dist3(a, b) {
+  return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+}
+var SharedReality = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    sharedRealityId += 1;
+    const base = `sr-${sharedRealityId}`;
+    return { grad: `${base}-grad`, unitGlow: `${base}-ug` };
+  }, []);
+  const connections = [];
+  for (let i = 0; i < UNITS.length; i++) {
+    for (let j = i + 1; j < UNITS.length; j++) {
+      const d = dist3(UNITS[i], UNITS[j]);
+      if (d < 220) {
+        connections.push({ a: i, b: j, d });
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.unitGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.08 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.04 })
+          ] })
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes sr-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
+        ` }),
+        connections.map(({ a, b, d }, i) => {
+          const opacity = Math.max(0.04, 0.18 - d / 220 * 0.14);
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: UNITS[a].x,
+              y1: UNITS[a].y,
+              x2: UNITS[b].x,
+              y2: UNITS[b].y,
+              stroke: color,
+              strokeWidth: 0.8,
+              opacity,
+              strokeDasharray: d > 160 ? "3 6" : void 0
+            },
+            `conn-${i}`
+          );
+        }),
+        UNITS.map((unit, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: unit.x, cy: unit.y, r: unit.r + 8, fill: `url(#${ids.unitGlow})` }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: unit.x,
+              cy: unit.y,
+              r: unit.r,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 1,
+              opacity: 0.25
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: unit.x,
+              cy: unit.y,
+              r: 3,
+              fill: color,
+              opacity: 0.5,
+              style: animated ? { animation: `sr-breathe 3s ease-in-out ${i * 0.25}s infinite` } : void 0
+            }
+          )
+        ] }, `unit-${i}`))
+      ]
+    }
+  );
+};
+SharedReality.displayName = "SharedReality";
+var standardLibraryId = 0;
+var RING_DATA = [
+  {
+    r: 70,
+    clusters: [
+      { angle: 0, dots: 3 },
+      { angle: 1.57, dots: 2 },
+      { angle: 3.14, dots: 3 },
+      { angle: 4.71, dots: 2 }
+    ]
+  },
+  {
+    r: 120,
+    clusters: [
+      { angle: 0.5, dots: 3 },
+      { angle: 1.3, dots: 2 },
+      { angle: 2.1, dots: 3 },
+      { angle: 3.5, dots: 2 },
+      { angle: 4.3, dots: 3 },
+      { angle: 5.5, dots: 2 }
+    ]
+  },
+  {
+    r: 170,
+    clusters: [
+      { angle: 0.3, dots: 2 },
+      { angle: 1, dots: 2 },
+      { angle: 1.7, dots: 1 },
+      { angle: 2.4, dots: 2 },
+      { angle: 3.1, dots: 2 },
+      { angle: 3.9, dots: 1 },
+      { angle: 4.6, dots: 2 },
+      { angle: 5.6, dots: 2 }
+    ]
+  }
+];
+var StandardLibrary = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    standardLibraryId += 1;
+    const base = `sl-${standardLibraryId}`;
+    return {
+      glow: `${base}-glow`,
+      grad1: `${base}-g1`,
+      grad2: `${base}-g2`,
+      grad3: `${base}-g3`,
+      nucGlow: `${base}-ng`
+    };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nucGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad1, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.35 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad2, x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.1 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.25 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad3, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.06 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
+          ] })
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes sl-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        ` }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 190, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
+        [ids.grad1, ids.grad2, ids.grad3].map((gradId, ri) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx,
+            cy,
+            r: RING_DATA[ri].r,
+            fill: "none",
+            stroke: `url(#${gradId})`,
+            strokeWidth: ri === 0 ? 1.5 : 1,
+            strokeDasharray: ri === 2 ? "3 6" : void 0
+          },
+          `ring-${ri}`
+        )),
+        RING_DATA.map((ring, ri) => /* @__PURE__ */ jsx(
+          "g",
+          {
+            style: animated ? {
+              transformOrigin: `${cx}px ${cy}px`,
+              animation: `sl-orbit ${40 + ri * 20}s linear infinite${ri % 2 === 1 ? " reverse" : ""}`
+            } : void 0,
+            children: ring.clusters.map((cluster, ci) => {
+              const basex = cx + Math.cos(cluster.angle) * ring.r;
+              const basey = cy + Math.sin(cluster.angle) * ring.r;
+              const opacity = ri === 0 ? 0.6 : ri === 1 ? 0.45 : 0.3;
+              const dotR = ri === 0 ? 3.5 : ri === 1 ? 3 : 2.5;
+              return /* @__PURE__ */ jsxs("g", { children: [
+                Array.from({ length: cluster.dots }, (_, di) => {
+                  const offsetAngle = cluster.angle + (di - (cluster.dots - 1) / 2) * 0.12;
+                  const offsetR = ring.r + (di % 2 === 0 ? 6 : -6);
+                  const dx = cx + Math.cos(offsetAngle) * offsetR;
+                  const dy = cy + Math.sin(offsetAngle) * offsetR;
+                  return /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: dx,
+                      cy: dy,
+                      r: dotR,
+                      fill: color,
+                      opacity
+                    },
+                    `dot-${ri}-${ci}-${di}`
+                  );
+                }),
+                /* @__PURE__ */ jsx("circle", { cx: basex, cy: basey, r: dotR + 1, fill: color, opacity: opacity * 0.7 })
+              ] }, `cluster-${ri}-${ci}`);
+            })
+          },
+          `ring-clusters-${ri}`
+        )),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 25, fill: `url(#${ids.nucGlow})` }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 8, fill: color, opacity: 0.7, filter: `url(#${ids.glow})` })
+      ]
+    }
+  );
+};
+StandardLibrary.displayName = "StandardLibrary";
+var stateMachineId = 0;
+var STATES = [
+  { x: 100, y: 200, r: 14, initial: true },
+  // idle (initial state)
+  { x: 260, y: 100, r: 11, initial: false },
+  // loading
+  { x: 460, y: 200, r: 12, initial: false },
+  // active
+  { x: 260, y: 320, r: 10, initial: false }
+  // error
+];
+var StateMachine = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    stateMachineId += 1;
+    const base = `sm-${stateMachineId}`;
+    return {
+      glow: `${base}-glow`,
+      activeGlow: `${base}-ag`,
+      transGrad: `${base}-tg`,
+      arrow: `${base}-arrow`,
+      stateGlow: `${base}-sg`
+    };
+  }, []);
+  const [idle, loading, active, errorState] = STATES;
+  const guardX = 360;
+  const guardY = 105;
+  const ds = 10;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.activeGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.stateGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.12 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.transGrad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.45 })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: ids.arrow,
+              markerWidth: "7",
+              markerHeight: "5",
+              refX: "6",
+              refY: "2.5",
+              orient: "auto",
+              markerUnits: "strokeWidth",
+              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L7,2.5 L0,5 Z", fill: color, opacity: 0.5 })
+            }
+          )
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes sm-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
+          @keyframes sm-active-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.9; } }
+        ` }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${idle.x + 15},${idle.y - 10} Q${180},${loading.y - 30} ${loading.x - 15},${loading.y + 5}`,
+            fill: "none",
+            stroke: `url(#${ids.transGrad})`,
+            strokeWidth: 1.5,
+            markerEnd: `url(#${ids.arrow})`,
+            strokeDasharray: animated ? "6 5" : void 0,
+            style: animated ? { animation: "sm-flow 1.5s linear infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${loading.x + 15},${loading.y} L${guardX - ds - 5},${guardY}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.2,
+            opacity: 0.3,
+            markerEnd: `url(#${ids.arrow})`,
+            strokeDasharray: animated ? "5 5" : void 0,
+            style: animated ? { animation: "sm-flow 1.5s linear 0.3s infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${guardX + ds + 5},${guardY} Q${420},${guardY + 30} ${active.x - 15},${active.y - 5}`,
+            fill: "none",
+            stroke: `url(#${ids.transGrad})`,
+            strokeWidth: 1.5,
+            markerEnd: `url(#${ids.arrow})`,
+            strokeDasharray: animated ? "6 5" : void 0,
+            style: animated ? { animation: "sm-flow 1.5s linear 0.6s infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${loading.x},${loading.y + 15} L${errorState.x},${errorState.y - 15}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1,
+            opacity: 0.2,
+            markerEnd: `url(#${ids.arrow})`,
+            strokeDasharray: "4 6"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${active.x - 5},${active.y + 15} Q${active.x},${active.y + 70} ${300},${380} Q${idle.x},${idle.y + 70} ${idle.x + 5},${idle.y + 15}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1,
+            opacity: 0.15,
+            strokeDasharray: "4 8",
+            markerEnd: `url(#${ids.arrow})`,
+            style: animated ? { animation: "sm-flow 3s linear infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${guardX},${guardY - ds} ${guardX + ds},${guardY} ${guardX},${guardY + ds} ${guardX - ds},${guardY}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.5,
+            opacity: 0.45
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${guardX},${guardY - ds * 0.4} ${guardX + ds * 0.4},${guardY} ${guardX},${guardY + ds * 0.4} ${guardX - ds * 0.4},${guardY}`,
+            fill: color,
+            opacity: 0.2
+          }
+        ),
+        STATES.map((state, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: state.x,
+              cy: state.y,
+              r: state.r + 12,
+              fill: `url(#${i === 2 ? ids.activeGlow : ids.stateGlow})`
+            }
+          ),
+          state.initial && /* @__PURE__ */ jsx("circle", { cx: state.x, cy: state.y, r: state.r + 5, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.25 }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: state.x,
+              cy: state.y,
+              r: state.r,
+              fill: i === 2 || i === 0 ? color : "none",
+              fillOpacity: i === 2 ? 0.5 : i === 0 ? 0.4 : 1,
+              stroke: color,
+              strokeWidth: 1.5,
+              opacity: i === 3 ? 0.3 : 0.6,
+              filter: i === 2 ? `url(#${ids.glow})` : void 0,
+              style: animated && i === 2 ? { animation: "sm-active-pulse 2s ease-in-out infinite" } : void 0
+            }
+          )
+        ] }, `state-${i}`))
+      ]
+    }
+  );
+};
+StateMachine.displayName = "StateMachine";
+var worldModelId = 0;
+var WorldModel = ({
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React.useMemo(() => {
+    worldModelId += 1;
+    const base = `wm-${worldModelId}`;
+    return {
+      glow: `${base}-glow`,
+      nucGlow: `${base}-ng`,
+      orbit1Grad: `${base}-o1`,
+      orbit2Grad: `${base}-o2`,
+      boundaryGrad: `${base}-bg`
+    };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const t1rx = 80;
+  const t1ry = 55;
+  const t1rot = -25;
+  const t1particles = [0.5, 2.4, 4.3].map((a) => {
+    const px = t1rx * Math.cos(a);
+    const py = t1ry * Math.sin(a);
+    const rotRad = t1rot * Math.PI / 180;
+    return {
+      x: cx + px * Math.cos(rotRad) - py * Math.sin(rotRad),
+      y: cy + px * Math.sin(rotRad) + py * Math.cos(rotRad)
+    };
+  });
+  const t2rx = 100;
+  const t2ry = 40;
+  const t2rot = 40;
+  const t2particles = [1.2, 4].map((a) => {
+    const px = t2rx * Math.cos(a);
+    const py = t2ry * Math.sin(a);
+    const rotRad = t2rot * Math.PI / 180;
+    return {
+      x: cx + px * Math.cos(rotRad) - py * Math.sin(rotRad),
+      y: cy + px * Math.sin(rotRad) + py * Math.cos(rotRad)
+    };
+  });
+  const boundaryR = 140;
+  const pages = [0, 1.57, 3.14, 4.71].map((a) => ({
+    x: cx + Math.cos(a) * boundaryR,
+    y: cy + Math.sin(a) * boundaryR
+  }));
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 600 400",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
+            /* @__PURE__ */ jsxs("feMerge", { children: [
+              /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+              /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nucGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.orbit1Grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.45 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.15 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.orbit2Grad, x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: ids.boundaryGrad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.12 }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.04 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.12 })
+          ] })
+        ] }),
+        animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes wm-orbit1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+          @keyframes wm-orbit2 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
+        ` }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 160, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx,
+            cy,
+            r: boundaryR,
+            fill: "none",
+            stroke: `url(#${ids.boundaryGrad})`,
+            strokeWidth: 1,
+            strokeDasharray: "4 8"
+          }
+        ),
+        pages.map((page, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: cx,
+            y1: cy,
+            x2: page.x,
+            y2: page.y,
+            stroke: color,
+            strokeWidth: 0.5,
+            opacity: 0.08,
+            strokeDasharray: "3 6"
+          },
+          `pl-${i}`
+        )),
+        pages.map((page, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: page.x, cy: page.y, r: 8, fill: "none", stroke: color, strokeWidth: 0.8, opacity: 0.2 }),
+          /* @__PURE__ */ jsx("circle", { cx: page.x, cy: page.y, r: 3.5, fill: color, opacity: 0.3 })
+        ] }, `page-${i}`)),
+        /* @__PURE__ */ jsx("g", { style: animated ? { transformOrigin: `${cx}px ${cy}px`, animation: "wm-orbit1 25s linear infinite" } : void 0, children: /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx,
+            cy,
+            rx: t1rx,
+            ry: t1ry,
+            fill: "none",
+            stroke: `url(#${ids.orbit1Grad})`,
+            strokeWidth: 1.5,
+            transform: `rotate(${t1rot}, ${cx}, ${cy})`
+          }
+        ) }),
+        t1particles.map((pt, i) => /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 4, fill: color, opacity: 0.5 }, `t1p-${i}`)),
+        /* @__PURE__ */ jsx("g", { style: animated ? { transformOrigin: `${cx}px ${cy}px`, animation: "wm-orbit2 35s linear infinite" } : void 0, children: /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx,
+            cy,
+            rx: t2rx,
+            ry: t2ry,
+            fill: "none",
+            stroke: `url(#${ids.orbit2Grad})`,
+            strokeWidth: 1.5,
+            transform: `rotate(${t2rot}, ${cx}, ${cy})`
+          }
+        ) }),
+        t2particles.map((pt, i) => /* @__PURE__ */ jsx("circle", { cx: pt.x, cy: pt.y, r: 3.5, fill: color, opacity: 0.45 }, `t2p-${i}`)),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 30, fill: `url(#${ids.nucGlow})` }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 10, fill: color, opacity: 0.75, filter: `url(#${ids.glow})` })
+      ]
+    }
+  );
+};
+WorldModel.displayName = "WorldModel";
+
+export { AIGenerates, ClosedCircuit, CommunityOwnership, CompileAnywhere, ComposableModels, DescribeProveDeploy, DomainGrid, EventBus, OrbitalUnit, PlanVerifyRemember, ProveCorrect, ServiceLayers, SharedReality, StandardLibrary, StateMachine, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, WorldModel };