@almadar/shell-web 0.0.0-stage → 0.1.0

package/dist/chunk-KVQS4GXU.js

@@ -0,0 +1,328 @@
+import { useContainerWidth, computeTraitLayout, roundedEdgePath } from './chunk-GAR5TQ5B.js';
+import { AvlExplain, AvlEffectChip } from './chunk-SJGJJKBY.js';
+import { gearTeethPath } from './chunk-TZZBINQY.js';
+import { AVL_INK, AVL_FONT, AVL_STROKE, avlTint } from './chunk-DFNZUYX4.js';
+import { domPassthrough, useTranslate, useEventBus, useMediaQuery, Box, Typography } from './chunk-MBQAMMSE.js';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { formatSExpr } from '@almadar/core';
+import { createLogger } from '@almadar/logger';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var log = createLogger("almadar:ui:avl:state-machine");
+var MONO_CHAR = 7.3;
+var BODY_CHAR = 7.6;
+var NODE_H = 44;
+var PILL_H = 24;
+var EFFECT_CHIP = 14;
+var EFFECT_GAP = 4;
+var MARGIN = 28;
+var MIN_SCALE = 0.85;
+var MAX_SCALE = 1.25;
+function effectText(effect) {
+  return effect.args.length === 0 ? void 0 : formatSExpr([effect.type, ...effect.args]);
+}
+function guardText(t) {
+  return t.guard === void 0 || t.guard === null ? null : formatSExpr(t.guard);
+}
+function pillWidth(t) {
+  return 20 + (guardText(t) === null ? 0 : 16) + t.event.length * MONO_CHAR + t.effects.length * (EFFECT_CHIP + EFFECT_GAP);
+}
+function gearDiameter(name) {
+  return Math.max(96, Math.round(name.length * BODY_CHAR + 40));
+}
+function metricsFor(nodeShape, direction) {
+  return {
+    nodeSize: (name) => nodeShape === "gear" ? { width: gearDiameter(name), height: gearDiameter(name) } : { width: Math.max(112, Math.round(name.length * BODY_CHAR + 44)), height: NODE_H },
+    labelSize: (t) => ({ width: pillWidth(t), height: PILL_H }),
+    nodeSpacing: 40,
+    layerSpacing: 88,
+    orthogonal: true,
+    direction
+  };
+}
+var AvlStateMachine = ({
+  trait,
+  activeState,
+  activeTransition,
+  visitedStates,
+  followActive = false,
+  stateClickEvent,
+  transitionClickEvent,
+  onTransitionClick,
+  selectedState,
+  pendingSourceState,
+  nodeShape = "pill",
+  entityFields,
+  direction = "ltr",
+  showHeader = true,
+  annotations,
+  className,
+  ...rest
+}) => {
+  const passthrough = domPassthrough(rest);
+  const { t } = useTranslate();
+  const eventBus = useEventBus();
+  const clickable = transitionClickEvent !== void 0 || onTransitionClick !== void 0;
+  const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [layout, setLayout] = useState(null);
+  const hostRef = useRef(null);
+  const hostWidth = useContainerWidth(hostRef);
+  const traitKey = useMemo(() => JSON.stringify(trait), [trait]);
+  useEffect(() => {
+    if (trait.states.length === 0) return;
+    let live = true;
+    computeTraitLayout(trait, metricsFor(nodeShape, direction)).then((l) => {
+      if (live) setLayout(l);
+    }).catch((error) => log.error("layout-failed", { trait: trait.name, error: error instanceof Error ? error : String(error) }));
+    return () => {
+      live = false;
+    };
+  }, [traitKey, nodeShape, direction]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!followActive || layout === null || host === null || activeState === void 0) return;
+    const node = [...host.querySelectorAll('[data-testid="avl-sm-state"]')].find((n) => n.getAttribute("data-state") === activeState);
+    if (node === void 0) return;
+    const hostBox = host.getBoundingClientRect();
+    const nodeBox = node.getBoundingClientRect();
+    const left = host.scrollLeft + (nodeBox.left + nodeBox.width / 2) - (hostBox.left + hostBox.width / 2);
+    host.scrollTo({ left: Math.max(0, left), behavior: reduceMotion ? "auto" : "smooth" });
+  }, [followActive, layout, activeState, reduceMotion]);
+  const visitOrder = useMemo(() => new Map((visitedStates ?? []).map((s, i) => [s, i + 1])), [visitedStates]);
+  const nextFromActive = useMemo(
+    () => new Set(trait.transitions.filter((tr) => activeState !== void 0 && tr.from === activeState).map((tr) => tr.index)),
+    [trait.transitions, activeState]
+  );
+  const header = showHeader ? /* @__PURE__ */ jsxs(Box, { className: "flex flex-wrap items-baseline justify-between gap-2 pb-3", children: [
+    /* @__PURE__ */ jsxs(Box, { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", children: trait.name }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
+        t("avl.onEntity", { entity: trait.linkedEntity }),
+        " \xB7 ",
+        t("avl.stateCount", { count: trait.states.length }),
+        " \xB7 ",
+        t("avl.transitionCount", { count: trait.transitions.length })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { className: "flex flex-wrap gap-2", children: [
+      entityFields && entityFields.length > 0 ? /* @__PURE__ */ jsxs(Box, { as: "span", "data-testid": "avl-sm-fields", style: { fontFamily: AVL_FONT.mono, fontSize: 12, lineHeight: "20px", color: AVL_INK.quiet }, children: [
+        trait.linkedEntity,
+        " ",
+        "{ ",
+        entityFields.join(", "),
+        " }"
+      ] }) : null,
+      trait.listenedEvents.map((ev) => /* @__PURE__ */ jsx(Rail, { kind: t("avl.listensRail"), event: ev }, `in-${ev}`)),
+      trait.emittedEvents.map((ev) => /* @__PURE__ */ jsx(Rail, { kind: t("avl.emitsRail"), event: ev }, `out-${ev}`))
+    ] })
+  ] }) : null;
+  if (trait.states.length === 0) {
+    return /* @__PURE__ */ jsxs(Box, { "data-testid": "avl-state-machine", className, style: { width: "100%" }, ...passthrough, children: [
+      header,
+      /* @__PURE__ */ jsx(Box, { "data-testid": "avl-state-machine-empty", className: "rounded-md border border-dashed p-6 text-center", style: { borderColor: AVL_INK.line }, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("avl.noStateMachine") }) })
+    ] });
+  }
+  const w = layout ? layout.width + 2 * MARGIN : 0;
+  const h = layout ? layout.height + 2 * MARGIN : 0;
+  const fit = layout && hostWidth ? hostWidth / w : 1;
+  const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, fit));
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": "avl-state-machine", className, style: { width: "100%" }, ...passthrough, children: [
+    header,
+    /* @__PURE__ */ jsx(Box, { ref: hostRef, className: "overflow-x-auto", style: { width: "100%" }, children: layout ? /* @__PURE__ */ jsx(Box, { className: "relative mx-auto", style: { width: w * scale, height: h * scale }, children: /* @__PURE__ */ jsxs(Box, { className: "absolute left-0 top-0", style: { width: w, height: h, transform: `scale(${scale})`, transformOrigin: "0 0" }, children: [
+      /* @__PURE__ */ jsxs("svg", { width: w, height: h, className: "absolute left-0 top-0 overflow-visible", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsx("marker", { id: `avl-sm-head-${trait.name}`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L10 5 L0 10z", fill: AVL_INK.quiet, fillOpacity: 0.8 }) }),
+          /* @__PURE__ */ jsx("marker", { id: `avl-sm-head-hot-${trait.name}`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L10 5 L0 10z", fill: AVL_INK.focus }) })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { transform: `translate(${MARGIN},${MARGIN})`, children: [
+          layout.nodes.filter((n) => n.isInitial).map((n) => {
+            const cy = n.y + n.height / 2;
+            const rtl = direction === "rtl";
+            const dot = rtl ? n.x + n.width + 18 : n.x - 18;
+            const d = rtl ? `M ${n.x + n.width + 13} ${cy} H ${n.x + n.width + 1}` : `M ${n.x - 13} ${cy} H ${n.x - 1}`;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("circle", { cx: dot, cy, r: 5, fill: AVL_INK.text }),
+              /* @__PURE__ */ jsx("path", { d, stroke: AVL_INK.quiet, strokeWidth: AVL_STROKE.wire, markerEnd: `url(#avl-sm-head-${trait.name})` })
+            ] }, `init-${n.id}`);
+          }),
+          layout.edges.map((e) => {
+            const fired = e.index === activeTransition;
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                "data-testid": "avl-sm-wire",
+                "data-event": e.event,
+                "data-fired": fired ? "true" : "false",
+                d: roundedEdgePath(e.points, 10),
+                fill: "none",
+                stroke: fired ? AVL_INK.focus : AVL_INK.quiet,
+                strokeOpacity: fired ? 1 : 0.55,
+                strokeWidth: fired ? AVL_STROKE.active : AVL_STROKE.wire,
+                strokeDasharray: fired ? "8 6" : e.isBackward || e.isSelf ? "5 4" : void 0,
+                markerEnd: `url(#avl-sm-head${fired ? "-hot" : ""}-${trait.name})`,
+                children: fired && !reduceMotion ? /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-14", dur: "0.8s", repeatCount: "indefinite" }) : null
+              },
+              e.id
+            );
+          }),
+          layout.nodes.filter((n) => n.id === activeState).map((n) => /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: n.x - 5,
+              y: n.y - 5,
+              width: n.width + 10,
+              height: n.height + 10,
+              rx: 12,
+              fill: "none",
+              stroke: AVL_INK.focus,
+              strokeWidth: 4,
+              strokeOpacity: 0.22,
+              children: !reduceMotion ? /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", values: "0.28;0.06;0.28", dur: "1.6s", repeatCount: "indefinite" }) : null
+            },
+            `ring-${n.id}`
+          ))
+        ] })
+      ] }),
+      layout.edges.map((e) => {
+        const tr = trait.transitions.find((x) => x.index === e.index);
+        if (!tr) return null;
+        const fired = e.index === activeTransition;
+        const next = !fired && nextFromActive.has(e.index);
+        const guard = guardText(tr);
+        const pw = pillWidth(tr);
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": "avl-sm-label",
+            "data-event": tr.event,
+            role: clickable ? "button" : void 0,
+            tabIndex: clickable ? 0 : void 0,
+            "aria-current": fired ? "true" : void 0,
+            onClick: clickable ? () => {
+              const payload = { index: tr.index, event: tr.event, from: tr.from, to: tr.to };
+              onTransitionClick?.(payload);
+              if (transitionClickEvent) eventBus.emit(`UI:${transitionClickEvent}`, payload);
+            } : void 0,
+            className: `absolute flex flex-col items-center justify-center ${clickable ? "cursor-pointer" : ""}`,
+            style: { left: MARGIN + e.labelX, top: MARGIN + e.labelY, width: e.labelW, height: e.labelH },
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                className: "flex items-center gap-1 rounded-md px-2",
+                style: {
+                  height: PILL_H,
+                  width: pw,
+                  background: AVL_INK.surface,
+                  border: `1px ${next ? "dashed" : "solid"} ${fired ? AVL_INK.focus : AVL_INK.line}`,
+                  fontFamily: AVL_FONT.mono,
+                  fontSize: 12,
+                  color: fired ? AVL_INK.focus : AVL_INK.text,
+                  fontWeight: fired ? 600 : 400
+                },
+                children: [
+                  guard !== null ? /* @__PURE__ */ jsx(AvlExplain, { lines: [t("avl.guard"), t("avl.guardCaption")], code: guard, children: /* @__PURE__ */ jsx(Box, { as: "span", role: "img", tabIndex: 0, "aria-label": `${t("avl.guard")}: ${guard}`, "data-testid": "avl-guard-glyph", className: "inline-flex shrink-0 cursor-help rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 1 L11 6 L6 11 L1 6z", fill: AVL_INK.surface, stroke: fired ? AVL_INK.focus : AVL_INK.quiet, strokeWidth: 1.2 }) }) }) }) : null,
+                  annotations?.transitions?.[tr.event] ? /* @__PURE__ */ jsx(AvlExplain, { lines: [tr.event], code: guard ?? void 0, note: annotations.transitions[tr.event], children: /* @__PURE__ */ jsx(Box, { as: "span", tabIndex: 0, "data-explain": `transition:${tr.event}`, className: "whitespace-nowrap underline decoration-dotted underline-offset-2 cursor-help", children: tr.event }) }) : /* @__PURE__ */ jsx(Box, { as: "span", className: "whitespace-nowrap", children: tr.event }),
+                  tr.effects.map((fx, i) => /* @__PURE__ */ jsx(AvlEffectChip, { effectType: fx.type, size: EFFECT_CHIP, note: annotations?.effects?.[fx.type], code: effectText(fx) }, `${fx.type}-${i}`))
+                ]
+              }
+            )
+          },
+          `label-${e.id}`
+        );
+      }),
+      trait.states.map((s) => {
+        const n = layout.nodes.find((x) => x.id === s.name);
+        if (!n) return null;
+        const active = s.name === activeState;
+        const selected = s.name === selectedState;
+        const pending = s.name === pendingSourceState;
+        const visit = visitOrder.get(s.name);
+        const idle = activeState !== void 0 && !active && visit === void 0;
+        const gear = nodeShape === "gear";
+        const emphasis = active || selected || pending;
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            "data-testid": "avl-sm-state",
+            "data-state": s.name,
+            "data-active": active ? "true" : "false",
+            "data-selected": selected ? "true" : "false",
+            "data-pending": pending ? "true" : "false",
+            "data-shape": nodeShape,
+            role: stateClickEvent ? "button" : void 0,
+            tabIndex: stateClickEvent ? 0 : void 0,
+            "aria-current": active ? "true" : void 0,
+            "aria-pressed": stateClickEvent ? selected : void 0,
+            onClick: stateClickEvent ? () => eventBus.emit(`UI:${stateClickEvent}`, { stateId: s.name }) : void 0,
+            className: `absolute flex items-center justify-center ${gear ? "rounded-full" : "rounded-lg"} ${stateClickEvent ? "cursor-pointer" : ""}`,
+            style: {
+              left: MARGIN + n.x,
+              top: MARGIN + n.y,
+              width: n.width,
+              height: n.height,
+              background: gear ? "transparent" : AVL_INK.surface,
+              border: gear ? "none" : `${emphasis ? 2 : 1}px ${pending ? "dashed" : "solid"} ${emphasis ? AVL_INK.focus : AVL_INK.line}`,
+              boxShadow: gear ? "none" : s.isTerminal ? `0 0 0 3px ${AVL_INK.surface}, 0 0 0 4px ${AVL_INK.line}, var(--shadow-sm)` : selected ? `0 0 0 4px ${avlTint(AVL_INK.focus, 18)}, var(--shadow-hover)` : active ? "var(--shadow-hover)" : "var(--shadow-sm)",
+              color: idle ? AVL_INK.quiet : AVL_INK.text,
+              fontFamily: AVL_FONT.body,
+              fontSize: 13,
+              fontWeight: active ? 600 : 500,
+              transition: "border-color var(--duration-normal, 200ms), box-shadow var(--duration-normal, 200ms)"
+            },
+            children: [
+              visit !== void 0 && !active ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "span",
+                  "data-testid": "avl-sm-visit",
+                  className: "absolute flex items-center justify-center rounded-full",
+                  style: { top: -9, left: -9, width: 18, height: 18, fontSize: 11, fontWeight: 600, background: AVL_INK.wash, color: AVL_INK.quiet, border: `1px solid ${AVL_INK.line}` },
+                  children: visit
+                }
+              ) : null,
+              active ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "span",
+                  className: "absolute rounded-full px-1.5",
+                  style: { top: -10, right: 8, fontSize: 11, fontWeight: 600, background: AVL_INK.focus, color: AVL_INK.onFocus, boxShadow: `0 0 0 2px ${avlTint(AVL_INK.focus, 18)}` },
+                  children: t("avl.now")
+                }
+              ) : null,
+              gear ? /* @__PURE__ */ jsxs("svg", { "data-testid": "avl-sm-gear", width: n.width, height: n.height, className: "absolute left-0 top-0", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: gearTeethPath(n.width / 2, n.height / 2, n.width / 2 - 8, n.width / 2 - 1, 12),
+                    fill: AVL_INK.surface,
+                    stroke: emphasis ? AVL_INK.focus : AVL_INK.line,
+                    strokeWidth: emphasis ? 2 : 1.25,
+                    strokeDasharray: pending || s.isTerminal ? "4 3" : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("circle", { cx: n.width / 2, cy: n.height / 2, r: n.width / 2 - 14, fill: "none", stroke: AVL_INK.line, strokeWidth: 1 })
+              ] }) : null,
+              annotations?.states?.[s.name] ? /* @__PURE__ */ jsx(AvlExplain, { lines: [s.name], note: annotations.states[s.name], children: /* @__PURE__ */ jsx(Box, { as: "span", tabIndex: 0, "data-explain": `state:${s.name}`, className: "relative underline decoration-dotted underline-offset-2 cursor-help", children: s.name }) }) : /* @__PURE__ */ jsx(Box, { as: "span", className: "relative", children: s.name })
+            ]
+          },
+          s.name
+        );
+      })
+    ] }) }) : /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center py-10", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("avl.computingLayout") }) }) })
+  ] });
+};
+var Rail = ({ kind, event }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    as: "span",
+    className: "inline-flex items-center gap-1 rounded-full px-2",
+    style: { fontFamily: AVL_FONT.mono, fontSize: 12, lineHeight: "20px", border: `1px solid ${AVL_INK.line}`, background: AVL_INK.wash, color: AVL_INK.quiet },
+    children: [
+      kind,
+      /* @__PURE__ */ jsx(Box, { as: "span", style: { color: AVL_INK.text, fontWeight: 600 }, children: event })
+    ]
+  }
+);
+AvlStateMachine.displayName = "AvlStateMachine";
+
+export { AvlStateMachine };

package/dist/chunk-L2DEKY4J.js

@@ -0,0 +1,97 @@
+import { useEventBus } from './chunk-MBQAMMSE.js';
+import { useState, useCallback, useMemo } from 'react';
+
+var ALMADAR_DND_MIME = "application/x-almadar-dnd";
+function useDraggable({ payload, disabled = false }) {
+  const [isDragging, setIsDragging] = useState(false);
+  const eventBus = useEventBus();
+  const handleDragStart = useCallback(
+    (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      e.dataTransfer.setData(ALMADAR_DND_MIME, JSON.stringify(payload));
+      e.dataTransfer.effectAllowed = "copy";
+      setIsDragging(true);
+      eventBus.emit("UI:DRAG_START", { kind: payload.kind, data: payload.data });
+    },
+    [disabled, payload, eventBus]
+  );
+  const handleDragEnd = useCallback(
+    (e) => {
+      setIsDragging(false);
+      eventBus.emit("UI:DRAG_END", { kind: payload.kind, data: payload.data });
+    },
+    [payload, eventBus]
+  );
+  const dragProps = useMemo(
+    () => ({
+      draggable: !disabled,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      "aria-grabbed": isDragging
+    }),
+    [disabled, handleDragStart, handleDragEnd, isDragging]
+  );
+  return { dragProps, isDragging };
+}
+function parsePayload(e) {
+  try {
+    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.kind !== "string" || !parsed.data) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function hasAlmadarPayload(e) {
+  return e.dataTransfer.types.includes(ALMADAR_DND_MIME);
+}
+function useDropZone({ accepts, onDrop, disabled = false }) {
+  const [isOver, setIsOver] = useState(false);
+  const eventBus = useEventBus();
+  const handleDragOver = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (!hasAlmadarPayload(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      setIsOver(false);
+    },
+    []
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsOver(false);
+      if (disabled) return;
+      const payload = parsePayload(e);
+      if (!payload) return;
+      if (!accepts.includes(payload.kind)) return;
+      const position = { x: e.clientX, y: e.clientY };
+      onDrop(payload, position);
+      eventBus.emit("UI:DROP", { kind: payload.kind, data: payload.data, ...position });
+    },
+    [disabled, accepts, onDrop, eventBus]
+  );
+  const dropProps = useMemo(
+    () => ({
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    }),
+    [handleDragOver, handleDragLeave, handleDrop]
+  );
+  return { dropProps, isOver };
+}
+
+export { ALMADAR_DND_MIME, useDraggable, useDropZone };