@1agh/maude 0.45.1 → 0.46.0

package/apps/studio/client/app.jsx

@@ -12,6 +12,10 @@ import { createRoot } from 'react-dom/client';
 // import that Bun erases), so this pulls only string constants into the client
 // bundle — no React, no input-router. See the tool-cursor handler below.
 import { resolveToolCursor } from '../canvas-cursors.ts';
+// feature-2-print-artboards T2 — the single source (print/units.ts) for the
+// Inspector's paper-preset picker, same "pull only pure math/data" shape as
+// canvas-cursors.ts above.
+import { PAPER_PRESETS, resolvePrintArtboard } from '../print/units.ts';
 import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 import { canvasUrl } from './canvas-url.js';
 import ChatPanel from './panels/ChatPanel.jsx';
@@ -29,7 +33,7 @@ import GenerateDialog from './generate-dialog.jsx';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
 import SettingsPanel from './panels/SettingsPanel.jsx';
 import StickerPicker from './panels/StickerPicker.jsx';
-import { AlignPad, AngleDial, ColorField, IconButtonGroup, IconToggleGroup, makeScrubHandler, NumberField, RadiusControl, Segmented, SliderField, Toggle, UnitSelect, ValueTokenField } from './inspector-controls.jsx';
+import { AlignPad, AngleDial, ColorField, IconButtonGroup, IconToggleGroup, makeScrubHandler, NumberField, RadiusControl, Segmented, Select, SliderField, Toggle, UnitSelect, ValueTokenField } from './inspector-controls.jsx';
 import {
   ALargeSmall as LuALargeSmall,
   AlignCenter as LuAlignCenter,
@@ -960,6 +964,37 @@ const PNG_SCALES = [
   { value: 3, label: '3× (max)' },
 ];
 
+// feature-2-print-artboards T6 — the PNG card's resolution picker folds the
+// legacy 1×/2×/3× multiplier and the new physical-DPI ladder (T4) into ONE
+// select: `kind:'scale'` entries send `options.scale`, `kind:'dpi'` entries
+// send `options.dpi` (exporters/png.ts resolveDeviceScale — dpi wins over
+// scale when both could apply). Default stays 2× (unchanged UX for anyone
+// not exporting for print).
+const PNG_RESOLUTIONS = [
+  { id: '1x', label: '1× (native)', kind: 'scale', value: 1 },
+  { id: '2x', label: '2× (retina)', kind: 'scale', value: 2 },
+  { id: '3x', label: '3× (max)', kind: 'scale', value: 3 },
+  { id: 'dpi150', label: '150 dpi', kind: 'dpi', value: 150 },
+  { id: 'dpi300', label: '300 dpi (print)', kind: 'dpi', value: 300 },
+  { id: 'dpi600', label: '600 dpi (high-res print)', kind: 'dpi', value: 600 },
+];
+const PNG_RESOLUTION_DEFAULT = '2x';
+
+// feature-2-print-artboards T5/T6 (dogfood follow-up) — the PDF page itself
+// is always vector (text/shapes never rasterize), but any RASTER content ON
+// the artboard — a dropped photo, a large-format piece authored at a
+// fraction of its real physical size (e.g. a billboard at 1:10 scale) —
+// still embeds as a bitmap whose density this controls. Default "Auto (1×)"
+// is today's unchanged behavior; PDF has no legacy scale concept, so unlike
+// PNG_RESOLUTIONS this is DPI-only.
+const PDF_DPI_OPTIONS = [
+  { id: 'auto', label: 'Auto (1×)', value: undefined },
+  { id: 'dpi150', label: '150 dpi', value: 150 },
+  { id: 'dpi300', label: '300 dpi (print)', value: 300 },
+  { id: 'dpi600', label: '600 dpi (high-res print)', value: 600 },
+];
+const PDF_DPI_DEFAULT = 'auto';
+
 // feature-bulk-media-insert — best-effort MIME guess from a filename extension.
 // Only used to classify a natively-picked file (Rust returns `{name, bytes}`,
 // no type) for the destination-toggle's image/video/audio split; the actual
@@ -1288,6 +1323,18 @@ function ExportDialog({
     initialScope && EXPORT_SCOPE_LABELS[initialScope] ? initialScope : 'artboard'
   );
   const [scale, setScale] = useState(2);
+  // feature-2-print-artboards T4/T6 — PNG resolution (folds scale + dpi, see
+  // PNG_RESOLUTIONS above).
+  const [pngResId, setPngResId] = useState(PNG_RESOLUTION_DEFAULT);
+  // feature-2-print-artboards T5/T6 — PDF print options. Sent unconditionally
+  // on every PDF export; the server no-ops them for a non-print artboard (no
+  // `print` JSX prop → applyPrintBoxesAndMarks never runs), so there's no
+  // need to detect the artboard's kind client-side before showing these.
+  const [pdfIncludeBleed, setPdfIncludeBleed] = useState(true);
+  const [pdfMarksOpen, setPdfMarksOpen] = useState(false);
+  const [pdfMarksCrop, setPdfMarksCrop] = useState(false);
+  const [pdfMarksRegistration, setPdfMarksRegistration] = useState(false);
+  const [pdfDpiId, setPdfDpiId] = useState(PDF_DPI_DEFAULT);
   // DDR-148 addendum — mp4/webm of a registered video-comp render through
   // renderMediaOnWeb, which produces real audio (Remotion owns the
   // TransitionSeries/volume-closure timeline). gif has no audio track at all
@@ -1338,12 +1385,31 @@ function ExportDialog({
     }
     setBusy(true);
     setStatus(null);
-    // `scale` drives PNG size AND video resolution (deviceScaleFactor → encoder
-    // dims); temporal formats were previously fixed at the tiny native size.
-    const options = card.format === 'png' || card.temporal ? { scale } : {};
+    // `scale` drives video resolution (deviceScaleFactor → encoder dims);
+    // temporal formats were previously fixed at the tiny native size. PNG's
+    // resolution now comes from pngResId (T4/T6 — scale OR dpi).
+    const options = card.temporal ? { scale } : {};
+    if (card.format === 'png') {
+      const res = PNG_RESOLUTIONS.find((r) => r.id === pngResId) || PNG_RESOLUTIONS[1];
+      if (res.kind === 'dpi') options.dpi = res.value;
+      else options.scale = res.value;
+    }
     // Export-with-audio (DDR-148 addendum) — mp4/webm only; gif is silent by
     // format, so the checkbox never renders for it (see hasAudioToggle below).
     if (card.format === 'mp4' || card.format === 'webm') options.audio = audio;
+    // feature-2-print-artboards T5/T6 — always sent on a PDF export; the
+    // adapter no-ops includeBleed/marks for a non-print artboard (T5).
+    if (card.format === 'pdf') {
+      options.pdfPrint = {
+        includeBleed: pdfIncludeBleed,
+        marks: { crop: pdfMarksCrop, registration: pdfMarksRegistration },
+      };
+      // Dogfood follow-up — raster CONTENT on the artboard (a dropped photo,
+      // large-format art) still needs a real capture density; the page
+      // itself stays vector regardless of this.
+      const pdfDpi = PDF_DPI_OPTIONS.find((d) => d.id === pdfDpiId)?.value;
+      if (pdfDpi !== undefined) options.dpi = pdfDpi;
+    }
     // Scope targeting hints (resolveScope reads these): `artboardId` makes
     // "Active artboard" export the right screen instead of `:first-of-type`;
     // `selection` makes "Current selection" export the selected element. Mirrors
@@ -1428,14 +1494,42 @@ function ExportDialog({
               </select>
             </div>
           )}
-          {!card.handoff && (card.format === 'png' || card.temporal) && (
+          {!card.handoff && card.format === 'png' && (
             <div className="st-dialog-row">
               <label className="st-dialog-lbl" htmlFor="st-export-size">
-                {card.temporal ? 'Resolution' : 'Size'}
+                Resolution
               </label>
               <select
                 id="st-export-size"
                 className="st-select"
+                value={pngResId}
+                onChange={(e) => setPngResId(e.target.value)}
+              >
+                {PNG_RESOLUTIONS.map((r) => (
+                  <option key={r.id} value={r.id}>
+                    {r.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          {!card.handoff && card.format === 'png' && (
+            <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+              {(() => {
+                const res = PNG_RESOLUTIONS.find((r) => r.id === pngResId) || PNG_RESOLUTIONS[1];
+                const factor = res.kind === 'dpi' ? res.value / 96 : res.value;
+                return `${res.label} ≈ ${Math.round(1440 * factor)}×${Math.round(900 * factor)} for a 1440×900 artboard.`;
+              })()}
+            </div>
+          )}
+          {!card.handoff && card.temporal && (
+            <div className="st-dialog-row">
+              <label className="st-dialog-lbl" htmlFor="st-export-temporal-size">
+                Resolution
+              </label>
+              <select
+                id="st-export-temporal-size"
+                className="st-select"
                 value={scale}
                 onChange={(e) => setScale(Number(e.target.value))}
               >
@@ -1447,16 +1541,86 @@ function ExportDialog({
               </select>
             </div>
           )}
-          {!card.handoff && card.format === 'png' && (
-            <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
-              Resolution multiplier — {scale}× ≈ {1440 * scale}×{900 * scale} for a 1440×900 artboard.
-            </div>
-          )}
           {!card.handoff && card.temporal && (
             <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
               {scale}× the artboard's native resolution (e.g. 960×540 → {960 * scale}×{540 * scale}).
             </div>
           )}
+          {!card.handoff && card.format === 'pdf' && (
+            <>
+              <div className="st-dialog-row">
+                <label className="st-dialog-lbl" htmlFor="st-export-pdf-dpi">
+                  Image quality
+                </label>
+                <select
+                  id="st-export-pdf-dpi"
+                  className="st-select"
+                  value={pdfDpiId}
+                  onChange={(e) => setPdfDpiId(e.target.value)}
+                >
+                  {PDF_DPI_OPTIONS.map((d) => (
+                    <option key={d.id} value={d.id}>
+                      {d.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+                The page stays vector; this only sets the capture density for raster content on it
+                (dropped photos, large-format art).
+              </div>
+              <div className="st-dialog-row">
+                <label
+                  className="st-dialog-lbl"
+                  htmlFor="st-export-pdf-bleed"
+                  style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}
+                >
+                  <input
+                    id="st-export-pdf-bleed"
+                    type="checkbox"
+                    checked={pdfIncludeBleed}
+                    onChange={(e) => setPdfIncludeBleed(e.target.checked)}
+                  />
+                  Include bleed
+                </label>
+              </div>
+              <div className="st-dialog-row">
+                <button
+                  type="button"
+                  className="st-dialog-lbl"
+                  style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer' }}
+                  onClick={() => setPdfMarksOpen((v) => !v)}
+                  aria-expanded={pdfMarksOpen}
+                >
+                  {pdfMarksOpen ? '▾' : '▸'} Marks
+                </button>
+              </div>
+              {pdfMarksOpen && (
+                <div style={{ padding: '0 12px 4px', display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 12 }}>
+                    <input
+                      type="checkbox"
+                      checked={pdfMarksCrop}
+                      onChange={(e) => setPdfMarksCrop(e.target.checked)}
+                    />
+                    Crop marks
+                  </label>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 12 }}>
+                    <input
+                      type="checkbox"
+                      checked={pdfMarksRegistration}
+                      onChange={(e) => setPdfMarksRegistration(e.target.checked)}
+                    />
+                    Registration marks
+                  </label>
+                </div>
+              )}
+              <div className="st-mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
+                Bleed and marks apply to print (<code>kind="print"</code>) artboards only.
+                {scope === 'canvas-as-separate' ? ' One PDF page per artboard.' : ''}
+              </div>
+            </>
+          )}
           {!card.handoff && (card.format === 'mp4' || card.format === 'webm') && (
             <div className="st-dialog-row">
               <label
@@ -2933,6 +3097,11 @@ function EditDropdown({ onAction, onClose, hasCanvas }) {
               { id: 'new-artboard:laptop', label: 'New artboard: Laptop' },
               { id: 'new-artboard:tablet', label: 'New artboard: Tablet' },
               { id: 'new-artboard:mobile', label: 'New artboard: Mobile' },
+              // feature-2-print-artboards T2 — "+ Artboard" quick-insert must
+              // set kind="print" + the print prop together (the plan's own
+              // gotcha for this task), not just a plain digital-sized board.
+              { id: 'new-artboard:print-a4', label: 'New artboard: A4 (print)' },
+              { id: 'new-artboard:print-letter', label: 'New artboard: Letter (print)' },
             ]
           : []),
       ]}
@@ -2968,6 +3137,8 @@ function Menubar({
   onToggleZoomCtl,
   presentMode,
   onTogglePresent,
+  printGuidesVisible,
+  onTogglePrintGuides,
   postToActiveCanvas,
   onOpenWhatsNew,
   onOpenReadiness,
@@ -3105,6 +3276,18 @@ function Menubar({
       checked: presentMode,
       disabled: !activePath || isSystem,
     },
+    // feature-2-print-artboards T3 — per-canvas persisted (overlays.print in
+    // view.json), same lane as the foundation's `guides` key; NOT gated on the
+    // active artboard actually being kind="print" (mirrors minimap/zoomctl,
+    // which aren't content-gated either — the overlay itself renders nothing
+    // for a non-print artboard regardless of this flag).
+    {
+      id: 'print-guides',
+      label: 'Show print guides',
+      shortcut: '',
+      checked: printGuidesVisible,
+      disabled: !activePath || isSystem,
+    },
   ];
 
   const DROPDOWN_MENUS = ['file', 'edit', 'view', 'selection', 'tools', 'help'];
@@ -3242,6 +3425,7 @@ function Menubar({
             else if (id === 'minimap') onToggleMinimap?.();
             else if (id === 'zoomctl') onToggleZoomCtl?.();
             else if (id === 'present') onTogglePresent?.();
+            else if (id === 'print-guides') onTogglePrintGuides?.();
           }}
           onZoom={(op) => postToActiveCanvas({ dgn: 'zoom', op })}
           hasCanvas={!!activePath && !isSystem}
@@ -4324,6 +4508,43 @@ function cssSplitUnit(v) {
 // click re-derives it live — the "tab is there, then it's gone" flicker.
 function mergeSelClientFields(incoming, prev) {
   if (!incoming || Array.isArray(incoming) || Array.isArray(prev) || !prev) return incoming;
+  // Dogfood follow-up (print artboards) — a whole-ARTBOARD selection has NO
+  // data-cd-id (the frame chrome carries only data-dc-screen), so the id
+  // identity check below never matched it and every server echo returned
+  // `incoming` bare — wiping `attrs` (which carries data-dc-kind/-print for
+  // the ArtboardKnobs panel) seconds after each fresh click. The panel then
+  // silently fell back to kind='digital' + screen presets even though the
+  // artboard was print. Match an id-less pair by the artboard-shaped
+  // SELECTOR + file — NOT by artboardId: the server projection
+  // (inspect.ts `enrich()`) doesn't round-trip `artboardId` at all, so an
+  // artboardId comparison always sees undefined on the echo side and never
+  // matches (the second-round bug on this exact spot). The selector IS the
+  // identity here — `[data-dc-screen="<id>"]` — and enrich() preserves it.
+  if (!incoming.id && !prev.id) {
+    const isArtboardSel = (s) =>
+      typeof s.selector === 'string' && s.selector.startsWith('[data-dc-screen=');
+    if (
+      isArtboardSel(incoming) &&
+      isArtboardSel(prev) &&
+      incoming.selector === prev.selector &&
+      incoming.file === prev.file
+    ) {
+      return {
+        ...incoming,
+        authored: incoming.authored ?? prev.authored,
+        computed: incoming.computed ?? prev.computed,
+        customStyles: incoming.customStyles ?? prev.customStyles,
+        attrs: incoming.attrs ?? prev.attrs,
+        // enrich() drops artboardId/worldW/worldH from the echo entirely —
+        // restore them from the local snapshot so ArtboardKnobs keeps its
+        // exact W/H and the resize/kind writers keep their target id.
+        artboardId: incoming.artboardId ?? prev.artboardId,
+        worldW: incoming.worldW ?? prev.worldW,
+        worldH: incoming.worldH ?? prev.worldH,
+      };
+    }
+    return incoming;
+  }
   if (!incoming.id || incoming.id !== prev.id) return incoming;
   return {
     ...incoming,
@@ -6760,8 +6981,52 @@ const ARTBOARD_LAYOUT_OPTIONS = [
   ['grid', 'Grid'],
 ];
 
-function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardStyle }) {
+// feature-1-artboard-kinds-foundation, T8 — kind picker options. Order
+// mirrors the DCArtboard `kind` union; 'digital' is the implicit default
+// (writes `kind: null`, clearing the explicit prop, per applySetArtboardKind).
+const ARTBOARD_KIND_OPTIONS = [
+  ['digital', 'Digital'],
+  ['print', 'Print'],
+  ['web', 'Web'],
+  ['video', 'Video'],
+];
+
+function ArtboardKnobs({
+  el,
+  cfg,
+  onResizeArtboard,
+  onSetArtboardHug,
+  onSetArtboardStyle,
+  onSetArtboardKind,
+  onSetArtboardPrint,
+}) {
   const artboardId = resolveArtboardIdFromSelection(el);
+  // Dogfood (artboard panel ↔ shared inspector controls) — the panel now uses
+  // the SAME control library + design-token plumbing as CssKnobs (NumberField
+  // / Segmented / Select / ColorField+TokenPopover / ValueTokenField), so Bg
+  // binds color variables and Pad/Gap bind space variables exactly like any
+  // CSS-panel row. Token resolution mirrors CssKnobs' own tokenGroups/
+  // flatTokens closures over useAllDsTokens.
+  const _designRel = (cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '');
+  const _activeDs = activeDsNameFor(el.file, cfg);
+  const allDs = useAllDsTokens(cfg, _designRel, _activeDs);
+  const tokenGroups = (familyKey) =>
+    allDs
+      .map((d) => ({ ds: d.name, names: d[familyKey] || [], vals: d.vals }))
+      .filter((g) => g.names.length);
+  const flatTokens = (familyKey) =>
+    tokenGroups(familyKey).flatMap((g) => (g.names || []).map((n) => ({ name: n, value: g.vals?.[n] || '' })));
+  // Resolve a `var(--x)` binding to its concrete value across every DS (for
+  // the Bg swatch color); a raw value passes through.
+  const resolveTokenValue = (v) => {
+    const m = /^var\(\s*(--[\w-]+)\s*\)$/.exec(v || '');
+    if (!m) return v || '';
+    for (const d of allDs) {
+      const val = d.vals?.[m[1]];
+      if (val) return val;
+    }
+    return '';
+  };
   // Dogfood 2026-07-07 (round 2) — `worldW`/`worldH` (zoom-independent) are
   // undefined for a selection that reached here via a code path predating
   // that field (a canvas iframe that hasn't remounted since); fall back to
@@ -6798,6 +7063,63 @@ function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardSt
   const padding = el.attrs?.['data-dc-padding'] ?? '';
   const layoutMode = el.attrs?.['data-dc-layout'] ?? '';
   const gap = el.attrs?.['data-dc-gap'] ?? '';
+  // T8 — `data-dc-kind` is DCArtboard's RESOLVED kind (readBackAttrs always
+  // emits it, unlike the optional-override attrs above — see T1's comment on
+  // why), so this reads 'digital' even for an implicit/unmigrated artboard.
+  const kind = el.attrs?.['data-dc-kind'] || 'digital';
+  // feature-2-print-artboards T2 — paper/orientation/bleed. Read-back mirrors
+  // `data-dc-kind` above: a small JSON attr DCArtboard stamps for exactly this
+  // panel (canvas-lib.tsx readBackAttrs), since `print` (unlike bg/padding/…)
+  // is object-valued, not a scalar.
+  let print = null;
+  try {
+    print = el.attrs?.['data-dc-print'] ? JSON.parse(el.attrs['data-dc-print']) : null;
+  } catch {
+    /* malformed attr — treat as absent */
+  }
+  const setKind = (nextKind) => {
+    if (!artboardId) return;
+    // Picking "Digital" clears the explicit prop back to the implicit
+    // default (applySetArtboardKind's `kind: null` path) rather than writing
+    // a redundant `kind="digital"`.
+    onSetArtboardKind?.(artboardId, nextKind === 'digital' ? null : nextKind);
+    // Dogfood fix — switching TO "print" with no print prop yet left the
+    // artboard in a half-configured state: the guides overlay renders
+    // nothing (print-overlay-content.tsx requires the prop) and the PDF
+    // exporter has no bleed to read, even though the Kind chip already
+    // shows "print". Seed a default A4 print prop + its resolved px size in
+    // the SAME gesture, mirroring the "+ Artboard: print preset" flow —
+    // switching a DIGITAL artboard to print should never require a second,
+    // easy-to-miss step in the (still-collapsed) Print section below.
+    if (nextKind === 'print' && !print) {
+      const defaults = { paper: 'a4' };
+      let resolved;
+      try {
+        resolved = resolvePrintArtboard(defaults);
+      } catch {
+        resolved = null;
+      }
+      if (resolved) {
+        onResizeArtboard?.(artboardId, resolved.widthPx, resolved.heightPx);
+        onSetArtboardPrint?.(artboardId, defaults);
+      }
+    }
+  };
+  const setPrint = (patch) => {
+    if (!artboardId) return;
+    const next = { paper: 'a4', ...print, ...patch };
+    let resolved;
+    try {
+      resolved = resolvePrintArtboard(next);
+    } catch {
+      return; // unknown paper id — ignore rather than write garbage
+    }
+    // Design Decision 2 — the picker writes BOTH the resolved px size (via
+    // the existing resize lane, DDR-027) and the `print` intent prop, in the
+    // same gesture, so geometry and intent never drift apart.
+    onResizeArtboard?.(artboardId, resolved.widthPx, resolved.heightPx);
+    onSetArtboardPrint?.(artboardId, next);
+  };
   const setHug = (nextFixed) => {
     if (!artboardId) return;
     const freezeHeight = nextFixed && Number.isFinite(h) ? Math.round(h) : undefined;
@@ -6813,162 +7135,196 @@ function ArtboardKnobs({ el, onResizeArtboard, onSetArtboardHug, onSetArtboardSt
         <span className="st-cp-sechd">Artboard</span>
       </div>
       <div style={{ display: 'flex', gap: 8, padding: '4px 12px' }}>
-        <div className="st-cp-num">
-          <span className="st-cp-numlead" aria-hidden="true">
-            W
-          </span>
-          <input
-            className="st-cp-numin"
-            type="number"
-            min="1"
-            aria-label="artboard width"
-            key={`w:${w ?? ''}`}
-            defaultValue={w ?? ''}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') e.currentTarget.blur();
-            }}
-            onBlur={(e) => commitSize(Number.parseFloat(e.currentTarget.value), null)}
-          />
-        </div>
-        <div className="st-cp-num">
-          <span className="st-cp-numlead" aria-hidden="true">
-            H
-          </span>
-          <input
-            className="st-cp-numin"
-            type="number"
-            min="1"
-            aria-label="artboard height"
-            readOnly={!fixed}
-            title={fixed ? undefined : 'Hug — grows to fit content. Switch to Fixed to set an exact height.'}
-            key={`h:${h ?? ''}:${fixed}`}
-            defaultValue={h ?? ''}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') e.currentTarget.blur();
-            }}
-            onBlur={(e) => {
-              if (!fixed) return;
-              commitSize(null, Number.parseFloat(e.currentTarget.value));
-            }}
-          />
-        </div>
+        <NumberField
+          value={w ?? 0}
+          min={1}
+          ariaLabel="artboard width"
+          lead="W"
+          steppers={false}
+          onCommit={(n) => commitSize(n, null)}
+        />
+        <NumberField
+          value={h ?? 0}
+          min={1}
+          ariaLabel="artboard height"
+          lead="H"
+          steppers={false}
+          scrub={fixed}
+          onCommit={(n) => {
+            // Hug — height is content-driven; ignore a typed value rather
+            // than silently switching modes.
+            if (fixed) commitSize(null, n);
+          }}
+        />
       </div>
       <div style={{ padding: '0 12px 8px' }}>
-        <select
-          className="st-cp-nsel"
-          aria-label="artboard size preset"
-          value={activePreset ?? ''}
-          onChange={(e) => {
-            const p = SCREEN_PRESETS[e.currentTarget.value];
-            if (p) commitSize(p.width, p.height);
-          }}
-        >
-          <option value="" disabled>
-            {activePreset ? SCREEN_PRESETS[activePreset].label : 'Preset size…'}
-          </option>
-          {Object.entries(SCREEN_PRESETS).map(([key, p]) => (
-            <option key={key} value={key}>
-              {p.label} — {p.width}×{p.height}
+        {kind === 'print' ? (
+          // Dogfood follow-up — a PRINT artboard's "Preset size…" dropdown
+          // showed only the screen presets (Desktop/Laptop/Tablet/Mobile),
+          // which are meaningless for paper. Show the paper ladder here
+          // instead, writing through the SAME setPrint lane as the Print
+          // section below (resolved px + print prop together).
+          <select
+            className="st-cp-nsel"
+            aria-label="artboard paper preset"
+            value={print?.paper ?? ''}
+            onChange={(e) => setPrint({ paper: e.currentTarget.value })}
+          >
+            <option value="" disabled>
+              Paper size…
             </option>
-          ))}
-        </select>
+            {PAPER_PRESETS.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.label} — {p.width}×{p.height}
+                {p.unit}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <select
+            className="st-cp-nsel"
+            aria-label="artboard size preset"
+            value={activePreset ?? ''}
+            onChange={(e) => {
+              const p = SCREEN_PRESETS[e.currentTarget.value];
+              if (p) commitSize(p.width, p.height);
+            }}
+          >
+            <option value="" disabled>
+              {activePreset ? SCREEN_PRESETS[activePreset].label : 'Preset size…'}
+            </option>
+            {Object.entries(SCREEN_PRESETS).map(([key, p]) => (
+              <option key={key} value={key}>
+                {p.label} — {p.width}×{p.height}
+              </option>
+            ))}
+          </select>
+        )}
       </div>
       <div style={{ padding: '0 12px 8px' }}>
-        <div className="st-cp-modeseg" role="group" aria-label="artboard height sizing mode">
-          <span className="st-cp-modeax" aria-hidden="true">
-            H
-          </span>
-          {[
-            [false, 'Hug'],
-            [true, 'Fixed'],
-          ].map(([val, label]) => (
-            <button
-              key={label}
-              type="button"
-              className={`st-cp-modebtn${fixed === val ? ' is-active' : ''}`}
-              aria-pressed={fixed === val}
-              onClick={() => setHug(val)}
-              title={`${label} height`}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
+        <Segmented
+          value={fixed ? 'fixed' : 'hug'}
+          ariaLabel="artboard height sizing mode"
+          options={[
+            { value: 'hug', label: 'Hug' },
+            { value: 'fixed', label: 'Fixed' },
+          ]}
+          onChange={(v) => setHug(v === 'fixed')}
+        />
       </div>
       <div className="st-cp-sechd-row">
-        <span className="st-cp-sechd">Style</span>
+        <span className="st-cp-sechd">Kind</span>
       </div>
-      <div style={{ padding: '4px 12px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-        <div className="st-cp-num" style={{ width: '100%' }}>
-          <span className="st-cp-numlead" aria-hidden="true">
-            Bg
-          </span>
-          <input
-            className="st-cp-numin"
-            type="text"
-            aria-label="artboard background"
-            placeholder="var(--bg-1)"
-            key={`bg:${bg}`}
-            defaultValue={bg}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') e.currentTarget.blur();
-            }}
-            onBlur={(e) => commitStyle({ background: e.currentTarget.value.trim() || null })}
-          />
-        </div>
-        <select
-          className="st-cp-nsel"
-          aria-label="artboard body layout"
-          value={layoutMode}
-          onChange={(e) => commitStyle({ layout: e.currentTarget.value || null })}
-        >
-          {ARTBOARD_LAYOUT_OPTIONS.map(([val, label]) => (
-            <option key={val} value={val}>
-              {label}
-            </option>
-          ))}
-        </select>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <div className="st-cp-num">
-            <span className="st-cp-numlead" aria-hidden="true">
-              Pad
-            </span>
-            <input
-              className="st-cp-numin"
-              type="number"
-              min="0"
-              aria-label="artboard padding"
-              key={`pad:${padding}`}
-              defaultValue={padding}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') e.currentTarget.blur();
-              }}
-              onBlur={(e) => {
-                const v = e.currentTarget.value;
-                commitStyle({ padding: v === '' ? null : Number.parseFloat(v) });
-              }}
+      <div style={{ padding: '0 12px 8px' }}>
+        <Select
+          value={kind}
+          ariaLabel="artboard kind"
+          options={ARTBOARD_KIND_OPTIONS.map(([value, label]) => ({ value, label }))}
+          onChange={setKind}
+        />
+      </div>
+      {kind === 'print' ? (
+        <>
+          <div className="st-cp-sechd-row">
+            <span className="st-cp-sechd">Print</span>
+          </div>
+          {/* Paper picker lives in the Artboard section's own preset dropdown
+              above (it REPLACES the screen presets for kind="print") — this
+              section carries the print-specific residue: orientation + bleed. */}
+          <div style={{ padding: '0 12px 8px' }}>
+            <Segmented
+              value={print?.orientation ?? 'portrait'}
+              ariaLabel="paper orientation"
+              options={[
+                { value: 'portrait', label: 'Portrait' },
+                { value: 'landscape', label: 'Landscape' },
+              ]}
+              onChange={(v) => setPrint({ orientation: v })}
             />
           </div>
-          <div className="st-cp-num">
-            <span className="st-cp-numlead" aria-hidden="true">
-              Gap
-            </span>
-            <input
-              className="st-cp-numin"
-              type="number"
-              min="0"
-              aria-label="artboard gap"
-              key={`gap:${gap}`}
-              defaultValue={gap}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') e.currentTarget.blur();
-              }}
-              onBlur={(e) => {
-                const v = e.currentTarget.value;
-                commitStyle({ gap: v === '' ? null : Number.parseFloat(v) });
-              }}
+          <div style={{ padding: '0 12px 8px' }}>
+            <NumberField
+              value={Number.isFinite(print?.bleedMm) ? print.bleedMm : 3}
+              min={0}
+              step={0.5}
+              ariaLabel="bleed, millimeters"
+              // Single-glyph lead — the drag-handle slot is sized for 1–2
+              // chars ("W"/"Pad"); a full word clips. mm suffix + aria carry
+              // the meaning.
+              lead="B"
+              steppers={false}
+              unitSlot={
+                <span className="st-cp-numsuffix" aria-hidden="true">
+                  mm
+                </span>
+              }
+              onCommit={(n) => setPrint({ bleedMm: n })}
             />
           </div>
+        </>
+      ) : null}
+      <div className="st-cp-sechd-row">
+        <span className="st-cp-sechd">Style</span>
+      </div>
+      <div style={{ padding: '4px 12px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {(() => {
+          // Bg — the CssKnobs `color()` recipe: TokenPopover swatch as the
+          // flush prefix inside ColorField (HSV picker + per-DS variables).
+          const bgResolved = resolveTokenValue(bg);
+          const bgBound = /var\(\s*--/.test(bg);
+          const bgDisplay = bgBound
+            ? bg.replace(/^var\(\s*|\s*\)$/g, '').replace(/^--/, '').replace(/-/g, ' ')
+            : bg;
+          return (
+            <ColorField
+              swatch={
+                <TokenPopover
+                  kind="color"
+                  swatchClassName="st-cp-cf-sw"
+                  groups={tokenGroups('color')}
+                  current={bg}
+                  activeDs={_activeDs}
+                  swatchBg={bgResolved}
+                  seedHex={cssColorToHex(bgResolved) || '#000000'}
+                  onPick={(v) => commitStyle({ background: v || null })}
+                  label="artboard background colour"
+                />
+              }
+              displayValue={bgDisplay}
+              bound={bgBound}
+              ariaLabel="artboard background"
+              onValue={(v) => commitStyle({ background: (v || '').trim() || null })}
+            />
+          );
+        })()}
+        <Select
+          value={layoutMode}
+          ariaLabel="artboard body layout"
+          options={ARTBOARD_LAYOUT_OPTIONS.map(([value, label]) => ({
+            value,
+            label,
+          }))}
+          onChange={(v) => commitStyle({ layout: v || null })}
+        />
+        <div style={{ display: 'flex', gap: 8 }}>
+          <ValueTokenField
+            value={/^var\(/.test(padding) ? padding : Number.parseFloat(padding) || 0}
+            tokens={flatTokens('space')}
+            ariaLabel="artboard padding"
+            lead="Pad"
+            min={0}
+            onChange={(v) =>
+              commitStyle({ padding: typeof v === 'string' ? v : v > 0 ? v : null })
+            }
+          />
+          <ValueTokenField
+            value={/^var\(/.test(gap) ? gap : Number.parseFloat(gap) || 0}
+            tokens={flatTokens('space')}
+            ariaLabel="artboard gap"
+            lead="Gap"
+            min={0}
+            onChange={(v) => commitStyle({ gap: typeof v === 'string' ? v : v > 0 ? v : null })}
+          />
         </div>
       </div>
     </section>
@@ -7016,6 +7372,8 @@ function InspectorPanel({
   onResizeArtboard,
   onSetArtboardHug,
   onSetArtboardStyle,
+  onSetArtboardKind,
+  onSetArtboardPrint,
   onUndoRedo,
   editScope,
   tab: tabProp,
@@ -7584,9 +7942,12 @@ function InspectorPanel({
         ) : !el.id && resolveArtboardIdFromSelection(el) ? (
           <ArtboardKnobs
             el={el}
+            cfg={cfg}
             onResizeArtboard={onResizeArtboard}
             onSetArtboardHug={onSetArtboardHug}
             onSetArtboardStyle={onSetArtboardStyle}
+            onSetArtboardKind={onSetArtboardKind}
+            onSetArtboardPrint={onSetArtboardPrint}
           />
         ) : (
           <CssKnobs
@@ -7680,6 +8041,32 @@ function App() {
       }, delay)
     );
   }, []);
+  // Dogfood follow-up — the ArtboardKnobs panel (Kind/Print/Style/Hug/W-H)
+  // writes via structuralWrite, which never refreshed the Inspector's OWN
+  // `attrs` snapshot afterward: the artboard itself re-rendered correctly
+  // (new kind, new size) but the Inspector kept showing the PRE-edit values
+  // (e.g. "Digital" right after picking "Print") until the user manually
+  // re-clicked the artboard. Mirrors scheduleHaloRestore's retry ladder
+  // (the HMR reload lands async, so a single immediate post races it) but
+  // for a bare ARTBOARD selection (no data-cd-id to key off of — compares
+  // by artboardId instead of id).
+  const artboardResyncTimersRef = useRef([]);
+  const scheduleArtboardResync = useCallback((artboardId, file) => {
+    if (!artboardId || !file) return;
+    for (const t of artboardResyncTimersRef.current) clearTimeout(t);
+    artboardResyncTimersRef.current = [50, 450, 1200, 2500, 5000].map((delay) =>
+      setTimeout(() => {
+        const cur = selectedRef.current;
+        const c1 = Array.isArray(cur) ? cur[0] : cur;
+        if (!c1 || c1.artboardId !== artboardId || c1.file !== file) return; // superseded
+        const frame = iframesRef.current.get(file);
+        if (!frame?.contentWindow) return;
+        try {
+          frame.contentWindow.postMessage({ dgn: 'select-by-id', artboardId }, '*');
+        } catch {}
+      }, delay)
+    );
+  }, []);
   // Phase 12.1 (DDR-138) — after a reorder writes source, the HMR reload remounts
   // the canvas and the positional data-cd-id of the moved element (and everything
   // after it) renumbers. Stash the re-settle target { file, movedId, artboardId }
@@ -8195,6 +8582,12 @@ function App() {
   const [minimapVisible, setMinimapVisible] = useState(() => readBoolStore(MINIMAP_STORE, false));
   const [zoomCtlVisible, setZoomCtlVisible] = useState(() => readBoolStore(ZOOMCTL_STORE, false));
   const [presentMode, setPresentMode] = useState(false);
+  // feature-2-print-artboards T3 — "Show print guides". Per-CANVAS persisted
+  // (view.json `overlays.print`, via /_api/canvas-meta), not a global
+  // localStorage pref like minimap/zoomctl — mirrors the foundation's
+  // `overlays.guides` lane. Re-read whenever the active canvas changes (see
+  // the activeArtboards effect below); sent only to the active iframe.
+  const [printGuidesVisible, setPrintGuidesVisible] = useState(false);
   // P2/P3 (Plan C) — top-bar live state. (Zoom lives in the canvas toolbar pill,
   // so the top bar no longer mirrors it.)
   //   activeArtboards — real artboard count of the open canvas, read from its
@@ -8625,6 +9018,24 @@ function App() {
     setPresentMode(false);
     broadcastChrome({ present: false });
   }, [broadcastChrome]);
+  // feature-2-print-artboards T3 — per-canvas persisted, so (unlike
+  // broadcastChrome above) this targets ONLY the active iframe and PATCHes
+  // view.json's `overlays.print` through the same GET-merge/PATCH-split lane
+  // the foundation built for `overlays.guides` (api.ts normalizeOverlays is a
+  // flat Record<string, boolean> — no server change needed for a new key).
+  const togglePrintGuides = useCallback(() => {
+    if (!activePath || activePath === SYSTEM_TAB) return;
+    setPrintGuidesVisible((v) => {
+      const next = !v;
+      postToActiveCanvas({ dgn: 'view-chrome', print: next });
+      fetch('/_api/canvas-meta', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ file: activePath, patch: { overlays: { print: next } } }),
+      }).catch(() => {});
+      return next;
+    });
+  }, [activePath, postToActiveCanvas]);
 
   // P3 (Plan C) — local git user for the menubar presence avatar. One-shot.
   useEffect(() => {
@@ -8647,6 +9058,7 @@ function App() {
   useEffect(() => {
     if (!activePath || activePath === SYSTEM_TAB) {
       setActiveArtboards(0);
+      setPrintGuidesVisible(false);
       return;
     }
     let cancelled = false;
@@ -8656,9 +9068,15 @@ function App() {
         if (cancelled) return;
         const n = Array.isArray(meta?.artboards) ? meta.artboards.length : 0;
         setActiveArtboards(n);
+        // feature-2-print-artboards T3 — reflect THIS canvas's own persisted
+        // print-guides flag in the menu checkbox when switching tabs.
+        setPrintGuidesVisible(meta?.overlays?.print === true);
       })
       .catch(() => {
-        if (!cancelled) setActiveArtboards(0);
+        if (!cancelled) {
+          setActiveArtboards(0);
+          setPrintGuidesVisible(false);
+        }
       });
     return () => {
       cancelled = true;
@@ -9945,6 +10363,15 @@ function App() {
         if (e.source === activeWin && typeof m.artboardId === 'string') {
           deleteArtboardShellRef.current?.(m.artboardId);
         }
+      } else if (m.dgn === 'set-artboard-kind-request') {
+        // feature-1-artboard-kinds-foundation, T8 — context-menu "Artboard
+        // kind" submenu (inside the untrusted iframe). `kind: null` clears
+        // back to the implicit default.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        const okKind = m.kind === null || typeof m.kind === 'string';
+        if (e.source === activeWin && typeof m.artboardId === 'string' && okKind) {
+          setArtboardKindShellRef.current?.(m.artboardId, m.kind);
+        }
       } else if (m.dgn === 'open-inspector') {
         // Phase 12 — context-menu "Inspect" / tool-palette Inspect opens the right panel.
         // feature-photo-editor (Task 16) — an optional `tab` lands the panel on a
@@ -10793,20 +11220,6 @@ function App() {
     [structuralWrite]
   );
 
-  // Stage I4 — "New artboard: <preset>" from the Edit menu. Generates a unique
-  // id (server 422s a dup, negligible with a random suffix) + a preset label/dims
-  // and inserts an empty <DCArtboard> after the last one (runtime default-grid
-  // places it; DDR-027). The new frame is then selectable + resizable.
-  const onInsertArtboard = useCallback(
-    (presetKey) => {
-      const p = SCREEN_PRESETS[presetKey];
-      if (!p) return;
-      const id = `s${Math.random().toString(36).slice(2, 8)}`;
-      insertArtboardShell({ id, label: p.label, width: p.width, height: p.height });
-    },
-    [insertArtboardShell]
-  );
-
   const resizeArtboardShell = useCallback(
     (artboardId, width, height) => {
       structuralWrite(
@@ -10818,10 +11231,14 @@ function App() {
           // during the drag (no HMR yet); on a rejected/failed write, tell it to
           // restore the pre-drag box so a phantom resize doesn't linger.
           onFail: () => postToActiveCanvas({ dgn: 'resize-artboard-failed' }),
+          // Dogfood follow-up — resync the Inspector's own W/H (and any other
+          // attrs) once the HMR reload lands, so a paper-preset pick doesn't
+          // leave the fields showing the pre-resize size.
+          onOk: () => scheduleArtboardResync(artboardId, activePath),
         }
       );
     },
-    [structuralWrite, postToActiveCanvas]
+    [structuralWrite, postToActiveCanvas, scheduleArtboardResync, activePath]
   );
 
   const deleteArtboardShell = useCallback(
@@ -10839,18 +11256,96 @@ function App() {
       structuralWrite(
         '/_api/set-artboard-hug',
         { artboardId, fixed, freezeHeight },
-        { label: fixed ? 'pin artboard height' : 'hug artboard height' }
+        {
+          label: fixed ? 'pin artboard height' : 'hug artboard height',
+          onOk: () => scheduleArtboardResync(artboardId, activePath),
+        }
       );
     },
-    [structuralWrite]
+    [structuralWrite, scheduleArtboardResync, activePath]
   );
 
   // Artboard "more settings" (background/padding/layout/gap) from ArtboardKnobs.
   const setArtboardStyleShell = useCallback(
     (artboardId, patch) => {
-      structuralWrite('/_api/set-artboard-style', { artboardId, ...patch }, { label: 'artboard style' });
+      structuralWrite('/_api/set-artboard-style', { artboardId, ...patch }, {
+        label: 'artboard style',
+        onOk: () => scheduleArtboardResync(artboardId, activePath),
+      });
     },
-    [structuralWrite]
+    [structuralWrite, scheduleArtboardResync, activePath]
+  );
+  // feature-1-artboard-kinds-foundation, T8 — kind-switch surfaces. Direct
+  // callable from ArtboardKnobs (Inspector); the context-menu submenu (inside
+  // the iframe) reaches the SAME endpoint via the postMessage ref below.
+  //
+  // Dogfood follow-up — every one of these ArtboardKnobs writers now resyncs
+  // the Inspector's OWN selection snapshot once the HMR reload lands
+  // (scheduleArtboardResync's retry ladder). Before this fix the ARTBOARD
+  // re-rendered correctly (new kind, new paper size) but the Inspector kept
+  // showing PRE-edit attrs (e.g. "Digital" right after picking "Print",
+  // "Preset size…" still listing screen presets) until the user manually
+  // re-clicked the artboard — structuralWrite's onOk never refreshed
+  // `selected`, only recorded undo history.
+  const setArtboardKindShell = useCallback(
+    (artboardId, kind) => {
+      structuralWrite('/_api/set-artboard-kind', { artboardId, kind }, {
+        label: 'artboard kind',
+        onOk: () => scheduleArtboardResync(artboardId, activePath),
+      });
+    },
+    [structuralWrite, scheduleArtboardResync, activePath]
+  );
+  // feature-2-print-artboards T2 — paper/orientation/bleed/margins. Direct
+  // Inspector-only callable (no canvas-origin postMessage path — same shape
+  // as setArtboardStyleShell, unlike setArtboardKindShell which also has a
+  // context-menu caller inside the iframe).
+  const setArtboardPrintShell = useCallback(
+    (artboardId, print) => {
+      structuralWrite('/_api/set-artboard-print', { artboardId, print }, {
+        label: 'artboard print',
+        onOk: () => scheduleArtboardResync(artboardId, activePath),
+      });
+    },
+    [structuralWrite, scheduleArtboardResync, activePath]
+  );
+
+  // Stage I4 — "New artboard: <preset>" from the Edit menu. Generates a unique
+  // id (server 422s a dup, negligible with a random suffix) + a preset label/dims
+  // and inserts an empty <DCArtboard> after the last one (runtime default-grid
+  // places it; DDR-027). The new frame is then selectable + resizable.
+  const onInsertArtboard = useCallback(
+    (presetKey) => {
+      const id = `s${Math.random().toString(36).slice(2, 8)}`;
+      // feature-2-print-artboards T2 — kind="print" + the print prop must
+      // land together, so the created artboard is never a plain digital
+      // board sized to paper by coincidence. structuralWrite serializes
+      // calls in submission order (editApplyChainRef), so these three
+      // sequential POSTs land as insert → kind → print, in order.
+      if (presetKey.startsWith('print-')) {
+        const paper = presetKey.slice('print-'.length);
+        let resolved;
+        try {
+          resolved = resolvePrintArtboard({ paper });
+        } catch {
+          return;
+        }
+        const preset = PAPER_PRESETS.find((p) => p.id === paper);
+        insertArtboardShell({
+          id,
+          label: preset ? preset.label : paper.toUpperCase(),
+          width: resolved.widthPx,
+          height: resolved.heightPx,
+        });
+        setArtboardKindShell(id, 'print');
+        setArtboardPrintShell(id, { paper });
+        return;
+      }
+      const p = SCREEN_PRESETS[presetKey];
+      if (!p) return;
+      insertArtboardShell({ id, label: p.label, width: p.width, height: p.height });
+    },
+    [insertArtboardShell, setArtboardKindShell, setArtboardPrintShell]
   );
   // Refs the (stale-closure) onMessage handlers below read.
   const deleteElementShellRef = useRef(null);
@@ -10858,6 +11353,7 @@ function App() {
   const insertArtboardShellRef = useRef(null);
   const resizeArtboardShellRef = useRef(null);
   const deleteArtboardShellRef = useRef(null);
+  const setArtboardKindShellRef = useRef(null);
   const duplicateElementShellRef = useRef(null);
   const copyStyleRef = useRef(null);
   const pasteStyleRef = useRef(null);
@@ -10867,6 +11363,7 @@ function App() {
     insertArtboardShellRef.current = insertArtboardShell;
     resizeArtboardShellRef.current = resizeArtboardShell;
     deleteArtboardShellRef.current = deleteArtboardShell;
+    setArtboardKindShellRef.current = setArtboardKindShell;
     duplicateElementShellRef.current = duplicateElementShell;
     copyStyleRef.current = copyStyle;
     pasteStyleRef.current = pasteStyle;
@@ -10876,6 +11373,7 @@ function App() {
     insertArtboardShell,
     resizeArtboardShell,
     deleteArtboardShell,
+    setArtboardKindShell,
     duplicateElementShell,
     copyStyle,
     pasteStyle,
@@ -11624,6 +12122,8 @@ function App() {
           onResizeArtboard={resizeArtboardShell}
           onSetArtboardHug={setArtboardHugShell}
           onSetArtboardStyle={setArtboardStyleShell}
+          onSetArtboardKind={setArtboardKindShell}
+          onSetArtboardPrint={setArtboardPrintShell}
           editScope={editScope}
           onUndoRedo={(dir) => postToActiveCanvas({ dgn: dir })}
           photoSel={photoSel}
@@ -11733,6 +12233,8 @@ function App() {
           onToggleZoomCtl={toggleZoomCtl}
           presentMode={presentMode}
           onTogglePresent={togglePresent}
+          printGuidesVisible={printGuidesVisible}
+          onTogglePrintGuides={togglePrintGuides}
           postToActiveCanvas={postToActiveCanvas}
           onOpenReadiness={() => setReadinessOpen(true)}
           onOpenQuickSetup={() => setQuickSetupOpen(true)}