@almadar/shell-web 0.1.0 → 1.1.0

package/dist/{chunk-KVQS4GXU.js → chunk-4YJ53G7S.js}

@@ -1,8 +1,8 @@
-import { useContainerWidth, computeTraitLayout, roundedEdgePath } from './chunk-GAR5TQ5B.js';
-import { AvlExplain, AvlEffectChip } from './chunk-SJGJJKBY.js';
+import { useContainerWidth, computeTraitLayout, roundedEdgePath } from './chunk-M74BCDBQ.js';
+import { AvlExplain, AvlEffectChip } from './chunk-PRLHKBXG.js';
+import { AVL_INK, AVL_FONT, AVL_STROKE, avlTint } from './chunk-FAKU5F62.js';
 import { gearTeethPath } from './chunk-TZZBINQY.js';
-import { AVL_INK, AVL_FONT, AVL_STROKE, avlTint } from './chunk-DFNZUYX4.js';
-import { domPassthrough, useTranslate, useEventBus, useMediaQuery, Box, Typography } from './chunk-MBQAMMSE.js';
+import { domPassthrough, useTranslate, useEventBus, useMediaQuery, Box, Typography, Button } from './chunk-4YXBKHHM.js';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { formatSExpr } from '@almadar/core';
 import { createLogger } from '@almadar/logger';
@@ -65,19 +65,25 @@ var AvlStateMachine = ({
   const clickable = transitionClickEvent !== void 0 || onTransitionClick !== void 0;
   const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
   const [layout, setLayout] = useState(null);
+  const [layoutFailed, setLayoutFailed] = useState(false);
+  const [layoutAttempt, setLayoutAttempt] = useState(0);
   const hostRef = useRef(null);
   const hostWidth = useContainerWidth(hostRef);
   const traitKey = useMemo(() => JSON.stringify(trait), [trait]);
   useEffect(() => {
     if (trait.states.length === 0) return;
     let live = true;
+    setLayoutFailed(false);
     computeTraitLayout(trait, metricsFor(nodeShape, direction)).then((l) => {
       if (live) setLayout(l);
-    }).catch((error) => log.error("layout-failed", { trait: trait.name, error: error instanceof Error ? error : String(error) }));
+    }).catch((error) => {
+      log.error("layout-failed", { trait: trait.name, error: error instanceof Error ? error : String(error) });
+      if (live) setLayoutFailed(true);
+    });
     return () => {
       live = false;
     };
-  }, [traitKey, nodeShape, direction]);
+  }, [traitKey, nodeShape, direction, layoutAttempt]);
   useEffect(() => {
     const host = hostRef.current;
     if (!followActive || layout === null || host === null || activeState === void 0) return;
@@ -270,6 +276,7 @@ var AvlStateMachine = ({
               transition: "border-color var(--duration-normal, 200ms), box-shadow var(--duration-normal, 200ms)"
             },
             children: [
+              pending ? /* @__PURE__ */ jsx(Box, { as: "span", className: "sr-only", children: t("avl.pendingSourceState") }) : null,
               visit !== void 0 && !active ? /* @__PURE__ */ jsx(
                 Box,
                 {
@@ -308,7 +315,10 @@ var AvlStateMachine = ({
           s.name
         );
       })
-    ] }) }) : /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center py-10", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("avl.computingLayout") }) }) })
+    ] }) }) : layoutFailed ? /* @__PURE__ */ jsxs(Box, { role: "alert", className: "flex flex-col items-center justify-center gap-2 py-10", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("avl.layoutFailed") }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", label: t("common.retry"), onClick: () => setLayoutAttempt((n) => n + 1) })
+    ] }) : /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center py-10", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("avl.computingLayout") }) }) })
   ] });
 };
 var Rail = ({ kind, event }) => /* @__PURE__ */ jsxs(
@@ -325,4 +335,4 @@ var Rail = ({ kind, event }) => /* @__PURE__ */ jsxs(
 );
 AvlStateMachine.displayName = "AvlStateMachine";
 
-export { AvlStateMachine };
+export { AvlStateMachine, BODY_CHAR, MARGIN, MAX_SCALE, MIN_SCALE, MONO_CHAR, PILL_H, metricsFor, pillWidth };