@drawnagency/primitives 0.1.83 → 0.1.84

package/dist/document/index.js

@@ -925,13 +925,14 @@ function DocCanvas({
     const el = containerRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(() => {
-      const available = el.clientWidth - 48;
-      setScale(Math.min(0.75, Math.max(0.15, available / PAGE_W2)));
+      const availW = el.clientWidth - 48;
+      const availH = el.clientHeight - 48;
+      setScale(Math.max(0.15, Math.min(availW / PAGE_W2, availH / PAGE_H2)));
     });
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  const note = (text) => /* @__PURE__ */ jsx6("p", { className: "mt-24 text-sm text-neutral-400", children: text });
+  const note = (text) => /* @__PURE__ */ jsx6("p", { className: "text-sm text-neutral-400", children: text });
   let body;
   if (active?.kind === "cover") {
     body = noContent ? /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center gap-4", children: [
@@ -950,8 +951,8 @@ function DocCanvas({
     {
       ref: containerRef,
       "data-testid": "doc-canvas",
-      className: "flex flex-1 items-start justify-center overflow-auto bg-neutral-100 p-6",
-      children: body
+      className: "flex min-h-0 min-w-0 flex-1 overflow-auto bg-neutral-100 p-6",
+      children: /* @__PURE__ */ jsx6("div", { className: "m-auto", children: body })
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.83",
+  "version": "0.1.84",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/document/components/DocViewer.tsx

@@ -243,14 +243,19 @@ function DocCanvas({
     const el = containerRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(() => {
-      const available = el.clientWidth - 48;
-      setScale(Math.min(0.75, Math.max(0.15, available / PAGE_W)));
+      // Fill the canvas: fit both dimensions (clientWidth/Height include the
+      // p-6 padding — subtract it) and take the limiting axis. The page keeps
+      // its true 1632×1056 layout and is transform-scaled, so what's shown is
+      // byte-identical to the print layout at any size.
+      const availW = el.clientWidth - 48;
+      const availH = el.clientHeight - 48;
+      setScale(Math.max(0.15, Math.min(availW / PAGE_W, availH / PAGE_H)));
     });
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
 
-  const note = (text: string) => <p className="mt-24 text-sm text-neutral-400">{text}</p>;
+  const note = (text: string) => <p className="text-sm text-neutral-400">{text}</p>;
 
   let body: ReactNode;
   if (active?.kind === "cover") {
@@ -283,9 +288,12 @@ function DocCanvas({
     <div
       ref={containerRef}
       data-testid="doc-canvas"
-      className="flex flex-1 items-start justify-center overflow-auto bg-neutral-100 p-6"
+      className="flex min-h-0 min-w-0 flex-1 overflow-auto bg-neutral-100 p-6"
     >
-      {body}
+      {/* m-auto instead of items/justify-center: centers both axes when the
+          page fits, but keeps the top/left edge reachable when it overflows
+          (flex centering clips overflow irretrievably; auto margins don't). */}
+      <div className="m-auto">{body}</div>
     </div>
   );
 }