@synopackageland/ui 0.20.2 → 0.20.4

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

@@ -3,7 +3,7 @@
   "version": "2.10.5",
   "delivery": "bundled-patched-esm",
   "patchManifestSha256": "14f10159b60d48ac7a0686f58faf7a30e99898dc267b3c032cf2bdd6052dc52b",
-  "bundleSha256": "4c9d906c86cdf3bee66ae72df340e24616fe173324fc45e4b725caa86a2f7443",
+  "bundleSha256": "e4cdf02eea6ff2d6abcc00f41b867fda8df351972bf636eebb0ead64d25d969b",
   "sourceHashes": {
     "shared/useBodyScrollLock.js": "657592f283cb6fd25454abd284a0024af21936cb56e05b762ff0d22b6a979d32",
     "DismissableLayer/DismissableLayer.js": "da05ca544d9822a8e2b71057e78c0e1ef59423aa3893534338fb58e1ecbd1a8d",