@deskwork/studio 0.21.0 → 0.22.0

package/dist/pages/masthead.js

@@ -0,0 +1,99 @@
+/**
+ * Universal masthead chrome for studio surfaces (v7 architecture).
+ *
+ * Per `DESIGN-STANDARDS.md § Studio navigation model`, every studio
+ * surface carries a three-column masthead:
+ *
+ *   `24px (← back) | 1fr (center stack) | 24px (⋮ menu)`
+ *
+ * On the Desk (`isHub: true`) the back-link is absent — you're already
+ * home — and the grid collapses to `1fr | 24px`. Every cell is
+ * `align-items: center`; the masthead's bottom-border rule clears
+ * every content baseline so nothing is struck through.
+ *
+ * Center stack composition:
+ *   - Top row: kicker (mono caps, red, with optional inline meta after a
+ *     paper-3 separator). The kicker is always present.
+ *   - Bottom row: either `slug` (mono, slug-shaped surfaces) OR `title`
+ *     (italic display, hub-shaped surfaces). Callers pass exactly one
+ *     of the two — passing both throws.
+ *
+ * Glyph contracts (per design-standards):
+ *   - `←` italic-display 1.35rem in `--er-proof-blue` (8.13:1 vs paper),
+ *     navigates to `/dev/editorial-studio`.
+ *   - `⋮` mono 1.2rem in `--er-ink-soft` (8.92:1 vs paper). The button
+ *     does nothing yet; Step 2.2.7 wires the popover menu.
+ *   - Each glyph has a ≥44×44px tap target via padding+margin (visual
+ *     remains 24px square).
+ *
+ * The masthead is mobile-only (≤600px). CSS hides it on desktop so
+ * existing desktop chrome (folio + er-strip + er-pagehead) keeps its
+ * exact present-day appearance. Desktop refinement is out-of-scope for
+ * this feature branch (per the design-standards "separate feature
+ * branch" note).
+ *
+ * This file ships the helper + the markup contract. The companion
+ * stylesheet is `plugins/deskwork-studio/public/css/mobile-shell.css`.
+ */
+import { html, unsafe, escapeHtml } from "./html.js";
+const DESK_HREF = '/dev/editorial-studio';
+function renderKicker(opts) {
+    if (opts.kicker !== undefined && opts.kickerHtml !== undefined) {
+        throw new Error('renderMasthead: pass exactly one of { kicker, kickerHtml }, not both. ' +
+            'See packages/studio/src/pages/masthead.ts for the MastheadOpts contract.');
+    }
+    const meta = opts.metaInline
+        ? html `<span class="er-masthead-kicker-sep">·</span><span class="er-masthead-meta-inline">${opts.metaInline}</span>`
+        : '';
+    if (opts.kickerHtml !== undefined) {
+        return unsafe(html `<div class="er-masthead-kicker">${opts.kickerHtml}${unsafe(meta)}</div>`);
+    }
+    if (opts.kicker !== undefined) {
+        return unsafe(html `<div class="er-masthead-kicker">${opts.kicker}${unsafe(meta)}</div>`);
+    }
+    return unsafe('<div class="er-masthead-kicker" aria-hidden="true"></div>');
+}
+function renderBody(opts) {
+    if (opts.slug !== undefined && opts.title !== undefined) {
+        throw new Error('renderMasthead: pass exactly one of { slug, title }, not both.');
+    }
+    if (opts.slug !== undefined) {
+        return unsafe(`<div class="er-masthead-slug">${escapeHtml(opts.slug)}</div>`);
+    }
+    if (opts.title !== undefined) {
+        return unsafe(`<div class="er-masthead-title">${escapeHtml(opts.title)}</div>`);
+    }
+    return unsafe('');
+}
+/**
+ * Render the universal masthead. Returns RawHtml so callers can embed
+ * the result directly in `html\`…${renderMasthead(...)}…\`` templates.
+ */
+export function renderMasthead(opts) {
+    const triggerId = opts.menuTriggerId ?? 'masthead-menu-trigger';
+    const hubClass = opts.isHub ? ' er-masthead--hub' : '';
+    const backLink = opts.isHub
+        ? ''
+        : html `<a class="er-masthead-back" href="${DESK_HREF}" aria-label="Back to the Desk" title="Back to the Desk">←</a>`;
+    const kicker = renderKicker(opts);
+    const body = renderBody(opts);
+    return unsafe(html `
+    <header class="er-masthead${unsafe(hubClass)}" data-er-masthead role="banner">
+      ${unsafe(backLink)}
+      <div class="er-masthead-center">
+        ${kicker}
+        ${body}
+      </div>
+      <button
+        type="button"
+        class="er-masthead-menu"
+        id="${triggerId}"
+        data-er-masthead-menu
+        aria-haspopup="true"
+        aria-expanded="false"
+        aria-label="Studio menu"
+        title="Studio menu"
+      >⋮</button>
+    </header>`);
+}
+//# sourceMappingURL=masthead.js.map

package/dist/pages/masthead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masthead.js","sourceRoot":"","sources":["../../src/pages/masthead.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAgB,MAAM,WAAW,CAAC;AAkDnE,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAE1C,SAAS,YAAY,CAAC,IAAkB;IACtC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;QAC/D,MAAM,IAAI,KAAK,CACb,wEAAwE;YACtE,0EAA0E,CAC7E,CAAC;IACJ,CAAC;IACD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU;QAC1B,CAAC,CAAC,IAAI,CAAA,sFAAsF,IAAI,CAAC,UAAU,SAAS;QACpH,CAAC,CAAC,EAAE,CAAC;IACP,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;QAClC,OAAO,MAAM,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/F,CAAC;IACD,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,MAAM,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3F,CAAC;IACD,OAAO,MAAM,CAAC,2DAA2D,CAAC,CAAC;AAC7E,CAAC;AAED,SAAS,UAAU,CAAC,IAAkB;IACpC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;QACxD,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAC;IACJ,CAAC;IACD,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC5B,OAAO,MAAM,CAAC,iCAAiC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChF,CAAC;IACD,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;QAC7B,OAAO,MAAM,CAAC,kCAAkC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClF,CAAC;IACD,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACpB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,IAAkB;IAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,uBAAuB,CAAC;IAChE,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IACvD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK;QACzB,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,IAAI,CAAA,qCAAqC,SAAS,gEAAgE,CAAC;IACvH,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9B,OAAO,MAAM,CAAC,IAAI,CAAA;gCACY,MAAM,CAAC,QAAQ,CAAC;QACxC,MAAM,CAAC,QAAQ,CAAC;;UAEd,MAAM;UACN,IAAI;;;;;cAKA,SAAS;;;;;;;cAOT,CAAC,CAAC;AAChB,CAAC"}

package/dist/pages/masthead.ts

@@ -0,0 +1,155 @@
+/**
+ * Universal masthead chrome for studio surfaces (v7 architecture).
+ *
+ * Per `DESIGN-STANDARDS.md § Studio navigation model`, every studio
+ * surface carries a three-column masthead:
+ *
+ *   `24px (← back) | 1fr (center stack) | 24px (⋮ menu)`
+ *
+ * On the Desk (`isHub: true`) the back-link is absent — you're already
+ * home — and the grid collapses to `1fr | 24px`. Every cell is
+ * `align-items: center`; the masthead's bottom-border rule clears
+ * every content baseline so nothing is struck through.
+ *
+ * Center stack composition:
+ *   - Top row: kicker (mono caps, red, with optional inline meta after a
+ *     paper-3 separator). The kicker is always present.
+ *   - Bottom row: either `slug` (mono, slug-shaped surfaces) OR `title`
+ *     (italic display, hub-shaped surfaces). Callers pass exactly one
+ *     of the two — passing both throws.
+ *
+ * Glyph contracts (per design-standards):
+ *   - `←` italic-display 1.35rem in `--er-proof-blue` (8.13:1 vs paper),
+ *     navigates to `/dev/editorial-studio`.
+ *   - `⋮` mono 1.2rem in `--er-ink-soft` (8.92:1 vs paper). The button
+ *     does nothing yet; Step 2.2.7 wires the popover menu.
+ *   - Each glyph has a ≥44×44px tap target via padding+margin (visual
+ *     remains 24px square).
+ *
+ * The masthead is mobile-only (≤600px). CSS hides it on desktop so
+ * existing desktop chrome (folio + er-strip + er-pagehead) keeps its
+ * exact present-day appearance. Desktop refinement is out-of-scope for
+ * this feature branch (per the design-standards "separate feature
+ * branch" note).
+ *
+ * This file ships the helper + the markup contract. The companion
+ * stylesheet is `plugins/deskwork-studio/public/css/mobile-shell.css`.
+ */
+
+import { html, unsafe, escapeHtml, type RawHtml } from './html.ts';
+
+export interface MastheadOpts {
+  /**
+   * Top kicker line. Mono caps, red. Example: `entry · drafting · № 12`.
+   * Pre-rendered HTML may be included via `kickerHtml` instead when the
+   * kicker carries inline markup (e.g. a `<span class="platform">`).
+   */
+  readonly kicker?: string;
+
+  /**
+   * Raw HTML alternative to `kicker`. Used when the kicker carries
+   * inline ornament (platform tag, dim spans, etc.). Caller is
+   * responsible for any escaping; pass through `escapeHtml` for any
+   * user-supplied substring.
+   */
+  readonly kickerHtml?: RawHtml;
+
+  /**
+   * Bottom-row body when the surface is slug-shaped (entry-review,
+   * shortform-review). Rendered as mono. Mutually exclusive with
+   * `title`.
+   */
+  readonly slug?: string;
+
+  /**
+   * Bottom-row body when the surface is hub-shaped (Desk). Rendered as
+   * italic display. Mutually exclusive with `slug`.
+   */
+  readonly title?: string;
+
+  /**
+   * Optional inline meta appended to the kicker line after a paper-3
+   * `·` separator. Example: `v3 · 2h`, `№ 03`. Mono, dim color.
+   */
+  readonly metaInline?: string;
+
+  /**
+   * `true` on the Desk only. Suppresses the `←` back-link and collapses
+   * the grid to `1fr | 24px`.
+   */
+  readonly isHub: boolean;
+
+  /**
+   * Optional id for the `⋮` button element. Step 2.2.7 will look this
+   * up to wire the popover. Defaults to `masthead-menu-trigger`.
+   */
+  readonly menuTriggerId?: string;
+}
+
+const DESK_HREF = '/dev/editorial-studio';
+
+function renderKicker(opts: MastheadOpts): RawHtml {
+  if (opts.kicker !== undefined && opts.kickerHtml !== undefined) {
+    throw new Error(
+      'renderMasthead: pass exactly one of { kicker, kickerHtml }, not both. ' +
+        'See packages/studio/src/pages/masthead.ts for the MastheadOpts contract.',
+    );
+  }
+  const meta = opts.metaInline
+    ? html`<span class="er-masthead-kicker-sep">·</span><span class="er-masthead-meta-inline">${opts.metaInline}</span>`
+    : '';
+  if (opts.kickerHtml !== undefined) {
+    return unsafe(html`<div class="er-masthead-kicker">${opts.kickerHtml}${unsafe(meta)}</div>`);
+  }
+  if (opts.kicker !== undefined) {
+    return unsafe(html`<div class="er-masthead-kicker">${opts.kicker}${unsafe(meta)}</div>`);
+  }
+  return unsafe('<div class="er-masthead-kicker" aria-hidden="true"></div>');
+}
+
+function renderBody(opts: MastheadOpts): RawHtml {
+  if (opts.slug !== undefined && opts.title !== undefined) {
+    throw new Error(
+      'renderMasthead: pass exactly one of { slug, title }, not both.',
+    );
+  }
+  if (opts.slug !== undefined) {
+    return unsafe(`<div class="er-masthead-slug">${escapeHtml(opts.slug)}</div>`);
+  }
+  if (opts.title !== undefined) {
+    return unsafe(`<div class="er-masthead-title">${escapeHtml(opts.title)}</div>`);
+  }
+  return unsafe('');
+}
+
+/**
+ * Render the universal masthead. Returns RawHtml so callers can embed
+ * the result directly in `html\`…${renderMasthead(...)}…\`` templates.
+ */
+export function renderMasthead(opts: MastheadOpts): RawHtml {
+  const triggerId = opts.menuTriggerId ?? 'masthead-menu-trigger';
+  const hubClass = opts.isHub ? ' er-masthead--hub' : '';
+  const backLink = opts.isHub
+    ? ''
+    : html`<a class="er-masthead-back" href="${DESK_HREF}" aria-label="Back to the Desk" title="Back to the Desk">←</a>`;
+  const kicker = renderKicker(opts);
+  const body = renderBody(opts);
+  return unsafe(html`
+    <header class="er-masthead${unsafe(hubClass)}" data-er-masthead role="banner">
+      ${unsafe(backLink)}
+      <div class="er-masthead-center">
+        ${kicker}
+        ${body}
+      </div>
+      <button
+        type="button"
+        class="er-masthead-menu"
+        id="${triggerId}"
+        data-er-masthead-menu
+        aria-haspopup="true"
+        aria-expanded="false"
+        aria-label="Studio menu"
+        title="Studio menu"
+      >⋮</button>
+    </header>`);
+}

package/dist/pages/mobile-bar.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Universal mobile bottom-bar.
+ *
+ * Renders the `<nav class="er-mobile-bar">` chrome that the studio's
+ * phone-width surfaces share. The existing `editorial-review.css` rules
+ * (`.er-mobile-bar`, `.er-mobile-tab*`, `.er-mobile-tab--review`,
+ * `.er-mobile-tab--edit`) cascade against the markup this helper emits
+ * unchanged — the bar is contextual chrome the caller composes by
+ * supplying a list of `Cell`s that name each tab's surface affordance.
+ *
+ * Design contract (DESIGN-STANDARDS.md § Studio navigation model):
+ * the mobile bar carries ONLY contextual cells — no global nav. The
+ * star nav (Desk hub, ← back, ⋮ menu) lives in the masthead. This
+ * helper is intentionally narrow: it cannot emit nav-region cells; it
+ * only emits the contextual ribbon the caller supplied.
+ *
+ * THESIS Consequence 2: the bar is server-rendered chrome. None of the
+ * buttons rendered here mutate state directly on render — sheet-kind
+ * cells open a sheet (client-side state change, no POST); the single
+ * direct-kind cell defined today (Save) triggers the existing
+ * `[data-action="save-version"]` handler, the one allowed file
+ * mutation.
+ *
+ * The mode tag (`'review' | 'edit' | 'both'`) maps to the existing
+ * `er-mobile-tab--review` / `er-mobile-tab--edit` modifier classes;
+ * the `body[data-edit-mode="editing"]` CSS rules swap the grid layout
+ * between modes by hiding the off-mode cells.
+ */
+import { type RawHtml } from './html.ts';
+/** Discriminated union of bar cell actions. A cell either opens a
+ *  bottom-sheet (the dominant pattern) or fires a direct client-side
+ *  action (the Save tab is the only direct-kind today). */
+export type CellAction = {
+    readonly kind: 'sheet';
+    readonly name: string;
+} | {
+    readonly kind: 'direct';
+    readonly action: string;
+};
+/** Optional count badge rendered after the label. Default tone is
+ *  red-pencil; `kraft` tone is the kraft-coloured variant used by the
+ *  Scrapbook tab to distinguish folio context from action peers. */
+export interface CellCount {
+    readonly dataAttr: string;
+    readonly tone?: 'red' | 'kraft';
+}
+/** A single bar cell. Caller-supplied; the helper renders the cell
+ *  into the bar's flex row. */
+export interface Cell {
+    readonly glyph: string;
+    readonly label: string;
+    /** Which edit-mode the cell is visible in. `both` renders no modifier
+     *  (the cell shows in both review and edit). */
+    readonly mode: 'review' | 'edit' | 'both';
+    readonly action: CellAction;
+    readonly count?: CellCount;
+    /** Additional class modifier appended to the base class string
+     *  (e.g. `er-mobile-tab--scrapbook`). */
+    readonly modifierClass?: string;
+}
+export interface RenderMobileBarOptions {
+    readonly contextual: readonly Cell[];
+}
+/**
+ * Render the mobile bottom-bar chrome from a list of contextual cells.
+ *
+ * Throws when `contextual` is empty (a bar with zero cells is
+ * malformed) or when it carries more than `MAX_CELLS` (overflows the
+ * CSS grid layout).
+ */
+export declare function renderMobileBar(opts: RenderMobileBarOptions): RawHtml;
+//# sourceMappingURL=mobile-bar.d.ts.map

package/dist/pages/mobile-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-bar.d.ts","sourceRoot":"","sources":["../../src/pages/mobile-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAA4B,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAQnE;;2DAE2D;AAC3D,MAAM,MAAM,UAAU,GAClB;IAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzD;;oEAEoE;AACpE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CACjC;AAED;+BAC+B;AAC/B,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;oDACgD;IAChD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;6CACyC;IACzC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,UAAU,EAAE,SAAS,IAAI,EAAE,CAAC;CACtC;AAuCD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,sBAAsB,GAAG,OAAO,CAarE"}

package/dist/pages/mobile-bar.js

@@ -0,0 +1,88 @@
+/**
+ * Universal mobile bottom-bar.
+ *
+ * Renders the `<nav class="er-mobile-bar">` chrome that the studio's
+ * phone-width surfaces share. The existing `editorial-review.css` rules
+ * (`.er-mobile-bar`, `.er-mobile-tab*`, `.er-mobile-tab--review`,
+ * `.er-mobile-tab--edit`) cascade against the markup this helper emits
+ * unchanged — the bar is contextual chrome the caller composes by
+ * supplying a list of `Cell`s that name each tab's surface affordance.
+ *
+ * Design contract (DESIGN-STANDARDS.md § Studio navigation model):
+ * the mobile bar carries ONLY contextual cells — no global nav. The
+ * star nav (Desk hub, ← back, ⋮ menu) lives in the masthead. This
+ * helper is intentionally narrow: it cannot emit nav-region cells; it
+ * only emits the contextual ribbon the caller supplied.
+ *
+ * THESIS Consequence 2: the bar is server-rendered chrome. None of the
+ * buttons rendered here mutate state directly on render — sheet-kind
+ * cells open a sheet (client-side state change, no POST); the single
+ * direct-kind cell defined today (Save) triggers the existing
+ * `[data-action="save-version"]` handler, the one allowed file
+ * mutation.
+ *
+ * The mode tag (`'review' | 'edit' | 'both'`) maps to the existing
+ * `er-mobile-tab--review` / `er-mobile-tab--edit` modifier classes;
+ * the `body[data-edit-mode="editing"]` CSS rules swap the grid layout
+ * between modes by hiding the off-mode cells.
+ */
+import { html, unsafe, escapeHtml } from "./html.js";
+/** Maximum cells the bar can carry. CSS grid swaps between 3 and 4
+ *  visible columns by mode; the bar must hold all mode-keyed cells the
+ *  caller defines, but more than 6 would overflow the layout the CSS
+ *  assumes. */
+const MAX_CELLS = 6;
+function modeClass(mode) {
+    if (mode === 'review')
+        return ' er-mobile-tab--review';
+    if (mode === 'edit')
+        return ' er-mobile-tab--edit';
+    return '';
+}
+function renderCell(cell) {
+    const baseClass = 'er-mobile-tab' + modeClass(cell.mode)
+        + (cell.modifierClass !== undefined ? ' ' + cell.modifierClass : '');
+    let actionAttr;
+    let ariaAttrs;
+    if (cell.action.kind === 'sheet') {
+        actionAttr = `data-mobile-sheet="${escapeHtml(cell.action.name)}"`;
+        ariaAttrs = ' aria-controls="er-mobile-sheet" aria-expanded="false"';
+    }
+    else {
+        actionAttr = `data-mobile-action="${escapeHtml(cell.action.action)}"`;
+        ariaAttrs = '';
+    }
+    const count = cell.count;
+    let countMarkup = '';
+    if (count !== undefined) {
+        const tone = count.tone ?? 'red';
+        const countClass = tone === 'kraft'
+            ? 'er-mobile-tab-count er-mobile-tab-count--kraft'
+            : 'er-mobile-tab-count';
+        countMarkup = `<span class="${countClass}" ${escapeHtml(count.dataAttr)} hidden>0</span>`;
+    }
+    return `<button class="${escapeHtml(baseClass)}" ${actionAttr} type="button"${ariaAttrs}>`
+        + `<span class="er-mobile-tab-glyph" aria-hidden="true">${escapeHtml(cell.glyph)}</span>`
+        + `<span class="er-mobile-tab-label">${escapeHtml(cell.label)}</span>`
+        + countMarkup
+        + `</button>`;
+}
+/**
+ * Render the mobile bottom-bar chrome from a list of contextual cells.
+ *
+ * Throws when `contextual` is empty (a bar with zero cells is
+ * malformed) or when it carries more than `MAX_CELLS` (overflows the
+ * CSS grid layout).
+ */
+export function renderMobileBar(opts) {
+    const cells = opts.contextual;
+    if (cells.length === 0) {
+        throw new Error('renderMobileBar: contextual must contain at least one cell; an empty bar is malformed.');
+    }
+    if (cells.length > MAX_CELLS) {
+        throw new Error(`renderMobileBar: contextual.length=${cells.length} exceeds the bar's MAX_CELLS=${MAX_CELLS}.`);
+    }
+    const cellsMarkup = cells.map(renderCell).join('');
+    return unsafe(html `<nav class="er-mobile-bar" data-mobile-bar aria-label="Surface tabs">${unsafe(cellsMarkup)}</nav>`);
+}
+//# sourceMappingURL=mobile-bar.js.map

package/dist/pages/mobile-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-bar.js","sourceRoot":"","sources":["../../src/pages/mobile-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAgB,MAAM,WAAW,CAAC;AAEnE;;;eAGe;AACf,MAAM,SAAS,GAAG,CAAC,CAAC;AAoCpB,SAAS,SAAS,CAAC,IAAkB;IACnC,IAAI,IAAI,KAAK,QAAQ;QAAE,OAAO,wBAAwB,CAAC;IACvD,IAAI,IAAI,KAAK,MAAM;QAAE,OAAO,sBAAsB,CAAC;IACnD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,SAAS,UAAU,CAAC,IAAU;IAC5B,MAAM,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;UACpD,CAAC,IAAI,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEvE,IAAI,UAAkB,CAAC;IACvB,IAAI,SAAiB,CAAC;IACtB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACjC,UAAU,GAAG,sBAAsB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;QACnE,SAAS,GAAG,wDAAwD,CAAC;IACvE,CAAC;SAAM,CAAC;QACN,UAAU,GAAG,uBAAuB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC;QACtE,SAAS,GAAG,EAAE,CAAC;IACjB,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC;QACjC,MAAM,UAAU,GAAG,IAAI,KAAK,OAAO;YACjC,CAAC,CAAC,gDAAgD;YAClD,CAAC,CAAC,qBAAqB,CAAC;QAC1B,WAAW,GAAG,gBAAgB,UAAU,KAAK,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC;IAC5F,CAAC;IAED,OAAO,kBAAkB,UAAU,CAAC,SAAS,CAAC,KAAK,UAAU,iBAAiB,SAAS,GAAG;UACtF,wDAAwD,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;UACvF,qCAAqC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;UACpE,WAAW;UACX,WAAW,CAAC;AAClB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,IAA4B;IAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAC9B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CAAC,wFAAwF,CAAC,CAAC;IAC5G,CAAC;IACD,IAAI,KAAK,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;QAC7B,MAAM,IAAI,KAAK,CACb,sCAAsC,KAAK,CAAC,MAAM,gCAAgC,SAAS,GAAG,CAC/F,CAAC;IACJ,CAAC;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACnD,OAAO,MAAM,CAAC,IAAI,CAAA,wEAAwE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACzH,CAAC"}

package/dist/pages/mobile-bar.ts

@@ -0,0 +1,129 @@
+/**
+ * Universal mobile bottom-bar.
+ *
+ * Renders the `<nav class="er-mobile-bar">` chrome that the studio's
+ * phone-width surfaces share. The existing `editorial-review.css` rules
+ * (`.er-mobile-bar`, `.er-mobile-tab*`, `.er-mobile-tab--review`,
+ * `.er-mobile-tab--edit`) cascade against the markup this helper emits
+ * unchanged — the bar is contextual chrome the caller composes by
+ * supplying a list of `Cell`s that name each tab's surface affordance.
+ *
+ * Design contract (DESIGN-STANDARDS.md § Studio navigation model):
+ * the mobile bar carries ONLY contextual cells — no global nav. The
+ * star nav (Desk hub, ← back, ⋮ menu) lives in the masthead. This
+ * helper is intentionally narrow: it cannot emit nav-region cells; it
+ * only emits the contextual ribbon the caller supplied.
+ *
+ * THESIS Consequence 2: the bar is server-rendered chrome. None of the
+ * buttons rendered here mutate state directly on render — sheet-kind
+ * cells open a sheet (client-side state change, no POST); the single
+ * direct-kind cell defined today (Save) triggers the existing
+ * `[data-action="save-version"]` handler, the one allowed file
+ * mutation.
+ *
+ * The mode tag (`'review' | 'edit' | 'both'`) maps to the existing
+ * `er-mobile-tab--review` / `er-mobile-tab--edit` modifier classes;
+ * the `body[data-edit-mode="editing"]` CSS rules swap the grid layout
+ * between modes by hiding the off-mode cells.
+ */
+
+import { html, unsafe, escapeHtml, type RawHtml } from './html.ts';
+
+/** Maximum cells the bar can carry. CSS grid swaps between 3 and 4
+ *  visible columns by mode; the bar must hold all mode-keyed cells the
+ *  caller defines, but more than 6 would overflow the layout the CSS
+ *  assumes. */
+const MAX_CELLS = 6;
+
+/** Discriminated union of bar cell actions. A cell either opens a
+ *  bottom-sheet (the dominant pattern) or fires a direct client-side
+ *  action (the Save tab is the only direct-kind today). */
+export type CellAction =
+  | { readonly kind: 'sheet'; readonly name: string }
+  | { readonly kind: 'direct'; readonly action: string };
+
+/** Optional count badge rendered after the label. Default tone is
+ *  red-pencil; `kraft` tone is the kraft-coloured variant used by the
+ *  Scrapbook tab to distinguish folio context from action peers. */
+export interface CellCount {
+  readonly dataAttr: string;
+  readonly tone?: 'red' | 'kraft';
+}
+
+/** A single bar cell. Caller-supplied; the helper renders the cell
+ *  into the bar's flex row. */
+export interface Cell {
+  readonly glyph: string;
+  readonly label: string;
+  /** Which edit-mode the cell is visible in. `both` renders no modifier
+   *  (the cell shows in both review and edit). */
+  readonly mode: 'review' | 'edit' | 'both';
+  readonly action: CellAction;
+  readonly count?: CellCount;
+  /** Additional class modifier appended to the base class string
+   *  (e.g. `er-mobile-tab--scrapbook`). */
+  readonly modifierClass?: string;
+}
+
+export interface RenderMobileBarOptions {
+  readonly contextual: readonly Cell[];
+}
+
+function modeClass(mode: Cell['mode']): string {
+  if (mode === 'review') return ' er-mobile-tab--review';
+  if (mode === 'edit') return ' er-mobile-tab--edit';
+  return '';
+}
+
+function renderCell(cell: Cell): string {
+  const baseClass = 'er-mobile-tab' + modeClass(cell.mode)
+    + (cell.modifierClass !== undefined ? ' ' + cell.modifierClass : '');
+
+  let actionAttr: string;
+  let ariaAttrs: string;
+  if (cell.action.kind === 'sheet') {
+    actionAttr = `data-mobile-sheet="${escapeHtml(cell.action.name)}"`;
+    ariaAttrs = ' aria-controls="er-mobile-sheet" aria-expanded="false"';
+  } else {
+    actionAttr = `data-mobile-action="${escapeHtml(cell.action.action)}"`;
+    ariaAttrs = '';
+  }
+
+  const count = cell.count;
+  let countMarkup = '';
+  if (count !== undefined) {
+    const tone = count.tone ?? 'red';
+    const countClass = tone === 'kraft'
+      ? 'er-mobile-tab-count er-mobile-tab-count--kraft'
+      : 'er-mobile-tab-count';
+    countMarkup = `<span class="${countClass}" ${escapeHtml(count.dataAttr)} hidden>0</span>`;
+  }
+
+  return `<button class="${escapeHtml(baseClass)}" ${actionAttr} type="button"${ariaAttrs}>`
+    + `<span class="er-mobile-tab-glyph" aria-hidden="true">${escapeHtml(cell.glyph)}</span>`
+    + `<span class="er-mobile-tab-label">${escapeHtml(cell.label)}</span>`
+    + countMarkup
+    + `</button>`;
+}
+
+/**
+ * Render the mobile bottom-bar chrome from a list of contextual cells.
+ *
+ * Throws when `contextual` is empty (a bar with zero cells is
+ * malformed) or when it carries more than `MAX_CELLS` (overflows the
+ * CSS grid layout).
+ */
+export function renderMobileBar(opts: RenderMobileBarOptions): RawHtml {
+  const cells = opts.contextual;
+  if (cells.length === 0) {
+    throw new Error('renderMobileBar: contextual must contain at least one cell; an empty bar is malformed.');
+  }
+  if (cells.length > MAX_CELLS) {
+    throw new Error(
+      `renderMobileBar: contextual.length=${cells.length} exceeds the bar's MAX_CELLS=${MAX_CELLS}.`,
+    );
+  }
+
+  const cellsMarkup = cells.map(renderCell).join('');
+  return unsafe(html`<nav class="er-mobile-bar" data-mobile-bar aria-label="Surface tabs">${unsafe(cellsMarkup)}</nav>`);
+}

package/dist/pages/shortform-review-mobile-sheet.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Shortform-review-specific mobile sheet host + bar cell composition.
+ *
+ * Mirrors `entry-review/mobile-sheet.ts` for the shortform review
+ * surface. The mobile-bar primitive (`../mobile-bar.ts`) is universal;
+ * each surface composes its `Cell[]` and the corresponding slot host
+ * here.
+ *
+ * Design contract (DESIGN-STANDARDS.md § Universal bar contract,
+ * settled 2026-05-13):
+ *   - One bar primitive, one shape. The per-surface design variable
+ *     is the cells, not the chrome.
+ *   - 1-6 contextual cells. The Actions cell is unconditional so the
+ *     bar is never empty (renderMobileBar throws on empty cells).
+ *   - The TOC and Versions cells are conditional (hidden when their
+ *     content has fewer than 2 items).
+ *
+ * State-machine compliance (DESKWORK-STATE-MACHINE.md):
+ *   - Commandment II: verbs are universal. Approve/Iterate/Cancel are
+ *     rendered unconditionally inside the Actions slot. The shortform
+ *     surface header (shortform-review.ts:1-18) explicitly defers the
+ *     legacy `DraftWorkflowState` migration; for this step we surface
+ *     the three universal verbs and trust the client clipboard handlers
+ *     to compose the right slash command from the workflow context.
+ *   - Commandment III: no review-state surfacing. No "IN REVIEW" /
+ *     "ITERATING" / "APPROVED" pills. No `.er-stamp`. No
+ *     `.er-pending-state` markup.
+ *   - Commandment IV/V/VII: clipboard-copy is the only action. The
+ *     three buttons carry `data-action="approve|iterate|cancel"`; the
+ *     existing client handlers in `editorial-review-client.ts` wire
+ *     them to clipboard-only handlers (post-G.3 refactor).
+ *   - G.4 (issue #260): the destructive verb is `cancel`, NOT `reject`.
+ *     The state machine has no `reject` verb.
+ */
+import type { TocEntry } from '@deskwork/core/review/toc';
+import type { DraftVersion, DraftWorkflowItem } from '@deskwork/core/review/types';
+import { type RawHtml } from './html.ts';
+import type { Cell } from './mobile-bar.ts';
+export interface ShortformBarCellOptions {
+    readonly tocEntries: readonly TocEntry[];
+    readonly versions: readonly DraftVersion[];
+}
+/**
+ * Build the shortform review bar's contextual cell list.
+ *
+ * Cell ordering (when present): TOC → Versions → Actions. The Actions
+ * cell is always last and always present; the bar is never empty.
+ *
+ * Conditional-omission rules:
+ *   - TOC cell: omitted when fewer than 2 heading entries exist.
+ *     Shortform drafts (social-platform copy) are often headingless;
+ *     surfacing an empty TOC adds noise without value per the
+ *     "structure over scrolling" principle.
+ *   - Versions cell: omitted when only one revision exists. With one
+ *     revision there is no history to navigate.
+ */
+export declare function getShortformBarCells(opts: ShortformBarCellOptions): readonly Cell[];
+export interface ShortformMobileSheetOptions {
+    readonly tocEntries: readonly TocEntry[];
+    readonly versions: readonly DraftVersion[];
+    readonly workflow: DraftWorkflowItem;
+    readonly currentVersion: DraftVersion;
+}
+/**
+ * Render the shortform mobile sheet host with the three named slots
+ * (toc / versions / actions). Each slot body is server-rendered so
+ * the client doesn't need to clone DOM from elsewhere on the page —
+ * the slot is self-contained.
+ *
+ * The sheet host is always rendered (matches the entry-review pattern
+ * where the host is present and the client toggles `hidden` on
+ * dispatch). Individual slots are hidden until the corresponding bar
+ * cell opens them via the shared `sheet-controller` primitive.
+ */
+export declare function renderShortformMobileSheet(opts: ShortformMobileSheetOptions): RawHtml;
+//# sourceMappingURL=shortform-review-mobile-sheet.d.ts.map

package/dist/pages/shortform-review-mobile-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortform-review-mobile-sheet.d.ts","sourceRoot":"","sources":["../../src/pages/shortform-review-mobile-sheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAA4B,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,UAAU,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzC,QAAQ,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;CAC5C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,uBAAuB,GAAG,SAAS,IAAI,EAAE,CAyBnF;AAED,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,UAAU,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzC,QAAQ,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;CACvC;AAiDD;;;;;;;;;;GAUG;AACH,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,2BAA2B,GAChC,OAAO,CA4BT"}