@almadar/ui 6.51.2 → 6.53.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, AriaRole, 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"
      */
@@ -1213,7 +1213,10 @@ interface UseCanvasDraggableArgs {
 }
 interface UseCanvasDraggableResult {
     setNodeRef: (node: HTMLElement | null) => void;
-    attributes: ReturnType<typeof useDraggable>['attributes'];
+    /** dnd-kit's attributes, with `role` narrowed to a declared ARIA role so they spread onto a core `Box`. */
+    attributes: Omit<ReturnType<typeof useDraggable>['attributes'], 'role'> & {
+        role?: AriaRole;
+    };
     listeners: ReturnType<typeof useDraggable>['listeners'];
     isDragging: boolean;
     /** Spread on the tile — live transform + grab cursor + touch-action. */

package/dist/avl/index.js

@@ -1,28 +1,29 @@
-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-IKULQIDX.js';
+import { zoomReducer, initialZoomState, getBreadcrumbs } from '../chunk-WPNM2KC6.js';
+import { JsonTreeEditor } from '../chunk-CBIJP5PL.js';
+import { useTranslate as useTranslate$1 } from '../chunk-GODZKHAL.js';
 import '../chunk-DQTV6QVS.js';
-import '../chunk-6CFYRP4S.js';
+import '../chunk-VHTJRS2N.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, Accordion, RangeSlider, computeTraitLayout, edgePath, FormField, Radio, useCompactLayout, ButtonGroup, roundedEdgePath } from '../chunk-3EF5SDIJ.js';
+export { AvlEffect, AvlEntity, AvlFieldType, AvlPage, AvlState, AvlStateMachine, BehaviorView, FIELD_TYPE_SHAPES, MiniStateMachine, ModuleCard, computeTraitLayout, edgePath } from '../chunk-3EF5SDIJ.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-GMDMOYXD.js';
+import { usePrefersReducedMotion, useMediaQuery } from '../chunk-JRW33U35.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-KQXXO42S.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-64WACXM7.js';
+import '../chunk-4OZDHCZV.js';
+import '../chunk-UGHAADU5.js';
 import '../chunk-PQKU62LK.js';
-import '../chunk-YHY5K2Y7.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 { FieldTypeSchema, EFFECT_OPERATORS, isInlineTrait, isPageReference, navigatePatternPath, formatSExpr, answerToMutations, isBinding } from '@almadar/core';
+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 { MarkerType, Handle, Position, useReactFlow, NodeResizeControl, ResizeControlVariant, getBezierPath, EdgeLabelRenderer, BaseEdge, ReactFlow, Controls, Background, BackgroundVariant, ReactFlowProvider, useNodesState, useEdgesState, useNodesInitialized } from '@xyflow/react';
@@ -1286,7 +1287,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 +1299,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
   ] });
@@ -4515,7 +4517,14 @@ function useCanvasDraggable({
     opacity: isDragging ? 0.5 : 1,
     touchAction: "none"
   };
-  return { setNodeRef, attributes, listeners, isDragging, style };
+  const { role, ...ariaAttributes } = attributes;
+  return {
+    setNodeRef,
+    attributes: { ...ariaAttributes, ...isAriaRole(role) ? { role } : {} },
+    listeners,
+    isDragging,
+    style
+  };
 }
 var DEFAULT_ACCEPTS = ["pattern", "behavior"];
 function useCanvasDroppable({
@@ -5126,6 +5135,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 +5338,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 +5355,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 +6045,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 +8510,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 +8538,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 +8697,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 +8925,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-JXUYEO7U.js → chunk-2LFBQ4IS.js}

@@ -1,3 +1,4 @@
+import { beginPending, endPending } from './chunk-JRW33U35.js';
 import { useEventBus } from './chunk-6EV3OEBQ.js';
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { createLogger } from '@almadar/logger';
@@ -856,7 +857,12 @@ function useUIEvents(dispatch, traitName, validEvents, eventBusInstance) {
         if (event.source && event.source.dispatched) {
           return;
         }
-        dispatch(smEvent, event.payload);
+        const pendingKey = event.source?.pendingKey;
+        const settled = dispatch(smEvent, event.payload);
+        if (pendingKey !== void 0 && settled instanceof Promise) {
+          beginPending(pendingKey);
+          void settled.finally(() => endPending(pendingKey));
+        }
       };
       unsubscribes.push(
         eventBus.on(`${UI_PREFIX}${traitName}.${smEvent}`, handler)