@deskwork/studio 0.9.5 → 0.9.6

package/dist/pages/index.ts

@@ -0,0 +1,213 @@
+/**
+ * Studio index page — `/dev/`.
+ *
+ * The title page of the studio. Reads like the table-of-contents spread
+ * of a pressed volume: roman numerals, leader dots, route paths in mono
+ * on the right (the "page numbers"). Templated routes (longform reviews,
+ * scrapbook) render their slug placeholder in red-pencil italic — they
+ * can't be linked because they require a slug, so they appear as
+ * non-link entries with the path shown.
+ *
+ * Four sections × six entries:
+ *   - Pipeline   (i.)         — Dashboard
+ *   - Review desk (ii.–iii.)  — Shortform, Longform (templated)
+ *   - Browse     (iv.–v.)     — Content view, Scrapbook (templated)
+ *   - Reference  (vi.)        — The Compositor's Manual
+ *
+ * Read-only — links to existing routes only. No editing capability here.
+ */
+
+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';
+
+interface IndexEntry {
+  /** Roman numeral display ("I", "II", …). */
+  numeral: string;
+  /** Page title. May contain HTML for italic emphasis. */
+  titleHtml: string;
+  /** Plain-text fallback for accessibility (used as link text). */
+  titleText: string;
+  /** Route path. When `template` is set, no link renders. */
+  route: string;
+  /**
+   * For templated routes (longform reviews, scrapbook), this is the
+   * placeholder text shown in red-pencil italic. The route string still
+   * shows the static prefix; the placeholder is appended.
+   */
+  template?: { prefix: string; placeholder: string };
+  /** Italic description hung below the title. */
+  desc: string;
+  /** Optional small uppercase mono hint pill. */
+  hint?: string;
+  /** Optional secondary italic line shown after the hint. */
+  postHint?: string;
+}
+
+interface IndexSection {
+  ornament: string;
+  name: string;
+  count: string;
+  entries: IndexEntry[];
+}
+
+const SECTIONS: readonly IndexSection[] = [
+  {
+    ornament: '¶',
+    name: 'Pipeline',
+    count: 'i. — 1 surface',
+    entries: [
+      {
+        numeral: 'I',
+        titleHtml: 'Dashboard',
+        titleText: 'Dashboard',
+        route: '/dev/editorial-studio',
+        desc: 'Press-check. The calendar across all sites; awaiting press; recent proofs; voice-drift signal.',
+      },
+    ],
+  },
+  {
+    ornament: '¶',
+    name: 'Review desk',
+    count: 'ii.–iii. — 2 surfaces',
+    entries: [
+      {
+        numeral: 'II',
+        titleHtml: 'Shortform reviews',
+        titleText: 'Shortform reviews',
+        route: '/dev/editorial-review-shortform',
+        desc: 'Cross-platform copy desk. Reddit, LinkedIn, YouTube, Instagram — galley slips, one per platform.',
+      },
+      {
+        numeral: 'III',
+        titleHtml: 'Longform reviews',
+        titleText: 'Longform reviews',
+        route: '/dev/editorial-review/<slug>',
+        template: { prefix: '/dev/editorial-review/', placeholder: '<slug>' },
+        desc: 'Per-entry margin notes, decisions, iterate flow.',
+        hint: 'entry-by-entry',
+        postHint: 'Reach via the Dashboard or Content view; each review is opened against a specific slug.',
+      },
+    ],
+  },
+  {
+    ornament: '¶',
+    name: 'Browse',
+    count: 'iv.–v. — 2 surfaces',
+    entries: [
+      {
+        numeral: 'IV',
+        titleHtml: 'Content view',
+        titleText: 'Content view',
+        route: '/dev/content',
+        desc: 'The shape of the work. A drillable tree of nodes; click any to read its head matter and browse its scrapbook.',
+      },
+      {
+        numeral: 'V',
+        titleHtml: 'Scrapbook',
+        titleText: 'Scrapbook',
+        route: '/dev/scrapbook/<site>/<path>',
+        template: { prefix: '/dev/scrapbook/', placeholder: '<site>/<path>' },
+        desc: 'Research, receipts, working notes. Addressed by hierarchical path; secret items appear in their own section.',
+        hint: 'path-addressed',
+        postHint: "Reach via the Content view's per-node drawer, or address directly.",
+      },
+    ],
+  },
+  {
+    ornament: '¶',
+    name: 'Reference',
+    count: 'vi. — 1 surface',
+    entries: [
+      {
+        numeral: 'VI',
+        titleHtml: "The Compositor's <em>Manual</em>",
+        titleText: "The Compositor's Manual",
+        route: '/dev/editorial-help',
+        desc: 'The workflow, the skill catalogue, the names of the things — read once, return when the work asks.',
+      },
+    ],
+  },
+];
+
+function renderEntryTitle(entry: IndexEntry): string {
+  if (entry.template) {
+    return html`<span class="er-toc-entry__title">${unsafe(entry.titleHtml)}</span>`;
+  }
+  return html`<a class="er-toc-entry__title" href="${entry.route}">${unsafe(entry.titleHtml)}</a>`;
+}
+
+function renderEntryRoute(entry: IndexEntry): string {
+  if (entry.template) {
+    return html`<span class="er-toc-entry__route is-template">${entry.template.prefix}<em>${entry.template.placeholder}</em></span>`;
+  }
+  return html`<span class="er-toc-entry__route">${entry.route}</span>`;
+}
+
+function renderEntryDesc(entry: IndexEntry): string {
+  const hint = entry.hint
+    ? html` <span class="er-toc-entry__hint">${entry.hint}</span>`
+    : '';
+  const post = entry.postHint
+    ? html` <em>${entry.postHint}</em>`
+    : '';
+  return html`<p class="er-toc-entry__desc">${entry.desc}${unsafe(hint)}${unsafe(post)}</p>`;
+}
+
+function renderEntry(entry: IndexEntry): RawHtml {
+  return unsafe(html`
+    <li class="er-toc-entry">
+      <div class="er-toc-entry__row">
+        <span class="er-toc-entry__num">${entry.numeral}</span>
+        ${unsafe(renderEntryTitle(entry))}
+        ${unsafe(renderEntryRoute(entry))}
+      </div>
+      ${unsafe(renderEntryDesc(entry))}
+    </li>`);
+}
+
+function renderSection(section: IndexSection): RawHtml {
+  return unsafe(html`
+    <section class="er-toc-section">
+      <div class="er-toc-section-head">
+        <span class="er-toc-section-head__ornament">${section.ornament}</span>
+        <span class="er-toc-section-head__name">${section.name}</span>
+        <span class="er-toc-section-head__count">${section.count}</span>
+      </div>
+      <ol class="er-toc-list">
+        ${section.entries.map(renderEntry)}
+      </ol>
+    </section>`);
+}
+
+export function renderStudioIndex(_ctx: StudioContext): string {
+  const body = html`
+    ${renderEditorialFolio('index', 'index of the press')}
+    <main class="er-toc-page">
+      <header class="er-pagehead er-pagehead--centered er-pagehead--toc">
+        <p class="er-pagehead__kicker">Index of the <em>Press</em></p>
+        <h1 class="er-pagehead__title">Editorial <em>Studio</em></h1>
+        <p class="er-pagehead__deck">
+          A reference of the dev surfaces — pipeline, review desk, browse, manual.
+          Begin where the work is.
+        </p>
+      </header>
+      ${SECTIONS.map(renderSection)}
+      <footer class="er-toc-colophon">
+        Pressed in the deskwork studio. Loopback only.<br>
+        <span class="er-toc-colophon__rule"></span>
+      </footer>
+    </main>`;
+
+  return layout({
+    title: 'Editorial Studio — Index',
+    cssHrefs: [
+      '/static/css/editorial-review.css',
+      '/static/css/editorial-nav.css',
+    ],
+    bodyAttrs: 'data-review-ui="studio"',
+    bodyHtml: body,
+    scriptModules: [],
+  });
+}

package/dist/pages/layout.ts

@@ -0,0 +1,94 @@
+/**
+ * Shared HTML shell for studio pages. Replaces audiocontrol's `<BlogLayout>`
+ * Astro component with a plain string-builder.
+ */
+
+import { escapeHtml } from './html.ts';
+
+export interface EmbeddedJson {
+  /** `id` attribute of the `<script type="application/json">` tag. */
+  id: string;
+  /** Value to JSON-stringify into the tag body. */
+  data: unknown;
+  /** Optional extra attribute (e.g. `data-rename-slugs`). */
+  attr?: string;
+}
+
+export interface LayoutOptions {
+  title: string;
+  cssHrefs: string[];
+  bodyHtml: string;
+  /**
+   * Optional attributes for the `<body>` tag itself, e.g.
+   * `data-review-ui="studio"`. Caller is responsible for any escaping
+   * inside the string — typically these are static.
+   */
+  bodyAttrs?: string;
+  /**
+   * Embed JSON payloads as `<script type="application/json" id="...">`.
+   * The client reads `document.getElementById(id).textContent` and
+   * `JSON.parse`s it for hydration.
+   */
+  embeddedJson?: ReadonlyArray<EmbeddedJson>;
+  /** Module scripts loaded after the body. */
+  scriptModules: string[];
+}
+
+export function layout(options: LayoutOptions): string {
+  const {
+    title,
+    cssHrefs,
+    bodyHtml,
+    bodyAttrs,
+    embeddedJson,
+    scriptModules,
+  } = options;
+
+  const cssTags = cssHrefs
+    .map((href) => `    <link rel="stylesheet" href="${escapeAttr(href)}">`)
+    .join('\n');
+
+  const jsonTags = (embeddedJson ?? [])
+    .map((j) => {
+      const attrPart = j.attr ? ` ${j.attr}` : '';
+      const idPart = j.id ? ` id="${escapeAttr(j.id)}"` : '';
+      return `    <script type="application/json"${idPart}${attrPart}>${escapeForScriptTag(JSON.stringify(j.data))}</script>`;
+    })
+    .join('\n');
+
+  const scriptTags = scriptModules
+    .map((src) => `    <script type="module" src="${escapeAttr(src)}"></script>`)
+    .join('\n');
+
+  const bodyOpen = bodyAttrs ? `<body ${bodyAttrs}>` : '<body>';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex">
+    <title>${escapeHtml(title)}</title>
+${cssTags}
+  </head>
+  ${bodyOpen}
+${bodyHtml}
+${jsonTags}
+${scriptTags}
+  </body>
+</html>
+`;
+}
+
+function escapeAttr(s: string): string {
+  return escapeHtml(s);
+}
+
+/**
+ * Escape a JSON payload so it's safe inside a `<script>` tag. The only
+ * sequence we need to neutralize is `</script>` (and a few defense-in-
+ * depth cousins) so the browser doesn't terminate the script element.
+ */
+function escapeForScriptTag(json: string): string {
+  return json.replace(/<\/(script|!--)/gi, '<\\/$1');
+}

package/dist/pages/review-scrapbook-drawer.ts

@@ -0,0 +1,150 @@
+/**
+ * Scrapbook drawer for the review surface — extracted from `review.ts`
+ * to keep that file under the project's 500-line guideline.
+ *
+ * Renders the IMMEDIATE node's scrapbook (no ancestors) per Phase 16c.
+ * Always visible: an empty scrapbook still renders the section so the
+ * operator sees the affordance for this node.
+ *
+ * Phase 19c+: when the calendar entry has a stable id binding AND a
+ * per-request content index is wired, resolve the on-disk scrapbook
+ * directory via the index. This makes writingcontrol-shape entries
+ * (slug != fs path) list their items at the actual file location.
+ * Falls back to slug-template addressing for unbound / legacy entries.
+ */
+
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import {
+  listScrapbook,
+  listScrapbookAtDir,
+  scrapbookDirForEntry,
+  type ScrapbookItem,
+  type ScrapbookSummary,
+} from '@deskwork/core/scrapbook';
+import { resolveContentDir } from '@deskwork/core/paths';
+import type { ContentIndex } from '@deskwork/core/content-index';
+import type { CalendarEntry } from '@deskwork/core/types';
+import type { StudioContext } from '../routes/api.ts';
+import {
+  renderEmptyScrapbookRow,
+  renderReadOnlyScrapbookRow,
+  scrapbookViewerUrl,
+  type InlineTextLoader,
+} from '../components/scrapbook-item.ts';
+import { html, unsafe, type RawHtml } from './html.ts';
+
+/**
+ * Build an inline-text loader for the shared scrapbook-item renderer.
+ * Reads at most `maxBytes` from a file inside the scrapbook directory
+ * and returns the bytes decoded as UTF-8. Returns null when the file
+ * isn't readable as text — the renderer falls back to a download link.
+ *
+ * Path resolution prefers the index-driven binding (the entry's id is
+ * looked up against the per-request content index) so writingcontrol-
+ * shape entries — slug `the-outbound`, file at
+ * `<contentDir>/projects/the-outbound/index.md` — read scrapbook items
+ * from the right on-disk directory. Falls back to the slug-template
+ * directory for entries that have no id binding yet (pre-doctor).
+ */
+function makeInlineTextLoader(
+  ctx: StudioContext,
+  site: string,
+  entry: { id?: string; slug: string } | null,
+  slug: string,
+  index?: ContentIndex,
+): InlineTextLoader {
+  const scrapbookDir = entry
+    ? scrapbookDirForEntry(ctx.projectRoot, ctx.config, site, entry, index)
+    : join(
+        resolveContentDir(ctx.projectRoot, ctx.config, site),
+        slug,
+        'scrapbook',
+      );
+  return (filename, maxBytes) => {
+    try {
+      const buf = readFileSync(join(scrapbookDir, filename));
+      const slice = buf.subarray(0, Math.min(buf.byteLength, maxBytes));
+      return slice.toString('utf-8');
+    } catch {
+      return null;
+    }
+  };
+}
+
+function renderScrapbookDrawerItems(
+  site: string,
+  slug: string,
+  items: readonly ScrapbookItem[],
+  loader: InlineTextLoader,
+): RawHtml {
+  if (items.length === 0) {
+    return renderEmptyScrapbookRow();
+  }
+  const rows = items.map((item) =>
+    renderReadOnlyScrapbookRow(
+      { site, path: slug },
+      item,
+      { inlinePreviewLoader: loader },
+    ),
+  );
+  return unsafe(rows.map((r) => r.__raw).join(''));
+}
+
+export function renderScrapbookDrawer(
+  ctx: StudioContext,
+  site: string,
+  entry: CalendarEntry | null,
+  slug: string,
+  index?: ContentIndex,
+): RawHtml {
+  const summary: ScrapbookSummary | null = (() => {
+    try {
+      if (entry !== null && entry.id !== undefined && entry.id !== '') {
+        const scrapbookDir = scrapbookDirForEntry(
+          ctx.projectRoot,
+          ctx.config,
+          site,
+          entry,
+          index,
+        );
+        return listScrapbookAtDir(site, entry.slug, scrapbookDir);
+      }
+      return listScrapbook(ctx.projectRoot, ctx.config, site, slug);
+    } catch {
+      // listScrapbook validates the slug; an invalid slug shouldn't
+      // tank the whole review page. Treat as empty drawer + log via
+      // the unobtrusive empty state.
+      return null;
+    }
+  })();
+
+  const items = summary?.items ?? [];
+  const secretItems = summary?.secretItems ?? [];
+  const total = items.length + secretItems.length;
+  const loader = makeInlineTextLoader(ctx, site, entry, slug, index);
+
+  return unsafe(html`
+    <aside class="er-scrapbook-drawer" data-scrapbook-drawer aria-label="Scrapbook for this entry">
+      <header class="er-scrapbook-drawer-head">
+        <span class="er-scrapbook-drawer-kicker">§ Scrapbook</span>
+        <span class="er-scrapbook-drawer-count">${total} ${total === 1 ? 'item' : 'items'}</span>
+        <a class="er-scrapbook-drawer-open" href="${scrapbookViewerUrl({ site, path: slug })}"
+          title="Open the standalone scrapbook viewer">open ↗</a>
+      </header>
+      <div class="er-scrapbook-drawer-body">
+        ${renderScrapbookDrawerItems(site, slug, items, loader)}
+        ${
+          secretItems.length > 0
+            ? unsafe(html`
+                <div class="er-scrapbook-drawer-secret">
+                  <p class="er-scrapbook-drawer-secret-head">
+                    <span aria-hidden="true">⚿</span> secret · ${secretItems.length}
+                  </p>
+                  ${renderScrapbookDrawerItems(site, slug, secretItems, loader)}
+                </div>`)
+            : ''
+        }
+      </div>
+    </aside>`);
+}