@almadar/ui 6.61.0 → 6.62.0

package/dist/runtime/index.cjs

@@ -1598,7 +1598,8 @@ var init_en = __esm({
       "avl.stateInitial": "start",
       "avl.stateTerminal": "end",
       "avl.guardCaption": "The transition only fires when this check is true.",
-      "avl.effectsCaption": "What runs, in order, when the transition fires."
+      "avl.effectsCaption": "What runs, in order, when the transition fires.",
+      "aria.carousel": "carousel"
     };
   }
 });
@@ -2972,7 +2973,8 @@ var init_ar = __esm({
       "avl.stateInitial": "\u0627\u0644\u0628\u062F\u0627\u064A\u0629",
       "avl.stateTerminal": "\u0627\u0644\u0646\u0647\u0627\u064A\u0629",
       "avl.guardCaption": "\u0644\u0627 \u064A\u062D\u062F\u062B \u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0627 \u0639\u0646\u062F\u0645\u0627 \u064A\u0643\u0648\u0646 \u0647\u0630\u0627 \u0627\u0644\u0634\u0631\u0637 \u0635\u062D\u064A\u062D\u064B\u0627.",
-      "avl.effectsCaption": "\u0645\u0627 \u064A\u064F\u0646\u0641\u064E\u0651\u0630\u060C \u0628\u0627\u0644\u062A\u0631\u062A\u064A\u0628\u060C \u0639\u0646\u062F \u062D\u062F\u0648\u062B \u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644."
+      "avl.effectsCaption": "\u0645\u0627 \u064A\u064F\u0646\u0641\u064E\u0651\u0630\u060C \u0628\u0627\u0644\u062A\u0631\u062A\u064A\u0628\u060C \u0639\u0646\u062F \u062D\u062F\u0648\u062B \u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644.",
+      "aria.carousel": "\u0639\u0631\u0636 \u0634\u0631\u0627\u0626\u062D"
     };
   }
 });
@@ -4234,7 +4236,8 @@ var init_sl = __esm({
       "avl.stateInitial": "za\u010Detek",
       "avl.stateTerminal": "konec",
       "avl.guardCaption": "Prehod se zgodi le, ko je ta pogoj izpolnjen.",
-      "avl.effectsCaption": "Kaj se izvede, po vrsti, ko se prehod zgodi."
+      "avl.effectsCaption": "Kaj se izvede, po vrsti, ko se prehod zgodi.",
+      "aria.carousel": "vrtiljak"
     };
   }
 });
@@ -4779,6 +4782,18 @@ var init_circuitVerificationObserver = __esm({
     init_verificationRegistry();
   }
 });
+
+// lib/hostDispatchInView.ts
+function hostDispatchInView(request, response, owns) {
+  if (request.targetTrait !== void 0 && owns(request.targetTrait)) return true;
+  if (Object.keys(response.states).some(owns)) return true;
+  if (Object.keys(response.entityByTrait ?? {}).some(owns)) return true;
+  return (response.clientEffectsByTrait ?? []).some((e) => owns(e.traitName));
+}
+var init_hostDispatchInView = __esm({
+  "lib/hostDispatchInView.ts"() {
+  }
+});
 function getTabClientId() {
   if (tabClientId === void 0) tabClientId = crypto.randomUUID();
   return tabClientId;
@@ -8772,11 +8787,29 @@ var init_SvgBranch = __esm({
     SvgBranch.displayName = "SvgBranch";
   }
 });
+
+// lib/svgMotion.ts
+function svgMotionClass(motion, animated) {
+  if (!animated || !isMotionEnabled()) return void 0;
+  return SVG_MOTION_CLASSES[motion];
+}
+var SVG_MOTION_CLASSES;
+var init_svgMotion = __esm({
+  "lib/svgMotion.ts"() {
+    init_Presence();
+    SVG_MOTION_CLASSES = {
+      flowDash: "almadar-svg-flow-dash",
+      pulseRing: "almadar-svg-pulse-ring",
+      pulseExpand: "almadar-svg-pulse-expand"
+    };
+  }
+});
 var SvgConnection;
 var init_SvgConnection = __esm({
   "components/core/atoms/svg/SvgConnection.tsx"() {
     "use client";
     init_domPassthrough();
+    init_svgMotion();
     SvgConnection = ({
       x1 = 10,
       y1 = 50,
@@ -8801,7 +8834,7 @@ var init_SvgConnection = __esm({
         {
           ...asRoot ? void 0 : a11y,
           className: [
-            variant === "animated" ? "almadar-svg-flow-dash" : void 0,
+            svgMotionClass("flowDash", variant === "animated"),
             className
           ].filter(Boolean).join(" ") || void 0,
           x1,
@@ -8828,6 +8861,7 @@ var init_SvgFlow = __esm({
   "components/core/atoms/svg/SvgFlow.tsx"() {
     "use client";
     init_domPassthrough();
+    init_svgMotion();
     flowIdCounter = 0;
     DEFAULT_POINTS = [[10, 50], [50, 20], [90, 50]];
     SvgFlow = ({
@@ -8875,7 +8909,7 @@ var init_SvgFlow = __esm({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             markerEnd: `url(#${markerId})`,
-            className: animated ? "almadar-svg-flow-dash" : void 0,
+            className: svgMotionClass("flowDash", animated),
             strokeDasharray: animated ? "8 6" : void 0
           }
         )
@@ -9309,6 +9343,7 @@ var init_SvgNode = __esm({
   "components/core/atoms/svg/SvgNode.tsx"() {
     "use client";
     init_domPassthrough();
+    init_svgMotion();
     SvgNode = ({
       x = 50,
       y = 50,
@@ -9335,7 +9370,7 @@ var init_SvgNode = __esm({
             stroke: color,
             strokeWidth: 1,
             opacity: 0.3,
-            className: "almadar-svg-pulse-ring"
+            className: svgMotionClass("pulseRing", true)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -9370,23 +9405,12 @@ var init_SvgNode = __esm({
     SvgNode.displayName = "SvgNode";
   }
 });
-var PULSE_KEYFRAMES, SvgPulse;
+var SvgPulse;
 var init_SvgPulse = __esm({
   "components/core/atoms/svg/SvgPulse.tsx"() {
     "use client";
     init_domPassthrough();
-    PULSE_KEYFRAMES = `
-@keyframes almadar-svg-pulse-expand {
-  0% {
-    transform: scale(0.3);
-    opacity: 0.4;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-`;
+    init_svgMotion();
     SvgPulse = ({
       cx = 70,
       cy = 70,
@@ -9402,8 +9426,8 @@ var init_SvgPulse = __esm({
       ...rest
     }) => {
       const a11y = domPassthrough(rest);
+      const pulseClass2 = svgMotionClass("pulseExpand", animated);
       const inner = /* @__PURE__ */ jsxRuntime.jsxs("g", { ...asRoot ? void 0 : a11y, className, opacity, children: [
-        animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: PULSE_KEYFRAMES }),
         Array.from({ length: rings }).map((_, i) => {
           const ringRadius = (i + 1) / rings * maxRadius;
           const ringOpacity = 1 - i / rings * 0.6;
@@ -9417,11 +9441,9 @@ var init_SvgPulse = __esm({
               fill: "none",
               stroke: color,
               strokeWidth: 1.5,
-              opacity: animated ? void 0 : ringOpacity * 0.4,
-              style: animated ? {
-                transformOrigin: `${cx}px ${cy}px`,
-                animation: `almadar-svg-pulse-expand 2s ease-out ${delay}s infinite`
-              } : void 0
+              opacity: pulseClass2 ? void 0 : ringOpacity * 0.4,
+              className: pulseClass2,
+              style: pulseClass2 ? { animationDelay: `${delay}s` } : void 0
             },
             i
           );
@@ -18459,6 +18481,10 @@ function resolveCanvasTheme(scope) {
       const c = r.color(toneVar(tone));
       tones[tone] = c ? colorCss(c) : "currentColor";
     }
+    const surface = (name) => {
+      const c = r.color(name);
+      return c ? colorCss(c) : "transparent";
+    };
     const ground = r.color("--surface-diagram");
     const text = {};
     const TEXT_FALLBACK = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24 };
@@ -18466,6 +18492,11 @@ function resolveCanvasTheme(scope) {
     const body = r.family("--font-family-body", r.family("--font-family", "system-ui, sans-serif"));
     return {
       ground: ground ? colorCss(ground) : "transparent",
+      surfaces: {
+        muted: surface("--color-muted"),
+        card: surface("--color-card"),
+        onPrimary: surface("--color-primary-foreground")
+      },
       tones,
       series: SERIES_TONES.map((t) => tones[t]),
       strokes: {
@@ -23960,7 +23991,7 @@ var init_CodeBlock = __esm({
           () => naturalTabs?.find((lang) => lang === pageLocale) ?? naturalTabs?.[0] ?? "en"
         );
         const activeNaturalLanguage = naturalTabs?.includes(naturalLanguage) === true ? naturalLanguage : naturalTabs?.[0] ?? "en";
-        const codeDir = naturalTabs && i18n.coreTables[activeNaturalLanguage].meta.rtl ? "rtl" : "ltr";
+        const codeDir = naturalTabs && i18n.getVocabulary(activeNaturalLanguage).meta.rtl ? "rtl" : "ltr";
         const translationCache = React98.useMemo(() => /* @__PURE__ */ new Map(), [englishCode, files]);
         const translateFor = React98.useCallback(
           (source, sourceLanguage, cacheKey) => {
@@ -23977,14 +24008,14 @@ var init_CodeBlock = __esm({
         const code = translateFor(englishCode, language, "code");
         const naturalTabItems = naturalTabs?.map((lang) => ({
           id: `lang-${lang}`,
-          label: i18n.coreTables[lang].meta.name,
+          label: i18n.getVocabulary(lang).meta.name,
           content: null
         }));
         const naturalTabStrip = naturalTabs && naturalTabItems ? /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
             className: "border-b border-border",
-            dir: i18n.coreTables[activeNaturalLanguage].meta.rtl ? "rtl" : "ltr",
+            dir: i18n.getVocabulary(activeNaturalLanguage).meta.rtl ? "rtl" : "ltr",
             "data-testid": "codeblock-language-tabs",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               Tabs,
@@ -28073,10 +28104,10 @@ var init_AvlState = __esm({
     }) => {
       const width = computeWidth(explicitWidth, transitionCount);
       const rx = height / 2;
-      const roleColors = role ? STATE_COLORS[role] : null;
-      const fillColor = roleColors ? roleColors.fill : "none";
-      const strokeColor = roleColors ? roleColors.border : color;
-      const textColor = roleColors ? roleColors.border : color;
+      const roleColors2 = role ? STATE_COLORS[role] : null;
+      const fillColor = roleColors2 ? roleColors2.fill : "none";
+      const strokeColor = roleColors2 ? roleColors2.border : color;
+      const textColor = roleColors2 ? roleColors2.border : color;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
         isInitial && /* @__PURE__ */ jsxRuntime.jsx(
           "circle",
@@ -32074,18 +32105,30 @@ var init_Carousel = __esm({
       loop = false,
       slideChangeEvent,
       slideChangePayload,
+      orientation = "horizontal",
+      fullHeight = false,
+      loadMoreEvent,
+      loadMoreAhead = 2,
+      hasMore = false,
+      isLoadingMore = false,
       className,
       ...rest
     }) => {
+      const vertical = orientation === "vertical";
+      const loadRequestedAt = React98.useRef(null);
       const [activeIndex, setActiveIndex] = React98.useState(0);
       const scrollRef = React98.useRef(null);
+      const rootRef = React98.useRef(null);
+      const [topOffset, setTopOffset] = React98.useState(0);
       const autoPlayRef = React98.useRef(null);
       const eventBus = useSafeEventBus3();
       const { t } = hooks.useTranslate();
       const safeItems = items ?? [];
       const totalSlides = safeItems.length;
+      const announcedIndex = React98.useRef(0);
       const emitSlideChange = React98.useCallback(
         (newIndex) => {
+          announcedIndex.current = newIndex;
           if (slideChangeEvent) {
             eventBus.emit(`UI:${slideChangeEvent}`, {
               index: newIndex,
@@ -32099,13 +32142,13 @@ var init_Carousel = __esm({
         (index) => {
           const container = scrollRef.current;
           if (!container) return;
-          const slideWidth = container.offsetWidth;
-          container.scrollTo({
-            left: slideWidth * index,
-            behavior: "smooth"
-          });
+          const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+          const behavior = reduceMotion ? "auto" : "smooth";
+          if (typeof container.scrollTo !== "function") return;
+          if (vertical) container.scrollTo({ top: container.offsetHeight * index, behavior });
+          else container.scrollTo({ left: container.offsetWidth * index, behavior });
         },
-        []
+        [vertical]
       );
       const goToSlide = React98.useCallback(
         (index) => {
@@ -32129,10 +32172,7 @@ var init_Carousel = __esm({
         goToSlide(activeIndex - 1);
       }, [goToSlide, activeIndex]);
       const swipeHandlers = useSwipeGesture(
-        {
-          onSwipeLeft: goNext,
-          onSwipeRight: goPrev
-        },
+        vertical ? { onSwipeUp: goNext, onSwipeDown: goPrev } : { onSwipeLeft: goNext, onSwipeRight: goPrev },
         { threshold: 40 }
       );
       React98.useEffect(() => {
@@ -32157,138 +32197,189 @@ var init_Carousel = __esm({
       const handleScroll = React98.useCallback(() => {
         const container = scrollRef.current;
         if (!container) return;
-        const slideWidth = container.offsetWidth;
-        if (slideWidth === 0) return;
-        const newIndex = Math.round(container.scrollLeft / slideWidth);
-        setActiveIndex((prev) => {
-          if (prev !== newIndex && newIndex >= 0 && newIndex < totalSlides) {
-            return newIndex;
+        const slideSize = vertical ? container.offsetHeight : container.offsetWidth;
+        if (slideSize === 0) return;
+        const position = vertical ? container.scrollTop : container.scrollLeft;
+        const newIndex = Math.round(position / slideSize);
+        if (newIndex < 0 || newIndex >= totalSlides) return;
+        setActiveIndex(newIndex);
+        if (Math.abs(position - newIndex * slideSize) <= 1 && newIndex !== announcedIndex.current) {
+          emitSlideChange(newIndex);
+        }
+      }, [totalSlides, vertical, emitSlideChange]);
+      React98.useEffect(() => {
+        if (!loadMoreEvent || !hasMore || isLoadingMore || totalSlides === 0) return;
+        if (activeIndex < totalSlides - 1 - loadMoreAhead) return;
+        if (loadRequestedAt.current === totalSlides) return;
+        loadRequestedAt.current = totalSlides;
+        eventBus.emit(`UI:${loadMoreEvent}`, { index: activeIndex });
+      }, [activeIndex, totalSlides, loadMoreEvent, hasMore, isLoadingMore, loadMoreAhead, eventBus]);
+      const viewportBound = vertical && fullHeight;
+      React98.useLayoutEffect(() => {
+        if (!viewportBound || typeof window === "undefined") return;
+        const measure = () => {
+          const root = rootRef.current;
+          if (root) setTopOffset(Math.max(0, Math.round(root.getBoundingClientRect().top)));
+        };
+        measure();
+        window.addEventListener("resize", measure);
+        return () => window.removeEventListener("resize", measure);
+      }, [viewportBound]);
+      const handleKeyDown = React98.useCallback(
+        (e) => {
+          const next = vertical ? ["ArrowDown", "PageDown"] : ["ArrowRight"];
+          const prev = vertical ? ["ArrowUp", "PageUp"] : ["ArrowLeft"];
+          if (next.includes(e.key)) {
+            e.preventDefault();
+            goNext();
+          } else if (prev.includes(e.key)) {
+            e.preventDefault();
+            goPrev();
           }
-          return prev;
-        });
-      }, [totalSlides]);
+        },
+        [vertical, goNext, goPrev]
+      );
       const hasPrev = loop || activeIndex > 0;
       const hasNext = loop || activeIndex < totalSlides - 1;
       if (totalSlides === 0) return null;
-      return /* @__PURE__ */ jsxRuntime.jsxs(Box, { position: "relative", overflow: "hidden", ...domPassthrough(rest), className: cn("w-full", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Box,
-          {
-            ref: scrollRef,
-            display: "flex",
-            overflow: "auto",
-            className: cn(
-              "w-full",
-              "scroll-smooth",
-              "scrollbar-none",
-              "[scroll-snap-type:x_mandatory]",
-              "[&::-webkit-scrollbar]:hidden",
-              "[-ms-overflow-style:none]"
-            ),
-            style: {
-              scrollSnapType: "x mandatory",
-              WebkitOverflowScrolling: "touch"
-            },
-            onScroll: handleScroll,
-            onPointerDown: swipeHandlers.onPointerDown,
-            onPointerMove: swipeHandlers.onPointerMove,
-            onPointerUp: swipeHandlers.onPointerUp,
-            onPointerCancel: swipeHandlers.onPointerCancel,
-            children: safeItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Box,
+        {
+          position: "relative",
+          overflow: "hidden",
+          role: "region",
+          "aria-roledescription": t("aria.carousel"),
+          tabIndex: 0,
+          onKeyDown: handleKeyDown,
+          ...domPassthrough(rest),
+          ref: rootRef,
+          className: cn("w-full", fullHeight && !viewportBound && "h-full", className),
+          style: viewportBound ? { height: `calc(100svh - ${topOffset}px)` } : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
               Box,
               {
+                ref: scrollRef,
+                display: "flex",
+                overflow: "auto",
                 className: cn(
-                  "flex-shrink-0 w-full",
-                  "[scroll-snap-align:start]"
+                  "w-full",
+                  "scroll-smooth",
+                  "scrollbar-none",
+                  vertical ? "[scroll-snap-type:y_mandatory]" : "[scroll-snap-type:x_mandatory]",
+                  "[&::-webkit-scrollbar]:hidden",
+                  "[-ms-overflow-style:none]"
                 ),
                 style: {
-                  scrollSnapAlign: "start"
+                  flexDirection: vertical ? "column" : "row",
+                  scrollSnapType: vertical ? "y mandatory" : "x mandatory",
+                  height: fullHeight ? "100%" : void 0,
+                  WebkitOverflowScrolling: "touch"
                 },
-                children: (renderItem ?? children)?.(item, index)
-              },
-              index
-            ))
-          }
-        ),
-        showArrows && hasPrev && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          Box,
-          {
-            position: "absolute",
-            className: "left-2 top-1/2 -translate-y-1/2 z-10",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
+                onScroll: handleScroll,
+                onPointerDown: swipeHandlers.onPointerDown,
+                onPointerMove: swipeHandlers.onPointerMove,
+                onPointerUp: swipeHandlers.onPointerUp,
+                onPointerCancel: swipeHandlers.onPointerCancel,
+                children: safeItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Box,
+                  {
+                    className: cn(
+                      "flex-shrink-0 w-full",
+                      "[scroll-snap-align:start]"
+                    ),
+                    style: {
+                      scrollSnapAlign: "start",
+                      scrollSnapStop: vertical ? "always" : void 0,
+                      height: fullHeight ? "100%" : void 0
+                    },
+                    children: (renderItem ?? children)?.(item, index)
+                  },
+                  index
+                ))
+              }
+            ),
+            showArrows && hasPrev && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
               {
-                variant: "ghost",
-                size: "sm",
-                onClick: goPrev,
-                "aria-label": t("aria.previousSlide"),
-                className: cn(
-                  "rounded-full",
-                  "bg-surface/80",
-                  "backdrop-blur-sm",
-                  "shadow-elevation-interactive",
-                  "hover:bg-surface"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronLeft, { className: "w-5 h-5" })
+                position: "absolute",
+                className: vertical ? "right-2 top-2 z-10" : "left-2 top-1/2 -translate-y-1/2 z-10",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: goPrev,
+                    "aria-label": t("aria.previousSlide"),
+                    className: cn(
+                      "rounded-full",
+                      "bg-surface/80",
+                      "backdrop-blur-sm",
+                      "shadow-elevation-interactive",
+                      "hover:bg-surface"
+                    ),
+                    children: vertical ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronUp, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronLeft, { className: "w-5 h-5" })
+                  }
+                )
               }
-            )
-          }
-        ),
-        showArrows && hasNext && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          Box,
-          {
-            position: "absolute",
-            className: "right-2 top-1/2 -translate-y-1/2 z-10",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
+            ),
+            showArrows && hasNext && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
               {
-                variant: "ghost",
-                size: "sm",
-                onClick: goNext,
-                "aria-label": t("aria.nextSlide"),
-                className: cn(
-                  "rounded-full",
-                  "bg-surface/80",
-                  "backdrop-blur-sm",
-                  "shadow-elevation-interactive",
-                  "hover:bg-surface"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronRight, { className: "w-5 h-5" })
+                position: "absolute",
+                className: vertical ? "right-2 bottom-2 z-10" : "right-2 top-1/2 -translate-y-1/2 z-10",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: goNext,
+                    "aria-label": t("aria.nextSlide"),
+                    className: cn(
+                      "rounded-full",
+                      "bg-surface/80",
+                      "backdrop-blur-sm",
+                      "shadow-elevation-interactive",
+                      "hover:bg-surface"
+                    ),
+                    children: vertical ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronDown, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronRight, { className: "w-5 h-5" })
+                  }
+                )
+              }
+            ),
+            showDots && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
+              {
+                position: "absolute",
+                className: "bottom-3 left-0 right-0 z-10",
+                children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", align: "center", justify: "center", role: "tablist", "aria-label": t("aria.carouselSlides"), children: safeItems.map((_, index) => {
+                  const isActive = index === activeIndex;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    Box,
+                    {
+                      className: cn(
+                        "rounded-full cursor-pointer transition-all duration-fast"
+                      ),
+                      style: {
+                        width: isActive ? 10 : 8,
+                        height: isActive ? 10 : 8,
+                        backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted, #d4d4d8)",
+                        opacity: isActive ? 1 : 0.6
+                      },
+                      ...pressableProps(() => goToSlide(index)),
+                      role: "tab",
+                      "aria-selected": isActive,
+                      tabIndex: isActive ? 0 : -1,
+                      "aria-label": t("carousel.goToSlide", { number: index + 1 })
+                    },
+                    index
+                  );
+                }) })
               }
             )
-          }
-        ),
-        showDots && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          Box,
-          {
-            position: "absolute",
-            className: "bottom-3 left-0 right-0 z-10",
-            children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", align: "center", justify: "center", role: "tablist", "aria-label": t("aria.carouselSlides"), children: safeItems.map((_, index) => {
-              const isActive = index === activeIndex;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                Box,
-                {
-                  className: cn(
-                    "rounded-full cursor-pointer transition-all duration-fast"
-                  ),
-                  style: {
-                    width: isActive ? 10 : 8,
-                    height: isActive ? 10 : 8,
-                    backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted, #d4d4d8)",
-                    opacity: isActive ? 1 : 0.6
-                  },
-                  ...pressableProps(() => goToSlide(index)),
-                  role: "tab",
-                  "aria-selected": isActive,
-                  tabIndex: isActive ? 0 : -1,
-                  "aria-label": t("carousel.goToSlide", { number: index + 1 })
-                },
-                index
-              );
-            }) })
-          }
-        )
-      ] });
+          ]
+        }
+      );
     };
     Carousel.displayName = "Carousel";
   }
@@ -33296,59 +33387,10 @@ var init_ChartLegend = __esm({
 });
 
 // components/core/organisms/trace-edit-focus.ts
-function asString(v) {
-  return typeof v === "string" ? v : void 0;
-}
-function asLevel(v) {
-  if (typeof v === "string" && EDIT_FOCUS_LEVELS.has(v)) {
-    return v;
-  }
-  return "node";
-}
-function isEventPayload(v) {
-  return v !== null && v !== void 0 && typeof v === "object" && !Array.isArray(v) && !(v instanceof Date);
-}
-function parseEditFocus(value) {
-  if (!isEventPayload(value)) return null;
-  const payload = value;
-  const orbital = asString(payload.orbital);
-  if (orbital === void 0 || orbital.length === 0) return null;
-  const focus = {
-    level: asLevel(payload.level),
-    orbital,
-    label: asString(payload.label) ?? orbital
-  };
-  const trait = asString(payload.trait);
-  if (trait !== void 0) focus.trait = trait;
-  const transition = asString(payload.transition);
-  if (transition !== void 0) focus.transition = transition;
-  const state = asString(payload.state);
-  if (state !== void 0) focus.state = state;
-  const slot = asString(payload.slot);
-  if (slot !== void 0) focus.slot = slot;
-  const path = asString(payload.path);
-  if (path !== void 0) focus.path = path;
-  const patternType = asString(payload.patternType);
-  if (patternType !== void 0) focus.patternType = patternType;
-  const entity = asString(payload.entity);
-  if (entity !== void 0) focus.entity = entity;
-  const source = asString(payload.source);
-  if (source !== void 0) focus.source = source;
-  return focus;
-}
-var ELEMENT_SELECTED_EVENT, EDIT_FOCUS_LEVELS;
+var ELEMENT_SELECTED_EVENT;
 var init_trace_edit_focus = __esm({
   "components/core/organisms/trace-edit-focus.ts"() {
     ELEMENT_SELECTED_EVENT = "UI:ELEMENT_SELECTED";
-    EDIT_FOCUS_LEVELS = /* @__PURE__ */ new Set([
-      "node",
-      "slot",
-      "field",
-      "effect",
-      "trait",
-      "page",
-      "orbital"
-    ]);
   }
 });
 function getJepaBadgeVariant(probability) {
@@ -33364,6 +33406,8 @@ function ChatBar({
   placeholder,
   context,
   sendEvent = "CHAT_SEND",
+  focusRequest,
+  editFocus,
   className,
   ...rest
 }) {
@@ -33372,7 +33416,14 @@ function ChatBar({
   const [inputValue, setInputValue] = React98.useState("");
   const inputRef = React98.useRef(null);
   const [requestedPlaceholder, setRequestedPlaceholder] = React98.useState(null);
-  const [focus, setFocus] = React98.useState(null);
+  const focus = editFocus ?? null;
+  const requestId = focusRequest?.id;
+  const requestPlaceholder = focusRequest?.placeholder;
+  React98.useEffect(() => {
+    if (requestId === void 0) return;
+    if (requestPlaceholder !== void 0 && requestPlaceholder.length > 0) setRequestedPlaceholder(requestPlaceholder);
+    inputRef.current?.focus();
+  }, [requestId, requestPlaceholder]);
   React98.useLayoutEffect(() => {
     const el = inputRef.current;
     if (!el) return;
@@ -33382,36 +33433,21 @@ function ChatBar({
     el.style.overflowY = el.scrollHeight > INPUT_MAX_HEIGHT_PX ? "auto" : "hidden";
   }, [inputValue]);
   const clearFocus = React98.useCallback(() => {
-    setFocus(null);
     eventBus.emit(ELEMENT_SELECTED_EVENT, { focus: null });
   }, [eventBus]);
+  const clearSent = React98.useCallback(() => {
+    setInputValue("");
+    setRequestedPlaceholder(null);
+  }, []);
   const handleKeyDown = React98.useCallback((e) => {
     if (e.key !== "Enter" || e.shiftKey) return;
     const trimmed = inputValue.trim();
     if (!trimmed) return;
     e.preventDefault();
     eventBus.emit(`UI:${sendEvent}`, { message: trimmed });
-  }, [inputValue, eventBus, sendEvent]);
-  React98.useEffect(() => {
-    const unsubSend = eventBus.on(`UI:${sendEvent}`, () => {
-      setInputValue("");
-      setFocus(null);
-      setRequestedPlaceholder(null);
-    });
-    const unsubFocus = eventBus.on("UI:CHAT_FOCUS", (e) => {
-      const hint = e.payload?.placeholder;
-      if (typeof hint === "string" && hint.length > 0) setRequestedPlaceholder(hint);
-      inputRef.current?.focus();
-    });
-    const unsubSelect = eventBus.on(ELEMENT_SELECTED_EVENT, (e) => {
-      setFocus(parseEditFocus(e.payload?.focus));
-    });
-    return () => {
-      unsubSend();
-      unsubFocus();
-      unsubSelect();
-    };
-  }, [eventBus, sendEvent]);
+    clearSent();
+  }, [inputValue, eventBus, sendEvent, clearSent]);
+  React98.useEffect(() => eventBus.on(`UI:${sendEvent}`, clearSent), [eventBus, sendEvent, clearSent]);
   const trailingAction = status === "error" ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", size: "sm", action: "RETRY_GENERATION", className: "rounded-none flex-shrink-0 h-auto", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "refresh-cw", size: "xs" }),
     /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", children: t("openFile.retry") })
@@ -33458,6 +33494,7 @@ function ChatBar({
       size: "sm",
       action: sendEvent,
       actionPayload: { message: inputValue.trim() },
+      onClick: clearSent,
       disabled: !inputValue.trim(),
       "aria-label": t("chatBar.sendMessage"),
       className: "rounded-none flex-shrink-0 h-auto",
@@ -35676,16 +35713,6 @@ var init_TopNavItem = __esm({
     TopNavItem.displayName = "TopNavItem";
   }
 });
-
-// hooks/useAuthContext.ts
-function useAuthContext() {
-  return {
-    user: null,
-    loading: false,
-    signIn: void 0,
-    signOut: void 0
-  };
-}
 var init_useAuthContext = __esm({
   "hooks/useAuthContext.ts"() {
   }
@@ -36253,9 +36280,11 @@ var init_DashboardLayout = __esm({
       React98.useEffect(() => {
         registerNavItems(navItems);
       }, [navItems, registerNavItems]);
-      const { signOut: authSignOut } = useAuthContext();
       const user = userProp || (null);
-      const handleSignOut = onSignOutProp || authSignOut;
+      const handleSignOut = () => {
+        onSignOutProp?.();
+        eventBus.emit("UI:SIGN_OUT", {});
+      };
       const showSidebar = layoutMode === "sidebar" || isDrawer;
       const showHeader = layoutMode !== "minimal";
       const showBottomNav = layoutMode === "bottomnav";
@@ -36264,7 +36293,11 @@ var init_DashboardLayout = __esm({
         Box,
         {
           ref: layoutRef,
-          className: "@container/dashboard min-h-screen w-full bg-background surface-page flex flex-row items-stretch",
+          className: cn(
+            "@container/dashboard w-full bg-background surface-page flex flex-row items-stretch",
+            // A full-bleed shell is an app frame: viewport-bound, so a full-height child gets a real height.
+            fullBleed ? "h-screen overflow-hidden" : "min-h-screen"
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
@@ -36368,7 +36401,7 @@ var init_DashboardLayout = __esm({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: cn("flex-1 min-w-0", fullBleed ? "h-full min-h-0" : "min-h-screen"), children: [
               showHeader && /* @__PURE__ */ jsxRuntime.jsx(
                 Box,
                 {
@@ -36591,7 +36624,7 @@ var init_DashboardLayout = __esm({
                   id: "main-content",
                   tabIndex: -1,
                   className: cn(
-                    fullBleed ? "flex-1 min-h-0 flex flex-col focus:outline-none" : "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6 focus:outline-none",
+                    fullBleed ? "flex-1 min-h-0 flex flex-col overflow-y-auto focus:outline-none" : "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6 focus:outline-none",
                     // Reserve space for the fixed bottom nav so content isn't
                     // hidden under the tab bar.
                     showBottomNav && "pb-[calc(5rem+env(safe-area-inset-bottom))]"
@@ -47164,6 +47197,11 @@ function NavigateListener({ onNavigate }) {
   );
   return null;
 }
+function SignOutListener({ onSignOut }) {
+  const bus = useEventBus();
+  React98.useEffect(() => bus.on("UI:SIGN_OUT", () => onSignOut()), [bus, onSignOut]);
+  return null;
+}
 function OrbPreview({
   schema,
   mockData,
@@ -47184,7 +47222,8 @@ function OrbPreview({
   lazyLoader,
   schemaPath,
   onUnmatchedNavigate,
-  onSignIn
+  onSignIn,
+  onSignOut
 }) {
   if (serverUrl && transport) {
     throw new Error("OrbPreview accepts serverUrl OR transport, not both");
@@ -47472,6 +47511,7 @@ function OrbPreview({
                 /* @__PURE__ */ jsxRuntime.jsx(NavStackRefBridge, { apiRef: navStackRef }),
                 /* @__PURE__ */ jsxRuntime.jsxs(providers.OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(NavigateListener, { onNavigate: handleNavigate }),
+                  onSignOut !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(SignOutListener, { onSignOut }),
                   /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
                     providers.PageAccessHost,
                     {
@@ -47813,6 +47853,10 @@ function entityNameOf(ref) {
   if (typeof ref === "string") return ref;
   return "name" in ref ? ref.name : void 0;
 }
+function roleColors(role) {
+  if (role === "default") return { border: "var(--color-border)", dot: STATE_COLORS.default.border };
+  return { border: STATE_COLORS[role].border, dot: STATE_COLORS[role].border };
+}
 function eventHandleStyle(source) {
   const hint = Number.isFinite(source.positionHint) ? source.positionHint : 0.5;
   if (hint !== source.positionHint) {
@@ -48121,7 +48165,7 @@ function parentBoxOf(el, container, zoom) {
 function resolveLayoutAxis(el) {
   return getComputedStyle(layoutBoxOf(el)).flexDirection === "row" ? "horizontal" : "vertical";
 }
-var eventHandleLog, orbPreviewLog, ScreenSizeContext, CARD_MIN_WIDTH, CARD_MAX_WIDTH, PatternSelectionContext, CanvasToolsContext, CanvasStatePickerContext, CanvasVerifyContext, VERDICT_VARIANT, ROLE_COLORS, LAYER_ORDER, LAYER_LABEL_KEYS, LAYER_COLORS, TARGET_HANDLE_STYLE, SELECTION_STYLES, OrbPreviewNodeInner, OrbPreviewNode;
+var eventHandleLog, orbPreviewLog, ScreenSizeContext, CARD_MIN_WIDTH, CARD_MAX_WIDTH, PatternSelectionContext, CanvasToolsContext, CanvasStatePickerContext, CanvasVerifyContext, VERDICT_VARIANT, LAYER_ORDER, LAYER_LABEL_KEYS, LAYER_COLORS, TARGET_HANDLE_STYLE, SELECTION_STYLES, OrbPreviewNodeInner, OrbPreviewNode;
 var init_OrbPreviewNode = __esm({
   "components/avl/molecules/OrbPreviewNode.tsx"() {
     "use client";
@@ -48171,12 +48215,6 @@ var init_OrbPreviewNode = __esm({
       stale: "warning",
       running: "info"
     };
-    ROLE_COLORS = {
-      initial: { border: STATE_COLORS.initial.border, dot: STATE_COLORS.initial.border },
-      terminal: { border: STATE_COLORS.terminal.border, dot: STATE_COLORS.terminal.border },
-      hub: { border: STATE_COLORS.hub.border, dot: STATE_COLORS.hub.border },
-      default: { border: "var(--color-border)", dot: STATE_COLORS.default.border }
-    };
     LAYER_ORDER = ["Infrastructure", "Services", "UI Patterns", "Game", "ML", "Domain", "Community"];
     LAYER_LABEL_KEYS = {
       Infrastructure: "orbPreview.layer.infrastructure",
@@ -48247,7 +48285,7 @@ var init_OrbPreviewNode = __esm({
       const [hoverRect, setHoverRect] = React98.useState(null);
       const lastHoverElRef = React98.useRef(null);
       const role = data.stateRole ?? "default";
-      const colors = ROLE_COLORS[role] ?? ROLE_COLORS.default;
+      const colors = roleColors(role);
       const eventSources = data.eventSources ?? [];
       const layerColor = data.layer ? LAYER_COLORS[data.layer] : void 0;
       const isExpanded = Boolean(data.traitName);
@@ -49987,7 +50025,7 @@ var init_TagInput = __esm({
     TagInput.displayName = "TagInput";
   }
 });
-function asString2(v) {
+function asString(v) {
   return typeof v === "string" ? v : "";
 }
 function asNumberInput(v) {
@@ -50460,7 +50498,7 @@ function KnobField({
         EnumRadio,
         {
           suggested,
-          value: asString2(value),
+          value: asString(value),
           onChange: (v) => onChange(v),
           placeholder: question.helpText
         }
@@ -50498,7 +50536,7 @@ function KnobField({
         Input,
         {
           placeholder: question.helpText ?? t("knobField.yourAnswer"),
-          value: asString2(value),
+          value: asString(value),
           onChange: (e) => onChange(e.target.value)
         }
       );
@@ -69362,6 +69400,9 @@ function readsI18n(value) {
     const arr = value;
     return arr[0] === "i18n/t" || arr.some((v) => readsI18n(v));
   }
+  if (value !== null && typeof value === "object" && !React98__namespace.default.isValidElement(value) && !(value instanceof Date) && typeof value !== "function") {
+    return Object.values(value).some((v) => readsI18n(v));
+  }
   return false;
 }
 function needsRenderContext(value) {
@@ -70321,7 +70362,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     if (!transport?.subscribeHostDispatches) return;
     return transport.subscribeHostDispatches((_orbitalName, request, response) => {
       const traitName = request.targetTrait;
-      if (traitName === void 0 || !traitIndex.byName.has(traitName)) return;
+      if (traitName === void 0 || !hostDispatchInView(request, response, (t2) => traitIndex.byName.has(t2))) return;
       const composedBefore = new Map(store.callsitePayloads);
       void kernel.foldHostDispatch(request, response).then((outcome) => settleOutcome(traitName, request.event, request.payload, outcome, composedBefore));
     }, { clientId: getTabClientId() });
@@ -70463,6 +70504,7 @@ var init_useTraitStateMachine = __esm({
     init_traitRegistry();
     init_verificationRegistry();
     init_circuitVerificationObserver();
+    init_hostDispatchInView();
     init_useCircuitKernel();
     init_useBusIngress();
     init_useSlotFlush();