@almadar/ui 6.51.2 → 6.52.0

package/dist/avl/index.d.ts

@@ -1,9 +1,9 @@
 import { OperatorCategory } from '@almadar/std';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { FieldType, EntityPersistence, SExpr, EvalTrace, EventEmit, Expression, UISlot, OrbitalSchema, EntityData, EditFocus, EventPayload, DomainQuestion, DomainQuestionAnswer, ThemeDefinition, CircuitStepResult, GuardEvaluation, EffectTrace } from '@almadar/core';
-import { A as AvlNodeData, F as FileTreeItem } from '../FileTree-RKQqRhIM.js';
-export { a as AvlEdgeData, b as AvlStateMachine, c as AvlStateMachineProps, B as BehaviorView, M as ModuleCard, s as schemaToFlowGraph } from '../FileTree-RKQqRhIM.js';
+import { FieldType, EntityPersistence, SExpr, EvalTrace, A11yProps, EventEmit, Expression, UISlot, OrbitalSchema, EntityData, EditFocus, EventPayload, DomainQuestion, DomainQuestionAnswer, ThemeDefinition, CircuitStepResult, GuardEvaluation, EffectTrace } from '@almadar/core';
+import { A as AvlNodeData, F as FileTreeItem } from '../FileTree-DUi7e7Z8.js';
+export { a as AvlEdgeData, b as AvlStateMachine, c as AvlStateMachineProps, B as BehaviorView, M as ModuleCard, s as schemaToFlowGraph } from '../FileTree-DUi7e7Z8.js';
 import { T as TraitLevelData, d as TraitTransitionInfo, c as TransitionLevelData } from '../avl-schema-parser-C0wnAp5x.js';
 export { A as ApplicationLevelData, C as CrossLink, b as OrbitalLevelData, p as parseApplicationLevel, e as parseOrbitalLevel, f as parseTraitLevel, g as parseTransitionLevel, t as traitLevelFromTrait } from '../avl-schema-parser-C0wnAp5x.js';
 import { NodeProps, EdgeProps, Edge, Node, NodeTypes, ReactFlowProps } from '@xyflow/react';
@@ -254,7 +254,7 @@ declare const AvlCircuit: React__default.FC<AvlCircuitProps>;
 
 declare const AVL_GLYPH_KINDS: readonly ["application", "orbital", "entity", "trait", "page", "state", "transition", "event", "guard", "effect", "field", "fieldType", "binding", "bindingRef", "persistence", "operator", "sexpr", "literal"];
 type AvlGlyphKind = (typeof AVL_GLYPH_KINDS)[number];
-interface AvlGlyphProps {
+interface AvlGlyphProps extends Omit<React__default.AriaAttributes, keyof A11yProps>, A11yProps {
     /** Which notation symbol to draw.
      * @example "state"
      */

package/dist/avl/index.js

@@ -1,22 +1,22 @@
-import { BrowserPlayground, collectEmbeddedTraits } from '../chunk-T7IH5ABO.js';
-import { zoomReducer, initialZoomState, getBreadcrumbs } from '../chunk-R4V7IZQP.js';
-import { useTranslate as useTranslate$1 } from '../chunk-YKHNK5JH.js';
+import { BrowserPlayground, collectEmbeddedTraits } from '../chunk-QWDKMVLX.js';
+import { zoomReducer, initialZoomState, getBreadcrumbs } from '../chunk-5GCI6C7J.js';
+import { useTranslate as useTranslate$1 } from '../chunk-NCNP2RKZ.js';
 import '../chunk-DQTV6QVS.js';
-import '../chunk-6CFYRP4S.js';
+import '../chunk-2QB2PXOO.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 { Popover, Button, Icon, Select, Badge, IconButton, AvlStateMachine, Input, AvlFieldType, AvlEffect, AvlState, AvlPage, AvlEntity, useContainerWidth, useAlmadarDndSensors, almadarDndCollisionDetection, TagInput, Checkbox, Switch, CodeBlock, FileTree, Card, JsonTreeEditor, Accordion, RangeSlider, computeTraitLayout, edgePath, FormField, Radio, useCompactLayout, ButtonGroup, roundedEdgePath } from '../chunk-GIPZSCND.js';
-export { AvlEffect, AvlEntity, AvlFieldType, AvlPage, AvlState, AvlStateMachine, BehaviorView, FIELD_TYPE_SHAPES, MiniStateMachine, ModuleCard, computeTraitLayout, edgePath } from '../chunk-GIPZSCND.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-BUEIZY54.js';
-export { CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, STATE_COLORS, effectCategoryOf, getStateRole, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, traitLevelFromTrait } from '../chunk-BUEIZY54.js';
-import { Typography, INLINE_TEXT_ATTR } from '../chunk-MWPX2O4M.js';
-import { useMediaQuery } from '../chunk-NTO555KF.js';
+import { Popover, Button, Icon, Select, Badge, IconButton, AvlStateMachine, Input, AvlFieldType, AvlEffect, AvlState, AvlPage, AvlEntity, useContainerWidth, useAlmadarDndSensors, almadarDndCollisionDetection, TagInput, Checkbox, Switch, CodeBlock, FileTree, Card, JsonTreeEditor, Accordion, RangeSlider, computeTraitLayout, edgePath, FormField, Radio, useCompactLayout, ButtonGroup, roundedEdgePath } from '../chunk-EERAGPBW.js';
+export { AvlEffect, AvlEntity, AvlFieldType, AvlPage, AvlState, AvlStateMachine, BehaviorView, FIELD_TYPE_SHAPES, MiniStateMachine, ModuleCard, computeTraitLayout, edgePath } from '../chunk-EERAGPBW.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-BHZG4PDZ.js';
+export { CONNECTION_COLORS, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, STATE_COLORS, effectCategoryOf, getStateRole, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, traitLevelFromTrait } from '../chunk-BHZG4PDZ.js';
+import { Typography, INLINE_TEXT_ATTR } from '../chunk-CLSLVFSP.js';
+import { usePrefersReducedMotion, useMediaQuery } from '../chunk-TWHYH25Q.js';
 import '../chunk-XJTHMW4G.js';
 import { useEventBus } from '../chunk-6EV3OEBQ.js';
-import { profilerOnRender, perfStart, perfEnd } from '../chunk-OLZ3EEML.js';
+import { profilerOnRender, perfStart, perfEnd } from '../chunk-G4GMXYMY.js';
 import { isEditableTarget } from '../chunk-O7OLVVBR.js';
-import { cn } from '../chunk-HQDKHLFG.js';
-import '../chunk-GHXWGQTX.js';
-import '../chunk-L55SAFKL.js';
+import { domPassthrough, cn } from '../chunk-IN3BVW2Z.js';
+import '../chunk-V5AGW2JN.js';
+import '../chunk-WB2A6V3I.js';
 import '../chunk-PQKU62LK.js';
 import '../chunk-YHY5K2Y7.js';
 import '../chunk-QPXIAUJD.js';
@@ -1286,7 +1286,8 @@ function Symbol({ kind, label, effectType, fieldType, persistence, namespace })
       return /* @__PURE__ */ jsx(AvlLiteral, { value: label ?? "42", size: 14 });
   }
 }
-var AvlGlyph = ({ kind, label, size: size2 = "md", showCaption = true, className, ...variant }) => {
+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 });
@@ -1297,7 +1298,7 @@ var AvlGlyph = ({ kind, label, size: size2 = "md", showCaption = true, className
     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, { "data-testid": "avl-glyph", "data-kind": kind, className: `inline-flex flex-col items-center gap-1 ${className ?? ""}`, children: [
+  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
   ] });
@@ -5126,6 +5127,7 @@ var OrbPreviewNodeInner = (props) => {
   const { t } = useTranslate();
   const eventBus = useEventBus();
   const reactFlow = useReactFlow();
+  const cameraMs = usePrefersReducedMotion() ? 0 : 200;
   const contentRef = useRef(null);
   const [hovered, setHovered] = useState(false);
   const [playing, setPlaying] = useState(false);
@@ -5328,7 +5330,7 @@ var OrbPreviewNodeInner = (props) => {
     if (e.shiftKey && (e.code === "Digit1" || e.code === "Digit2") && hasCanvasTool(tools, "zoomToSelection")) {
       handled();
       if (e.code === "Digit1") {
-        void reactFlow.fitView({ padding: 0.1, duration: 200 });
+        void reactFlow.fitView({ padding: 0.1, duration: cameraMs });
         return;
       }
       const container = contentRef.current;
@@ -5345,7 +5347,7 @@ var OrbPreviewNodeInner = (props) => {
       orbPreviewLog.info("zoom-to-selection", { paths, boxes, topLeft, bottomRight });
       void reactFlow.fitBounds(
         { x: topLeft.x, y: topLeft.y, width: bottomRight.x - topLeft.x, height: bottomRight.y - topLeft.y },
-        { padding: 0.2, duration: 200 }
+        { padding: 0.2, duration: cameraMs }
       );
       return;
     }
@@ -6035,7 +6037,7 @@ var OrbPreviewNodeInner = (props) => {
           Box,
           {
             ref: setContentRef,
-            className: `orb-preview-live nodrag nopan relative outline-none${dragActive || reorderDragActive || l2IsOver ? " drag-active" : ""}`,
+            className: `orb-preview-live nodrag nopan relative outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset${dragActive || reorderDragActive || l2IsOver ? " drag-active" : ""}`,
             "data-playing": playing,
             onClick: playing ? handleContentClick : void 0,
             onClickCapture: playing ? void 0 : handlePausedClickCapture,
@@ -8500,6 +8502,7 @@ function FlowCanvasInner({
   const [nodes, setNodes, onNodesChange] = useNodesState(activeNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(activeEdges);
   const reactFlow = useReactFlow();
+  const cameraMs = usePrefersReducedMotion() ? 0 : 300;
   const savedPositionsRef = React19.useRef(nodePositions);
   savedPositionsRef.current = nodePositions;
   const nodesRef = React19.useRef(nodes);
@@ -8527,8 +8530,8 @@ function FlowCanvasInner({
     const pending = pendingFitRef.current;
     if (!nodesInitialized || !pending) return;
     pendingFitRef.current = null;
-    void reactFlow.fitView({ duration: 300, padding: fitPadding, ...pending.centreOn ? { nodes: [{ id: pending.centreOn }] } : {} });
-  }, [nodesInitialized, nodes, reactFlow, fitPadding]);
+    void reactFlow.fitView({ duration: cameraMs, padding: fitPadding, ...pending.centreOn ? { nodes: [{ id: pending.centreOn }] } : {} });
+  }, [nodesInitialized, nodes, reactFlow, fitPadding, cameraMs]);
   const visibleEdges = useMemo(() => {
     const nodeIds = new Set(nodes.map((n) => n.id));
     return edges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
@@ -8686,7 +8689,7 @@ function FlowCanvasInner({
   const applyScreenSize = (size2) => {
     pickScreenSize(size2);
     requestAnimationFrame(() => {
-      reactFlow.fitView({ duration: 300, padding: 0.25 });
+      reactFlow.fitView({ duration: cameraMs, padding: 0.25 });
     });
   };
   const traitCardSelectionValue = useMemo(() => ({
@@ -8914,7 +8917,7 @@ function FlowCanvasInner({
           /* @__PURE__ */ jsx(
             Box,
             {
-              className: "relative flex-1 min-w-0 h-full outline-none flex flex-col",
+              className: "relative flex-1 min-w-0 h-full outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset flex flex-col",
               tabIndex: 0,
               onKeyDown: handleCanvasKeyDown,
               "data-testid": "flow-canvas",

package/dist/{chunk-6CFYRP4S.js → chunk-2QB2PXOO.js}

@@ -138,7 +138,6 @@ function aggregateSlot(sources) {
       children
     },
     priority: 0,
-    animation: "fade",
     sourceTrait: MULTI_SOURCE_STACK_TRAIT
   };
 }
@@ -202,7 +201,6 @@ function useUISlotManager() {
         pattern: config.pattern,
         props: config.props ?? {},
         priority: config.priority ?? 0,
-        animation: config.animation ?? "fade",
         onDismiss: config.onDismiss,
         sourceTrait: config.sourceTrait,
         slot: config.target,
@@ -243,7 +241,7 @@ function useUISlotManager() {
           });
           return prev;
         }
-        if (existing && existing.priority === content.priority && existing.pattern === content.pattern && existing.animation === content.animation && existing.transitionEvent === content.transitionEvent && existing.fromState === content.fromState && existing.entity === content.entity && existing.nodeId === content.nodeId && existing.autoDismissAt === void 0 && content.autoDismissAt === void 0 && existing.onDismiss === void 0 === (content.onDismiss === void 0)) {
+        if (existing && existing.priority === content.priority && existing.pattern === content.pattern && existing.transitionEvent === content.transitionEvent && existing.fromState === content.fromState && existing.entity === content.entity && existing.nodeId === content.nodeId && existing.autoDismissAt === void 0 && content.autoDismissAt === void 0 && existing.onDismiss === void 0 === (content.onDismiss === void 0)) {
           const reconciled = reconcileSlotProps(existing.props, content.props);
           if (reconciled.equal) {
             log.debug("slot:flush-bail", { slot: config.target, sourceKey, pattern: content.pattern });

package/dist/{chunk-R4V7IZQP.js → chunk-5GCI6C7J.js}

@@ -1,5 +1,5 @@
-import { avlBlend, AVL_INK, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, avlTint, Box, VStack, effectCategoryOf } from './chunk-BUEIZY54.js';
-import { Typography } from './chunk-MWPX2O4M.js';
+import { avlBlend, AVL_INK, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, avlTint, Box, VStack, effectCategoryOf } from './chunk-BHZG4PDZ.js';
+import { Typography } from './chunk-CLSLVFSP.js';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
 import { EntityPersistenceSchema } from '@almadar/core';
 import { getStdOperatorMeta } from '@almadar/std/registry';