@deskwork/studio 0.21.0 → 0.22.0

package/dist/pages/entry-review/mobile-sheet.js

@@ -0,0 +1,170 @@
+/**
+ * Entry-review-specific mobile sheet host + strip affordances.
+ *
+ * Renders the bottom-sheet container with the five named slots
+ * (outline / notes / actions / scrapbook / format) the entry-review
+ * surface composes against, plus the two phone-only strip affordances
+ * (Source/Preview pill, ✕ Done exit) that live in the top strip when
+ * editing on phone.
+ *
+ * The mobile-BAR helper itself is universal — it moved to
+ * `../mobile-bar.ts` and accepts a list of `Cell`s the caller supplies
+ * to describe each tab. The entry-review consumer composes the
+ * pre-refactor 6-cell configuration via `getEntryReviewBarCells()`
+ * below.
+ *
+ * Design references:
+ *   - Review tabs: plugins/deskwork-studio/public/mockups/mobile-1-bottom-sheet.html
+ *   - Editor tabs: plugins/deskwork-studio/public/mockups/editor-2-press-check-tabbar.html
+ *
+ * The sheet has five content slots. The client controller
+ * (`entry-review/mobile-sheet-bar.ts`) populates each at first open.
+ * Slot sources:
+ *   - outline: clone of `.er-outline-drawer-body`
+ *   - notes:   actual `[data-sidebar-list]` element MOVED in on phone
+ *              (preserves event listeners; see mobile-sheet-bar.ts)
+ *   - actions: rendered fresh from the decision verbs
+ *   - format:  the press-check key grid rendered server-side below
+ */
+import { html, unsafe } from "../html.js";
+/**
+ * The entry-review bar's contextual cell list. Six cells; CSS hides
+ * the off-mode cells via the `er-mobile-tab--review` /
+ * `er-mobile-tab--edit` modifiers (gated on
+ * `body[data-edit-mode="editing"]`).
+ *
+ *   - Review mode visible: Outline · Notes · Scrapbook · Actions
+ *   - Edit mode visible:   Format · Notes · Save
+ *
+ * The Notes tab is mode `'both'` — review notes the operator leaves
+ * carry across into edit. The Scrapbook tab uses the kraft-tone count
+ * badge to distinguish folio context from action peers.
+ */
+export function getEntryReviewBarCells() {
+    return [
+        {
+            glyph: '§',
+            label: 'Outline',
+            mode: 'review',
+            action: { kind: 'sheet', name: 'outline' },
+        },
+        {
+            glyph: '¶',
+            label: 'Format',
+            mode: 'edit',
+            action: { kind: 'sheet', name: 'format' },
+        },
+        {
+            glyph: '✎',
+            label: 'Notes',
+            mode: 'both',
+            action: { kind: 'sheet', name: 'notes' },
+            count: { dataAttr: 'data-notes-count' },
+        },
+        {
+            glyph: '▦',
+            label: 'Scrapbook',
+            mode: 'review',
+            action: { kind: 'sheet', name: 'scrapbook' },
+            count: { dataAttr: 'data-scrapbook-count', tone: 'kraft' },
+            modifierClass: 'er-mobile-tab--scrapbook',
+        },
+        {
+            glyph: '⊕',
+            label: 'Actions',
+            mode: 'review',
+            action: { kind: 'sheet', name: 'actions' },
+        },
+        {
+            glyph: '⊕',
+            label: 'Save',
+            mode: 'edit',
+            action: { kind: 'direct', action: 'save' },
+            modifierClass: 'er-mobile-tab--save',
+        },
+    ];
+}
+function renderFormatGrid() {
+    return html `
+    <div class="er-fkey-section">Headings</div>
+    <div class="er-fkey-grid">
+      <button type="button" class="er-fkey er-fkey--h1" data-fkey="h1"><span class="er-fkey-face">H1</span><span class="er-fkey-label">Title</span></button>
+      <button type="button" class="er-fkey er-fkey--h2" data-fkey="h2"><span class="er-fkey-face">H2</span><span class="er-fkey-label">Section</span></button>
+      <button type="button" class="er-fkey er-fkey--h3" data-fkey="h3"><span class="er-fkey-face">H3</span><span class="er-fkey-label">Sub</span></button>
+      <button type="button" class="er-fkey er-fkey--hr" data-fkey="hr"><span class="er-fkey-face">— · — · —</span><span class="er-fkey-label">Rule</span></button>
+    </div>
+    <div class="er-fkey-section">Inline</div>
+    <div class="er-fkey-grid">
+      <button type="button" class="er-fkey er-fkey--bold" data-fkey="bold"><span class="er-fkey-face"><strong>B</strong></span><span class="er-fkey-label">Bold</span></button>
+      <button type="button" class="er-fkey er-fkey--em" data-fkey="em"><span class="er-fkey-face"><em>I</em></span><span class="er-fkey-label">Italic</span></button>
+      <button type="button" class="er-fkey er-fkey--code" data-fkey="code"><span class="er-fkey-face">\` \`</span><span class="er-fkey-label">Code</span></button>
+      <button type="button" class="er-fkey er-fkey--link" data-fkey="link"><span class="er-fkey-face">link</span><span class="er-fkey-label">Link</span></button>
+    </div>
+    <div class="er-fkey-section">Block</div>
+    <div class="er-fkey-grid">
+      <button type="button" class="er-fkey er-fkey--list" data-fkey="list"><span class="er-fkey-face">— ·<br>— ·</span><span class="er-fkey-label">List</span></button>
+      <button type="button" class="er-fkey er-fkey--ol" data-fkey="ol"><span class="er-fkey-face">1·<br>2·</span><span class="er-fkey-label">Numbered</span></button>
+      <button type="button" class="er-fkey er-fkey--quote" data-fkey="quote"><span class="er-fkey-face">"</span><span class="er-fkey-label">Quote</span></button>
+      <button type="button" class="er-fkey er-fkey--fence" data-fkey="fence"><span class="er-fkey-face">\`\`\`</span><span class="er-fkey-label">Code block</span></button>
+    </div>`;
+}
+export function renderMobileSheet() {
+    return unsafe(html `
+    <section
+      class="er-mobile-sheet"
+      id="er-mobile-sheet"
+      data-mobile-sheet-host
+      hidden
+      aria-label="Surface sheet"
+      role="dialog"
+      aria-modal="false"
+    >
+      <button class="er-mobile-sheet-handle" data-mobile-sheet-handle type="button" aria-label="Drag to dismiss the sheet">
+        <span class="er-mobile-sheet-handle-bar" aria-hidden="true"></span>
+      </button>
+      <header class="er-mobile-sheet-head">
+        <span class="er-mobile-sheet-kicker" data-mobile-sheet-kicker></span>
+        <span class="er-mobile-sheet-meta" data-mobile-sheet-meta></span>
+        <button class="er-mobile-sheet-close" data-mobile-sheet-close type="button" aria-label="Close sheet">×</button>
+      </header>
+      <div class="er-mobile-sheet-body" data-mobile-sheet-body>
+        <div class="er-mobile-sheet-slot" data-mobile-sheet-slot="outline" hidden></div>
+        <div class="er-mobile-sheet-slot" data-mobile-sheet-slot="notes" hidden></div>
+        <div class="er-mobile-sheet-slot" data-mobile-sheet-slot="actions" hidden></div>
+        <div class="er-mobile-sheet-slot er-mobile-sheet-slot--scrapbook" data-mobile-sheet-slot="scrapbook" hidden></div>
+        <div class="er-mobile-sheet-slot er-mobile-sheet-slot--format" data-mobile-sheet-slot="format" hidden>${unsafe(renderFormatGrid())}</div>
+      </div>
+    </section>`);
+}
+/**
+ * Phone-only Source/Preview pill rendered into the top strip when in
+ * edit mode. Uses the same `data-edit-view` attribute as the desktop
+ * edit toolbar so `editModeBtns` (queried via that attribute in
+ * entry-review-client.ts) auto-binds clicks. CSS reveals it only on
+ * phone + edit mode; the desktop edit toolbar is hidden in that
+ * combination.
+ */
+export function renderStripModeSegment() {
+    return unsafe(html `
+    <span class="er-strip-mode-mobile" data-strip-mode-mobile aria-hidden="true">
+      <button type="button" class="er-strip-mode-btn" data-edit-view="source" aria-pressed="true">Source</button>
+      <button type="button" class="er-strip-mode-btn" data-edit-view="preview" aria-pressed="false">Preview</button>
+    </span>`);
+}
+/**
+ * Phone-only "✕ Done" exit affordance in the strip. Visible only when
+ * editing on phone (CSS-gated). Click dispatches into the existing
+ * toggle-edit handler — preserves the confirmDiscard prompt when the
+ * buffer is dirty, immediate exit when clean. Sits alongside the
+ * existing back-link (which continues to navigate home regardless of
+ * mode) so the operator always has both "leave editor" and "leave
+ * page" affordances available.
+ */
+export function renderStripEditExit() {
+    return unsafe(html `
+    <button type="button" class="er-strip-edit-done" data-strip-edit-done aria-label="Exit editor">
+      <span class="er-strip-edit-done-glyph" aria-hidden="true">✕</span>
+      <span class="er-strip-edit-done-label">Done</span>
+    </button>`);
+}
+//# sourceMappingURL=mobile-sheet.js.map

package/dist/pages/entry-review/mobile-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-sheet.js","sourceRoot":"","sources":["../../../src/pages/entry-review/mobile-sheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAgB,MAAM,YAAY,CAAC;AAGxD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,sBAAsB;IACpC,OAAO;QACL;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE;SAC3C;QACD;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC1C;QACD;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;YACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE;SACxC;QACD;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE;YAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,sBAAsB,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1D,aAAa,EAAE,0BAA0B;SAC1C;QACD;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE;SAC3C;QACD;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;YAC1C,aAAa,EAAE,qBAAqB;SACrC;KACF,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB;IACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;WAqBF,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,OAAO,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;gHAuB4F,MAAM,CAAC,gBAAgB,EAAE,CAAC;;eAE3H,CAAC,CAAC;AACjB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,sBAAsB;IACpC,OAAO,MAAM,CAAC,IAAI,CAAA;;;;YAIR,CAAC,CAAC;AACd,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO,MAAM,CAAC,IAAI,CAAA;;;;cAIN,CAAC,CAAC;AAChB,CAAC"}

package/dist/pages/masthead-menu.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Server-side renderer for the masthead `⋮` popover menu (Step 2.2.7).
+ *
+ * Per `DESIGN-STANDARDS.md § Menu reveal pattern · popover, not slide-up
+ * sheet`, the masthead's `⋮` opens a dropdown popover anchored UNDER the
+ * glyph, with an up-pointing arrow registered to the glyph's
+ * x-position. The popover does NOT use Phase 2.1's `createSlideUpSheet`
+ * — that primitive is reserved for bottom-anchored affordances.
+ *
+ * The HTML scaffold emitted here lives hidden in the DOM until the
+ * companion client controller (`mobile-shell/masthead-popover.ts`)
+ * toggles it open. The scaffold has three sections, in order:
+ *
+ *   1. Operator help    · Manual + Keyboard shortcuts
+ *   2. Configure        · Configure studio (Phase 4 placeholder)
+ *   3. Connect          · File an issue + About deskwork
+ *
+ * Companion CSS lives in `mobile-shell.css` under the
+ * `.er-masthead-popover-*` class vocabulary. The popover is mobile-only
+ * (≤600px) — desktop keeps existing per-surface chrome.
+ *
+ * Mirrors the v7 mockup's `.v7-popover` block faithfully (renamed
+ * `v7-` → `er-masthead-popover-` to match the project's BEM-ish
+ * namespace).
+ */
+import { type RawHtml } from './html.ts';
+/**
+ * Render the popover scaffold + scrim. Returns RawHtml so callers can
+ * embed it directly in their page template literals. The element is
+ * hidden by default; the client controller sets `hidden=false` to open.
+ *
+ * The scrim is a sibling element placed BEFORE the popover so it sits
+ * underneath in stacking order. Both elements share the
+ * `data-er-masthead-popover` / `data-er-masthead-popover-scrim` hooks
+ * the client controller uses to wire dismiss handlers.
+ */
+export declare function renderMastheadMenu(): RawHtml;
+//# sourceMappingURL=masthead-menu.d.ts.map

package/dist/pages/masthead-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masthead-menu.d.ts","sourceRoot":"","sources":["../../src/pages/masthead-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAgB,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAKvD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAsF5C"}

package/dist/pages/masthead-menu.js

@@ -0,0 +1,126 @@
+/**
+ * Server-side renderer for the masthead `⋮` popover menu (Step 2.2.7).
+ *
+ * Per `DESIGN-STANDARDS.md § Menu reveal pattern · popover, not slide-up
+ * sheet`, the masthead's `⋮` opens a dropdown popover anchored UNDER the
+ * glyph, with an up-pointing arrow registered to the glyph's
+ * x-position. The popover does NOT use Phase 2.1's `createSlideUpSheet`
+ * — that primitive is reserved for bottom-anchored affordances.
+ *
+ * The HTML scaffold emitted here lives hidden in the DOM until the
+ * companion client controller (`mobile-shell/masthead-popover.ts`)
+ * toggles it open. The scaffold has three sections, in order:
+ *
+ *   1. Operator help    · Manual + Keyboard shortcuts
+ *   2. Configure        · Configure studio (Phase 4 placeholder)
+ *   3. Connect          · File an issue + About deskwork
+ *
+ * Companion CSS lives in `mobile-shell.css` under the
+ * `.er-masthead-popover-*` class vocabulary. The popover is mobile-only
+ * (≤600px) — desktop keeps existing per-surface chrome.
+ *
+ * Mirrors the v7 mockup's `.v7-popover` block faithfully (renamed
+ * `v7-` → `er-masthead-popover-` to match the project's BEM-ish
+ * namespace).
+ */
+import { html, unsafe } from "./html.js";
+const MANUAL_HREF = '/dev/editorial-help';
+const ISSUE_HREF = 'https://github.com/audiocontrol-org/deskwork/issues/new';
+/**
+ * Render the popover scaffold + scrim. Returns RawHtml so callers can
+ * embed it directly in their page template literals. The element is
+ * hidden by default; the client controller sets `hidden=false` to open.
+ *
+ * The scrim is a sibling element placed BEFORE the popover so it sits
+ * underneath in stacking order. Both elements share the
+ * `data-er-masthead-popover` / `data-er-masthead-popover-scrim` hooks
+ * the client controller uses to wire dismiss handlers.
+ */
+export function renderMastheadMenu() {
+    return unsafe(html `
+    <div
+      class="er-masthead-popover-scrim"
+      data-er-masthead-popover-scrim
+      hidden
+    ></div>
+    <div
+      class="er-masthead-popover"
+      data-er-masthead-popover
+      role="dialog"
+      aria-labelledby="masthead-menu-trigger"
+      hidden
+    >
+      <div class="er-masthead-popover-section">
+        <div class="er-masthead-popover-section-label">Operator help</div>
+        <a
+          class="er-masthead-popover-item"
+          href="${MANUAL_HREF}"
+        >
+          <span class="er-masthead-popover-item-glyph">§</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">Manual</span>
+            <span class="er-masthead-popover-item-route">${MANUAL_HREF}</span>
+          </span>
+          <span class="er-masthead-popover-item-arrow" aria-hidden="true">›</span>
+        </a>
+        <button
+          type="button"
+          class="er-masthead-popover-item"
+          data-er-masthead-popover-action="shortcuts"
+        >
+          <span class="er-masthead-popover-item-glyph er-masthead-popover-item-glyph--blue">⌘</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">Keyboard shortcuts</span>
+            <span class="er-masthead-popover-item-route">opens overlay</span>
+          </span>
+          <span class="er-masthead-popover-item-arrow" aria-hidden="true">›</span>
+        </button>
+      </div>
+      <div class="er-masthead-popover-section">
+        <div class="er-masthead-popover-section-label">Configure</div>
+        <button
+          type="button"
+          class="er-masthead-popover-item er-masthead-popover-item--future"
+          data-er-masthead-popover-action="configure"
+          data-disabled="true"
+          aria-disabled="true"
+          tabindex="-1"
+        >
+          <span class="er-masthead-popover-item-glyph er-masthead-popover-item-glyph--kraft">⊞</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">Configure studio</span>
+            <span class="er-masthead-popover-item-route">.deskwork/config.json <span class="er-masthead-popover-item-future-tag">phase 4</span></span>
+          </span>
+          <span class="er-masthead-popover-item-arrow" aria-hidden="true">›</span>
+        </button>
+      </div>
+      <div class="er-masthead-popover-section">
+        <div class="er-masthead-popover-section-label">Connect</div>
+        <a
+          class="er-masthead-popover-item"
+          href="${ISSUE_HREF}"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span class="er-masthead-popover-item-glyph er-masthead-popover-item-glyph--blue">✎</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">File an issue</span>
+            <span class="er-masthead-popover-item-route">github · new tab</span>
+          </span>
+          <span class="er-masthead-popover-item-arrow er-masthead-popover-item-arrow--external" aria-hidden="true">↗</span>
+        </a>
+        <a
+          class="er-masthead-popover-item"
+          href="${MANUAL_HREF}"
+        >
+          <span class="er-masthead-popover-item-glyph">❡</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">About deskwork</span>
+            <span class="er-masthead-popover-item-route">manual · GPL-3.0</span>
+          </span>
+          <span class="er-masthead-popover-item-arrow" aria-hidden="true">›</span>
+        </a>
+      </div>
+    </div>`);
+}
+//# sourceMappingURL=masthead-menu.js.map

package/dist/pages/masthead-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masthead-menu.js","sourceRoot":"","sources":["../../src/pages/masthead-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAgB,MAAM,WAAW,CAAC;AAEvD,MAAM,WAAW,GAAG,qBAAqB,CAAC;AAC1C,MAAM,UAAU,GAAG,yDAAyD,CAAC;AAE7E;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;kBAiBF,WAAW;;;;;2DAK8B,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAuCpD,UAAU;;;;;;;;;;;;;kBAaV,WAAW;;;;;;;;;;WAUlB,CAAC,CAAC;AACb,CAAC"}

package/dist/pages/masthead-menu.ts

@@ -0,0 +1,128 @@
+/**
+ * Server-side renderer for the masthead `⋮` popover menu (Step 2.2.7).
+ *
+ * Per `DESIGN-STANDARDS.md § Menu reveal pattern · popover, not slide-up
+ * sheet`, the masthead's `⋮` opens a dropdown popover anchored UNDER the
+ * glyph, with an up-pointing arrow registered to the glyph's
+ * x-position. The popover does NOT use Phase 2.1's `createSlideUpSheet`
+ * — that primitive is reserved for bottom-anchored affordances.
+ *
+ * The HTML scaffold emitted here lives hidden in the DOM until the
+ * companion client controller (`mobile-shell/masthead-popover.ts`)
+ * toggles it open. The scaffold has three sections, in order:
+ *
+ *   1. Operator help    · Manual + Keyboard shortcuts
+ *   2. Configure        · Configure studio (Phase 4 placeholder)
+ *   3. Connect          · File an issue + About deskwork
+ *
+ * Companion CSS lives in `mobile-shell.css` under the
+ * `.er-masthead-popover-*` class vocabulary. The popover is mobile-only
+ * (≤600px) — desktop keeps existing per-surface chrome.
+ *
+ * Mirrors the v7 mockup's `.v7-popover` block faithfully (renamed
+ * `v7-` → `er-masthead-popover-` to match the project's BEM-ish
+ * namespace).
+ */
+
+import { html, unsafe, type RawHtml } from './html.ts';
+
+const MANUAL_HREF = '/dev/editorial-help';
+const ISSUE_HREF = 'https://github.com/audiocontrol-org/deskwork/issues/new';
+
+/**
+ * Render the popover scaffold + scrim. Returns RawHtml so callers can
+ * embed it directly in their page template literals. The element is
+ * hidden by default; the client controller sets `hidden=false` to open.
+ *
+ * The scrim is a sibling element placed BEFORE the popover so it sits
+ * underneath in stacking order. Both elements share the
+ * `data-er-masthead-popover` / `data-er-masthead-popover-scrim` hooks
+ * the client controller uses to wire dismiss handlers.
+ */
+export function renderMastheadMenu(): RawHtml {
+  return unsafe(html`
+    <div
+      class="er-masthead-popover-scrim"
+      data-er-masthead-popover-scrim
+      hidden
+    ></div>
+    <div
+      class="er-masthead-popover"
+      data-er-masthead-popover
+      role="dialog"
+      aria-labelledby="masthead-menu-trigger"
+      hidden
+    >
+      <div class="er-masthead-popover-section">
+        <div class="er-masthead-popover-section-label">Operator help</div>
+        <a
+          class="er-masthead-popover-item"
+          href="${MANUAL_HREF}"
+        >
+          <span class="er-masthead-popover-item-glyph">§</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">Manual</span>
+            <span class="er-masthead-popover-item-route">${MANUAL_HREF}</span>
+          </span>
+          <span class="er-masthead-popover-item-arrow" aria-hidden="true">›</span>
+        </a>
+        <button
+          type="button"
+          class="er-masthead-popover-item"
+          data-er-masthead-popover-action="shortcuts"
+        >
+          <span class="er-masthead-popover-item-glyph er-masthead-popover-item-glyph--blue">⌘</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">Keyboard shortcuts</span>
+            <span class="er-masthead-popover-item-route">opens overlay</span>
+          </span>
+          <span class="er-masthead-popover-item-arrow" aria-hidden="true">›</span>
+        </button>
+      </div>
+      <div class="er-masthead-popover-section">
+        <div class="er-masthead-popover-section-label">Configure</div>
+        <button
+          type="button"
+          class="er-masthead-popover-item er-masthead-popover-item--future"
+          data-er-masthead-popover-action="configure"
+          data-disabled="true"
+          aria-disabled="true"
+          tabindex="-1"
+        >
+          <span class="er-masthead-popover-item-glyph er-masthead-popover-item-glyph--kraft">⊞</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">Configure studio</span>
+            <span class="er-masthead-popover-item-route">.deskwork/config.json <span class="er-masthead-popover-item-future-tag">phase 4</span></span>
+          </span>
+          <span class="er-masthead-popover-item-arrow" aria-hidden="true">›</span>
+        </button>
+      </div>
+      <div class="er-masthead-popover-section">
+        <div class="er-masthead-popover-section-label">Connect</div>
+        <a
+          class="er-masthead-popover-item"
+          href="${ISSUE_HREF}"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span class="er-masthead-popover-item-glyph er-masthead-popover-item-glyph--blue">✎</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">File an issue</span>
+            <span class="er-masthead-popover-item-route">github · new tab</span>
+          </span>
+          <span class="er-masthead-popover-item-arrow er-masthead-popover-item-arrow--external" aria-hidden="true">↗</span>
+        </a>
+        <a
+          class="er-masthead-popover-item"
+          href="${MANUAL_HREF}"
+        >
+          <span class="er-masthead-popover-item-glyph">❡</span>
+          <span class="er-masthead-popover-item-body">
+            <span class="er-masthead-popover-item-label">About deskwork</span>
+            <span class="er-masthead-popover-item-route">manual · GPL-3.0</span>
+          </span>
+          <span class="er-masthead-popover-item-arrow" aria-hidden="true">›</span>
+        </a>
+      </div>
+    </div>`);
+}

package/dist/pages/masthead.d.ts

@@ -0,0 +1,85 @@
+/**
+ * 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 { 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;
+}
+/**
+ * Render the universal masthead. Returns RawHtml so callers can embed
+ * the result directly in `html\`…${renderMasthead(...)}…\`` templates.
+ */
+export declare function renderMasthead(opts: MastheadOpts): RawHtml;
+//# sourceMappingURL=masthead.d.ts.map

package/dist/pages/masthead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masthead.d.ts","sourceRoot":"","sources":["../../src/pages/masthead.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAA4B,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;CACjC;AAsCD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CA0B1D"}