@deskwork/studio 0.20.0 → 0.22.0

package/dist/pages/dashboard/shortform-section.js

@@ -0,0 +1,189 @@
+/**
+ * Shortform-by-platform section renderer (Step 2.2.9 — studio-mobile-first).
+ *
+ * Per DESIGN-STANDARDS.md § Desk information architecture, the Desk's
+ * second section absorbs the legacy `/dev/editorial-review-shortform`
+ * page as four platform tiles (LinkedIn / Reddit / YouTube / Instagram),
+ * each collapsible to reveal that platform's open workflows. Tiles share
+ * the longform-pipeline tile shape (data-stage-tile + aria-expanded +
+ * data-stage-section attrs) so the existing `dashboard/stage-tiles.ts`
+ * client controller can drive both. `data-stage-section-group="shortform"`
+ * partitions single-expand state so longform and shortform open
+ * independently.
+ *
+ * Per DESKWORK-STATE-MACHINE.md Commandment III, rows do NOT render
+ * `.er-stamp` / `er-stamp-<state>` chrome. The pre-v7 shortform page
+ * rendered review-state stamps inline; this section does not.
+ *
+ * Per THESIS Consequence 2, rows are navigation-only. The trailing `⋮`
+ * placeholder anchor links to `/dev/editorial-review/<workflow.id>`;
+ * Step 2.2.10 lands the v0.20-style row popover with stage-aware verbs
+ * once the shortform verb-routing pieces (issues G.1-G.6) land. This
+ * commit does NOT smuggle verb-routing in early. Tracked in
+ * https://github.com/audiocontrol-org/deskwork/issues/263.
+ *
+ * TRANSITIONAL SHAPE: this row's `er-row-shell` markup is a strict
+ * subset of the longform row shell defined in
+ * `dashboard/section.ts:renderRow`. Longform shells carry three
+ * children (`er-row-drawer`, `er-row-fg`, `er-row-menu`); this shell
+ * carries only the `er-row-fg`. Step 2.2.10's popover wire-up is
+ * purely additive on the existing shape — it inserts the missing
+ * `er-row-menu` (and possibly `er-row-drawer` if a swipe gesture is
+ * scoped in). Keep the two row paths' attribute conventions aligned
+ * (data-row-shell, data-platform, data-site, data-slug already match)
+ * so the unification stays straightforward.
+ */
+import { html, unsafe } from "../html.js";
+import { DASHBOARD_PLATFORM_ORDER } from "./data.js";
+const PLATFORM_CHROME = {
+    linkedin: { badge: 'in', name: 'LinkedIn', variant: 'linkedin' },
+    reddit: { badge: 'r/', name: 'Reddit', variant: 'reddit' },
+    youtube: { badge: '@', name: 'YouTube', variant: 'youtube' },
+    instagram: { badge: 'IG', name: 'Instagram', variant: 'instagram' },
+};
+/**
+ * Render the shortform section head — `<div class="er-desk-section-head
+ * er-desk-section-head--shortform">` matching the mockup's
+ * `.desk-section-head.shortform` shape. Glyph + label + caption count.
+ */
+export function renderShortformSectionHead(totalCount) {
+    return unsafe(html `
+    <div class="er-desk-section-head er-desk-section-head--shortform">
+      <span class="er-desk-section-head-glyph" aria-hidden="true">⊟</span>
+      <span class="er-desk-section-head-label">Shortform · by platform</span>
+      <span class="er-desk-section-head-count">· ${totalCount} ${totalCount === 1 ? 'workflow' : 'workflows'}</span>
+    </div>`);
+}
+/**
+ * Render one platform tile. Shares its tile shape + a11y attrs with the
+ * longform stage tile so the stage-tiles.ts client controller drives
+ * both. Empty platforms get `disabled` + `.is-empty` so the operator
+ * sees the platform exists but cannot drill into nothing.
+ */
+export function renderShortformPlatformTile(platform, count) {
+    const chrome = PLATFORM_CHROME[platform];
+    const isEmpty = count === 0;
+    const classes = isEmpty
+        ? 'er-stage-tile er-stage-tile--shortform is-empty'
+        : 'er-stage-tile er-stage-tile--shortform';
+    const disabledAttr = isEmpty ? ' disabled' : '';
+    const sectionId = `shortform-${platform}`;
+    return unsafe(html `
+    <button class="${classes}" type="button"
+      data-stage-tile="${sectionId}"
+      data-stage-section-group="shortform"
+      aria-expanded="false"
+      aria-controls="${sectionId}"${unsafe(disabledAttr)}>
+      <span class="er-platform-badge er-platform-badge--${chrome.variant}" aria-hidden="true">${chrome.badge}</span>
+      <span class="er-stage-tile-name">${chrome.name}</span>
+      <span class="er-stage-tile-count"><span class="num">${count}</span></span>
+      <span class="er-stage-tile-chev" aria-hidden="true">›</span>
+    </button>`);
+}
+function fmtRelTime(iso, now) {
+    const t = new Date(iso).getTime();
+    const s = Math.max(0, Math.floor((now.getTime() - t) / 1000));
+    if (s < 60)
+        return `${s}s ago`;
+    const m = Math.floor(s / 60);
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 48)
+        return `${h}h ago`;
+    return `${Math.floor(h / 24)}d ago`;
+}
+/**
+ * Render a single shortform workflow row. Mirrors the v0.20 row-affordance
+ * shape: shell + foreground (slug + title + channel) + meta column (ts +
+ * version) + trailing `⋮`. The `⋮` is a navigation placeholder anchor —
+ * Step 2.2.10 wires the stage-aware row popover.
+ */
+export function renderShortformRow(workflow, now) {
+    // workflow.id is typed as `string` on DraftWorkflowItem; UUIDs are the
+    // current shape but the type system doesn't enforce that. Encode the
+    // path segment so a future non-UUID id (e.g. one containing `?`, `#`,
+    // space) doesn't silently produce a broken link.
+    const reviewLink = `/dev/editorial-review/${encodeURIComponent(workflow.id)}`;
+    const search = [workflow.slug, workflow.channel ?? '', workflow.platform ?? '']
+        .join(' ')
+        .toLowerCase();
+    const channelMarkup = workflow.channel
+        ? unsafe(html `<span class="er-row-shell-channel">${workflow.channel}</span>`)
+        : unsafe('');
+    // The workflow `slug` is the post slug; we surface it as the row's
+    // primary handle (consistent with longform rows). The workflow `id` is
+    // the navigation key (uuid in the review-pipeline store).
+    return unsafe(html `
+    <div class="er-row-shell er-row-shell--shortform"
+      data-row-shell data-search="${search}"
+      data-workflow-id="${workflow.id}"
+      data-platform="${workflow.platform ?? ''}"
+      data-site="${workflow.site}"
+      data-slug="${workflow.slug}">
+      <div class="er-row-fg er-shortform-row-fg">
+        <div class="er-shortform-row-body">
+          <span class="er-row-shell-slug"><a href="${reviewLink}"
+            title="open the review surface">${workflow.slug}</a></span>
+          ${channelMarkup}
+        </div>
+        <div class="er-shortform-row-meta">
+          <span class="er-shortform-row-ts">${fmtRelTime(workflow.updatedAt, now)}</span>
+          <span class="er-shortform-row-version">v${workflow.currentVersion}</span>
+        </div>
+        <a class="er-row-shell-link" href="${reviewLink}"
+          aria-label="Open shortform review for ${workflow.slug}"
+          title="open the review surface">⋮</a>
+      </div>
+    </div>`);
+}
+/**
+ * Render the platform's row group — the `<div class="er-row-group">`
+ * container holding all rows for that platform. The container carries
+ * the `data-stage-section` attr the stage-tiles.ts controller targets
+ * to apply `data-collapsed`.
+ */
+function renderPlatformRowGroup(platform, workflows, now) {
+    const sectionId = `shortform-${platform}`;
+    if (workflows.length === 0) {
+        // Empty platform — still emit the row-group container so the
+        // controller's `[data-stage-section="<id>"]` selector resolves. The
+        // tile is `disabled` so it cannot expand anyway; the empty container
+        // is structurally inert.
+        return unsafe(html `
+      <div class="er-row-group" id="${sectionId}" data-stage-section="${sectionId}"></div>`);
+    }
+    const rows = workflows.map((w) => renderShortformRow(w, now).__raw).join('');
+    return unsafe(html `
+    <div class="er-row-group" id="${sectionId}" data-stage-section="${sectionId}">
+      ${unsafe(rows)}
+    </div>`);
+}
+/**
+ * Compose the full shortform section: head + 4 platform tiles + per-
+ * platform row groups, in `DASHBOARD_PLATFORM_ORDER` order. All 4
+ * platforms render even when zero — empty tiles communicate platform
+ * existence (per § Empty-state rendering, "the absence of items is
+ * information about the pipeline shape").
+ *
+ * API shape note: this helper iterates platforms internally (single
+ * call → whole section), whereas the longform `renderStageSection` is
+ * called per-stage by `dashboard.ts` (caller iterates). The asymmetry
+ * is intentional: longform stages share a uniform shape across all
+ * eight stages, so the caller-iterates pattern keeps the loop visible
+ * in `dashboard.ts`. Shortform's four platforms share a section head
+ * and ordered iteration constraint that lives more cleanly inside the
+ * composer. If a future surface needs both shapes via a common
+ * abstraction, the unification belongs there, not here.
+ */
+export function renderShortformSection(data, now) {
+    const sectionHead = renderShortformSectionHead(data.totalCount);
+    const tilesAndGroups = DASHBOARD_PLATFORM_ORDER.map((platform) => {
+        const workflows = data.shortformByPlatform.get(platform) ?? [];
+        const tile = renderShortformPlatformTile(platform, workflows.length);
+        const group = renderPlatformRowGroup(platform, workflows, now);
+        return `${tile.__raw}${group.__raw}`;
+    }).join('');
+    return unsafe(html `${sectionHead}${unsafe(tilesAndGroups)}`);
+}
+//# sourceMappingURL=shortform-section.js.map

package/dist/pages/dashboard/shortform-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortform-section.js","sourceRoot":"","sources":["../../../src/pages/dashboard/shortform-section.ts"],"names":[],"mappings":"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"}

package/dist/pages/dashboard/shortform-section.ts

@@ -0,0 +1,228 @@
+/**
+ * Shortform-by-platform section renderer (Step 2.2.9 — studio-mobile-first).
+ *
+ * Per DESIGN-STANDARDS.md § Desk information architecture, the Desk's
+ * second section absorbs the legacy `/dev/editorial-review-shortform`
+ * page as four platform tiles (LinkedIn / Reddit / YouTube / Instagram),
+ * each collapsible to reveal that platform's open workflows. Tiles share
+ * the longform-pipeline tile shape (data-stage-tile + aria-expanded +
+ * data-stage-section attrs) so the existing `dashboard/stage-tiles.ts`
+ * client controller can drive both. `data-stage-section-group="shortform"`
+ * partitions single-expand state so longform and shortform open
+ * independently.
+ *
+ * Per DESKWORK-STATE-MACHINE.md Commandment III, rows do NOT render
+ * `.er-stamp` / `er-stamp-<state>` chrome. The pre-v7 shortform page
+ * rendered review-state stamps inline; this section does not.
+ *
+ * Per THESIS Consequence 2, rows are navigation-only. The trailing `⋮`
+ * placeholder anchor links to `/dev/editorial-review/<workflow.id>`;
+ * Step 2.2.10 lands the v0.20-style row popover with stage-aware verbs
+ * once the shortform verb-routing pieces (issues G.1-G.6) land. This
+ * commit does NOT smuggle verb-routing in early. Tracked in
+ * https://github.com/audiocontrol-org/deskwork/issues/263.
+ *
+ * TRANSITIONAL SHAPE: this row's `er-row-shell` markup is a strict
+ * subset of the longform row shell defined in
+ * `dashboard/section.ts:renderRow`. Longform shells carry three
+ * children (`er-row-drawer`, `er-row-fg`, `er-row-menu`); this shell
+ * carries only the `er-row-fg`. Step 2.2.10's popover wire-up is
+ * purely additive on the existing shape — it inserts the missing
+ * `er-row-menu` (and possibly `er-row-drawer` if a swipe gesture is
+ * scoped in). Keep the two row paths' attribute conventions aligned
+ * (data-row-shell, data-platform, data-site, data-slug already match)
+ * so the unification stays straightforward.
+ */
+
+import { html, unsafe, type RawHtml } from '../html.ts';
+import type { DraftWorkflowItem } from '@deskwork/core/review/types';
+import type { Platform } from '@deskwork/core/types';
+import { DASHBOARD_PLATFORM_ORDER } from './data.ts';
+
+/** Per-platform display metadata. Mirrors desk-states-v7.html:632-655. */
+interface PlatformChrome {
+  /** Two-character badge inside the tile (replaces the longform stage glyph). */
+  readonly badge: string;
+  /** Display name on the tile. */
+  readonly name: string;
+  /** CSS variant suffix for `.er-platform-badge--<variant>`. */
+  readonly variant: string;
+}
+
+const PLATFORM_CHROME: Record<Platform, PlatformChrome> = {
+  linkedin: { badge: 'in', name: 'LinkedIn', variant: 'linkedin' },
+  reddit: { badge: 'r/', name: 'Reddit', variant: 'reddit' },
+  youtube: { badge: '@', name: 'YouTube', variant: 'youtube' },
+  instagram: { badge: 'IG', name: 'Instagram', variant: 'instagram' },
+};
+
+/**
+ * Render the shortform section head — `<div class="er-desk-section-head
+ * er-desk-section-head--shortform">` matching the mockup's
+ * `.desk-section-head.shortform` shape. Glyph + label + caption count.
+ */
+export function renderShortformSectionHead(totalCount: number): RawHtml {
+  return unsafe(html`
+    <div class="er-desk-section-head er-desk-section-head--shortform">
+      <span class="er-desk-section-head-glyph" aria-hidden="true">⊟</span>
+      <span class="er-desk-section-head-label">Shortform · by platform</span>
+      <span class="er-desk-section-head-count">· ${totalCount} ${totalCount === 1 ? 'workflow' : 'workflows'}</span>
+    </div>`);
+}
+
+/**
+ * Render one platform tile. Shares its tile shape + a11y attrs with the
+ * longform stage tile so the stage-tiles.ts client controller drives
+ * both. Empty platforms get `disabled` + `.is-empty` so the operator
+ * sees the platform exists but cannot drill into nothing.
+ */
+export function renderShortformPlatformTile(
+  platform: Platform,
+  count: number,
+): RawHtml {
+  const chrome = PLATFORM_CHROME[platform];
+  const isEmpty = count === 0;
+  const classes = isEmpty
+    ? 'er-stage-tile er-stage-tile--shortform is-empty'
+    : 'er-stage-tile er-stage-tile--shortform';
+  const disabledAttr = isEmpty ? ' disabled' : '';
+  const sectionId = `shortform-${platform}`;
+  return unsafe(html`
+    <button class="${classes}" type="button"
+      data-stage-tile="${sectionId}"
+      data-stage-section-group="shortform"
+      aria-expanded="false"
+      aria-controls="${sectionId}"${unsafe(disabledAttr)}>
+      <span class="er-platform-badge er-platform-badge--${chrome.variant}" aria-hidden="true">${chrome.badge}</span>
+      <span class="er-stage-tile-name">${chrome.name}</span>
+      <span class="er-stage-tile-count"><span class="num">${count}</span></span>
+      <span class="er-stage-tile-chev" aria-hidden="true">›</span>
+    </button>`);
+}
+
+function fmtRelTime(iso: string, now: Date): string {
+  const t = new Date(iso).getTime();
+  const s = Math.max(0, Math.floor((now.getTime() - t) / 1000));
+  if (s < 60) return `${s}s ago`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 48) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
+
+/**
+ * Render a single shortform workflow row. Mirrors the v0.20 row-affordance
+ * shape: shell + foreground (slug + title + channel) + meta column (ts +
+ * version) + trailing `⋮`. The `⋮` is a navigation placeholder anchor —
+ * Step 2.2.10 wires the stage-aware row popover.
+ */
+export function renderShortformRow(
+  workflow: DraftWorkflowItem,
+  now: Date,
+): RawHtml {
+  // workflow.id is typed as `string` on DraftWorkflowItem; UUIDs are the
+  // current shape but the type system doesn't enforce that. Encode the
+  // path segment so a future non-UUID id (e.g. one containing `?`, `#`,
+  // space) doesn't silently produce a broken link.
+  const reviewLink = `/dev/editorial-review/${encodeURIComponent(workflow.id)}`;
+  const search = [workflow.slug, workflow.channel ?? '', workflow.platform ?? '']
+    .join(' ')
+    .toLowerCase();
+  const channelMarkup: RawHtml = workflow.channel
+    ? unsafe(html`<span class="er-row-shell-channel">${workflow.channel}</span>`)
+    : unsafe('');
+  // The workflow `slug` is the post slug; we surface it as the row's
+  // primary handle (consistent with longform rows). The workflow `id` is
+  // the navigation key (uuid in the review-pipeline store).
+  return unsafe(html`
+    <div class="er-row-shell er-row-shell--shortform"
+      data-row-shell data-search="${search}"
+      data-workflow-id="${workflow.id}"
+      data-platform="${workflow.platform ?? ''}"
+      data-site="${workflow.site}"
+      data-slug="${workflow.slug}">
+      <div class="er-row-fg er-shortform-row-fg">
+        <div class="er-shortform-row-body">
+          <span class="er-row-shell-slug"><a href="${reviewLink}"
+            title="open the review surface">${workflow.slug}</a></span>
+          ${channelMarkup}
+        </div>
+        <div class="er-shortform-row-meta">
+          <span class="er-shortform-row-ts">${fmtRelTime(workflow.updatedAt, now)}</span>
+          <span class="er-shortform-row-version">v${workflow.currentVersion}</span>
+        </div>
+        <a class="er-row-shell-link" href="${reviewLink}"
+          aria-label="Open shortform review for ${workflow.slug}"
+          title="open the review surface">⋮</a>
+      </div>
+    </div>`);
+}
+
+/**
+ * Render the platform's row group — the `<div class="er-row-group">`
+ * container holding all rows for that platform. The container carries
+ * the `data-stage-section` attr the stage-tiles.ts controller targets
+ * to apply `data-collapsed`.
+ */
+function renderPlatformRowGroup(
+  platform: Platform,
+  workflows: readonly DraftWorkflowItem[],
+  now: Date,
+): RawHtml {
+  const sectionId = `shortform-${platform}`;
+  if (workflows.length === 0) {
+    // Empty platform — still emit the row-group container so the
+    // controller's `[data-stage-section="<id>"]` selector resolves. The
+    // tile is `disabled` so it cannot expand anyway; the empty container
+    // is structurally inert.
+    return unsafe(html`
+      <div class="er-row-group" id="${sectionId}" data-stage-section="${sectionId}"></div>`);
+  }
+  const rows = workflows.map((w) => renderShortformRow(w, now).__raw).join('');
+  return unsafe(html`
+    <div class="er-row-group" id="${sectionId}" data-stage-section="${sectionId}">
+      ${unsafe(rows)}
+    </div>`);
+}
+
+/**
+ * Section data shape — the renderer reads counts + workflows per platform
+ * from the dashboard's loadDashboardData() output. Caller passes the
+ * ordered Map directly (insertion order = display order).
+ */
+export interface ShortformSectionData {
+  readonly shortformByPlatform: ReadonlyMap<Platform, readonly DraftWorkflowItem[]>;
+  readonly totalCount: number;
+}
+
+/**
+ * Compose the full shortform section: head + 4 platform tiles + per-
+ * platform row groups, in `DASHBOARD_PLATFORM_ORDER` order. All 4
+ * platforms render even when zero — empty tiles communicate platform
+ * existence (per § Empty-state rendering, "the absence of items is
+ * information about the pipeline shape").
+ *
+ * API shape note: this helper iterates platforms internally (single
+ * call → whole section), whereas the longform `renderStageSection` is
+ * called per-stage by `dashboard.ts` (caller iterates). The asymmetry
+ * is intentional: longform stages share a uniform shape across all
+ * eight stages, so the caller-iterates pattern keeps the loop visible
+ * in `dashboard.ts`. Shortform's four platforms share a section head
+ * and ordered iteration constraint that lives more cleanly inside the
+ * composer. If a future surface needs both shapes via a common
+ * abstraction, the unification belongs there, not here.
+ */
+export function renderShortformSection(
+  data: ShortformSectionData,
+  now: Date,
+): RawHtml {
+  const sectionHead = renderShortformSectionHead(data.totalCount);
+  const tilesAndGroups = DASHBOARD_PLATFORM_ORDER.map((platform) => {
+    const workflows = data.shortformByPlatform.get(platform) ?? [];
+    const tile = renderShortformPlatformTile(platform, workflows.length);
+    const group = renderPlatformRowGroup(platform, workflows, now);
+    return `${tile.__raw}${group.__raw}`;
+  }).join('');
+  return unsafe(html`${sectionHead}${unsafe(tilesAndGroups)}`);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/pages/dashboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAUtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,YAAY,CAAC;AAElE;;;GAGG;AACH,wBAAsB,eAAe,CACnC,GAAG,EAAE,aAAa,EAClB,QAAQ,CAAC,EAAE,oBAAoB,GAC9B,OAAO,CAAC,MAAM,CAAC,CA2CjB"}
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/pages/dashboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AActD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,YAAY,CAAC;AAElE;;;GAGG;AACH,wBAAsB,eAAe,CACnC,GAAG,EAAE,aAAa,EAClB,QAAQ,CAAC,EAAE,oBAAoB,GAC9B,OAAO,CAAC,MAAM,CAAC,CA8EjB"}

package/dist/pages/dashboard.js

@@ -33,9 +33,13 @@
 import { html, unsafe } from "./html.js";
 import { layout } from "./layout.js";
 import { renderEditorialFolio } from "./chrome.js";
+import { renderMasthead } from "./masthead.js";
+import { renderMastheadMenu } from "./masthead-menu.js";
 import { loadDashboardData, DASHBOARD_STAGE_ORDER } from "./dashboard/data.js";
 import { renderStageSection, renderDistributionPlaceholder, } from "./dashboard/section.js";
 import { renderHeader, renderFilterStrip } from "./dashboard/header.js";
+import { renderShortformSection } from "./dashboard/shortform-section.js";
+import { renderAdjacentSection } from "./dashboard/adjacent-section.js";
 /**
  * Render the studio dashboard. Async because sidecar reads hit disk;
  * the route handler in server.ts awaits the result before sending it.
@@ -43,25 +47,52 @@ import { renderHeader, renderFilterStrip } from "./dashboard/header.js";
 export async function renderDashboard(ctx, getIndex) {
     // Touch the parameter so the unused-param check stays satisfied.
     void getIndex;
-    const data = await loadDashboardData(ctx.projectRoot);
+    const data = await loadDashboardData(ctx.projectRoot, ctx.config);
     const now = ctx.now ? ctx.now() : new Date();
     const defaultSite = ctx.config.defaultSite;
     const stageSections = DASHBOARD_STAGE_ORDER.map((stage) => {
         const bucket = data.byStage.get(stage) ?? [];
         return renderStageSection(stage, bucket, defaultSite).__raw;
     }).join('\n');
+    // v7 architecture (Step 2.2.9 — studio-mobile-first): the Desk absorbs
+    // the Shortform-by-platform view as its second section, plus reserved
+    // Adjacent-tools placeholders for Phase 3+ Folio + Files surfaces. Per
+    // the v7 mockup at desk-states-v7.html:563, the masthead meta reads
+    // "${longformCount} longform · ${shortformCount} shortform" when any
+    // shortform workflows exist; otherwise it falls back to longform-only
+    // to avoid a misleading "0 shortform" claim.
+    const longformCount = data.entries.length;
+    const shortformCount = data.shortformWorkflows.length;
+    const mastheadMeta = shortformCount > 0
+        ? `${longformCount} longform · ${shortformCount} shortform`
+        : `${longformCount} longform`;
+    const masthead = renderMasthead({
+        kicker: "The compositor's desk",
+        title: 'Pipeline + Press.',
+        metaInline: mastheadMeta,
+        isHub: true,
+    });
     // The press queue (right-rail on desktop) was removed in v0.19
     // per DESKWORK-STATE-MACHINE.md Commandment III — its primary
     // purpose was surfacing review-state, which is RETIRED. The
     // archive entry at docs/studio-design/ACCEPTED/2026-05-09-press-queue-removed/
     // captures the rationale.
+    const shortformSection = renderShortformSection({
+        shortformByPlatform: data.shortformByPlatform,
+        totalCount: shortformCount,
+    }, now);
+    const adjacentSection = renderAdjacentSection();
     const body = html `
+  ${masthead}
+  ${renderMastheadMenu()}
   ${renderEditorialFolio('dashboard', 'press-check')}
   ${renderHeader(data, ctx.projectRoot, now)}
   <main class="er-container">
     ${renderFilterStrip()}
     ${unsafe(stageSections)}
     ${renderDistributionPlaceholder()}
+    ${shortformSection}
+    ${adjacentSection}
   </main>
   ${renderComposeChrome()}
   <div class="er-toast" data-toast hidden></div>
@@ -73,7 +104,9 @@ export async function renderDashboard(ctx, getIndex) {
             '/static/css/editorial-nav.css',
             '/static/css/editorial-studio.css',
             '/static/css/dashboard-mobile.css',
+            '/static/css/dashboard-desk-sections.css',
             '/static/css/dashboard-row-affordances.css',
+            '/static/css/mobile-shell.css',
         ],
         bodyAttrs: 'data-review-ui="studio"',
         bodyHtml: body,

package/dist/pages/dashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard.js","sourceRoot":"","sources":["../../src/pages/dashboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAgB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAClB,6BAA6B,GAC9B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAWxE;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe,CACnC,GAAkB,EAClB,QAA+B;IAE/B,iEAAiE;IACjE,KAAK,QAAQ,CAAC;IAEd,MAAM,IAAI,GAAG,MAAM,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACtD,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;IAE7C,MAAM,WAAW,GAAG,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC;IAC3C,MAAM,aAAa,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACxD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7C,OAAO,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,KAAK,CAAC;IAC9D,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,+DAA+D;IAC/D,8DAA8D;IAC9D,4DAA4D;IAC5D,+EAA+E;IAC/E,0BAA0B;IAC1B,MAAM,IAAI,GAAG,IAAI,CAAA;IACf,oBAAoB,CAAC,WAAW,EAAE,aAAa,CAAC;IAChD,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,WAAW,EAAE,GAAG,CAAC;;MAEtC,iBAAiB,EAAE;MACnB,MAAM,CAAC,aAAa,CAAC;MACrB,6BAA6B,EAAE;;IAEjC,mBAAmB,EAAE;;oEAE2C,CAAC;IAEnE,OAAO,MAAM,CAAC;QACZ,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE;YACR,kCAAkC;YAClC,+BAA+B;YAC/B,kCAAkC;YAClC,kCAAkC;YAClC,2CAA2C;SAC5C;QACD,SAAS,EAAE,yBAAyB;QACpC,QAAQ,EAAE,IAAI;QACd,aAAa,EAAE,CAAC,yBAAyB,CAAC;KAC3C,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,SAAS,mBAAmB;IAC1B,OAAO,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAsDP,CAAC,CAAC;AACf,CAAC"}
+{"version":3,"file":"dashboard.js","sourceRoot":"","sources":["../../src/pages/dashboard.ts"],"names":[],"mappings":"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"}

package/dist/pages/dashboard.ts

@@ -35,12 +35,16 @@ import type { StudioContext } from '../routes/api.ts';
 import { html, unsafe, type RawHtml } from './html.ts';
 import { layout } from './layout.ts';
 import { renderEditorialFolio } from './chrome.ts';
+import { renderMasthead } from './masthead.ts';
+import { renderMastheadMenu } from './masthead-menu.ts';
 import { loadDashboardData, DASHBOARD_STAGE_ORDER } from './dashboard/data.ts';
 import {
   renderStageSection,
   renderDistributionPlaceholder,
 } from './dashboard/section.ts';
 import { renderHeader, renderFilterStrip } from './dashboard/header.ts';
+import { renderShortformSection } from './dashboard/shortform-section.ts';
+import { renderAdjacentSection } from './dashboard/adjacent-section.ts';
 import type { ContentIndex } from '@deskwork/core/content-index';
 
 /**
@@ -62,7 +66,7 @@ export async function renderDashboard(
   // Touch the parameter so the unused-param check stays satisfied.
   void getIndex;
 
-  const data = await loadDashboardData(ctx.projectRoot);
+  const data = await loadDashboardData(ctx.projectRoot, ctx.config);
   const now = ctx.now ? ctx.now() : new Date();
 
   const defaultSite = ctx.config.defaultSite;
@@ -71,18 +75,51 @@ export async function renderDashboard(
     return renderStageSection(stage, bucket, defaultSite).__raw;
   }).join('\n');
 
+  // v7 architecture (Step 2.2.9 — studio-mobile-first): the Desk absorbs
+  // the Shortform-by-platform view as its second section, plus reserved
+  // Adjacent-tools placeholders for Phase 3+ Folio + Files surfaces. Per
+  // the v7 mockup at desk-states-v7.html:563, the masthead meta reads
+  // "${longformCount} longform · ${shortformCount} shortform" when any
+  // shortform workflows exist; otherwise it falls back to longform-only
+  // to avoid a misleading "0 shortform" claim.
+  const longformCount = data.entries.length;
+  const shortformCount = data.shortformWorkflows.length;
+  const mastheadMeta =
+    shortformCount > 0
+      ? `${longformCount} longform · ${shortformCount} shortform`
+      : `${longformCount} longform`;
+  const masthead = renderMasthead({
+    kicker: "The compositor's desk",
+    title: 'Pipeline + Press.',
+    metaInline: mastheadMeta,
+    isHub: true,
+  });
+
   // The press queue (right-rail on desktop) was removed in v0.19
   // per DESKWORK-STATE-MACHINE.md Commandment III — its primary
   // purpose was surfacing review-state, which is RETIRED. The
   // archive entry at docs/studio-design/ACCEPTED/2026-05-09-press-queue-removed/
   // captures the rationale.
+  const shortformSection = renderShortformSection(
+    {
+      shortformByPlatform: data.shortformByPlatform,
+      totalCount: shortformCount,
+    },
+    now,
+  );
+  const adjacentSection = renderAdjacentSection();
+
   const body = html`
+  ${masthead}
+  ${renderMastheadMenu()}
   ${renderEditorialFolio('dashboard', 'press-check')}
   ${renderHeader(data, ctx.projectRoot, now)}
   <main class="er-container">
     ${renderFilterStrip()}
     ${unsafe(stageSections)}
     ${renderDistributionPlaceholder()}
+    ${shortformSection}
+    ${adjacentSection}
   </main>
   ${renderComposeChrome()}
   <div class="er-toast" data-toast hidden></div>
@@ -95,7 +132,9 @@ export async function renderDashboard(
       '/static/css/editorial-nav.css',
       '/static/css/editorial-studio.css',
       '/static/css/dashboard-mobile.css',
+      '/static/css/dashboard-desk-sections.css',
       '/static/css/dashboard-row-affordances.css',
+      '/static/css/mobile-shell.css',
     ],
     bodyAttrs: 'data-review-ui="studio"',
     bodyHtml: body,

package/dist/pages/entry-review/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/entry-review/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AASH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAMjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAgBzD,MAAM,MAAM,sBAAsB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,YAAY,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B;oDACgD;IAChD,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC;;;mDAG+C;IAC/C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,GAAG,GAAG,GAAG,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AA2GD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,MAAM,EACf,KAAK,GAAE,gBAAqB,EAC5B,QAAQ,CAAC,EAAE,sBAAsB,GAChC,OAAO,CAAC,iBAAiB,CAAC,CA8H5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/entry-review/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AASH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAMjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAwBzD,MAAM,MAAM,sBAAsB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,YAAY,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B;oDACgD;IAChD,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC;;;mDAG+C;IAC/C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,GAAG,GAAG,GAAG,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AA2GD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,MAAM,EACf,KAAK,GAAE,gBAAqB,EAC5B,QAAQ,CAAC,EAAE,sBAAsB,GAChC,OAAO,CAAC,iBAAiB,CAAC,CAkJ5B"}