@webority/ui-react 0.107.0 → 0.108.0

package/dist/lib/useCommandPaletteShortcut.js

@@ -1 +1 @@
-import{useEffect as e,useRef as t}from"react";function n(n,{key:r=`k`}={}){let i=t(n);e(()=>{i.current=n}),e(()=>{let e=String(r).toLowerCase(),t=t=>{!(t.ctrlKey||t.metaKey)||t.altKey||t.shiftKey||t.repeat||String(t.key).toLowerCase()===e&&(t.preventDefault(),i.current?.())};return window.addEventListener(`keydown`,t),()=>window.removeEventListener(`keydown`,t)},[r])}export{n as useCommandPaletteShortcut};
+import{isCommandChord as e}from"@webority/ui-elements/helpers";import{useEffect as t,useRef as n}from"react";function r(r,{key:i=`k`}={}){let a=n(r);t(()=>{a.current=r}),t(()=>{let t=t=>{e(t,i)&&(t.preventDefault(),a.current?.())};return window.addEventListener(`keydown`,t),()=>window.removeEventListener(`keydown`,t)},[i])}export{r as useCommandPaletteShortcut};

package/dist/lib/useFileDrop.js

@@ -0,0 +1 @@
+import{acceptDroppedFiles as e}from"@webority/ui-elements/helpers";import{useRef as t,useState as n}from"react";function r({accept:r,maxSizeMb:i,multiple:a,disabled:o=!1,onFiles:s,onReject:c}){let[l,u]=n(!1),d=t(0);return{dragOver:l,dropProps:{onDragEnter:e=>{e.preventDefault(),!o&&(d.current+=1,u(!0))},onDragOver:e=>{e.preventDefault(),o||u(!0)},onDragLeave:e=>{e.preventDefault(),!o&&(d.current=Math.max(0,d.current-1),d.current===0&&u(!1))},onDrop:t=>{if(t.preventDefault(),d.current=0,u(!1),o)return;let{files:n,rejections:l}=e(t.dataTransfer?.files,{accept:r,maxSizeMb:i,multiple:a});n.length&&s(n),l.length&&c(l[0])}}}}export{r as default};

package/dist/lib/wuiMarker.js

@@ -1 +1 @@
-var e=`data-wui`,t=`data-wui-props`,n=`data-canvas`,r=`data-canvas-at`,i=`__WUI_MARKERS__`,a=`props`,o=new Set([`children`,`className`,`style`,`id`,`key`,`ref`,`as`,`linkComponent`,`src`]),s=e=>typeof e==`string`||typeof e==`number`||typeof e==`boolean`;function c(){return globalThis[i]===a}function l(i,a){let l={[e]:i},u=a?.[n];typeof u==`string`&&u!==``&&(l[n]=u);let d=a?.[r];if(typeof d==`string`&&d!==``&&(l[r]=d),!c())return l;let f={};for(let[e,t]of Object.entries(a||{}))o.has(e)||e.startsWith(`aria-`)||e.startsWith(`data-`)||/^on[A-Z]/.test(e)||s(t)&&(f[e]=t);return l[t]=JSON.stringify(f),l}export{r as WUI_CANVAS_AT_ATTRIBUTE,n as WUI_CANVAS_KEY_ATTRIBUTE,i as WUI_MARKERS_GLOBAL,a as WUI_MARKERS_PROPS_MODE,e as WUI_MARKER_ATTRIBUTE,t as WUI_MARKER_PROPS_ATTRIBUTE,l as wuiMarkerAttributes,c as wuiMarkerPropsOn};
+var e=`data-wui`,t=`data-wui-props`,n=`data-canvas`,r=`data-canvas-at`,i=`__WUI_MARKERS__`,a=`props`,o=new Set([`children`,`className`,`style`,`id`,`key`,`ref`,`as`,`linkComponent`,`src`]),s=e=>typeof e==`string`||typeof e==`number`||typeof e==`boolean`;function c(){return globalThis[i]===a}function l(i,a){let l={[e]:i},u=a?.[n];typeof u==`string`&&u!==``&&(l[n]=u);let d=a?.[r];if(typeof d==`string`&&d!==``&&(l[r]=d),!c())return l;let f={};for(let[e,t]of Object.entries(a||{}))o.has(e)||e.startsWith(`aria-`)||e.startsWith(`data-`)||/^on[A-Z]/.test(e)||s(t)&&(f[e]=t);return l[t]=JSON.stringify(f),l}function u(e,t){let{[n]:i,[r]:a,...o}=t??{};return{marker:l(e,t),props:o}}export{r as WUI_CANVAS_AT_ATTRIBUTE,n as WUI_CANVAS_KEY_ATTRIBUTE,i as WUI_MARKERS_GLOBAL,a as WUI_MARKERS_PROPS_MODE,e as WUI_MARKER_ATTRIBUTE,t as WUI_MARKER_PROPS_ATTRIBUTE,u as splitMarkerProps,l as wuiMarkerAttributes,c as wuiMarkerPropsOn};

package/dist/types/components/AppAccordion.d.ts

@@ -1,6 +1,6 @@
 /**
  * Collapsible panes — an FAQ list, a set of grouped settings, a "more detail"
- * disclosure. Renders the theme's `.faq-list` markup, the same as the Razor
+ * disclosure. Renders the theme's `.wui-accordion` markup, the same as the Razor
  * `<app-accordion>`.
  *
  * Height animates through `grid-template-rows: 0fr -> 1fr` in CSS, so a pane

package/dist/types/components/AppCompareTable.d.ts

@@ -1,18 +1,25 @@
 /**
- * A feature-comparison table — one row per capability, one column per option, with
- * the recommended column tinted so it reads without a legend. The marketing
- * "us vs them" table and a plan-feature matrix are the same shape.
+ * A feature-comparison table: one row per capability, one column per option, with the
+ * recommended column tinted so it reads without a legend.
  *
- * A cell value of `true`/`false` renders a tick or a dash; anything else renders
- * as-is, so a column can mix "yes/no" with "5 GB".
+ * A cell value is a tick (`true`), a dash (`false`), a state (`{ state, text? }` with
+ * state yes, no, warn or partial, drawn as an icon beside its text), a reference code
+ * (`{ code }`), or any node, drawn as written so `<sub>`, links and commas work.
  *
- * For tabular DATA (sortable, paginated rows of records) use `AppDataTable` —
- * this is an editorial comparison, not a grid.
+ * Under 576px of container width the table stacks by default: each row becomes a card with
+ * its label as the title and each cell under its column name. `mobile="scroll"` keeps the
+ * table whole and scrolls it sideways in a focusable region named by the caption.
+ *
+ * For tabular DATA (sortable, paginated rows of records) use `AppDataTable`.
  *
  * @param {object} props
- * @param {{ label: string, highlight?: boolean }[]} props.columns
- * @param {{ key?: string, label: string, values: (boolean|import('react').ReactNode)[] }[]} props.rows
+ * @param {{ label: string, highlight?: boolean, align?: "start"|"center", nowrap?: boolean }[]} props.columns
+ * @param {{ key?: string, label: string, group?: string, values: (boolean|import('react').ReactNode|{ state: "yes"|"no"|"warn"|"partial", text?: import('react').ReactNode }|{ code: string })[] }[]} props.rows
  * @param {string} [props.caption]
+ * @param {"stack"|"scroll"} [props.mobile] Container under 576px: stack rows as cards (default) or scroll sideways.
+ * @param {boolean} [props.stickyFirstColumn] With mobile="scroll".
+ * @param {boolean} [props.stickyHeader]
+ * @param {"comfortable"|"relaxed"} [props.density]
  * @param {string} [props.className]
  */
 export default function AppCompareTable(props: {
@@ -20,15 +27,43 @@ export default function AppCompareTable(props: {
     columns: {
         label: string;
         highlight?: boolean;
+        align?: "start" | "center";
+        nowrap?: boolean;
     }[];
     /** One row per capability. */
     rows: {
         key?: string;
         label: string;
-        values: (boolean | import('react').ReactNode)[];
+        group?: string;
+        values: (boolean | import('react').ReactNode | {
+            state: "yes" | "no" | "warn" | "partial";
+            text?: import('react').ReactNode;
+        } | {
+            code: string;
+        })[];
     }[];
     /** Accessible description of what is being compared. */
     caption?: string;
+    /**
+     * Under 576px of table width: stack (default) turns each row into a card; scroll keeps the columns and scrolls sideways.
+     * @default "stack"
+     */
+    mobile?: "stack" | "scroll";
+    /**
+     * With mobile scroll: the first column stays in place while the rest scrolls.
+     * @default false
+     */
+    stickyFirstColumn?: boolean;
+    /**
+     * The header row stays on screen while a long table scrolls past it.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * relaxed sets a 16px body and 32px side padding for marketing tables.
+     * @default "comfortable"
+     */
+    density?: "comfortable" | "relaxed";
     /**
      * Extra classes on the root.
      * @default ""

package/dist/types/components/AppDescriptions.d.ts

@@ -4,14 +4,14 @@
  * label/value pairs.
  *
  * Each item can span multiple columns and specify a size variant. Empty/null values
- * render as a muted em-dash so a missing fact reads as "no value", not a broken row.
+ * render as a muted hyphen so a missing fact reads as "no value", not a broken row.
  *
  * @param {object} props
- * @param {{ label: string, value: import('react').ReactNode, span?: 1|2|3, key?: string, emphasis?: boolean }[]} props.items
- * @param {1|2|3} [props.columns]
+ * @param {{ label: string, value: import('react').ReactNode, span?: number, key?: string, emphasis?: boolean, icon?: string|import('react').ReactNode, href?: string }[]} props.items
+ * @param {1|2|3|4} [props.columns] Validated; default 2.
  * @param {"sm"|"md"} [props.size]
  * @param {boolean} [props.bordered]
- * @param {"grid"|"summary"} [props.layout]
+ * @param {"grid"|"summary"|"list"} [props.layout] "list": one column, a rule between rows, flush first and last row, 36px icon tile, value on one line with an ellipsis.
  * @param {import('react').ReactNode} [props.title]
  * @param {string} [props.className]
  */
@@ -20,15 +20,17 @@ export default function AppDescriptions(props: {
     items: {
         label: string;
         value: import('react').ReactNode;
-        span?: 1 | 2 | 3;
+        span?: number;
         key?: string;
         emphasis?: boolean;
+        icon?: string | import('react').ReactNode;
+        href?: string;
     }[];
     /**
      * How many columns the grid should have, before the media-breakpoint collapse.
      * @default 2
      */
-    columns?: 1 | 2 | 3;
+    columns?: 1 | 2 | 3 | 4;
     /**
      * Item padding and font size.
      * @default "md"
@@ -40,10 +42,10 @@ export default function AppDescriptions(props: {
      */
     bordered?: boolean;
     /**
-     * summary puts each label left of its value, with tabular figures.
+     * summary puts each label left of its value, with tabular figures. list is one column of rows with a rule between them, a flush first and last row and a single-line value.
      * @default "grid"
      */
-    layout?: "grid" | "summary";
+    layout?: "grid" | "summary" | "list";
     /** Optional heading above the grid. */
     title?: import('react').ReactNode;
     /**

package/dist/types/components/AppDrawer.d.ts

@@ -14,19 +14,29 @@ import "@webority/ui-elements/elements/drawer";
  * @param {() => void} [props.onClose] Called when the backdrop, Escape, the close button or a drag
  *   down asks to close it. It stays open until `open` becomes false.
  * @param {string} [props.title]
+ * @param {string} [props.titleIcon]
+ * @param {import('react').ReactNode} [props.header] Replaces the default header (title, subtitle, close).
  * @param {string} [props.subtitle]
  * @param {string} [props.ariaLabel]
  * @param {'end'|'start'} [props.side]
  * @param {'sm'|'md'|'lg'|'xl'} [props.size]
+ * @param {string} [props.width] CSS width; overrides size. Max width 92vw unless maxWidth is given.
+ * @param {string} [props.maxWidth]
  * @param {number[]} [props.snapPoints]
  * @param {number} [props.defaultSnap]
+ * @param {boolean} [props.sheet] Below md the drawer is a bottom sheet with snap points. false keeps the side panel at every width (menus). Default true.
  * @param {(index: number, percent: number) => void} [props.onSnapChange] Called when the sheet moves to another point.
+ * @param {() => void} [props.onOpened] After the open transition.
+ * @param {() => void} [props.onClosed] After the close transition.
  * @param {boolean} [props.dismissible]
+ * @param {string} [props.closeLabel] Default "Close".
  * @param {boolean} [props.staticBackdrop]
  * @param {string} [props.confirmDiscard]
  * @param {boolean} [props.dirty]
  * @param {import('react').ReactNode} [props.footer]
  * @param {string} [props.className]
+ * @param {string} [props.bodyClassName]
+ * @param {import('react').CSSProperties} [props.style]
  * @param {import('react').ReactNode} props.children
  */
 export default function AppDrawer(props: {
@@ -38,6 +48,10 @@ export default function AppDrawer(props: {
     onClose?: () => void;
     /** The heading, and the dialog's accessible name. */
     title?: string;
+    /** Library icon beside the title. */
+    titleIcon?: string;
+    /** A custom header that replaces the default one (title, subtitle and close button). */
+    header?: import('react').ReactNode;
     /** A line under the title. */
     subtitle?: string;
     /** The dialog's accessible name when there is no title. */
@@ -52,6 +66,10 @@ export default function AppDrawer(props: {
      * @default "md"
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** The panel's CSS width, such as 420px. Overrides size. */
+    width?: string;
+    /** Caps the panel's width, such as 600px. Unset, the theme caps it at 92vw. */
+    maxWidth?: string;
     /**
      * The sheet's resting heights, each 10 to 100 percent of the screen.
      * @default [50,90]
@@ -62,12 +80,24 @@ export default function AppDrawer(props: {
      * @default 0
      */
     defaultSnap?: number;
+    /**
+     * Below md the drawer is a bottom sheet that rests on snapPoints. false keeps the side panel at every width, for a menu or a filter panel.
+     * @default true
+     */
+    sheet?: boolean;
     onSnapChange?: (index: number, percent: number) => void;
+    onOpened?: () => void;
+    onClosed?: () => void;
     /**
      * Show the close button.
      * @default true
      */
     dismissible?: boolean;
+    /**
+     * The close button's accessible name, for other languages.
+     * @default "Close"
+     */
+    closeLabel?: string;
     /**
      * The backdrop, Escape and a drag down no longer close it; only the close button or open can.
      * @default false
@@ -87,5 +117,12 @@ export default function AppDrawer(props: {
      * @default ""
      */
     className?: string;
+    /**
+     * Classes on the scrolling body, such as p-0 to drop its padding.
+     * @default ""
+     */
+    bodyClassName?: string;
+    /** Inline style on the drawer element. */
+    style?: import('react').CSSProperties;
     children: import('react').ReactNode;
 }): import("react").JSX.Element;

package/dist/types/components/AppEmptyState.d.ts

@@ -1,10 +1,11 @@
 /**
- * The standalone empty / placeholder block a card or section shows when it has
- * nothing to display: an icon bubble, a title, optional body text, and an optional
- * action. Same `.empty-state` markup as before — zero visual change.
+ * The standalone empty / placeholder block a card, a section or a data table body shows
+ * when it has nothing to display: an icon bubble, a title, optional body text, and an
+ * optional action.
  *
- * For the empty body of a AppDataTable use `AppTableEmptyState` instead (a different
- * `.tbl-empty` design); this is the card / section version.
+ * `variant` picks the look: "card" (default) is the card or section empty state; "table"
+ * is the body of an AppDataTable, a column with a larger disc above the title. The table
+ * look has no tighter scale, so `size="sm"` with `variant="table"` warns in dev.
  *
  * `size` picks the type scale: "md" (default) is the page/card empty state; "sm" is
  * the tighter widget/tile variant (smaller title + text).
@@ -14,6 +15,7 @@
  * @param {string|import('react').ReactNode} [props.illustration]
  * @param {number} [props.iconSize]
  * @param {"md"|"sm"} [props.size]
+ * @param {"card"|"table"} [props.variant]
  * @param {import('react').ReactNode} props.title
  * @param {import('react').ReactNode} [props.text]
  * @param {import('react').ReactNode} [props.action]
@@ -35,6 +37,11 @@ export default function AppEmptyState(props: {
      * @default "md"
      */
     size?: "md" | "sm";
+    /**
+     * The look: card is the card or section empty state; table is the body of a data table, with a larger disc above the title. The table look has no sm scale, so size sm with table warns.
+     * @default "card"
+     */
+    variant?: "card" | "table";
     /** The headline of the empty state. */
     title: import('react').ReactNode;
     /** Body text under the title. */

package/dist/types/components/AppImagePicker.d.ts

@@ -0,0 +1,149 @@
+import "@webority/ui-elements/elements/image-crop";
+/**
+ * One image picker with two looks. controls="overlay": a ring with a hover label and an x to remove (the logo look). controls="buttons": the photo beside Upload or Change, Take photo and Remove (the profile photo look). `kind` picks the preset; each prop below overrides it.
+ * @param {object} props
+ * @param {"logo"|"avatar"} [props.kind] Default "logo".
+ * @param {"overlay"|"buttons"} [props.controls] Default "overlay" for logo, "buttons" for avatar.
+ * @param {string} [props.value] Current image URL.
+ * @param {import('react').ReactNode} [props.fallback] Shown with no image.
+ * @param {"initials"|"avatar"} [props.variant] With no fallback, "avatar" draws a person glyph. Default "initials".
+ * @param {string} [props.name] Field name; the chosen file (the crop when cropping) is written into the named file input.
+ * @param {(file: File) => void} [props.onPick]
+ * @param {() => void} [props.onRemove] Shows Remove when given.
+ * @param {string} [props.removeName] Hidden field set to "true" after Remove, for a posted form.
+ * @param {boolean} [props.loading]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.accept] Default DEFAULT_IMAGE_ACCEPT for logo, AVATAR_ACCEPT for avatar.
+ * @param {number} [props.maxSizeMb] 0 is no limit. Default 5 for logo, AVATAR_MAX_SIZE_MB (10) for avatar.
+ * @param {"circle"|"rounded"|"square"} [props.shape] Default "circle".
+ * @param {"sm"|"md"|"lg"|number} [props.size] logo 72, 120, 160 px; avatar 64, 96, 128 px; a number is px. Default "md".
+ * @param {number|"free"} [props.crop] Default none for logo, 1 for avatar.
+ * @param {boolean} [props.rotatable] Default false for logo, true for avatar.
+ * @param {boolean} [props.previews] The 96 and 48 px live previews. Default false for logo, true for avatar.
+ * @param {boolean} [props.camera] The Take photo button (front camera). Default false for logo, true for avatar.
+ * @param {number} [props.outputSize] Square output in px; only with crop 1. Default none for logo, AVATAR_OUTPUT_SIZE (512) for avatar.
+ * @param {"keep"|"image/webp"} [props.outputType] Default "keep" for logo, "image/webp" for avatar.
+ * @param {"stacked"|"inline"|"profile"} [props.layout] Default "stacked".
+ * @param {import('react').ReactNode} [props.title]
+ * @param {import('react').ReactNode} [props.subtitle]
+ * @param {string} [props.overlayIcon] Default "image".
+ * @param {string} [props.overlayLabel] Default "Update photo".
+ * @param {string} [props.removeLabel] Default "Remove photo".
+ * @param {string} [props.ariaLabel] Default "Upload photo".
+ * @param {import('react').ReactNode} [props.label]
+ * @param {string} [props.hint]
+ * @param {string} [props.error]
+ * @param {boolean} [props.required]
+ * @param {string} [props.className] On the picker.
+ * @param {string} [props.fieldClassName] On the .field wrapper.
+ * @param {import('react').CSSProperties} [props.style]
+ */
+export default function AppImagePicker(props: {
+    /**
+     * The preset: logo is an identity ring, avatar is a person's profile photo. Each prop below overrides the preset.
+     * @default "logo"
+     */
+    kind?: "logo" | "avatar";
+    /** overlay is a ring with a hover label and an x to remove. buttons is the photo beside Upload or Change, Take photo and Remove. Default overlay for logo, buttons for avatar. */
+    controls?: "overlay" | "buttons";
+    /** The current image URL. Absent or empty means no image. */
+    value?: string;
+    /** Shown when there is no image, for example initials. */
+    fallback?: import('react').ReactNode;
+    /**
+     * With no fallback, avatar draws a person icon. The avatar kind uses avatar.
+     * @default "initials"
+     */
+    variant?: "initials" | "avatar";
+    /** The form field name. The chosen file, or the crop when cropping, is written into the file input, so an uncontrolled form posts it. */
+    name?: string;
+    onPick?: (file: File) => void;
+    onRemove?: () => void;
+    /** A form field that posts true once Remove is pressed. */
+    removeName?: string;
+    /**
+     * Shows a spinner and blocks every action while the picked file uploads.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Blocks every action.
+     * @default false
+     */
+    disabled?: boolean;
+    /** The file types a person may choose. Defaults to PNG, JPG and WebP for logo; JPG, PNG, WebP and HEIC for avatar. HEIC opens only where the browser can decode it. */
+    accept?: string;
+    /** The size limit in megabytes; 0 means no limit. Defaults to 5 for logo and 10 for avatar. */
+    maxSizeMb?: number;
+    /**
+     * The ring or frame shape.
+     * @default "circle"
+     */
+    shape?: "circle" | "rounded" | "square";
+    /**
+     * A preset diameter (logo 72, 120, 160 px; avatar 64, 96, 128 px) or an exact number of pixels.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg" | number;
+    /** Adds a crop step before upload. A number is the frame's width divided by its height, such as 1 for a round avatar; free lets the person resize the frame. Default none for logo, 1 for avatar. */
+    crop?: number | "free";
+    /** Offers rotation in the crop dialog. Default false for logo, true for avatar. */
+    rotatable?: boolean;
+    /** Shows the 96 and 48 px live previews in the crop dialog. Default false for logo, true for avatar. */
+    previews?: boolean;
+    /** Shows the Take photo button, which opens the front camera. Default false for logo, true for avatar. */
+    camera?: boolean;
+    /** The width and height of the saved square, in pixels, with a crop of 1. Default none for logo, 512 for avatar. */
+    outputSize?: number;
+    /** The type of the saved crop: keep the chosen type, or WebP. Default keep for logo, WebP for avatar. */
+    outputType?: "keep" | "image/webp";
+    /**
+     * Stacked is the ring with the hint below. Inline puts the ring on the left with a title, subtitle and hint column beside it. Profile stacks the same identity block, centred, beneath the ring. Applies to the overlay controls.
+     * @default "stacked"
+     */
+    layout?: "stacked" | "inline" | "profile";
+    /** Bold primary text beside the ring. Inline and profile layouts only. */
+    title?: import('react').ReactNode;
+    /** Muted secondary text beside the ring. Inline and profile layouts only. */
+    subtitle?: import('react').ReactNode;
+    /**
+     * The icon name for the hover overlay. Overlay controls only.
+     * @default "image"
+     */
+    overlayIcon?: string;
+    /**
+     * The text of the hover overlay. Overlay controls only.
+     * @default "Update photo"
+     */
+    overlayLabel?: string;
+    /**
+     * The accessible name and tooltip of the remove control. Use Remove logo on a logo picker.
+     * @default "Remove photo"
+     */
+    removeLabel?: string;
+    /** The accessible name of the upload control. Defaults to Upload photo for the overlay and to the action's words for buttons. */
+    ariaLabel?: string;
+    /** An optional field label above the picker. */
+    label?: import('react').ReactNode;
+    /** Help text under the picker. An error replaces it. */
+    hint?: string;
+    /** An error from the caller. It wins over a rejection reason. */
+    error?: string;
+    /**
+     * Marks the field as required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Extra class on the picker.
+     * @default ""
+     */
+    className?: string;
+    /**
+     * Extra class on the field wrapper.
+     * @default ""
+     */
+    fieldClassName?: string;
+    /** Inline style on the picker. */
+    style?: import('react').CSSProperties;
+}): import("react").JSX.Element;

package/dist/types/components/AppInlineEdit.d.ts

@@ -1,5 +1,4 @@
 import "@webority/ui-elements/elements/datepicker";
-import "@webority/ui-elements/elements/select";
 /**
  * One value edited where it is shown: a table cell or a fact on a detail page. It reads as plain
  * text with a pencil on hover and focus; a click or Enter turns it into the matching library control

package/dist/types/components/AppNavigationMenu.d.ts

@@ -7,7 +7,7 @@ import "@webority/ui-elements/elements/navigation-menu";
  * a link or clicking out. One panel is open at a time, and one that would leave the screen aligns
  * to the end of its entry. Below `md` the entries stack and a panel opens in the page flow. The
  * behaviour is the shared `<wui-navigation-menu>` element, the same one the Razor
- * `<app-navigation-menu>` uses. For an application menubar (File, Edit) use `AppMenubar`.
+ * `<app-navigation-menu>` uses.
  *
  * NOTE: the exported component must stay the FIRST destructured function in this file —
  * the parity check reads the first signature it finds as the component's public props.

package/dist/types/components/AppNotificationCenter.d.ts

@@ -29,6 +29,10 @@ export type NotificationItem = {
      * A library icon name, drawn before the text.
      */
     icon?: string;
+    /**
+     * Filed away: shown only under the Archived tab.
+     */
+    archived?: boolean;
 };
 /**
  * @typedef {object} NotificationItem
@@ -40,6 +44,7 @@ export type NotificationItem = {
  *   or a "YYYY-MM-DD" day. It sets the day group and the time shown, in India Standard Time.
  * @property {boolean} [read] Already read: no dot, regular weight.
  * @property {string} [icon] A library icon name, drawn before the text.
+ * @property {boolean} [archived] Filed away: shown only under the Archived tab.
  */
 /**
  * A bell with an unread count that opens a panel of notifications grouped by day (Today, Yesterday,
@@ -61,7 +66,10 @@ export type NotificationItem = {
  * @param {boolean} [props.defaultOpen]
  * @param {string|number|Date} [props.now]
  * @param {() => void} [props.onMarkAllRead] Called by "Mark all read". Absent: no button.
- * @param {(item: NotificationItem, event: import('react').MouseEvent) => void} [props.onItemClick] Called when an item is chosen, before its link is followed.
+ * @param {(item: NotificationItem, event: import('react').MouseEvent) => void} [props.onItemClick] Called when an item is chosen, before its link is followed. On a row from `renderItem`, only a click outside its own controls counts.
+ * @param {(item: NotificationItem) => import('react').ReactNode} [props.renderItem] The row's content in place of the icon, title, text and time. The dot, the Unread prefix and the read handling stay.
+ * @param {true | { key: "all" | "unread" | "archived", label?: string }[]} [props.tabs] `true` for All, Unread and Archived; or the tabs to show, in order. Absent: no tab strip.
+ * @param {(key: string) => void} [props.onTabChange] Called with the key of the tab the person picks.
  * @param {(open: boolean) => void} [props.onOpenChange] Called when the panel opens or closes.
  * @param {string} [props.className]
  */
@@ -91,6 +99,13 @@ export default function AppNotificationCenter(props: {
     now?: string | number | Date;
     onMarkAllRead?: () => void;
     onItemClick?: (item: NotificationItem, event: import('react').MouseEvent) => void;
+    renderItem?: (item: NotificationItem) => import('react').ReactNode;
+    /** true for the tabs All, Unread and Archived, or the tabs to show in order as `{ key, label? }`, where key is all, unread or archived and label defaults to the key's name. All and Unread leave out archived items; Archived shows only them. Absent: no tab strip. */
+    tabs?: true | {
+        key: "all" | "unread" | "archived";
+        label?: string;
+    }[];
+    onTabChange?: (key: string) => void;
     onOpenChange?: (open: boolean) => void;
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppRecordPager.d.ts

@@ -2,8 +2,8 @@ import "@webority/ui-elements/elements/record-pager";
 /**
  * Moves between the records of a list without going back to it: "12 of 47" and previous and next
  * action icons, for a detail page's header (`AppPageHeader` `actions`) or a reading pane's header
- * (`AppSplitView` draws one for its open item). Distinct from `AppPagination` and
- * `AppTablePagination`, which move between pages of a list.
+ * (`AppSplitView` draws one for its open item). Distinct from `AppTablePagination`, which moves
+ * between pages of a list.
  *
  * Each direction is a link (`prevHref`, `nextHref`), a handler (`onPrev`, `onNext`) or both (the
  * handler runs on the link's click and may prevent it). A direction with neither, or at either end,

package/dist/types/components/AppSectionLeadCapture.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The lead form section of a marketing page. The product saves the lead; the section only renders and validates.
+ * @param {object} props
+ * @param {import('react').ReactNode} props.title
+ * @param {import('react').ReactNode} [props.text]
+ * @param {{ name: "name"|"email"|"phone"|"company"|"message", label?: string, required?: boolean }[]} props.fields
+ * @param {(values: Record<string, string>) => Promise<void>} props.onSubmit A rejection shows its message in an AppAlert above the button.
+ * @param {string} [props.submitLabel] Default "Send".
+ * @param {import('react').ReactNode} props.successTitle
+ * @param {import('react').ReactNode} [props.successText]
+ * @param {import('react').ReactNode} [props.consent] Text under the button.
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as] The heading element.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.subtitle] A sentence under the heading.
+ * @param {"start"|"center"} [props.align] Where the copy and form sit in the panel.
+ * @param {"default"|"muted"} [props.variant] The section's background around the panel.
+ * @param {string} [props.className] Extra class names for the root element.
+ * (plus the shell props AppSectionCallToAction takes, same names)
+ */
+export default function AppSectionLeadCapture(props: {
+    /** The section's heading. */
+    title: import('react').ReactNode;
+    /** A paragraph above the form. */
+    text?: import('react').ReactNode;
+    /** The fields in order: name, email, phone, company or message, each optionally labelled and required. */
+    fields: {
+        name: "name" | "email" | "phone" | "company" | "message";
+        label?: string;
+        required?: boolean;
+    }[];
+    onSubmit: (values: Record<string, string>) => Promise<void>;
+    /**
+     * The button's label.
+     * @default "Send"
+     */
+    submitLabel?: string;
+    /** The heading of the block shown after a successful send. */
+    successTitle: import('react').ReactNode;
+    /** The sentence under the success heading. */
+    successText?: import('react').ReactNode;
+    /** A line under the button, such as a privacy notice. */
+    consent?: import('react').ReactNode;
+    /**
+     * The heading element.
+     * @default "h2"
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /** A short label above the heading. */
+    eyebrow?: import('react').ReactNode;
+    /** A sentence under the heading. */
+    subtitle?: import('react').ReactNode;
+    /**
+     * Where the copy and form sit in the panel.
+     * @default "center"
+     */
+    align?: "start" | "center";
+    /**
+     * The section's background around the panel.
+     * @default "default"
+     */
+    variant?: "default" | "muted";
+    /**
+     * Extra class names for the root element.
+     * @default ""
+     */
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppSelect.d.ts

@@ -87,5 +87,12 @@ declare const AppSelect: import("react").ForwardRefExoticComponent<{
     id?: string;
     /** Form field name. */
     name?: string;
+    /**
+     * Inline width, 32px control, 600 weight, menu sized to its options: the toolbar, sort and filter picker. Writes the element's compact attribute.
+     * @default false
+     */
+    compact?: boolean;
+    /** Static text inside the control before the value, such as Sort:. Not prefix, which is the bordered affix box. */
+    valuePrefix?: string;
 } & import("react").RefAttributes<any>>;
 export default AppSelect;

package/dist/types/components/AppSeoHead.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Head tags for one route: title, description, canonical, robots, Open Graph, Twitter card and JSON-LD. React 19 hoists them into <head>. The Razor counterpart is <seo-head> in Webority.Seo.AspNetCore.
+ * @param {object} props
+ * @param {string} props.title
+ * @param {string} props.description
+ * @param {string} props.canonicalUrl
+ * @param {string} props.siteName
+ * @param {string} props.robots The product decides it per environment ("index, follow", "noindex, nofollow").
+ * @param {string} [props.image]
+ * @param {string} [props.imageAlt]
+ * @param {"website"|"article"} [props.type] Default "website".
+ * @param {"summary"|"summary_large_image"} [props.twitterCard] Default "summary".
+ * @param {object|object[]} [props.jsonLd] Serialised with "<" escaped and written as a text child of the script, so it is for client-rendered portals only (React escapes script text under server rendering).
+ */
+export default function AppSeoHead(props: {
+    /** The page title, written in full by the product. */
+    title: string;
+    /** The meta description shown in search results. */
+    description: string;
+    /** The absolute address of the page, used for the canonical link and og:url. */
+    canonicalUrl: string;
+    /** The name of the site, for og:site_name. */
+    siteName: string;
+    /** The robots directive the product picks per environment, such as "index, follow" or "noindex, nofollow". */
+    robots: string;
+    /** The absolute address of the social preview image. */
+    image?: string;
+    /** The text description of the social preview image. */
+    imageAlt?: string;
+    /**
+     * The Open Graph type of the page.
+     * @default "website"
+     */
+    type?: "website" | "article";
+    /**
+     * The Twitter card layout.
+     * @default "summary"
+     */
+    twitterCard?: "summary" | "summary_large_image";
+    /** Structured data for the page, one object or an array of objects. Written into the page as JSON-LD, as an escaped text child, so it is for client-rendered portals only (React escapes script text under server rendering). */
+    jsonLd?: object | object[];
+}): import("react").JSX.Element;