@synopackageland/ui 0.20.3 → 0.20.5

package/dist/json.js

@@ -2,7 +2,7 @@ import { z as t } from "zod";
 import { z as vt } from "zod";
 import { defineCatalog as F } from "@json-render/core";
 import { createStateStore as $t, defineCatalog as jt } from "@json-render/core";
-import { defineRegistry as M, useBoundProp as b, JSONUIProvider as W, Renderer as B } from "@json-render/vue";
+import { defineRegistry as W, useBoundProp as b, JSONUIProvider as B, Renderer as M } from "@json-render/vue";
 import { ActionProvider as Ot, JSONUIProvider as At, Renderer as kt, StateProvider as Pt, ValidationProvider as Ct, VisibilityProvider as It, defineRegistry as Rt, useActions as Kt, useBoundProp as Lt, useStateStore as Dt } from "@json-render/vue";
 import { schema as G } from "@json-render/vue/schema";
 import { schema as Tt } from "@json-render/vue/schema";
@@ -369,7 +369,7 @@ const J = t.lazy(() => t.object({
   "Keep state in the spec and use $bindState/$bindItem for editable controls; do not invent JavaScript in props.",
   "Use host-declared actions for side effects. Never encode fetch, timers, filesystem operations, or business logic as UI expressions.",
   "If a domain view needs custom rendering or behavior (for example a treemap, terminal, rich download row, NAS path picker), use a host extension component instead of forcing it into generic components.",
-  "AppShell adapts to its actual DSM window width: phone (<=600px), desktop window (601–1199px), and wide web/Portal (>=1200px). Never assume browser viewport width.",
+  'AppShell adapts to its actual container width: phone (<=640px), desktop window (641px and wider), and, only with wideLayout "web", the full-page web layout from 960px (its sidebar starts as a 48px rail below 1200px). Never assume browser viewport width.',
   "For a phone-unfriendly custom view, use ResponsiveView slots: mobile alternative and default full view. Keep essential actions accessible on mobile.",
   "Use low-level Stack/Text only when a semantic component does not already express the layout."
 ], Le = '## Self-check workflow\n\nInstall `@synopackageland/ui` first. Without a local install, use\n`npx -y -p @synopackageland/ui syno-pkg-land-ui <command>` (pin the package version for reproducibility).\n\n1. List components with `npx --no syno-pkg-land-ui catalog`; read props with `npx --no syno-pkg-land-ui describe <Component>`.\n2. Write the spec as JSON: {"root", "elements", "state"}. Seed every state path you bind or read.\n3. Run `npx --no syno-pkg-land-ui validate ui.json --json` (add --actions, --functions, --state, --messages for host-provided names).\n   Fix every error at its JSON Pointer `path` using its `hint`, then validate again until it passes.\n4. Run `npx --no syno-pkg-land-ui render ui.json --out shots` to screenshot phone, DSM window and wide widths and to\n   report layout overflow; fix reported elements and repeat.\n5. Hand over the spec only when validate and render both exit 0.';
@@ -616,7 +616,7 @@ const Je = {
   ListItem: ({ props: e, slots: o }) => d(oe, e, o),
   InputGroup: ({ slots: e }) => d(te, null, e),
   Loading: ({ props: e }) => d(ee, { text: e.text })
-}, { registry: D } = M(A, {
+}, { registry: D } = W(A, {
   components: Je
 }), ut = /* @__PURE__ */ H({
   __name: "SynoJsonRenderer",
@@ -634,7 +634,7 @@ const Je = {
     fallback: {}
   },
   setup(e) {
-    return (o, n) => (X(), Y(j(W), {
+    return (o, n) => (X(), Y(j(B), {
       registry: j(D),
       store: e.store,
       "initial-state": e.state ?? e.spec?.state ?? {},
@@ -646,7 +646,7 @@ const Je = {
       "on-state-change": e.onStateChange
     }, {
       default: Q(() => [
-        Z(j(B), {
+        Z(j(M), {
           spec: e.spec,
           registry: j(D),
           loading: e.loading,
@@ -692,7 +692,7 @@ function Fe(e) {
   if (e.code === "invalid_type") return `Expected ${e.expected}.`;
 }
 const v = (e, o) => `${e}: ${o.join(", ")}`;
-class Me {
+class We {
   errors = [];
   warnings = [];
   error(o) {
@@ -703,7 +703,7 @@ class Me {
   }
 }
 function mt(e, o = {}) {
-  const n = o.catalog ?? A, a = n.data.components, i = new Me();
+  const n = o.catalog ?? A, a = n.data.components, i = new We();
   if (!m(e))
     return i.error({ code: "invalid_spec", path: "", message: "A spec must be a JSON object.", hint: 'Return {"root": "<key>", "elements": {...}, "state": {...}}.' }), T(i);
   const s = m(e.elements) ? e.elements : void 0;
@@ -728,7 +728,7 @@ function mt(e, o = {}) {
       });
       continue;
     }
-    We(i, p, h, a[h], f.props), Be(i, p, h, a[h], f, s);
+    Be(i, p, h, a[h], f.props), Me(i, p, h, a[h], f, s);
   }
   const c = o.messages && q(o.messages), l = {
     issues: i,
@@ -745,7 +745,7 @@ function mt(e, o = {}) {
   };
   return s && typeof e.root == "string" && Object.hasOwn(s, e.root) && Ge(l, e.root, s), T(i);
 }
-function We(e, o, n, a, i) {
+function Be(e, o, n, a, i) {
   const s = (...l) => u("elements", o, "props", ...l);
   if (!m(i)) {
     e.error({ code: "invalid_props", path: s(), elementKey: o, message: '"props" must be an object.', hint: 'Use "props": {} when the component needs none.' });
@@ -793,7 +793,7 @@ function z(e, o) {
       });
   return n;
 }
-function Be(e, o, n, a, i, s) {
+function Me(e, o, n, a, i, s) {
   const r = a.slots ?? [], { children: c } = i;
   if (c !== void 0 && !(Array.isArray(c) && c.every((l) => typeof l == "string")) ? e.error({ code: "invalid_children", path: u("elements", o, "children"), elementKey: o, message: '"children" must be an array of element keys.' }) : c?.length && !r.includes("default") && e.error({
     code: "children_not_allowed",

package/dist/lib/adaptiveLayout.d.ts

@@ -1,8 +1,10 @@
-import { ComputedRef, InjectionKey } from 'vue';
+import { ComputedRef, InjectionKey, Ref } from 'vue';
 export type AppPresentation = 'mobile' | 'window' | 'web';
 /** Container widths, never global viewport breakpoints: DSM windows share a wide host viewport. */
 export declare const MOBILE_LAYOUT_MAX = 640;
-export declare const WEB_LAYOUT_MIN = 1200;
+export declare const WEB_LAYOUT_MIN = 960;
+/** Below this width a web layout starts with its sidebar as the rail, so a 1024 laptop keeps room for the page. */
+export declare const WEB_RAIL_BELOW = 1200;
 /** How a wide container is presented: a maximized DSM window stays `window` unless the app is a Portal page. */
 export type WideLayout = 'window' | 'web';
 export declare function appPresentationForWidth(width: number, wide?: WideLayout): AppPresentation;
@@ -11,6 +13,34 @@ export declare const APP_PRESENTATION_KEY: InjectionKey<ComputedRef<AppPresentat
 export declare const WEB_SIDEBAR_DEFAULT = 248;
 export declare const WEB_SIDEBAR_MIN = 200;
 export declare const WEB_SIDEBAR_MAX = 360;
+/** The collapsed sidebar and the collapsed aside are one rail width. */
+export declare const WEB_RAIL_WIDTH = 48;
+/** A web container this narrow shows the sidebar as the rail until the user opens it. */
+export declare function webSidebarStartsAsRail(width: number): boolean;
+/** The right side region (AppLayout's `aside` slot): open beside the page, the rail, or over the whole content area. */
+export type AppAsideState = 'open' | 'collapsed' | 'expanded';
+export declare const WEB_ASIDE_DEFAULT = 380;
+export declare const WEB_ASIDE_MIN = 320;
+export declare const WEB_ASIDE_MAX = 560;
+/** An open aside that would leave the page narrower than this floats over the page instead of pushing it. */
+export declare const ASIDE_MAIN_MIN = 480;
+/** What AppLayout tells the content of its `aside` slot (an AsidePanel). */
+export type AppAside = {
+    /** The state; setting it writes AppLayout's `v-model:aside`. */
+    state: Ref<AppAsideState>;
+    /** True while the open aside floats over the page instead of pushing it. */
+    overlay: ComputedRef<boolean>;
+    presentation: ComputedRef<AppPresentation>;
+    /** The region's target width as a CSS length (the rail, the open width, or the whole content area). */
+    regionWidth: ComputedRef<string>;
+};
+export declare const APP_ASIDE_KEY: InjectionKey<AppAside>;
+/**
+ * The shared side-region motion: true while the sidebar or the aside changes
+ * width. Content that measures itself (a canvas grid, a chart, a column count)
+ * waits for false and then measures once, so it settles once.
+ */
+export declare const APP_SIDE_MOTION_KEY: InjectionKey<Readonly<Ref<boolean>>>;
 /** True while the web sidebar shows icons only; AppSidebar keeps labels as accessible names. */
 export declare const APP_SIDEBAR_COLLAPSED_KEY: InjectionKey<ComputedRef<boolean>>;
 /** Where AppLayout puts its navigation: the left column (default) or a bar across the top. A phone always uses the drawer. */

package/dist/lib/deviceViewport.d.ts

@@ -10,6 +10,7 @@
  * change: a changed viewport is followed by one, once it applies. A
  * device-width viewport already on the page gets the resize too, since the
  * host's window loader may have set it just before the app mounted, after DSM
- * sized the window; it is left as it is.
+ * sized the window; it keeps its own keys and only gains the missing
+ * `viewport-fit` and `interactive-widget`.
  */
 export declare function ensureDeviceViewport(doc?: Document): () => void;

package/dist/lib/motion.d.ts

@@ -6,6 +6,18 @@ export declare const MOTION_OFF_SELECTOR = "[data-ui-motion=\"off\"]";
  * ancestor carries `data-ui-motion="off"`.
  */
 export declare function motionOff(el?: Element | null): boolean;
+/** A duration token from the theme (dsm7.css), read by motionMs. */
+export type MotionToken = '--ui-motion-fast' | '--ui-motion-normal' | '--ui-motion-slow' | '--ui-motion-panel' | '--ui-motion-exit' | '--ui-motion-stack' | '--ui-motion-flash' | '--ui-skeleton-pulse' | '--ui-motion-drag' | '--ui-motion-drag-settle';
+/** A CSS time (`150ms`, `0.3s`) in milliseconds; null when it is not one. */
+export declare function parseCssTime(value: string): number | null;
+/**
+ * A motion token's duration in milliseconds as it resolves on `el` (the
+ * document root when none is given), so script times itself by the theme
+ * instead of repeating its numbers. 0 when motion is off for `el` (reduced
+ * motion or `data-ui-motion="off"`), when the token is not set, and outside
+ * a browser.
+ */
+export declare function motionMs(token: MotionToken, el?: Element | null): number;
 /** The longest transition on `el` in milliseconds, delays included; 0 when none applies. */
 export declare function transitionMs(el: Element): number;
 export type InsertedKeysOptions = {

package/dist/reka-runtime.json

@@ -1,25 +1,28 @@
 {
   "name": "reka-ui",
-  "version": "2.10.5",
+  "version": "2.11.0",
   "delivery": "bundled-patched-esm",
-  "patchManifestSha256": "14f10159b60d48ac7a0686f58faf7a30e99898dc267b3c032cf2bdd6052dc52b",
-  "bundleSha256": "54d74a42194738ca761416590a8e726632a8b0357cda21650d971ad8424d550b",
+  "patchManifestSha256": "9c5b9c9a162fa584b4695a683368a4484b3ac6e70177fd063b77aa618c051627",
+  "bundleSha256": "9d900b74cfd1b9a5fb8bbc76468104616674baa6afef795ce9afba4fe82c86c0",
   "sourceHashes": {
-    "shared/useBodyScrollLock.js": "657592f283cb6fd25454abd284a0024af21936cb56e05b762ff0d22b6a979d32",
-    "DismissableLayer/DismissableLayer.js": "da05ca544d9822a8e2b71057e78c0e1ef59423aa3893534338fb58e1ecbd1a8d",
-    "FocusScope/FocusScope.js": "75ccaf31fe320bd40c6f7f4cf0abca6946a050f004bce562474d7b512ab3c207",
-    "DismissableLayer/DismissableLayerBranch.js": "7b5f04cf3e7cfe3cc5bba5c5f7784c6f1865221aebd5f018f4c03159934275c2",
+    "shared/useBodyScrollLock.js": "287bfb604318c4202769e4b5191896eaf0e52a952e1de898967cbe09467fcfda",
+    "DismissableLayer/DismissableLayer.js": "3c8d248f0a32e01f89ca1f6202b1bb691bf5d0e4012a92535e161c35e69cdc32",
+    "FocusScope/FocusScope.js": "525b1858934ee694c69bc1e3b5f49bd26db874dd201a75577a3c3dd430ca5165",
+    "DismissableLayer/DismissableLayerBranch.js": "3ab187f3aa53b5167b017f4a6aafddfefaf3847dab405dad68ac2d55bbed30a1",
     "shared/useHideOthers.js": "8b0c559cdf4204c0c2b707a3695ee12b6ea29c27303a92b92356efd762275066",
     "shared/useFocusGuards.js": "979b2ac3f88c4b83eb9a3fcc22ceaab7b0961f8191a1f641d6e0bd55b9346fb0",
-    "Dialog/DialogContentModal.js": "d79787901616b10f2ccd8e68994d3e1c12136b910b3238a6a0a4cf1c0c786e4b",
-    "Dialog/DialogContentImpl.js": "e4da9716456748dab317c7088b5d4b4a2cdb43014bf0504e068fa2b68cba553a",
+    "Dialog/DialogContentModal.js": "da96e8ab6145c5e527e01ca7986b148fdc7782843e3764da65a8962604395014",
+    "Dialog/DialogContentImpl.js": "72ada0d788f27f2342a384b3cb98766c17a826a317c722f4aa2ead06dab8c799",
     "Popover/PopoverContentModal.js": "3308c342f243175e53dad15def2b3de14914e38b00843b9bf16611fc51a6ff4c",
     "Popover/PopoverContentNonModal.js": "f290762d49914c0ce3350b3030014414ca8367cb80b2fbe683a5965e574a3da7",
-    "DropdownMenu/DropdownMenuContent.js": "6013eb47332427110b41728a12661ec2f6801c889ecc821903f609f69bd41c70",
-    "Select/SelectContentImpl.js": "185b1f5b29f49986b735a01aa0d14e7b58bc1727ada7e7a697bb1d23220ad241",
+    "DropdownMenu/DropdownMenuContent.js": "3ca7a2e3278a2147274bb5678724f698e787784930a87a5a3bdf9e154cfe28b1",
+    "Select/SelectContentImpl.js": "aec5af933cec10d8653dcbb334412dca97663cdff8621730405bcae80a83918f",
     "Tooltip/TooltipRoot.js": "40eb3cd58d90e878066705cf1ebcc9411dc177b79182be6db1980e920264fd3f",
     "Tooltip/TooltipContentImpl.js": "e1cda07749e60477f5a71015d679045414dc2785e11f5d51ce69ea8b405e42ad",
     "Popper/PopperContent.js": "1e1894ba362a36ae9c89bd77a8d92ecb7fd7492b5c237859bb6486d7206d340c",
-    "Menu/MenuSubContent.js": "856be5da2c50a5486f33772161013dc3eee3cf362473af5f8a4bbcc074daeba0"
+    "Menu/MenuSubContent.js": "268f7f44e4f4e50307a2303dedee17d270dfeaf893e787ee682f6248754004b6",
+    "shared/bodyPointerEvents.js": "806fb365e555b66721986bb3868c5bdfeb5a71dc2f9673896847126075027126",
+    "Drawer/DrawerContentImpl.js": "1667f2133672ccb0a33360568c31fcfbb7bbe07aa77414b40e896c88eca2312d",
+    "composables/useSwipeDismiss.js": "b8721b4f6444be46f9aa1542b0ad0f6025b7ccc7de98a6ae7f86e194d8166524"
   }
 }

package/dist/rich-text.js

@@ -495,7 +495,7 @@ const Pa = ["data-variant", "data-over"], La = ["aria-label"], Aa = ["aria-label
     }
     const ve = q(), be = q(1 / 0);
     let he;
-    const ge = 34, ie = M(() => [
+    const ge = h ? 46 : 34, ie = M(() => [
       ...re.value.map((e) => ({ key: e.key, label: e.label, icon: e.icon, action: e })),
       ...i.upload ? [{ key: "image", label: "Add image", icon: Qe, action: void 0 }] : [],
       { key: "mention", label: "Mention someone", icon: We, action: void 0 }