Add wireframe and mockup catalog studies

site/.impeccable/surfaces/app-catalog-page-tsx.md

@@ -18,12 +18,13 @@ The first viewport is a guide, not merely an introduction. It names all nine sub
 ## Content and actions
 
 - Twenty Thariq HTML references, grouped by the nine source categories and linked to the original live files, each paired with an Effective SVG subject in locally served static and animated versions.
-- Six native Effective HTML artifacts: the featured architecture request-path explorer, two release-readiness studies, and three standalone product-interface studies.
+- Twelve first-party Effective HTML artifacts: the featured architecture request-path explorer, two release-readiness studies, three new wireframe-and-mockup pairs, and three standalone product-interface studies.
 - The featured explorer is the interactive diagram from the Effective HTML README. Its live HTML is the source artifact; a 30.5-second recording, poster, and four-flow animated SVG are supporting previews of the same work, not additional catalog entries.
 - The standalone studies are a Linear-like issue workspace, a Notion-like connected project document, and a Vercel-like deployment ledger. All three use synthetic data, are explicitly unaffiliated, and make no commercial product claims or use product logos.
-- The five Effective HTML skills as the methods behind the catalog.
-- Thirty-one catalog entries total: twenty HTML + SVG pairs, six native examples, and five skills. The collection is intentionally too small to justify free-text search or intersecting taxonomies, so discovery uses the nine-subject guide plus one Collection control: All, References, Hi-fi mockups, or Skills. Hi-fi mockups is the direct showcase path to the Linear-like, Notion-like, and Vercel-like studies; primary actions are Open HTML, Static SVG, and Animated SVG.
-- One global SVG Preview control switches all twenty paired SVG previews together. Preview defaults to Animated, and individual specimen cards do not carry their own animation toggles.
+- The three new pairs cover an Effective HTML catalog decision, a Plannotator review workspace, and a product-change review. Each pair keeps the system and decision fixed while moving from a rough wireframe to a product-specific mockup.
+- The six Effective HTML skills as the methods behind the catalog.
+- Thirty-eight catalog entries total: twenty HTML + SVG references, twelve first-party artifacts, and six skills. The collection is intentionally too small to justify free-text search or intersecting taxonomies, so discovery uses the nine-subject guide plus one Collection control: All, References, Wireframes & mockups, or Skills. Wireframes & mockups is the direct showcase path to ten practical design artifacts.
+- One global Preview control switches the twenty paired references and six new design artifacts between static and animated SVGs. Preview defaults to Animated; first-party entries without SVG media keep their screenshot, and individual cards do not carry their own animation toggles.
 - Expanded and Compact are two presentations of this same filtered collection. Switching modes must preserve every result, preview state, source link, and action rather than routing to a second catalog.
 
 ## Direction and memorable moment
@@ -44,10 +45,11 @@ Expanded is the expressive, full-width reading mode. Its category heading occupi
 | Featured architecture request-path explorer | Live standalone HTML with six selectable flows; supporting video, poster, and four-flow animated SVG synopsis |
 | Nine category bands | Full-width editorial fields in Expanded; contained colored shelves in Compact |
 | Twenty artifact specimens | Data-driven HTML; local SVG `<img>` previews and verified external links |
-| Global static/animated preview state | One accessible Preview control swaps all twenty paired local SVG assets together; Animated is the default and cards have no individual animation toggles |
-| Six native worked examples | Featured request-path explorer, two release-readiness studies, and three product-interface studies, all with same-origin live HTML |
+| Global static/animated preview state | One accessible Preview control swaps the twenty references and six new design artifacts together; Animated is the default and cards have no individual animation toggles |
+| Twelve first-party artifacts | Featured request-path explorer, two release-readiness studies, three wireframe-and-mockup pairs, and three product-interface studies, all with same-origin live HTML |
 | Product-interface discovery media | Three local 1440×900 PNG images that link into the live Linear-like, Notion-like, and Vercel-like studies |
-| Five skills rail | Ruled semantic links to local guide chapters and GitHub source files |
+| Wireframe and mockup discovery media | Six local 1440×900 PNG screenshots plus six self-contained static and animated SVG previews |
+| Six skills rail | Ruled semantic links to local guide chapters and GitHub source files |
 
 ## Featured artifact behavior
 
@@ -58,8 +60,8 @@ Expanded is the expressive, full-width reading mode. Its category heading occupi
 
 ## Catalog view behavior
 
-- The sticky control bar uses one content taxonomy: All, References, Hi-fi mockups, or Skills. Subject discovery stays in the nine-subject guide rather than becoming a second intersecting filter.
-- SVG Preview defaults to Animated and switches all twenty paired SVG specimens as a group. It appears only for All and References, where it applies; Hi-fi mockups and Skills do not carry an irrelevant preview control.
+- The sticky control bar uses one content taxonomy: All, References, Wireframes & mockups, or Skills. Subject discovery stays in the nine-subject guide rather than becoming a second intersecting filter.
+- Preview defaults to Animated and switches supported SVG specimens as a group. It appears for All, References, and Wireframes & mockups. Entries without SVG media keep their screenshot.
 - Expanded is the initial mode and retains the spacious, staggered editorial bands.
 - Compact is a denser scan of the same visible results. It compresses the featured explorer, category bands, native examples, and skills without removing their content or actions.
 - View buttons expose their current state with `aria-pressed`; the live result summary names the active mode and current result count.
@@ -77,13 +79,21 @@ Expanded is the expressive, full-width reading mode. Its category heading occupi
 - Every study carries a visible standalone disclosure that it is an unaffiliated interface study using synthetic data. No study uses a product logo or makes a commercial claim.
 - The research basis is recorded in `public/examples/product-studies/README.md` using official Linear, Notion, and Vercel sources.
 
+## Shipped wireframe and mockup pairs
+
+- **Effective HTML catalog:** three low-fidelity browsing directions lead into a branded comparison mockup that can switch its artifact previews between desktop and mobile widths.
+- **Plannotator review:** a grayscale canvas/comments/queue wireframe leads into a dark product-aligned review workspace with width switching, annotation selection, and send feedback.
+- **Product change review:** a rough current/proposed/states comparison leads into a vivid decision artifact with current, proposed, compare, and mobile modes.
+- All six are standalone, responsive HTML files with keyboard-operable controls, visible focus, reduced-motion support, 1440×900 screenshots, static SVGs, animated SVGs, and direct source links.
+- Their creative direction comes from the system being discussed. They are not normalized into one generic dashboard template.
+
 ## Responsive constraints
 
 Desktop Expanded may stagger two or three sheets within a band; Compact uses contained shelves with a category rail and concise specimen grid. At every desktop and large-tablet width, the hero title and each expanded category heading retain reserved, non-overlapping rails. Explicit regression checkpoints are 1033px, 1375px, and 1728px, plus adjacent widths where the layout changes. Tablet reduces each expanded band to a label rail plus one or two columns.
 
 On mobile, the nine-subject guide remains before the artifact folio so the visitor sees the catalog map first. Expanded becomes a vertical sequence with full-width previews and persistent readable actions. Compact keeps each colored category band contained and lets its specimen shelf scroll horizontally inside the band; the document itself must remain overflow-free. The featured explorer stacks copy, video, and animated synopsis in that order. Reduced-motion preferences disable the view-change animation at every breakpoint.
 
-The three product-interface studies are verified at 1440×900 and 390×844. At both sizes they have no document-level horizontal overflow and keep the unaffiliated synthetic-data disclosure visible. Linear and Notion expose complete tab semantics with roving focus plus Arrow Left, Arrow Right, Home, and End keyboard behavior; all studies preserve keyboard access, visible focus, and reduced-motion support.
+The three product-interface studies and six new wireframe/mockup artifacts are verified at 1440×900 and 390×844. At both sizes they have no document-level horizontal overflow. Linear and Notion expose complete tab semantics with roving focus plus Arrow Left, Arrow Right, Home, and End keyboard behavior; all studies preserve keyboard access, visible focus, and reduced-motion support.
 
 ## Validation notes
 

site/app/catalog/page.tsx

@@ -141,9 +141,9 @@ export default function CatalogPage() {
             The twenty reference examples accompany Thariq Shihipar’s essay on
             using HTML to stay engaged with agent work. Effective SVG reinterprets
             those same subjects as static and animated vector artifacts. The
-            native collection adds the featured request-path explorer, two
-            release-readiness studies, and three unaffiliated product-interface
-            studies built with synthetic data.
+            first-party collection adds the request-path explorer, the
+            release-readiness pair, three new wireframe-and-mockup pairs, and
+            three product-interface studies built with synthetic data.
           </p>
         </div>
         <div className={styles.sourceLinks}>

site/components/catalog-explorer.tsx

@@ -8,6 +8,7 @@ import {
   nativeExamples,
   type CatalogArtifact,
   type CatalogCategory,
+  type NativeExample,
 } from "@/lib/catalog-data";
 import { FeaturedSequence } from "@/components/featured-sequence";
 import {
@@ -28,7 +29,7 @@ import { useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import styles from "./catalog-explorer.module.css";
 
-type CollectionFilter = "all" | "pairs" | "mockups" | "skills";
+type CollectionFilter = "all" | "pairs" | "design" | "skills";
 type CatalogView = "expanded" | "compact";
 type PreviewMode = "static" | "animated";
 
@@ -36,8 +37,8 @@ type ViewTransitionDocument = Document & {
   startViewTransition?: (update: () => void) => unknown;
 };
 
-const highFidelityMockups = nativeExamples.filter((example) =>
-  example.mode.startsWith("Interface study"),
+const wireframesAndMockups = nativeExamples.filter(
+  (example) => example.stage !== "Prototype",
 );
 
 const collectionOptions: Array<{
@@ -52,9 +53,9 @@ const collectionOptions: Array<{
   },
   { id: "pairs", label: "References", count: 20 },
   {
-    id: "mockups",
-    label: "Hi-fi mockups",
-    count: highFidelityMockups.length,
+    id: "design",
+    label: "Wireframes & mockups",
+    count: wireframesAndMockups.length,
   },
   { id: "skills", label: "Skills", count: catalogSkills.length },
 ];
@@ -65,7 +66,8 @@ const catalogCategoryIds = new Set<string>(
 );
 
 function parseCollection(value: string | null): CollectionFilter {
-  return value === "pairs" || value === "mockups" || value === "skills"
+  if (value === "mockups") return "design";
+  return value === "pairs" || value === "design" || value === "skills"
     ? value
     : "all";
 }
@@ -184,6 +186,57 @@ function CategoryBand({
   );
 }
 
+function NativeExampleCard({
+  example,
+  previewMode,
+}: {
+  example: NativeExample;
+  previewMode: PreviewMode;
+}) {
+  const activePreview =
+    previewMode === "animated" && example.animatedSvg
+      ? example.animatedSvg
+      : previewMode === "static" && example.staticSvg
+        ? example.staticSvg
+        : example.screenshot;
+  const usesSvgPreview = activePreview.endsWith(".svg");
+
+  return (
+    <article className={styles.nativeExample}>
+      <Link className={styles.nativePreview} href={example.liveUrl}>
+        <Image
+          src={activePreview}
+          alt={`${previewMode === "animated" && example.animatedSvg ? "Animated preview" : "Preview"} of ${example.title}`}
+          width={usesSvgPreview ? 640 : example.screenshotWidth}
+          height={usesSvgPreview ? 400 : example.screenshotHeight}
+          unoptimized={usesSvgPreview}
+        />
+      </Link>
+      <div className={styles.nativeCopy}>
+        <span>
+          {example.stage} · {example.mode}
+        </span>
+        <h3>{example.title}</h3>
+        <p>{example.description}</p>
+        <div>
+          <Link href={example.liveUrl}>
+            Open live HTML
+            <ArrowUpRight aria-hidden="true" />
+          </Link>
+          <a href={example.sourceUrl} target="_blank" rel="noreferrer">
+            Source HTML
+            <FileCode2 aria-hidden="true" />
+          </a>
+          <Link href={example.guideUrl}>
+            Guide
+            <ArrowRight aria-hidden="true" />
+          </Link>
+        </div>
+      </div>
+    </article>
+  );
+}
+
 export function CatalogExplorer() {
   const [collection, setCollection] = useState<CollectionFilter>("all");
   const [previewMode, setPreviewMode] = useState<PreviewMode>("animated");
@@ -263,22 +316,22 @@ export function CatalogExplorer() {
   }, [collection, pendingAnchor]);
 
   const visibleArtifacts =
-    collection === "mockups" || collection === "skills"
+    collection === "design" || collection === "skills"
       ? []
       : catalogArtifacts;
 
   const visibleNativeExamples =
     collection === "pairs" || collection === "skills"
       ? []
-      : collection === "mockups"
-        ? highFidelityMockups
+      : collection === "design"
+        ? wireframesAndMockups
         : nativeExamples;
 
   const featuredSequenceVisible =
     collection === "all";
 
   const visibleSkills =
-    collection === "pairs" || collection === "mockups"
+    collection === "pairs" || collection === "design"
       ? []
       : catalogSkills;
 
@@ -368,7 +421,7 @@ export function CatalogExplorer() {
       <section className={styles.catalogControls} aria-label="Catalog filters">
         <div
           className={`${styles.controlsInner} ${
-            collection === "mockups" || collection === "skills"
+            collection === "skills"
               ? styles.controlsInnerWithoutPreview
               : ""
           }`}
@@ -387,7 +440,9 @@ export function CatalogExplorer() {
             ))}
           </div>
 
-          {(collection === "all" || collection === "pairs") && (
+          {(collection === "all" ||
+            collection === "pairs" ||
+            collection === "design") && (
             <div
               className={styles.previewToggle}
               role="group"
@@ -471,43 +526,23 @@ export function CatalogExplorer() {
           >
             <header className={styles.sectionIntro}>
               <h2>
-                {collection === "mockups"
-                  ? "High-fidelity product mockups."
+                {collection === "design"
+                  ? "Wireframes and mockups."
                   : "Built here, open in place."}
               </h2>
               <p>
-                {collection === "mockups"
-                  ? "Three responsive, interactive HTML studies that borrow the information density and interaction grammar of familiar products."
-                  : "Agents can build high-fidelity HTML alternatives that match the real product. Open them at realistic screen sizes, try the interactions, and compare possible changes before touching production."}
+                {collection === "design"
+                  ? "Open the HTML, resize it, and inspect the source."
+                  : "First-party wireframes, mockups, prototypes, and interface studies. Open the HTML, resize it, and inspect the source."}
               </p>
             </header>
             <div className={styles.nativeExamples}>
               {visibleNativeExamples.map((example) => (
-                <article className={styles.nativeExample} key={example.id}>
-                  <Link className={styles.nativePreview} href={example.liveUrl}>
-                    <Image
-                      src={example.screenshot}
-                      alt={`Screenshot of ${example.title}`}
-                      width={example.screenshotWidth}
-                      height={example.screenshotHeight}
-                    />
-                  </Link>
-                  <div className={styles.nativeCopy}>
-                    <span>{example.mode}</span>
-                    <h3>{example.title}</h3>
-                    <p>{example.description}</p>
-                    <div>
-                      <Link href={example.liveUrl}>
-                        Open live HTML
-                        <ArrowUpRight aria-hidden="true" />
-                      </Link>
-                      <Link href={example.guideUrl}>
-                        Read the guide
-                        <ArrowRight aria-hidden="true" />
-                      </Link>
-                    </div>
-                  </div>
-                </article>
+                <NativeExampleCard
+                  example={example}
+                  key={example.id}
+                  previewMode={previewMode}
+                />
               ))}
             </div>
           </section>
@@ -522,7 +557,7 @@ export function CatalogExplorer() {
             <header className={styles.sectionIntro}>
               <h2>The methods behind the artifacts.</h2>
               <p>
-                Five focused skills turn a broad request into an artifact with
+                Six focused skills turn a broad request into an artifact with
                 the right fidelity, behavior, and verification boundary.
               </p>
             </header>

site/design.md

@@ -196,7 +196,7 @@ The system has two coordinated registers. The Catalog opens as a compact Ink fol
 
 Imperfection is controlled and material, never careless. Paper tooth, slight sheet rotation, tape, overlap, and offset depth live around artifact surfaces, while text, controls, navigation, and diagrams stay crisp. The resulting character is editorial rather than institutional, playful inside the examples, and restrained in the surrounding chrome.
 
-Catalog utility stays practical inside that expression. Search, collection, and subject controls remain persistent and compact; original HTML sources stay visibly paired with local static and animated SVG interpretations; and native examples and skill-ledger rows expose the work and methods without a marketplace layer.
+Catalog utility stays practical inside that expression. One collection control and one Expanded/Compact control remain persistent and compact; original HTML sources stay visibly paired with local static and animated SVG interpretations; and first-party examples and skill-ledger rows expose the work and methods without a marketplace layer.
 
 **Key Characteristics:**
 
@@ -346,7 +346,7 @@ The Catalog header is a thin Ink rail. Its geometric wordmark uses two Paper blo
 
 ### Catalog Controls
 
-The controls form one persistent utility rail rather than a floating filter card. Four collection segments—All, References, Hi-fi mockups, and Skills—show a label and tabular count; the selected segment turns Action Green with Working Ink text. The separate presentation group changes Expanded/Compact, while Static/Animated appears only when SVG references are visible. Because segmented wrappers clip overflow, focus uses a 2px inset outline with a -3px offset: Bright Paper on inactive Ink controls and Working Ink on active Green or Lilac segments. At 820px the groups stack with presentation before SVG preview; at 540px counts disappear before labels compress and the rail stops sticking.
+The controls form one persistent utility rail rather than a floating filter card. Four collection segments—All, References, Wireframes & mockups, and Skills—show a label and tabular count; the selected segment turns Action Green with Working Ink text. The separate presentation group changes Expanded/Compact, while Static/Animated appears whenever the visible collection includes SVG previews and defaults to Animated. Because segmented wrappers clip overflow, focus uses a 2px inset outline with a -3px offset: Bright Paper on inactive Ink controls and Working Ink on active Green or Lilac segments. At 820px the groups stack with presentation before SVG preview; at 540px counts disappear before labels compress and the rail stops sticking.
 
 ### Artifact Links
 

site/lib/catalog-data.ts

@@ -38,13 +38,17 @@ export type NativeExample = {
   id: string;
   category: CatalogCategoryId;
   title: string;
+  stage: "Wireframe" | "Mockup" | "Prototype";
   mode: string;
   description: string;
   screenshot: string;
   screenshotWidth: number;
   screenshotHeight: number;
+  staticSvg?: string;
+  animatedSvg?: string;
   liveUrl: string;
   guideUrl: string;
+  sourceUrl: string;
 };
 
 /** A first-party HTML artifact with media that previews, but does not replace, the live work. */
@@ -414,6 +418,7 @@ export const nativeExamples: NativeExample[] = [
     id: "release-readiness-wireframe",
     category: "exploration",
     title: "Release readiness wireframe",
+    stage: "Wireframe",
     mode: "Structure",
     description:
       "Three deliberately unfinished directions for deciding hierarchy, evidence, navigation, and responsive structure.",
@@ -422,11 +427,14 @@ export const nativeExamples: NativeExample[] = [
     screenshotHeight: 1000,
     liveUrl: "/examples/release-readiness/wireframe.html",
     guideUrl: "/docs/wireframes",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/examples/release-readiness/wireframe.html",
   },
   {
     id: "release-readiness-prototype",
     category: "prototyping",
     title: "Release readiness prototype",
+    stage: "Prototype",
     mode: "Behavior",
     description:
       "A working blocked-to-ready flow with validation, status changes, recovery, keyboard support, and mobile behavior.",
@@ -435,11 +443,140 @@ export const nativeExamples: NativeExample[] = [
     screenshotHeight: 1428,
     liveUrl: "/examples/release-readiness/prototype.html",
     guideUrl: "/docs/prototypes",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/examples/release-readiness/prototype.html",
+  },
+  {
+    id: "effective-html-compare-wireframe",
+    category: "exploration",
+    title: "Effective HTML comparison wireframe",
+    stage: "Wireframe",
+    mode: "Three directions · low fidelity",
+    description:
+      "Three ways to organize the same artifact catalog, kept rough so the hierarchy and browsing model are the decision.",
+    screenshot:
+      "/examples/product-design/screenshots/effective-html-compare-wireframe.png",
+    screenshotWidth: 1440,
+    screenshotHeight: 900,
+    staticSvg:
+      "/examples/product-design/previews/static/effective-html-compare-wireframe.svg",
+    animatedSvg:
+      "/examples/product-design/previews/animated/effective-html-compare-wireframe.svg",
+    liveUrl: "/examples/product-design/effective-html-compare-wireframe.html",
+    guideUrl: "/docs/wireframes",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-design/effective-html-compare-wireframe.html",
+  },
+  {
+    id: "effective-html-compare-mockup",
+    category: "prototyping",
+    title: "Effective HTML catalog mockup",
+    stage: "Mockup",
+    mode: "Chosen direction · branded",
+    description:
+      "The same catalog decision carried into the Effective HTML visual system, with working density and responsive controls.",
+    screenshot:
+      "/examples/product-design/screenshots/effective-html-compare-mockup.png",
+    screenshotWidth: 1440,
+    screenshotHeight: 900,
+    staticSvg:
+      "/examples/product-design/previews/static/effective-html-compare-mockup.svg",
+    animatedSvg:
+      "/examples/product-design/previews/animated/effective-html-compare-mockup.svg",
+    liveUrl: "/examples/product-design/effective-html-compare-mockup.html",
+    guideUrl: "/docs/designing-artifacts",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-design/effective-html-compare-mockup.html",
+  },
+  {
+    id: "plannotator-review-wireframe",
+    category: "review",
+    title: "Plannotator review wireframe",
+    stage: "Wireframe",
+    mode: "Review structure · low fidelity",
+    description:
+      "A rough review workspace for testing the balance between the document, annotation tools, comments, and approval actions.",
+    screenshot:
+      "/examples/product-design/screenshots/plannotator-review-wireframe.png",
+    screenshotWidth: 1440,
+    screenshotHeight: 900,
+    staticSvg:
+      "/examples/product-design/previews/static/plannotator-review-wireframe.svg",
+    animatedSvg:
+      "/examples/product-design/previews/animated/plannotator-review-wireframe.svg",
+    liveUrl: "/examples/product-design/plannotator-review-wireframe.html",
+    guideUrl: "/docs/wireframes",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-design/plannotator-review-wireframe.html",
+  },
+  {
+    id: "plannotator-review-mockup",
+    category: "review",
+    title: "Plannotator review mockup",
+    stage: "Mockup",
+    mode: "Product-aligned · interactive",
+    description:
+      "A product-specific review surface using Plannotator’s dark shell, annotation language, and approval flow without copying a screenshot.",
+    screenshot:
+      "/examples/product-design/screenshots/plannotator-review-mockup.png",
+    screenshotWidth: 1440,
+    screenshotHeight: 900,
+    staticSvg:
+      "/examples/product-design/previews/static/plannotator-review-mockup.svg",
+    animatedSvg:
+      "/examples/product-design/previews/animated/plannotator-review-mockup.svg",
+    liveUrl: "/examples/product-design/plannotator-review-mockup.html",
+    guideUrl: "/docs/designing-artifacts",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-design/plannotator-review-mockup.html",
+  },
+  {
+    id: "product-change-review-wireframe",
+    category: "exploration",
+    title: "Product change review wireframe",
+    stage: "Wireframe",
+    mode: "Current and proposed · low fidelity",
+    description:
+      "A rough side-by-side review that keeps the current state, proposed change, and unresolved questions in one frame.",
+    screenshot:
+      "/examples/product-design/screenshots/product-change-review-wireframe.png",
+    screenshotWidth: 1440,
+    screenshotHeight: 900,
+    staticSvg:
+      "/examples/product-design/previews/static/product-change-review-wireframe.svg",
+    animatedSvg:
+      "/examples/product-design/previews/animated/product-change-review-wireframe.svg",
+    liveUrl: "/examples/product-design/product-change-review-wireframe.html",
+    guideUrl: "/docs/wireframes",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-design/product-change-review-wireframe.html",
+  },
+  {
+    id: "product-change-review-mockup",
+    category: "prototyping",
+    title: "Product change review mockup",
+    stage: "Mockup",
+    mode: "Decision artifact · interactive",
+    description:
+      "A vivid review artifact for comparing a product change, changing the viewport, and recording a direction before implementation.",
+    screenshot:
+      "/examples/product-design/screenshots/product-change-review-mockup.png",
+    screenshotWidth: 1440,
+    screenshotHeight: 900,
+    staticSvg:
+      "/examples/product-design/previews/static/product-change-review-mockup.svg",
+    animatedSvg:
+      "/examples/product-design/previews/animated/product-change-review-mockup.svg",
+    liveUrl: "/examples/product-design/product-change-review-mockup.html",
+    guideUrl: "/docs/designing-artifacts",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-design/product-change-review-mockup.html",
   },
   {
     id: "linear-issue-workspace",
     category: "prototyping",
     title: "Linear issue workspace",
+    stage: "Mockup",
     mode: "Interface study · Linear",
     description:
       "A calm, dense issue workspace with active and backlog filters, keyboard-ready rows, and a focused issue detail rail.",
@@ -448,11 +585,14 @@ export const nativeExamples: NativeExample[] = [
     screenshotHeight: 900,
     liveUrl: "/examples/product-studies/linear-issue-workspace.html",
     guideUrl: "/docs/prototypes",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-studies/linear-issue-workspace.html",
   },
   {
     id: "notion-project-space",
     category: "prototyping",
     title: "Notion project space",
+    stage: "Mockup",
     mode: "Interface study · Notion",
     description:
       "A connected project document that keeps strategy, properties, tasks, progress, and a timeline in one navigable surface.",
@@ -461,11 +601,14 @@ export const nativeExamples: NativeExample[] = [
     screenshotHeight: 900,
     liveUrl: "/examples/product-studies/notion-project-space.html",
     guideUrl: "/docs/prototypes",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-studies/notion-project-space.html",
   },
   {
     id: "vercel-deployment-dashboard",
     category: "prototyping",
     title: "Vercel deployment ledger",
+    stage: "Mockup",
     mode: "Interface study · Vercel",
     description:
       "A chronological deployment ledger with environment filters, expandable build evidence, and explicit promotion actions.",
@@ -474,6 +617,8 @@ export const nativeExamples: NativeExample[] = [
     screenshotHeight: 900,
     liveUrl: "/examples/product-studies/vercel-deployment-dashboard.html",
     guideUrl: "/docs/prototypes",
+    sourceUrl:
+      "https://github.com/plannotator/effective-html/blob/main/site/public/examples/product-studies/vercel-deployment-dashboard.html",
   },
 ];
 

site/public/examples/product-design/README.md

@@ -0,0 +1,42 @@
+# Wireframes and mockups
+
+Six standalone HTML artifacts built to show how an agent can use real product
+context instead of applying a generic interface style.
+
+## Effective HTML comparison
+
+- `effective-html-compare-wireframe.html` tests three structures for comparing
+  two live artifacts: split, stacked, and focused review.
+- `effective-html-compare-mockup.html` applies the Effective HTML Working Atlas
+  system to the selected split comparison.
+- Source context: `site/DESIGN.md`, `site/PRODUCT.md`, the current catalog, and
+  the existing same-origin artifacts.
+- Skill use: `html-wireframe` for the structural directions, then
+  `design-artifact` with `html-prototype` in mockup mode for the finished view.
+
+## Plannotator review workspace
+
+- `plannotator-review-wireframe.html` tests canvas-first, comments-first, and
+  review-queue structures for annotating rendered HTML.
+- `plannotator-review-mockup.html` follows Plannotator's current dark review
+  surface, annotation rail, selected-comment treatment, and send-feedback
+  action.
+- Source context: the public Plannotator repository, current HTML annotation
+  and code-review screenshots, and the review UI components.
+- Skill use: `html-wireframe` for the structure, then `design-artifact` with
+  `html-prototype` in mockup mode for system alignment.
+
+## Product change review
+
+- `product-change-review-wireframe.html` compares current and proposed member
+  role behavior across direct comparison, states, and mobile views.
+- `product-change-review-mockup.html` turns the same synthetic brief into a
+  polished review artifact. It is not a production product or a product claim.
+- Source context: a bounded synthetic brief about moving role actions out of an
+  overflow menu and showing permission limits before submission.
+- Skill use: `html-wireframe` for the evidence layout, then `design-artifact`
+  with `html-prototype` in mockup mode for the finished review surface.
+
+Every artifact is self-contained and requires no network connection or build
+step. Catalog screenshots and static and animated SVG previews sit beside these
+files.

site/public/examples/product-design/effective-html-compare-mockup.html

@@ -0,0 +1,218 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Effective HTML artifact comparison mockup</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --ink: #141413;
+        --soft-ink: #252522;
+        --paper: #f3e6d2;
+        --paper-bright: #fff9ef;
+        --paper-muted: #ded1be;
+        --line: #6b6257;
+        --copy: #cfc2b2;
+        --green: #1bae61;
+        --cobalt: #1649d8;
+        --lilac: #a884e8;
+        --pink: #f09aa8;
+        --coral: #e8744f;
+        --shadow: 0 22px 48px rgba(0, 0, 0, .36);
+        font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+      * { box-sizing: border-box; }
+      html { background: var(--ink); }
+      body { min-width: 320px; margin: 0; color: var(--paper-bright); background: var(--ink); }
+      button, a { font: inherit; }
+      button { color: inherit; }
+      button:focus-visible, a:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }
+      .shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
+      .topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(18px, 3vw, 42px); border-bottom: 1px solid #3a3732; }
+      .brand { display: flex; align-items: center; gap: 10px; font-weight: 820; letter-spacing: -.03em; }
+      .brand-mark { width: 19px; height: 19px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
+      .brand-mark i { background: var(--paper-bright); }
+      .brand-mark i:nth-child(2) { background: var(--green); }
+      .brand-mark i:nth-child(3) { grid-column: 2; background: var(--paper-muted); }
+      nav { display: flex; align-items: center; gap: 22px; }
+      nav a { color: var(--copy); text-decoration: none; font-size: .82rem; font-weight: 650; }
+      nav a[aria-current="page"] { color: var(--paper-bright); }
+      .theme-dot { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
+      .theme-dot::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); }
+
+      main { width: min(1500px, 100%); margin: 0 auto; padding: clamp(26px, 4vw, 60px) clamp(18px, 3vw, 42px) 46px; }
+      .intro { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(360px, 1.28fr); align-items: end; gap: clamp(28px, 5vw, 80px); margin-bottom: 30px; }
+      h1 { margin: 0; max-width: 640px; font-family: "Arial Narrow", Inter, sans-serif; font-size: clamp(3.4rem, 6vw, 6rem); font-weight: 900; line-height: .86; letter-spacing: -.04em; text-wrap: balance; }
+      .intro-copy { max-width: 55ch; justify-self: end; }
+      .intro-copy p { margin: 0; color: var(--copy); font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.55; }
+      .intro-copy strong { color: var(--paper-bright); }
+
+      .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; border: 1px solid var(--line); margin-bottom: 18px; }
+      .selection { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 15px; }
+      .selection-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; color: var(--ink); background: var(--green); font-size: .75rem; font-weight: 800; }
+      .selection div { min-width: 0; }
+      .selection strong, .selection small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .selection strong { font-size: .84rem; }
+      .selection small { margin-top: 3px; color: var(--copy); font-size: .68rem; }
+      .segmented { display: flex; border-left: 1px solid var(--line); }
+      .segmented button { min-width: 92px; min-height: 54px; border: 0; border-right: 1px solid var(--line); padding: 0 14px; color: var(--copy); background: transparent; cursor: pointer; font-size: .75rem; font-weight: 700; }
+      .segmented button:last-child { border-right: 0; }
+      .segmented button[aria-pressed="true"] { color: var(--ink); background: var(--lilac); }
+      .share { min-width: 132px; border: 0; border-left: 1px solid var(--line); color: var(--ink); background: var(--green); cursor: pointer; font-size: .78rem; font-weight: 800; }
+
+      .comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
+      .specimen { min-width: 0; overflow: hidden; border-radius: 8px; color: var(--ink); background: var(--paper-bright); box-shadow: var(--shadow); }
+      .specimen-head { min-height: 64px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #b9ae9d; }
+      .specimen-head h2 { margin: 0; font-size: 1rem; letter-spacing: -.02em; }
+      .specimen-head p { margin: 4px 0 0; color: #6e675e; font-size: .68rem; }
+      .stage-chip { padding: 7px 9px; border: 1px solid #8f8578; border-radius: 999px; font-size: .66rem; font-weight: 740; }
+      .canvas { min-height: 485px; display: grid; place-items: center; padding: clamp(18px, 3vw, 34px); background: var(--paper); }
+      .browser { width: 100%; height: 100%; min-height: 410px; display: grid; grid-template-rows: 30px 1fr; overflow: hidden; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper-bright); transform-origin: top center; transition: width 240ms cubic-bezier(.16,1,.3,1); }
+      .browser-bar { display: flex; align-items: center; gap: 5px; padding: 0 10px; color: var(--ink); background: #efe1cb; border-bottom: 1px solid #b9ae9d; }
+      .browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .8; }
+      .browser-body { display: grid; grid-template-rows: 42% 58%; }
+      .scene { position: relative; overflow: hidden; background: var(--cobalt); }
+      .scene::before, .scene::after { content: ""; position: absolute; bottom: -20%; width: 65%; height: 64%; background: var(--lilac); clip-path: polygon(50% 0,100% 100%,0 100%); }
+      .scene::before { left: -8%; }
+      .scene::after { right: -14%; transform: scale(.78); transform-origin: bottom right; }
+      .sun { position: absolute; top: 18%; right: 14%; width: 38px; height: 38px; border-radius: 50%; background: var(--pink); }
+      .scene-label { position: absolute; left: 18px; bottom: 17px; z-index: 1; width: 46%; display: grid; gap: 6px; }
+      .scene-label i { height: 7px; background: var(--paper-bright); }
+      .scene-label i:last-child { width: 60%; }
+      .browser-lower { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--paper-bright); }
+      .copy-block { display: grid; align-content: start; gap: 10px; padding: 22px; }
+      .copy-block i { display: block; height: 7px; background: var(--ink); }
+      .copy-block i:nth-child(2), .copy-block i:nth-child(3) { background: #9e9588; }
+      .copy-block i:nth-child(3) { width: 72%; }
+      .copy-block b { width: 86px; height: 27px; margin-top: 8px; background: var(--green); }
+      .mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 18px; background: var(--soft-ink); }
+      .mini-grid i { border: 1px solid #665f56; background: #312f2b; }
+      .mini-grid i.active { background: var(--lilac); }
+
+      .sequence-body { display: grid; grid-template-columns: 38% 62%; height: 100%; min-height: 410px; color: var(--paper-bright); background: var(--soft-ink); }
+      .flows { display: grid; align-content: start; gap: 8px; padding: 20px 16px; border-right: 1px solid #4b4741; }
+      .flows strong { margin-bottom: 5px; font-size: .82rem; }
+      .flows button { min-height: 34px; border: 1px solid #5d574f; border-radius: 999px; padding: 0 12px; text-align: left; color: var(--copy); background: transparent; font-size: .68rem; }
+      .flows button:first-of-type { border-color: var(--green); color: var(--paper-bright); background: #1d392b; }
+      .map { position: relative; min-height: 360px; }
+      .node { position: absolute; min-width: 78px; padding: 11px 10px; border: 1px solid #726a60; border-radius: 5px; text-align: center; color: var(--paper-bright); background: var(--ink); font-size: .64rem; }
+      .node.one { top: 18%; left: 9%; }
+      .node.two { top: 18%; right: 8%; }
+      .node.three { bottom: 18%; left: 30%; }
+      .node.four { bottom: 18%; right: 8%; }
+      .node.active { border-color: var(--green); background: #173626; }
+      .map-line { position: absolute; height: 2px; transform-origin: left center; background: var(--coral); }
+      .map-line.a { width: 42%; top: 29%; left: 29%; transform: rotate(0deg); }
+      .map-line.b { width: 31%; top: 42%; left: 27%; transform: rotate(47deg); }
+      .map-line.c { width: 27%; bottom: 29%; left: 49%; transform: rotate(0deg); background: var(--green); }
+      .specimen-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 13px 16px; border-top: 1px solid #b9ae9d; }
+      .facts { display: flex; gap: 14px; color: #6e675e; font-size: .68rem; }
+      .open-link { color: var(--ink); font-size: .72rem; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 4px; }
+      .browser[data-width="mobile"] { width: min(310px, 100%); }
+      .browser[data-width="mobile"] .browser-lower, .browser[data-width="mobile"] .sequence-body { grid-template-columns: 1fr; }
+      .browser[data-width="mobile"] .mini-grid, .browser[data-width="mobile"] .flows { display: none; }
+      .browser[data-width="mobile"] .map { min-height: 330px; }
+
+      .review-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); color: var(--copy); font-size: .78rem; }
+      .review-note strong { color: var(--paper-bright); }
+      .review-note span:last-child { color: var(--green); font-weight: 760; }
+
+      @media (max-width: 900px) {
+        .intro { grid-template-columns: 1fr; align-items: start; }
+        .intro-copy { justify-self: start; }
+        .toolbar { grid-template-columns: 1fr auto; }
+        .selection { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
+        .segmented { border-left: 0; }
+        .share { min-height: 54px; }
+        .comparison { grid-template-columns: 1fr; }
+      }
+      @media (max-width: 560px) {
+        nav a { display: none; }
+        h1 { font-size: clamp(3rem, 16vw, 4.8rem); }
+        .selection small { max-width: 76vw; }
+        .segmented button { min-width: 0; flex: 1; }
+        .share { min-width: 110px; }
+        .canvas { min-height: 450px; padding: 14px; }
+        .browser { min-height: 395px; }
+        .review-note { align-items: flex-start; flex-direction: column; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .browser { transition: none; }
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      THESIS: Artifact comparison should feel native to Effective HTML and keep the work larger than its controls.
+      OWN-WORLD: Working Atlas ink, warm paper, printed cobalt/lilac/green, sharp rules, and browser specimens.
+      STORY: Confirm two selected artifacts, change preview width, and judge them side by side.
+      FIRST VIEWPORT: Heavy thesis and compact controls above two unequal, inspectable paper browser frames.
+      FORM: System-aligned product mockup extending the approved catalog language; seed effective-html-compare-mockup.
+      FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
+    -->
+    <div class="shell">
+      <header class="topbar">
+        <div class="brand"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>Effective HTML</div>
+        <nav aria-label="Primary"><a href="#">Catalog</a><a href="#">Guide</a><a href="#" aria-current="page">Compare</a><button class="theme-dot" type="button" aria-label="Theme"></button></nav>
+      </header>
+      <main>
+        <section class="intro">
+          <h1>Put the work side by side.</h1>
+          <div class="intro-copy"><p>Compare the <strong>actual HTML artifacts</strong> at the same width. Keep their source, purpose, and live behavior one click away.</p></div>
+        </section>
+
+        <section class="toolbar" aria-label="Comparison controls">
+          <div class="selection"><span class="selection-count">2</span><div><strong>Artifacts selected</strong><small>Release readiness · Architecture request paths</small></div></div>
+          <div class="segmented" role="group" aria-label="Preview width">
+            <button type="button" data-preview-width="desktop" aria-pressed="true">Desktop</button>
+            <button type="button" data-preview-width="mobile" aria-pressed="false">Mobile</button>
+          </div>
+          <button class="share" type="button">Copy review link</button>
+        </section>
+
+        <section class="comparison" aria-label="Selected artifacts">
+          <article class="specimen">
+            <header class="specimen-head"><div><h2>Release readiness</h2><p>Tests hierarchy, evidence, and responsive structure</p></div><span class="stage-chip">Wireframe</span></header>
+            <div class="canvas">
+              <div class="browser" data-preview>
+                <div class="browser-bar"><i></i><i></i><i></i></div>
+                <div class="browser-body">
+                  <div class="scene"><span class="sun"></span><span class="scene-label"><i></i><i></i></span></div>
+                  <div class="browser-lower"><span class="copy-block"><i></i><i></i><i></i><b></b></span><span class="mini-grid"><i></i><i class="active"></i><i></i><i></i></span></div>
+                </div>
+              </div>
+            </div>
+            <footer class="specimen-foot"><div class="facts"><span>3 directions</span><span>Responsive</span></div><a class="open-link" href="#">Open HTML ↗</a></footer>
+          </article>
+
+          <article class="specimen">
+            <header class="specimen-head"><div><h2>Architecture request paths</h2><p>Traces six flows through one interactive system map</p></div><span class="stage-chip">Diagram</span></header>
+            <div class="canvas">
+              <div class="browser" data-preview>
+                <div class="browser-bar"><i></i><i></i><i></i></div>
+                <div class="sequence-body">
+                  <div class="flows"><strong>Request paths</strong><button type="button">Create</button><button type="button">Live edit</button><button type="button">Agent edit</button><button type="button">Public read</button></div>
+                  <div class="map"><span class="map-line a"></span><span class="map-line b"></span><span class="map-line c"></span><span class="node one active">Browser</span><span class="node two">Worker</span><span class="node three active">Room</span><span class="node four">Storage</span></div>
+                </div>
+              </div>
+            </div>
+            <footer class="specimen-foot"><div class="facts"><span>6 paths</span><span>Interactive</span></div><a class="open-link" href="#">Open HTML ↗</a></footer>
+          </article>
+        </section>
+        <div class="review-note"><span><strong>Reviewing structure and behavior.</strong> Visual finish differs because each artifact answers a different question.</span><span>Clear comparison</span></div>
+      </main>
+    </div>
+    <script>
+      const widthButtons = [...document.querySelectorAll("[data-preview-width]")];
+      const previews = [...document.querySelectorAll("[data-preview]")];
+      widthButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          const width = button.dataset.previewWidth;
+          previews.forEach((preview) => preview.dataset.width = width);
+          widthButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
+        });
+      });
+    </script>
+  </body>
+</html>

site/public/examples/product-design/effective-html-compare-wireframe.html

@@ -0,0 +1,235 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Effective HTML artifact comparison wireframe</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --ink: #171717;
+        --muted: #686868;
+        --line: #b8b8b8;
+        --soft-line: #d8d8d8;
+        --paper: #f6f6f3;
+        --surface: #ffffff;
+        --shade: #e8e8e4;
+        --focus: #2457d6;
+        font-family: Arial, Helvetica, sans-serif;
+      }
+
+      * { box-sizing: border-box; }
+      html { background: var(--paper); }
+      body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); }
+      button, a { font: inherit; }
+      button { color: inherit; }
+      button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
+
+      .shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
+      .topbar {
+        min-height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 24px;
+        padding: 12px clamp(18px, 3vw, 44px);
+        border-bottom: 1px solid var(--line);
+        background: var(--surface);
+      }
+      .brand { display: flex; align-items: center; gap: 10px; font-weight: 750; }
+      .mark { width: 18px; height: 18px; border: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; }
+      .mark i { display: block; background: var(--ink); }
+      .mark i:last-child { background: var(--shade); }
+      .top-actions { display: flex; align-items: center; gap: 10px; }
+      .quiet-button, .solid-button {
+        min-height: 40px;
+        border: 1px solid var(--ink);
+        padding: 0 14px;
+        background: var(--surface);
+        cursor: pointer;
+      }
+      .solid-button { color: var(--surface); background: var(--ink); }
+
+      main { width: min(1380px, 100%); margin: 0 auto; padding: clamp(24px, 4vw, 56px); }
+      .intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; margin-bottom: 28px; }
+      h1 { max-width: 720px; margin: 0; font-size: clamp(2.3rem, 5vw, 4.8rem); line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
+      .intro p { max-width: 52ch; margin: 18px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
+      .layout-switch { display: flex; border: 1px solid var(--ink); background: var(--surface); }
+      .layout-switch button { min-height: 42px; border: 0; border-right: 1px solid var(--ink); padding: 0 15px; background: transparent; cursor: pointer; }
+      .layout-switch button:last-child { border-right: 0; }
+      .layout-switch button[aria-pressed="true"] { color: var(--surface); background: var(--ink); }
+
+      .compare { min-height: 610px; border: 1px solid var(--ink); background: var(--surface); }
+      .compare-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; border-bottom: 1px solid var(--ink); }
+      .selection { display: flex; align-items: center; gap: 8px; min-width: 0; }
+      .selection strong { font-size: .9rem; }
+      .selection span { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .viewport-tools { display: flex; gap: 6px; }
+      .viewport-tools button { width: 40px; height: 36px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
+      .viewport-tools button[aria-pressed="true"] { border-color: var(--ink); background: var(--shade); }
+
+      .comparison-stage { display: grid; min-height: 550px; }
+      .artifact { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; }
+      .artifact + .artifact { border-left: 1px solid var(--ink); }
+      .artifact-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--soft-line); }
+      .artifact-head h2 { margin: 0; font-size: 1rem; }
+      .artifact-head span { color: var(--muted); font-size: .72rem; }
+      .canvas { min-height: 390px; padding: clamp(18px, 3vw, 36px); background: var(--paper); }
+      .browser { height: 100%; min-height: 345px; display: grid; grid-template-rows: 28px 1fr; border: 1px solid var(--ink); background: var(--surface); }
+      .browser-bar { display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--line); }
+      .browser-bar i { width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; }
+      .diagram { display: grid; grid-template-columns: 1fr .8fr; gap: 14px; padding: 18px; }
+      .diagram-main { display: grid; grid-template-rows: 20px 54px 1fr; gap: 12px; }
+      .line { height: 10px; background: var(--ink); }
+      .line.short { width: 54%; }
+      .line.thin { height: 5px; background: var(--line); }
+      .hero-block { border: 1px solid var(--ink); background: var(--shade); }
+      .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+      .cards i { min-height: 66px; border: 1px solid var(--line); background: var(--surface); }
+      .diagram-side { display: grid; grid-template-rows: 1fr auto; gap: 10px; }
+      .diagram-side i { border: 1px solid var(--line); background: var(--shade); }
+      .diagram-side i:last-child { min-height: 42px; border-color: var(--ink); background: var(--ink); }
+      .artifact-foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--soft-line); }
+      .artifact-foot span { min-height: 54px; display: grid; place-items: center; border-right: 1px solid var(--soft-line); color: var(--muted); font-size: .75rem; }
+      .artifact-foot span:last-child { border-right: 0; }
+
+      .notes { display: none; border-left: 1px solid var(--ink); background: var(--surface); }
+      .notes h2 { margin: 0; padding: 15px; border-bottom: 1px solid var(--ink); font-size: 1rem; }
+      .note-list { display: grid; gap: 0; }
+      .note { padding: 16px; border-bottom: 1px solid var(--soft-line); }
+      .note strong { display: block; margin-bottom: 6px; font-size: .82rem; }
+      .note p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
+      .note.active { background: var(--shade); }
+
+      body[data-layout="split"] .comparison-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      body[data-layout="stack"] .comparison-stage { grid-template-columns: 1fr; }
+      body[data-layout="stack"] .artifact + .artifact { border-left: 0; border-top: 1px solid var(--ink); }
+      body[data-layout="stack"] .canvas { min-height: 320px; }
+      body[data-layout="stack"] .browser { min-height: 275px; }
+      body[data-layout="focus"] .compare { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
+      body[data-layout="focus"] .comparison-stage { grid-template-columns: 1fr; }
+      body[data-layout="focus"] .artifact + .artifact { display: none; }
+      body[data-layout="focus"] .notes { display: block; }
+      body[data-layout="focus"] .compare-toolbar { grid-column: 1 / -1; }
+
+      .review-question { margin: 22px 0 0; padding-left: 14px; border-left: 1px solid var(--ink); color: var(--muted); font-size: .9rem; line-height: 1.5; }
+      footer { padding: 16px clamp(18px, 3vw, 44px); border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
+
+      @media (max-width: 820px) {
+        .intro { grid-template-columns: 1fr; align-items: start; }
+        .layout-switch { width: 100%; }
+        .layout-switch button { flex: 1; padding-inline: 8px; }
+        body[data-layout="split"] .comparison-stage { grid-template-columns: 1fr; }
+        body[data-layout="split"] .artifact + .artifact { border-left: 0; border-top: 1px solid var(--ink); }
+        body[data-layout="focus"] .compare { grid-template-columns: 1fr; }
+        body[data-layout="focus"] .notes { border-top: 1px solid var(--ink); border-left: 0; }
+      }
+      @media (max-width: 560px) {
+        .top-actions .quiet-button { display: none; }
+        main { padding: 20px 14px 36px; }
+        .intro, .intro > div, .compare, .review-question { min-width: 0; max-width: 100%; }
+        .layout-switch { width: min(100%, 360px); min-width: 0; max-width: calc(100vw - 28px); }
+        .layout-switch button { flex: 1 1 0; width: 0; min-width: 0; padding-inline: 4px; font-size: .72rem; }
+        .compare-toolbar { align-items: flex-start; }
+        .selection { width: 0; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 3px; }
+        .selection span { max-width: 100%; }
+        .viewport-tools button:nth-child(2) { display: none; }
+        .diagram { grid-template-columns: 1fr; }
+        .diagram-side { grid-template-columns: 1fr 80px; grid-template-rows: 76px; }
+      }
+    </style>
+  </head>
+  <body data-layout="split">
+    <!--
+      THESIS: Compare real artifacts without hiding them inside cards or prose.
+      OWN-WORLD: Deliberately plain grayscale wireframe with exact rules and realistic catalog content.
+      STORY: Choose a comparison structure, inspect two artifacts, and identify the layout worth refining.
+      FIRST VIEWPORT: A compact brief above a full-width comparison workspace with two equal live canvases.
+      FORM: Low-fidelity product wireframe with three structural directions; seed effective-html-compare-wireframe.
+      FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
+    -->
+    <div class="shell">
+      <header class="topbar">
+        <div class="brand"><span class="mark" aria-hidden="true"><i></i><i></i></span>Effective HTML</div>
+        <div class="top-actions"><button class="quiet-button" type="button">Clear comparison</button><button class="solid-button" type="button">Share review</button></div>
+      </header>
+      <main>
+        <section class="intro" aria-labelledby="page-title">
+          <div>
+            <h1 id="page-title">Compare the artifacts, not the descriptions.</h1>
+            <p>Review the same decision in two HTML artifacts. The structure below is intentionally unfinished; this pass is about comparison, not styling.</p>
+          </div>
+          <div class="layout-switch" role="group" aria-label="Wireframe direction">
+            <button type="button" data-layout-choice="split" aria-pressed="true">Split</button>
+            <button type="button" data-layout-choice="stack" aria-pressed="false">Stack</button>
+            <button type="button" data-layout-choice="focus" aria-pressed="false">Focus + notes</button>
+          </div>
+        </section>
+
+        <section class="compare" aria-label="Artifact comparison wireframe">
+          <div class="compare-toolbar">
+            <div class="selection"><strong>2 selected</strong><span>Release readiness wireframe · Architecture request-path explorer</span></div>
+            <div class="viewport-tools" role="group" aria-label="Preview width">
+              <button type="button" aria-label="Desktop width" aria-pressed="true">▭</button>
+              <button type="button" aria-label="Tablet width" aria-pressed="false">□</button>
+              <button type="button" aria-label="Mobile width" aria-pressed="false">▯</button>
+            </div>
+          </div>
+          <div class="comparison-stage">
+            <article class="artifact">
+              <header class="artifact-head"><h2>Release readiness</h2><span>Wireframe · structure</span></header>
+              <div class="canvas">
+                <div class="browser" aria-label="Abstract release readiness wireframe">
+                  <div class="browser-bar"><i></i><i></i><i></i></div>
+                  <div class="diagram">
+                    <div class="diagram-main"><span class="line short"></span><span class="hero-block"></span><span class="cards"><i></i><i></i><i></i><i></i></span></div>
+                    <div class="diagram-side"><i></i><i></i></div>
+                  </div>
+                </div>
+              </div>
+              <footer class="artifact-foot"><span>Hierarchy</span><span>Responsive</span><span>3 directions</span></footer>
+            </article>
+            <article class="artifact">
+              <header class="artifact-head"><h2>Request paths</h2><span>Diagram · interaction</span></header>
+              <div class="canvas">
+                <div class="browser" aria-label="Abstract request path explorer">
+                  <div class="browser-bar"><i></i><i></i><i></i></div>
+                  <div class="diagram">
+                    <div class="diagram-main"><span class="line"></span><span class="hero-block"></span><span class="cards"><i></i><i></i><i></i><i></i></span></div>
+                    <div class="diagram-side"><i></i><i></i></div>
+                  </div>
+                </div>
+              </div>
+              <footer class="artifact-foot"><span>Sequence</span><span>6 paths</span><span>Interactive</span></footer>
+            </article>
+          </div>
+          <aside class="notes" aria-label="Review notes">
+            <h2>Review notes</h2>
+            <div class="note-list">
+              <div class="note active"><strong>Keep previews large</strong><p>The artifact should remain readable without opening another tab.</p></div>
+              <div class="note"><strong>Preserve source links</strong><p>HTML, SVG, and guide links need equal visibility.</p></div>
+              <div class="note"><strong>Mobile comparison</strong><p>Stack artifacts; do not shrink two canvases side by side.</p></div>
+            </div>
+          </aside>
+        </section>
+        <p class="review-question"><strong>Review question:</strong> Which structure makes differences easiest to inspect without losing the artifacts themselves?</p>
+      </main>
+      <footer>Wireframe · visual design and production behavior intentionally deferred</footer>
+    </div>
+    <script>
+      const body = document.body;
+      const layoutButtons = [...document.querySelectorAll("[data-layout-choice]")];
+      layoutButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          body.dataset.layout = button.dataset.layoutChoice;
+          layoutButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
+        });
+      });
+
+      const viewportButtons = [...document.querySelectorAll(".viewport-tools button")];
+      viewportButtons.forEach((button) => {
+        button.addEventListener("click", () => viewportButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button))));
+      });
+    </script>
+  </body>
+</html>

site/public/examples/product-design/plannotator-review-mockup.html

@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Plannotator artifact review mockup</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --shell: #080d18;
+        --shell-2: #0d1421;
+        --panel: #111a28;
+        --panel-2: #172131;
+        --border: #283449;
+        --border-soft: #202b3d;
+        --text: #e7ecf5;
+        --muted: #8e99aa;
+        --faint: #657186;
+        --purple: #a68af8;
+        --purple-soft: #2a2440;
+        --green: #43d077;
+        --amber: #e5ad55;
+        --danger: #ed7180;
+        --paper: #f7f4ed;
+        --paper-ink: #171716;
+        --paper-line: #d5cec1;
+        font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+      * { box-sizing: border-box; }
+      html, body { min-height: 100%; }
+      body { min-width: 320px; margin: 0; color: var(--text); background: var(--shell); overflow: hidden; }
+      button, textarea { font: inherit; }
+      button { color: inherit; }
+      button:focus-visible, textarea:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
+      .app { height: 100vh; display: grid; grid-template-rows: 54px 1fr; }
+      .topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--border); background: #0a101c; }
+      .brand { display: flex; align-items: center; gap: 12px; font-size: .84rem; font-weight: 760; }
+      .brand small { padding: 4px 7px; border-radius: 4px; color: var(--green); background: #112a21; font-size: .58rem; font-weight: 760; }
+      .file { min-width: 0; color: var(--muted); font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .top-actions { display: flex; align-items: center; gap: 7px; }
+      .top-actions button { min-height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 0 11px; background: var(--panel); cursor: pointer; font-size: .68rem; font-weight: 650; }
+      .top-actions .send { border-color: #6d5dc1; background: var(--purple-soft); }
+      .top-actions .approve { border-color: #286f47; color: #07150d; background: var(--green); }
+
+      .workspace { min-height: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) 330px; }
+      .tools { display: grid; align-content: start; gap: 8px; padding: 10px 6px; border-right: 1px solid var(--border); background: #0a101b; }
+      .tool { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font-size: .72rem; }
+      .tool[aria-pressed="true"] { border-color: #5f50a9; color: var(--text); background: var(--purple-soft); }
+
+      .canvas-shell { min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px 1fr; background: #0b111d; }
+      .canvas-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 14px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .66rem; }
+      .canvas-bar strong { color: var(--text); font-weight: 650; }
+      .canvas-controls { display: flex; gap: 6px; }
+      .canvas-controls button { min-height: 28px; border: 1px solid var(--border); border-radius: 5px; padding: 0 9px; background: var(--panel); color: var(--muted); font-size: .62rem; }
+      .canvas-controls button[aria-pressed="true"] { color: var(--text); border-color: #5d4fa2; background: var(--purple-soft); }
+      .canvas { min-height: 0; overflow: auto; padding: clamp(18px, 3vw, 42px); background: #0d1420; }
+      .page { position: relative; width: min(1050px, 100%); min-height: 710px; margin: 0 auto; overflow: hidden; border-radius: 6px; color: var(--paper-ink); background: var(--paper); box-shadow: 0 26px 70px rgba(0, 0, 0, .45); transition: width 240ms cubic-bezier(.16,1,.3,1); }
+      .page[data-width="mobile"] { width: min(390px, 100%); }
+      .site-nav { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--paper-line); background: #171716; color: #fff9ef; }
+      .site-brand { display: flex; align-items: center; gap: 8px; font-weight: 820; letter-spacing: -.03em; }
+      .site-mark { width: 16px; height: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
+      .site-mark i { background: #fff9ef; }
+      .site-mark i:last-child { background: #1bae61; }
+      .site-links { display: flex; gap: 18px; font-size: .7rem; }
+      .page-content { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; padding: 42px 36px 52px; }
+      .page[data-width="mobile"] .page-content { grid-template-columns: 1fr; padding: 30px 20px; }
+      .hero-copy h1 { margin: 0; font-size: clamp(2.7rem, 5vw, 5.5rem); line-height: .86; letter-spacing: -.045em; }
+      .page[data-width="mobile"] .hero-copy h1 { font-size: 3.3rem; }
+      .hero-copy p { max-width: 38ch; margin: 22px 0; color: #5c574f; line-height: 1.55; }
+      .hero-actions { display: flex; gap: 8px; }
+      .hero-actions button { min-height: 42px; border: 1px solid #171716; border-radius: 5px; padding: 0 13px; background: transparent; color: #171716; font-size: .72rem; font-weight: 760; }
+      .hero-actions button:first-child { background: #1bae61; }
+      .folio { min-height: 440px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(10, 1fr); }
+      .sheet { border: 1px solid #171716; border-radius: 5px; box-shadow: 0 14px 24px rgba(20,20,19,.2); }
+      .sheet.a { grid-column: 1 / 8; grid-row: 2 / 10; transform: rotate(-2deg); background: #f3e6d2; }
+      .sheet.b { grid-column: 5 / 13; grid-row: 1 / 8; z-index: 1; transform: rotate(2deg); background: #1649d8; }
+      .sheet.c { grid-column: 4 / 11; grid-row: 5 / 11; z-index: 2; background: #fff9ef; }
+      .sheet.c::before { content: ""; display: block; height: 32%; background: #a884e8; border-bottom: 1px solid #171716; }
+      .sheet.c::after { content: ""; display: block; width: 58%; height: 8px; margin: 28px 20px; background: #171716; box-shadow: 0 18px 0 #1bae61, 0 36px 0 #d8cebf; }
+      .annotation-highlight { position: absolute; left: 7%; top: 37%; width: 31%; height: 28%; border: 2px solid var(--amber); border-radius: 4px; background: rgba(229,173,85,.1); }
+      .annotation-pin { position: absolute; left: calc(38% - 14px); top: calc(37% - 14px); width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #0b111d; border-radius: 50%; color: #0b111d; background: var(--amber); font-size: .68rem; font-weight: 850; box-shadow: 0 6px 14px rgba(0,0,0,.2); }
+      .page[data-width="mobile"] .annotation-highlight { left: 5%; top: 39%; width: 89%; height: 21%; }
+      .page[data-width="mobile"] .annotation-pin { left: calc(94% - 14px); top: calc(39% - 14px); }
+      .page[data-width="mobile"] .folio { min-height: 340px; }
+
+      .sidebar { min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px auto 1fr auto; border-left: 1px solid var(--border); background: var(--shell-2); }
+      .sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--border); font-size: .72rem; font-weight: 720; }
+      .sidebar-head span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--purple); background: var(--purple-soft); font-size: .62rem; }
+      .summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
+      .summary div { padding: 12px 9px; border-right: 1px solid var(--border-soft); }
+      .summary div:last-child { border-right: 0; }
+      .summary strong, .summary small { display: block; }
+      .summary strong { font-size: .78rem; }
+      .summary small { margin-top: 4px; color: var(--faint); font-size: .56rem; }
+      .comments { overflow: auto; }
+      .comment { width: 100%; display: block; padding: 14px 13px; border: 0; border-bottom: 1px solid var(--border-soft); text-align: left; background: transparent; cursor: pointer; }
+      .comment[aria-pressed="true"] { background: var(--panel-2); }
+      .comment-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
+      .comment-meta strong { color: var(--amber); font-size: .62rem; }
+      .comment-meta span { color: var(--faint); font: .56rem ui-monospace, SFMono-Regular, Menlo, monospace; }
+      .comment p { margin: 0; color: var(--text); font-size: .7rem; line-height: 1.5; }
+      .quote { margin: 9px 0 0; padding: 8px; border-radius: 5px; color: var(--muted); background: #0b121e; font: .6rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
+      .sidebar-foot { display: grid; gap: 9px; padding: 12px; border-top: 1px solid var(--border); }
+      .sidebar-foot button { min-height: 38px; border: 1px solid #6e5fc0; border-radius: 6px; background: var(--purple-soft); font-size: .68rem; font-weight: 700; }
+      .copy { color: var(--muted); text-align: center; font-size: .57rem; }
+
+      .toast { position: fixed; right: 24px; bottom: 24px; max-width: 330px; padding: 13px 15px; border: 1px solid #397651; border-radius: 7px; color: #dff7e8; background: #153524; box-shadow: 0 16px 36px rgba(0,0,0,.4); transform: translateY(12px); opacity: 0; pointer-events: none; transition: transform 220ms cubic-bezier(.19,1,.22,1), opacity 180ms ease; font-size: .72rem; }
+      .toast[data-visible="true"] { transform: translateY(0); opacity: 1; }
+
+      @media (max-width: 960px) {
+        body { overflow: auto; }
+        .app { height: auto; min-height: 100vh; }
+        .workspace { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: minmax(660px, 1fr) auto; }
+        .sidebar { grid-column: 1 / -1; grid-row: 2; min-height: 420px; border-top: 1px solid var(--border); border-left: 0; }
+      }
+      @media (max-width: 620px) {
+        .topbar { grid-template-columns: 1fr auto; }
+        .file, .top-actions button:not(.send) { display: none; }
+        .workspace { grid-template-columns: 1fr; }
+        .tools { display: none; }
+        .canvas { padding: 14px 8px; }
+        .page-content { gap: 22px; }
+        .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .page, .toast { transition: opacity 180ms ease; }
+        .toast { transform: none; }
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      THESIS: Plannotator review keeps the rendered artifact central while comments remain immediately actionable.
+      OWN-WORLD: Dense midnight review shell, muted blue-gray panels, purple selection, amber annotations, and green completion.
+      STORY: Inspect the rendered HTML, select the highlighted annotation, and send concise feedback to the agent.
+      FIRST VIEWPORT: A full browser review workspace with narrow tools, dominant artifact canvas, and compact annotation rail.
+      FORM: System-aligned Plannotator mockup based on the current review surfaces; seed plannotator-review-mockup.
+      FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
+    -->
+    <div class="app">
+      <header class="topbar">
+        <div class="brand">Plannotator <small>HTML review</small></div>
+        <div class="file">plannotator/effective-html · effective-html-compare-mockup.html</div>
+        <div class="top-actions"><button type="button">Close</button><button class="send" type="button" data-send>Send feedback</button><button class="approve" type="button">Approve</button></div>
+      </header>
+      <main class="workspace">
+        <nav class="tools" aria-label="Annotation tools"><button class="tool" type="button" aria-label="Select" aria-pressed="true">↖</button><button class="tool" type="button" aria-label="Markup" aria-pressed="false">✎</button><button class="tool" type="button" aria-label="Comment" aria-pressed="false">▢</button><button class="tool" type="button" aria-label="Hide markers" aria-pressed="false">◉</button></nav>
+        <section class="canvas-shell">
+          <header class="canvas-bar"><span><strong>Rendered HTML</strong> · local sample data</span><div class="canvas-controls" role="group" aria-label="Rendered width"><button type="button" data-canvas-width="desktop" aria-pressed="true">Desktop</button><button type="button" data-canvas-width="mobile" aria-pressed="false">Mobile</button></div></header>
+          <div class="canvas">
+            <article class="page" data-page>
+              <header class="site-nav"><div class="site-brand"><span class="site-mark"><i></i><i></i></span>Effective HTML</div><div class="site-links"><span>Catalog</span><span>Guide</span><span>Compare</span></div></header>
+              <div class="page-content">
+                <section class="hero-copy"><h1>Put the work side by side.</h1><p>Compare the actual HTML artifacts at the same width. Keep their source, purpose, and live behavior one click away.</p><div class="hero-actions"><button type="button">Browse artifacts</button><button type="button">Clear comparison</button></div></section>
+                <div class="folio"><span class="sheet a"></span><span class="sheet b"></span><span class="sheet c"></span></div>
+              </div>
+              <div class="annotation-highlight" aria-hidden="true"></div><span class="annotation-pin" aria-hidden="true">1</span>
+            </article>
+          </div>
+        </section>
+        <aside class="sidebar">
+          <header class="sidebar-head">Annotations <span>3</span></header>
+          <div class="summary"><div><strong>3</strong><small>Open</small></div><div><strong>1</strong><small>Selected</small></div><div><strong>0</strong><small>Blocking</small></div></div>
+          <div class="comments">
+            <button class="comment" type="button" aria-pressed="true"><span class="comment-meta"><strong>Comment</strong><span>hero · 1m</span></span><p>The comparison action should appear before the secondary catalog link.</p><div class="quote">Browse artifacts · Clear comparison</div></button>
+            <button class="comment" type="button" aria-pressed="false"><span class="comment-meta"><strong>Comment</strong><span>mobile · 3m</span></span><p>Keep the artifact titles visible when the preview switches to mobile.</p></button>
+            <button class="comment" type="button" aria-pressed="false"><span class="comment-meta"><strong>Suggestion</strong><span>copy · 5m</span></span><p>Use “Open HTML” instead of “Browse artifacts” when only one artifact opens.</p></button>
+          </div>
+          <footer class="sidebar-foot"><button type="button" data-send>Send 3 annotations</button><span class="copy">Feedback returns to the current agent session</span></footer>
+        </aside>
+      </main>
+    </div>
+    <div class="toast" role="status" aria-live="polite" data-toast>3 annotations ready for the agent.</div>
+    <script>
+      const widthButtons = [...document.querySelectorAll("[data-canvas-width]")];
+      const page = document.querySelector("[data-page]");
+      widthButtons.forEach((button) => button.addEventListener("click", () => {
+        page.dataset.width = button.dataset.canvasWidth;
+        widthButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
+      }));
+
+      const comments = [...document.querySelectorAll(".comment")];
+      comments.forEach((comment) => comment.addEventListener("click", () => comments.forEach((item) => item.setAttribute("aria-pressed", String(item === comment)))));
+
+      const tools = [...document.querySelectorAll(".tool")];
+      tools.forEach((tool) => tool.addEventListener("click", () => tools.forEach((item) => item.setAttribute("aria-pressed", String(item === tool)))));
+
+      const toast = document.querySelector("[data-toast]");
+      let toastTimer;
+      document.querySelectorAll("[data-send]").forEach((button) => button.addEventListener("click", () => {
+        clearTimeout(toastTimer);
+        toast.dataset.visible = "true";
+        toastTimer = setTimeout(() => toast.dataset.visible = "false", 2400);
+      }));
+    </script>
+  </body>
+</html>

site/public/examples/product-design/plannotator-review-wireframe.html

@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Plannotator artifact review wireframe</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --ink: #181818;
+        --muted: #6c6c6c;
+        --line: #aaaaaa;
+        --soft: #dedede;
+        --paper: #f1f1ef;
+        --surface: #fff;
+        --focus: #2156d9;
+        font-family: Arial, Helvetica, sans-serif;
+      }
+      * { box-sizing: border-box; }
+      html, body { min-height: 100%; }
+      body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); }
+      button, textarea { font: inherit; }
+      button:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
+      .frame { min-height: 100vh; display: grid; grid-template-rows: 56px 1fr; }
+      header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 clamp(14px, 3vw, 34px); border-bottom: 1px solid var(--ink); background: var(--surface); }
+      .brand { display: flex; align-items: center; gap: 18px; font-weight: 760; }
+      .brand span { color: var(--muted); font-size: .75rem; font-weight: 500; }
+      .header-actions { display: flex; gap: 8px; }
+      .header-actions button { min-height: 36px; border: 1px solid var(--ink); padding: 0 12px; background: var(--surface); }
+      .header-actions .primary { color: var(--surface); background: var(--ink); }
+
+      main { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
+      .brief { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; padding: clamp(22px, 3vw, 38px) clamp(18px, 4vw, 52px) 24px; }
+      h1 { max-width: 760px; margin: 0; font-size: clamp(2rem, 4.5vw, 4rem); line-height: .95; letter-spacing: -.04em; text-wrap: balance; }
+      .brief p { max-width: 58ch; margin: 14px 0 0; color: var(--muted); line-height: 1.5; }
+      .directions { display: flex; border: 1px solid var(--ink); background: var(--surface); }
+      .directions button { min-height: 42px; border: 0; border-right: 1px solid var(--ink); padding: 0 14px; background: transparent; }
+      .directions button:last-child { border-right: 0; }
+      .directions button[aria-pressed="true"] { color: var(--surface); background: var(--ink); }
+
+      .workspace { min-height: 640px; display: grid; margin: 0 clamp(18px, 4vw, 52px) 40px; border: 1px solid var(--ink); background: var(--surface); overflow: hidden; }
+      .rail { display: grid; align-content: start; gap: 10px; padding: 12px 8px; border-right: 1px solid var(--ink); background: var(--paper); }
+      .rail button { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--surface); }
+      .rail button[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); }
+      .artifact { min-width: 0; display: grid; grid-template-rows: 44px 1fr; }
+      .artifact-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--ink); font-size: .74rem; }
+      .artifact-bar span { color: var(--muted); }
+      .document { position: relative; overflow: auto; padding: clamp(26px, 5vw, 70px); background: #f8f8f6; }
+      .page { width: min(780px, 100%); min-height: 480px; margin: 0 auto; padding: clamp(22px, 5vw, 54px); border: 1px solid var(--line); background: var(--surface); }
+      .page h2 { width: 72%; margin: 0 0 22px; font-size: clamp(1.7rem, 4vw, 3.2rem); line-height: 1; }
+      .page-line { display: block; height: 8px; margin-top: 11px; background: var(--soft); }
+      .page-line.dark { width: 54%; background: var(--ink); }
+      .page-line.short { width: 68%; }
+      .page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
+      .page-grid i { min-height: 116px; border: 1px solid var(--line); background: var(--paper); }
+      .highlight { position: relative; margin-top: 26px; padding: 14px; border: 1px solid var(--ink); background: var(--soft); }
+      .highlight::after { content: "1"; position: absolute; top: 50%; right: -17px; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; transform: translateY(-50%); background: var(--surface); font-size: .75rem; font-weight: 800; }
+
+      .comments { min-width: 0; display: grid; grid-template-rows: 44px 1fr auto; border-left: 1px solid var(--ink); }
+      .comments-head { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--ink); font-size: .78rem; font-weight: 700; }
+      .comments-head span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 50%; font-size: .68rem; }
+      .comment-list { overflow: auto; }
+      .comment { padding: 15px; border-bottom: 1px solid var(--soft); }
+      .comment.active { background: var(--paper); }
+      .comment strong { display: block; margin-bottom: 7px; font-size: .78rem; }
+      .comment p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
+      .composer { display: grid; gap: 8px; padding: 12px; border-top: 1px solid var(--ink); }
+      textarea { min-height: 72px; resize: vertical; border: 1px solid var(--line); padding: 9px; }
+      .composer button { min-height: 36px; border: 0; color: var(--surface); background: var(--ink); }
+
+      body[data-direction="canvas"] .workspace { grid-template-columns: 56px minmax(0, 1fr) 310px; }
+      body[data-direction="comments"] .workspace { grid-template-columns: 56px minmax(0, .78fr) minmax(340px, 1.22fr); }
+      body[data-direction="comments"] .comment { padding-block: 22px; }
+      body[data-direction="queue"] .workspace { grid-template-columns: 280px minmax(0, 1fr); }
+      body[data-direction="queue"] .rail { grid-column: 1; grid-row: 1; grid-template-columns: repeat(4, 38px); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
+      body[data-direction="queue"] .comments { grid-column: 1; grid-row: 1; margin-top: 63px; border-left: 0; border-right: 1px solid var(--ink); }
+      body[data-direction="queue"] .artifact { grid-column: 2; grid-row: 1; }
+      body[data-direction="queue"] .composer { display: none; }
+
+      @media (max-width: 900px) {
+        .brief { grid-template-columns: 1fr; align-items: start; }
+        .directions { width: 100%; }
+        .directions button { flex: 1; padding-inline: 6px; }
+        body[data-direction] .workspace { grid-template-columns: 48px minmax(0, 1fr); }
+        body[data-direction] .comments { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--ink); border-left: 0; margin: 0; }
+        body[data-direction] .artifact { grid-column: 2; grid-row: 1; }
+        body[data-direction] .rail { grid-column: 1; grid-row: 1; border-bottom: 0; }
+        body[data-direction] .composer { display: grid; }
+      }
+      @media (max-width: 560px) {
+        .brand span, .header-actions button:first-child { display: none; }
+        .brief { padding-inline: 14px; }
+        .workspace { margin-inline: 14px; }
+        .directions button { font-size: .7rem; }
+        .document { padding: 18px 12px; }
+        .page-grid { grid-template-columns: 1fr; }
+        .page-grid i { min-height: 76px; }
+      }
+    </style>
+  </head>
+  <body data-direction="canvas">
+    <!--
+      THESIS: The wireframe tests whether the artifact, tools, or feedback should dominate the review.
+      OWN-WORLD: Restrained grayscale product wireframe using Plannotator's real review nouns and actions.
+      STORY: Switch among three structures, inspect the annotated HTML, and decide where reviewer attention belongs.
+      FIRST VIEWPORT: A compact brief above one bounded browser workspace with rail, document, and annotation list.
+      FORM: Low-fidelity interface wireframe with three structural directions; seed plannotator-review-wireframe.
+      FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
+    -->
+    <div class="frame">
+      <header>
+        <div class="brand">Plannotator <span>HTML artifact review · wireframe</span></div>
+        <div class="header-actions"><button type="button">Close</button><button class="primary" type="button">Send annotations</button></div>
+      </header>
+      <main>
+        <section class="brief">
+          <div><h1>Where should review attention live?</h1><p>Compare three structures for reviewing an agent-built HTML artifact. The content and actions stay the same while the workspace emphasis changes.</p></div>
+          <div class="directions" role="group" aria-label="Wireframe direction">
+            <button type="button" data-direction-choice="canvas" aria-pressed="true">Canvas first</button>
+            <button type="button" data-direction-choice="comments" aria-pressed="false">Comments first</button>
+            <button type="button" data-direction-choice="queue" aria-pressed="false">Review queue</button>
+          </div>
+        </section>
+        <section class="workspace" aria-label="Plannotator review wireframe">
+          <nav class="rail" aria-label="Annotation tools"><button type="button" aria-pressed="true">↖</button><button type="button" aria-pressed="false">T</button><button type="button" aria-pressed="false">▱</button><button type="button" aria-pressed="false">○</button></nav>
+          <section class="artifact">
+            <div class="artifact-bar"><strong>effective-html-compare-mockup.html</strong><span>Rendered HTML · 1280px</span></div>
+            <div class="document">
+              <article class="page">
+                <h2>Put the work side by side.</h2>
+                <span class="page-line dark"></span><span class="page-line"></span><span class="page-line short"></span>
+                <span class="page-grid"><i></i><i></i><i></i></span>
+                <div class="highlight"><span class="page-line dark"></span><span class="page-line short"></span></div>
+              </article>
+            </div>
+          </section>
+          <aside class="comments">
+            <div class="comments-head">Annotations <span>3</span></div>
+            <div class="comment-list">
+              <article class="comment active"><strong>Comparison controls</strong><p>Keep the viewport switch visible when the page scrolls.</p></article>
+              <article class="comment"><strong>Mobile behavior</strong><p>Stack the artifacts instead of shrinking both previews.</p></article>
+              <article class="comment"><strong>Source access</strong><p>Give the HTML and source links the same visual weight.</p></article>
+            </div>
+            <form class="composer"><textarea aria-label="New annotation" placeholder="Add a comment"></textarea><button type="button">Add annotation</button></form>
+          </aside>
+        </section>
+      </main>
+    </div>
+    <script>
+      const choices = [...document.querySelectorAll("[data-direction-choice]")];
+      choices.forEach((button) => button.addEventListener("click", () => {
+        document.body.dataset.direction = button.dataset.directionChoice;
+        choices.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
+      }));
+    </script>
+  </body>
+</html>

site/public/examples/product-design/previews/animated/effective-html-compare-mockup.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Animated Effective HTML comparison mockup</title>
+  <desc id="desc">A lilac focus frame moves between the two warm-paper HTML specimens.</desc>
+  <style>
+    .ring{fill:none;stroke:#a884e8;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
+    .left{animation:left 6.4s cubic-bezier(.19,1,.22,1) infinite}
+    .right{animation:right 6.4s cubic-bezier(.19,1,.22,1) infinite}
+    .pulse{fill:#1bae61;opacity:0;transform-box:fill-box;transform-origin:center;animation:pulse 6.4s cubic-bezier(.19,1,.22,1) infinite}
+    @keyframes left{0%,8%{opacity:0;transform:scale(.985)}16%,38%{opacity:1;transform:scale(1)}46%,100%{opacity:0}}
+    @keyframes right{0%,46%{opacity:0;transform:scale(.985)}54%,76%{opacity:1;transform:scale(1)}84%,100%{opacity:0}}
+    @keyframes pulse{0%,82%{opacity:0;transform:scale(.9)}88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1.1)}}
+    @media(prefers-reduced-motion:reduce){.ring,.pulse{animation:none;opacity:0}}
+  </style>
+  <image href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+RWZmZWN0aXZlIEhUTUwgY29tcGFyaXNvbiBtb2NrdXA8L3RpdGxlPgogIDxkZXNjIGlkPSJkZXNjIj5Ud28gd2FybS1wYXBlciBIVE1MIHNwZWNpbWVucyBjb21wYXJlZCBvbiBhIGRhcmsgRWZmZWN0aXZlIEhUTUwgZmllbGQuPC9kZXNjPgogIDxyZWN0IHdpZHRoPSI2NDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjMTQxNDEzIi8+CiAgPHJlY3QgeD0iMjQiIHk9IjIwIiB3aWR0aD0iNTkyIiBoZWlnaHQ9IjQ0IiByeD0iNCIgZmlsbD0iIzIwMjAxZSIgc3Ryb2tlPSIjNmI2MjU3Ii8+CiAgPGNpcmNsZSBjeD0iNDciIGN5PSI0MiIgcj0iMTIiIGZpbGw9IiMxYmFlNjEiLz4KICA8cmVjdCB4PSI3MCIgeT0iMzMiIHdpZHRoPSIxMjQiIGhlaWdodD0iOCIgZmlsbD0iI2ZmZjllZiIvPgogIDxyZWN0IHg9IjcwIiB5PSI0NyIgd2lkdGg9IjE5MCIgaGVpZ2h0PSI1IiBmaWxsPSIjYTk5YzhjIi8+CiAgPHJlY3QgeD0iNDQ1IiB5PSIyMCIgd2lkdGg9IjcyIiBoZWlnaHQ9IjQ0IiBmaWxsPSIjYTg4NGU4Ii8+CiAgPHJlY3QgeD0iNTE3IiB5PSIyMCIgd2lkdGg9Ijk5IiBoZWlnaHQ9IjQ0IiBmaWxsPSIjMWJhZTYxIi8+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgODIpIj4KICAgIDxyZWN0IHdpZHRoPSIyODQiIGhlaWdodD0iMjkyIiByeD0iNiIgZmlsbD0iI2ZmZjllZiIvPgogICAgPHBhdGggZD0iTTAgNDRIMjg0IiBzdHJva2U9IiNiOWFlOWQiLz4KICAgIDxyZWN0IHg9IjE2IiB5PSIxNSIgd2lkdGg9IjExNiIgaGVpZ2h0PSI5IiBmaWxsPSIjMTQxNDEzIi8+CiAgICA8cmVjdCB4PSIxNiIgeT0iMjkiIHdpZHRoPSIxNjAiIGhlaWdodD0iNSIgZmlsbD0iIzZlNjc1ZSIvPgogICAgPHJlY3QgeD0iMjAiIHk9IjYyIiB3aWR0aD0iMjQ0IiBoZWlnaHQ9IjE4OCIgcng9IjQiIGZpbGw9IiNmM2U2ZDIiIHN0cm9rZT0iIzE0MTQxMyIvPgogICAgPHJlY3QgeD0iMjAiIHk9IjYyIiB3aWR0aD0iMjQ0IiBoZWlnaHQ9IjgyIiBmaWxsPSIjMTY0OWQ4Ii8+CiAgICA8cGF0aCBkPSJNMjAgMTQ0TDg4IDEwMEwxNTAgMTQ0WiIgZmlsbD0iI2E4ODRlOCIvPgogICAgPHBhdGggZD0iTTE0MCAxNDRMMjIwIDEwNEwyNjQgMTQ0WiIgZmlsbD0iI2E4ODRlOCIvPgogICAgPGNpcmNsZSBjeD0iMjI2IiBjeT0iOTAiIHI9IjE0IiBmaWxsPSIjZjA5YWE4Ii8+CiAgICA8cmVjdCB4PSIzNCIgeT0iMTYwIiB3aWR0aD0iOTQiIGhlaWdodD0iNyIgZmlsbD0iIzE0MTQxMyIvPgogICAgPHJlY3QgeD0iMzQiIHk9IjE3NiIgd2lkdGg9IjEyMCIgaGVpZ2h0PSI1IiBmaWxsPSIjOWU5NTg4Ii8+CiAgICA8cmVjdCB4PSIzNCIgeT0iMTk2IiB3aWR0aD0iNTQiIGhlaWdodD0iMTkiIGZpbGw9IiMxYmFlNjEiLz4KICAgIDxyZWN0IHg9IjE3NCIgeT0iMTYwIiB3aWR0aD0iNzQiIGhlaWdodD0iNjYiIGZpbGw9IiMyYTI5MjYiLz4KICAgIDxyZWN0IHg9IjE2IiB5PSIyNjUiIHdpZHRoPSI4OCIgaGVpZ2h0PSIxMiIgcng9IjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZlNjc1ZSIvPgogIDwvZz4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMzIgODIpIj4KICAgIDxyZWN0IHdpZHRoPSIyODQiIGhlaWdodD0iMjkyIiByeD0iNiIgZmlsbD0iI2ZmZjllZiIvPgogICAgPHBhdGggZD0iTTAgNDRIMjg0IiBzdHJva2U9IiNiOWFlOWQiLz4KICAgIDxyZWN0IHg9IjE2IiB5PSIxNSIgd2lkdGg9IjE1OCIgaGVpZ2h0PSI5IiBmaWxsPSIjMTQxNDEzIi8+CiAgICA8cmVjdCB4PSIxNiIgeT0iMjkiIHdpZHRoPSIxOTYiIGhlaWdodD0iNSIgZmlsbD0iIzZlNjc1ZSIvPgogICAgPHJlY3QgeD0iMjAiIHk9IjYyIiB3aWR0aD0iMjQ0IiBoZWlnaHQ9IjE4OCIgcng9IjQiIGZpbGw9IiMyNTI1MjIiIHN0cm9rZT0iIzE0MTQxMyIvPgogICAgPHJlY3QgeD0iMjAiIHk9IjYyIiB3aWR0aD0iNzgiIGhlaWdodD0iMTg4IiBmaWxsPSIjMjAyMDFlIi8+CiAgICA8cmVjdCB4PSIzMSIgeT0iNzgiIHdpZHRoPSI1NiIgaGVpZ2h0PSIyMiIgcng9IjExIiBmaWxsPSIjMTczNjI2IiBzdHJva2U9IiMxYmFlNjEiLz4KICAgIDxyZWN0IHg9IjMxIiB5PSIxMDkiIHdpZHRoPSI1NiIgaGVpZ2h0PSIxOCIgcng9IjkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZiNjI1NyIvPgogICAgPHJlY3QgeD0iMzEiIHk9IjEzNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjE4IiByeD0iOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI2MjU3Ii8+CiAgICA8cGF0aCBkPSJNMTMwIDEwNEgyMjVNMTMwIDEwNEwxNzQgMTg1TTE3NCAxODVIMjMyIiBzdHJva2U9IiNlODc0NGYiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPHJlY3QgeD0iMTExIiB5PSI4OSIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzE3MzYyNiIgc3Ryb2tlPSIjMWJhZTYxIi8+CiAgICA8cmVjdCB4PSIyMDciIHk9Ijg5IiB3aWR0aD0iNDQiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSIjMTQxNDEzIiBzdHJva2U9IiM2YjYyNTciLz4KICAgIDxyZWN0IHg9IjE1MSIgeT0iMTc2IiB3aWR0aD0iNDgiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSIjMTczNjI2IiBzdHJva2U9IiMxYmFlNjEiLz4KICAgIDxyZWN0IHg9IjIxMyIgeT0iMTc2IiB3aWR0aD0iNDAiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSIjMTQxNDEzIiBzdHJva2U9IiM2YjYyNTciLz4KICAgIDxyZWN0IHg9IjE2IiB5PSIyNjUiIHdpZHRoPSI4OCIgaGVpZ2h0PSIxMiIgcng9IjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzZlNjc1ZSIvPgogIDwvZz4KPC9zdmc+Cg==" width="640" height="400"/>
+  <rect class="ring left" x="20" y="78" width="292" height="300" rx="8"/>
+  <rect class="ring right" x="328" y="78" width="292" height="300" rx="8"/>
+  <circle class="pulse" cx="47" cy="42" r="16"/>
+</svg>

site/public/examples/product-design/previews/animated/effective-html-compare-wireframe.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Animated Effective HTML comparison wireframe</title>
+  <desc id="desc">Focus moves once between two compared grayscale browser wireframes.</desc>
+  <style>
+    .focus-a,.focus-b{fill:none;stroke:#2457d6;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
+    .focus-a{animation:focus-a 6s cubic-bezier(.19,1,.22,1) infinite}
+    .focus-b{animation:focus-b 6s cubic-bezier(.19,1,.22,1) infinite}
+    @keyframes focus-a{0%,8%{opacity:0;transform:scale(.98)}16%,38%{opacity:1;transform:scale(1)}46%,100%{opacity:0;transform:scale(1)}}
+    @keyframes focus-b{0%,46%{opacity:0;transform:scale(.98)}54%,76%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(1)}}
+    @media(prefers-reduced-motion:reduce){.focus-a,.focus-b{animation:none;opacity:0}}
+  </style>
+  <image href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+RWZmZWN0aXZlIEhUTUwgY29tcGFyaXNvbiB3aXJlZnJhbWU8L3RpdGxlPgogIDxkZXNjIGlkPSJkZXNjIj5Ud28gZ3JheXNjYWxlIGJyb3dzZXIgd2lyZWZyYW1lcyBzaG93biBzaWRlIGJ5IHNpZGUgd2l0aCBhIGNvbXBhcmlzb24gY29udHJvbC48L2Rlc2M+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNmMmYyZWYiLz4KICA8cmVjdCB4PSIyOCIgeT0iMjQiIHdpZHRoPSI1ODQiIGhlaWdodD0iMzUyIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMxNzE3MTciIHN0cm9rZS13aWR0aD0iMiIvPgogIDxwYXRoIGQ9Ik0yOCA3Nkg2MTJNMzIwIDc2VjM3NiIgc3Ryb2tlPSIjMTcxNzE3IiBzdHJva2Utd2lkdGg9IjIiLz4KICA8cmVjdCB4PSI0NiIgeT0iNDAiIHdpZHRoPSIxMjYiIGhlaWdodD0iMTIiIGZpbGw9IiMxNzE3MTciLz4KICA8cmVjdCB4PSI0NDgiIHk9IjM2IiB3aWR0aD0iNzAiIGhlaWdodD0iMjQiIGZpbGw9IiMxNzE3MTciLz4KICA8cmVjdCB4PSI1MTgiIHk9IjM2IiB3aWR0aD0iNzYiIGhlaWdodD0iMjQiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzE3MTcxNyIvPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4IDk4KSI+CiAgICA8cmVjdCB3aWR0aD0iMjUwIiBoZWlnaHQ9IjIzOCIgZmlsbD0iI2Y3ZjdmNCIgc3Ryb2tlPSIjMTcxNzE3Ii8+CiAgICA8cGF0aCBkPSJNMCAzMEgyNTAiIHN0cm9rZT0iIzE3MTcxNyIvPgogICAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxNSIgcj0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTcxNzE3Ii8+CiAgICA8Y2lyY2xlIGN4PSIyNCIgY3k9IjE1IiByPSIzIiBmaWxsPSJub25lIiBzdHJva2U9IiMxNzE3MTciLz4KICAgIDxjaXJjbGUgY3g9IjM2IiBjeT0iMTUiIHI9IjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE3MTcxNyIvPgogICAgPHJlY3QgeD0iMTgiIHk9IjUyIiB3aWR0aD0iMTMyIiBoZWlnaHQ9IjgiIGZpbGw9IiMxNzE3MTciLz4KICAgIDxyZWN0IHg9IjE4IiB5PSI3NiIgd2lkdGg9IjEzMiIgaGVpZ2h0PSI1MiIgZmlsbD0iI2UzZTNkZiIgc3Ryb2tlPSIjODg4Ii8+CiAgICA8cmVjdCB4PSIxNjQiIHk9IjUyIiB3aWR0aD0iNjgiIGhlaWdodD0iMTMwIiBmaWxsPSIjZTNlM2RmIiBzdHJva2U9IiM4ODgiLz4KICAgIDxyZWN0IHg9IjE4IiB5PSIxNDIiIHdpZHRoPSI2MiIgaGVpZ2h0PSI0OCIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjYWFhIi8+CiAgICA8cmVjdCB4PSI5MCIgeT0iMTQyIiB3aWR0aD0iNjIiIGhlaWdodD0iNDgiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2FhYSIvPgogICAgPHJlY3QgeD0iMTgiIHk9IjIwMCIgd2lkdGg9IjYyIiBoZWlnaHQ9IjIwIiBmaWxsPSIjZmZmIiBzdHJva2U9IiNhYWEiLz4KICAgIDxyZWN0IHg9IjkwIiB5PSIyMDAiIHdpZHRoPSI2MiIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjYWFhIi8+CiAgICA8cmVjdCB4PSIxNjQiIHk9IjE5NCIgd2lkdGg9IjY4IiBoZWlnaHQ9IjI2IiBmaWxsPSIjMTcxNzE3Ii8+CiAgPC9nPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0MiA5OCkiPgogICAgPHJlY3Qgd2lkdGg9IjI1MCIgaGVpZ2h0PSIyMzgiIGZpbGw9IiNmN2Y3ZjQiIHN0cm9rZT0iIzE3MTcxNyIvPgogICAgPHBhdGggZD0iTTAgMzBIMjUwIiBzdHJva2U9IiMxNzE3MTciLz4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTUiIHI9IjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE3MTcxNyIvPgogICAgPGNpcmNsZSBjeD0iMjQiIGN5PSIxNSIgcj0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTcxNzE3Ii8+CiAgICA8Y2lyY2xlIGN4PSIzNiIgY3k9IjE1IiByPSIzIiBmaWxsPSJub25lIiBzdHJva2U9IiMxNzE3MTciLz4KICAgIDxyZWN0IHg9IjE4IiB5PSI1MiIgd2lkdGg9IjE2OCIgaGVpZ2h0PSI4IiBmaWxsPSIjMTcxNzE3Ii8+CiAgICA8cmVjdCB4PSIxOCIgeT0iNzYiIHdpZHRoPSIxMzIiIGhlaWdodD0iNTIiIGZpbGw9IiNlM2UzZGYiIHN0cm9rZT0iIzg4OCIvPgogICAgPHJlY3QgeD0iMTY0IiB5PSI1MiIgd2lkdGg9IjY4IiBoZWlnaHQ9IjEzMCIgZmlsbD0iI2UzZTNkZiIgc3Ryb2tlPSIjODg4Ii8+CiAgICA8cmVjdCB4PSIxOCIgeT0iMTQyIiB3aWR0aD0iNjIiIGhlaWdodD0iNDgiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2FhYSIvPgogICAgPHJlY3QgeD0iOTAiIHk9IjE0MiIgd2lkdGg9IjYyIiBoZWlnaHQ9IjQ4IiBmaWxsPSIjZmZmIiBzdHJva2U9IiNhYWEiLz4KICAgIDxyZWN0IHg9IjE4IiB5PSIyMDAiIHdpZHRoPSI2MiIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjYWFhIi8+CiAgICA8cmVjdCB4PSI5MCIgeT0iMjAwIiB3aWR0aD0iNjIiIGhlaWdodD0iMjAiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2FhYSIvPgogICAgPHJlY3QgeD0iMTY0IiB5PSIxOTQiIHdpZHRoPSI2OCIgaGVpZ2h0PSIyNiIgZmlsbD0iIzE3MTcxNyIvPgogIDwvZz4KPC9zdmc+Cg==" width="640" height="400"/>
+  <rect class="focus-a" x="44" y="94" width="258" height="246" rx="2"/>
+  <rect class="focus-b" x="338" y="94" width="258" height="246" rx="2"/>
+</svg>

site/public/examples/product-design/previews/animated/plannotator-review-mockup.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Animated Plannotator review mockup</title>
+  <desc id="desc">The annotation pin and matching comment receive one restrained review pulse.</desc>
+  <style>
+    .pin{fill:#e5ad55;stroke:#080d18;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pin 5.8s cubic-bezier(.19,1,.22,1) infinite}
+    .comment-focus{fill:none;stroke:#a68af8;stroke-width:3;opacity:0;animation:comment 5.8s cubic-bezier(.19,1,.22,1) infinite}
+    .connector{fill:none;stroke:#e5ad55;stroke-width:2;stroke-dasharray:100 110;stroke-dashoffset:100;animation:draw 5.8s cubic-bezier(.19,1,.22,1) infinite}
+    @keyframes pin{0%,12%{transform:scale(1)}20%{transform:scale(1.22)}28%,100%{transform:scale(1)}}
+    @keyframes draw{0%,20%{stroke-dashoffset:100;opacity:0}30%{opacity:1}44%,62%{stroke-dashoffset:0;opacity:1}72%,100%{opacity:0}}
+    @keyframes comment{0%,42%{opacity:0}50%,70%{opacity:1}80%,100%{opacity:0}}
+    @media(prefers-reduced-motion:reduce){.pin,.comment-focus,.connector{animation:none}.connector,.comment-focus{opacity:0}}
+  </style>
+  <image href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+UGxhbm5vdGF0b3IgcmV2aWV3IG1vY2t1cDwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgZGFyayBQbGFubm90YXRvciByZXZpZXcgc3VyZmFjZSBzdXJyb3VuZGluZyBhIHdhcm0gcmVuZGVyZWQgSFRNTCBhcnRpZmFjdCBhbmQgYW5ub3RhdGlvbnMuPC9kZXNjPgogIDxyZWN0IHdpZHRoPSI2NDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjMDgwZDE4Ii8+CiAgPHJlY3QgeD0iMTgiIHk9IjE4IiB3aWR0aD0iNjA0IiBoZWlnaHQ9IjM2NCIgcng9IjciIGZpbGw9IiMwZDE0MjEiIHN0cm9rZT0iIzI4MzQ0OSIvPgogIDxwYXRoIGQ9Ik0xOCA1OEg2MjJNNTggNThWMzgyTTQ2NiA1OFYzODIiIHN0cm9rZT0iIzI4MzQ0OSIvPgogIDxyZWN0IHg9IjMyIiB5PSIzMyIgd2lkdGg9IjgyIiBoZWlnaHQ9IjkiIGZpbGw9IiNlN2VjZjUiLz4KICA8cmVjdCB4PSIxMjIiIHk9IjI5IiB3aWR0aD0iNjIiIGhlaWdodD0iMTciIHJ4PSIzIiBmaWxsPSIjMTEyYTIxIi8+CiAgPHJlY3QgeD0iNTEwIiB5PSIyNyIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIyIiByeD0iNCIgZmlsbD0iIzJhMjQ0MCIgc3Ryb2tlPSIjNmQ1ZGMxIi8+CiAgPHJlY3QgeD0iNTY4IiB5PSIyNyIgd2lkdGg9IjQyIiBoZWlnaHQ9IjIyIiByeD0iNCIgZmlsbD0iIzQzZDA3NyIvPgogIDxnIGZpbGw9IiMxMTFhMjgiIHN0cm9rZT0iIzI4MzQ0OSI+CiAgICA8cmVjdCB4PSIyOCIgeT0iNzQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcng9IjQiIGZpbGw9IiMyYTI0NDAiIHN0cm9rZT0iI2E2OGFmOCIvPgogICAgPHJlY3QgeD0iMjgiIHk9IjEwNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiByeD0iNCIvPgogICAgPHJlY3QgeD0iMjgiIHk9IjEzNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiByeD0iNCIvPgogICAgPHJlY3QgeD0iMjgiIHk9IjE2NCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiByeD0iNCIvPgogIDwvZz4KICA8cmVjdCB4PSI4MiIgeT0iODQiIHdpZHRoPSIzNTYiIGhlaWdodD0iMjcyIiByeD0iNSIgZmlsbD0iI2Y3ZjRlZCIvPgogIDxyZWN0IHg9IjgyIiB5PSI4NCIgd2lkdGg9IjM1NiIgaGVpZ2h0PSIzNCIgcng9IjUiIGZpbGw9IiMxNzE3MTYiLz4KICA8cmVjdCB4PSI5NiIgeT0iOTYiIHdpZHRoPSI5NiIgaGVpZ2h0PSI4IiBmaWxsPSIjZmZmOWVmIi8+CiAgPHJlY3QgeD0iMTA4IiB5PSIxNDQiIHdpZHRoPSIxNDAiIGhlaWdodD0iMzgiIGZpbGw9IiMxNzE3MTYiLz4KICA8cmVjdCB4PSIxMDgiIHk9IjE5NSIgd2lkdGg9IjEyNiIgaGVpZ2h0PSI3IiBmaWxsPSIjNjc1ZjU0Ii8+CiAgPHJlY3QgeD0iMTA4IiB5PSIyMTQiIHdpZHRoPSIxNTQiIGhlaWdodD0iNyIgZmlsbD0iIzY3NWY1NCIvPgogIDxyZWN0IHg9IjEwOCIgeT0iMjQyIiB3aWR0aD0iNjgiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSIjMWJhZTYxIi8+CiAgPHJlY3QgeD0iMjg0IiB5PSIxNDQiIHdpZHRoPSIxMTgiIGhlaWdodD0iMTI2IiByeD0iNCIgZmlsbD0iIzE2NDlkOCIgdHJhbnNmb3JtPSJyb3RhdGUoMyAyODQgMTQ0KSIvPgogIDxyZWN0IHg9IjI0NiIgeT0iMTgxIiB3aWR0aD0iMTEyIiBoZWlnaHQ9IjExNCIgcng9IjQiIGZpbGw9IiNmM2U2ZDIiIHN0cm9rZT0iIzE0MTQxMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTIgMjQ2IDE4MSkiLz4KICA8cmVjdCB4PSIzMTgiIHk9IjIxNSIgd2lkdGg9IjkyIiBoZWlnaHQ9Ijk2IiByeD0iNCIgZmlsbD0iI2ZmZjllZiIgc3Ryb2tlPSIjMTQxNDEzIi8+CiAgPHJlY3QgeD0iMzE4IiB5PSIyMTUiIHdpZHRoPSI5MiIgaGVpZ2h0PSIzNSIgZmlsbD0iI2E4ODRlOCIvPgogIDxyZWN0IHg9IjEwMCIgeT0iMTg3IiB3aWR0aD0iMTYyIiBoZWlnaHQ9Ijk0IiByeD0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTVhZDU1IiBzdHJva2Utd2lkdGg9IjIiLz4KICA8Y2lyY2xlIGN4PSIyNjIiIGN5PSIxODciIHI9IjExIiBmaWxsPSIjZTVhZDU1IiBzdHJva2U9IiMwODBkMTgiIHN0cm9rZS13aWR0aD0iMiIvPgogIDxyZWN0IHg9IjQ4MiIgeT0iNzgiIHdpZHRoPSIxMjQiIGhlaWdodD0iNzIiIGZpbGw9IiMxNzIxMzEiLz4KICA8cmVjdCB4PSI0OTQiIHk9IjkyIiB3aWR0aD0iNDgiIGhlaWdodD0iNyIgZmlsbD0iI2U1YWQ1NSIvPgogIDxyZWN0IHg9IjQ5NCIgeT0iMTEwIiB3aWR0aD0iOTIiIGhlaWdodD0iNSIgZmlsbD0iI2U3ZWNmNSIvPgogIDxyZWN0IHg9IjQ5NCIgeT0iMTI0IiB3aWR0aD0iNzgiIGhlaWdodD0iNSIgZmlsbD0iIzhlOTlhYSIvPgogIDxyZWN0IHg9IjQ4MiIgeT0iMTUwIiB3aWR0aD0iMTI0IiBoZWlnaHQ9IjcyIiBmaWxsPSIjMGQxNDIxIiBzdHJva2U9IiMyMDJiM2QiLz4KICA8cmVjdCB4PSI0OTQiIHk9IjE2NCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjciIGZpbGw9IiNlNWFkNTUiLz4KICA8cmVjdCB4PSI0OTQiIHk9IjE4MiIgd2lkdGg9IjkyIiBoZWlnaHQ9IjUiIGZpbGw9IiNlN2VjZjUiLz4KICA8cmVjdCB4PSI0OTQiIHk9IjE5NiIgd2lkdGg9IjcwIiBoZWlnaHQ9IjUiIGZpbGw9IiM4ZTk5YWEiLz4KICA8cmVjdCB4PSI0ODIiIHk9IjIyMiIgd2lkdGg9IjEyNCIgaGVpZ2h0PSI3MiIgZmlsbD0iIzBkMTQyMSIgc3Ryb2tlPSIjMjAyYjNkIi8+CiAgPHJlY3QgeD0iNDk0IiB5PSIyMzYiIHdpZHRoPSI1MiIgaGVpZ2h0PSI3IiBmaWxsPSIjYTY4YWY4Ii8+CiAgPHJlY3QgeD0iNDk0IiB5PSIyNTQiIHdpZHRoPSI5MiIgaGVpZ2h0PSI1IiBmaWxsPSIjZTdlY2Y1Ii8+CiAgPHJlY3QgeD0iNDk0IiB5PSIyNjgiIHdpZHRoPSI3NiIgaGVpZ2h0PSI1IiBmaWxsPSIjOGU5OWFhIi8+CiAgPHJlY3QgeD0iNDgyIiB5PSIzMzgiIHdpZHRoPSIxMjQiIGhlaWdodD0iMjgiIHJ4PSI0IiBmaWxsPSIjMmEyNDQwIiBzdHJva2U9IiM2ZDVkYzEiLz4KPC9zdmc+Cg==" width="640" height="400"/>
+  <circle class="pin" cx="262" cy="187" r="13"/>
+  <path class="connector" pathLength="100" d="M275 187C350 187 402 118 482 112"/>
+  <rect class="comment-focus" x="478" y="74" width="132" height="80" rx="4"/>
+</svg>

site/public/examples/product-design/previews/animated/plannotator-review-wireframe.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Animated Plannotator review wireframe</title>
+  <desc id="desc">Review focus moves from the document canvas to the comment sidebar.</desc>
+  <style>
+    .canvas-focus,.comments-focus{fill:none;stroke:#2457d6;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
+    .canvas-focus{animation:canvas 6s cubic-bezier(.19,1,.22,1) infinite}
+    .comments-focus{animation:comments 6s cubic-bezier(.19,1,.22,1) infinite}
+    @keyframes canvas{0%,10%{opacity:0;transform:scale(.985)}18%,40%{opacity:1;transform:scale(1)}48%,100%{opacity:0}}
+    @keyframes comments{0%,48%{opacity:0;transform:scale(.985)}56%,80%{opacity:1;transform:scale(1)}88%,100%{opacity:0}}
+    @media(prefers-reduced-motion:reduce){.canvas-focus,.comments-focus{animation:none;opacity:0}}
+  </style>
+  <image href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+UGxhbm5vdGF0b3IgcmV2aWV3IHdpcmVmcmFtZTwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgZ3JheXNjYWxlIHJldmlldyB3b3Jrc3BhY2Ugd2l0aCB0b29sIHJhaWwsIGRvY3VtZW50IGNhbnZhcywgYW5kIGNvbW1lbnQgc2lkZWJhci48L2Rlc2M+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNmMWYxZWYiLz4KICA8cmVjdCB4PSIyNCIgeT0iMjQiIHdpZHRoPSI1OTIiIGhlaWdodD0iMzUyIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMxNzE3MTciIHN0cm9rZS13aWR0aD0iMiIvPgogIDxwYXRoIGQ9Ik0yNCA2OEg2MTZNNjggNjhWMzc2TTQ1MiA2OFYzNzYiIHN0cm9rZT0iIzE3MTcxNyIvPgogIDxyZWN0IHg9IjQwIiB5PSI0MCIgd2lkdGg9IjkyIiBoZWlnaHQ9IjEwIiBmaWxsPSIjMTcxNzE3Ii8+CiAgPHJlY3QgeD0iNDk2IiB5PSIzNCIgd2lkdGg9IjEwMiIgaGVpZ2h0PSIyNCIgZmlsbD0iIzE3MTcxNyIvPgogIDxnIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzhlOGU4ZSI+CiAgICA8cmVjdCB4PSIzNCIgeT0iODYiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI2RlZGVkYiIgc3Ryb2tlPSIjMTcxNzE3Ii8+CiAgICA8cmVjdCB4PSIzNCIgeT0iMTIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4KICAgIDxyZWN0IHg9IjM0IiB5PSIxNTQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPgogICAgPHJlY3QgeD0iMzQiIHk9IjE4OCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgPC9nPgogIDxyZWN0IHg9Ijk2IiB5PSI5NiIgd2lkdGg9IjMyNiIgaGVpZ2h0PSIyNDgiIGZpbGw9IiNmN2Y3ZjUiIHN0cm9rZT0iIzg4OCIvPgogIDxyZWN0IHg9IjEyNiIgeT0iMTI0IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE2IiBmaWxsPSIjMTcxNzE3Ii8+CiAgPHJlY3QgeD0iMTI2IiB5PSIxNTciIHdpZHRoPSIyNDYiIGhlaWdodD0iNyIgZmlsbD0iIzlkOWQ5YSIvPgogIDxyZWN0IHg9IjEyNiIgeT0iMTc2IiB3aWR0aD0iMTg4IiBoZWlnaHQ9IjciIGZpbGw9IiNkMWQxY2UiLz4KICA8cmVjdCB4PSIxMjYiIHk9IjIxNiIgd2lkdGg9IjExMiIgaGVpZ2h0PSI2OCIgZmlsbD0iI2YxZjFlZiIgc3Ryb2tlPSIjYWFhIi8+CiAgPHJlY3QgeD0iMjUwIiB5PSIyMTYiIHdpZHRoPSIxMTIiIGhlaWdodD0iNjgiIGZpbGw9IiNmMWYxZWYiIHN0cm9rZT0iI2FhYSIvPgogIDxyZWN0IHg9IjEyNiIgeT0iMzAyIiB3aWR0aD0iMjMyIiBoZWlnaHQ9IjI0IiBmaWxsPSIjZGVkZWRiIiBzdHJva2U9IiMxNzE3MTciLz4KICA8Y2lyY2xlIGN4PSIzNzAiIGN5PSIzMDIiIHI9IjEzIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMxNzE3MTciLz4KICA8cmVjdCB4PSI0NzAiIHk9Ijg4IiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjY2IiBmaWxsPSIjZGVkZWRiIi8+CiAgPHJlY3QgeD0iNDgxIiB5PSIxMDEiIHdpZHRoPSI2NiIgaGVpZ2h0PSI4IiBmaWxsPSIjMTcxNzE3Ii8+CiAgPHJlY3QgeD0iNDgxIiB5PSIxMjAiIHdpZHRoPSI5OCIgaGVpZ2h0PSI1IiBmaWxsPSIjOGU4ZThlIi8+CiAgPHJlY3QgeD0iNDgxIiB5PSIxMzIiIHdpZHRoPSI4NCIgaGVpZ2h0PSI1IiBmaWxsPSIjOGU4ZThlIi8+CiAgPHJlY3QgeD0iNDcwIiB5PSIxNTQiIHdpZHRoPSIxMjgiIGhlaWdodD0iNjYiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2QxZDFjZSIvPgogIDxyZWN0IHg9IjQ4MSIgeT0iMTY5IiB3aWR0aD0iNzQiIGhlaWdodD0iOCIgZmlsbD0iIzE3MTcxNyIvPgogIDxyZWN0IHg9IjQ4MSIgeT0iMTg4IiB3aWR0aD0iOTgiIGhlaWdodD0iNSIgZmlsbD0iIzhlOGU4ZSIvPgogIDxyZWN0IHg9IjQ3MCIgeT0iMjIwIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjY2IiBmaWxsPSIjZmZmIiBzdHJva2U9IiNkMWQxY2UiLz4KICA8cmVjdCB4PSI0ODEiIHk9IjIzNSIgd2lkdGg9IjY4IiBoZWlnaHQ9IjgiIGZpbGw9IiMxNzE3MTciLz4KICA8cmVjdCB4PSI0ODEiIHk9IjI1NCIgd2lkdGg9IjkyIiBoZWlnaHQ9IjUiIGZpbGw9IiM4ZThlOGUiLz4KICA8cmVjdCB4PSI0NzAiIHk9IjMzMCIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIyOCIgZmlsbD0iIzE3MTcxNyIvPgo8L3N2Zz4K" width="640" height="400"/>
+  <rect class="canvas-focus" x="78" y="76" width="368" height="286" rx="3"/>
+  <rect class="comments-focus" x="462" y="76" width="144" height="286" rx="3"/>
+</svg>

site/public/examples/product-design/previews/animated/product-change-review-wireframe.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Animated product change review wireframe</title>
+  <desc id="desc">Focus moves from the current screen to the proposed screen and then to the decision notes.</desc>
+  <style>
+    .focus{fill:none;stroke:#2457d6;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
+    .current{animation:current 7s cubic-bezier(.19,1,.22,1) infinite}.proposed{animation:proposed 7s cubic-bezier(.19,1,.22,1) infinite}.notes{animation:notes 7s cubic-bezier(.19,1,.22,1) infinite}
+    @keyframes current{0%,7%{opacity:0;transform:scale(.985)}14%,29%{opacity:1;transform:scale(1)}36%,100%{opacity:0}}
+    @keyframes proposed{0%,36%{opacity:0;transform:scale(.985)}43%,58%{opacity:1;transform:scale(1)}65%,100%{opacity:0}}
+    @keyframes notes{0%,65%{opacity:0;transform:scale(.985)}72%,87%{opacity:1;transform:scale(1)}94%,100%{opacity:0}}
+    @media(prefers-reduced-motion:reduce){.focus{animation:none;opacity:0}}
+  </style>
+  <image href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+UHJvZHVjdCBjaGFuZ2UgcmV2aWV3IHdpcmVmcmFtZTwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkN1cnJlbnQgYW5kIHByb3Bvc2VkIG1lbWJlciByb2xlIHNjcmVlbnMgY29tcGFyZWQgaW4gYSBncmF5c2NhbGUgcmV2aWV3IGJvYXJkLjwvZGVzYz4KICA8cmVjdCB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2YyZjJlZiIvPgogIDxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjU5MiIgaGVpZ2h0PSIzNTIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzE3MTcxNyIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPHJlY3QgeD0iNDQiIHk9IjQyIiB3aWR0aD0iMjY4IiBoZWlnaHQ9IjE4IiBmaWxsPSIjMTcxNzE3Ii8+CiAgPHJlY3QgeD0iNDc4IiB5PSIzOSIgd2lkdGg9IjExOCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzE3MTcxNyIvPgogIDxwYXRoIGQ9Ik0yNCA4MEg2MTZNMzIwIDgwVjM3Nk01MDAgODBWMzc2IiBzdHJva2U9IiMxNzE3MTciLz4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NCAxMDQpIj4KICAgIDxyZWN0IHdpZHRoPSIyNTAiIGhlaWdodD0iMjM2IiBmaWxsPSIjZjhmOGY2IiBzdHJva2U9IiMxNzE3MTciLz4KICAgIDxwYXRoIGQ9Ik0wIDM0SDI1ME03NCAzNFYyMzYiIHN0cm9rZT0iI2FhYSIvPgogICAgPHJlY3QgeD0iMTIiIHk9IjUyIiB3aWR0aD0iNDgiIGhlaWdodD0iNyIgZmlsbD0iIzE3MTcxNyIvPgogICAgPHJlY3QgeD0iMTIiIHk9IjcyIiB3aWR0aD0iNDgiIGhlaWdodD0iNiIgZmlsbD0iI2FhYSIvPgogICAgPHJlY3QgeD0iMTIiIHk9IjkwIiB3aWR0aD0iNDgiIGhlaWdodD0iNiIgZmlsbD0iI2FhYSIvPgogICAgPHJlY3QgeD0iOTAiIHk9IjUyIiB3aWR0aD0iOTIiIGhlaWdodD0iMTAiIGZpbGw9IiMxNzE3MTciLz4KICAgIDxyZWN0IHg9IjkwIiB5PSI3NCIgd2lkdGg9IjEyNCIgaGVpZ2h0PSI2IiBmaWxsPSIjYWFhIi8+CiAgICA8Y2lyY2xlIGN4PSIxMDQiIGN5PSIxMTMiIHI9IjEyIiBmaWxsPSIjZTVlNWUxIiBzdHJva2U9IiMxNzE3MTciLz4KICAgIDxyZWN0IHg9IjEyNiIgeT0iMTA1IiB3aWR0aD0iNjgiIGhlaWdodD0iNyIgZmlsbD0iIzE3MTcxNyIvPgogICAgPHJlY3QgeD0iMTI2IiB5PSIxMjAiIHdpZHRoPSI0NCIgaGVpZ2h0PSI1IiBmaWxsPSIjYWFhIi8+CiAgICA8cmVjdCB4PSIyMDQiIHk9IjEwNCIgd2lkdGg9IjI4IiBoZWlnaHQ9IjI0IiBmaWxsPSIjZmZmIiBzdHJva2U9IiMxNzE3MTciLz4KICAgIDxwYXRoIGQ9Ik04OCAxNDBIMjMyIiBzdHJva2U9IiNkNWQ1ZDUiLz4KICAgIDxjaXJjbGUgY3g9IjEwNCIgY3k9IjE2NSIgcj0iMTIiIGZpbGw9IiNlNWU1ZTEiIHN0cm9rZT0iIzE3MTcxNyIvPgogICAgPHJlY3QgeD0iMTI2IiB5PSIxNTciIHdpZHRoPSI2OCIgaGVpZ2h0PSI3IiBmaWxsPSIjMTcxNzE3Ii8+CiAgICA8cmVjdCB4PSIxMjYiIHk9IjE3MiIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjUiIGZpbGw9IiNhYWEiLz4KICAgIDxyZWN0IHg9IjIwNCIgeT0iMTU2IiB3aWR0aD0iMjgiIGhlaWdodD0iMjQiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzE3MTcxNyIvPgogIDwvZz4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMzggMTA0KSI+CiAgICA8cmVjdCB3aWR0aD0iMTQyIiBoZWlnaHQ9IjIzNiIgZmlsbD0iI2Y4ZjhmNiIgc3Ryb2tlPSIjMTcxNzE3Ii8+CiAgICA8cmVjdCB4PSIxNCIgeT0iMTgiIHdpZHRoPSI3MiIgaGVpZ2h0PSI5IiBmaWxsPSIjMTcxNzE3Ii8+CiAgICA8cmVjdCB4PSIxNCIgeT0iNDIiIHdpZHRoPSIxMDQiIGhlaWdodD0iNiIgZmlsbD0iI2FhYSIvPgogICAgPHJlY3QgeD0iMTIiIHk9IjY3IiB3aWR0aD0iMTE4IiBoZWlnaHQ9IjU2IiBmaWxsPSIjZTVlNWUxIiBzdHJva2U9IiMxNzE3MTciLz4KICAgIDxjaXJjbGUgY3g9IjI4IiBjeT0iOTAiIHI9IjEwIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMxNzE3MTciLz4KICAgIDxyZWN0IHg9IjQ2IiB5PSI4MSIgd2lkdGg9IjUyIiBoZWlnaHQ9IjciIGZpbGw9IiMxNzE3MTciLz4KICAgIDxyZWN0IHg9IjQ2IiB5PSI5NiIgd2lkdGg9IjM0IiBoZWlnaHQ9IjUiIGZpbGw9IiNhYWEiLz4KICAgIDxyZWN0IHg9IjkwIiB5PSI4MiIgd2lkdGg9IjMxIiBoZWlnaHQ9IjIyIiBmaWxsPSIjMTcxNzE3Ii8+CiAgICA8Y2lyY2xlIGN4PSIyOCIgY3k9IjE1MyIgcj0iMTAiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzE3MTcxNyIvPgogICAgPHJlY3QgeD0iNDYiIHk9IjE0NCIgd2lkdGg9IjUyIiBoZWlnaHQ9IjciIGZpbGw9IiMxNzE3MTciLz4KICAgIDxyZWN0IHg9IjQ2IiB5PSIxNTkiIHdpZHRoPSIzNCIgaGVpZ2h0PSI1IiBmaWxsPSIjYWFhIi8+CiAgICA8cmVjdCB4PSI5MCIgeT0iMTQ1IiB3aWR0aD0iMzEiIGhlaWdodD0iMjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzE3MTcxNyIvPgogICAgPHJlY3QgeD0iMTQiIHk9IjE5NiIgd2lkdGg9IjEwNCIgaGVpZ2h0PSIyMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYWFhIiBzdHJva2UtZGFzaGFycmF5PSIzIDMiLz4KICA8L2c+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTE2IDEwMCkiPgogICAgPHJlY3Qgd2lkdGg9IjgyIiBoZWlnaHQ9IjYyIiBmaWxsPSIjZTVlNWUxIi8+CiAgICA8cmVjdCB4PSIxMCIgeT0iMTIiIHdpZHRoPSIzOCIgaGVpZ2h0PSI3IiBmaWxsPSIjMTcxNzE3Ii8+CiAgICA8cmVjdCB4PSIxMCIgeT0iMjkiIHdpZHRoPSI2MCIgaGVpZ2h0PSI1IiBmaWxsPSIjNzc3Ii8+CiAgICA8cmVjdCB4PSIxMCIgeT0iNDEiIHdpZHRoPSI1NCIgaGVpZ2h0PSI1IiBmaWxsPSIjNzc3Ii8+CiAgICA8cmVjdCB5PSI2MiIgd2lkdGg9IjgyIiBoZWlnaHQ9IjYyIiBmaWxsPSIjZmZmIiBzdHJva2U9IiNkNWQ1ZDUiLz4KICAgIDxyZWN0IHg9IjEwIiB5PSI3NCIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjciIGZpbGw9IiMxNzE3MTciLz4KICAgIDxyZWN0IHg9IjEwIiB5PSI5MSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjUiIGZpbGw9IiM3NzciLz4KICAgIDxyZWN0IHk9IjEyNCIgd2lkdGg9IjgyIiBoZWlnaHQ9IjYyIiBmaWxsPSIjZmZmIiBzdHJva2U9IiNkNWQ1ZDUiLz4KICAgIDxyZWN0IHg9IjEwIiB5PSIxMzYiIHdpZHRoPSI0MiIgaGVpZ2h0PSI3IiBmaWxsPSIjMTcxNzE3Ii8+CiAgICA8cmVjdCB4PSIxMCIgeT0iMTUzIiB3aWR0aD0iNjAiIGhlaWdodD0iNSIgZmlsbD0iIzc3NyIvPgogIDwvZz4KPC9zdmc+Cg==" width="640" height="400"/>
+  <rect class="focus current" x="40" y="100" width="258" height="244" rx="3"/>
+  <rect class="focus proposed" x="334" y="100" width="150" height="244" rx="3"/>
+  <rect class="focus notes" x="512" y="96" width="90" height="196" rx="3"/>
+</svg>

site/public/examples/product-design/previews/static/effective-html-compare-mockup.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Effective HTML comparison mockup</title>
+  <desc id="desc">Two warm-paper HTML specimens compared on a dark Effective HTML field.</desc>
+  <rect width="640" height="400" fill="#141413"/>
+  <rect x="24" y="20" width="592" height="44" rx="4" fill="#20201e" stroke="#6b6257"/>
+  <circle cx="47" cy="42" r="12" fill="#1bae61"/>
+  <rect x="70" y="33" width="124" height="8" fill="#fff9ef"/>
+  <rect x="70" y="47" width="190" height="5" fill="#a99c8c"/>
+  <rect x="445" y="20" width="72" height="44" fill="#a884e8"/>
+  <rect x="517" y="20" width="99" height="44" fill="#1bae61"/>
+  <g transform="translate(24 82)">
+    <rect width="284" height="292" rx="6" fill="#fff9ef"/>
+    <path d="M0 44H284" stroke="#b9ae9d"/>
+    <rect x="16" y="15" width="116" height="9" fill="#141413"/>
+    <rect x="16" y="29" width="160" height="5" fill="#6e675e"/>
+    <rect x="20" y="62" width="244" height="188" rx="4" fill="#f3e6d2" stroke="#141413"/>
+    <rect x="20" y="62" width="244" height="82" fill="#1649d8"/>
+    <path d="M20 144L88 100L150 144Z" fill="#a884e8"/>
+    <path d="M140 144L220 104L264 144Z" fill="#a884e8"/>
+    <circle cx="226" cy="90" r="14" fill="#f09aa8"/>
+    <rect x="34" y="160" width="94" height="7" fill="#141413"/>
+    <rect x="34" y="176" width="120" height="5" fill="#9e9588"/>
+    <rect x="34" y="196" width="54" height="19" fill="#1bae61"/>
+    <rect x="174" y="160" width="74" height="66" fill="#2a2926"/>
+    <rect x="16" y="265" width="88" height="12" rx="6" fill="none" stroke="#6e675e"/>
+  </g>
+  <g transform="translate(332 82)">
+    <rect width="284" height="292" rx="6" fill="#fff9ef"/>
+    <path d="M0 44H284" stroke="#b9ae9d"/>
+    <rect x="16" y="15" width="158" height="9" fill="#141413"/>
+    <rect x="16" y="29" width="196" height="5" fill="#6e675e"/>
+    <rect x="20" y="62" width="244" height="188" rx="4" fill="#252522" stroke="#141413"/>
+    <rect x="20" y="62" width="78" height="188" fill="#20201e"/>
+    <rect x="31" y="78" width="56" height="22" rx="11" fill="#173626" stroke="#1bae61"/>
+    <rect x="31" y="109" width="56" height="18" rx="9" fill="none" stroke="#6b6257"/>
+    <rect x="31" y="136" width="56" height="18" rx="9" fill="none" stroke="#6b6257"/>
+    <path d="M130 104H225M130 104L174 185M174 185H232" stroke="#e8744f" stroke-width="2"/>
+    <rect x="111" y="89" width="44" height="24" rx="4" fill="#173626" stroke="#1bae61"/>
+    <rect x="207" y="89" width="44" height="24" rx="4" fill="#141413" stroke="#6b6257"/>
+    <rect x="151" y="176" width="48" height="24" rx="4" fill="#173626" stroke="#1bae61"/>
+    <rect x="213" y="176" width="40" height="24" rx="4" fill="#141413" stroke="#6b6257"/>
+    <rect x="16" y="265" width="88" height="12" rx="6" fill="none" stroke="#6e675e"/>
+  </g>
+</svg>

site/public/examples/product-design/previews/static/effective-html-compare-wireframe.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Effective HTML comparison wireframe</title>
+  <desc id="desc">Two grayscale browser wireframes shown side by side with a comparison control.</desc>
+  <rect width="640" height="400" fill="#f2f2ef"/>
+  <rect x="28" y="24" width="584" height="352" fill="#fff" stroke="#171717" stroke-width="2"/>
+  <path d="M28 76H612M320 76V376" stroke="#171717" stroke-width="2"/>
+  <rect x="46" y="40" width="126" height="12" fill="#171717"/>
+  <rect x="448" y="36" width="70" height="24" fill="#171717"/>
+  <rect x="518" y="36" width="76" height="24" fill="#fff" stroke="#171717"/>
+  <g transform="translate(48 98)">
+    <rect width="250" height="238" fill="#f7f7f4" stroke="#171717"/>
+    <path d="M0 30H250" stroke="#171717"/>
+    <circle cx="12" cy="15" r="3" fill="none" stroke="#171717"/>
+    <circle cx="24" cy="15" r="3" fill="none" stroke="#171717"/>
+    <circle cx="36" cy="15" r="3" fill="none" stroke="#171717"/>
+    <rect x="18" y="52" width="132" height="8" fill="#171717"/>
+    <rect x="18" y="76" width="132" height="52" fill="#e3e3df" stroke="#888"/>
+    <rect x="164" y="52" width="68" height="130" fill="#e3e3df" stroke="#888"/>
+    <rect x="18" y="142" width="62" height="48" fill="#fff" stroke="#aaa"/>
+    <rect x="90" y="142" width="62" height="48" fill="#fff" stroke="#aaa"/>
+    <rect x="18" y="200" width="62" height="20" fill="#fff" stroke="#aaa"/>
+    <rect x="90" y="200" width="62" height="20" fill="#fff" stroke="#aaa"/>
+    <rect x="164" y="194" width="68" height="26" fill="#171717"/>
+  </g>
+  <g transform="translate(342 98)">
+    <rect width="250" height="238" fill="#f7f7f4" stroke="#171717"/>
+    <path d="M0 30H250" stroke="#171717"/>
+    <circle cx="12" cy="15" r="3" fill="none" stroke="#171717"/>
+    <circle cx="24" cy="15" r="3" fill="none" stroke="#171717"/>
+    <circle cx="36" cy="15" r="3" fill="none" stroke="#171717"/>
+    <rect x="18" y="52" width="168" height="8" fill="#171717"/>
+    <rect x="18" y="76" width="132" height="52" fill="#e3e3df" stroke="#888"/>
+    <rect x="164" y="52" width="68" height="130" fill="#e3e3df" stroke="#888"/>
+    <rect x="18" y="142" width="62" height="48" fill="#fff" stroke="#aaa"/>
+    <rect x="90" y="142" width="62" height="48" fill="#fff" stroke="#aaa"/>
+    <rect x="18" y="200" width="62" height="20" fill="#fff" stroke="#aaa"/>
+    <rect x="90" y="200" width="62" height="20" fill="#fff" stroke="#aaa"/>
+    <rect x="164" y="194" width="68" height="26" fill="#171717"/>
+  </g>
+</svg>

site/public/examples/product-design/previews/static/plannotator-review-mockup.svg

@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Plannotator review mockup</title>
+  <desc id="desc">A dark Plannotator review surface surrounding a warm rendered HTML artifact and annotations.</desc>
+  <rect width="640" height="400" fill="#080d18"/>
+  <rect x="18" y="18" width="604" height="364" rx="7" fill="#0d1421" stroke="#283449"/>
+  <path d="M18 58H622M58 58V382M466 58V382" stroke="#283449"/>
+  <rect x="32" y="33" width="82" height="9" fill="#e7ecf5"/>
+  <rect x="122" y="29" width="62" height="17" rx="3" fill="#112a21"/>
+  <rect x="510" y="27" width="50" height="22" rx="4" fill="#2a2440" stroke="#6d5dc1"/>
+  <rect x="568" y="27" width="42" height="22" rx="4" fill="#43d077"/>
+  <g fill="#111a28" stroke="#283449">
+    <rect x="28" y="74" width="20" height="20" rx="4" fill="#2a2440" stroke="#a68af8"/>
+    <rect x="28" y="104" width="20" height="20" rx="4"/>
+    <rect x="28" y="134" width="20" height="20" rx="4"/>
+    <rect x="28" y="164" width="20" height="20" rx="4"/>
+  </g>
+  <rect x="82" y="84" width="356" height="272" rx="5" fill="#f7f4ed"/>
+  <rect x="82" y="84" width="356" height="34" rx="5" fill="#171716"/>
+  <rect x="96" y="96" width="96" height="8" fill="#fff9ef"/>
+  <rect x="108" y="144" width="140" height="38" fill="#171716"/>
+  <rect x="108" y="195" width="126" height="7" fill="#675f54"/>
+  <rect x="108" y="214" width="154" height="7" fill="#675f54"/>
+  <rect x="108" y="242" width="68" height="24" rx="4" fill="#1bae61"/>
+  <rect x="284" y="144" width="118" height="126" rx="4" fill="#1649d8" transform="rotate(3 284 144)"/>
+  <rect x="246" y="181" width="112" height="114" rx="4" fill="#f3e6d2" stroke="#141413" transform="rotate(-2 246 181)"/>
+  <rect x="318" y="215" width="92" height="96" rx="4" fill="#fff9ef" stroke="#141413"/>
+  <rect x="318" y="215" width="92" height="35" fill="#a884e8"/>
+  <rect x="100" y="187" width="162" height="94" rx="3" fill="none" stroke="#e5ad55" stroke-width="2"/>
+  <circle cx="262" cy="187" r="11" fill="#e5ad55" stroke="#080d18" stroke-width="2"/>
+  <rect x="482" y="78" width="124" height="72" fill="#172131"/>
+  <rect x="494" y="92" width="48" height="7" fill="#e5ad55"/>
+  <rect x="494" y="110" width="92" height="5" fill="#e7ecf5"/>
+  <rect x="494" y="124" width="78" height="5" fill="#8e99aa"/>
+  <rect x="482" y="150" width="124" height="72" fill="#0d1421" stroke="#202b3d"/>
+  <rect x="494" y="164" width="48" height="7" fill="#e5ad55"/>
+  <rect x="494" y="182" width="92" height="5" fill="#e7ecf5"/>
+  <rect x="494" y="196" width="70" height="5" fill="#8e99aa"/>
+  <rect x="482" y="222" width="124" height="72" fill="#0d1421" stroke="#202b3d"/>
+  <rect x="494" y="236" width="52" height="7" fill="#a68af8"/>
+  <rect x="494" y="254" width="92" height="5" fill="#e7ecf5"/>
+  <rect x="494" y="268" width="76" height="5" fill="#8e99aa"/>
+  <rect x="482" y="338" width="124" height="28" rx="4" fill="#2a2440" stroke="#6d5dc1"/>
+</svg>

site/public/examples/product-design/previews/static/plannotator-review-wireframe.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Plannotator review wireframe</title>
+  <desc id="desc">A grayscale review workspace with tool rail, document canvas, and comment sidebar.</desc>
+  <rect width="640" height="400" fill="#f1f1ef"/>
+  <rect x="24" y="24" width="592" height="352" fill="#fff" stroke="#171717" stroke-width="2"/>
+  <path d="M24 68H616M68 68V376M452 68V376" stroke="#171717"/>
+  <rect x="40" y="40" width="92" height="10" fill="#171717"/>
+  <rect x="496" y="34" width="102" height="24" fill="#171717"/>
+  <g fill="#fff" stroke="#8e8e8e">
+    <rect x="34" y="86" width="24" height="24" fill="#dededb" stroke="#171717"/>
+    <rect x="34" y="120" width="24" height="24"/>
+    <rect x="34" y="154" width="24" height="24"/>
+    <rect x="34" y="188" width="24" height="24"/>
+  </g>
+  <rect x="96" y="96" width="326" height="248" fill="#f7f7f5" stroke="#888"/>
+  <rect x="126" y="124" width="200" height="16" fill="#171717"/>
+  <rect x="126" y="157" width="246" height="7" fill="#9d9d9a"/>
+  <rect x="126" y="176" width="188" height="7" fill="#d1d1ce"/>
+  <rect x="126" y="216" width="112" height="68" fill="#f1f1ef" stroke="#aaa"/>
+  <rect x="250" y="216" width="112" height="68" fill="#f1f1ef" stroke="#aaa"/>
+  <rect x="126" y="302" width="232" height="24" fill="#dededb" stroke="#171717"/>
+  <circle cx="370" cy="302" r="13" fill="#fff" stroke="#171717"/>
+  <rect x="470" y="88" width="128" height="66" fill="#dededb"/>
+  <rect x="481" y="101" width="66" height="8" fill="#171717"/>
+  <rect x="481" y="120" width="98" height="5" fill="#8e8e8e"/>
+  <rect x="481" y="132" width="84" height="5" fill="#8e8e8e"/>
+  <rect x="470" y="154" width="128" height="66" fill="#fff" stroke="#d1d1ce"/>
+  <rect x="481" y="169" width="74" height="8" fill="#171717"/>
+  <rect x="481" y="188" width="98" height="5" fill="#8e8e8e"/>
+  <rect x="470" y="220" width="128" height="66" fill="#fff" stroke="#d1d1ce"/>
+  <rect x="481" y="235" width="68" height="8" fill="#171717"/>
+  <rect x="481" y="254" width="92" height="5" fill="#8e8e8e"/>
+  <rect x="470" y="330" width="128" height="28" fill="#171717"/>
+</svg>

site/public/examples/product-design/previews/static/product-change-review-mockup.svg

@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Product change review mockup</title>
+  <desc id="desc">A blue product-change brief above current and proposed member role screens with review notes.</desc>
+  <rect width="640" height="400" fill="#f3f5f8"/>
+  <rect width="640" height="112" fill="#2451d6"/>
+  <rect x="30" y="22" width="242" height="22" fill="#fff"/>
+  <rect x="30" y="55" width="296" height="22" fill="#fff"/>
+  <rect x="388" y="24" width="1" height="64" fill="#b9c9f4"/>
+  <rect x="410" y="29" width="162" height="8" fill="#dfe7ff"/>
+  <rect x="410" y="48" width="190" height="8" fill="#dfe7ff"/>
+  <rect x="410" y="67" width="126" height="8" fill="#dfe7ff"/>
+  <rect x="24" y="132" width="592" height="244" rx="6" fill="#dfe8ff" stroke="#11131a"/>
+  <g transform="translate(42 154)">
+    <rect width="220" height="196" rx="4" fill="#fff" stroke="#11131a"/>
+    <path d="M0 28H220M70 28V196" stroke="#bdc5d2"/>
+    <rect x="12" y="9" width="44" height="7" fill="#11131a"/>
+    <rect x="12" y="44" width="42" height="7" fill="#2451d6"/>
+    <rect x="12" y="68" width="42" height="6" fill="#8891a0"/>
+    <rect x="12" y="88" width="42" height="6" fill="#8891a0"/>
+    <rect x="88" y="43" width="72" height="10" fill="#11131a"/>
+    <rect x="88" y="65" width="104" height="6" fill="#8891a0"/>
+    <circle cx="100" cy="100" r="11" fill="#2451d6"/>
+    <rect x="120" y="91" width="54" height="7" fill="#11131a"/>
+    <rect x="120" y="106" width="38" height="5" fill="#8891a0"/>
+    <rect x="186" y="91" width="22" height="22" rx="3" fill="#fff" stroke="#bdc5d2"/>
+    <path d="M86 124H208" stroke="#dce1e8"/>
+    <circle cx="100" cy="148" r="11" fill="#f0643c"/>
+    <rect x="120" y="139" width="54" height="7" fill="#11131a"/>
+    <rect x="120" y="154" width="38" height="5" fill="#8891a0"/>
+  </g>
+  <g transform="translate(278 154)">
+    <rect width="220" height="196" rx="4" fill="#fff" stroke="#11131a"/>
+    <path d="M0 28H220M70 28V196" stroke="#bdc5d2"/>
+    <rect x="12" y="9" width="52" height="7" fill="#11131a"/>
+    <rect x="12" y="44" width="42" height="7" fill="#2451d6"/>
+    <rect x="12" y="68" width="42" height="6" fill="#8891a0"/>
+    <rect x="12" y="88" width="42" height="6" fill="#8891a0"/>
+    <rect x="88" y="43" width="72" height="10" fill="#11131a"/>
+    <rect x="88" y="65" width="104" height="6" fill="#8891a0"/>
+    <rect x="78" y="82" width="130" height="50" fill="#dfe8ff"/>
+    <circle cx="96" cy="105" r="11" fill="#2451d6"/>
+    <rect x="116" y="96" width="54" height="7" fill="#11131a"/>
+    <rect x="116" y="111" width="38" height="5" fill="#8891a0"/>
+    <rect x="168" y="94" width="32" height="24" rx="3" fill="#2451d6"/>
+    <circle cx="96" cy="153" r="11" fill="#f0643c"/>
+    <rect x="116" y="144" width="54" height="7" fill="#11131a"/>
+    <rect x="116" y="159" width="38" height="5" fill="#8891a0"/>
+    <rect x="168" y="142" width="32" height="24" rx="3" fill="#fff" stroke="#bdc5d2"/>
+  </g>
+  <g transform="translate(516 150)">
+    <rect width="82" height="58" fill="#fff" stroke="#11131a"/>
+    <circle cx="14" cy="17" r="8" fill="#f0643c"/>
+    <rect x="30" y="11" width="40" height="7" fill="#11131a"/>
+    <rect x="30" y="27" width="38" height="5" fill="#5c6472"/>
+    <rect y="58" width="82" height="58" fill="#fff" stroke="#11131a"/>
+    <circle cx="14" cy="75" r="8" fill="#2451d6"/>
+    <rect x="30" y="69" width="40" height="7" fill="#11131a"/>
+    <rect x="30" y="85" width="38" height="5" fill="#5c6472"/>
+    <rect y="116" width="82" height="58" fill="#fff" stroke="#11131a"/>
+    <circle cx="14" cy="133" r="8" fill="#f4a6bc"/>
+    <rect x="30" y="127" width="40" height="7" fill="#11131a"/>
+    <rect x="30" y="143" width="38" height="5" fill="#5c6472"/>
+  </g>
+</svg>

site/public/examples/product-design/previews/static/product-change-review-wireframe.svg

@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" role="img" aria-labelledby="title desc">
+  <title id="title">Product change review wireframe</title>
+  <desc id="desc">Current and proposed member role screens compared in a grayscale review board.</desc>
+  <rect width="640" height="400" fill="#f2f2ef"/>
+  <rect x="24" y="24" width="592" height="352" fill="#fff" stroke="#171717" stroke-width="2"/>
+  <rect x="44" y="42" width="268" height="18" fill="#171717"/>
+  <rect x="478" y="39" width="118" height="24" fill="#171717"/>
+  <path d="M24 80H616M320 80V376M500 80V376" stroke="#171717"/>
+  <g transform="translate(44 104)">
+    <rect width="250" height="236" fill="#f8f8f6" stroke="#171717"/>
+    <path d="M0 34H250M74 34V236" stroke="#aaa"/>
+    <rect x="12" y="52" width="48" height="7" fill="#171717"/>
+    <rect x="12" y="72" width="48" height="6" fill="#aaa"/>
+    <rect x="12" y="90" width="48" height="6" fill="#aaa"/>
+    <rect x="90" y="52" width="92" height="10" fill="#171717"/>
+    <rect x="90" y="74" width="124" height="6" fill="#aaa"/>
+    <circle cx="104" cy="113" r="12" fill="#e5e5e1" stroke="#171717"/>
+    <rect x="126" y="105" width="68" height="7" fill="#171717"/>
+    <rect x="126" y="120" width="44" height="5" fill="#aaa"/>
+    <rect x="204" y="104" width="28" height="24" fill="#fff" stroke="#171717"/>
+    <path d="M88 140H232" stroke="#d5d5d5"/>
+    <circle cx="104" cy="165" r="12" fill="#e5e5e1" stroke="#171717"/>
+    <rect x="126" y="157" width="68" height="7" fill="#171717"/>
+    <rect x="126" y="172" width="44" height="5" fill="#aaa"/>
+    <rect x="204" y="156" width="28" height="24" fill="#fff" stroke="#171717"/>
+  </g>
+  <g transform="translate(338 104)">
+    <rect width="142" height="236" fill="#f8f8f6" stroke="#171717"/>
+    <rect x="14" y="18" width="72" height="9" fill="#171717"/>
+    <rect x="14" y="42" width="104" height="6" fill="#aaa"/>
+    <rect x="12" y="67" width="118" height="56" fill="#e5e5e1" stroke="#171717"/>
+    <circle cx="28" cy="90" r="10" fill="#fff" stroke="#171717"/>
+    <rect x="46" y="81" width="52" height="7" fill="#171717"/>
+    <rect x="46" y="96" width="34" height="5" fill="#aaa"/>
+    <rect x="90" y="82" width="31" height="22" fill="#171717"/>
+    <circle cx="28" cy="153" r="10" fill="#fff" stroke="#171717"/>
+    <rect x="46" y="144" width="52" height="7" fill="#171717"/>
+    <rect x="46" y="159" width="34" height="5" fill="#aaa"/>
+    <rect x="90" y="145" width="31" height="22" fill="#fff" stroke="#171717"/>
+    <rect x="14" y="196" width="104" height="22" fill="none" stroke="#aaa" stroke-dasharray="3 3"/>
+  </g>
+  <g transform="translate(516 100)">
+    <rect width="82" height="62" fill="#e5e5e1"/>
+    <rect x="10" y="12" width="38" height="7" fill="#171717"/>
+    <rect x="10" y="29" width="60" height="5" fill="#777"/>
+    <rect x="10" y="41" width="54" height="5" fill="#777"/>
+    <rect y="62" width="82" height="62" fill="#fff" stroke="#d5d5d5"/>
+    <rect x="10" y="74" width="44" height="7" fill="#171717"/>
+    <rect x="10" y="91" width="60" height="5" fill="#777"/>
+    <rect y="124" width="82" height="62" fill="#fff" stroke="#d5d5d5"/>
+    <rect x="10" y="136" width="42" height="7" fill="#171717"/>
+    <rect x="10" y="153" width="60" height="5" fill="#777"/>
+  </g>
+</svg>

site/public/examples/product-design/product-change-review-mockup.html

@@ -0,0 +1,184 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Product change review mockup</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --ink: #11131a;
+        --blue: #2451d6;
+        --blue-deep: #173996;
+        --blue-pale: #dfe8ff;
+        --orange: #f0643c;
+        --pink: #f4a6bc;
+        --green: #1f9b62;
+        --white: #ffffff;
+        --paper: #f3f5f8;
+        --line: #bdc5d2;
+        --muted: #5c6472;
+        --shadow: 0 24px 54px rgba(14, 24, 55, .22);
+        font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+      * { box-sizing: border-box; }
+      body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); }
+      button { font: inherit; color: inherit; }
+      button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
+      .review-page { min-height: 100vh; }
+      .masthead { min-height: 62px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 0 clamp(16px, 3vw, 42px); border-bottom: 1px solid #0e2d83; color: var(--white); background: var(--blue); }
+      .product { font-weight: 850; letter-spacing: -.025em; }
+      .crumb { color: #d8e2ff; font-size: .75rem; }
+      .masthead-actions { display: flex; align-items: center; gap: 8px; }
+      .masthead-actions button { min-height: 36px; border: 1px solid rgba(255,255,255,.45); border-radius: 5px; padding: 0 11px; color: var(--white); background: transparent; font-size: .7rem; font-weight: 740; }
+      .masthead-actions .approve { border-color: var(--white); color: var(--blue-deep); background: var(--white); }
+
+      .intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: clamp(24px, 5vw, 80px); padding: clamp(36px, 6vw, 78px) clamp(18px, 5vw, 72px) 44px; color: var(--white); background: var(--blue); }
+      .intro h1 { max-width: 830px; margin: 0; font-family: "Arial Narrow", "Helvetica Neue", sans-serif; font-size: clamp(3.2rem, 6vw, 6.2rem); line-height: .86; letter-spacing: -.04em; text-wrap: balance; }
+      .brief { align-self: end; padding: 18px 0 4px 22px; border-left: 1px solid rgba(255,255,255,.48); }
+      .brief p { max-width: 50ch; margin: 0; color: #dfe7ff; font-size: .95rem; line-height: 1.55; }
+      .brief dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0 0; }
+      .brief dt { color: #b9c9f4; font-size: .62rem; }
+      .brief dd { margin: 4px 0 0; font-size: .78rem; font-weight: 720; }
+
+      main { width: min(1520px, 100%); margin: 0 auto; padding: 28px clamp(18px, 4vw, 58px) 56px; }
+      .controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin-bottom: 20px; }
+      .controls-copy strong, .controls-copy span { display: block; }
+      .controls-copy strong { font-size: .9rem; }
+      .controls-copy span { margin-top: 4px; color: var(--muted); font-size: .72rem; }
+      .segmented { display: flex; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--white); }
+      .segmented button { min-height: 42px; border: 0; border-right: 1px solid var(--ink); padding: 0 14px; background: transparent; cursor: pointer; font-size: .72rem; font-weight: 760; }
+      .segmented button:last-child { border-right: 0; }
+      .segmented button[aria-pressed="true"] { color: var(--white); background: var(--ink); }
+
+      .proof { display: grid; grid-template-columns: minmax(0, 1fr) 310px; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: var(--shadow); }
+      .proof-stage { min-width: 0; padding: clamp(18px, 3vw, 38px); background: var(--blue-pale); }
+      .screen-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; transition: opacity 180ms ease; }
+      .screen { min-width: 0; display: grid; grid-template-rows: 34px 1fr; overflow: hidden; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); }
+      .screen-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; border-bottom: 1px solid var(--ink); font-size: .66rem; font-weight: 800; }
+      .screen-label span { color: var(--muted); font-weight: 540; }
+      .app-screen { min-height: 510px; display: grid; grid-template-columns: 27% 1fr; }
+      .app-nav { display: grid; align-content: start; gap: 7px; padding: 15px 10px; border-right: 1px solid var(--line); background: #f6f7f9; }
+      .app-logo { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: .68rem; font-weight: 800; }
+      .app-logo i { width: 17px; height: 17px; border-radius: 4px; background: var(--blue); }
+      .nav-row { min-height: 28px; display: flex; align-items: center; gap: 7px; border-radius: 4px; padding: 0 7px; color: #586071; font-size: .61rem; }
+      .nav-row.active { color: var(--ink); background: #e5e9f1; font-weight: 700; }
+      .nav-row i { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 2px; }
+      .content { min-width: 0; padding: 21px 18px; }
+      .content h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.025em; }
+      .content > p { margin: 7px 0 20px; color: var(--muted); font-size: .65rem; line-height: 1.45; }
+      .members { border-top: 1px solid var(--line); }
+      .member { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 66px; border-bottom: 1px solid #dce1e8; }
+      .avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--blue); font-size: .56rem; font-weight: 800; }
+      .member:nth-child(2) .avatar { background: var(--orange); }
+      .member:nth-child(3) .avatar { color: var(--ink); background: var(--pink); }
+      .member strong, .member small { display: block; }
+      .member strong { font-size: .66rem; }
+      .member small { margin-top: 4px; color: var(--muted); font-size: .55rem; }
+      .member button { min-height: 28px; border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; background: var(--white); font-size: .56rem; }
+      .current .member button { width: 30px; padding: 0; }
+      .proposed .member.selected { margin-inline: -8px; padding-inline: 8px; background: var(--blue-pale); }
+      .proposed .member.selected button { border-color: var(--blue); color: var(--white); background: var(--blue); }
+      .permission-note { display: none; margin-top: 16px; padding: 11px; border: 1px solid #9bb0e8; border-radius: 5px; color: #21325c; background: #edf2ff; font-size: .6rem; line-height: 1.45; }
+      .proposed .permission-note { display: block; }
+
+      .proof-notes { border-left: 1px solid var(--ink); background: var(--white); }
+      .proof-notes h2 { margin: 0; padding: 17px 16px; border-bottom: 1px solid var(--ink); font-size: .88rem; }
+      .note { position: relative; padding: 17px 16px 17px 48px; border-bottom: 1px solid var(--line); }
+      .note::before { position: absolute; left: 15px; top: 16px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--orange); font-size: .62rem; font-weight: 850; }
+      .note:nth-of-type(1)::before { content: "1"; }
+      .note:nth-of-type(2)::before { content: "2"; background: var(--blue); }
+      .note:nth-of-type(3)::before { content: "3"; color: var(--ink); background: var(--pink); }
+      .note strong { display: block; margin-bottom: 6px; font-size: .73rem; }
+      .note p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
+      .decision-box { margin: 18px 16px; padding: 14px; border: 1px solid var(--ink); border-radius: 6px; }
+      .decision-box strong { display: block; font-size: .75rem; }
+      .decision-box p { margin: 7px 0 13px; color: var(--muted); font-size: .65rem; line-height: 1.45; }
+      .decision-box button { width: 100%; min-height: 38px; border: 0; border-radius: 4px; color: var(--white); background: var(--blue); font-size: .68rem; font-weight: 800; }
+
+      body[data-mode="current"] .proposed { display: none; }
+      body[data-mode="current"] .screen-pair { grid-template-columns: minmax(0, 760px); justify-content: center; }
+      body[data-mode="proposed"] .current { display: none; }
+      body[data-mode="proposed"] .screen-pair { grid-template-columns: minmax(0, 760px); justify-content: center; }
+      body[data-width="mobile"] .screen-pair { grid-template-columns: repeat(2, minmax(250px, 330px)); justify-content: center; }
+      body[data-width="mobile"] .app-screen { grid-template-columns: 1fr; }
+      body[data-width="mobile"] .app-nav { display: none; }
+      body[data-width="mobile"] .member { grid-template-columns: 28px 1fr; padding-block: 10px; }
+      body[data-width="mobile"] .member button { grid-column: 1 / -1; width: 100%; }
+      body[data-width="mobile"][data-mode="current"] .screen-pair, body[data-width="mobile"][data-mode="proposed"] .screen-pair { grid-template-columns: minmax(250px, 330px); }
+
+      .states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 20px; border: 1px solid var(--ink); background: var(--ink); }
+      .state { min-height: 94px; display: grid; align-content: start; gap: 7px; padding: 13px; background: var(--white); }
+      .state strong { font-size: .68rem; }
+      .state p { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.45; }
+      .state.saved { background: #e5f5eb; }
+      .state.blocked { background: #fff0eb; }
+
+      @media (max-width: 1080px) {
+        .intro { grid-template-columns: 1fr; }
+        .brief { padding-left: 0; border-left: 0; }
+        .proof { grid-template-columns: 1fr; }
+        .proof-notes { border-top: 1px solid var(--ink); border-left: 0; }
+      }
+      @media (max-width: 760px) {
+        .crumb, .masthead-actions button:first-child { display: none; }
+        .masthead { grid-template-columns: 1fr auto; }
+        .controls { grid-template-columns: 1fr; }
+        .segmented { width: 100%; }
+        .segmented button { flex: 1; padding-inline: 6px; }
+        body[data-width] .screen-pair { grid-template-columns: 1fr; }
+        .states { grid-template-columns: 1fr; }
+      }
+      @media (max-width: 460px) {
+        .intro { padding-inline: 16px; }
+        main { padding-inline: 12px; }
+        .proof-stage { padding: 12px; }
+        .app-screen { min-height: 450px; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .screen-pair { transition: none; }
+      }
+    </style>
+  </head>
+  <body data-mode="compare" data-width="desktop">
+    <!--
+      THESIS: Product-change review is its own artifact, not a screenshot pasted into a ticket.
+      OWN-WORLD: Cobalt proof field, white interface plates, orange/pink review marks, exact black rules, and synthetic member data.
+      STORY: Compare current and proposed role changes, inspect the relevant states, and record a bounded decision.
+      FIRST VIEWPORT: Saturated brief above a large dual-screen proof with numbered review notes at the edge.
+      FORM: Polished product-change mockup in a subject-specific proofing language; seed product-change-review-mockup.
+      FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
+    -->
+    <div class="review-page">
+      <header class="masthead"><div class="product">Change review</div><div class="crumb">Member roles · proposal 184</div><div class="masthead-actions"><button type="button">Request changes</button><button class="approve" type="button">Approve direction</button></div></header>
+      <section class="intro"><h1>Move the action next to the person.</h1><div class="brief"><p>The current member list hides every role change in an overflow menu. The proposal keeps valid actions and permission limits beside the selected member.</p><dl><div><dt>Decision</dt><dd>Action placement</dd></div><div><dt>Review by</dt><dd>Product + engineering</dd></div></dl></div></section>
+      <main>
+        <div class="controls"><div class="controls-copy"><strong>Member role change</strong><span>Synthetic product context · desktop and mobile included</span></div><div class="segmented" role="group" aria-label="Change review view"><button type="button" data-mode-choice="compare" aria-pressed="true">Compare</button><button type="button" data-mode-choice="current" aria-pressed="false">Current</button><button type="button" data-mode-choice="proposed" aria-pressed="false">Proposed</button><button type="button" data-width-choice aria-pressed="false">Mobile</button></div></div>
+        <section class="proof">
+          <div class="proof-stage">
+            <div class="screen-pair">
+              <article class="screen current"><header class="screen-label">Current <span>Actions hidden</span></header><div class="app-screen"><nav class="app-nav"><div class="app-logo"><i></i>Northstar</div><span class="nav-row"><i></i>Overview</span><span class="nav-row active"><i></i>Members</span><span class="nav-row"><i></i>Security</span><span class="nav-row"><i></i>Billing</span></nav><section class="content"><h2>Members</h2><p>Manage workspace access and roles.</p><div class="members"><div class="member"><span class="avatar">JM</span><span><strong>Jordan Miles</strong><small>Editor · joined Jul 18</small></span><button type="button">•••</button></div><div class="member"><span class="avatar">AR</span><span><strong>Ana Rivera</strong><small>Viewer · joined Jul 21</small></span><button type="button">•••</button></div><div class="member"><span class="avatar">KL</span><span><strong>Kai Lee</strong><small>Owner · joined May 02</small></span><button type="button">•••</button></div></div></section></div></article>
+              <article class="screen proposed"><header class="screen-label">Proposed <span>Valid actions visible</span></header><div class="app-screen"><nav class="app-nav"><div class="app-logo"><i></i>Northstar</div><span class="nav-row"><i></i>Overview</span><span class="nav-row active"><i></i>Members</span><span class="nav-row"><i></i>Security</span><span class="nav-row"><i></i>Billing</span></nav><section class="content"><h2>Members</h2><p>Select a member to review the roles you can assign.</p><div class="members"><div class="member selected"><span class="avatar">JM</span><span><strong>Jordan Miles</strong><small>Editor · joined Jul 18</small></span><button type="button">Change role</button></div><div class="member"><span class="avatar">AR</span><span><strong>Ana Rivera</strong><small>Viewer · joined Jul 21</small></span><button type="button">Change role</button></div><div class="member"><span class="avatar">KL</span><span><strong>Kai Lee</strong><small>Owner · role protected</small></span><button type="button" disabled>Owner</button></div></div><div class="permission-note"><strong>Owner role protected.</strong> Transfer ownership before changing Kai’s access.</div></section></div></article>
+            </div>
+            <div class="states"><article class="state"><strong>Default</strong><p>No member selected. Each row offers one clear starting action.</p></article><article class="state blocked"><strong>Permission blocked</strong><p>The interface explains why the owner role cannot change.</p></article><article class="state saved"><strong>Role saved</strong><p>Confirmation names the person and the new access level.</p></article></div>
+          </div>
+          <aside class="proof-notes"><h2>Review notes</h2><article class="note"><strong>Less hunting</strong><p>The selected row exposes the next action without adding controls to every column.</p></article><article class="note"><strong>Earlier boundary</strong><p>Protected roles explain the restriction before the user submits anything.</p></article><article class="note"><strong>Mobile stacks cleanly</strong><p>The action moves below the member details instead of shrinking into a tiny menu.</p></article><div class="decision-box"><strong>Decision needed</strong><p>Is the selected-row treatment clear enough without turning the list into a form?</p><button type="button">Record product decision</button></div></aside>
+        </section>
+      </main>
+    </div>
+    <script>
+      const modeButtons = [...document.querySelectorAll("[data-mode-choice]")];
+      modeButtons.forEach((button) => button.addEventListener("click", () => {
+        document.body.dataset.mode = button.dataset.modeChoice;
+        modeButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
+      }));
+      const widthButton = document.querySelector("[data-width-choice]");
+      widthButton.addEventListener("click", () => {
+        const mobile = document.body.dataset.width !== "mobile";
+        document.body.dataset.width = mobile ? "mobile" : "desktop";
+        widthButton.setAttribute("aria-pressed", String(mobile));
+        widthButton.textContent = mobile ? "Desktop" : "Mobile";
+      });
+    </script>
+  </body>
+</html>

site/public/examples/product-design/product-change-review-wireframe.html

@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Product change review wireframe</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --ink: #171717;
+        --muted: #666;
+        --line: #a7a7a7;
+        --soft-line: #d5d5d5;
+        --paper: #f2f2ef;
+        --surface: #fff;
+        --shade: #e5e5e1;
+        --focus: #2255d2;
+        font-family: Arial, Helvetica, sans-serif;
+      }
+      * { box-sizing: border-box; }
+      body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); }
+      button { font: inherit; color: inherit; }
+      button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
+      .shell { min-height: 100vh; }
+      header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 clamp(16px, 3vw, 42px); border-bottom: 1px solid var(--ink); background: var(--surface); }
+      .identity { display: flex; align-items: center; gap: 12px; font-weight: 760; }
+      .identity span { color: var(--muted); font-size: .72rem; font-weight: 500; }
+      .status { display: flex; align-items: center; gap: 8px; font-size: .72rem; }
+      .status i { width: 9px; height: 9px; border: 1px solid var(--ink); border-radius: 50%; background: var(--shade); }
+      main { width: min(1440px, 100%); margin: 0 auto; padding: clamp(24px, 4vw, 54px) clamp(16px, 4vw, 52px) 48px; }
+      .title-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; margin-bottom: 26px; }
+      h1 { max-width: 770px; margin: 0; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .9; letter-spacing: -.045em; text-wrap: balance; }
+      .title-row p { max-width: 58ch; margin: 16px 0 0; color: var(--muted); line-height: 1.5; }
+      .views { display: flex; border: 1px solid var(--ink); background: var(--surface); }
+      .views button { min-height: 42px; border: 0; border-right: 1px solid var(--ink); padding: 0 14px; background: transparent; cursor: pointer; }
+      .views button:last-child { border-right: 0; }
+      .views button[aria-pressed="true"] { color: var(--surface); background: var(--ink); }
+
+      .review { border: 1px solid var(--ink); background: var(--surface); }
+      .review-head { min-height: 60px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 10px 14px; border-bottom: 1px solid var(--ink); }
+      .review-head strong, .review-head span { display: block; }
+      .review-head strong { font-size: .9rem; }
+      .review-head span { margin-top: 4px; color: var(--muted); font-size: .7rem; }
+      .decision { min-height: 38px; border: 1px solid var(--ink); padding: 0 12px; background: var(--surface); font-size: .72rem; font-weight: 700; }
+      .review-body { min-height: 590px; display: grid; }
+      .screens { min-width: 0; display: grid; gap: 18px; padding: clamp(18px, 3vw, 34px); background: var(--paper); }
+      .screen { min-width: 0; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--ink); background: var(--surface); }
+      .screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
+      .screen-head strong { font-size: .76rem; }
+      .screen-head span { color: var(--muted); font-size: .65rem; }
+      .screen-body { display: grid; grid-template-columns: 27% 1fr; min-height: 370px; }
+      .screen-nav { padding: 14px 10px; border-right: 1px solid var(--soft-line); background: var(--paper); }
+      .screen-nav i { display: block; height: 7px; margin-bottom: 12px; background: var(--line); }
+      .screen-nav i:first-child { background: var(--ink); }
+      .screen-main { display: grid; align-content: start; gap: 14px; padding: 18px; }
+      .screen-main h2 { width: 64%; height: 14px; margin: 0; background: var(--ink); }
+      .screen-main p { width: 82%; height: 7px; margin: 0; background: var(--line); }
+      .member-row { min-height: 62px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--soft-line); }
+      .avatar { width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; background: var(--shade); }
+      .member-copy i { display: block; width: 110px; height: 7px; margin: 5px 0; background: var(--ink); }
+      .member-copy i:last-child { width: 74px; background: var(--line); }
+      .member-row button { min-width: 76px; min-height: 30px; border: 1px solid var(--ink); background: var(--surface); font-size: .65rem; }
+      .screen.proposed .member-row:first-of-type { padding: 0 9px; border: 1px solid var(--ink); background: var(--shade); }
+      .screen.proposed .member-row:first-of-type button { color: var(--surface); background: var(--ink); }
+      .screen.proposed .screen-main::after { content: "Selected member actions remain visible while the list scrolls"; padding: 10px; border: 1px dashed var(--line); color: var(--muted); font-size: .65rem; line-height: 1.4; }
+
+      .review-notes { border-left: 1px solid var(--ink); }
+      .review-notes h2 { margin: 0; padding: 14px; border-bottom: 1px solid var(--ink); font-size: .88rem; }
+      .note { padding: 15px 14px; border-bottom: 1px solid var(--soft-line); }
+      .note strong { display: block; margin-bottom: 6px; font-size: .75rem; }
+      .note p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
+      .note.active { background: var(--shade); }
+
+      body[data-view="compare"] .review-body { grid-template-columns: minmax(0, 1fr) 280px; }
+      body[data-view="compare"] .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      body[data-view="states"] .review-body { grid-template-columns: minmax(0, 1fr) 280px; }
+      body[data-view="states"] .screens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+      body[data-view="states"] .screen:first-child .screen-head strong { font-size: 0; }
+      body[data-view="states"] .screen:first-child .screen-head strong::after { content: "Default"; font-size: .76rem; }
+      body[data-view="states"] .screen:nth-child(2) .screen-head strong { font-size: 0; }
+      body[data-view="states"] .screen:nth-child(2) .screen-head strong::after { content: "Permission error"; font-size: .76rem; }
+      body[data-view="states"] .screen:nth-child(2) .screen-main::before { content: "You cannot change this member’s role. Ask a workspace owner."; padding: 12px; border: 1px solid var(--ink); font-size: .68rem; line-height: 1.4; }
+      body[data-view="states"] .screen:nth-child(3) { display: grid; }
+      body[data-view="states"] .screen:nth-child(3) .screen-head strong { font-size: 0; }
+      body[data-view="states"] .screen:nth-child(3) .screen-head strong::after { content: "Saved"; font-size: .76rem; }
+      body[data-view="states"] .screen:nth-child(3) .screen-main::before { content: "Role updated. Jordan can now manage releases."; padding: 12px; border: 1px solid var(--ink); background: var(--shade); font-size: .68rem; line-height: 1.4; }
+      .screen.state-copy { display: none; }
+      body[data-view="mobile"] .review-body { grid-template-columns: minmax(0, 1fr) 280px; }
+      body[data-view="mobile"] .screens { grid-template-columns: repeat(2, minmax(250px, 360px)); justify-content: center; }
+      body[data-view="mobile"] .screen-body { grid-template-columns: 1fr; }
+      body[data-view="mobile"] .screen-nav { display: none; }
+      body[data-view="mobile"] .member-row { grid-template-columns: 34px 1fr; }
+      body[data-view="mobile"] .member-row button { grid-column: 1 / -1; width: 100%; }
+
+      @media (max-width: 1040px) {
+        body[data-view] .review-body { grid-template-columns: 1fr; }
+        .review-notes { border-top: 1px solid var(--ink); border-left: 0; }
+        body[data-view="states"] .screens { grid-template-columns: 1fr; }
+      }
+      @media (max-width: 780px) {
+        .title-row { grid-template-columns: 1fr; align-items: start; }
+        .views { width: 100%; }
+        .views button { flex: 1; padding-inline: 7px; }
+        body[data-view] .screens { grid-template-columns: 1fr; }
+      }
+      @media (max-width: 520px) {
+        .identity span, .status span { display: none; }
+        main { padding-inline: 12px; }
+        .review-head { grid-template-columns: 1fr; }
+        .decision { width: 100%; }
+        .screen-body { grid-template-columns: 1fr; }
+        .screen-nav { display: none; }
+      }
+    </style>
+  </head>
+  <body data-view="compare">
+    <!--
+      THESIS: A product change review should put the current and proposed behavior in the same inspectable frame.
+      OWN-WORLD: Neutral proof wireframe with hard rules, realistic member-management content, and no brand styling.
+      STORY: Move among direct comparison, state coverage, and mobile behavior before accepting the change.
+      FIRST VIEWPORT: Change brief and three-view control above a full-width current/proposed review board.
+      FORM: Low-fidelity review artifact with three evidence arrangements; seed product-change-review-wireframe.
+      FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
+    -->
+    <div class="shell">
+      <header><div class="identity">Product change review <span>Member roles · wireframe</span></div><div class="status"><i></i><span>Decision open</span></div></header>
+      <main>
+        <section class="title-row"><div><h1>Keep role changes next to the person they affect.</h1><p>The current screen hides actions in a menu. The proposal keeps the selected member, available roles, and permission limits together.</p></div><div class="views" role="group" aria-label="Review evidence"><button type="button" data-view-choice="compare" aria-pressed="true">Current / proposed</button><button type="button" data-view-choice="states" aria-pressed="false">States</button><button type="button" data-view-choice="mobile" aria-pressed="false">Mobile</button></div></section>
+        <section class="review">
+          <header class="review-head"><div><strong>Change 184 · Inline member actions</strong><span>Synthetic product context · no production data</span></div><button class="decision" type="button">Record decision</button></header>
+          <div class="review-body">
+            <div class="screens">
+              <article class="screen"><header class="screen-head"><strong>Current</strong><span>Actions in overflow menu</span></header><div class="screen-body"><nav class="screen-nav"><i></i><i></i><i></i><i></i></nav><div class="screen-main"><h2></h2><p></p><div class="member-row"><span class="avatar"></span><span class="member-copy"><i></i><i></i></span><button type="button">•••</button></div><div class="member-row"><span class="avatar"></span><span class="member-copy"><i></i><i></i></span><button type="button">•••</button></div></div></div></article>
+              <article class="screen proposed"><header class="screen-head"><strong>Proposed</strong><span>Selection exposes valid actions</span></header><div class="screen-body"><nav class="screen-nav"><i></i><i></i><i></i><i></i></nav><div class="screen-main"><h2></h2><p></p><div class="member-row"><span class="avatar"></span><span class="member-copy"><i></i><i></i></span><button type="button">Change role</button></div><div class="member-row"><span class="avatar"></span><span class="member-copy"><i></i><i></i></span><button type="button">Change role</button></div></div></div></article>
+              <article class="screen state-copy"><header class="screen-head"><strong>Saved</strong><span>Confirmation</span></header><div class="screen-body"><nav class="screen-nav"><i></i><i></i><i></i><i></i></nav><div class="screen-main"><h2></h2><p></p><div class="member-row"><span class="avatar"></span><span class="member-copy"><i></i><i></i></span><button type="button">Change role</button></div></div></div></article>
+            </div>
+            <aside class="review-notes"><h2>What to decide</h2><article class="note active"><strong>Action placement</strong><p>Does the selected row make the next action clear without making every row noisy?</p></article><article class="note"><strong>Permission boundary</strong><p>Can the interface explain why a role is unavailable before submission?</p></article><article class="note"><strong>Mobile behavior</strong><p>Should actions follow the selected row or move to a fixed bottom area?</p></article></aside>
+          </div>
+        </section>
+      </main>
+    </div>
+    <script>
+      const choices = [...document.querySelectorAll("[data-view-choice]")];
+      choices.forEach((button) => button.addEventListener("click", () => {
+        document.body.dataset.view = button.dataset.viewChoice;
+        choices.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
+      }));
+    </script>
+  </body>
+</html>