@almadar/shell-web 1.0.0 → 1.2.0

package/dist/{chunk-AE7VCQB6.js → chunk-2LNXLMK3.js}

@@ -1,6 +1,6 @@
 import { resolveThemeForRuntime, themeTokensToCssVars } from './chunk-3BBUBJFF.js';
-import { useUISlotManager } from './chunk-YHMRX6YA.js';
-import { useThemeScope, useTheme, keyInViewerMode, ThemeScopeContext, Box, cn } from './chunk-4YXBKHHM.js';
+import { useUISlotManager } from './chunk-ANTJUQRD.js';
+import { useThemeScope, useTheme, keyInViewerMode, ThemeScopeContext, Box, cn } from './chunk-D5FJU4XC.js';
 import { createContext, useMemo, useContext, useCallback, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { ANONYMOUS_USER, isThemeRegistryKey, toPayloadValue } from '@almadar/core';

package/dist/{chunk-REXYVBUO.js → chunk-3DA36FOA.js}

@@ -1,5 +1,5 @@
 import { traitLevelFromDescription } from './chunk-PCR37T3U.js';
-import { useContentSurface, useEventBus, Typography, Icon, cn, domPassthrough } from './chunk-4YXBKHHM.js';
+import { useContentSurface, useEventBus, Typography, Icon, cn, domPassthrough } from './chunk-D5FJU4XC.js';
 import { useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-UXLE3IPR.js → chunk-3UQNFRYV.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",
@@ -365,12 +390,9 @@ function effectCategoryOf(head) {
 function asEffectOperator(head) {
   return isEffectOperator(head) ? head : null;
 }
-var PENDING_STD_CATEGORY_COLORS = {
-  "std-behavior-value": avlBlend("var(--color-accent)", 40, "var(--color-success)"),
-  "std-program": avlBlend("var(--color-accent)", 60, "var(--color-info)")
-};
 var OPERATOR_CATEGORY_COLORS = {
-  ...PENDING_STD_CATEGORY_COLORS,
+  "std-behavior-value": avlBlend("var(--color-accent)", 40, "var(--color-success)"),
+  "std-program": avlBlend("var(--color-accent)", 60, "var(--color-info)"),
   "arithmetic": "var(--color-primary)",
   "comparison": "var(--color-warning)",
   "logic": "var(--color-accent)",
@@ -406,7 +428,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 +445,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-AGXD77SL.js → chunk-3YUMGEEW.js}

@@ -1,4 +1,4 @@
-import { useEventBus, useTranslate, Box, VStack, Icon, cn, Typography, Button, domPassthrough } from './chunk-4YXBKHHM.js';
+import { useEventBus, useTranslate, Box, VStack, Icon, cn, Typography, Button, domPassthrough } from './chunk-D5FJU4XC.js';
 import { EMPTY_STATE_MARKER } from '@almadar/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-K4MOPSEL.js → chunk-6RXP5ZXE.js}

@@ -1,12 +1,11 @@
-import { JsonTreeEditor } from './chunk-ILQXJ2AR.js';
-import { transitionPlayback, Accordion } from './chunk-REXYVBUO.js';
-import { EmptyState } from './chunk-AGXD77SL.js';
-import { useContainerWidth, roundedEdgePath } from './chunk-TXAUOLWZ.js';
-import { AvlExplain, AvlEffectChip } from './chunk-AB3X7QTE.js';
-import { AvlEffect } from './chunk-DZBQA2OW.js';
+import { JsonTreeEditor } from './chunk-JEN4EIUF.js';
+import { transitionPlayback, Accordion } from './chunk-3DA36FOA.js';
+import { EmptyState } from './chunk-3YUMGEEW.js';
+import { useContainerWidth, roundedEdgePath } from './chunk-HA2BYO5E.js';
 import { parseTraitLevel } from './chunk-PCR37T3U.js';
-import { AVL_INK, AVL_FONT, effectZoneOf, avlTint, OPERATOR_CATEGORY_COLORS, avlBlend } from './chunk-UXLE3IPR.js';
-import { useTranslate, useMediaQuery, Box, Typography, Card, VStack, HStack, Badge, Button } from './chunk-4YXBKHHM.js';
+import { AvlExplain, AvlEffectChip } from './chunk-V5SVGUYN.js';
+import { AVL_INK, AVL_FONT, effectZoneOf, avlTint, AvlEffect, OPERATOR_CATEGORY_COLORS, avlBlend } from './chunk-3UQNFRYV.js';
+import { useTranslate, useMediaQuery, Box, Typography, Card, VStack, HStack, Badge, Button } from './chunk-D5FJU4XC.js';
 import { useRef, useMemo, useState } from 'react';
 import { formatSExpr, JsonValueSchema, isJsonObject, isBinding } from '@almadar/core';
 import { operatorVisualForm, getStdOperatorMeta } from '@almadar/std/registry';

package/dist/{chunk-E6KA4J6N.js → chunk-7UCL26QB.js}

@@ -1,8 +1,7 @@
-import { AvlState, AvlEntity, AvlFieldType, AvlPage } from './chunk-HH5KSMH5.js';
-import { AvlExplain, useEffectLines } from './chunk-AB3X7QTE.js';
-import { AvlEffect } from './chunk-DZBQA2OW.js';
-import { getStateRole, CONNECTION_COLORS } from './chunk-UXLE3IPR.js';
-import { useTranslate, Box, cn, domPassthrough } from './chunk-4YXBKHHM.js';
+import { AvlState, AvlEntity, AvlFieldType, AvlPage } from './chunk-DPDKBY6Z.js';
+import { AvlExplain, useEffectLines } from './chunk-V5SVGUYN.js';
+import { getStateRole, AvlEffect, CONNECTION_COLORS } from './chunk-3UQNFRYV.js';
+import { useTranslate, Box, cn, domPassthrough } from './chunk-D5FJU4XC.js';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
 import React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

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

@@ -1,5 +1,5 @@
-import { useDraggable, useDropZone } from './chunk-VO2TTLS5.js';
-import { Box, domPassthrough, useTranslate, Icon, pressableProps, Typography } from './chunk-4YXBKHHM.js';
+import { useDraggable, useDropZone } from './chunk-GHAF7QUD.js';
+import { Box, domPassthrough, useTranslate, Icon, pressableProps, Typography } from './chunk-D5FJU4XC.js';
 import React, { createContext, useState, useCallback, useRef, useEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-YHMRX6YA.js → chunk-ANTJUQRD.js}

@@ -1,5 +1,5 @@
-import { isNotificationSlot } from './chunk-P4ZFUQFF.js';
-import React, { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { isNotificationSlot } from './chunk-AZ74UPG6.js';
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { RENDERED_SLOTS, isRenderBindingMarker } from '@almadar/core';
 import { createLogger } from '@almadar/logger';
 
@@ -35,6 +35,10 @@ function isPlainSlotObject(value) {
   if (isRenderBindingMarker(value)) return false;
   return true;
 }
+function elementRef(element) {
+  const props = element.props;
+  return props?.ref ?? element.ref;
+}
 function shareValue(prev, next) {
   if (Object.is(prev, next)) return { value: prev, equal: true };
   const prevMarker = isRenderBindingMarker(prev) ? prev : void 0;
@@ -49,6 +53,11 @@ function shareValue(prev, next) {
     return prev instanceof Date && next instanceof Date && prev.getTime() === next.getTime() ? { value: prev, equal: true } : { value: next, equal: false };
   }
   if (typeof prev === "function" || typeof next === "function") return { value: next, equal: false };
+  if (React.isValidElement(prev) && React.isValidElement(next)) {
+    if (prev.type !== next.type || prev.key !== next.key || elementRef(prev) !== elementRef(next)) return { value: next, equal: false };
+    const props = shareValue(prev.props, next.props);
+    return props.equal ? { value: prev, equal: true } : { value: next, equal: false };
+  }
   if (React.isValidElement(prev) || React.isValidElement(next)) return { value: next, equal: false };
   if (Array.isArray(prev) && Array.isArray(next)) {
     let equal = prev.length === next.length;
@@ -98,6 +107,7 @@ var DEFAULT_SLOTS = ALL_SLOTS.reduce(
   },
   {}
 );
+var NO_DECLARED_ORDER = /* @__PURE__ */ new Map();
 var DEFAULT_SOURCES = ALL_SLOTS.reduce(
   (acc, slot) => {
     acc[slot] = {};
@@ -105,9 +115,11 @@ var DEFAULT_SOURCES = ALL_SLOTS.reduce(
   },
   {}
 );
-function aggregateSlot(sources) {
+function aggregateSlot(sources, declaredOrder) {
   if (!sources) return null;
-  const entries = Object.entries(sources);
+  const entries = Object.entries(sources).sort(
+    ([a], [b]) => (declaredOrder.get(a) ?? Infinity) - (declaredOrder.get(b) ?? Infinity) || 0
+  );
   if (entries.length === 0) return null;
   if (entries.length === 1) return entries[0][1];
   const children = entries.map(
@@ -144,14 +156,24 @@ function useUISlotManager() {
   const subscribersRef = useRef(/* @__PURE__ */ new Set());
   const timersRef = useRef(/* @__PURE__ */ new Map());
   const traitIndexRef = useRef(/* @__PURE__ */ new Map());
+  const lastWriteRef = useRef(/* @__PURE__ */ new Map());
+  const [declaredOrder, setDeclaredOrder] = useState(NO_DECLARED_ORDER);
+  const declaredOrderRef = useRef(NO_DECLARED_ORDER);
+  const setDeclaredTraitOrder = useCallback((traits) => {
+    const next = new Map(traits.map((trait, index) => [trait, index]));
+    const held = declaredOrderRef.current;
+    if (held.size === next.size && [...next].every(([trait, index]) => held.get(trait) === index)) return;
+    declaredOrderRef.current = next;
+    setDeclaredOrder(next);
+  }, []);
   const traitSubscribersRef = useRef(/* @__PURE__ */ new Map());
   const slots = useMemo(() => {
     const out = { ...DEFAULT_SLOTS };
     for (const slot of ALL_SLOTS) {
-      out[slot] = aggregateSlot(sources[slot]);
+      out[slot] = aggregateSlot(sources[slot], declaredOrder);
     }
     return out;
-  }, [sources]);
+  }, [sources, declaredOrder]);
   useEffect(() => {
     return () => {
       timersRef.current.forEach((timer) => clearTimeout(timer));
@@ -206,6 +228,13 @@ function useUISlotManager() {
         fromState: config.fromState,
         entity: config.entity
       };
+      const writeKey = `${config.target}\0${sourceKey}`;
+      const last = lastWriteRef.current.get(writeKey);
+      if (last && !(config.autoDismissMs && config.autoDismissMs > 0) && last.autoDismissAt === void 0 && last.priority === content.priority && last.pattern === content.pattern && last.transitionEvent === content.transitionEvent && last.fromState === content.fromState && last.entity === content.entity && last.nodeId === content.nodeId && last.onDismiss === void 0 === (content.onDismiss === void 0) && reconcileSlotProps(last.props, content.props).equal) {
+        log.debug("slot:write-unchanged", { slot: config.target, sourceKey, pattern: content.pattern });
+        return id;
+      }
+      lastWriteRef.current.set(writeKey, content);
       if (config.autoDismissMs && config.autoDismissMs > 0) {
         content.autoDismissAt = Date.now() + config.autoDismissMs;
         const prevTimer = timersRef.current.get(id);
@@ -218,7 +247,7 @@ function useUISlotManager() {
               const next = { ...slotSources };
               delete next[sourceKey];
               const updated = { ...prev, [config.target]: next };
-              notifySubscribers(config.target, aggregateSlot(next));
+              notifySubscribers(config.target, aggregateSlot(next, declaredOrderRef.current));
               return updated;
             }
             return prev;
@@ -271,7 +300,7 @@ function useUISlotManager() {
           patternType: content.pattern,
           priority: content.priority
         });
-        notifySubscribers(config.target, aggregateSlot(nextSources));
+        notifySubscribers(config.target, aggregateSlot(nextSources, declaredOrderRef.current));
         return nextAll;
       });
       return id;
@@ -280,6 +309,7 @@ function useUISlotManager() {
   );
   const clear = useCallback(
     (slot) => {
+      for (const key of [...lastWriteRef.current.keys()]) if (key.startsWith(`${slot}\0`)) lastWriteRef.current.delete(key);
       setSources((prev) => {
         const slotSources = prev[slot];
         if (!slotSources || Object.keys(slotSources).length === 0) {
@@ -306,6 +336,7 @@ function useUISlotManager() {
   const clearBySource = useCallback(
     (slot, sourceTrait) => {
       const sourceKey = sourceTrait;
+      lastWriteRef.current.delete(`${slot}\0${sourceKey}`);
       setSources((prev) => {
         const slotSources = prev[slot];
         if (!slotSources || !(sourceKey in slotSources)) {
@@ -333,7 +364,7 @@ function useUISlotManager() {
         const nextSources = { ...slotSources };
         delete nextSources[sourceKey];
         log.info("slot:cleared", { slot, sourceTrait, lastPatternType: content.pattern });
-        notifySubscribers(slot, aggregateSlot(nextSources));
+        notifySubscribers(slot, aggregateSlot(nextSources, declaredOrderRef.current));
         return { ...prev, [slot]: nextSources };
       });
     },
@@ -341,6 +372,7 @@ function useUISlotManager() {
   );
   const clearById = useCallback(
     (id) => {
+      for (const [key, written] of [...lastWriteRef.current]) if (written.id === id) lastWriteRef.current.delete(key);
       setSources((prev) => {
         for (const slot of ALL_SLOTS) {
           const slotSources = prev[slot];
@@ -362,7 +394,7 @@ function useUISlotManager() {
           }
           const nextSources = { ...slotSources };
           delete nextSources[matchKey];
-          notifySubscribers(slot, aggregateSlot(nextSources));
+          notifySubscribers(slot, aggregateSlot(nextSources, declaredOrderRef.current));
           return { ...prev, [slot]: nextSources };
         }
         return prev;
@@ -371,6 +403,7 @@ function useUISlotManager() {
     [notifySubscribers, notifyTraitSubscribers, unindexTrait]
   );
   const clearAll = useCallback(() => {
+    lastWriteRef.current.clear();
     timersRef.current.forEach((timer) => clearTimeout(timer));
     timersRef.current.clear();
     setSources((prev) => {
@@ -430,13 +463,19 @@ function useUISlotManager() {
     (traitName, content) => {
       const id = `slot-content-trait-${traitName}`;
       const fullContent = { ...content, id, sourceTrait: traitName };
+      const existing = traitIndexRef.current.get(traitName);
+      if (existing && existing.slot === fullContent.slot && existing.priority === fullContent.priority && existing.pattern === fullContent.pattern && existing.transitionEvent === fullContent.transitionEvent && existing.fromState === fullContent.fromState && existing.entity === fullContent.entity && existing.nodeId === fullContent.nodeId) {
+        const reconciled = reconcileSlotProps(existing.props, fullContent.props);
+        if (reconciled.equal) return id;
+        fullContent.props = reconciled.value;
+      }
       indexTraitRender(traitName, fullContent);
       notifyTraitSubscribers(traitName, fullContent);
       return id;
     },
     [indexTraitRender, notifyTraitSubscribers]
   );
-  return {
+  return useMemo(() => ({
     slots,
     render,
     clear,
@@ -448,8 +487,9 @@ function useUISlotManager() {
     getContent,
     getTraitContent,
     subscribeTrait,
-    updateTraitContent
-  };
+    updateTraitContent,
+    setDeclaredTraitOrder
+  }), [slots, render, clear, clearBySource, clearById, clearAll, subscribe, hasContent, getContent, getTraitContent, subscribeTrait, updateTraitContent, setDeclaredTraitOrder]);
 }
 
 export { ALL_SLOTS, DEFAULT_SLOTS, useUISlotManager };

package/dist/{chunk-P4ZFUQFF.js → chunk-AZ74UPG6.js}

@@ -82,6 +82,9 @@ function isPortalSlot(slot) {
 function isNotificationSlot(slot) {
   return SLOT_DEFINITIONS[slot]?.notification === true;
 }
+function paintsInTraitFrame(traitEmbedded, slot) {
+  return traitEmbedded && !isNotificationSlot(slot);
+}
 function getSlotsByType(type) {
   return Object.entries(SLOT_DEFINITIONS).filter(([, def]) => def?.type === type).map(([name]) => name);
 }
@@ -90,4 +93,4 @@ function getInlineSlots() {
 }
 var ALL_SLOTS = Object.keys(SLOT_DEFINITIONS);
 
-export { ALL_SLOTS, SLOT_DEFINITIONS, getInlineSlots, getSlotDefinition, isNotificationSlot, isPortalSlot };
+export { ALL_SLOTS, SLOT_DEFINITIONS, getInlineSlots, getSlotDefinition, isNotificationSlot, isPortalSlot, paintsInTraitFrame };

package/dist/{chunk-ROICKAU7.js → chunk-B23EZH2P.js}

@@ -1,6 +1,6 @@
-import { AvlStateMachine } from './chunk-SP5CDJ6K.js';
-import { EmptyState } from './chunk-AGXD77SL.js';
-import { useTranslate, Box, domPassthrough } from './chunk-4YXBKHHM.js';
+import { AvlStateMachine } from './chunk-RDPELAFQ.js';
+import { EmptyState } from './chunk-3YUMGEEW.js';
+import { useTranslate, Box, domPassthrough } from './chunk-D5FJU4XC.js';
 import { jsx } from 'react/jsx-runtime';
 
 var BehaviorView = ({ data, ...rest }) => {

package/dist/{chunk-CPLN6NBQ.js → chunk-CCO2ZH7F.js}

@@ -1,7 +1,6 @@
-import { AvlFieldType, AvlState, AvlPage, AvlEntity } from './chunk-HH5KSMH5.js';
-import { AvlEffect } from './chunk-DZBQA2OW.js';
-import { OPERATOR_CATEGORY_COLORS } from './chunk-UXLE3IPR.js';
-import { useTranslate, Box, Typography, domPassthrough } from './chunk-4YXBKHHM.js';
+import { AvlFieldType, AvlState, AvlPage, AvlEntity } from './chunk-DPDKBY6Z.js';
+import { OPERATOR_CATEGORY_COLORS, AvlEffect } from './chunk-3UQNFRYV.js';
+import { useTranslate, Box, Typography, domPassthrough } from './chunk-D5FJU4XC.js';
 import React, { useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';