@almadar/ui 6.61.0 → 6.62.0

package/dist/{chunk-6PV4LASE.js → chunk-G6EFTACU.js}

@@ -1,14 +1,14 @@
-import { pressableProps, Box, HStack, useCanvasTheme, STATE_COLORS, avlSeries, isAtlasAsset, getAtlas, subRectFor, VStack, avlTint, CONNECTION_COLORS, parseTraitLevel, AVL_INK, AVL_FONT, AVL_STROKE, getStateRole, effectCategoryOf, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, asEffectOperator, Stack, DrawSkinnedMesh, DrawShape, DrawMesh, DrawGroup, DrawFxLayer, withSeries, markColor, resolveDrawableColors, traitLevelFromTrait, resolveThemeColor, applyLineCharacter, fillLabel, labelText, THEME_SERIES, CONFETTI_BURST_KEYFRAMES, STRETCHED_CONTROL, rowOpenControlProps, STRETCHED_ABOVE, createConfettiParticles, collectDrawnItems, buildHitIndex, resolveAssetSource, blit, withPreviewPosition, hitTestSprites, DrawableRegistryContext, outlineStroke, markStrokeWidth, outlineCarriesFill, markDash, labelFont, fillMark, tracePolyline, arcPoints, drawMarker, getOrLoadImage, expandFxLayer, paintSkinnedMesh, isValidScenePos, isAnimatedGroup, applyMeshAnimation, paintShape, parseApplicationLevel, parseOrbitalLevel, traitTransitionRenderUi, spriteRect, effectZoneOf, motionTiming, layoutScale, spriteAssetState, getImageStatus, atlasUrlOf, atlasFailed, isSpriteSheetAtlas, fxHash01, traitEventWires, isAnimatedShape, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, avlBlend } from './chunk-MGN6B6OQ.js';
-import { INLINE_TEXT_ATTR, Typography } from './chunk-KZRAMPM6.js';
-import { usePendingAction, useMediaQuery, usePrefersReducedMotion, useTranslate as useTranslate$1, usePageHead, usePendingScopeValue, PendingScopeContext, useRenderI18n, useScopeHasPending, runTickFrame, claimDelivery, beginPending, endPending, useDragReorder, useQuerySingleton, usePullToRefresh, useInfiniteScroll, useCanvasGestures, useAuthContext, useSwipeGesture, usePendingRows, useLongPress, useDraggable as useDraggable$1, useDropZone } from './chunk-UTSDPJUP.js';
+import { pressableProps, Box, HStack, useCanvasTheme, avlSeries, isAtlasAsset, getAtlas, subRectFor, VStack, avlTint, CONNECTION_COLORS, parseTraitLevel, STATE_COLORS, AVL_INK, AVL_FONT, AVL_STROKE, getStateRole, effectCategoryOf, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, asEffectOperator, Stack, DrawSkinnedMesh, DrawShape, DrawMesh, DrawGroup, DrawFxLayer, withSeries, markColor, resolveDrawableColors, traitLevelFromTrait, resolveThemeColor, applyLineCharacter, fillLabel, labelText, THEME_SERIES, CONFETTI_BURST_KEYFRAMES, STRETCHED_CONTROL, rowOpenControlProps, STRETCHED_ABOVE, createConfettiParticles, collectDrawnItems, buildHitIndex, resolveAssetSource, blit, withPreviewPosition, hitTestSprites, DrawableRegistryContext, outlineStroke, markStrokeWidth, outlineCarriesFill, markDash, labelFont, fillMark, tracePolyline, arcPoints, drawMarker, getOrLoadImage, expandFxLayer, paintSkinnedMesh, isValidScenePos, isAnimatedGroup, applyMeshAnimation, paintShape, parseApplicationLevel, parseOrbitalLevel, traitTransitionRenderUi, spriteRect, effectZoneOf, motionTiming, layoutScale, spriteAssetState, getImageStatus, atlasUrlOf, atlasFailed, isSpriteSheetAtlas, fxHash01, traitEventWires, isAnimatedShape, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, avlBlend } from './chunk-EDPUQ2ZJ.js';
+import { INLINE_TEXT_ATTR, Typography } from './chunk-ERDYADVZ.js';
+import { usePendingAction, useMediaQuery, usePrefersReducedMotion, useTranslate as useTranslate$1, usePageHead, usePendingScopeValue, PendingScopeContext, useRenderI18n, useScopeHasPending, runTickFrame, claimDelivery, beginPending, endPending, useDragReorder, useQuerySingleton, usePullToRefresh, useInfiniteScroll, useCanvasGestures, useAuthContext, useSwipeGesture, usePendingRows, useLongPress, useDraggable as useDraggable$1, useDropZone } from './chunk-DXPCAQJU.js';
 import { useTapReveal } from './chunk-XJTHMW4G.js';
 import { useEventBus, useEventListener } from './chunk-CHNC4UYE.js';
+import { ALL_SLOTS } from './chunk-L3MTZ3RH.js';
+import { isNotificationSlot, isPortalSlot } from './chunk-PEST66PN.js';
 import { computeLineDiff, isEditorMotion, applyMotion, isEditorOperator, motionRange, applyOperator, gearTeethPath, registerTrait, unregisterTrait, asEnterAnimation, slotPlaysDefaultEnter, useSlotEnterRestart, ENTER_SLOT_CLASS, perfTimeAsync, enterClassName, getNestedValue, parseLessonSegments, isDebugEnabled2, onDebugToggle, debugGroup, debug, debugGroupEnd, resolveImageUrl, perfStart, perfEnd, isDebugEnabled, profilerOnRender, parseContentSegments, parseMarkdownWithCodeBlocks, subscribeToTraitChanges, subscribeToTickChanges, subscribeToGuardChanges, subscribeToDebugEvents, getEntitySnapshot, getDebugEvents, getGuardHistory, getAllTicks, getAllTraits } from './chunk-N4IJS5DD.js';
 import { isEditableTarget, usePresence, bindTraitStateGetter, registerTraitSnapshot, isMotionEnabled, recordTransition, recordingTransport, recordServerResponse, serverEffectTraces, Presence, bindCanvasCapture, bindLastDrawables, subscribeToVerification, updateAssetStatus, resolveKeyMapEvent, getSummary, getBridgeHealth, getTransitions, getAllChecks } from './chunk-N23SVGTH.js';
 import { cn, domPassthrough } from './chunk-64WACXM7.js';
-import { formatValue, toDateTimeInputValue, toDateInputValue, sortRows, formatDate } from './chunk-6ZCU3BQN.js';
-import { ALL_SLOTS } from './chunk-L3MTZ3RH.js';
-import { isNotificationSlot, isPortalSlot } from './chunk-PEST66PN.js';
+import { formatValue, toDateTimeInputValue, toDateInputValue, sortRows, formatDate } from './chunk-CXQENFO2.js';
 import { __publicField } from './chunk-QPXIAUJD.js';
 import * as React93 from 'react';
 import React93__default, { createContext, useCallback, useState, useRef, useEffect, lazy, useMemo, useLayoutEffect, useId, useContext, useSyncExternalStore, Suspense, useReducer, Profiler } from 'react';
@@ -19,7 +19,7 @@ import { actionTestId, LOADING_STATE_MARKER, FieldTypeSchema, EFFECT_OPERATORS,
 import { renderUiEntriesOf, SELF_OVERLAY_PATTERN_TYPES, getPatternDefinition, isDrawHostPattern, getPatternFieldsContract, getComponentForPattern, isEntityAwarePattern, eventKeyPropsOf, eventListPropsOf } from '@almadar/core/patterns';
 import { useScopedMode, useThemeScope, UISlotProvider, useUISlots, useTheme } from '@almadar/ui/context';
 import * as LucideIcons2 from 'lucide-react';
-import { Loader2, X, Code, FileText, WrapText, Check, Copy, ChevronLeft, ChevronRight, AlertCircle, Circle, Clock, CheckCircle2, TrendingUp, TrendingDown, Minus, Eraser, Search, Bold, Italic, Underline, Strikethrough, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Link, Image as Image$1, PauseCircle, HelpCircle, Upload, ZoomIn, Menu as Menu$1, ZoomOut, RotateCcw, DollarSign, Download, Printer, ArrowLeft, Link2, AlertTriangle, Trash2, Play, Terminal, CheckCircle, XCircle, GitBranch, Pencil, Eye, Plus, Lightbulb, ArrowRight, Trash, ChevronDown } from 'lucide-react';
+import { Loader2, X, Code, FileText, WrapText, Check, Copy, ChevronLeft, ChevronRight, AlertCircle, Circle, Clock, CheckCircle2, TrendingUp, TrendingDown, Minus, Eraser, Search, Bold, Italic, Underline, Strikethrough, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Link, Image as Image$1, PauseCircle, HelpCircle, Upload, ZoomIn, Menu as Menu$1, ZoomOut, RotateCcw, DollarSign, Download, Printer, ArrowLeft, Link2, AlertTriangle, Trash2, Play, Terminal, CheckCircle, XCircle, ChevronUp, ChevronDown, GitBranch, Pencil, Eye, Plus, Lightbulb, ArrowRight, Trash } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslate, createTranslate, I18nProvider, useRenderI18n as useRenderI18n$1, useFormatContext } from '@almadar/ui/hooks';
 import { createPortal } from 'react-dom';
@@ -37,7 +37,7 @@ import createHighlightElement from 'react-syntax-highlighter/dist/esm/create-ele
 import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.js';
 import light from 'react-syntax-highlighter/dist/esm/styles/prism/vs.js';
 import { orbLanguage, loloLanguage, ORB_COLORS, translateLolo, translateOrb } from '@almadar/syntax';
-import { coreTables, localeDirection } from '@almadar/core/i18n';
+import { getVocabulary, localeDirection } from '@almadar/core/i18n';
 import langJson from 'react-syntax-highlighter/dist/esm/languages/prism/json.js';
 import langJavascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript.js';
 import langTypescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript.js';
@@ -2317,6 +2317,17 @@ var SvgBranch = ({
   return /* @__PURE__ */ jsx(Fragment, { children: inner });
 };
 SvgBranch.displayName = "SvgBranch";
+
+// lib/svgMotion.ts
+var SVG_MOTION_CLASSES = {
+  flowDash: "almadar-svg-flow-dash",
+  pulseRing: "almadar-svg-pulse-ring",
+  pulseExpand: "almadar-svg-pulse-expand"
+};
+function svgMotionClass(motion, animated) {
+  if (!animated || !isMotionEnabled()) return void 0;
+  return SVG_MOTION_CLASSES[motion];
+}
 var SvgConnection = ({
   x1 = 10,
   y1 = 50,
@@ -2341,7 +2352,7 @@ var SvgConnection = ({
     {
       ...asRoot ? void 0 : a11y,
       className: [
-        variant === "animated" ? "almadar-svg-flow-dash" : void 0,
+        svgMotionClass("flowDash", variant === "animated"),
         className
       ].filter(Boolean).join(" ") || void 0,
       x1,
@@ -2408,7 +2419,7 @@ var SvgFlow = ({
         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
       }
     )
@@ -2833,7 +2844,7 @@ var SvgNode = ({
         stroke: color,
         strokeWidth: 1,
         opacity: 0.3,
-        className: "almadar-svg-pulse-ring"
+        className: svgMotionClass("pulseRing", true)
       }
     ),
     /* @__PURE__ */ jsx(
@@ -2866,18 +2877,6 @@ var SvgNode = ({
   return inner;
 };
 SvgNode.displayName = "SvgNode";
-var PULSE_KEYFRAMES = `
-@keyframes almadar-svg-pulse-expand {
-  0% {
-    transform: scale(0.3);
-    opacity: 0.4;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-`;
 var SvgPulse = ({
   cx = 70,
   cy = 70,
@@ -2893,8 +2892,8 @@ var SvgPulse = ({
   ...rest
 }) => {
   const a11y = domPassthrough(rest);
+  const pulseClass2 = svgMotionClass("pulseExpand", animated);
   const inner = /* @__PURE__ */ jsxs("g", { ...asRoot ? void 0 : a11y, className, opacity, children: [
-    animated && /* @__PURE__ */ jsx("style", { children: PULSE_KEYFRAMES }),
     Array.from({ length: rings }).map((_, i) => {
       const ringRadius = (i + 1) / rings * maxRadius;
       const ringOpacity = 1 - i / rings * 0.6;
@@ -2908,11 +2907,9 @@ var SvgPulse = ({
           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
       );
@@ -6919,7 +6916,7 @@ function renderVariant(variant, rows2, columns, fields, className) {
 }
 Skeleton.displayName = "Skeleton";
 var LazySlotContentRenderer = lazy(
-  () => import('./UISlotRenderer-EEOXSJCI.js').then((m) => ({
+  () => import('./UISlotRenderer-NZBV5BUI.js').then((m) => ({
     default: m.SlotContentRenderer
   }))
 );
@@ -14437,7 +14434,7 @@ var CodeBlock = React93__default.memo(
       () => naturalTabs?.find((lang) => lang === pageLocale) ?? naturalTabs?.[0] ?? "en"
     );
     const activeNaturalLanguage = naturalTabs?.includes(naturalLanguage) === true ? naturalLanguage : naturalTabs?.[0] ?? "en";
-    const codeDir = naturalTabs && coreTables[activeNaturalLanguage].meta.rtl ? "rtl" : "ltr";
+    const codeDir = naturalTabs && getVocabulary(activeNaturalLanguage).meta.rtl ? "rtl" : "ltr";
     const translationCache = useMemo(() => /* @__PURE__ */ new Map(), [englishCode, files]);
     const translateFor = useCallback(
       (source, sourceLanguage, cacheKey) => {
@@ -14454,14 +14451,14 @@ var CodeBlock = React93__default.memo(
     const code = translateFor(englishCode, language, "code");
     const naturalTabItems = naturalTabs?.map((lang) => ({
       id: `lang-${lang}`,
-      label: coreTables[lang].meta.name,
+      label: getVocabulary(lang).meta.name,
       content: null
     }));
     const naturalTabStrip = naturalTabs && naturalTabItems ? /* @__PURE__ */ jsx(
       Box,
       {
         className: "border-b border-border",
-        dir: coreTables[activeNaturalLanguage].meta.rtl ? "rtl" : "ltr",
+        dir: getVocabulary(activeNaturalLanguage).meta.rtl ? "rtl" : "ltr",
         "data-testid": "codeblock-language-tabs",
         children: /* @__PURE__ */ jsx(
           Tabs,
@@ -18352,10 +18349,10 @@ var AvlState = ({
 }) => {
   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__ */ jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
     isInitial && /* @__PURE__ */ jsx(
       "circle",
@@ -21987,18 +21984,30 @@ var Carousel = ({
   loop = false,
   slideChangeEvent,
   slideChangePayload,
+  orientation = "horizontal",
+  fullHeight = false,
+  loadMoreEvent,
+  loadMoreAhead = 2,
+  hasMore = false,
+  isLoadingMore = false,
   className,
   ...rest
 }) => {
+  const vertical = orientation === "vertical";
+  const loadRequestedAt = useRef(null);
   const [activeIndex, setActiveIndex] = useState(0);
   const scrollRef = useRef(null);
+  const rootRef = useRef(null);
+  const [topOffset, setTopOffset] = useState(0);
   const autoPlayRef = useRef(null);
   const eventBus = useSafeEventBus3();
   const { t } = useTranslate();
   const safeItems = items ?? [];
   const totalSlides = safeItems.length;
+  const announcedIndex = useRef(0);
   const emitSlideChange = useCallback(
     (newIndex) => {
+      announcedIndex.current = newIndex;
       if (slideChangeEvent) {
         eventBus.emit(`UI:${slideChangeEvent}`, {
           index: newIndex,
@@ -22012,13 +22021,13 @@ var Carousel = ({
     (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 = useCallback(
     (index) => {
@@ -22042,10 +22051,7 @@ var Carousel = ({
     goToSlide(activeIndex - 1);
   }, [goToSlide, activeIndex]);
   const swipeHandlers = useSwipeGesture(
-    {
-      onSwipeLeft: goNext,
-      onSwipeRight: goPrev
-    },
+    vertical ? { onSwipeUp: goNext, onSwipeDown: goPrev } : { onSwipeLeft: goNext, onSwipeRight: goPrev },
     { threshold: 40 }
   );
   useEffect(() => {
@@ -22070,138 +22076,189 @@ var Carousel = ({
   const handleScroll = 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;
-      }
-      return prev;
-    });
-  }, [totalSlides]);
+    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]);
+  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;
+  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 = 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();
+      }
+    },
+    [vertical, goNext, goPrev]
+  );
   const hasPrev = loop || activeIndex > 0;
   const hasNext = loop || activeIndex < totalSlides - 1;
   if (totalSlides === 0) return null;
-  return /* @__PURE__ */ jsxs(Box, { position: "relative", overflow: "hidden", ...domPassthrough(rest), className: cn("w-full", className), children: [
-    /* @__PURE__ */ 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__ */ jsx(
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(
-      Box,
-      {
-        position: "absolute",
-        className: "left-2 top-1/2 -translate-y-1/2 z-10",
-        children: /* @__PURE__ */ jsx(
-          Button,
+            onScroll: handleScroll,
+            onPointerDown: swipeHandlers.onPointerDown,
+            onPointerMove: swipeHandlers.onPointerMove,
+            onPointerUp: swipeHandlers.onPointerUp,
+            onPointerCancel: swipeHandlers.onPointerCancel,
+            children: safeItems.map((item, index) => /* @__PURE__ */ 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__ */ 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__ */ jsx(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__ */ 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__ */ jsx(ChevronUp, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
+              }
+            )
           }
-        )
-      }
-    ),
-    showArrows && hasNext && totalSlides > 1 && /* @__PURE__ */ jsx(
-      Box,
-      {
-        position: "absolute",
-        className: "right-2 top-1/2 -translate-y-1/2 z-10",
-        children: /* @__PURE__ */ jsx(
-          Button,
+        ),
+        showArrows && hasNext && totalSlides > 1 && /* @__PURE__ */ 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__ */ jsx(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__ */ 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__ */ jsx(ChevronDown, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" })
+              }
+            )
+          }
+        ),
+        showDots && totalSlides > 1 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            className: "bottom-3 left-0 right-0 z-10",
+            children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
-      Box,
-      {
-        position: "absolute",
-        className: "bottom-3 left-0 right-0 z-10",
-        children: /* @__PURE__ */ 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__ */ 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";
 var TYPE_STYLE = {
@@ -23223,6 +23280,8 @@ function ChatBar({
   placeholder,
   context,
   sendEvent = "CHAT_SEND",
+  focusRequest,
+  editFocus,
   className,
   ...rest
 }) {
@@ -23231,7 +23290,14 @@ function ChatBar({
   const [inputValue, setInputValue] = useState("");
   const inputRef = useRef(null);
   const [requestedPlaceholder, setRequestedPlaceholder] = useState(null);
-  const [focus, setFocus] = useState(null);
+  const focus = editFocus ?? null;
+  const requestId = focusRequest?.id;
+  const requestPlaceholder = focusRequest?.placeholder;
+  useEffect(() => {
+    if (requestId === void 0) return;
+    if (requestPlaceholder !== void 0 && requestPlaceholder.length > 0) setRequestedPlaceholder(requestPlaceholder);
+    inputRef.current?.focus();
+  }, [requestId, requestPlaceholder]);
   useLayoutEffect(() => {
     const el = inputRef.current;
     if (!el) return;
@@ -23241,36 +23307,21 @@ function ChatBar({
     el.style.overflowY = el.scrollHeight > INPUT_MAX_HEIGHT_PX ? "auto" : "hidden";
   }, [inputValue]);
   const clearFocus = useCallback(() => {
-    setFocus(null);
     eventBus.emit(ELEMENT_SELECTED_EVENT, { focus: null });
   }, [eventBus]);
+  const clearSent = useCallback(() => {
+    setInputValue("");
+    setRequestedPlaceholder(null);
+  }, []);
   const handleKeyDown = 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]);
-  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]);
+  useEffect(() => eventBus.on(`UI:${sendEvent}`, clearSent), [eventBus, sendEvent, clearSent]);
   const trailingAction = status === "error" ? /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", action: "RETRY_GENERATION", className: "rounded-none flex-shrink-0 h-auto", children: [
     /* @__PURE__ */ jsx(Icon, { name: "refresh-cw", size: "xs" }),
     /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t("openFile.retry") })
@@ -23317,6 +23368,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",
@@ -25494,13 +25546,16 @@ var DashboardLayout = ({
   useEffect(() => {
     registerNavItems(navItems);
   }, [navItems, registerNavItems]);
-  const { user: authUser, signOut: authSignOut } = useAuthContext();
+  const { user: authUser } = useAuthContext();
   const user = userProp || (authUser ? {
     name: authUser.displayName || authUser.email?.split("@")[0] || t("dashboard.defaultUserName"),
     email: authUser.email || "",
     avatar: authUser.photoURL || void 0
   } : 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";
@@ -25509,7 +25564,11 @@ var DashboardLayout = ({
     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__ */ jsx(
           Button,
@@ -25613,7 +25672,7 @@ var DashboardLayout = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
+        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: cn("flex-1 min-w-0", fullBleed ? "h-full min-h-0" : "min-h-screen"), children: [
           showHeader && /* @__PURE__ */ jsx(
             Box,
             {
@@ -25836,7 +25895,7 @@ var DashboardLayout = ({
               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))]"
@@ -28114,7 +28173,7 @@ var MapViewImpl = lazy(async () => {
   });
   L.Marker.prototype.options.icon = defaultIcon;
   const { useEffect: useEffect77, useRef: useRef79, useCallback: useCallback92, useState: useState107 } = React93__default;
-  const { Typography: Typography2 } = await import('./Typography-BY4A2NBY.js');
+  const { Typography: Typography2 } = await import('./Typography-KBATMU2V.js');
   const { useEventBus: useEventBus2 } = await import('./useEventBus-SWRN475O.js');
   function MapUpdater({ centerLat, centerLng, zoom }) {
     const map = useMap();
@@ -35283,6 +35342,14 @@ function recordDispatchVerdict(orbitalName, event, verdict) {
     effectResults: serverEffectTraces(response.effectResults)
   });
 }
+
+// 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 tabClientId;
 function getTabClientId() {
   if (tabClientId === void 0) tabClientId = crypto.randomUUID();
@@ -35575,6 +35642,9 @@ function readsI18n(value) {
     const arr = value;
     return arr[0] === "i18n/t" || arr.some((v) => readsI18n(v));
   }
+  if (value !== null && typeof value === "object" && !React93__default.isValidElement(value) && !(value instanceof Date) && typeof value !== "function") {
+    return Object.values(value).some((v) => readsI18n(v));
+  }
   return false;
 }
 function needsRenderContext(value) {
@@ -35652,7 +35722,7 @@ function resolveLambdaBindings(body, params, item, index) {
   return body;
 }
 var LazySlotContentRenderer2 = React93__default.lazy(
-  () => import('./UISlotRenderer-EEOXSJCI.js').then((m) => ({ default: m.SlotContentRenderer }))
+  () => import('./UISlotRenderer-NZBV5BUI.js').then((m) => ({ default: m.SlotContentRenderer }))
 );
 function deferLambdaEntityExprs(value) {
   if (typeof value === "string") {
@@ -36485,7 +36555,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() });
@@ -36964,6 +37034,11 @@ function NavigateListener({ onNavigate }) {
   );
   return null;
 }
+function SignOutListener({ onSignOut }) {
+  const bus = useEventBus();
+  useEffect(() => bus.on("UI:SIGN_OUT", () => onSignOut()), [bus, onSignOut]);
+  return null;
+}
 function OrbPreview({
   schema,
   mockData,
@@ -36984,7 +37059,8 @@ function OrbPreview({
   lazyLoader,
   schemaPath,
   onUnmatchedNavigate,
-  onSignIn
+  onSignIn,
+  onSignOut
 }) {
   if (serverUrl && transport) {
     throw new Error("OrbPreview accepts serverUrl OR transport, not both");
@@ -37272,6 +37348,7 @@ function OrbPreview({
                 /* @__PURE__ */ jsx(NavStackRefBridge, { apiRef: navStackRef }),
                 /* @__PURE__ */ jsxs(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: [
                   /* @__PURE__ */ jsx(NavigateListener, { onNavigate: handleNavigate }),
+                  onSignOut !== void 0 && /* @__PURE__ */ jsx(SignOutListener, { onSignOut }),
                   /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(
                     PageAccessHost,
                     {
@@ -37710,12 +37787,10 @@ var VERDICT_VARIANT = {
   stale: "warning",
   running: "info"
 };
-var 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 }
-};
+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 };
+}
 var LAYER_ORDER = ["Infrastructure", "Services", "UI Patterns", "Game", "ML", "Domain", "Community"];
 var LAYER_LABEL_KEYS = {
   Infrastructure: "orbPreview.layer.infrastructure",
@@ -38094,7 +38169,7 @@ var OrbPreviewNodeInner = (props) => {
   const [hoverRect, setHoverRect] = useState(null);
   const lastHoverElRef = 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);
@@ -55673,8 +55748,8 @@ var COMPONENT_REGISTRY = {
   }
 };
 var scopeWrapLog = createLogger("almadar:ui:scope-wrap");
-var LazyTraitValueFrame = React93__default.lazy(() => import('./TraitValueFrame-WOXNLLMM.js'));
-var LazyBehaviorValueFrame = React93__default.lazy(() => import('./BehaviorValueFrame-QTD7BWOI.js'));
+var LazyTraitValueFrame = React93__default.lazy(() => import('./TraitValueFrame-X6IL3UST.js'));
+var LazyBehaviorValueFrame = React93__default.lazy(() => import('./BehaviorValueFrame-QYFJEMN5.js'));
 var TRAIT_BINDING_RE = /^@trait\.([A-Z][A-Za-z0-9]*)$/;
 function slotPropsOf(content) {
   return typeof content.props === "string" ? {} : content.props;