@almadar/ui 2.28.1 → 2.29.0

package/dist/avl/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useCallback, useContext, useState, useMemo, useEffect, useReducer, useRef } from 'react';
+import React8, { createContext, useCallback, useContext, useMemo, useState, useEffect, useReducer, useRef } from 'react';
 import '@react-three/drei';
 import '@react-three/fiber';
 import 'three';
@@ -5191,6 +5191,414 @@ var AvlSwimLane = ({
   ] });
 };
 AvlSwimLane.displayName = "AvlSwimLane";
+var DOMAIN_COLORS = {
+  commerce: "#14b8a6",
+  healthcare: "#3b82f6",
+  education: "#6366f1",
+  finance: "#10b981",
+  scheduling: "#f59e0b",
+  workflow: "#f97316",
+  social: "#ec4899",
+  media: "#a855f7",
+  gaming: "#ef4444",
+  iot: "#06b6d4",
+  crm: "#0ea5e9",
+  analytics: "#8b5cf6",
+  communication: "#f43f5e",
+  content: "#84cc16",
+  location: "#22c55e",
+  hr: "#64748b",
+  legal: "#78716c",
+  "real-estate": "#a8a29e"
+};
+var SIZE_MAP = {
+  xs: 32,
+  sm: 48,
+  md: 120,
+  lg: 200,
+  xl: 300
+};
+function PersistenceCore({ cx, cy, r: r2, persistence, color }) {
+  switch (persistence) {
+    case "runtime":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: r2, fill: "none", stroke: color, strokeWidth: 1.5, strokeDasharray: "4 2", opacity: 0.9 }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: r2 * 0.4, fill: color, opacity: 0.3, children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.3;0.6;0.3", dur: "2s", repeatCount: "indefinite" }) })
+      ] });
+    case "singleton":
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: cx - r2 * 0.7,
+          y: cy - r2 * 0.7,
+          width: r2 * 1.4,
+          height: r2 * 1.4,
+          transform: `rotate(45 ${cx} ${cy})`,
+          fill: color,
+          fillOpacity: 0.15,
+          stroke: color,
+          strokeWidth: 1.5
+        }
+      );
+    case "instance":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: r2, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth: 1, strokeDasharray: "2 2" }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: r2 * 0.5, fill: color, fillOpacity: 0.2 })
+      ] });
+    case "persistent":
+    default:
+      return /* @__PURE__ */ jsx("circle", { cx, cy, r: r2, fill: color, fillOpacity: 0.15, stroke: color, strokeWidth: 2 });
+  }
+}
+function FieldSpokes({ cx, cy, innerR, outerR, count, color }) {
+  if (count === 0) return null;
+  const spokes = Array.from({ length: count }, (_, i) => {
+    const angle = Math.PI * 2 * i / count - Math.PI / 2;
+    return /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: cx + innerR * Math.cos(angle),
+        y1: cy + innerR * Math.sin(angle),
+        x2: cx + outerR * Math.cos(angle),
+        y2: cy + outerR * Math.sin(angle),
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.5
+      },
+      i
+    );
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: spokes });
+}
+function StateRings({ cx, cy, baseR, count, color, animated }) {
+  if (count === 0) return null;
+  const ringCount = Math.min(count, 5);
+  const ringSpacing = baseR * 0.25;
+  const rings = Array.from({ length: ringCount }, (_, i) => {
+    const r2 = baseR + (i + 1) * ringSpacing;
+    const opacity = 0.6 - i * 0.1;
+    const width = i === 0 ? 1.5 : 1;
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r: r2,
+        fill: "none",
+        stroke: color,
+        strokeWidth: width,
+        opacity,
+        children: animated && /* @__PURE__ */ jsx(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: `0 ${cx} ${cy}`,
+            to: `${i % 2 === 0 ? 360 : -360} ${cx} ${cy}`,
+            dur: `${8 + i * 4}s`,
+            repeatCount: "indefinite"
+          }
+        )
+      },
+      i
+    );
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: rings });
+}
+function EffectMarkers({ cx, cy, r: r2, effectTypes, baseColor }) {
+  if (effectTypes.length === 0) return null;
+  const seen = /* @__PURE__ */ new Set();
+  const categories = [];
+  for (const t of effectTypes) {
+    const cat = EFFECT_TYPE_TO_CATEGORY[t];
+    if (!seen.has(cat)) {
+      seen.add(cat);
+      categories.push({ type: t, category: cat });
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: categories.map(({ type, category }, i) => {
+    const angle = Math.PI * 2 * i / categories.length - Math.PI / 2;
+    const mx = cx + r2 * Math.cos(angle);
+    const my = cy + r2 * Math.sin(angle);
+    const markerColor = EFFECT_CATEGORY_COLORS[category].color;
+    const s = r2 * 0.12;
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("circle", { cx: mx, cy: my, r: s + 1, fill: markerColor, fillOpacity: 0.2 }),
+      /* @__PURE__ */ jsx("circle", { cx: mx, cy: my, r: s * 0.6, fill: markerColor })
+    ] }, type);
+  }) });
+}
+function AtomGlyph({ cx, cy, radius, fieldCount, stateCount, persistence, effectTypes, color, animated, showLabels, name }) {
+  const coreR = radius * 0.25;
+  const spokeInner = coreR + 2;
+  const spokeOuter = coreR + radius * 0.15;
+  const ringBase = coreR + radius * 0.18;
+  const markerR = ringBase + Math.min(stateCount, 5) * (radius * 0.25) * 0.25 + radius * 0.08;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(PersistenceCore, { cx, cy, r: coreR, persistence, color }),
+    /* @__PURE__ */ jsx(FieldSpokes, { cx, cy, innerR: spokeInner, outerR: spokeOuter, count: fieldCount, color }),
+    /* @__PURE__ */ jsx(StateRings, { cx, cy, baseR: ringBase, count: stateCount, color, animated }),
+    /* @__PURE__ */ jsx(EffectMarkers, { cx, cy, r: markerR, effectTypes, baseColor: color }),
+    showLabels && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + radius + 12,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: radius * 0.14,
+        fontFamily: "Inter, sans-serif",
+        fontWeight: 500,
+        opacity: 0.8,
+        children: name
+      }
+    )
+  ] });
+}
+function MoleculeGlyph({ cx, cy, radius, children, color, animated, showLabels, name }) {
+  const count = children.length || 1;
+  const childR = radius / (count <= 3 ? 2.8 : 3.5);
+  const orbitR = radius * 0.5;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: orbitR, fill: "none", stroke: color, strokeWidth: 0.8, strokeDasharray: "3 2", opacity: 0.3 }),
+    children.map((child, i) => {
+      const angle = Math.PI * 2 * i / count - Math.PI / 2;
+      const childCx = cx + orbitR * Math.cos(angle);
+      const childCy = cy + orbitR * Math.sin(angle);
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: cx, y1: cy, x2: childCx, y2: childCy, stroke: color, strokeWidth: 0.5, opacity: 0.2 }),
+        /* @__PURE__ */ jsx(
+          AtomGlyph,
+          {
+            cx: childCx,
+            cy: childCy,
+            radius: childR,
+            fieldCount: child.fieldCount ?? 3,
+            stateCount: child.stateCount ?? 2,
+            persistence: child.persistence ?? "persistent",
+            effectTypes: child.effectTypes ?? ["render-ui"],
+            color,
+            animated,
+            showLabels: false,
+            name: child.name
+          }
+        )
+      ] }, child.name);
+    }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: radius * 0.04, fill: color, opacity: 0.5 }),
+    showLabels && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + radius + 12,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: radius * 0.12,
+        fontFamily: "Inter, sans-serif",
+        fontWeight: 500,
+        opacity: 0.8,
+        children: name
+      }
+    )
+  ] });
+}
+function OrganismGlyph({ cx, cy, radius, children, connections, color, animated, showLabels, name }) {
+  const count = children.length || 1;
+  const childR = radius / (count <= 3 ? 3 : 4);
+  const spreadX = radius * 0.6;
+  const positions = children.map((_, i) => {
+    const offset = (i - (count - 1) / 2) * (spreadX * 2 / Math.max(count - 1, 1));
+    return { x: cx + offset, y: cy };
+  });
+  const nameToIdx = {};
+  children.forEach((c, i) => {
+    nameToIdx[c.name] = i;
+  });
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: cx - radius,
+        y: cy - radius * 0.7,
+        width: radius * 2,
+        height: radius * 1.4,
+        rx: radius * 0.08,
+        fill: color,
+        fillOpacity: 0.03,
+        stroke: color,
+        strokeWidth: 0.8,
+        strokeDasharray: "6 3",
+        opacity: 0.4
+      }
+    ),
+    connections.map((conn, i) => {
+      const fromIdx = nameToIdx[conn.from];
+      const toIdx = nameToIdx[conn.to];
+      if (fromIdx == null || toIdx == null) return null;
+      const from = positions[fromIdx];
+      const to = positions[toIdx];
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: from.x + childR,
+            y1: from.y,
+            x2: to.x - childR,
+            y2: to.y,
+            stroke: color,
+            strokeWidth: 1,
+            opacity: 0.4,
+            markerEnd: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${to.x - childR - 4},${to.y - 3} ${to.x - childR},${to.y} ${to.x - childR - 4},${to.y + 3}`,
+            fill: color,
+            opacity: 0.5
+          }
+        ),
+        showLabels && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: (from.x + to.x) / 2,
+            y: from.y - childR - 4,
+            textAnchor: "middle",
+            fill: color,
+            fontSize: radius * 0.06,
+            fontFamily: "Inter, sans-serif",
+            opacity: 0.5,
+            children: conn.event
+          }
+        )
+      ] }, i);
+    }),
+    children.map((child, i) => {
+      const pos = positions[i];
+      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        AtomGlyph,
+        {
+          cx: pos.x,
+          cy: pos.y,
+          radius: childR,
+          fieldCount: child.fieldCount ?? 3,
+          stateCount: child.stateCount ?? 2,
+          persistence: child.persistence ?? "persistent",
+          effectTypes: child.effectTypes ?? ["render-ui"],
+          color,
+          animated,
+          showLabels,
+          name: child.name
+        }
+      ) }, child.name);
+    }),
+    showLabels && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + radius * 0.7 + 14,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: radius * 0.1,
+        fontFamily: "Inter, sans-serif",
+        fontWeight: 600,
+        opacity: 0.8,
+        children: name
+      }
+    )
+  ] });
+}
+var AvlBehaviorGlyph = ({
+  name,
+  level = "atom",
+  domain,
+  color: colorOverride,
+  fieldCount = 4,
+  stateCount = 2,
+  persistence = "persistent",
+  effectTypes = [],
+  children: childBehaviors,
+  connections = [],
+  size = "md",
+  showLabels = false,
+  animated = false,
+  className,
+  onClick
+}) => {
+  const resolvedColor = colorOverride ?? (domain ? DOMAIN_COLORS[domain] ?? "#14b8a6" : "#14b8a6");
+  const dim = SIZE_MAP[size];
+  const radius = dim * 0.4;
+  const cx = dim / 2;
+  const cy = dim / 2;
+  const vb = level === "organism" ? `0 0 ${dim * 1.5} ${dim}` : `0 0 ${dim} ${dim}`;
+  const svgW = level === "organism" ? dim * 1.5 : dim;
+  const glyphId = useMemo(() => `avl-bg-${Math.random().toString(36).slice(2, 8)}`, []);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: vb,
+      width: svgW,
+      height: dim,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("inline-block", onClick && "cursor-pointer", className),
+      onClick,
+      role: onClick ? "button" : void 0,
+      "aria-label": `${name} behavior glyph`,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: `${glyphId}-bg`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: resolvedColor, stopOpacity: 0.06 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: resolvedColor, stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsx("circle", { cx: level === "organism" ? dim * 0.75 : cx, cy, r: radius * 1.3, fill: `url(#${glyphId}-bg)` }),
+        level === "atom" && /* @__PURE__ */ jsx(
+          AtomGlyph,
+          {
+            cx,
+            cy,
+            radius,
+            fieldCount,
+            stateCount,
+            persistence,
+            effectTypes,
+            color: resolvedColor,
+            animated,
+            showLabels,
+            name
+          }
+        ),
+        level === "molecule" && /* @__PURE__ */ jsx(
+          MoleculeGlyph,
+          {
+            cx,
+            cy,
+            radius,
+            children: childBehaviors ?? [],
+            color: resolvedColor,
+            animated,
+            showLabels,
+            name
+          }
+        ),
+        level === "organism" && /* @__PURE__ */ jsx(
+          OrganismGlyph,
+          {
+            cx: dim * 0.75,
+            cy,
+            radius: radius * 1.5,
+            children: childBehaviors ?? [],
+            connections,
+            color: resolvedColor,
+            animated,
+            showLabels,
+            name
+          }
+        )
+      ]
+    }
+  );
+};
+AvlBehaviorGlyph.displayName = "AvlBehaviorGlyph";
 
 // components/organisms/avl/avl-schema-parser.ts
 function getEntity(orbital) {
@@ -6811,4 +7219,4 @@ var AvlCosmicZoom = ({
 };
 AvlCosmicZoom.displayName = "AvlCosmicZoom";
 
-export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlApplicationScene, AvlBinding, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalScene, AvlOrbitalUnit, AvlPage, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionScene, CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, STATE_COLORS, arcPath, curveControlPoint, getStateRole, gridPositions, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions };
+export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlApplicationScene, AvlBehaviorGlyph, AvlBinding, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalScene, AvlOrbitalUnit, AvlPage, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionLane, AvlTransitionScene, CONNECTION_COLORS, DOMAIN_COLORS, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, STATE_COLORS, arcPath, curveControlPoint, getStateRole, gridPositions, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions };

package/dist/providers/EntityStoreProvider.d.ts

@@ -0,0 +1,47 @@
+/**
+ * EntityStoreProvider
+ *
+ * Reactive entity store for Orbital applications. Holds per-entity-type snapshots.
+ * When `advance()` is called (after a persist/set/swap!/atomic response from the server),
+ * all `useEntityRef` subscribers for that entity type re-render with fresh data.
+ * `useEntityWatch` callbacks fire for side effects (toasts, cross-orbital emits).
+ *
+ * This is the client-side half of the `ref` operator. The server-side half is the
+ * initial DB query and auto-fetch-after-mutation in the generated handler / runtime.
+ *
+ * @packageDocumentation
+ */
+import React, { type ReactNode } from 'react';
+type WatchCallback = (oldData: unknown[], newData: unknown[]) => void;
+/**
+ * Subscribe to an entity type's data reactively.
+ * Re-renders only when the data for this specific entity type changes.
+ *
+ * This is the client-side implementation of the `["ref", "EntityType"]` operator.
+ */
+export declare function useEntityRef(entityType: string): unknown[];
+/**
+ * Register a callback that fires when an entity type's data changes.
+ *
+ * This is the client-side implementation of the `["watch", "EntityType", effects]` operator.
+ * The callback receives (oldData, newData) and should execute side effects (notify, emit, log).
+ */
+export declare function useEntityWatch(entityType: string, callback: WatchCallback): void;
+export interface EntityStoreContextValue {
+    advance: (entityType: string, data: unknown[]) => void;
+    getSnapshot: (entityType: string) => unknown[];
+}
+export declare const EntityStoreContext: React.Context<EntityStoreContextValue>;
+/**
+ * Access the entity store's advance function.
+ * Used by useOrbitalBridge and OrbPreview to push server response data into the store.
+ */
+export declare function useEntityStore(): EntityStoreContextValue;
+/**
+ * Provider component. Wrap the app or page with this to enable entity reactivity.
+ * Already included in OrbitalProvider.
+ */
+export declare function EntityStoreProvider({ children }: {
+    children: ReactNode;
+}): React.ReactElement;
+export {};