@synopackageland/ui 0.22.0 → 0.23.0

package/dist/json.js

@@ -8,14 +8,14 @@ import { schema as G } from "@json-render/vue/schema";
 import { schema as Tt } from "@json-render/vue/schema";
 import { h as d, defineComponent as H, openBlock as X, createBlock as Y, unref as j, withCtx as Q, createVNode as Z } from "vue";
 import { LoadingArea as ee, InputGroup as te, ListItem as oe, CellStatus as ne, CellText as ie, DataTable as K, Dialog as ae, Badge as se, Progress as re, EmptyState as le, Callout as ce, Card as de, Surface as pe, SettingsRow as ue, SettingsSection as me, FormItem as he, Form as fe, RadioGroup as ge, Switch as be, Checkbox as ye, Select as we, Input as ve, Button as Se, SectionTabs as $e, AppSidebar as je, AppToolbar as xe, PageHeader as Oe, PageContent as Ae, ResponsiveView as ke, AppLayout as Pe, AppRoot as Ce, getRegisteredIcon as Ie } from "./index.js";
-const J = t.lazy(() => t.object({
+const z = t.lazy(() => t.object({
   key: t.string(),
   label: t.string(),
   icon: t.string().optional(),
   badge: t.union([t.string(), t.number()]).optional(),
   disabled: t.boolean().optional(),
   selectable: t.boolean().optional(),
-  children: t.array(J).optional()
+  children: t.array(z).optional()
 })), P = t.object({
   label: t.string(),
   value: t.string(),
@@ -29,7 +29,7 @@ const J = t.lazy(() => t.object({
   /** Sets the alignment: DSM keeps every column left; number and date digits get one width. */
   type: t.enum(["text", "number", "date", "actions"]).optional(),
   align: t.enum(["left", "center", "right"]).optional()
-}), V = {
+}), J = {
   AppRoot: {
     props: t.object({
       modalScope: t.enum(["document", "app"]).optional()
@@ -79,7 +79,7 @@ const J = t.lazy(() => t.object({
       value: t.string().optional(),
       groups: t.array(t.object({
         label: t.string().optional(),
-        items: t.array(J)
+        items: t.array(z)
       })),
       searchable: t.boolean().optional(),
       collapsible: t.boolean().optional(),
@@ -118,7 +118,7 @@ const J = t.lazy(() => t.object({
   Button: {
     props: t.object({
       label: t.string(),
-      variant: t.enum(["primary", "secondary", "ghost", "danger", "danger-outline"]).optional(),
+      variant: t.enum(["primary", "secondary", "ghost", "danger", "danger-outline", "text"]).optional(),
       size: t.enum(["sm", "md", "lg"]).optional(),
       disabled: t.boolean().optional(),
       loading: t.boolean().optional(),
@@ -361,7 +361,7 @@ const J = t.lazy(() => t.object({
     description: "Centered loading state for a page or bounded region."
   }
 }, A = F(G, {
-  components: V,
+  components: J,
   actions: {}
 }), Ke = [
   "Prefer AppRoot > AppShell > Page as the normal DSM application hierarchy.",
@@ -392,17 +392,17 @@ function Ne(e) {
 function C(e) {
   return e ? Ie(e) : void 0;
 }
-function _(e) {
+function V(e) {
   return {
     ...e,
     icon: C(e.icon),
-    children: e.children?.map(_)
+    children: e.children?.map(V)
   };
 }
 function Ee(e) {
-  return e.map((o) => ({ ...o, items: o.items.map(_) }));
+  return e.map((o) => ({ ...o, items: o.items.map(V) }));
 }
-const Je = {
+const ze = {
   AppRoot: ({ props: e, slots: o }) => d(Ce, { modalScope: e.modalScope }, o),
   AppShell: ({ props: e, slots: o }) => d(Pe, {
     sidebarWidth: e.sidebarWidth,
@@ -452,7 +452,7 @@ const Je = {
   }, o),
   Text: ({ props: e }) => {
     const o = e.variant ?? "body";
-    return d(o === "heading" ? "h2" : o === "mono" ? "code" : "span", { class: o === "muted" ? "text-[length:var(--ui-font-size-control)] text-[var(--ui-text-muted)]" : o === "caption" ? "text-[12px] text-[var(--ui-text-muted)]" : o === "heading" ? "text-[16px] font-semibold text-[var(--ui-text)]" : o === "mono" ? "font-mono text-[12px] text-[var(--ui-text)]" : "text-[length:var(--ui-font-size-control)] text-[var(--ui-text)]", "data-syno-pkg-land-ui": "" }, e.text);
+    return d(o === "heading" ? "h2" : o === "mono" ? "code" : "span", { class: o === "muted" ? "text-[length:var(--ui-font-size-control)] text-[var(--ui-text-muted)]" : o === "caption" ? "text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)]" : o === "heading" ? "text-[length:var(--ui-font-size-title)] font-semibold text-[var(--ui-text)]" : o === "mono" ? "font-mono text-[length:var(--ui-font-size-sm)] text-[var(--ui-text)]" : "text-[length:var(--ui-font-size-control)] text-[var(--ui-text)]", "data-syno-pkg-land-ui": "" }, e.text);
   },
   Button: ({ props: e, emit: o }) => {
     const n = C(e.icon);
@@ -617,7 +617,7 @@ const Je = {
   InputGroup: ({ slots: e }) => d(te, null, e),
   Loading: ({ props: e }) => d(ee, { text: e.text })
 }, { registry: D } = W(A, {
-  components: Je
+  components: ze
 }), ut = /* @__PURE__ */ H({
   __name: "SynoJsonRenderer",
   props: {
@@ -656,12 +656,12 @@ const Je = {
       _: 1
     }, 8, ["registry", "store", "initial-state", "handlers", "navigate", "functions", "directives", "validation-functions", "on-state-change"]));
   }
-}), Ve = ["label", "title", "description", "text", "placeholder", "emptyText", "help", "ariaLabel", "valueLabel", "searchPlaceholder"];
-function z(e, o = "") {
-  return Array.isArray(e) ? e : Object.entries(e).flatMap(([n, a]) => m(a) ? z(a, `${o}${n}.`) : [`${o}${n}`]);
+}), Je = ["label", "title", "description", "text", "placeholder", "emptyText", "help", "ariaLabel", "valueLabel", "searchPlaceholder"];
+function _(e, o = "") {
+  return Array.isArray(e) ? e : Object.entries(e).flatMap(([n, a]) => m(a) ? _(a, `${o}${n}.`) : [`${o}${n}`]);
 }
 const m = (e) => typeof e == "object" && e !== null && !Array.isArray(e), u = (...e) => e.map((o) => "/" + String(o).replaceAll("~", "~0").replaceAll("/", "~1")).join("");
-function _e(e, o) {
+function Ve(e, o) {
   const n = Array.from({ length: o.length + 1 }, (a, i) => i);
   for (let a = 1; a <= e.length; a++) {
     let i = n[0];
@@ -676,12 +676,12 @@ function _e(e, o) {
 function y(e, o) {
   let n, a = 1 / 0;
   for (const i of o) {
-    const s = _e(e, i);
+    const s = Ve(e, i);
     s < a && ([n, a] = [i, s]);
   }
   return n !== void 0 && a <= Math.max(2, Math.floor(e.length / 3)) ? n : void 0;
 }
-const ze = ["$state", "$item", "$index", "$bindState", "$bindItem", "$cond", "$computed", "$template"], qe = (e) => m(e) && ze.some((o) => Object.hasOwn(e, o)), I = (e) => qe(e) || (Array.isArray(e) ? e.some(I) : m(e) && Object.values(e).some(I));
+const _e = ["$state", "$item", "$index", "$bindState", "$bindItem", "$cond", "$computed", "$template"], qe = (e) => m(e) && _e.some((o) => Object.hasOwn(e, o)), I = (e) => qe(e) || (Array.isArray(e) ? e.some(I) : m(e) && Object.values(e).some(I));
 function k(e) {
   const o = e.props?.shape;
   return m(o) ? o : void 0;
@@ -730,7 +730,7 @@ function mt(e, o = {}) {
     }
     Be(i, p, h, a[h], f.props), Me(i, p, h, a[h], f, s);
   }
-  const c = o.messages && z(o.messages), l = {
+  const c = o.messages && _(o.messages), l = {
     issues: i,
     components: a,
     actions: [
@@ -942,7 +942,7 @@ const Ye = ["statePath", "clearStatePath"];
 function Qe(e, o, n, a) {
   const i = (...c) => u("elements", o, ...c);
   if ($(e, o, n.props, i("props"), a), e.messageKeys && m(n.props))
-    for (const c of Ve) {
+    for (const c of Je) {
       const l = n.props[c];
       typeof l == "string" && l.trim() && e.issues.warn({
         code: "literal_text",
@@ -999,7 +999,7 @@ function U(e, o, n, a, i) {
 function T(e) {
   return { valid: e.errors.length === 0, errors: e.errors, warnings: e.warnings };
 }
-const x = V;
+const x = J;
 function Ze(e) {
   const o = t.toJSONSchema(e);
   return delete o.$schema, o;
@@ -1160,9 +1160,9 @@ export {
   pt as synoJsonAiPrompt,
   Ke as synoJsonAiRules,
   A as synoJsonCatalog,
-  V as synoJsonComponentDefinitions,
+  J as synoJsonComponentDefinitions,
   D as synoJsonRegistry,
-  Je as synoJsonRenderers,
+  ze as synoJsonRenderers,
   bt as synoJsonSchema,
   Kt as useActions,
   Lt as useBoundProp,

package/dist/lib/adaptiveLayout.d.ts

@@ -1,4 +1,5 @@
 import { ComputedRef, InjectionKey, Ref } from 'vue';
+import { DropdownMenuEntry } from '../components/primitives/dropdown-menu/types';
 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;
@@ -72,6 +73,22 @@ export type AppNavigationDrawer = {
     claim: () => () => void;
 };
 export declare const APP_NAVIGATION_DRAWER_KEY: InjectionKey<AppNavigationDrawer>;
+/**
+ * The phone bar's one overflow menu. A DropdownMenu registers here; while the
+ * last registered menu whose trigger is in the bar's page actions is the
+ * page's "…", the layout's `headerActions` (an App shell's account entry too)
+ * join it after a separator instead of a second "…" of the layout's own.
+ */
+export type AppBarMenu = {
+    /** The menu that takes the layout's entries, or null when the layout keeps its own "…". */
+    owner: Readonly<Ref<symbol | null>>;
+    /** The layout's entries for the owner to append, without the leading separator. */
+    entries: ComputedRef<DropdownMenuEntry[]>;
+    /** A pick of one of those entries (AppLayout emits `headerAction`). */
+    select: (key: string) => void;
+    register: (id: symbol, trigger: () => HTMLElement | null | undefined) => () => void;
+};
+export declare const APP_BAR_MENU_KEY: InjectionKey<AppBarMenu>;
 /** AppSidebar and AppTabBar report a change of the selected page, so AppLayout's content rises in. */
 export declare const APP_PAGE_CHANGE_KEY: InjectionKey<() => void>;
 /**

package/dist/lib/scroll.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Scrolling an element into view inside the one scroller that holds it. On a
+ * phone the page scrolls in the layout's main area or in a PageContent; on a
+ * desktop often in a pane or the document. `Element.scrollIntoView` moves
+ * every scrollable ancestor (and can shift a whole App inside DSM), so these
+ * move only the nearest one, and stop the target below what sticks at the top
+ * of the page (`--ui-sticky-top-offset`, set by PageContent, read through the
+ * target's `scroll-margin-top`).
+ */
+export type ScrollAlign = 'start' | 'nearest';
+export type ScrollWithinOptions = {
+    /** `start` puts the target at the top; `nearest` (default) moves only as far as needed. */
+    block?: ScrollAlign;
+    /** Defaults to `smooth`, and `auto` under reduced motion. */
+    behavior?: ScrollBehavior;
+    /** Extra room above the target, in px, on top of its scroll margin. */
+    offset?: number;
+};
+/**
+ * The nearest ancestor of `element` that scrolls vertically (its overflow
+ * lets it scroll and its content is taller than it), else the document's
+ * scrolling element.
+ */
+export declare function nearestScroller(element: Element | null | undefined): HTMLElement;
+/**
+ * Scrolls the nearest scroller of `element` (only that one) so the element
+ * shows below what sticks at the top of the page. Returns the scroller.
+ */
+export declare function scrollIntoViewWithinScroller(element: Element | null | undefined, options?: ScrollWithinOptions): HTMLElement | null;
+/** Scrolls the nearest scroller of `element` so the element starts at its top, below what sticks there. */
+export declare function scrollToStart(element: Element | null | undefined, options?: Omit<ScrollWithinOptions, 'block'>): HTMLElement | null;

package/dist/lib/typeScale.d.ts

@@ -0,0 +1,20 @@
+export type TypeScale = {
+    /** Body text: list and record titles, values, menu items (`--ui-font-size`). */
+    body: number;
+    /** Secondary text: labels, captions, axis labels, legends (`--ui-font-size-sm`). */
+    small: number;
+    /** The smallest text anywhere (`--ui-font-size-xs`). */
+    tiny: number;
+    /** Card and section titles (`--ui-font-size-lg`). */
+    large: number;
+    /** Header and dialog titles (`--ui-font-size-title`). */
+    title: number;
+    /** Body line height (`--ui-line-height`). */
+    lineHeight: number;
+    /** The font stack (`--ui-font-sans`). */
+    family: string;
+};
+/** The type tokens in effect on `el`, in CSS pixels; a missing token keeps the desktop value. */
+export declare function readTypeScale(el: Element): TypeScale;
+/** A canvas `font` string for one step of the scale: `canvasFont(scale, 'small', 600)`. */
+export declare function canvasFont(scale: TypeScale, step: Exclude<keyof TypeScale, 'lineHeight' | 'family'>, weight?: number | string): string;

package/dist/reka-runtime.json

@@ -3,7 +3,7 @@
   "version": "2.11.0",
   "delivery": "bundled-patched-esm",
   "patchManifestSha256": "9c5b9c9a162fa584b4695a683368a4484b3ac6e70177fd063b77aa618c051627",
-  "bundleSha256": "456f1e93092c2704e275d53a03614a7760ef0ab738e8531a1499bd0ca07e090d",
+  "bundleSha256": "ca127c182520c64a4c770b2c9e3d034c7f1c232430211e18a3079590339d0db1",
   "sourceHashes": {
     "shared/useBodyScrollLock.js": "287bfb604318c4202769e4b5191896eaf0e52a952e1de898967cbe09467fcfda",
     "DismissableLayer/DismissableLayer.js": "3c8d248f0a32e01f89ca1f6202b1bb691bf5d0e4012a92535e161c35e69cdc32",