@almadar/ui 6.51.2 → 6.53.0

package/dist/{chunk-GHXWGQTX.js → chunk-4OZDHCZV.js}

@@ -1,4 +1,4 @@
-import { en_default } from './chunk-L55SAFKL.js';
+import { en_default } from './chunk-UGHAADU5.js';
 
 // lib/format.ts
 var { $meta: _meta, ...coreMessages } = en_default;

package/dist/{chunk-HQDKHLFG.js → chunk-64WACXM7.js}

@@ -33,4 +33,18 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-export { cn };
+// lib/domPassthrough.ts
+var GLOBAL_ATTRIBUTES = /* @__PURE__ */ new Set(["role", "id", "lang", "dir", "tabIndex"]);
+function domPassthrough(props) {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("aria-") || key.startsWith("data-") || GLOBAL_ATTRIBUTES.has(key)) {
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === void 0) {
+        out[key] = value;
+      }
+    }
+  }
+  return out;
+}
+
+export { cn, domPassthrough };

package/dist/{chunk-FGHRVJCI.js → chunk-6O37FCX4.js}

@@ -98,7 +98,10 @@ var MOTION_SHAPE_VARS = [
   { cssVar: "--motion-popover-exit-to-transform", key: "popoverExit" },
   { cssVar: "--motion-toast-enter-from-transform", key: "toastEnter" },
   { cssVar: "--motion-toast-exit-to-transform", key: "toastExit" },
-  { cssVar: "--motion-page-enter-from-transform", key: "pageEnter" }
+  { cssVar: "--motion-page-enter-from-transform", key: "pageEnter" },
+  { cssVar: "--motion-enter-rise-from-transform", key: "enterRise" },
+  { cssVar: "--motion-enter-scale-from-transform", key: "enterScale" },
+  { cssVar: "--motion-enter-slide-from-transform", key: "enterSlide" }
 ];
 var ICONOGRAPHY_VARS = [
   { cssVar: "--icon-family", key: "family" },
@@ -122,6 +125,7 @@ var GEOMETRY_VARS = [
   { cssVar: "--border-heavy", key: "borderHeavy" },
   { cssVar: "--corner-shape", key: "cornerShape" },
   { cssVar: "--corner-shape-pill", key: "cornerShapePill" },
+  { cssVar: "--corner-shape-interactive", key: "cornerShapeInteractive" },
   { cssVar: "--border-style", key: "borderStyle" },
   { cssVar: "--border-style-interactive", key: "borderStyleInteractive" }
 ];
@@ -260,6 +264,13 @@ function emitMotion(m, vars) {
     }
   }
   applyFlat(m.shapes, MOTION_SHAPE_VARS, vars);
+  if (m.entry?.default !== void 0) vars["--motion-enter-default"] = enterKeyframe(m.entry.default);
+  if (m.entry?.stagger !== void 0) vars["--motion-enter-stagger"] = m.entry.stagger;
+  if (m.busyDelay !== void 0) vars["--motion-busy-delay"] = m.busyDelay;
+  if (m.awaitingSkeleton !== void 0) vars["--awaiting-skeleton-display"] = m.awaitingSkeleton ? "block" : "none";
+}
+function enterKeyframe(enter) {
+  return enter === "none" ? "none" : `almadar-enter-${enter}`;
 }
 function emitIconography(i, vars) {
   applyFlat(i, ICONOGRAPHY_VARS, vars);
@@ -276,4 +287,4 @@ function resolveThemeForRuntime(theme) {
   return theme;
 }
 
-export { DENSITY_ELEMENT_VARS, DENSITY_SPACING_VARS, ELEVATION_VARS, GEOMETRY_VARS, ICONOGRAPHY_VARS, LEGACY_PREFIXES, MOTION_DURATION_KEYS, MOTION_EASING_KEYS, MOTION_INTENT_VARS, MOTION_SHAPE_VARS, SURFACE_VARS, TYPE_FAMILY_VARS, TYPE_HEADING_VARS, TYPE_INTENT_VARS, TYPE_SIZE_KEYS, resolveThemeForRuntime, themeTokensToCssVars };
+export { DENSITY_ELEMENT_VARS, DENSITY_SPACING_VARS, ELEVATION_VARS, GEOMETRY_VARS, ICONOGRAPHY_VARS, LEGACY_PREFIXES, MOTION_DURATION_KEYS, MOTION_EASING_KEYS, MOTION_INTENT_VARS, MOTION_SHAPE_VARS, SURFACE_VARS, TYPE_FAMILY_VARS, TYPE_HEADING_VARS, TYPE_INTENT_VARS, TYPE_SIZE_KEYS, enterKeyframe, resolveThemeForRuntime, themeTokensToCssVars };

package/dist/{chunk-BUEIZY54.js → chunk-7LM6I3NA.js}

@@ -1,8 +1,7 @@
-import { domPassthrough } from './chunk-MWPX2O4M.js';
 import { useTapReveal } from './chunk-XJTHMW4G.js';
 import { useEventBus } from './chunk-6EV3OEBQ.js';
 import { updateAssetStatus } from './chunk-O7OLVVBR.js';
-import { cn } from './chunk-HQDKHLFG.js';
+import { cn, domPassthrough } from './chunk-64WACXM7.js';
 import { createLogger } from '@almadar/logger';
 import React, { useCallback, createContext, useContext } from 'react';
 import { useThemeScope } from '@almadar/ui/context';
@@ -369,18 +368,20 @@ function pressableProps(onPress, options = {}) {
     }
   };
 }
-function rowActivationProps(onActivate) {
-  if (!onActivate) return {};
+function rowOpenControlProps(enabled) {
+  if (!enabled) return {};
   return {
+    role: "button",
     tabIndex: 0,
-    onClick: onActivate,
     onKeyDown: (e) => {
-      if (e.target !== e.currentTarget || e.key !== "Enter") return;
+      if (e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " ") return;
       e.preventDefault();
       clickElement(e.currentTarget);
     }
   };
 }
+var STRETCHED_CONTROL = "after:absolute after:inset-0 after:content-[''] after:rounded-[inherit] focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-primary focus-visible:after:ring-inset";
+var STRETCHED_ABOVE = "relative z-[1]";
 
 // components/core/atoms/Box.tsx
 var paddingStyles = {
@@ -1998,4 +1999,4 @@ function rotatePoint(p, center, radians) {
   return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos };
 }
 
-export { AVL_FONT, AVL_INK, AVL_STROKE, Box, CONFETTI_BURST_KEYFRAMES, CONNECTION_COLORS, DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, EFFECT_CATEGORY_COLORS, HStack, OPERATOR_CATEGORY_COLORS, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, STATE_COLORS, Stack, THEME_SERIES, VStack, applyMeshAnimation, applyShapeAnimation, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, effectCategoryOf, effectZoneOf, expandFxLayer, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveThemeColor, rowActivationProps, spriteAssetState, spriteRect, subRectFor, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, withPreviewPosition };
+export { AVL_FONT, AVL_INK, AVL_STROKE, Box, CONFETTI_BURST_KEYFRAMES, CONNECTION_COLORS, DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, EFFECT_CATEGORY_COLORS, HStack, OPERATOR_CATEGORY_COLORS, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, STATE_COLORS, STRETCHED_ABOVE, STRETCHED_CONTROL, Stack, THEME_SERIES, VStack, applyMeshAnimation, applyShapeAnimation, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, effectCategoryOf, effectZoneOf, expandFxLayer, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveThemeColor, rowOpenControlProps, spriteAssetState, spriteRect, subRectFor, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, withPreviewPosition };

package/dist/chunk-CBIJP5PL.js

@@ -0,0 +1,284 @@
+import { Icon, Button, Switch, Input } from './chunk-3EF5SDIJ.js';
+import { VStack, HStack } from './chunk-7LM6I3NA.js';
+import { Typography } from './chunk-GMDMOYXD.js';
+import { cn } from './chunk-64WACXM7.js';
+import React from 'react';
+import { useTranslate } from '@almadar/ui/hooks';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var isObj = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
+var isArr = (v) => Array.isArray(v);
+function kindOf(v) {
+  if (v === null) return "null";
+  if (isArr(v)) return "array";
+  if (isObj(v)) return "object";
+  if (typeof v === "number") return "number";
+  if (typeof v === "boolean") return "boolean";
+  return "string";
+}
+var TYPE_LABEL_KEY = {
+  string: "jsonTree.type.text",
+  number: "jsonTree.type.number",
+  boolean: "jsonTree.type.boolean"
+};
+var TYPE_LABEL_SYMBOL = {
+  object: "{}",
+  array: "[]",
+  null: "\u2014"
+};
+function typeLabel(kind, t) {
+  if (kind === "object" || kind === "array" || kind === "null") return TYPE_LABEL_SYMBOL[kind];
+  return t(TYPE_LABEL_KEY[kind] ?? "");
+}
+var KIND_OPTIONS = ["string", "number", "boolean", "object", "array"];
+function emptyOf(kind) {
+  switch (kind) {
+    case "object":
+      return {};
+    case "array":
+      return [];
+    case "number":
+      return 0;
+    case "boolean":
+      return false;
+    case "null":
+      return null;
+    default:
+      return "";
+  }
+}
+function templateFrom(arr) {
+  if (arr.length === 0) return "";
+  const first = arr[0];
+  if (isObj(first)) {
+    const blank = {};
+    for (const k of Object.keys(first)) blank[k] = isObj(first[k]) ? {} : isArr(first[k]) ? [] : first[k];
+    return blank;
+  }
+  if (isArr(first)) return [];
+  return emptyOf(kindOf(first));
+}
+function ScalarControl({
+  value,
+  onChange
+}) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Switch, { checked: value, onChange: (c) => onChange(c) });
+  }
+  const numeric = typeof value === "number";
+  const initial = value === null ? "" : String(value);
+  const [draft, setDraft] = React.useState(initial);
+  React.useEffect(() => setDraft(initial), [initial]);
+  const commit = () => {
+    if (numeric) {
+      const n = draft.trim() === "" ? 0 : Number(draft);
+      onChange(Number.isNaN(n) ? 0 : n);
+    } else {
+      onChange(draft);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputType: numeric ? "number" : "text",
+      value: draft,
+      placeholder: value === null ? "null" : void 0,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      }
+    }
+  );
+}
+function KindSelect({
+  kind,
+  onChange
+}) {
+  const { t } = useTranslate();
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      value: kind === "null" ? "string" : kind,
+      onChange: (e) => onChange(e.target.value),
+      "aria-label": t("jsonTree.valueType"),
+      className: cn(
+        "h-6 rounded-interactive bg-muted text-muted-foreground text-[10px] font-mono px-1",
+        "border-[length:var(--border-width-thin)] border-border",
+        "hover:bg-card focus:outline-none focus:ring-1 focus:ring-ring"
+      ),
+      children: KIND_OPTIONS.map((k) => /* @__PURE__ */ jsx("option", { value: k, children: typeLabel(k, t) }, k))
+    }
+  );
+}
+function ValueNode({
+  value,
+  onChange,
+  depth,
+  readonly
+}) {
+  const kind = kindOf(value);
+  if (kind === "object" || kind === "array") {
+    return /* @__PURE__ */ jsx(ContainerNode, { value, onChange, depth, readonly });
+  }
+  if (readonly) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono text-foreground", children: value === null ? "null" : String(value) });
+  }
+  return /* @__PURE__ */ jsx(ScalarControl, { value, onChange });
+}
+function Row({
+  rowKey,
+  isArrayItem,
+  value,
+  depth,
+  onValue,
+  onRenameKey,
+  onChangeKind,
+  onRemove,
+  readonly
+}) {
+  const { t } = useTranslate();
+  const [keyDraft, setKeyDraft] = React.useState(rowKey);
+  React.useEffect(() => setKeyDraft(rowKey), [rowKey]);
+  const container = isObj(value) || isArr(value);
+  return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "group w-max min-w-full", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className: "py-0.5 w-max", children: [
+      readonly ? /* @__PURE__ */ jsx("span", { className: cn(
+        "h-6 rounded-interactive bg-muted text-muted-foreground text-[10px] font-mono px-1 flex items-center",
+        "border-[length:var(--border-width-thin)] border-border"
+      ), children: typeLabel(kindOf(value), t) }) : /* @__PURE__ */ jsx(KindSelect, { kind: kindOf(value), onChange: onChangeKind }),
+      isArrayItem ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "w-6 shrink-0 font-mono", children: rowKey }) : readonly ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "w-20 shrink-0 font-mono truncate", children: rowKey }) : /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          inputType: "text",
+          value: keyDraft,
+          onChange: (e) => setKeyDraft(e.target.value),
+          onBlur: () => keyDraft !== rowKey && onRenameKey(keyDraft),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && keyDraft !== rowKey) onRenameKey(keyDraft);
+          },
+          className: "font-mono"
+        }
+      ) }),
+      !container && /* @__PURE__ */ jsx("div", { className: "w-48 shrink-0", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1, readonly }) }),
+      !readonly && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          icon: "x",
+          onClick: onRemove,
+          "aria-label": t("common.remove"),
+          className: "shrink-0 text-muted-foreground hover:text-error"
+        }
+      )
+    ] }),
+    container && /* @__PURE__ */ jsx("div", { className: "pl-2", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1, readonly }) })
+  ] });
+}
+function ContainerNode({
+  value,
+  onChange,
+  depth,
+  readonly
+}) {
+  const { t } = useTranslate();
+  const [open, setOpen] = React.useState(depth < 2);
+  const array = isArr(value);
+  const entries = array ? value.map((v, i) => [String(i), v]) : Object.entries(value);
+  const setObjValue = (key, next) => {
+    onChange({ ...value, [key]: next });
+  };
+  const renameKey = (oldKey, newKey) => {
+    if (!newKey || newKey === oldKey) return;
+    const out = {};
+    for (const [k, v] of Object.entries(value)) out[k === oldKey ? newKey : k] = v;
+    onChange(out);
+  };
+  const removeObjKey = (key) => {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) if (k !== key) out[k] = v;
+    onChange(out);
+  };
+  const changeObjKind = (key, k) => setObjValue(key, emptyOf(k));
+  const setArrValue = (idx, next) => {
+    const copy = [...value];
+    copy[idx] = next;
+    onChange(copy);
+  };
+  const removeArrIdx = (idx) => onChange(value.filter((_, i) => i !== idx));
+  const changeArrKind = (idx, k) => setArrValue(idx, emptyOf(k));
+  const add = () => {
+    if (array) {
+      onChange([...value, templateFrom(value)]);
+    } else {
+      const obj = value;
+      let key = "key";
+      let n = 1;
+      while (key in obj) {
+        key = `key${n}`;
+        n += 1;
+      }
+      onChange({ ...obj, [key]: "" });
+    }
+  };
+  const summaryKey = array ? entries.length === 1 ? "jsonTree.itemCountOne" : "jsonTree.itemCountOther" : entries.length === 1 ? "jsonTree.fieldCountOne" : "jsonTree.fieldCountOther";
+  const summary = t(summaryKey, { count: entries.length });
+  return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "w-full", children: [
+    /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        className: "flex items-center gap-1 text-muted-foreground hover:text-foreground",
+        "aria-label": open ? t("jsonTree.collapse") : t("jsonTree.expand"),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: open ? "chevron-down" : "chevron-right", size: "sm" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: array ? "[ ]" : "{ }" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: summary })
+        ]
+      }
+    ) }),
+    open && /* @__PURE__ */ jsxs(
+      VStack,
+      {
+        gap: "none",
+        className: cn("ml-1.5 pl-1.5 w-max min-w-full border-l-[length:var(--border-width-thin)] border-border"),
+        children: [
+          entries.map(([k, v], idx) => /* @__PURE__ */ jsx(
+            Row,
+            {
+              rowKey: k,
+              isArrayItem: array,
+              value: v,
+              depth,
+              onValue: (next) => array ? setArrValue(idx, next) : setObjValue(k, next),
+              onRenameKey: (nk) => renameKey(k, nk),
+              onChangeKind: (kind) => array ? changeArrKind(idx, kind) : changeObjKind(k, kind),
+              onRemove: () => array ? removeArrIdx(idx) : removeObjKey(k),
+              readonly
+            },
+            array ? idx : k
+          )),
+          !readonly && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: "plus",
+              label: array ? t("jsonTree.addItem") : t("jsonTree.addField"),
+              onClick: add,
+              className: "self-start text-muted-foreground"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var JsonTreeEditor = ({ value, onChange, className, readonly }) => {
+  const root = value ?? "";
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto rounded-container bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsx(ValueNode, { value: root, onChange, depth: 0, readonly }) });
+};
+
+export { JsonTreeEditor };

package/dist/{chunk-MWPX2O4M.js → chunk-GMDMOYXD.js}

@@ -1,23 +1,10 @@
-import { cn } from './chunk-HQDKHLFG.js';
-import { formatValue } from './chunk-GHXWGQTX.js';
+import { cn, domPassthrough } from './chunk-64WACXM7.js';
+import { formatValue } from './chunk-4OZDHCZV.js';
 import React from 'react';
 import { useFormatContext } from '@almadar/ui/hooks';
 
 // lib/inlineText.ts
 var INLINE_TEXT_ATTR = "data-inline-text";
-
-// lib/domPassthrough.ts
-function domPassthrough(props) {
-  const out = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (key.startsWith("aria-") || key.startsWith("data-") || key === "role" || key === "id") {
-      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === void 0) {
-        out[key] = value;
-      }
-    }
-  }
-  return out;
-}
 var variantStyles = {
   h1: "text-4xl heading-voice text-foreground",
   h2: "text-3xl heading-voice text-foreground",
@@ -150,4 +137,4 @@ var Typography = ({
 };
 Typography.displayName = "Typography";
 
-export { INLINE_TEXT_ATTR, Typography, domPassthrough };
+export { INLINE_TEXT_ATTR, Typography };

package/dist/{chunk-YKHNK5JH.js → chunk-GODZKHAL.js}

@@ -1,6 +1,6 @@
-import { DEFAULT_CURRENCY } from './chunk-GHXWGQTX.js';
-import { en_default } from './chunk-L55SAFKL.js';
-import { createContext, useContext, useMemo } from 'react';
+import { DEFAULT_CURRENCY } from './chunk-4OZDHCZV.js';
+import { en_default } from './chunk-UGHAADU5.js';
+import React, { createContext, useEffect, useContext, useMemo } from 'react';
 
 var { $meta: _meta, ...coreMessages } = en_default;
 var coreLocale = coreMessages;
@@ -18,7 +18,14 @@ var I18nContext = createContext({
   }
 });
 I18nContext.displayName = "I18nContext";
-var I18nProvider = I18nContext.Provider;
+function I18nProvider({ value, children, documentRoot }) {
+  useEffect(() => {
+    if (!documentRoot) return;
+    document.documentElement.lang = value.locale;
+    document.documentElement.dir = value.direction;
+  }, [documentRoot, value.locale, value.direction]);
+  return React.createElement(I18nContext.Provider, { value }, children);
+}
 function useTranslate() {
   return useContext(I18nContext);
 }