@almadar/shell-web 0.1.0 → 1.1.0

package/dist/{chunk-YDNJLLG6.js → chunk-57DC34LY.js}

@@ -1,5 +1,5 @@
-import { useDraggable, useDropZone } from './chunk-L2DEKY4J.js';
-import { Box, domPassthrough, useTranslate, Icon, pressableProps, Typography } from './chunk-MBQAMMSE.js';
+import { useDraggable, useDropZone } from './chunk-VO2TTLS5.js';
+import { Box, domPassthrough, useTranslate, Icon, pressableProps, Typography } from './chunk-4YXBKHHM.js';
 import React, { createContext, useState, useCallback, useRef, useEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -253,6 +253,9 @@ var FlatTreeNodeItem = ({
   const nav = look === "nav";
   const rowRef = useRef(null);
   const treeNav = useContext(TreeNavContext);
+  React.useEffect(() => {
+    if (isSelected) rowRef.current?.scrollIntoView({ block: "center" });
+  }, [isSelected]);
   const handleClick = useCallback(() => {
     if (hasChildren && !onNodeSelect) onToggle(item.id, expanded);
     onNodeSelect?.(item.id);
@@ -390,6 +393,7 @@ function ancestorsOf(id, byId) {
 var FlatFileTree = ({
   items,
   selectedId,
+  expandedPaths,
   look = "files",
   onNodeSelect,
   onNodeAction,
@@ -403,20 +407,24 @@ var FlatFileTree = ({
   const [overrides, setOverrides] = useState(() => /* @__PURE__ */ new Map());
   const byId = React.useMemo(() => new Map(items.map((node) => [node.id, node])), [items]);
   const selectedAncestors = React.useMemo(() => ancestorsOf(selectedId, byId), [selectedId, byId]);
-  const lastSelectedRef = React.useRef(selectedId);
+  const listedKey = (expandedPaths ?? []).join("\n");
+  const listed = React.useMemo(() => new Set(expandedPaths ?? []), [listedKey]);
+  const lastRevealRef = React.useRef(`${selectedId ?? ""}\0${listedKey}`);
   React.useEffect(() => {
-    if (selectedId === lastSelectedRef.current) return;
-    lastSelectedRef.current = selectedId;
+    const reveal = `${selectedId ?? ""}\0${listedKey}`;
+    if (reveal === lastRevealRef.current) return;
+    lastRevealRef.current = reveal;
+    const opened = [...selectedAncestors, ...listed];
     setOverrides((prev) => {
-      if (![...selectedAncestors].some((a) => prev.get(a) === false)) return prev;
+      if (!opened.some((a) => prev.get(a) === false)) return prev;
       const next = new Map(prev);
-      for (const a of selectedAncestors) if (next.get(a) === false) next.delete(a);
+      for (const a of opened) if (next.get(a) === false) next.delete(a);
       return next;
     });
-  }, [selectedId, selectedAncestors]);
+  }, [selectedId, selectedAncestors, listedKey, listed]);
   const isExpanded = useCallback(
-    (id, depth) => overrides.get(id) ?? (depth < 1 || selectedAncestors.has(id)),
-    [overrides, selectedAncestors]
+    (id, depth) => overrides.get(id) ?? (depth < 1 || selectedAncestors.has(id) || listed.has(id)),
+    [overrides, selectedAncestors, listed]
   );
   const onToggle = useCallback((id, effective) => {
     setOverrides((prev) => {
@@ -484,6 +492,7 @@ var FileTree = ({
         ...rest,
         items,
         selectedId,
+        expandedPaths,
         look,
         onNodeSelect,
         onNodeAction,

package/dist/{chunk-FP3WIKTC.js → chunk-7N6ZPHQ5.js}

@@ -1,4 +1,4 @@
-import { STATE_COLORS } from './chunk-DFNZUYX4.js';
+import { STATE_COLORS } from './chunk-FAKU5F62.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isTypeVariable } from '@almadar/core';
 
@@ -204,6 +204,14 @@ var FIELD_TYPE_SHAPES = {
   number: "triangle",
   int: "triangle",
   money: "triangle",
+  i8: "triangle",
+  i16: "triangle",
+  i32: "triangle",
+  u8: "triangle",
+  u16: "triangle",
+  u32: "triangle",
+  u64: "triangle",
+  f32: "triangle",
   boolean: "square",
   date: "diamond",
   timestamp: "diamond",

package/dist/{chunk-AILY3XPS.js → chunk-AE7VCQB6.js}

@@ -1,9 +1,9 @@
 import { resolveThemeForRuntime, themeTokensToCssVars } from './chunk-3BBUBJFF.js';
 import { useUISlotManager } from './chunk-YHMRX6YA.js';
-import { useThemeScope, useTheme, keyInViewerMode, ThemeScopeContext, Box, cn } from './chunk-MBQAMMSE.js';
+import { useThemeScope, useTheme, keyInViewerMode, ThemeScopeContext, Box, cn } from './chunk-4YXBKHHM.js';
 import { createContext, useMemo, useContext, useCallback, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { ANONYMOUS_USER, isThemeRegistryKey } from '@almadar/core';
+import { ANONYMOUS_USER, isThemeRegistryKey, toPayloadValue } from '@almadar/core';
 export { ANONYMOUS_USER } from '@almadar/core';
 import { createLogger } from '@almadar/logger';
 
@@ -127,8 +127,6 @@ function useUserForEvaluation() {
   const { user, isLoggedIn } = useUser();
   return isLoggedIn && user ? user : void 0;
 }
-
-// src/lib/design-classes.ts
 var DESIGN_COLOR_TOKENS = [
   "primary",
   "primary-foreground",
@@ -459,7 +457,7 @@ function collectClasses(value, found) {
 }
 function classesOfPart(part) {
   const found = /* @__PURE__ */ new Set();
-  collectClasses(JSON.parse(JSON.stringify(part)), found);
+  collectClasses(toPayloadValue(part), found);
   return [...found];
 }
 var classesByOrbital = /* @__PURE__ */ new WeakMap();
@@ -541,7 +539,8 @@ function OrbitalThemeProvider({ theme: declared, override, children }) {
   const darkTypeScale = resolvedMode === "dark" ? resolved?.variants?.dark?.typeScale : void 0;
   useFontImport(darkTypeScale?.fontImport ?? resolved?.tokens.typeScale?.fontImport);
   if (isThemeRegistryKey(theme)) {
-    const { key, mode: keyMode } = keyInViewerMode(theme, availableThemes, resolvedMode);
+    const inherited = !override && parent.override ? { key: parent.override, mode: parent.mode } : void 0;
+    const { key, mode: keyMode } = inherited ?? keyInViewerMode(theme, availableThemes, resolvedMode);
     const mode = keyMode ?? parent.mode;
     return /* @__PURE__ */ jsx(
       ThemeScopeContext.Provider,

package/dist/{chunk-L677XGY3.js → chunk-AGVSO4WY.js}

@@ -1,7 +1,6 @@
-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 { AvlFieldType, AvlState, AvlPage, AvlEntity } from './chunk-7N6ZPHQ5.js';
+import { OPERATOR_CATEGORY_COLORS, AvlEffect } from './chunk-FAKU5F62.js';
+import { useTranslate, Box, Typography, domPassthrough } from './chunk-4YXBKHHM.js';
 import React, { useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -637,7 +636,7 @@ var AVL_GLYPH_KINDS = [
   "sexpr",
   "literal"
 ];
-var HEIGHT = { sm: 32, md: 56, lg: 88 };
+var HEIGHT = { xs: 16, sm: 32, md: 56, lg: 88 };
 var PAD = 6;
 function Symbol({ kind, label, effectType, fieldType, persistence, namespace }) {
   switch (kind) {

package/dist/{chunk-FAJDTHWC.js → chunk-AGXD77SL.js}

@@ -1,4 +1,4 @@
-import { useEventBus, useTranslate, Box, VStack, Icon, cn, Typography, Button, domPassthrough } from './chunk-MBQAMMSE.js';
+import { useEventBus, useTranslate, Box, VStack, Icon, cn, Typography, Button, domPassthrough } from './chunk-4YXBKHHM.js';
 import { EMPTY_STATE_MARKER } from '@almadar/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -34,7 +34,7 @@ var EmptyState = ({
     onAction?.();
   };
   const iconName = typeof icon === "string" ? ICON_NAME_ALIASES[icon] ?? icon : void 0;
-  const iconComponent = typeof icon === "function" ? icon : void 0;
+  const iconComponent = typeof icon === "string" ? void 0 : icon;
   const hasIcon = Boolean(iconName || iconComponent);
   const isDestructive = destructive || variant === "error";
   const isSuccess = variant === "success";

package/dist/chunk-AU7O65OX.js

@@ -0,0 +1,66 @@
+import { applyFrame } from '@almadar/shell-runtime/kernel/frame-applier';
+
+function runTickFrame(ports, now) {
+  return applyFrame(ports.kernel.frame(now()), ports.client, ports.post);
+}
+function createTickDriver(ports) {
+  let handle;
+  let pending = false;
+  let stopped = true;
+  let unsubscribe;
+  const disarm = () => {
+    if (handle !== void 0) ports.cancelFrame(handle);
+    handle = void 0;
+  };
+  const arm = () => {
+    if (stopped || handle !== void 0 || ports.visibility.hidden()) return;
+    handle = ports.requestFrame(onFrame);
+  };
+  const runFrame = async () => {
+    const applied = await runTickFrame(ports, ports.now);
+    if (applied.firedCount > 0 || applied.errors.length > 0) ports.onApplied?.(applied);
+  };
+  function onFrame() {
+    handle = void 0;
+    if (stopped) return;
+    if (ports.kernel.tickCount() === 0) {
+      stopped = true;
+      unsubscribe?.();
+      unsubscribe = void 0;
+      return;
+    }
+    arm();
+    if (pending) return;
+    pending = true;
+    runFrame().catch((error) => ports.onError?.(error)).finally(() => {
+      pending = false;
+    });
+  }
+  const onVisibility = () => {
+    if (stopped) return;
+    if (ports.visibility.hidden()) {
+      ports.kernel.framePause();
+      disarm();
+    } else {
+      ports.kernel.frameResume();
+      arm();
+    }
+  };
+  return {
+    start() {
+      if (!stopped || ports.kernel.tickCount() === 0) return;
+      stopped = false;
+      unsubscribe = ports.visibility.onChange(onVisibility);
+      if (ports.visibility.hidden()) ports.kernel.framePause();
+      arm();
+    },
+    stop() {
+      stopped = true;
+      disarm();
+      unsubscribe?.();
+      unsubscribe = void 0;
+    }
+  };
+}
+
+export { createTickDriver, runTickFrame };

package/dist/{chunk-DFNZUYX4.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 = [
@@ -164,10 +165,6 @@ var EFFECT_OPERATOR_CATEGORY = {
   "persist": "data",
   "fetch": "data",
   "fetch-stream": "data",
-  "ref": "data",
-  "deref": "data",
-  "swap": "data",
-  "watch": "data",
   "emit": "communication",
   "notify": "communication",
   "send-server": "communication",
@@ -180,7 +177,6 @@ var EFFECT_OPERATOR_CATEGORY = {
   "when": "control",
   "let": "control",
   "log": "control",
-  "atomic": "control",
   "wait": "async",
   "prob/seed": "compute",
   "prob/condition": "compute",
@@ -191,6 +187,7 @@ var EFFECT_OPERATOR_CATEGORY = {
   "workspace/archive-orbital": "system",
   "behavior/catalog": "system",
   "behavior/describe": "system",
+  "behavior/packages": "system",
   "behavior/source": "system",
   "behavior/resolve": "system",
   "behavior/dependencies": "system",
@@ -198,27 +195,59 @@ var EFFECT_OPERATOR_CATEGORY = {
   "program/print": "system",
   "program/eval": "system",
   "program/validate": "system",
+  "program/prove": "system",
+  "program/os-grants": "system",
   "program/compose": "system",
   "program/step": "system",
+  "program/navigate": "system",
+  "program/resolve-rows": "system",
+  "program/self": "system",
+  "program/tick": "system",
   "program/inputs": "system",
   "program/dispatch": "system",
   "program/live": "system",
+  "program/open": "system",
+  "program/close": "system",
   "persist/read-named": "system",
-  "http": "communication",
-  "redis": "communication",
-  "postgres": "communication",
-  "oauth-authorize": "communication",
-  "oauth-connection-status": "communication",
-  "oauth-connection-forget": "communication",
   "credential-status": "system",
   "credential-forget": "system",
   "random-bytes": "compute",
+  "oauth-authorize": "system",
+  "oauth-connection-status": "system",
+  "oauth-connection-forget": "system",
   "credential-list": "system",
   "credential-set": "system",
   "credential-remove": "system",
   "credential-test": "system",
   "credential-mode": "system",
-  "credential-rotate": "system"
+  "credential-rotate": "system",
+  "credential-connect": "system",
+  "mem/arena-new": "system",
+  "mem/arena-drop": "system",
+  "mem/alloc": "system",
+  "mem/free": "system",
+  "mem/borrow": "system",
+  "mem/release": "system",
+  "mem/write": "system",
+  "mem/freeze": "system",
+  "mem/atomic-load": "system",
+  "mem/atomic-store": "system",
+  "mem/atomic-add": "system",
+  "mem/atomic-cas": "system",
+  "kernel/queue-front": "communication",
+  "kernel/queue-back": "communication",
+  "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",
@@ -228,7 +257,12 @@ var EFFECT_FAMILY_CATEGORY = {
   session: "system",
   trace: "control",
   memory: "data",
-  application: "system"
+  kv: "data",
+  application: "system",
+  audio: "ui",
+  auth: "system",
+  identity: "system",
+  theme: "ui"
 };
 var EFFECT_OPERATOR_ZONE = {
   "access-check": "system",
@@ -236,10 +270,6 @@ var EFFECT_OPERATOR_ZONE = {
   "navigate": "route",
   "navigate-back": "route",
   "set": "entity",
-  "swap": "entity",
-  "ref": "store",
-  "deref": "store",
-  "watch": "store",
   "persist": "store",
   "fetch": "store",
   "fetch-stream": "store",
@@ -255,7 +285,6 @@ var EFFECT_OPERATOR_ZONE = {
   "when": "flow",
   "let": "flow",
   "log": "flow",
-  "atomic": "flow",
   "wait": "timer",
   "prob/seed": "model",
   "prob/condition": "model",
@@ -266,6 +295,7 @@ var EFFECT_OPERATOR_ZONE = {
   "workspace/archive-orbital": "system",
   "behavior/catalog": "system",
   "behavior/describe": "system",
+  "behavior/packages": "system",
   "behavior/source": "system",
   "behavior/resolve": "system",
   "behavior/dependencies": "system",
@@ -273,27 +303,59 @@ var EFFECT_OPERATOR_ZONE = {
   "program/print": "system",
   "program/eval": "system",
   "program/validate": "system",
+  "program/prove": "system",
+  "program/os-grants": "system",
   "program/compose": "system",
   "program/step": "system",
+  "program/navigate": "system",
+  "program/resolve-rows": "system",
+  "program/self": "system",
+  "program/tick": "system",
   "program/inputs": "system",
   "program/dispatch": "system",
   "program/live": "system",
+  "program/open": "system",
+  "program/close": "system",
   "persist/read-named": "system",
-  "http": "remote",
-  "redis": "remote",
-  "postgres": "remote",
-  "oauth-authorize": "remote",
-  "oauth-connection-status": "remote",
-  "oauth-connection-forget": "remote",
   "credential-status": "system",
   "credential-forget": "system",
   "random-bytes": "system",
+  "oauth-authorize": "remote",
+  "oauth-connection-status": "remote",
+  "oauth-connection-forget": "remote",
   "credential-list": "system",
   "credential-set": "system",
   "credential-remove": "system",
   "credential-test": "system",
   "credential-mode": "system",
-  "credential-rotate": "system"
+  "credential-rotate": "system",
+  "credential-connect": "system",
+  "mem/arena-new": "system",
+  "mem/arena-drop": "system",
+  "mem/alloc": "system",
+  "mem/free": "system",
+  "mem/borrow": "system",
+  "mem/release": "system",
+  "mem/write": "system",
+  "mem/freeze": "system",
+  "mem/atomic-load": "system",
+  "mem/atomic-store": "system",
+  "mem/atomic-add": "system",
+  "mem/atomic-cas": "system",
+  "kernel/queue-front": "bus",
+  "kernel/queue-back": "bus",
+  "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",
@@ -303,7 +365,12 @@ var EFFECT_FAMILY_ZONE = {
   session: "system",
   trace: "flow",
   memory: "store",
-  application: "system"
+  kv: "store",
+  application: "system",
+  audio: "system",
+  auth: "remote",
+  identity: "remote",
+  theme: "system"
 };
 function isEffectOperator(head) {
   return head in EFFECT_OPERATOR_CATEGORY;
@@ -361,9 +428,16 @@ var OPERATOR_CATEGORY_COLORS = {
   "std-llm": avlBlend("var(--color-accent)", 70, "var(--color-primary)"),
   "std-workspace": avlBlend("var(--color-muted-foreground)", 60, "var(--color-warning)"),
   "std-session": avlBlend("var(--color-muted-foreground)", 60, "var(--color-success)"),
-  "std-memory": avlBlend("var(--color-info)", 60, "var(--color-accent)"),
+  "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];
@@ -374,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-U6QRZASX.js → chunk-ILQXJ2AR.js}

@@ -1,4 +1,4 @@
-import { cn, Typography, useTranslate, VStack, HStack, Icon, Button, Switch, Input } from './chunk-MBQAMMSE.js';
+import { cn, Typography, useTranslate, VStack, HStack, Icon, Button, Switch, Input } from './chunk-4YXBKHHM.js';
 import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';