@drawnagency/primitives 0.1.80 → 0.1.81

package/src/document/styles/document.css

@@ -0,0 +1,208 @@
+/* Document artifact rendering — physical units only. This file styles the
+   artifact itself (editor canvas AND print route), so no Tailwind utilities
+   and no viewport-relative units. 11×17 tabloid landscape = 17in × 11in. */
+
+/* ---- Drawn brand fonts ---------------------------------------------- */
+/* Albra Grotesk (sans body) · Kapra Neue Expanded (uppercase labels).
+   Self-hosted, resolved relative to this file so bundlers can locate them
+   without a public root. */
+@font-face {
+  font-family: "Albra Grotesk";
+  src: url("../assets/fonts/albra-grotesk-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Albra Grotesk";
+  src: url("../assets/fonts/albra-grotesk-bold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Kapra Neue Expanded";
+  src: url("../assets/fonts/kapra-neue-expanded-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Kapra Neue Expanded";
+  src: url("../assets/fonts/kapra-neue-expanded-medium.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ---- page chrome ------------------------------------------------------ */
+
+.deck-page {
+  position: relative;
+  width: 17in;
+  height: 11in;
+  background: #fff;
+  color: #1a1a1a;
+  overflow: hidden;
+}
+
+.deck-chrome {
+  position: absolute;
+  top: 0.5in;
+  left: 0.6in;
+  right: 0.6in;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  border-bottom: 1px solid #1a1a1a;
+  padding-bottom: 0.1in;
+  z-index: 10;
+}
+
+.deck-crumb {
+  font-family: "Kapra Neue Expanded", Helvetica, Arial, sans-serif;
+  font-size: 9pt;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+/* The wordmark SVG's viewBox includes an under-swash flourish below the
+   letters' baseline. The clip wrapper truncates the glyph so the hairline
+   rule slices INTO the letter bottoms (per the reference deck): the cut
+   falls at ~viewBox y=100.5 of 154.474 (0.407 / 0.625), removing the
+   under-swash, the D's descender loop, and the rounded letter bottoms.
+   The negative margin cancels .deck-chrome's padding-bottom so the cut
+   edge lands exactly on the rule, while the breadcrumb keeps its normal
+   gap above the rule. */
+.deck-wordmark-clip {
+  height: 0.407in;
+  overflow: hidden;
+  margin-bottom: -0.1in;
+}
+
+.deck-wordmark {
+  height: 0.625in;
+  width: auto;
+  display: block;
+}
+
+.deck-body {
+  position: absolute;
+  top: 1.35in;
+  left: 0.6in;
+  right: 0.6in;
+  bottom: 0.6in;
+}
+
+/* Bleed layouts (cover) paint the whole page; chrome layers above via
+   .deck-chrome's z-index — layering only, chrome treatment is untouched. */
+.deck-bleed {
+  position: absolute;
+  inset: 0;
+}
+
+/* ---- title card (document cover) --------------------------------------- */
+
+.layout-titlecard {
+  position: absolute;
+  inset: 0;
+  color: #fff;
+}
+.layout-titlecard__masthead {
+  position: absolute;
+  top: 0.5in;
+  left: 0.6in;
+  right: 0.6in;
+  display: flex;
+  align-items: center;
+  gap: 0.3in;
+}
+.layout-titlecard__wordmark { height: 0.4in; width: auto; color: #fff; flex: none; }
+.layout-titlecard__rule { flex: 1; height: 1px; background: #fff; }
+/* Optional cover image: the band between the masthead rule (~1.1in) and the
+   title lockup (~3.2in from the page bottom). Image is 50% of the band's
+   height, natural aspect ratio, left-aligned to the content margin, its
+   center anchored at 45% of the band (top 20% + half of 50%). */
+.layout-titlecard__image {
+  position: absolute;
+  top: 1.1in;
+  bottom: 3.2in;
+  left: 0.6in;
+  right: 0.6in;
+}
+.layout-titlecard__image img {
+  position: absolute;
+  top: 20%;
+  left: 0;
+  height: 50%;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+}
+.layout-titlecard__lockup {
+  position: absolute;
+  left: 0.6in;
+  bottom: 1.1in;
+  right: 0.6in;
+}
+.layout-titlecard__title {
+  font-family: "Kapra Neue Expanded", Helvetica, Arial, sans-serif;
+  font-size: 40pt;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  margin: 0 0 0.25in;
+}
+.layout-titlecard__titlerule { display: block; width: 100%; height: 1px; margin-bottom: 0.18in; }
+.layout-titlecard__label {
+  font-family: "Kapra Neue Expanded", Helvetica, Arial, sans-serif;
+  font-size: 10pt;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin: 0;
+}
+.layout-titlecard__date {
+  font-family: "Kapra Neue Expanded", Helvetica, Arial, sans-serif;
+  font-size: 10pt;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin: 0.04in 0 0;
+}
+
+/* ---- document pages ----------------------------------------------------- */
+
+.pdoc-title {
+  font-family: "Kapra Neue Expanded", Helvetica, Arial, sans-serif;
+  font-size: 22pt;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  margin: 0;
+  height: 0.9in; /* = DOC_GEOM.titleBandIn; keep in sync */
+}
+.pdoc-text { position: absolute; }
+.pdoc-h2, .pdoc-h3 {
+  font-family: "Kapra Neue Expanded", Helvetica, Arial, sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  line-height: 1.3;
+  margin: 0;
+}
+.pdoc-h2 { font-size: 14pt; }
+.pdoc-h3 { font-size: 11pt; letter-spacing: 0.08em; }
+.pdoc-prose {
+  font-family: "Albra Grotesk", Helvetica, Arial, sans-serif;
+  font-size: 12.5pt;
+  line-height: 1.55;
+  margin: 0;
+}
+/* Self-contained prose: renders identically with or without Tailwind
+   preflight. The editor loads preflight but the /print route and the
+   hidden measurer do not, so pin every element the upstream sanitizer
+   allows to zero margins and give lists explicit markers — otherwise
+   measured heights (and page counts) diverge across surfaces. */
+.pdoc-prose :where(p, ul, ol, li, blockquote, h1, h2, h3, h4, h5, h6, pre, hr) { margin: 0; }
+.pdoc-prose ul { list-style: disc; }
+.pdoc-prose ol { list-style: decimal; }
+.pdoc-prose ul, .pdoc-prose ol { padding-left: 0.25in; }
+.pdoc-img { position: absolute; overflow: hidden; }
+.pdoc-img img { width: 100%; height: 100%; display: block; }
+.pdoc-measure { position: fixed; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }

package/src/lib/document-input.ts

@@ -0,0 +1,57 @@
+// Content adapters that turn portal content into the document engine's input
+// shape. These live in the primitives lib (outside the sealed document/ subtree)
+// so the editor (EditorShell) can reach them; primitives cannot import core, so
+// the audience-filtered viewer/presentation adapter lives in core's
+// document-route.ts and calls into this module for image mapping.
+import type { MediaManifest } from "../schemas/media";
+import type { Page } from "../schemas/site-config";
+import type { LoadedSection } from "./loader";
+import type { DocImage, DocSectionInput, DocSourceContent } from "../document";
+
+/**
+ * Map a media manifest to the engine's pre-resolved image dictionary. Port of
+ * the harness's `portalImagesFrom` against the real MediaManifest type:
+ * - only `kind === "image"` entries (videos/animated skipped);
+ * - SVGs → `original.svg` for both preview and print;
+ * - other images: previewFile = largest variant ≤ 1080 (else the smallest),
+ *   printFile = largest; images with zero variants are skipped.
+ * The manifest is already schema-parsed upstream, so no tolerant re-parse here.
+ */
+export function docImagesFrom(manifest: MediaManifest): Record<string, DocImage> {
+  const out: Record<string, DocImage> = {};
+  for (const [imageId, item] of Object.entries(manifest.images)) {
+    if (item.kind !== "image") continue;
+    if (item.mimeType === "image/svg+xml") {
+      out[imageId] = { imageId, width: item.width, height: item.height, alt: item.alt, previewFile: "original.svg", printFile: "original.svg" };
+      continue;
+    }
+    const widths = item.variants.map((v) => v.width).sort((a, b) => a - b);
+    if (widths.length === 0) continue;
+    const preview = [...widths].reverse().find((w) => w <= 1080) ?? widths[0];
+    const print = widths[widths.length - 1];
+    out[imageId] = { imageId, width: item.width, height: item.height, alt: item.alt, previewFile: `${preview}.webp`, printFile: `${print}.webp` };
+  }
+  return out;
+}
+
+function toSectionInput(s: LoadedSection): DocSectionInput {
+  return { id: s.section.id, type: s.section.type, content: s.section.content, options: s.section.options };
+}
+
+/**
+ * Editor path: build the engine's source content from the caller's already-
+ * selected page + its draft sections, verbatim. No status/audience filtering —
+ * editors see everything (the shell passes in-memory draft content).
+ */
+export function buildDraftDocumentInput(opts: {
+  page: Page;
+  sections: LoadedSection[];
+  manifest: MediaManifest;
+}): DocSourceContent {
+  const { page, sections, manifest } = opts;
+  return {
+    pageTitle: page.title,
+    sections: sections.map(toSectionInput),
+    images: docImagesFrom(manifest),
+  };
+}

package/src/lib/pages.ts

@@ -1,5 +1,9 @@
 import type { Page, SiteIndex, SectionMeta } from "../schemas/site-config";
 import { RESERVED_SLUGS } from "../schemas/site-config";
+// Sanctioned outside->inside import: document/ is a sealed subtree, but pages.ts
+// is allowed to reach into its engine to write the page-level document options
+// block (mirrors the same sanctioned import in schemas/site-config.ts).
+import { documentOptionsSchema, type DocumentOptions } from "../document/engine/settings";
 
 /**
  * Display fallback for blank page titles. addPage creates pages with an empty
@@ -96,6 +100,24 @@ export function setPageFields(
   return mapPages(index, (p) => (p.id === pageId ? { ...p, ...patch } : p));
 }
 
+export function setPageDocument(index: SiteIndex, pageId: string, patch: Partial<DocumentOptions>): SiteIndex {
+  return {
+    ...index,
+    pages: index.pages.map((p) => {
+      if (p.id !== pageId) return p;
+      const current = p.document ?? documentOptionsSchema.parse({});
+      return {
+        ...p,
+        document: documentOptionsSchema.parse({
+          ...current,
+          ...patch,
+          sections: { ...current.sections, ...(patch.sections ?? {}) },
+        }),
+      };
+    }),
+  };
+}
+
 export function setPageAudience(
   index: SiteIndex,
   pageId: string,

package/src/schemas/site-config.ts

@@ -2,6 +2,10 @@ import { z } from "zod";
 import { MediaConfigSchema } from "./media";
 import { HexColorSchema, FontNameSchema } from "./shared";
 import { CORNER_RADIUS_OPTIONS } from "../lib/corner-radius";
+// Sanctioned outside->inside import: document/ is a sealed subtree, but
+// site-config.ts is allowed to reach into its engine to wire the page-level
+// document options block onto PageSchema.
+import { documentOptionsSchema } from "../document/engine/settings";
 
 const StatusSchema = z.enum(["draft", "live", "archived", "published"]).transform(
   (val) => val === "published" ? "live" as const : val,
@@ -15,12 +19,22 @@ export const SectionMetaSchema = z.object({
 
 export type SectionMeta = z.infer<typeof SectionMetaSchema>;
 
-// Page slugs that would shadow a platform route. KEEP IN SYNC with the root and
-// /edit/* route patterns injected in packages/core/src/integration.ts — if a new
-// root-level route is added there, add its first segment here (the test in Step 1
-// guards the known set). This is the single source of truth for reserved slugs;
-// the schema, uniquePageSlug, and /api/save all import it.
-export const RESERVED_SLUGS = ["edit", "api", "login", "set-password", "404"] as const;
+// Page slugs that would shadow a platform route. KEEP IN SYNC with the root,
+// /edit/*, and /present/* route patterns injected in
+// packages/core/src/integration.ts — if a new root-level route is added there,
+// add its first segment here (the test in Step 1 guards the known set). This is
+// the single source of truth for reserved slugs; the schema, uniquePageSlug, and
+// /api/save all import it.
+export const RESERVED_SLUGS = ["edit", "api", "login", "set-password", "404", "present"] as const;
+
+// Subset of RESERVED_SLUGS the index schema hard-rejects at parse time. Only
+// slugs reserved since before client sites existed may hard-fail here: parse-
+// rejecting a newly-reserved slug would brick an already-deployed index that
+// uses it (viewer AND editor refuse to load, leaving no in-product rename
+// path). Newly reserved slugs ("present") are enforced at authoring time only —
+// PagesModal and uniquePageSlug block new uses via RESERVED_SLUGS, and the
+// injected platform route simply shadows a grandfathered page until renamed.
+const PARSE_REJECTED_SLUGS = ["edit", "api", "login", "set-password", "404"] as const;
 
 export const PageStatusSchema = z.enum(["live", "archived"]);
 
@@ -33,6 +47,7 @@ export const PageSchema = z.object({
   status: PageStatusSchema,
   access: z.array(z.string()),
   order: z.array(z.string()),
+  document: documentOptionsSchema.optional(),
 });
 
 export type Page = z.infer<typeof PageSchema>;
@@ -102,7 +117,7 @@ const CanonicalIndexSchema = z
         if (!SLUG_RE.test(p.slug)) {
           ctx.addIssue({ code: z.ZodIssueCode.custom, message: `Invalid slug "${p.slug}"` });
         }
-        if ((RESERVED_SLUGS as readonly string[]).includes(p.slug)) {
+        if ((PARSE_REJECTED_SLUGS as readonly string[]).includes(p.slug)) {
           ctx.addIssue({ code: z.ZodIssueCode.custom, message: `Slug "${p.slug}" is reserved` });
         }
       }