@almadar/shell-web 1.0.0 → 1.1.0

package/dist/{chunk-UXLE3IPR.js → chunk-FAKU5F62.js}

@@ -1,4 +1,5 @@
 import { createLogger } from '@almadar/logger';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var log = createLogger("almadar:ui:theme-color");
 var THEME_SERIES = [
@@ -198,6 +199,7 @@ var EFFECT_OPERATOR_CATEGORY = {
   "program/os-grants": "system",
   "program/compose": "system",
   "program/step": "system",
+  "program/navigate": "system",
   "program/resolve-rows": "system",
   "program/self": "system",
   "program/tick": "system",
@@ -234,7 +236,18 @@ var EFFECT_OPERATOR_CATEGORY = {
   "mem/atomic-cas": "system",
   "kernel/queue-front": "communication",
   "kernel/queue-back": "communication",
-  "ffi/call": "system"
+  "ffi/call": "system",
+  "gpu/device-open": "system",
+  "gpu/device-close": "system",
+  "gpu/buffer-create": "system",
+  "gpu/texture-create": "system",
+  "gpu/sampler-create": "system",
+  "gpu/query-create": "system",
+  "gpu/shader-create": "system",
+  "gpu/pipeline-create": "system",
+  "gpu/bind-group-create": "system",
+  "gpu/submit": "system",
+  "gpu/release": "system"
 };
 var EFFECT_FAMILY_CATEGORY = {
   agent: "system",
@@ -294,6 +307,7 @@ var EFFECT_OPERATOR_ZONE = {
   "program/os-grants": "system",
   "program/compose": "system",
   "program/step": "system",
+  "program/navigate": "system",
   "program/resolve-rows": "system",
   "program/self": "system",
   "program/tick": "system",
@@ -330,7 +344,18 @@ var EFFECT_OPERATOR_ZONE = {
   "mem/atomic-cas": "system",
   "kernel/queue-front": "bus",
   "kernel/queue-back": "bus",
-  "ffi/call": "system"
+  "ffi/call": "system",
+  "gpu/device-open": "system",
+  "gpu/device-close": "system",
+  "gpu/buffer-create": "system",
+  "gpu/texture-create": "system",
+  "gpu/sampler-create": "system",
+  "gpu/query-create": "system",
+  "gpu/shader-create": "system",
+  "gpu/pipeline-create": "system",
+  "gpu/bind-group-create": "system",
+  "gpu/submit": "system",
+  "gpu/release": "system"
 };
 var EFFECT_FAMILY_ZONE = {
   agent: "system",
@@ -406,7 +431,13 @@ var OPERATOR_CATEGORY_COLORS = {
   "std-audio": avlBlend("var(--color-accent)", 50, "var(--color-warning)"),
   "std-auth": avlBlend("var(--color-warning)", 60, "var(--color-primary)"),
   "std-trace": "var(--color-muted-foreground)",
-  "std-behavior": avlBlend("var(--color-accent)", 60, "var(--color-success)")
+  "std-behavior": avlBlend("var(--color-accent)", 60, "var(--color-success)"),
+  "std-mem": avlBlend("var(--color-muted-foreground)", 70, "var(--color-error)"),
+  "std-mem-read": avlBlend("var(--color-muted-foreground)", 70, "var(--color-info)"),
+  "std-kernel": avlBlend("var(--color-muted-foreground)", 70, "var(--color-accent)"),
+  "std-kernel-read": avlBlend("var(--color-muted-foreground)", 70, "var(--color-success)"),
+  "std-ffi": avlBlend("var(--color-muted-foreground)", 70, "var(--color-warning)"),
+  "std-gpu": avlBlend("var(--color-muted-foreground)", 60, "var(--color-accent)")
 };
 function effectZoneOf(head) {
   if (isEffectOperator(head)) return EFFECT_OPERATOR_ZONE[head];
@@ -417,5 +448,175 @@ function effectZoneOf(head) {
   }
   return null;
 }
+var log2 = createLogger("almadar:ui:avl:effect");
+function headIcon(type, x, y, s, color) {
+  switch (type) {
+    case "render-ui":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: x - s, y: y - s, width: s * 2, height: s * 2, fill: "none", stroke: color, strokeWidth: 1.5, rx: 1 }),
+        /* @__PURE__ */ jsx("line", { x1: x, y1: y - s, x2: x, y2: y + s, stroke: color, strokeWidth: 1 }),
+        /* @__PURE__ */ jsx("line", { x1: x - s, y1: y, x2: x + s, y2: y, stroke: color, strokeWidth: 1 })
+      ] });
+    case "set":
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M${x - s * 0.6},${y + s} L${x - s},${y + s * 0.4} L${x + s * 0.4},${y - s} L${x + s},${y - s * 0.4} Z`,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5,
+          strokeLinejoin: "round"
+        }
+      );
+    case "persist":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("ellipse", { cx: x, cy: y - s * 0.6, rx: s, ry: s * 0.4, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("line", { x1: x - s, y1: y - s * 0.6, x2: x - s, y2: y + s * 0.4, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("line", { x1: x + s, y1: y - s * 0.6, x2: x + s, y2: y + s * 0.4, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("ellipse", { cx: x, cy: y + s * 0.4, rx: s, ry: s * 0.4, fill: "none", stroke: color, strokeWidth: 1.5 })
+      ] });
+    case "fetch":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: x, y1: y - s, x2: x, y2: y + s * 0.6, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("polyline", { points: `${x - s * 0.5},${y + s * 0.1} ${x},${y + s} ${x + s * 0.5},${y + s * 0.1}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
+      ] });
+    case "emit":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s * 0.3, fill: color }),
+        /* @__PURE__ */ jsx("path", { d: `M${x - s * 0.7},${y - s * 0.7} A${s},${s} 0 0,1 ${x + s * 0.7},${y - s * 0.7}`, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("path", { d: `M${x - s},${y - s} A${s * 1.4},${s * 1.4} 0 0,1 ${x + s},${y - s}`, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.6 })
+      ] });
+    case "navigate":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: x - s, y1: y, x2: x + s * 0.6, y2: y, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("polyline", { points: `${x + s * 0.1},${y - s * 0.5} ${x + s},${y} ${x + s * 0.1},${y + s * 0.5}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
+      ] });
+    case "call-service":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: x - s, y1: y - s * 0.3, x2: x + s, y2: y - s * 0.3, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("polyline", { points: `${x + s * 0.5},${y - s * 0.7} ${x + s},${y - s * 0.3} ${x + s * 0.5},${y + s * 0.1}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("line", { x1: x + s, y1: y + s * 0.3, x2: x - s, y2: y + s * 0.3, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("polyline", { points: `${x - s * 0.5},${y - s * 0.1} ${x - s},${y + s * 0.3} ${x - s * 0.5},${y + s * 0.7}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
+      ] });
+    case "spawn":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("line", { x1: x - s * 0.5, y1: y, x2: x + s * 0.5, y2: y, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("line", { x1: x, y1: y - s * 0.5, x2: x, y2: y + s * 0.5, stroke: color, strokeWidth: 1.5 })
+      ] });
+    case "despawn":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("line", { x1: x - s * 0.5, y1: y, x2: x + s * 0.5, y2: y, stroke: color, strokeWidth: 1.5 })
+      ] });
+    case "do":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("polygon", { points: `${x - s * 0.3},${y - s * 0.5} ${x + s * 0.5},${y} ${x - s * 0.3},${y + s * 0.5}`, fill: color })
+      ] });
+    case "if":
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: `${x},${y - s} ${x + s * 0.7},${y} ${x},${y + s} ${x - s * 0.7},${y}`,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5,
+          strokeLinejoin: "round"
+        }
+      );
+    case "log":
+      return /* @__PURE__ */ jsx(
+        "text",
+        {
+          x,
+          y,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          fill: color,
+          fontSize: s * 2.2,
+          fontFamily: "serif",
+          children: "\xB6"
+        }
+      );
+    default:
+      return null;
+  }
+}
+var clock = (x, y, s, color) => /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
+  /* @__PURE__ */ jsx("polyline", { points: `${x},${y - s * 0.6} ${x},${y} ${x + s * 0.5},${y + s * 0.3}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
+] });
+var neuron = (x, y, s, color) => /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx("line", { x1: x - s, y1: y - s * 0.6, x2: x + s * 0.8, y2: y, stroke: color, strokeWidth: 1 }),
+  /* @__PURE__ */ jsx("line", { x1: x - s, y1: y + s * 0.6, x2: x + s * 0.8, y2: y, stroke: color, strokeWidth: 1 }),
+  /* @__PURE__ */ jsx("circle", { cx: x - s, cy: y - s * 0.6, r: s * 0.3, fill: color }),
+  /* @__PURE__ */ jsx("circle", { cx: x - s, cy: y + s * 0.6, r: s * 0.3, fill: color }),
+  /* @__PURE__ */ jsx("circle", { cx: x + s * 0.8, cy: y, r: s * 0.35, fill: color })
+] });
+var gear = (x, y, s, color) => /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s * 0.75, fill: "none", stroke: color, strokeWidth: 1.5, strokeDasharray: `${s * 0.5} ${s * 0.3}` }),
+  /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s * 0.3, fill: color })
+] });
+var unknown = (x, y, s, color) => /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.2, strokeDasharray: "2 2" }),
+  /* @__PURE__ */ jsx("text", { x, y, textAnchor: "middle", dominantBaseline: "central", fill: color, fontSize: s * 1.4, children: "?" })
+] });
+var CATEGORY_GLYPH = {
+  ui: (x, y, s, c) => headIcon("render-ui", x, y, s, c),
+  data: (x, y, s, c) => headIcon("set", x, y, s, c),
+  communication: (x, y, s, c) => headIcon("emit", x, y, s, c),
+  lifecycle: (x, y, s, c) => headIcon("spawn", x, y, s, c),
+  control: (x, y, s, c) => headIcon("if", x, y, s, c),
+  async: clock,
+  compute: neuron,
+  system: gear
+};
+function effectIcon(type, x, y, s, color) {
+  const op = asEffectOperator(type);
+  const own = op ? headIcon(op, x, y, s, color) : null;
+  if (own) return own;
+  const category = effectCategoryOf(type);
+  if (category) return CATEGORY_GLYPH[category](x, y, s, color);
+  log2.error("unknown-effect-operator", { effectType: type });
+  return unknown(x, y, s, color);
+}
+var AvlEffect = ({
+  x = 0,
+  y = 0,
+  effectType,
+  size = 8,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className,
+  showBackground = false
+}) => {
+  const category = effectCategoryOf(effectType);
+  const catColors = category ? EFFECT_CATEGORY_COLORS[category] : null;
+  const iconColor = showBackground && catColors ? catColors.color : color;
+  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+    showBackground && catColors && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: size * 1.2, fill: catColors.bg }),
+      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: size * 1.2, fill: "none", stroke: catColors.color, strokeWidth: 0.5, opacity: 0.3 })
+    ] }),
+    effectIcon(effectType, x, y, size, iconColor),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + size + 10,
+        textAnchor: "middle",
+        fill: iconColor,
+        fontSize: 11,
+        fontWeight: 500,
+        fontFamily: "inherit",
+        opacity: 0.7,
+        children: label
+      }
+    )
+  ] });
+};
+AvlEffect.displayName = "AvlEffect";
 
-export { AVL_FONT, AVL_INK, AVL_STROKE, CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, STATE_COLORS, THEME_SERIES, asEffectOperator, avlBlend, avlSeries, avlTint, effectCategoryOf, effectZoneOf, getStateRole, parseComputedColor, resolveThemeColor };
+export { AVL_FONT, AVL_INK, AVL_STROKE, AvlEffect, CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, STATE_COLORS, THEME_SERIES, avlBlend, avlSeries, avlTint, effectCategoryOf, effectZoneOf, getStateRole, parseComputedColor, resolveThemeColor };

package/dist/{chunk-TXAUOLWZ.js → chunk-M74BCDBQ.js}

@@ -1,5 +1,5 @@
 import { traitLevelFromMounted } from './chunk-PCR37T3U.js';
-import { getStateRole } from './chunk-UXLE3IPR.js';
+import { getStateRole } from './chunk-FAKU5F62.js';
 import { useState, useLayoutEffect } from 'react';
 
 function useContainerWidth(ref) {