@almadar/shell-web 0.0.0-stage → 0.1.0

package/dist/chunk-L677XGY3.js

@@ -0,0 +1,701 @@
+import { AvlFieldType, AvlState, AvlPage, AvlEntity } from './chunk-FP3WIKTC.js';
+import { AvlEffect } from './chunk-DZ42OJQC.js';
+import { OPERATOR_CATEGORY_COLORS } from './chunk-DFNZUYX4.js';
+import { useTranslate, Box, Typography, domPassthrough } from './chunk-MBQAMMSE.js';
+import React, { useRef, useState, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AvlApplication = ({
+  x = 0,
+  y = 0,
+  width = 500,
+  height = 350,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 12,
+        ry: 12,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 3
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 12,
+        ry: 12,
+        fill: color,
+        opacity: 0.02
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + 16,
+        y: y + 20,
+        fill: color,
+        fontSize: 12,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: label
+      }
+    )
+  ] });
+};
+AvlApplication.displayName = "AvlApplication";
+var AvlOrbital = ({
+  cx = 0,
+  cy = 0,
+  r = 80,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: color,
+        opacity: 0.03
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - r - 8,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 11,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: label
+      }
+    )
+  ] });
+};
+AvlOrbital.displayName = "AvlOrbital";
+var AvlTrait = ({
+  cx = 0,
+  cy = 0,
+  rx = 60,
+  ry = 30,
+  rotation = 0,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className, opacity, transform: `rotate(${rotation},${cx},${cy})`, children: [
+    /* @__PURE__ */ jsx(
+      "ellipse",
+      {
+        cx,
+        cy,
+        rx,
+        ry,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1.5,
+        strokeDasharray: "4 2"
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx - rx - 6,
+        y: cy,
+        textAnchor: "end",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 9,
+        fontFamily: "inherit",
+        opacity: 0.8,
+        transform: `rotate(${-rotation},${cx - rx - 6},${cy})`,
+        children: label
+      }
+    )
+  ] });
+};
+AvlTrait.displayName = "AvlTrait";
+var avlTransitionId = 0;
+var AvlTransition = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  curved = false,
+  curveAwayFrom,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const ids = React.useMemo(() => {
+    avlTransitionId += 1;
+    return { arrow: `avl-tr-${avlTransitionId}-arrow` };
+  }, []);
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  const curvature = len * 0.2;
+  let perpX = -dy / len;
+  let perpY = dx / len;
+  if (curveAwayFrom) {
+    const testX = mx + perpX * curvature;
+    const testY = my + perpY * curvature;
+    const distTest = Math.sqrt((testX - curveAwayFrom.x) ** 2 + (testY - curveAwayFrom.y) ** 2);
+    const distMid = Math.sqrt((mx - curveAwayFrom.x) ** 2 + (my - curveAwayFrom.y) ** 2);
+    if (distTest < distMid) {
+      perpX = -perpX;
+      perpY = -perpY;
+    }
+  }
+  const cpx = mx + perpX * curvature;
+  const cpy = my + perpY * curvature;
+  const d = curved ? `M${x1},${y1} Q${cpx},${cpy} ${x2},${y2}` : `M${x1},${y1} L${x2},${y2}`;
+  const labelX = curved ? (x1 + 2 * cpx + x2) / 4 : mx;
+  const labelY = curved ? (y1 + 2 * cpy + y2) / 4 : my;
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__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 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1.5,
+        markerEnd: `url(#${ids.arrow})`
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: labelX,
+        y: labelY - 6,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 9,
+        fontFamily: "inherit",
+        opacity: 0.8,
+        children: label
+      }
+    )
+  ] });
+};
+AvlTransition.displayName = "AvlTransition";
+var AvlEvent = ({
+  x = 0,
+  y = 0,
+  size = 16,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const s = size / 16;
+  const bolt = [
+    `M${x - 2 * s},${y - 8 * s}`,
+    `L${x + 4 * s},${y - 8 * s}`,
+    `L${x + 1 * s},${y - 1 * s}`,
+    `L${x + 5 * s},${y - 1 * s}`,
+    `L${x - 3 * s},${y + 8 * s}`,
+    `L${x},${y + 1 * s}`,
+    `L${x - 4 * s},${y + 1 * s}`,
+    "Z"
+  ].join(" ");
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx("path", { d: bolt, fill: color }),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + size / 2 + 12,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 9,
+        fontFamily: "inherit",
+        children: label
+      }
+    )
+  ] });
+};
+AvlEvent.displayName = "AvlEvent";
+var AvlGuard = ({
+  x = 0,
+  y = 0,
+  size = 24,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const h = size / 2;
+  const points = `${x},${y - h} ${x + h},${y} ${x},${y + h} ${x - h},${y}`;
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        points,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinejoin: "round"
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        children: label
+      }
+    )
+  ] });
+};
+AvlGuard.displayName = "AvlGuard";
+var AvlField = ({
+  x = 0,
+  y = 0,
+  angle = 0,
+  length = 30,
+  required = true,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const x2 = x + length * Math.cos(angle);
+  const y2 = y + length * Math.sin(angle);
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: x,
+        y1: y,
+        x2,
+        y2,
+        stroke: color,
+        strokeWidth: 1.5,
+        strokeDasharray: required ? void 0 : "3 2"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { cx: x2, cy: y2, r: 2.5, fill: color, opacity: 0.6 }),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x2 + 6 * Math.cos(angle),
+        y: y2 + 6 * Math.sin(angle),
+        textAnchor: Math.cos(angle) >= 0 ? "start" : "end",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.7,
+        children: label
+      }
+    )
+  ] });
+};
+AvlField.displayName = "AvlField";
+var AvlBinding = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1,
+        y1,
+        x2,
+        y2,
+        stroke: color,
+        strokeWidth: 1,
+        strokeDasharray: "2 3",
+        opacity: 0.6
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: mx,
+        y: my - 4,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: "@"
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: mx,
+        y: my + 10,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.6,
+        children: label
+      }
+    )
+  ] });
+};
+AvlBinding.displayName = "AvlBinding";
+var AvlBindingRef = ({
+  x = 0,
+  y = 0,
+  path,
+  size = 12,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const fullLabel = `@${path}`;
+  const autoR = Math.max(size, fullLabel.length * 3.5 + 4);
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: autoR,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1.5,
+        strokeDasharray: "3 2"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + 1,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        children: fullLabel
+      }
+    )
+  ] });
+};
+AvlBindingRef.displayName = "AvlBindingRef";
+var PERSISTENCE_STROKE = {
+  persistent: { strokeWidth: 2.5 },
+  runtime: { strokeDasharray: "6 3", strokeWidth: 2 }
+};
+var AvlPersistence = ({
+  x = 0,
+  y = 0,
+  kind,
+  size = 20,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const half = size / 2;
+  const strokeProps = PERSISTENCE_STROKE[kind];
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: x - half,
+        y1: y,
+        x2: x + half,
+        y2: y,
+        stroke: color,
+        strokeWidth: strokeProps.strokeWidth,
+        strokeDasharray: strokeProps.strokeDasharray,
+        strokeLinecap: "round"
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + 14,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.7,
+        children: label
+      }
+    )
+  ] });
+};
+AvlPersistence.displayName = "AvlPersistence";
+var AvlOperator = ({
+  x = 0,
+  y = 0,
+  name,
+  namespace = "arithmetic",
+  size = 16,
+  color,
+  opacity = 1,
+  className
+}) => {
+  const opColor = color ?? OPERATOR_CATEGORY_COLORS[namespace];
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: x - size,
+        y: y - size * 0.7,
+        width: size * 2,
+        height: size * 1.4,
+        rx: 4,
+        ry: 4,
+        fill: opColor,
+        fillOpacity: 0.15,
+        stroke: opColor,
+        strokeWidth: 1.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + 1,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: opColor,
+        fontSize: size > 14 ? 10 : 8,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: name
+      }
+    )
+  ] });
+};
+AvlOperator.displayName = "AvlOperator";
+var AvlSExpr = ({
+  x = 0,
+  y = 0,
+  width = 140,
+  height = 80,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 6,
+        ry: 6,
+        fill: color,
+        fillOpacity: 0.05,
+        stroke: color,
+        strokeWidth: 1,
+        strokeDasharray: "6 3"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { cx: x + 12, cy: y + 12, r: 3, fill: color, opacity: 0.4 }),
+    /* @__PURE__ */ jsx("line", { x1: x + 12, y1: y + 15, x2: x + 8, y2: y + 22, stroke: color, strokeWidth: 0.8, opacity: 0.3 }),
+    /* @__PURE__ */ jsx("line", { x1: x + 12, y1: y + 15, x2: x + 16, y2: y + 22, stroke: color, strokeWidth: 0.8, opacity: 0.3 }),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + height / 2,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 9,
+        fontFamily: "inherit",
+        opacity: 0.6,
+        children: label
+      }
+    )
+  ] });
+};
+AvlSExpr.displayName = "AvlSExpr";
+var AvlLiteral = ({
+  x = 0,
+  y = 0,
+  value,
+  size = 12,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: size,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + 1,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: size > 10 ? 9 : 7,
+        fontFamily: "inherit",
+        children: value
+      }
+    )
+  ] });
+};
+AvlLiteral.displayName = "AvlLiteral";
+var AVL_GLYPH_KINDS = [
+  "application",
+  "orbital",
+  "entity",
+  "trait",
+  "page",
+  "state",
+  "transition",
+  "event",
+  "guard",
+  "effect",
+  "field",
+  "fieldType",
+  "binding",
+  "bindingRef",
+  "persistence",
+  "operator",
+  "sexpr",
+  "literal"
+];
+var HEIGHT = { sm: 32, md: 56, lg: 88 };
+var PAD = 6;
+function Symbol({ kind, label, effectType, fieldType, persistence, namespace }) {
+  switch (kind) {
+    case "application":
+      return /* @__PURE__ */ jsx(AvlApplication, { width: 120, height: 80 });
+    case "orbital":
+      return /* @__PURE__ */ jsx(AvlOrbital, { r: 36 });
+    case "entity":
+      return /* @__PURE__ */ jsx(AvlEntity, { r: 18, fieldCount: 4, persistence: persistence ?? "persistent" });
+    case "trait":
+      return /* @__PURE__ */ jsx(AvlTrait, { rx: 44, ry: 22 });
+    case "page":
+      return /* @__PURE__ */ jsx(AvlPage, { size: 20 });
+    case "state":
+      return /* @__PURE__ */ jsx(AvlState, { width: 96, height: 34 });
+    case "transition":
+      return /* @__PURE__ */ jsx(AvlTransition, { x1: -40, y1: 0, x2: 40, y2: 0 });
+    case "event":
+      return /* @__PURE__ */ jsx(AvlEvent, { size: 20 });
+    case "guard":
+      return /* @__PURE__ */ jsx(AvlGuard, { size: 28 });
+    case "effect":
+      return /* @__PURE__ */ jsx(AvlEffect, { effectType: effectType ?? "set", size: 14 });
+    case "field":
+      return /* @__PURE__ */ jsx(AvlField, { length: 40 });
+    case "fieldType":
+      return /* @__PURE__ */ jsx(AvlFieldType, { kind: fieldType ?? "string", size: 9 });
+    case "binding":
+      return /* @__PURE__ */ jsx(AvlBinding, { x1: -40, y1: 0, x2: 40, y2: 0 });
+    case "bindingRef":
+      return /* @__PURE__ */ jsx(AvlBindingRef, { path: label ?? "entity.id", size: 14 });
+    case "persistence":
+      return /* @__PURE__ */ jsx(AvlPersistence, { kind: persistence ?? "persistent", size: 24 });
+    case "operator":
+      return /* @__PURE__ */ jsx(AvlOperator, { name: label ?? "+", namespace: namespace ?? "arithmetic", size: 20 });
+    case "sexpr":
+      return /* @__PURE__ */ jsx(AvlSExpr, { width: 110, height: 60 });
+    case "literal":
+      return /* @__PURE__ */ jsx(AvlLiteral, { value: label ?? "42", size: 14 });
+  }
+}
+var AvlGlyph = ({ kind, label, size = "md", showCaption = true, className, effectType, fieldType, persistence, namespace, ...rest }) => {
+  const variant = { effectType, fieldType, persistence, namespace };
+  const { t } = useTranslate();
+  const groupRef = useRef(null);
+  const [box, setBox] = useState({ x: -50, y: -50, w: 100, h: 100 });
+  useLayoutEffect(() => {
+    const g = groupRef.current;
+    if (!g || typeof g.getBBox !== "function") return;
+    const b = g.getBBox();
+    if (b.width > 0 && b.height > 0) setBox({ x: b.x - PAD, y: b.y - PAD, w: b.width + 2 * PAD, h: b.height + 2 * PAD });
+  }, [kind, label, variant.effectType, variant.fieldType, variant.persistence, variant.namespace]);
+  const height = HEIGHT[size];
+  return /* @__PURE__ */ jsxs(Box, { ...domPassthrough(rest), "data-testid": "avl-glyph", "data-kind": kind, className: `inline-flex flex-col items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx("svg", { height, width: height * box.w / box.h, viewBox: `${box.x} ${box.y} ${box.w} ${box.h}`, role: "img", "aria-label": label ?? t(`avl.glyph.${kind}`), children: /* @__PURE__ */ jsx("g", { ref: groupRef, children: /* @__PURE__ */ jsx(Symbol, { kind, label, ...variant }) }) }),
+    showCaption ? /* @__PURE__ */ jsx(Box, { "data-testid": "avl-glyph-caption", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: label ?? t(`avl.glyph.${kind}`) }) }) : null
+  ] });
+};
+AvlGlyph.displayName = "AvlGlyph";
+
+export { AVL_GLYPH_KINDS, AvlApplication, AvlBinding, AvlBindingRef, AvlEvent, AvlField, AvlGlyph, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlPersistence, AvlSExpr, AvlTrait, AvlTransition };