@webx-ui/module-admin 0.9.0 → 0.11.0

package/dist/AdminNav.d.ts

@@ -5,6 +5,9 @@
  *
  * Sections come first, then the groups the server declared — "System" for what keeps the
  * panel running — each as a branch that opens on its own when a section under it is current.
+ *
+ * A group names its own icon; the gear is what it falls back to, because that is the picture
+ * every group had before groups could carry one.
  */
 type __VLS_Props = {
     collapsed?: boolean;

package/dist/BackButton.d.ts

@@ -19,7 +19,7 @@ type __VLS_Props = {
     size?: ActionSize;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: ActionSize;
     label: string;
+    size: ActionSize;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/DateText.d.ts

@@ -13,11 +13,17 @@ import { DateLike } from './dates';
 type __VLS_Props = {
     /** What the server sent. `null` is a date that never happened, not a missing one. */
     value: DateLike;
+    /**
+     * The column form: the time for today, a short month for the rest of the year, digits before
+     * that. What it leaves out is in the tip, which is the whole point of having one.
+     */
+    compact?: boolean;
     size?: TextSize;
     tone?: TextTone;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: TextSize;
     tone: TextTone;
+    compact: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/FilterChips.d.ts

@@ -0,0 +1,18 @@
+import { AppliedFilter } from './types';
+/**
+ * What the filters are set to, in the head of every list of the panel.
+ *
+ * The table gives the strip its place and its spacing (`#applied`); this gives every section the
+ * same chip. Written once because the alternative is what the panel already learned about
+ * headings: five sections each answering "what does an applied filter look like" gives five
+ * answers, and a reader who learns one list should already know the next.
+ *
+ * A chip takes one filter off. Taking all of them off lives with the fields it resets, inside
+ * the panel the funnel opens — beside the chips it reads as one more chip, and it is the only
+ * control in that row that does not remove exactly one thing.
+ */
+type __VLS_Props = {
+    filters: AppliedFilter[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/HelpButton.d.ts

@@ -23,9 +23,9 @@ type __VLS_Props = {
     width?: number | string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    title: string;
-    size: ActionSize;
     label: string;
+    size: ActionSize;
+    title: string;
     width: number | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/ListScreen.d.ts

@@ -1,4 +1,6 @@
 import { CardPadding, TabItem, TabValue } from '@webx-ui/core';
+import { RouteLocationRaw } from 'vue-router';
+import { ScreenAction } from './types';
 /**
  * The frame every list of the panel is drawn in.
  *
@@ -13,12 +15,27 @@ import { CardPadding, TabItem, TabValue } from '@webx-ui/core';
  * and the line above says which section (§19). The search stays inside the table, where it is
  * a property of the rows rather than of the screen (§10).
  *
+ * That first line is `WxScreenHead`, the same one an editor carries: a list and the record it
+ * opens are two screens of one panel, and a head that differs between them is a head the
+ * reader has to read twice.
+ *
  * What it deliberately does not do is fetch, filter or page. It is a frame; the section still
  * owns its data, and the tabs only say which view is open.
  */
 type __VLS_Props = {
     /** The section's name. The one heading on the screen. */
     title?: string;
+    /** The line under it, when the name alone does not say which list this is. */
+    subtitle?: string;
+    /** Where the list goes back to, for one that stands under another screen. */
+    back?: RouteLocationRaw;
+    /** What the arrow's tooltip says. The panel's own word for it when not given. */
+    backLabel?: string;
+    /**
+     * What the section offers: `New article`, `Check an address`. The one it exists for is
+     * `primary`, and it is the one that survives a narrow screen.
+     */
+    actions?: ScreenAction[];
     /**
      * The views of the same list — "All / Drafts / Published", "Rules / Redirects". Not a
      * navigation between screens: everything under them is the same table.
@@ -42,16 +59,18 @@ declare function __VLS_template(): {
         /** The rows: a table, a grid of cards, a manager. */
         default?: () => unknown;
         /**
-         * The screen's buttons, beside the heading. One of them — the reason the section exists —
-         * is a filled primary button with a word on it; everything else is outlined or an icon.
+         * Controls beside the heading that are not one-word actions and so cannot be declared —
+         * a switch, a picker. Everything a button can say belongs in `actions`, which is what folds
+         * into the `···` on a phone; what is written here stays drawn at every width.
          */
         actions?: () => unknown;
     }> & {
         /** The rows: a table, a grid of cards, a manager. */
         default?: () => unknown;
         /**
-         * The screen's buttons, beside the heading. One of them — the reason the section exists —
-         * is a filled primary button with a word on it; everything else is outlined or an icon.
+         * Controls beside the heading that are not one-word actions and so cannot be declared —
+         * a switch, a picker. Everything a button can say belongs in `actions`, which is what folds
+         * into the `···` on a phone; what is written here stays drawn at every width.
          */
         actions?: () => unknown;
     };
@@ -64,12 +83,16 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:view"?: ((value: TabValue | undefined) => any) | undefined;
 }>, {
+    fill: boolean;
     title: string;
+    actions: ScreenAction[];
+    subtitle: string;
+    back: RouteLocationRaw;
+    backLabel: string;
+    collapseBelow: number;
     views: TabItem[];
     card: boolean;
     padding: CardPadding;
-    fill: boolean;
-    collapseBelow: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/RenameButton.d.ts

@@ -25,11 +25,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRename?: ((name: string) => any) | undefined;
 }>, {
-    size: ActionSize;
-    label: string;
-    placeholder: string;
     name: string;
+    label: string;
+    size: ActionSize;
     disabled: boolean;
+    placeholder: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     field: ({
         $: import('vue').ComponentInternalInstance;
@@ -68,7 +68,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         $root: import('vue').ComponentPublicInstance | null;
         $parent: import('vue').ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "input", value: string) => void) & ((event: "focus", event: FocusEvent) => void) & ((event: "clear") => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "change", value: string) => void) & ((event: "update:modelValue", value: import('@webx-ui/core').InputModelValue) => void);
+        $emit: ((event: "clear") => void) & ((event: "input", value: string) => void) & ((event: "focus", event: FocusEvent) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "change", value: string) => void) & ((event: "update:modelValue", value: import('@webx-ui/core').InputModelValue) => void);
         $el: any;
         $options: import('vue').ComponentOptionsBase<Readonly<{
             modelValue?: import('@webx-ui/core').InputModelValue;
@@ -148,7 +148,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         onClear?: (() => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
-    }>, "type" | "size" | "ariaLabel" | "input" | "select" | "placeholder" | "disabled" | "readonly" | "status" | "id" | "localized" | "focus" | "blur" | "clearable" | "maxlength" | "showCount" | "autocomplete"> & {
+    }>, "size" | "type" | "disabled" | "id" | "ariaLabel" | "placeholder" | "input" | "select" | "readonly" | "status" | "localized" | "focus" | "blur" | "clearable" | "maxlength" | "showCount" | "autocomplete"> & {
         focus: () => void | undefined;
         blur: () => void | undefined;
         select: () => void | undefined;

package/dist/RowMenu.d.ts

@@ -1,19 +1,5 @@
 import { ActionSize } from '@webx-ui/core';
 import { RowAction } from './types';
-/**
- * What one record offers, in every list of the panel: a `···` at the end of the row.
- *
- * Always a menu, even for a single action. The panel used to have three answers to this —
- * a menu on `Pages`, a bare red bin on `SEO`, a toolbar over the selection in the library —
- * and the cost of that is not the extra click, it is that nobody knows where to look. A
- * menu also has room for the word: an unlabelled icon says what it does only to whoever has
- * already learned it (§20).
- *
- * Two rules it keeps for every list rather than leaving to each one. The destructive action
- * goes last, behind a rule, in red — it is never the thing the reader meant to hit. And what
- * somebody may not do is left out, not shown greyed: a menu is a list of what is possible,
- * and a row of dead entries teaches nothing.
- */
 type __VLS_Props = {
     /** What may be done, in the order it should read. */
     actions: RowAction[];
@@ -22,7 +8,7 @@ type __VLS_Props = {
     size?: ActionSize;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: ActionSize;
     label: string;
+    size: ActionSize;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/ScreenHead.d.ts

@@ -0,0 +1,112 @@
+import { HeadingLevel } from '@webx-ui/core';
+import { RouteLocationRaw } from 'vue-router';
+import { ScreenAction } from './types';
+/**
+ * The first line of every screen in the panel: where the reader is, what it is called, and
+ * what can be done with it.
+ *
+ * Every screen used to answer that on its own, and eight screens gave eight answers — a
+ * heading at three different sizes, the way out as an arrow on four of them and as a line of
+ * breadcrumbs on the rest, the row of buttons folding into a `···` on two editors and simply
+ * wrapping onto a third line everywhere else. None of it is a screen's business: a reader who
+ * has learned one screen already knows where to look on the next, and that only holds if there
+ * is one head rather than one per section.
+ *
+ * The shape is four things, in this order: the way out, the name (with the state said beside
+ * it), the line under it that says which record this is, and the actions at the other end.
+ *
+ * Actions are declared rather than drawn, because the same action has to appear as a button on
+ * a desktop and as a line of a menu on a phone — and one vnode cannot be mounted in two places
+ * (CLAUDE.md §4). Written as markup they had to be written twice, which is what the page and
+ * article editors did; written as data they are written once and this decides. Two rules it
+ * keeps rather than leaving to each screen: the destructive action is never a button in the
+ * head — it lives in the `···`, where it is a word rather than a red rectangle beside the
+ * name — and the one action the screen exists for (`primary`) is the one that survives a
+ * narrow screen, with everything else folded behind the menu (§18.3).
+ *
+ * What it does not do is scroll with anything, stick to anything or know what saving means.
+ * A screen that has something to save carries `WxActionBar` along its bottom, and on the
+ * screens where the head never leaves the window that bar is the only place the save lives
+ * (§3.3) — the head does not duplicate it.
+ */
+type __VLS_Props = {
+    /** What the screen is called. The one heading on it (§19). */
+    title?: string;
+    /** The line under the name: which record this is — a slug, a form, a count. */
+    subtitle?: string;
+    /**
+     * The way out of the screen. A route draws a link; `true` draws the same arrow and emits
+     * `back` instead, which is what a pane inside `WxListDetail` needs — on a phone the drawer
+     * carries no close of its own and the pane has to bring one (CLAUDE.md §4).
+     */
+    back?: RouteLocationRaw | boolean;
+    /** What the arrow's tooltip says. The panel's own word for it when not given. */
+    backLabel?: string;
+    /** `2` for a screen, `3` for a pane standing inside one. */
+    level?: HeadingLevel;
+    /** What can be done here, in the order it should read. */
+    actions?: ScreenAction[];
+    /** Width of the head below which the actions fold into the `···`. */
+    collapseBelow?: number;
+    /**
+     * Draws a rule under the head. For a screen exactly as tall as the window, where the head
+     * never scrolls away and needs an edge of its own; a head that scrolls does not.
+     */
+    divider?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Above the name: breadcrumbs, when the screen stands somewhere in a tree. */
+        trail?: () => unknown;
+        /** Beside the name: the state of the record — a status badge, the way to rename it. */
+        'title-after'?: () => unknown;
+        /** The line under the name, when it is more than a string. */
+        subtitle?: () => unknown;
+        /**
+         * Controls that are not one-word actions and stay whatever the width — the pair of arrows
+         * that walks a pile of records one at a time, say.
+         */
+        extra?: () => unknown;
+    }> & {
+        /** Above the name: breadcrumbs, when the screen stands somewhere in a tree. */
+        trail?: () => unknown;
+        /** Beside the name: the state of the record — a status badge, the way to rename it. */
+        'title-after'?: () => unknown;
+        /** The line under the name, when it is more than a string. */
+        subtitle?: () => unknown;
+        /**
+         * Controls that are not one-word actions and stay whatever the width — the pair of arrows
+         * that walks a pile of records one at a time, say.
+         */
+        extra?: () => unknown;
+    };
+    refs: {
+        root: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    back: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBack?: (() => any) | undefined;
+}>, {
+    title: string;
+    actions: ScreenAction[];
+    subtitle: string;
+    back: RouteLocationRaw | boolean;
+    backLabel: string;
+    level: HeadingLevel;
+    collapseBelow: number;
+    divider: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/dates.d.ts

@@ -7,6 +7,15 @@ export interface Dates {
      * "16 September 2025", "never".
      */
     short(value: DateLike): string;
+    /**
+     * The same moment, as narrow as a column can take it: the time alone for today, the day and a
+     * short month for the rest of this year, digits for anything older.
+     *
+     * A column is scanned, not read — and the full line is the reason a date column had to be 185px
+     * wide in Russian and wider in German. What it drops is in the tip, which is where "when
+     * exactly" was always answered.
+     */
+    compact(value: DateLike): string;
     /**
      * Everything there is, down to the second — what the tip holds when the short line is not
      * precise enough to settle an argument. Empty when there is no date.

package/dist/index.d.ts

@@ -8,13 +8,16 @@ export { errorText, useErrorText } from './errors';
 export { createNotesApi, type EntityNote, type NoteAuthor, type NotesApi } from './notes';
 export { createHttp, readCookie, HttpError, type Http, type HttpOptions, type RequestOptions, } from './http';
 export { adminTypes } from './screenTypes';
-export type { AdminModule, AdminStatus, AdminUser, Manifest, ManifestModule, NavEntry, PickedImage, RowAction, } from './types';
+export type { AdminModule, AdminStatus, AdminUser, Manifest, ManifestModule, NavEntry, PickedImage, RowAction, ScreenAction, AppliedFilter, } from './types';
 export { default as AdminShell } from './AdminShell';
 export { default as AdminNav } from './AdminNav';
 export { default as AdminLanding } from './AdminLanding';
 export { default as WxScreen } from './Screen';
 export { default as WxListScreen } from './ListScreen';
+export { default as WxScreenHead } from './ScreenHead';
+export { rowMenuWidth } from './rowMenu';
 export { default as WxRowMenu } from './RowMenu';
+export { default as WxFilterChips } from './FilterChips';
 export { default as WxBackButton } from './BackButton';
 export { default as WxRenameButton } from './RenameButton';
 export { default as WxHelpButton } from './HelpButton';