@almadar/shell-web 0.1.0 → 1.0.0

package/dist/{chunk-YDNJLLG6.js → chunk-57DC34LY.js}

@@ -1,5 +1,5 @@
-import { useDraggable, useDropZone } from './chunk-L2DEKY4J.js';
-import { Box, domPassthrough, useTranslate, Icon, pressableProps, Typography } from './chunk-MBQAMMSE.js';
+import { useDraggable, useDropZone } from './chunk-VO2TTLS5.js';
+import { Box, domPassthrough, useTranslate, Icon, pressableProps, Typography } from './chunk-4YXBKHHM.js';
 import React, { createContext, useState, useCallback, useRef, useEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -253,6 +253,9 @@ var FlatTreeNodeItem = ({
   const nav = look === "nav";
   const rowRef = useRef(null);
   const treeNav = useContext(TreeNavContext);
+  React.useEffect(() => {
+    if (isSelected) rowRef.current?.scrollIntoView({ block: "center" });
+  }, [isSelected]);
   const handleClick = useCallback(() => {
     if (hasChildren && !onNodeSelect) onToggle(item.id, expanded);
     onNodeSelect?.(item.id);
@@ -390,6 +393,7 @@ function ancestorsOf(id, byId) {
 var FlatFileTree = ({
   items,
   selectedId,
+  expandedPaths,
   look = "files",
   onNodeSelect,
   onNodeAction,
@@ -403,20 +407,24 @@ var FlatFileTree = ({
   const [overrides, setOverrides] = useState(() => /* @__PURE__ */ new Map());
   const byId = React.useMemo(() => new Map(items.map((node) => [node.id, node])), [items]);
   const selectedAncestors = React.useMemo(() => ancestorsOf(selectedId, byId), [selectedId, byId]);
-  const lastSelectedRef = React.useRef(selectedId);
+  const listedKey = (expandedPaths ?? []).join("\n");
+  const listed = React.useMemo(() => new Set(expandedPaths ?? []), [listedKey]);
+  const lastRevealRef = React.useRef(`${selectedId ?? ""}\0${listedKey}`);
   React.useEffect(() => {
-    if (selectedId === lastSelectedRef.current) return;
-    lastSelectedRef.current = selectedId;
+    const reveal = `${selectedId ?? ""}\0${listedKey}`;
+    if (reveal === lastRevealRef.current) return;
+    lastRevealRef.current = reveal;
+    const opened = [...selectedAncestors, ...listed];
     setOverrides((prev) => {
-      if (![...selectedAncestors].some((a) => prev.get(a) === false)) return prev;
+      if (!opened.some((a) => prev.get(a) === false)) return prev;
       const next = new Map(prev);
-      for (const a of selectedAncestors) if (next.get(a) === false) next.delete(a);
+      for (const a of opened) if (next.get(a) === false) next.delete(a);
       return next;
     });
-  }, [selectedId, selectedAncestors]);
+  }, [selectedId, selectedAncestors, listedKey, listed]);
   const isExpanded = useCallback(
-    (id, depth) => overrides.get(id) ?? (depth < 1 || selectedAncestors.has(id)),
-    [overrides, selectedAncestors]
+    (id, depth) => overrides.get(id) ?? (depth < 1 || selectedAncestors.has(id) || listed.has(id)),
+    [overrides, selectedAncestors, listed]
   );
   const onToggle = useCallback((id, effective) => {
     setOverrides((prev) => {
@@ -484,6 +492,7 @@ var FileTree = ({
         ...rest,
         items,
         selectedId,
+        expandedPaths,
         look,
         onNodeSelect,
         onNodeAction,

package/dist/{chunk-SJGJJKBY.js → chunk-AB3X7QTE.js}

@@ -1,6 +1,6 @@
-import { AvlEffect } from './chunk-DZ42OJQC.js';
-import { effectCategoryOf } from './chunk-DFNZUYX4.js';
-import { useThemeScope, Box, useTapReveal, Typography, cn, domPassthrough, usePresence, useDialogBehavior, SurfaceBoundary, VStack, useTranslate } from './chunk-MBQAMMSE.js';
+import { AvlEffect } from './chunk-DZBQA2OW.js';
+import { effectCategoryOf } from './chunk-UXLE3IPR.js';
+import { useThemeScope, Box, useTapReveal, Typography, cn, domPassthrough, usePresence, useDialogBehavior, SurfaceBoundary, VStack, useTranslate } from './chunk-4YXBKHHM.js';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useId, useState, useRef, useLayoutEffect, useEffect } from 'react';
@@ -420,6 +420,9 @@ var Popover = ({
       style: {
         left: placement.left,
         top: placement.top,
+        // Sized by its content, not by the room right of `left`: a placement-dependent width re-places it forever.
+        width: "max-content",
+        maxWidth: `calc(100vw - ${2 * VIEWPORT_EDGE_PADDING}px)`,
         ...popoverWidth === 0 ? { visibility: "hidden" } : void 0
       },
       ...domPassthrough(rest),

package/dist/{chunk-AILY3XPS.js → chunk-AE7VCQB6.js}

@@ -1,9 +1,9 @@
 import { resolveThemeForRuntime, themeTokensToCssVars } from './chunk-3BBUBJFF.js';
 import { useUISlotManager } from './chunk-YHMRX6YA.js';
-import { useThemeScope, useTheme, keyInViewerMode, ThemeScopeContext, Box, cn } from './chunk-MBQAMMSE.js';
+import { useThemeScope, useTheme, keyInViewerMode, ThemeScopeContext, Box, cn } from './chunk-4YXBKHHM.js';
 import { createContext, useMemo, useContext, useCallback, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { ANONYMOUS_USER, isThemeRegistryKey } from '@almadar/core';
+import { ANONYMOUS_USER, isThemeRegistryKey, toPayloadValue } from '@almadar/core';
 export { ANONYMOUS_USER } from '@almadar/core';
 import { createLogger } from '@almadar/logger';
 
@@ -127,8 +127,6 @@ function useUserForEvaluation() {
   const { user, isLoggedIn } = useUser();
   return isLoggedIn && user ? user : void 0;
 }
-
-// src/lib/design-classes.ts
 var DESIGN_COLOR_TOKENS = [
   "primary",
   "primary-foreground",
@@ -459,7 +457,7 @@ function collectClasses(value, found) {
 }
 function classesOfPart(part) {
   const found = /* @__PURE__ */ new Set();
-  collectClasses(JSON.parse(JSON.stringify(part)), found);
+  collectClasses(toPayloadValue(part), found);
   return [...found];
 }
 var classesByOrbital = /* @__PURE__ */ new WeakMap();
@@ -541,7 +539,8 @@ function OrbitalThemeProvider({ theme: declared, override, children }) {
   const darkTypeScale = resolvedMode === "dark" ? resolved?.variants?.dark?.typeScale : void 0;
   useFontImport(darkTypeScale?.fontImport ?? resolved?.tokens.typeScale?.fontImport);
   if (isThemeRegistryKey(theme)) {
-    const { key, mode: keyMode } = keyInViewerMode(theme, availableThemes, resolvedMode);
+    const inherited = !override && parent.override ? { key: parent.override, mode: parent.mode } : void 0;
+    const { key, mode: keyMode } = inherited ?? keyInViewerMode(theme, availableThemes, resolvedMode);
     const mode = keyMode ?? parent.mode;
     return /* @__PURE__ */ jsx(
       ThemeScopeContext.Provider,

package/dist/{chunk-FAJDTHWC.js → chunk-AGXD77SL.js}

@@ -1,4 +1,4 @@
-import { useEventBus, useTranslate, Box, VStack, Icon, cn, Typography, Button, domPassthrough } from './chunk-MBQAMMSE.js';
+import { useEventBus, useTranslate, Box, VStack, Icon, cn, Typography, Button, domPassthrough } from './chunk-4YXBKHHM.js';
 import { EMPTY_STATE_MARKER } from '@almadar/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -34,7 +34,7 @@ var EmptyState = ({
     onAction?.();
   };
   const iconName = typeof icon === "string" ? ICON_NAME_ALIASES[icon] ?? icon : void 0;
-  const iconComponent = typeof icon === "function" ? icon : void 0;
+  const iconComponent = typeof icon === "string" ? void 0 : icon;
   const hasIcon = Boolean(iconName || iconComponent);
   const isDestructive = destructive || variant === "error";
   const isSuccess = variant === "success";

package/dist/chunk-AU7O65OX.js

@@ -0,0 +1,66 @@
+import { applyFrame } from '@almadar/shell-runtime/kernel/frame-applier';
+
+function runTickFrame(ports, now) {
+  return applyFrame(ports.kernel.frame(now()), ports.client, ports.post);
+}
+function createTickDriver(ports) {
+  let handle;
+  let pending = false;
+  let stopped = true;
+  let unsubscribe;
+  const disarm = () => {
+    if (handle !== void 0) ports.cancelFrame(handle);
+    handle = void 0;
+  };
+  const arm = () => {
+    if (stopped || handle !== void 0 || ports.visibility.hidden()) return;
+    handle = ports.requestFrame(onFrame);
+  };
+  const runFrame = async () => {
+    const applied = await runTickFrame(ports, ports.now);
+    if (applied.firedCount > 0 || applied.errors.length > 0) ports.onApplied?.(applied);
+  };
+  function onFrame() {
+    handle = void 0;
+    if (stopped) return;
+    if (ports.kernel.tickCount() === 0) {
+      stopped = true;
+      unsubscribe?.();
+      unsubscribe = void 0;
+      return;
+    }
+    arm();
+    if (pending) return;
+    pending = true;
+    runFrame().catch((error) => ports.onError?.(error)).finally(() => {
+      pending = false;
+    });
+  }
+  const onVisibility = () => {
+    if (stopped) return;
+    if (ports.visibility.hidden()) {
+      ports.kernel.framePause();
+      disarm();
+    } else {
+      ports.kernel.frameResume();
+      arm();
+    }
+  };
+  return {
+    start() {
+      if (!stopped || ports.kernel.tickCount() === 0) return;
+      stopped = false;
+      unsubscribe = ports.visibility.onChange(onVisibility);
+      if (ports.visibility.hidden()) ports.kernel.framePause();
+      arm();
+    },
+    stop() {
+      stopped = true;
+      disarm();
+      unsubscribe?.();
+      unsubscribe = void 0;
+    }
+  };
+}
+
+export { createTickDriver, runTickFrame };

package/dist/{chunk-L677XGY3.js → chunk-CPLN6NBQ.js}

@@ -1,7 +1,7 @@
-import { AvlFieldType, AvlState, AvlPage, AvlEntity } from './chunk-FP3WIKTC.js';
-import { AvlEffect } from './chunk-DZ42OJQC.js';
-import { OPERATOR_CATEGORY_COLORS } from './chunk-DFNZUYX4.js';
-import { useTranslate, Box, Typography, domPassthrough } from './chunk-MBQAMMSE.js';
+import { AvlFieldType, AvlState, AvlPage, AvlEntity } from './chunk-HH5KSMH5.js';
+import { AvlEffect } from './chunk-DZBQA2OW.js';
+import { OPERATOR_CATEGORY_COLORS } from './chunk-UXLE3IPR.js';
+import { useTranslate, Box, Typography, domPassthrough } from './chunk-4YXBKHHM.js';
 import React, { useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -637,7 +637,7 @@ var AVL_GLYPH_KINDS = [
   "sexpr",
   "literal"
 ];
-var HEIGHT = { sm: 32, md: 56, lg: 88 };
+var HEIGHT = { xs: 16, sm: 32, md: 56, lg: 88 };
 var PAD = 6;
 function Symbol({ kind, label, effectType, fieldType, persistence, namespace }) {
   switch (kind) {

package/dist/{chunk-DZ42OJQC.js → chunk-DZBQA2OW.js}

@@ -1,4 +1,4 @@
-import { effectCategoryOf, EFFECT_CATEGORY_COLORS, asEffectOperator } from './chunk-DFNZUYX4.js';
+import { effectCategoryOf, EFFECT_CATEGORY_COLORS, asEffectOperator } from './chunk-UXLE3IPR.js';
 import { createLogger } from '@almadar/logger';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-2PY54Z44.js → chunk-E6KA4J6N.js}

@@ -1,8 +1,8 @@
-import { AvlState, AvlEntity, AvlFieldType, AvlPage } from './chunk-FP3WIKTC.js';
-import { AvlExplain, useEffectLines } from './chunk-SJGJJKBY.js';
-import { AvlEffect } from './chunk-DZ42OJQC.js';
-import { getStateRole, CONNECTION_COLORS } from './chunk-DFNZUYX4.js';
-import { useTranslate, Box, cn, domPassthrough } from './chunk-MBQAMMSE.js';
+import { AvlState, AvlEntity, AvlFieldType, AvlPage } from './chunk-HH5KSMH5.js';
+import { AvlExplain, useEffectLines } from './chunk-AB3X7QTE.js';
+import { AvlEffect } from './chunk-DZBQA2OW.js';
+import { getStateRole, CONNECTION_COLORS } from './chunk-UXLE3IPR.js';
+import { useTranslate, Box, cn, domPassthrough } from './chunk-4YXBKHHM.js';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
 import React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-DJ433ET5.js → chunk-GFXCPUMX.js}

@@ -1,6 +1,6 @@
 import { useAvl3DPalette } from './chunk-EOWMARUB.js';
-import { avlBlend, AVL_INK, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, avlTint, effectCategoryOf } from './chunk-DFNZUYX4.js';
-import { Typography, Box, VStack, useTranslate } from './chunk-MBQAMMSE.js';
+import { avlBlend, AVL_INK, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, avlTint, effectCategoryOf } from './chunk-UXLE3IPR.js';
+import { Typography, Box, VStack, useTranslate, usePrefersReducedMotion } from './chunk-4YXBKHHM.js';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
 import { EntityPersistenceSchema } from '@almadar/core';
 import { getStdOperatorMeta } from '@almadar/std/registry';
@@ -513,8 +513,13 @@ var Avl3DOrbitalNode = ({
   const scale = useMemo(() => 0.6 + Math.min(traitCount, 8) * 0.3, [traitCount]);
   const currentScale = useRef(scale);
   const targetScale = hovered ? scale * 1.06 : scale;
+  const reducedMotion = usePrefersReducedMotion();
   useFrame((_, delta) => {
     if (!groupRef.current) return;
+    if (reducedMotion) {
+      currentScale.current = targetScale;
+      return;
+    }
     groupRef.current.rotation.y += delta * (hovered ? 0.4 : 0.2);
     groupRef.current.rotation.x += delta * 0.05;
     currentScale.current = MathUtils.damp(currentScale.current, targetScale, 6, delta);
@@ -717,8 +722,9 @@ var Avl3DEntityCore = ({
   const coreRef = useRef(null);
   const palette = useAvl3DPalette();
   const { t } = useTranslate();
+  const reducedMotion = usePrefersReducedMotion();
   useFrame((_, delta) => {
-    if (!coreRef.current) return;
+    if (!coreRef.current || reducedMotion) return;
     coreRef.current.rotation.y += delta * 0.3;
     coreRef.current.rotation.x += delta * 0.1;
   });
@@ -872,8 +878,9 @@ var Avl3DStateNode = ({
   const { t } = useTranslate();
   const targetScale = hovered ? 1.08 : 1;
   const currentScale = useRef(1);
+  const reducedMotion = usePrefersReducedMotion();
   useFrame((_, delta) => {
-    currentScale.current = MathUtils.damp(currentScale.current, targetScale, 6, delta);
+    currentScale.current = reducedMotion ? targetScale : MathUtils.damp(currentScale.current, targetScale, 6, delta);
   });
   const scale = currentScale.current;
   if (!palette) return null;

package/dist/{chunk-FP3WIKTC.js → chunk-HH5KSMH5.js}

@@ -1,4 +1,4 @@
-import { STATE_COLORS } from './chunk-DFNZUYX4.js';
+import { STATE_COLORS } from './chunk-UXLE3IPR.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isTypeVariable } from '@almadar/core';
 
@@ -204,6 +204,14 @@ var FIELD_TYPE_SHAPES = {
   number: "triangle",
   int: "triangle",
   money: "triangle",
+  i8: "triangle",
+  i16: "triangle",
+  i32: "triangle",
+  u8: "triangle",
+  u16: "triangle",
+  u32: "triangle",
+  u64: "triangle",
+  f32: "triangle",
   boolean: "square",
   date: "diamond",
   timestamp: "diamond",

package/dist/{chunk-U6QRZASX.js → chunk-ILQXJ2AR.js}

@@ -1,4 +1,4 @@
-import { cn, Typography, useTranslate, VStack, HStack, Icon, Button, Switch, Input } from './chunk-MBQAMMSE.js';
+import { cn, Typography, useTranslate, VStack, HStack, Icon, Button, Switch, Input } from './chunk-4YXBKHHM.js';
 import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-B4BU77LT.js → chunk-ILZ7ORX7.js}

@@ -188,7 +188,7 @@ function recordOrbitalResponse(orbitalName, request, response) {
     transitioned: response.transitioned,
     emitted: response.emittedEvents.map((e) => ({ event: e.event, ...e.payload !== void 0 ? { payload: e.payload } : {} })),
     emittedEvents: response.emittedEvents.map((e) => e.event),
-    clientEffects: response.clientEffects?.length ?? 0,
+    clientEffects: response.clientEffectsByTrait?.length ?? 0,
     dataEntities: Object.fromEntries(Object.entries(response.data ?? {}).map(([name, rows]) => [name, rows.length])),
     ...response.error !== void 0 ? { error: response.error } : {},
     effectResults: serverEffectTraces(response.effectResults)

package/dist/{chunk-SGM3FASH.js → chunk-K4MOPSEL.js}

@@ -1,14 +1,14 @@
-import { JsonTreeEditor } from './chunk-U6QRZASX.js';
-import { transitionPlayback, Accordion } from './chunk-42FY4RYA.js';
-import { EmptyState } from './chunk-FAJDTHWC.js';
-import { useContainerWidth, roundedEdgePath } from './chunk-GAR5TQ5B.js';
-import { AvlExplain, AvlEffectChip } from './chunk-SJGJJKBY.js';
-import { AvlEffect } from './chunk-DZ42OJQC.js';
-import { parseTraitLevel } from './chunk-VFF5OO47.js';
-import { AVL_INK, AVL_FONT, effectZoneOf, avlTint, OPERATOR_CATEGORY_COLORS, avlBlend } from './chunk-DFNZUYX4.js';
-import { useTranslate, useMediaQuery, Box, Typography, Card, VStack, HStack, Badge, Button } from './chunk-MBQAMMSE.js';
+import { JsonTreeEditor } from './chunk-ILQXJ2AR.js';
+import { transitionPlayback, Accordion } from './chunk-REXYVBUO.js';
+import { EmptyState } from './chunk-AGXD77SL.js';
+import { useContainerWidth, roundedEdgePath } from './chunk-TXAUOLWZ.js';
+import { AvlExplain, AvlEffectChip } from './chunk-AB3X7QTE.js';
+import { AvlEffect } from './chunk-DZBQA2OW.js';
+import { parseTraitLevel } from './chunk-PCR37T3U.js';
+import { AVL_INK, AVL_FONT, effectZoneOf, avlTint, OPERATOR_CATEGORY_COLORS, avlBlend } from './chunk-UXLE3IPR.js';
+import { useTranslate, useMediaQuery, Box, Typography, Card, VStack, HStack, Badge, Button } from './chunk-4YXBKHHM.js';
 import { useRef, useMemo, useState } from 'react';
-import { formatSExpr, isBinding } from '@almadar/core';
+import { formatSExpr, JsonValueSchema, isJsonObject, isBinding } from '@almadar/core';
 import { operatorVisualForm, getStdOperatorMeta } from '@almadar/std/registry';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -587,7 +587,6 @@ var AvlCircuit = ({ expr, trace, cursor, title, showCode = true, className }) =>
   ] });
 };
 AvlCircuit.displayName = "AvlCircuit";
-var isConfigObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var EffectHeader = ({ type, failed, failedLabel, note }) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
   /* @__PURE__ */ jsx(AvlEffectChip, { effectType: type, size: 18, note }),
   /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: type }),
@@ -640,7 +639,10 @@ var TransitionDetailBody = ({ orbital, trait, transition, annotations, playback,
     stepEvent ? /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "muted", children: t("avl.play.payload") }),
       /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", children: [
-        /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(JsonTreeEditor, { value: payload, onChange: (next) => setPayload(isConfigObject(next) ? next : {}) }) }),
+        /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(JsonTreeEditor, { value: payload, onChange: (next) => {
+          const json = JsonValueSchema.safeParse(next);
+          setPayload(json.success && isJsonObject(json.data) ? json.data : {});
+        } }) }),
         /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", action: stepEvent, actionPayload: request, leftIcon: "skip-forward", children: t("avl.play.step") })
       ] })
     ] }) : null,