@almadar/ui 6.53.1 → 6.55.0

package/dist/avl/index.js

@@ -1,648 +1,35 @@
-import { zoomReducer, initialZoomState, getBreadcrumbs } from '../chunk-FUQASYEW.js';
-import { JsonTreeEditor } from '../chunk-UOTYAPV5.js';
-import { useTranslate as useTranslate$1 } from '../chunk-E37BYSXY.js';
-import { spacingTokenOf, positionOf, withPosition, snapToSpacingStep, defaultSpacingStepPx, spacingOf, withSizing, withSpacing, layoutOf, withLayout, sizingOf, DESIGN_COLOR_TOKENS, DESIGN_RADIUS_TOKENS, DESIGN_SPACING_SCALE, sizeLimitOf, withSizeLimit, isArbitraryClass, tokenOfDesignClass } from '../chunk-ERXIHZW3.js';
-import { BrowserPlayground, collectEmbeddedTraits } from '../chunk-53VTY5CC.js';
-import '../chunk-DQTV6QVS.js';
+import { BrowserPlayground, collectEmbeddedTraits } from '../chunk-FQM37C56.js';
+import { zoomReducer, initialZoomState, getBreadcrumbs } from '../chunk-SGJHVPHC.js';
+import { JsonTreeEditor } from '../chunk-F4ZTPKZL.js';
+import { useTranslate as useTranslate$1 } from '../chunk-QGH4NAQO.js';
 import '../chunk-VHTJRS2N.js';
-import { Popover, Button, Icon, Select, Badge, IconButton, AvlStateMachine, Input, AvlFieldType, AvlEffect, AvlState, AvlPage, AvlEntity, useContainerWidth, useAlmadarDndSensors, almadarDndCollisionDetection, TagInput, Checkbox, Switch, CodeBlock, FileTree, Card, Accordion, RangeSlider, computeTraitLayout, edgePath, FormField, Radio, useCompactLayout, ButtonGroup, roundedEdgePath } from '../chunk-HUG25TT3.js';
-export { AvlEffect, AvlEntity, AvlFieldType, AvlPage, AvlState, AvlStateMachine, BehaviorView, FIELD_TYPE_SHAPES, MiniStateMachine, ModuleCard, computeTraitLayout, edgePath } from '../chunk-HUG25TT3.js';
-import '../chunk-PQKU62LK.js';
-import { avlSeries, STATE_COLORS, Box, HStack, VStack, avlTint, CONNECTION_COLORS, parseTraitLevel, OPERATOR_CATEGORY_COLORS, AVL_INK, AVL_FONT, parseApplicationLevel, parseOrbitalLevel, getStateRole, effectCategoryOf, EFFECT_CATEGORY_COLORS, pressableProps, traitTransitionRenderUi, traitEventWires, effectZoneOf, avlBlend } from '../chunk-7LM6I3NA.js';
-export { CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, STATE_COLORS, effectCategoryOf, getStateRole, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, traitLevelFromTrait } from '../chunk-7LM6I3NA.js';
-import { Typography, INLINE_TEXT_ATTR } from '../chunk-HB4C27KU.js';
+import { spacingTokenOf, positionOf, withPosition, snapToSpacingStep, defaultSpacingStepPx, spacingOf, withSizing, withSpacing, layoutOf, withLayout, sizingOf, DESIGN_COLOR_TOKENS, DESIGN_RADIUS_TOKENS, DESIGN_SPACING_SCALE, sizeLimitOf, withSizeLimit, isArbitraryClass, tokenOfDesignClass } from '../chunk-D2E44ODB.js';
+import { AvlGlyph, Popover, Button, Icon, Select, Badge, IconButton, AvlStateMachine, Input, useContainerWidth, AvlOrbital, AvlTrait, AvlEntity, AvlPage, AvlEvent, AvlGuard, AvlEffect, AvlState, useAlmadarDndSensors, almadarDndCollisionDetection, TagInput, Checkbox, Switch, CodeBlock, AvlFieldType, FileTree, Card, Accordion, RangeSlider, computeTraitLayout, edgePath, FormField, Radio, useCompactLayout, ButtonGroup, roundedEdgePath } from '../chunk-XZKGRSIO.js';
+export { AVL_GLYPH_KINDS, AvlApplication, AvlBinding, AvlBindingRef, AvlEffect, AvlEntity, AvlEvent, AvlField, AvlFieldType, AvlGlyph, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlPage, AvlPersistence, AvlSExpr, AvlState, AvlStateMachine, AvlTrait, AvlTransition, BehaviorView, FIELD_TYPE_SHAPES, MiniStateMachine, ModuleCard, computeTraitLayout, edgePath } from '../chunk-XZKGRSIO.js';
+import { avlSeries, STATE_COLORS, Box, HStack, VStack, avlTint, CONNECTION_COLORS, parseTraitLevel, AVL_INK, AVL_FONT, parseApplicationLevel, parseOrbitalLevel, getStateRole, effectCategoryOf, EFFECT_CATEGORY_COLORS, pressableProps, traitTransitionRenderUi, traitEventWires, effectZoneOf, OPERATOR_CATEGORY_COLORS, avlBlend } from '../chunk-Y53Q55H5.js';
+export { CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, STATE_COLORS, effectCategoryOf, getStateRole, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, traitLevelFromTrait } from '../chunk-Y53Q55H5.js';
+import { Typography, INLINE_TEXT_ATTR } from '../chunk-HCSJHRC4.js';
 import { usePrefersReducedMotion, useMediaQuery } from '../chunk-JRW33U35.js';
 import '../chunk-XJTHMW4G.js';
 import { useEventBus } from '../chunk-6EV3OEBQ.js';
-import '../chunk-PEST66PN.js';
 import { profilerOnRender, perfStart, perfEnd } from '../chunk-KQXXO42S.js';
-import { isEditableTarget } from '../chunk-O7OLVVBR.js';
-import { domPassthrough, cn } from '../chunk-64WACXM7.js';
-import '../chunk-QVXLKFUQ.js';
-import '../chunk-7KSLPY56.js';
+import { isEditableTarget } from '../chunk-Q47ZN2DW.js';
+import { cn } from '../chunk-64WACXM7.js';
+import '../chunk-RNY5LJXJ.js';
+import '../chunk-HRCR53OW.js';
+import '../chunk-PQKU62LK.js';
+import '../chunk-PEST66PN.js';
 import '../chunk-QPXIAUJD.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React19, { createContext, useContext, useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect, Profiler, useReducer } from 'react';
+import React17, { createContext, useContext, useState, useRef, useCallback, useMemo, useEffect, Profiler, useReducer } from 'react';
 import { FieldTypeSchema, EFFECT_OPERATORS, isInlineTrait, isPageReference, navigatePatternPath, isAriaRole, formatSExpr, answerToMutations, isBinding } from '@almadar/core';
 import { operatorVisualForm, getStdOperatorMeta } from '@almadar/std/registry';
 import { useTranslate } from '@almadar/ui/hooks';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { MarkerType, Handle, Position, useReactFlow, NodeResizeControl, ResizeControlVariant, getBezierPath, EdgeLabelRenderer, BaseEdge, ReactFlow, Controls, Background, BackgroundVariant, ReactFlowProvider, useNodesState, useEdgesState, useNodesInitialized } from '@xyflow/react';
 import { renderUiEntriesOf, getPatternDefinition, isEntityAwarePattern, eventKeyPropsOf, eventListPropsOf } from '@almadar/core/patterns';
 import { createLogger } from '@almadar/logger';
 import { useDroppable, useDraggable, DndContext, DragOverlay } from '@dnd-kit/core';
 
-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 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 avlTransitionId = 0;
-var AvlTransition = ({
-  x1,
-  y1,
-  x2,
-  y2,
-  curved = false,
-  curveAwayFrom,
-  label,
-  color = "var(--color-primary)",
-  opacity = 1,
-  className
-}) => {
-  const ids = React19.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: size2 = 16,
-  label,
-  color = "var(--color-primary)",
-  opacity = 1,
-  className
-}) => {
-  const s = size2 / 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 + size2 / 2 + 12,
-        textAnchor: "middle",
-        fill: color,
-        fontSize: 9,
-        fontFamily: "inherit",
-        children: label
-      }
-    )
-  ] });
-};
-AvlEvent.displayName = "AvlEvent";
-var AvlGuard = ({
-  x = 0,
-  y = 0,
-  size: size2 = 24,
-  label,
-  color = "var(--color-primary)",
-  opacity = 1,
-  className
-}) => {
-  const h = size2 / 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 PERSISTENCE_STROKE = {
-  persistent: { strokeWidth: 2.5 },
-  runtime: { strokeDasharray: "6 3", strokeWidth: 2 }
-};
-var AvlPersistence = ({
-  x = 0,
-  y = 0,
-  kind,
-  size: size2 = 20,
-  label,
-  color = "var(--color-primary)",
-  opacity = 1,
-  className
-}) => {
-  const half = size2 / 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: size2 = 16,
-  color,
-  opacity = 1,
-  className
-}) => {
-  const opColor2 = color ?? OPERATOR_CATEGORY_COLORS[namespace];
-  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: x - size2,
-        y: y - size2 * 0.7,
-        width: size2 * 2,
-        height: size2 * 1.4,
-        rx: 4,
-        ry: 4,
-        fill: opColor2,
-        fillOpacity: 0.15,
-        stroke: opColor2,
-        strokeWidth: 1.5
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x,
-        y: y + 1,
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        fill: opColor2,
-        fontSize: size2 > 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: size2 = 12,
-  color = "var(--color-primary)",
-  opacity = 1,
-  className
-}) => {
-  return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        cx: x,
-        cy: y,
-        r: size2,
-        fill: "none",
-        stroke: color,
-        strokeWidth: 1,
-        opacity: 0.5
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x,
-        y: y + 1,
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        fill: color,
-        fontSize: size2 > 10 ? 9 : 7,
-        fontFamily: "inherit",
-        children: value
-      }
-    )
-  ] });
-};
-AvlLiteral.displayName = "AvlLiteral";
-var AvlBindingRef = ({
-  x = 0,
-  y = 0,
-  path,
-  size: size2 = 12,
-  color = "var(--color-primary)",
-  opacity = 1,
-  className
-}) => {
-  const fullLabel = `@${path}`;
-  const autoR = Math.max(size2, 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 MONO = 7.4;
 var ROW = 40;
 var GAP_X = 112;
@@ -1225,86 +612,6 @@ var AvlCircuit = ({ expr, trace, cursor, title, showCode = true, className }) =>
   ] });
 };
 AvlCircuit.displayName = "AvlCircuit";
-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 PAD2 = 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: size2 = "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 - PAD2, y: b.y - PAD2, w: b.width + 2 * PAD2, h: b.height + 2 * PAD2 });
-  }, [kind, label, variant.effectType, variant.fieldType, variant.persistence, variant.namespace]);
-  const height = HEIGHT[size2];
-  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";
 var avlOuId = 0;
 var AvlOrbitalUnit = ({
   entityName,
@@ -1316,7 +623,7 @@ var AvlOrbitalUnit = ({
   color = "var(--color-primary)",
   animated = false
 }) => {
-  const ids = React19.useMemo(() => {
+  const ids = React17.useMemo(() => {
     avlOuId += 1;
     const base = `avl-ou-${avlOuId}`;
     return { glow: `${base}-glow`, grad: `${base}-grad` };
@@ -1473,7 +780,7 @@ var AvlClosedCircuit = ({
   color = "var(--color-primary)",
   animated = false
 }) => {
-  const ids = React19.useMemo(() => {
+  const ids = React17.useMemo(() => {
     avlCcId += 1;
     const base = `avl-cc-${avlCcId}`;
     return { glow: `${base}-glow`, grad: `${base}-grad`, arrow: `${base}-arrow` };
@@ -1626,7 +933,7 @@ var AvlEmitListen = ({
   color = "var(--color-primary)",
   animated = false
 }) => {
-  const ids = React19.useMemo(() => {
+  const ids = React17.useMemo(() => {
     avlElId += 1;
     const base = `avl-el-${avlElId}`;
     return { arrow: `${base}-arrow`, grad: `${base}-grad` };
@@ -1900,7 +1207,7 @@ function renderNode(node, color, glowId) {
   const baseR = node.type === "operator" ? 20 : 16;
   const r = Math.max(baseR, labelLen * 3.5 + 6);
   const nc = nodeColor(node.type, color);
-  return /* @__PURE__ */ jsxs(React19.Fragment, { children: [
+  return /* @__PURE__ */ jsxs(React17.Fragment, { children: [
     node.children.map((child, i) => {
       const childR = Math.max(
         child.type === "operator" ? 20 : 16,
@@ -1957,7 +1264,7 @@ var AvlExprTree = ({
   className,
   color = "var(--color-primary)"
 }) => {
-  const ids = React19.useMemo(() => {
+  const ids = React17.useMemo(() => {
     avlEtId += 1;
     return { glow: `avl-et-${avlEtId}-glow` };
   }, []);
@@ -2788,14 +2095,14 @@ var SystemNodeInner = ({ data }) => {
     }
   );
 };
-var SystemNode = React19.memo(SystemNodeInner);
+var SystemNode = React17.memo(SystemNodeInner);
 SystemNode.displayName = "SystemNode";
 var SystemBandNodeInner = ({ data }) => {
   const d = data;
   const { t } = useTranslate();
   return /* @__PURE__ */ jsx(Box, { "data-testid": `avl-system-band-${d.bandKind}`, className: "pointer-events-none whitespace-nowrap", children: /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "muted", children: t(d.bandKind === "connected" ? "avl.system.connected" : "avl.system.standalone", { count: d.bandCount ?? 0 }) }) });
 };
-var SystemBandNode = React19.memo(SystemBandNodeInner);
+var SystemBandNode = React17.memo(SystemBandNodeInner);
 SystemBandNode.displayName = "SystemBandNode";
 var DEPENDENCY_ROLE_CLASS = {
   selected: "border-primary bg-primary/25 text-foreground ring-2 ring-primary/40",
@@ -2853,14 +2160,14 @@ var DependencyNodeInner = ({ id, data }) => {
     }
   );
 };
-var DependencyNode = React19.memo(DependencyNodeInner);
+var DependencyNode = React17.memo(DependencyNodeInner);
 DependencyNode.displayName = "DependencyNode";
 var DependencyColumnNodeInner = ({ data }) => {
   const d = data;
   const { t } = useTranslate();
   return /* @__PURE__ */ jsx(Box, { "data-testid": `avl-dependency-column-${d.dependencyColumn}`, className: "pointer-events-none whitespace-nowrap", children: /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "muted", children: t(`avl.deps.column.${d.dependencyColumn ?? "unknown"}`) }) });
 };
-var DependencyColumnNode = React19.memo(DependencyColumnNodeInner);
+var DependencyColumnNode = React17.memo(DependencyColumnNodeInner);
 DependencyColumnNode.displayName = "DependencyColumnNode";
 var DetailView = ({ data }) => {
   const { t } = useTranslate();
@@ -4102,11 +3409,11 @@ function marqueeHits(marquee, boxes) {
   );
 }
 function axisPositionFrom(axis, constraint, offset) {
-  const start = offset ? axis === "x" ? offset.left : offset.top : 0;
-  const end = offset ? axis === "x" ? offset.right : offset.bottom : 0;
+  const start = axis === "x" ? offset.left : offset.top;
+  const end = axis === "x" ? offset.right : offset.bottom;
   if (constraint === "center") return { constraint, start: (start - end) / 2, end: 0 };
   if (constraint !== "scale") return { constraint, start, end };
-  const size2 = offset ? axis === "x" ? offset.parentWidth : offset.parentHeight : 0;
+  const size2 = axis === "x" ? offset.parentWidth : offset.parentHeight;
   return size2 > 0 ? { constraint, start: start / size2 * 100, end: end / size2 * 100 } : { constraint, start: 0, end: 0 };
 }
 var edgesX = (r) => [r.left, r.left + r.width / 2, r.left + r.width];
@@ -4594,12 +3901,12 @@ function CanvasDndProvider({
 }) {
   const eventBus = useEventBus();
   const sensors = useAlmadarDndSensors(false);
-  const [activePayload, setActivePayload] = React19.useState(null);
-  const lastPointerRef = React19.useRef(null);
-  const trackPointer = React19.useCallback((ev) => {
+  const [activePayload, setActivePayload] = React17.useState(null);
+  const lastPointerRef = React17.useRef(null);
+  const trackPointer = React17.useCallback((ev) => {
     lastPointerRef.current = { x: ev.clientX, y: ev.clientY };
   }, []);
-  const handleDragStart = React19.useCallback((e) => {
+  const handleDragStart = React17.useCallback((e) => {
     const data = e.active.data.current;
     const payload = data?.payload;
     const activator = e.activatorEvent;
@@ -4613,7 +3920,7 @@ function CanvasDndProvider({
       log.warn("dragStart:missing-payload", { id: e.active.id });
     }
   }, [eventBus, trackPointer]);
-  const handleDragEnd = React19.useCallback((e) => {
+  const handleDragEnd = React17.useCallback((e) => {
     setActivePayload(null);
     document.removeEventListener("pointermove", trackPointer);
     const activeData = e.active.data.current;
@@ -4649,7 +3956,7 @@ function CanvasDndProvider({
     const suppressed = onDrop ? onDrop(drop) === true : false;
     if (!suppressed) defaultEmit(eventBus, drop);
   }, [eventBus, onDrop, trackPointer]);
-  const handleDragCancel = React19.useCallback(() => {
+  const handleDragCancel = React17.useCallback(() => {
     setActivePayload(null);
     document.removeEventListener("pointermove", trackPointer);
     log.info("dragCancel");
@@ -6190,7 +5497,7 @@ var OrbPreviewNodeInner = (props) => {
     }
   );
 };
-var OrbPreviewNode = React19.memo(OrbPreviewNodeInner);
+var OrbPreviewNode = React17.memo(OrbPreviewNodeInner);
 OrbPreviewNode.displayName = "OrbPreviewNode";
 orbPreviewLog.debug("export-resolved", () => ({
   type: typeof OrbPreviewNode,
@@ -6295,7 +5602,7 @@ var EventFlowEdgeInner = (props) => {
     ) })
   ] });
 };
-var EventFlowEdge = React19.memo(EventFlowEdgeInner);
+var EventFlowEdge = React17.memo(EventFlowEdgeInner);
 EventFlowEdge.displayName = "EventFlowEdge";
 function asString(v) {
   return typeof v === "string" ? v : "";
@@ -7718,7 +7025,11 @@ function AppearanceSection({ patternConfig, themeManifest, onPropChange, onToken
           {
             checked: position.absolute,
             label: t("orbInspector.absolute"),
-            onChange: (on) => write(on ? { absolute: true, x: axisPositionFrom("x", "start", offsetInParent), y: axisPositionFrom("y", "start", offsetInParent) } : { ...position, absolute: false })
+            disabled: !offsetInParent && !position.absolute,
+            onChange: (on) => {
+              if (!on) write({ ...position, absolute: false });
+              else if (offsetInParent) write({ absolute: true, x: axisPositionFrom("x", "start", offsetInParent), y: axisPositionFrom("y", "start", offsetInParent) });
+            }
           }
         ),
         position.absolute && ["x", "y"].map((axis) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", "data-testid": `inspector-constraint-${axis}`, children: [
@@ -7729,9 +7040,10 @@ function AppearanceSection({ patternConfig, themeManifest, onPropChange, onToken
               value: position[axis].constraint,
               "aria-label": t(axis === "x" ? "orbInspector.constraintHorizontal" : "orbInspector.constraintVertical"),
               options: CONSTRAINTS.map((c) => ({ value: c, label: t(CONSTRAINT_LABELS[axis][c]) })),
+              disabled: !offsetInParent,
               onValueChange: (v) => {
                 const constraint = CONSTRAINTS.find((c) => c === v);
-                if (constraint) write({ ...position, [axis]: axisPositionFrom(axis, constraint, offsetInParent) });
+                if (constraint && offsetInParent) write({ ...position, [axis]: axisPositionFrom(axis, constraint, offsetInParent) });
               },
               className: "flex-1 text-xs h-6"
             }
@@ -8045,7 +7357,7 @@ var TraitCardNodeInner = (props) => {
     }
   );
 };
-var TraitCardNode = React19.memo(TraitCardNodeInner);
+var TraitCardNode = React17.memo(TraitCardNodeInner);
 TraitCardNode.displayName = "TraitCardNode";
 
 // lib/avl-layered-graph.ts
@@ -8348,19 +7660,19 @@ function FlowCanvasInner({
   const fitPadding = systemLevel || flowLens ? 0.08 : 0.25;
   const compact = useCompactLayout();
   const [scope, setScope] = useState("local");
-  const scopeRef = React19.useRef(scope);
+  const scopeRef = React17.useRef(scope);
   scopeRef.current = scope;
   const [focusRequest, setFocusRequest] = useState(focusedOrbitalProp ?? initialOrbital);
   const [stateByOrbital, setStateByOrbital] = useState({});
-  const fitFocusedRef = React19.useRef(false);
-  const pendingFitRef = React19.useRef(null);
-  const fittedViewRef = React19.useRef(null);
+  const fitFocusedRef = React17.useRef(false);
+  const pendingFitRef = React17.useRef(null);
+  const fittedViewRef = React17.useRef(null);
   useEffect(() => {
     if (focusedOrbitalProp === void 0) return;
     fitFocusedRef.current = true;
     setFocusRequest(focusedOrbitalProp);
   }, [focusedOrbitalProp]);
-  const screenSizeUserOverrideRef = React19.useRef(false);
+  const screenSizeUserOverrideRef = React17.useRef(false);
   const [screenSize, setScreenSize] = useState(
     () => typeof window === "undefined" ? "laptop" : detectScreenSize(window.innerWidth)
   );
@@ -8516,9 +7828,9 @@ function FlowCanvasInner({
   const [edges, setEdges, onEdgesChange] = useEdgesState(activeEdges);
   const reactFlow = useReactFlow();
   const cameraMs = usePrefersReducedMotion() ? 0 : 300;
-  const savedPositionsRef = React19.useRef(nodePositions);
+  const savedPositionsRef = React17.useRef(nodePositions);
   savedPositionsRef.current = nodePositions;
-  const nodesRef = React19.useRef(nodes);
+  const nodesRef = React17.useRef(nodes);
   nodesRef.current = nodes;
   useEffect(() => {
     setEdges([]);
@@ -8663,7 +7975,7 @@ function FlowCanvasInner({
       targetTraitName: tgtData.traitName
     });
   }, [nodes, onEventWire, eventBus]);
-  const worldPositionsRef = React19.useRef(canvas.worldPositions);
+  const worldPositionsRef = React17.useRef(canvas.worldPositions);
   worldPositionsRef.current = canvas.worldPositions;
   const placementsOf = useCallback((list) => {
     const positions = { ...savedPositionsRef.current };
@@ -9023,7 +8335,7 @@ var ZoomBreadcrumb = ({
   if (eventName && band === "detail") {
     segments.push({ icon: "\u26A1", label: eventName });
   }
-  return /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1 px-2 py-1 rounded-md bg-card/90 border border-border text-xs text-muted-foreground backdrop-blur-sm", children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React19.Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1 px-2 py-1 rounded-md bg-card/90 border border-border text-xs text-muted-foreground backdrop-blur-sm", children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React17.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx("span", { className: "opacity-40", children: ">" }),
     /* @__PURE__ */ jsx("span", { className: "opacity-60", children: seg.icon }),
     /* @__PURE__ */ jsx("span", { children: seg.label })
@@ -9270,7 +8582,7 @@ var AvlOrbitalsCosmicZoom = ({
           borderRadius: 6,
           border: `1px solid ${color}`
         },
-        children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React19.Fragment, { children: [
+        children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React17.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", style: { opacity: 0.5, color }, children: "/" }),
           i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
             Box,
@@ -9813,4 +9125,4 @@ function deploymentGraph(input) {
   });
 }
 
-export { AVL_GLYPH_KINDS, AVL_GRAPH_NODE_TYPES, AvlApplication, AvlBackwardEdge, AvlBehaviorGlyph, AvlBinding, AvlBindingEdge, AvlBindingRef, AvlCircuit, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEmitListen, AvlEvent, AvlEventWireEdge, AvlExprTree, AvlField, AvlGlyph, AvlGraphCanvas, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalUnit, AvlOrbitalsCosmicZoom, AvlPageEdge, AvlPersistence, AvlSExpr, AvlSlotMap, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionDetail, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, CANVAS_TOOLS, CanvasDndProvider, CanvasVerifyContext, DEPLOYMENT_ROW, DOMAIN_COLORS, DependencyColumnNode, DependencyNode, DetailView, EDITABLE, ElementEditAccessContext, EventFlowEdge, FlowCanvas, KnobField, KnobSettingRow, LIVE_STATE, LayersPanel, OrbInspector, OrbPreviewNode, SystemBandNode, SystemMapContext, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, armPosition, armsOf, canvasViewGraph, computeZoomBand, curveControlPoint, dependencyReach, deploymentGraph, deriveEditFocusFromElement, dropBusEvent, firedTransition, flowNeighbors, gridPositions, hasCanvasTool, initialStateOf, layeredGraph, optionForPlayedStep, parseLayerId, propAccessAt, radialPositions, ringPositions, schemaToDependencyGraph, schemaToFlowGraph, schemaToLayerItems, schemaToOverviewGraph, stateMachinePlayback, stateOptionsOf, traitFlowGraph, transitionPlayback, useCanvasDraggable, useCanvasDroppable, useInlineTextEdit, useZoomBand, zoomProgress };
+export { AVL_GRAPH_NODE_TYPES, AvlBackwardEdge, AvlBehaviorGlyph, AvlBindingEdge, AvlCircuit, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEmitListen, AvlEventWireEdge, AvlExprTree, AvlGraphCanvas, AvlOrbitalUnit, AvlOrbitalsCosmicZoom, AvlPageEdge, AvlSlotMap, AvlSwimLane, AvlTraitScene, AvlTransitionDetail, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, CANVAS_TOOLS, CanvasDndProvider, CanvasVerifyContext, DEPLOYMENT_ROW, DOMAIN_COLORS, DependencyColumnNode, DependencyNode, DetailView, EDITABLE, ElementEditAccessContext, EventFlowEdge, FlowCanvas, KnobField, KnobSettingRow, LIVE_STATE, LayersPanel, OrbInspector, OrbPreviewNode, SystemBandNode, SystemMapContext, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, armPosition, armsOf, canvasViewGraph, computeZoomBand, curveControlPoint, dependencyReach, deploymentGraph, deriveEditFocusFromElement, dropBusEvent, firedTransition, flowNeighbors, gridPositions, hasCanvasTool, initialStateOf, layeredGraph, optionForPlayedStep, parseLayerId, propAccessAt, radialPositions, ringPositions, schemaToDependencyGraph, schemaToFlowGraph, schemaToLayerItems, schemaToOverviewGraph, stateMachinePlayback, stateOptionsOf, traitFlowGraph, transitionPlayback, useCanvasDraggable, useCanvasDroppable, useInlineTextEdit, useZoomBand, zoomProgress };