{
  "schemaVersion": 1,
  "scope": {
    "summary": "Page-layout families and structural variants found through the site's navigation, section indexes, source templates, and public pages. Content-only differences share a record. This is a maintained family inventory, not a census of every historical HTML file or tutorial demo.",
    "method": "Review the shared header/footer and Learn destinations, compare the representative pages and their SSI/CSS regions, and capture the public result. Check specialized catalogs, applications, archive indexes, and the forum/newsletter separately. A different subject, title, illustration, or color does not create a new layout.",
    "sourceBaseline": "98c81538e65081e23abaa78bc86586d38e6aec2e",
    "publishedOverrides": [
      {
        "revision": "87b8d16c",
        "scope": "Modernized Lab pages and left_lab.shtml",
        "note": "Published and verified by the Lab owner before capture, but not merged into the source baseline. Lab source links are pinned to this release rather than the older files on main."
      }
    ],
    "exclusions": [
      "Tutorial exercises, downloadable projects, isolated embedded demos, and old shell backups are not separate site-layout recommendations.",
      "Redirects such as tutorials.htm, apps/index.htm, and Lab example.htm/experiments.htm are destinations to resolve, not layouts to capture.",
      "Private account history, administration, authentication flows, visitor records, and error/redirect endpoints are outside the public capture inventory.",
      "External retail and social-network pages are not cataloged. The forum and newsletter are included as explicitly separate companion experiences.",
      "Legacy coverage is representative. An old article's subject or directory does not prove that its current page still uses a legacy shell."
    ],
    "groupedExamples": [
      {
        "url": "https://www.kirupa.com/lab/index.htm",
        "layout": "topic-index",
        "reason": "The published Lab landing uses the same grouped, icon-led topic-list structure."
      },
      {
        "url": "https://www.kirupa.com/mcp/",
        "layout": "tutorial",
        "reason": "A current reading column with endpoint/copy controls; those are content components, not a new outer layout."
      },
      {
        "url": "https://www.kirupa.com/developer/mx2004/motion_tween.htm",
        "layout": "tutorial",
        "reason": "Archived Flash content now uses the current article shell and a legacy-content notice."
      }
    ],
    "capturePolicy": "Anonymous Chromium captures in isolated contexts. No form submissions, quiz answers, subscriptions, chat messages, or plot claims. Presence and tracking requests are blocked. Screenshots retain their captured appearance; local selectors only switch actual images. Public member artwork and third-party screenshots retain their owners' rights."
  },
  "groups": [
    {
      "id": "learning",
      "title": "Home and learning"
    },
    {
      "id": "reference",
      "title": "Directories and reference"
    },
    {
      "id": "media",
      "title": "Media and books"
    },
    {
      "id": "applications",
      "title": "Tools and applications"
    },
    {
      "id": "archives",
      "title": "Archive content and legacy shells"
    },
    {
      "id": "companions",
      "title": "Companion sites"
    }
  ],
  "families": [
    "home",
    "directory",
    "article",
    "product",
    "application",
    "gallery",
    "legacy",
    "community",
    "publication"
  ],
  "captures": "/design/layouts/captures.json",
  "layouts": [
    {
      "id": "home",
      "title": "Homepage",
      "group": "learning",
      "family": "home",
      "status": "current",
      "url": "https://www.kirupa.com/",
      "purpose": "The main entry point, with a welcome feature and the latest articles, newsletter issues, and interviews.",
      "regions": [
        "Shared site header and theme controls",
        "Centered welcome feature",
        "Latest-content groups",
        "Shared newsletter and footer"
      ],
      "reuse": "Use for the site front door. Section indexes should use the topic or reference-directory layout instead of copying the welcome feature.",
      "responsive": "The content groups reflow into a narrow column. The desktop capture is 1600px wide; narrower intermediate widths can reserve space for the shared rail even when this page has no topic links.",
      "sources": [
        "index.html",
        "ssi/newDesign/src/kirupa.css",
        "ssi/newDesign/src/footer.shtml"
      ],
      "alt": "KIRUPA homepage with the welcome video above the Latest content cards and the shared navigation.",
      "phoneAlt": "The homepage at phone width, with compact site navigation, the welcome feature, and vertically arranged latest-content cards.",
      "captures": [
        {
          "id": "home-desktop",
          "layout": "home",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/",
          "finalURL": "https://www.kirupa.com/",
          "status": 200,
          "path": "/design/layouts/home-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 3092
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "KIRUPA homepage with the welcome video above the Latest content cards and the shared navigation.",
          "capturedAt": "2026-10-21T02:33:33.313Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "f3af10b33c004f687f095df0e7e3abe875b4578a879af35cb50c0c3062cd4327",
          "captureDefinitionSha256": "a9060d8ec5ceba4b972bdfaac736fa53c26deee3e68759b36604d4b83a94785c",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "home-phone",
          "layout": "home",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/",
          "finalURL": "https://www.kirupa.com/",
          "status": 200,
          "path": "/design/layouts/home-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 4933
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The homepage at phone width, with compact site navigation, the welcome feature, and vertically arranged latest-content cards.",
          "capturedAt": "2026-10-21T02:33:34.606Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "a2de157236c1b72abe75e8a251426f7455f7e8ac430a7cf75a9f32db964d876d",
          "captureDefinitionSha256": "fb31b8eaec5d844609390aac3c3673833372388971979a6b2e0603d4388c2e28",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "home-footer",
          "layout": "home",
          "variant": "footer",
          "label": "Shared footer",
          "source": "https://www.kirupa.com/",
          "finalURL": "https://www.kirupa.com/",
          "status": 200,
          "path": "/design/layouts/home-footer.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 1892
          },
          "document": {
            "width": 1600,
            "height": 3092
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The bottom of the homepage, showing the shared newsletter promotion and grouped footer links.",
          "capturedAt": "2026-10-21T02:33:35.957Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "7b1009769020fd9520b3c6be0c6ff437d479718e531b2f9561c5f6aef1dceb73",
          "captureDefinitionSha256": "93b6c0be492cee15bf6a6acd3079b248d55a083776bd37782e55aa93ef933189",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-home"
    },
    {
      "id": "learn-hub",
      "title": "Tutorial landing",
      "group": "learning",
      "family": "directory",
      "status": "current",
      "url": "https://www.kirupa.com/learn/index.htm",
      "purpose": "The cross-topic learning hub, with category links followed by recent content.",
      "regions": [
        "Shared header",
        "Section title and introduction",
        "Two-column Learning Categories list",
        "Latest-content section",
        "Optional wide-screen forum rail"
      ],
      "reuse": "Use for a broad entry point spanning several subjects. Keep individual lessons in their topic index.",
      "responsive": "The shared .row/.column lists stack below 800px. The right-hand forum rail is omitted at narrower widths; the header uses its compact navigation.",
      "sources": [
        "learn/index.htm",
        "ssi/newDesign/src/kirupa.css",
        "ssi/newDesign/latest.shtml"
      ],
      "alt": "The Learn landing page with two columns of illustrated learning-category links beside the wide-screen forum rail.",
      "phoneAlt": "The Learn landing page at phone width, with one column of learning-category links.",
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-learn-hub",
      "captures": [
        {
          "id": "learn-hub-desktop",
          "layout": "learn-hub",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/learn/index.htm",
          "finalURL": "https://www.kirupa.com/learn/index.htm",
          "status": 200,
          "path": "/design/layouts/learn-hub-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 14082
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Learn landing page with two columns of illustrated learning-category links beside the wide-screen forum rail.",
          "capturedAt": "2026-10-21T02:33:37.270Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "d16e3a3b97e7d98ca8b6e3c0391d26ddef45fc71f625a880b6d76f6eb9fb491d",
          "captureDefinitionSha256": "c321297d6910e5d93691413f48ec291c83f0c2be52c86547de1fff0ed7f472c4",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "learn-hub-phone",
          "layout": "learn-hub",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/learn/index.htm",
          "finalURL": "https://www.kirupa.com/learn/index.htm",
          "status": 200,
          "path": "/design/layouts/learn-hub-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 18364
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Learn landing page at phone width, with one column of learning-category links.",
          "capturedAt": "2026-10-21T02:33:38.520Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "f37fd97ed27ad193b3f104375db340e9c5d094debb6cb40cc237a47ca13edcb2",
          "captureDefinitionSha256": "8e03f0fc046979d00fdb3ca6f60b01911b99829952b7887dbd61ec473922fd69",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "topic-index",
      "title": "Topic index",
      "group": "learning",
      "family": "directory",
      "status": "current",
      "url": "https://www.kirupa.com/data_structures_algorithms/index.htm",
      "purpose": "A subject's lessons grouped by learning stage or topic.",
      "regions": [
        "Section title and introduction",
        "Named topic groups",
        "Icon-led article links",
        "Shared shell and optional forum rail"
      ],
      "reuse": "Use for subject indexes such as data structures, JavaScript, or the modernized Lab landing. Preserve the existing articleList links and group hierarchy.",
      "responsive": "The reading region narrows with the shared shell. Lists remain in document order; optional desktop rails disappear instead of becoming additional content columns.",
      "sources": [
        "data_structures_algorithms/index.htm",
        "javascript_basics/index.htm",
        "ssi/newDesign/src/kirupa.css",
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/index.htm"
      ],
      "alt": "The data structures and algorithms topic index, with Getting Started and Data Structures groups of icon-led lesson links.",
      "phoneAlt": "The topic index at phone width, with its group headings and lesson links in a single reading column.",
      "captures": [
        {
          "id": "topic-index-desktop",
          "layout": "topic-index",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/data_structures_algorithms/index.htm",
          "finalURL": "https://www.kirupa.com/data_structures_algorithms/index.htm",
          "status": 200,
          "path": "/design/layouts/topic-index-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 6765
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The data structures and algorithms topic index, with Getting Started and Data Structures groups of icon-led lesson links.",
          "capturedAt": "2026-10-21T02:48:29.768Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "b84d697b291af6f96da5f75013528284c111b536fda83e357b86955f701bf4aa",
          "captureDefinitionSha256": "f43274fd6a1d7f1c5784cce2eb89a3b61c320f1264c821bb111cc6e2d737e1e7",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "topic-index-phone",
          "layout": "topic-index",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/data_structures_algorithms/index.htm",
          "finalURL": "https://www.kirupa.com/data_structures_algorithms/index.htm",
          "status": 200,
          "path": "/design/layouts/topic-index-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 734
          },
          "document": {
            "width": 390,
            "height": 8239
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The topic index at phone width, with its group headings and lesson links in a single reading column.",
          "capturedAt": "2026-10-21T02:48:31.063Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "c6a83126462ead7b643de408372c151ed96b0a83b249d01478b5bc1260c8ea4b",
          "captureDefinitionSha256": "6d39dca67e16f8ce38b13bd419acb23c020bcd5bd36b2714e6b3726b9282e7fd",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-topic-index"
    },
    {
      "id": "tutorial",
      "title": "Tutorial article",
      "group": "learning",
      "family": "article",
      "status": "current",
      "url": "https://www.kirupa.com/html5/building_your_first_web_page.htm",
      "purpose": "The standard reading layout for explanations, code, diagrams, and embedded examples.",
      "regions": [
        "Scrollable topic rail",
        "Article title, byline, and Filed under metadata",
        "Reading column with media and code",
        "Article navigation and footer",
        "Optional wide-screen forum rail"
      ],
      "reuse": "Start from an adjacent current tutorial. Keep the SSI head/header/footer, tutorialInformation, authorText, tutorialInfo, and topic navigation. About pages and MCP documentation also use this reading structure.",
      "responsive": "The native rail hides at 1420px and the reading region becomes one column at 1200px. Images shrink within the column and previous/next links stack. Preserve contained code scrolling.",
      "sources": [
        "html5/building_your_first_web_page.htm",
        "ssi/newDesign/left_js.shtml",
        "ssi/newDesign/src/kirupa.css",
        "ssi/kirupa_sig.shtml",
        "mcp/index.php"
      ],
      "alt": "A current tutorial with the left topic rail, blue article title and byline, introductory text, and video example.",
      "phoneAlt": "The same tutorial at phone width, with the topic rail removed and the title, byline, and content in one column.",
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-tutorial",
      "captures": [
        {
          "id": "tutorial-desktop",
          "layout": "tutorial",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/html5/building_your_first_web_page.htm",
          "finalURL": "https://www.kirupa.com/html5/building_your_first_web_page.htm",
          "status": 200,
          "path": "/design/layouts/tutorial-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 27724
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "A current tutorial with the left topic rail, blue article title and byline, introductory text, and video example.",
          "capturedAt": "2026-10-21T02:33:42.577Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "bde968ad6e233ab8684f52ba4cac819122f21ce9c5bd76f29a2762a277979099",
          "captureDefinitionSha256": "bacd6ee74712d6d5659b9e1aa133fdc50ab7d724e433175afd88f8de209854d1",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "tutorial-phone",
          "layout": "tutorial",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/html5/building_your_first_web_page.htm",
          "finalURL": "https://www.kirupa.com/html5/building_your_first_web_page.htm",
          "status": 200,
          "path": "/design/layouts/tutorial-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 31160
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The same tutorial at phone width, with the topic rail removed and the title, byline, and content in one column.",
          "capturedAt": "2026-10-21T02:33:43.860Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "35e2ad52d07770948ff2232afb4e7ba3586b2c078694cce8bda9eb5a9df3c2a4",
          "captureDefinitionSha256": "8205b42af44878d22a79e900e53f48c4011c8c698c513f684528b4540dae5a3b",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "reference-index",
      "title": "Reference directory",
      "group": "reference",
      "family": "directory",
      "status": "current",
      "url": "https://www.kirupa.com/design/",
      "purpose": "A section directory with descriptive rows and direct links to agent-readable documentation.",
      "regions": [
        "Section rail",
        "Native title and metadata",
        "Agent entry links",
        "Icon/title and description rows",
        "Previous/next navigation"
      ],
      "reuse": "Use for a documentation index whose entries need short explanations. Keep section links and Markdown/JSON discovery generated from the same source.",
      "responsive": "At 600px the title/icon and description in each row stack. The Design section adds a collapsed section list when its native rail is unavailable.",
      "sources": [
        "design/system.source.json",
        "design/template.htm",
        "design/design.css",
        "tools/build_design_system.mjs"
      ],
      "alt": "The Design System index with its section navigation, agent entry block, and two-part directory rows.",
      "phoneAlt": "The Design System directory at phone width, with each icon and title above its description in a stacked row.",
      "captures": [
        {
          "id": "reference-index-desktop",
          "layout": "reference-index",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/design/",
          "finalURL": "https://www.kirupa.com/design/",
          "status": 200,
          "path": "/design/layouts/reference-index-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 4016
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Design System index with its section navigation, agent entry block, and two-part directory rows.",
          "capturedAt": "2026-10-21T02:48:32.360Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "54db5870eca05bc52009eff152d2782a6e83e0020ad164ac74d8b6e7cecf7f90",
          "captureDefinitionSha256": "bde3d6d46815cce9daddb8142c906738e44addf736bd1c659a681bbd867bb2f1",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "reference-index-rows",
          "layout": "reference-index",
          "variant": "rows",
          "label": "Directory rows",
          "source": "https://www.kirupa.com/design/",
          "finalURL": "https://www.kirupa.com/design/",
          "status": 200,
          "path": "/design/layouts/reference-index-rows.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 1085
          },
          "document": {
            "width": 1600,
            "height": 4016
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Design System directory's icon/title and description rows inside the native reading column.",
          "capturedAt": "2026-10-21T02:48:33.672Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "57e6cace352ab7252e05a5abe7dca7e74bda874dee2dd6eeef7be29acbb97448",
          "captureDefinitionSha256": "3cb9b4d74150d41d6642526b1d47d9f01290ea254c52e6567de9f337d49dcbb1",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "reference-index-phone",
          "layout": "reference-index",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/design/",
          "finalURL": "https://www.kirupa.com/design/",
          "status": 200,
          "path": "/design/layouts/reference-index-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 1374
          },
          "document": {
            "width": 390,
            "height": 6051
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Design System directory at phone width, with each icon and title above its description in a stacked row.",
          "capturedAt": "2026-10-21T02:48:34.940Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "92c833f3c40df3a503ea570ac6c459429edbdaca5dff12e85575a38cdb090347",
          "captureDefinitionSha256": "4593b0c23ea2011e13d25e119cc79c5b2f648f0a880adc240cd055517d6ef14a",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-reference-index"
    },
    {
      "id": "reference-catalog",
      "title": "Reference catalog",
      "group": "reference",
      "family": "article",
      "status": "current",
      "url": "https://www.kirupa.com/design/components.htm",
      "purpose": "A reference article containing indexed specimens, local controls, and source or markup disclosures.",
      "regions": [
        "Documentation rail",
        "Native title and reference copy",
        "Independently controlled specimens",
        "Catalog index",
        "Source and usage disclosures"
      ],
      "reuse": "Use the Design generator and catalog data. This is an article-body variant; do not replace the shared shell with an application dashboard.",
      "responsive": "Controls wrap and preview frames fit the reading column. Long code stays in its own scroll container; the narrow page exposes the section list above the article.",
      "sources": [
        "design/components.source.json",
        "design/design.js",
        "design/design.css",
        "tools/build_design_system.mjs"
      ],
      "alt": "The Components reference page with native documentation navigation, agent instructions, and contextual examples.",
      "phoneAlt": "The Components reference at phone width, with stacked preview controls and the embedded specimen within the reading column.",
      "captures": [
        {
          "id": "reference-catalog-desktop",
          "layout": "reference-catalog",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/design/components.htm",
          "finalURL": "https://www.kirupa.com/design/components.htm",
          "status": 200,
          "path": "/design/layouts/reference-catalog-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 22878
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Components reference page with native documentation navigation, agent instructions, and contextual examples.",
          "capturedAt": "2026-10-21T02:33:49.099Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "d0eb0e719a0ad4aa954ae2bfb55bb207123fad9fd522a48ba1e3db5e56950840",
          "captureDefinitionSha256": "29f922d76fdee18f9012e330d716d3a7cf0fe322f5725f42109473a51ef67a20",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "reference-catalog-specimen",
          "layout": "reference-catalog",
          "variant": "specimen",
          "label": "Local specimen",
          "source": "https://www.kirupa.com/design/components.htm",
          "finalURL": "https://www.kirupa.com/design/components.htm",
          "status": 200,
          "path": "/design/layouts/reference-catalog-specimen.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 1450
          },
          "document": {
            "width": 1600,
            "height": 23236
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "A loaded component specimen and its independent style, color, and mode controls within the reference article.",
          "capturedAt": "2026-10-21T02:33:50.541Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "684003542943f284f92ca8bddba382974ffade5f9614c9ddcc22bd4edc3e9bd8",
          "captureDefinitionSha256": "30022f8a4e611894eb54878df50b221f6f358ffcf8eb616e4ddec5668fefa30c",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "reference-catalog-phone",
          "layout": "reference-catalog",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/design/components.htm",
          "finalURL": "https://www.kirupa.com/design/components.htm",
          "status": 200,
          "path": "/design/layouts/reference-catalog-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 1956
          },
          "document": {
            "width": 390,
            "height": 29787
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Components reference at phone width, with stacked preview controls and the embedded specimen within the reading column.",
          "capturedAt": "2026-10-21T02:33:51.911Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "668dc28c88b2bbf5eac2489dc415ecee01b549de8273dc07ec77bbf2a15d86ca",
          "captureDefinitionSha256": "6f98a825055bf25a5c658d66228495dce2e56555f8a6db368558e82a613a475d",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-reference-catalog"
    },
    {
      "id": "podcast-index",
      "title": "Interview catalog",
      "group": "media",
      "family": "directory",
      "status": "current",
      "url": "https://www.kirupa.com/podcast/index.htm",
      "purpose": "A visual interview library with current episodes and an older interview archive.",
      "regions": [
        "Interview rail",
        "Section introduction",
        "Episode thumbnail grid",
        "Classic interview archive",
        "Shared footer"
      ],
      "reuse": "Use for an episode collection. Keep the cards linked to full episode pages and retain the archive as a separate group.",
      "responsive": "The card grid reduces its columns as the content region narrows. The topic rail is removed by the shared shell's smaller-screen rules.",
      "sources": [
        "podcast/index.htm",
        "ssi/newDesign/left_podcast.shtml",
        "interviews/interviews.css",
        "ssi/newDesign/src/kirupa.css"
      ],
      "alt": "The interview catalog with a left interview rail and a grid of guest and episode thumbnails.",
      "phoneAlt": "The interview catalog at phone width, showing its narrower grid of guest thumbnails and episode titles.",
      "captures": [
        {
          "id": "podcast-index-desktop",
          "layout": "podcast-index",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/podcast/index.htm",
          "finalURL": "https://www.kirupa.com/podcast/index.htm",
          "status": 200,
          "path": "/design/layouts/podcast-index-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 8533
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The interview catalog with a left interview rail and a grid of guest and episode thumbnails.",
          "capturedAt": "2026-10-21T02:48:36.488Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "b1ef58c8ceed3a703f146f9bcac6ce953c14795a471b9da741aa4404b4aac870",
          "captureDefinitionSha256": "b550b18b2d3d1a3f86a494638d5e625f759b22eb24b5cca0f0cd5e54e84124dd",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "podcast-index-phone",
          "layout": "podcast-index",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/podcast/index.htm",
          "finalURL": "https://www.kirupa.com/podcast/index.htm",
          "status": 200,
          "path": "/design/layouts/podcast-index-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 908
          },
          "document": {
            "width": 390,
            "height": 22024
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The interview catalog at phone width, showing its narrower grid of guest thumbnails and episode titles.",
          "capturedAt": "2026-10-21T02:48:37.837Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "c05429a75514569d7d1c78f82096568047d2d9f4e462172fe7a969d20e0e0c57",
          "captureDefinitionSha256": "63f9afc08d322e75b9354d388b1bdd12e135025373c375c4b24d278b7ced96b7",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-podcast-index"
    },
    {
      "id": "podcast-episode",
      "title": "Interview episode",
      "group": "media",
      "family": "article",
      "status": "current",
      "url": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
      "purpose": "A media-led article with a conversation summary, text-only chapter bands, and a speaker-labeled transcript.",
      "regions": [
        "Interview rail and article title",
        "Guest introduction and media",
        "Chapter bands and playback links",
        "Speaker portraits, timestamp pills, and transcript turns",
        "Related navigation"
      ],
      "reuse": "Use the podcast renderer and episode data. Keep chapter times linked to the recording and distinguish the transcript from editorial summary.",
      "responsive": "Media follows the reading-column width. Chapter bands are text only and span the transcript column at every width. Speaker headers wrap; the shared interview rail disappears on narrow screens.",
      "sources": [
        "podcast/amit_chopra_life_after_nine_to_five.htm",
        "ssi/newDesign/src/kirupa.css",
        "ssi/newDesign/left_podcast.shtml"
      ],
      "alt": "An interview episode with the interview rail, guest title, byline, and introductory links.",
      "phoneAlt": "The interview transcript at phone width, with a circular speaker portrait, timestamp pill, colored rule, and spoken text in one reading column.",
      "captures": [
        {
          "id": "podcast-episode-desktop",
          "layout": "podcast-episode",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "finalURL": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "status": 200,
          "path": "/design/layouts/podcast-episode-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 58779
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "An interview episode with the interview rail, guest title, byline, and introductory links.",
          "capturedAt": "2026-11-06T07:35:28.020Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "ae514be6c1affc9de2cc80a1a9b4522c969881602997a01954a7921babd2303f",
          "captureDefinitionSha256": "04418a75d462a92c868335462de6b5c7864a6cad6ee0ca56b6c7bf14182bc3d4",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "podcast-episode-media",
          "layout": "podcast-episode",
          "variant": "media",
          "label": "Media and summary",
          "source": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "finalURL": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "status": 200,
          "path": "/design/layouts/podcast-episode-media.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 1341
          },
          "document": {
            "width": 1600,
            "height": 58779
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The episode's embedded video thumbnail above the conversation summary in the article column.",
          "capturedAt": "2026-11-06T07:35:29.386Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "715ee4de59515efd4e6554818a356809decb42729eebb2951cbf67e5f5814937",
          "captureDefinitionSha256": "8c961f3c96bb166d73264e059bd4b7a9ae6786b390f22bb587292e95106ef67f",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "podcast-episode-chapter",
          "layout": "podcast-episode",
          "variant": "chapter",
          "label": "Chapter band",
          "source": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "finalURL": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "status": 200,
          "path": "/design/layouts/podcast-episode-chapter.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 6462
          },
          "document": {
            "width": 1600,
            "height": 58779
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "A text-only transcript chapter band with its number, time, title, summary, and Watch this part link above the speaker turns.",
          "capturedAt": "2026-11-06T07:35:30.715Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "ca0d8c47a0a4fce73ce7a8741c4f6a3f6f664034c3e15b78bfef5d9cd3bdb023",
          "captureDefinitionSha256": "d399cac9a889973b4af097d36375e7e2560e3c3a2c9b0e4dd1ca2f4e6298f2e9",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "podcast-episode-transcript",
          "layout": "podcast-episode",
          "variant": "transcript",
          "label": "Transcript",
          "source": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "finalURL": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "status": 200,
          "path": "/design/layouts/podcast-episode-transcript.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 6721
          },
          "document": {
            "width": 1600,
            "height": 58779
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The interview transcript with circular speaker portraits, timestamp pills, and colored rules beside grouped paragraphs.",
          "capturedAt": "2026-11-06T07:35:32.045Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "e7eda0477e48dca90fa6d3ee6e05fafb576a8ab094e2ae8281a45dd5a844c82c",
          "captureDefinitionSha256": "e3712ed1fdc47223d66445a4b83e77c62c8344edf831be8862f9fc616c69acee",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "podcast-episode-phone",
          "layout": "podcast-episode",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "finalURL": "https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm",
          "status": 200,
          "path": "/design/layouts/podcast-episode-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 10090
          },
          "document": {
            "width": 390,
            "height": 100789
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The interview transcript at phone width, with a circular speaker portrait, timestamp pill, colored rule, and spoken text in one reading column.",
          "capturedAt": "2026-11-06T07:35:33.433Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "ff75227a206472839ec21abbaab0c53f6ad182a602a34f1e935c6615964d1d9b",
          "captureDefinitionSha256": "3c6680acc345be0757543a3844ea03bced390f3dcf17eab6f10b473bf63ac059",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-podcast-episode"
    },
    {
      "id": "video-library",
      "title": "Video library",
      "group": "media",
      "family": "directory",
      "status": "current",
      "url": "https://www.kirupa.com/learn/videos.htm",
      "purpose": "A featured video followed by a thumbnail-led list of earlier videos.",
      "regions": [
        "Section introduction",
        "Featured media container",
        "More Videos list",
        "Optional forum rail",
        "Shared footer"
      ],
      "reuse": "Use for the site's video index. Keep a featured item distinct from the rest of the list; a player alone does not require a new shell.",
      "responsive": "The featured media fits the content column. The list remains below it and the shared side regions disappear on small screens.",
      "sources": [
        "learn/videos.htm",
        "ssi/newDesign/src/kirupa.css"
      ],
      "alt": "The video library with a large featured video above a list of earlier video thumbnails.",
      "phoneAlt": "The video library at phone width, with featured media above the vertical video list.",
      "captures": [
        {
          "id": "video-library-desktop",
          "layout": "video-library",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/learn/videos.htm",
          "finalURL": "https://www.kirupa.com/learn/videos.htm",
          "status": 200,
          "path": "/design/layouts/video-library-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 4423
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The video library with a large featured video above a list of earlier video thumbnails.",
          "capturedAt": "2026-10-21T14:53:21.896Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "fff52eb5d7e43def07b93fdb4d546296d1ce4b5ac8eb6baf8bf3b7fa4fa65f2f",
          "captureDefinitionSha256": "5fd5a7dc08a9c579cd9601b6987c1d5759220b5690ad73a6d1d373d903264bcb",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced.",
          "videoFeed": {
            "status": 200,
            "reasons": []
          }
        },
        {
          "id": "video-library-phone",
          "layout": "video-library",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/learn/videos.htm",
          "finalURL": "https://www.kirupa.com/learn/videos.htm",
          "status": 200,
          "path": "/design/layouts/video-library-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 596
          },
          "document": {
            "width": 390,
            "height": 6534
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The video library at phone width, with featured media above the vertical video list.",
          "capturedAt": "2026-10-21T14:53:23.228Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "daa1c38ac7ecef89aabf58153f693e9a08eedd1abdef73eb0f67e6baf5b84f94",
          "captureDefinitionSha256": "dedaea430f7bac5665f217fdf546937e3331c5cf82e32b137e52d0a1f371e536",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced.",
          "videoFeed": {
            "status": 200,
            "reasons": []
          }
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-video-library"
    },
    {
      "id": "book-index",
      "title": "Book catalog",
      "group": "media",
      "family": "directory",
      "status": "current",
      "url": "https://www.kirupa.com/book/index.htm",
      "purpose": "A product collection organized into current releases and older books.",
      "regions": [
        "Section introduction",
        "Book-cover and description rows",
        "Purchase/source actions",
        "Archive section",
        "Shared shell"
      ],
      "reuse": "Use for a book collection. Keep each cover beside its own summary and actions, with links to the appropriate detail page or retailer.",
      "responsive": "Rows fit the narrow content region and actions wrap. Preserve the association between a cover, title, description, and its links.",
      "sources": [
        "book/index.htm",
        "ssi/newDesign/src/kirupa.css"
      ],
      "alt": "The Books catalog with cover images, descriptions, and purchase or source actions arranged in rows.",
      "phoneAlt": "The Books catalog at phone width, with compact cover and description rows and wrapping action links.",
      "captures": [
        {
          "id": "book-index-desktop",
          "layout": "book-index",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/book/index.htm",
          "finalURL": "https://www.kirupa.com/book/index.htm",
          "status": 200,
          "path": "/design/layouts/book-index-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 3485
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Books catalog with cover images, descriptions, and purchase or source actions arranged in rows.",
          "capturedAt": "2026-10-21T02:48:51.726Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "7e829ab3c3303b4da08887a18a4ffd8adacdbcd2cfd701f1035de499defbf6c9",
          "captureDefinitionSha256": "622806947c8b463fe24541b531f861fb2e4410e9669c448cc0aaff330f6b4e26",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "book-index-phone",
          "layout": "book-index",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/book/index.htm",
          "finalURL": "https://www.kirupa.com/book/index.htm",
          "status": 200,
          "path": "/design/layouts/book-index-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 849
          },
          "document": {
            "width": 390,
            "height": 6525
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Books catalog at phone width, with compact cover and description rows and wrapping action links.",
          "capturedAt": "2026-10-21T02:48:53.030Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "392741180f8d1234fd35614a72b70295851d541e7885be14832b395843f58a41",
          "captureDefinitionSha256": "e7d5209bf5612e8e08afbd56d0cb58e073b61021de63d2cd4dc5bb855d1a9d52",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-book-index"
    },
    {
      "id": "book-detail",
      "title": "Book detail",
      "group": "media",
      "family": "product",
      "status": "current",
      "url": "https://www.kirupa.com/book/html5_canvas_noob_to_ninja.htm",
      "purpose": "A single book's cover, description, purchase action, contents, and FAQs.",
      "regions": [
        "Cover and title feature",
        "Purchase link",
        "Book description and contents",
        "Questions and author information",
        "Shared footer"
      ],
      "reuse": "Use as the existing product-detail reference. Its page-local cover positioning and fixed colors are specific to this book, not new site-wide tokens.",
      "responsive": "At 1024px the cover moves above the title and description. The two contents columns become a single flow.",
      "sources": [
        "book/html5_canvas_noob_to_ninja.htm",
        "ssi/newDesign/src/kirupa.css"
      ],
      "alt": "The HTML5 Canvas book detail with its cover beside the title and purchase link, followed by description and contents.",
      "phoneAlt": "The book detail at phone width with the cover above the title and purchase information.",
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-book-detail",
      "captures": [
        {
          "id": "book-detail-desktop",
          "layout": "book-detail",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/book/html5_canvas_noob_to_ninja.htm",
          "finalURL": "https://www.kirupa.com/book/html5_canvas_noob_to_ninja.htm",
          "status": 200,
          "path": "/design/layouts/book-detail-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 4207
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The HTML5 Canvas book detail with its cover beside the title and purchase link, followed by description and contents.",
          "capturedAt": "2026-10-21T02:34:07.146Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "01d565ed4b14148ca280b8cf2215f78185e48467d670910943e768d3c34393ea",
          "captureDefinitionSha256": "2d2087329463d7cb97d6ad4975ca862c09592e95f9dc807d58eda0c084931a48",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "book-detail-phone",
          "layout": "book-detail",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/book/html5_canvas_noob_to_ninja.htm",
          "finalURL": "https://www.kirupa.com/book/html5_canvas_noob_to_ninja.htm",
          "status": 200,
          "path": "/design/layouts/book-detail-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 6050
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The book detail at phone width with the cover above the title and purchase information.",
          "capturedAt": "2026-10-21T02:34:08.334Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "ecbbb8f5414d6f2b9a2fa87eb0544639f203f4e3fb1438ed5f3e6119f15c448d",
          "captureDefinitionSha256": "f2051da41b3f6fb102b7e186c9734ead57dffb2216840137771b224b7682149c",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "quiz-index",
      "title": "Quiz catalog",
      "group": "applications",
      "family": "directory",
      "status": "current",
      "url": "https://www.kirupa.com/quizzes/",
      "purpose": "A subject- and topic-grouped directory of mastery quizzes with links to lessons and saved results.",
      "regions": [
        "Collapsible subject navigation rail",
        "Catalog introduction and result links",
        "Subject cards and topic anchors",
        "Quiz-card grids with question counts",
        "Shared footer"
      ],
      "reuse": "Extend the quiz catalog generator and data rather than writing a second quiz directory. Keep lesson and result navigation beside the catalog.",
      "responsive": "The auto-fit grid reduces to one column when cards no longer fit. Navigation actions wrap and the shared rail is removed.",
      "sources": [
        "quizzes/index.htm",
        "quizzes/catalog.shtml",
        "quizzes/navigation.shtml",
        "quizzes/quiz.css"
      ],
      "alt": "The mastery quiz catalog with collapsible subject navigation, section cards, topic links, and quiz cards.",
      "phoneAlt": "The quiz catalog at phone width with one column of quiz cards, question counts, and Take quiz buttons.",
      "captures": [
        {
          "id": "quiz-index-desktop",
          "layout": "quiz-index",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/quizzes/",
          "finalURL": "https://www.kirupa.com/quizzes/",
          "status": 200,
          "path": "/design/layouts/quiz-index-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 40736
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The mastery quiz catalog with collapsible subject navigation, section cards, topic links, and quiz cards.",
          "capturedAt": "2026-10-21T14:53:24.560Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "abb101688a16678a469ccf612d68c37270243a30d0a7126d0d3ade6f2da8b0ae",
          "captureDefinitionSha256": "c734e1a94387550b2f97536944ca9baffac6fd1f588249e64b35f53910397ad2",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "quiz-index-phone",
          "layout": "quiz-index",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/quizzes/",
          "finalURL": "https://www.kirupa.com/quizzes/",
          "status": 200,
          "path": "/design/layouts/quiz-index-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 1468
          },
          "document": {
            "width": 390,
            "height": 71124
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The quiz catalog at phone width with one column of quiz cards, question counts, and Take quiz buttons.",
          "capturedAt": "2026-10-21T14:53:25.771Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "2cd61db4e4a34ebf2db2cbb7c69c2afa8cab0cff066c0b73382f0ce9e15dcd0e",
          "captureDefinitionSha256": "3032e05b9955f615765c71cfc2055cbcdabe27e3aae46376cb6f6928694b67a6",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-quiz-index"
    },
    {
      "id": "quiz-runner",
      "title": "Quiz question",
      "group": "applications",
      "family": "application",
      "status": "current",
      "url": "https://www.kirupa.com/quizzes/arrays_data_structure.htm",
      "purpose": "A focused question stage with progress, question context, answer controls, and feedback.",
      "regions": [
        "Quiz rail and title",
        "Lesson/catalog/results links",
        "Question progress",
        "Question and answer stage",
        "Working and error messages"
      ],
      "reuse": "Use the quiz runtime and question-bank schema. Keep one active question stage and preserve native answer labels, status, and error behavior.",
      "responsive": "The stage stays single-column. Code is contained within the question; navigation and answer controls fit the narrow stage.",
      "sources": [
        "quizzes/arrays_data_structure.htm",
        "quizzes/quiz.js",
        "quizzes/quiz.css",
        "quizzes/navigation.shtml"
      ],
      "alt": "An Arrays quiz showing progress, a code question, and answer choices within the quiz stage.",
      "phoneAlt": "The quiz question at phone width with its progress label, code, and vertically arranged answer controls.",
      "captureNote": "Anonymous first-question state. No answer or attempt submission was made.",
      "captures": [
        {
          "id": "quiz-runner-desktop",
          "layout": "quiz-runner",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/quizzes/arrays_data_structure.htm",
          "finalURL": "https://www.kirupa.com/quizzes/arrays_data_structure.htm",
          "status": 200,
          "path": "/design/layouts/quiz-runner-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 2169
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "An Arrays quiz showing progress, a code question, and answer choices within the quiz stage.",
          "capturedAt": "2026-10-21T14:53:27.320Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "c26f4811d1d7b778e4b3e7c4d66efa18a6588a811934d76d3673030d3c13e5de",
          "captureDefinitionSha256": "da70da35ec20bd28f12b8ed0e38dddf1403018ca2a90338fae96455c34a5b2c2",
          "note": "Anonymous first-question state. No answer or attempt submission was made. Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "quiz-runner-phone",
          "layout": "quiz-runner",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/quizzes/arrays_data_structure.htm",
          "finalURL": "https://www.kirupa.com/quizzes/arrays_data_structure.htm",
          "status": 200,
          "path": "/design/layouts/quiz-runner-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 604
          },
          "document": {
            "width": 390,
            "height": 3030
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The quiz question at phone width with its progress label, code, and vertically arranged answer controls.",
          "capturedAt": "2026-10-21T14:53:28.754Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "202717d6916e83939caef885fca038ac940d69df5fe6fd60e321cd9516a625a9",
          "captureDefinitionSha256": "6717869ca15ae06d2c3659016d579d385ac01403a62d196dcbebcf3a4a02d9e7",
          "note": "Anonymous first-question state. No answer or attempt submission was made. Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-quiz-runner"
    },
    {
      "id": "quiz-results",
      "title": "Saved results",
      "group": "applications",
      "family": "application",
      "status": "current",
      "url": "https://www.kirupa.com/quizzes/results.htm",
      "purpose": "An account-oriented history page with a forum-connection boundary.",
      "regions": [
        "Quiz navigation",
        "Results title and return links",
        "Connection status/action",
        "Saved-attempt region"
      ],
      "reuse": "Reuse the history view in quiz.js. Show a clear guest state before requesting access to private scores.",
      "responsive": "Status and history occupy one reading column. Actions wrap inside the page and the desktop rail is hidden.",
      "sources": [
        "quizzes/results.htm",
        "quizzes/quiz.js",
        "quizzes/quiz.css"
      ],
      "alt": "The guest view of My Mastery Quiz Results with a forum-account connection prompt and no private score data.",
      "phoneAlt": "The saved-results guest view at phone width with a forum-connection prompt.",
      "captureNote": "Guest state only. No account was connected and no private result history was inspected.",
      "statusLabel": "Current shell",
      "page": "/design/layouts.htm#layout-quiz-results",
      "captures": [
        {
          "id": "quiz-results-desktop",
          "layout": "quiz-results",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/quizzes/results.htm",
          "finalURL": "https://www.kirupa.com/quizzes/results.htm",
          "status": 200,
          "path": "/design/layouts/quiz-results-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 1960
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The guest view of My Mastery Quiz Results with a forum-account connection prompt and no private score data.",
          "capturedAt": "2026-10-21T14:53:30.217Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "181ff92f29b55f2ae72208155ffb8922d17fde65166e1ddc889b8176700f5e5a",
          "captureDefinitionSha256": "1369cc084ad80d30581f5550b5ad39daea35e82e8cb8b6fdbe4632d4e407061f",
          "note": "Guest state only. No account was connected and no private result history was inspected. Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "quiz-results-phone",
          "layout": "quiz-results",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/quizzes/results.htm",
          "finalURL": "https://www.kirupa.com/quizzes/results.htm",
          "status": 200,
          "path": "/design/layouts/quiz-results-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 2673
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The saved-results guest view at phone width with a forum-connection prompt.",
          "capturedAt": "2026-10-21T14:53:31.678Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "77d13ee496fa7fb4c078c085da4676660587a4a927e5c7dd9a2860415c34bbf7",
          "captureDefinitionSha256": "33ee55593f70c1843e461f6ce64aa39434ae91c12d388fa87f299d47eba51931",
          "note": "Guest state only. No account was connected and no private result history was inspected. Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "asset-browser",
      "title": "Asset browser",
      "group": "applications",
      "family": "application",
      "status": "specialized",
      "url": "https://www.kirupa.com/tools/icon_gallery_pixel.htm",
      "purpose": "A standalone search-and-filter workspace for a large visual asset collection.",
      "regions": [
        "Tool header",
        "Search field",
        "Category and format controls",
        "Result count and asset grid",
        "Per-asset actions"
      ],
      "reuse": "Use the existing Icon Gallery browser for emoji and icon discovery. Its style tabs, search panel, and per-icon downloads are separate from the standard article layout.",
      "responsive": "Filters wrap and the asset grid reduces its columns. Preserve the per-asset labels and actions instead of shrinking a desktop grid to fit.",
      "sources": [
        "tools/icon_gallery_template.htm",
        "tools/icon_gallery_pixel.htm",
        "tools/cleanedUpTwemoji.js"
      ],
      "appearance": "Icon Gallery default / Light",
      "alt": "Pixel Icon Gallery with its blue pixel heading, style tabs, download buttons, icon stats with a Free or Pro? link, search, and category filters.",
      "phoneAlt": "Pixel Icon Gallery at phone width, with search, zoom, two-column category filters, and the result count above the icon grid.",
      "captures": [
        {
          "id": "asset-browser-desktop",
          "layout": "asset-browser",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/tools/icon_gallery_pixel.htm",
          "finalURL": "https://www.kirupa.com/tools/icon_gallery_pixel.htm",
          "status": 200,
          "path": "/design/layouts/asset-browser-desktop.png",
          "appearance": "Icon Gallery default / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 7598
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "Pixel Icon Gallery with its blue pixel heading, style tabs, download buttons, icon stats with a Free or Pro? link, search, and category filters.",
          "capturedAt": "2026-11-05T03:34:55.792Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "7d66eb0a811019726aaf11edab0e8c22a8552263e6f3505010d051bb810108e0",
          "captureDefinitionSha256": "81c95e33e0be4038fb8aa65f86f45858f2edc90b18088cdabbbf2a908245eac0",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "asset-browser-phone",
          "layout": "asset-browser",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/tools/icon_gallery_pixel.htm",
          "finalURL": "https://www.kirupa.com/tools/icon_gallery_pixel.htm",
          "status": 200,
          "path": "/design/layouts/asset-browser-phone.png",
          "appearance": "Icon Gallery default / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 991
          },
          "document": {
            "width": 390,
            "height": 10609
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "Pixel Icon Gallery at phone width, with search, zoom, two-column category filters, and the result count above the icon grid.",
          "capturedAt": "2026-11-05T03:34:57.065Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "b388bbdff0250f65218656d8ac927e127af961ae6c61068b3191cf7fd1e53588",
          "captureDefinitionSha256": "c5e4863e68965d17d6e15852965d276f68d84bb5ab0e3102b379d6c12fcfb01d",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Specialized current surface",
      "page": "/design/layouts.htm#layout-asset-browser"
    },
    {
      "id": "visitor-dashboard",
      "title": "Visitor globe",
      "group": "applications",
      "family": "application",
      "status": "specialized",
      "url": "https://www.kirupa.com/whos-online/",
      "purpose": "A visualization-led page pairing a large globe with an activity table.",
      "regions": [
        "Native title and explanation",
        "Globe stage",
        "Online/recent-arrivals table",
        "Status announcements and privacy information"
      ],
      "reuse": "Reuse the globe page's visualization and table regions for this experience. A dashboard needs explicit loading, empty, and failure states.",
      "responsive": "The globe scales with its stage and the table follows below it. Keep any necessary table scrolling local to the table region.",
      "sources": [
        "whos-online/index.php",
        "whos-online/clay-globe.css",
        "whos-online/clay-globe.js"
      ],
      "alt": "The visitor page's title, explanation, and globe stage; live presence requests are blocked for this reference capture.",
      "phoneAlt": "The visitor globe at phone width, within the narrow article column and without live visitor data.",
      "captureNote": "Presence requests were blocked for privacy. The capture documents the page structure, not current visitor locations or activity.",
      "captures": [
        {
          "id": "visitor-dashboard-desktop",
          "layout": "visitor-dashboard",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/whos-online/",
          "finalURL": "https://www.kirupa.com/whos-online/",
          "status": 200,
          "path": "/design/layouts/visitor-dashboard-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1500
          },
          "mobile": false,
          "width": 1600,
          "height": 1500,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 3517
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The visitor page's title, explanation, and globe stage; live presence requests are blocked for this reference capture.",
          "capturedAt": "2026-10-21T02:34:20.479Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "98fa351e068191b0e27bfaff6d156673f3f90159c16787112549d33458898fa1",
          "captureDefinitionSha256": "c3a4bcebdff0dbd678fc4cc4d87418afd38c3d47948738586a3fe1844124a298",
          "note": "Presence requests were blocked for privacy. The capture documents the page structure, not current visitor locations or activity. Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "visitor-dashboard-phone",
          "layout": "visitor-dashboard",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/whos-online/",
          "finalURL": "https://www.kirupa.com/whos-online/",
          "status": 200,
          "path": "/design/layouts/visitor-dashboard-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 672
          },
          "document": {
            "width": 390,
            "height": 3770
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The visitor globe at phone width, within the narrow article column and without live visitor data.",
          "capturedAt": "2026-10-21T02:34:21.998Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "8f8c30204ae4d78c7398210deb11e14b10f512153ebfab0e19bd9e7de62ddcc3",
          "captureDefinitionSha256": "8ec7abb4b16d6e50ca790385c634b9949537f2f56eeda9f5a233ff1567e61aab",
          "note": "Presence requests were blocked for privacy. The capture documents the page structure, not current visitor locations or activity. Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Specialized current surface",
      "page": "/design/layouts.htm#layout-visitor-dashboard"
    },
    {
      "id": "spatial-app",
      "title": "Spatial application",
      "group": "applications",
      "family": "application",
      "status": "specialized",
      "url": "https://www.kirupa.com/lab/kville/main.htm",
      "purpose": "A full-viewport community map with its own exploration and editing controls.",
      "regions": [
        "Shared site header",
        "Pannable city viewport",
        "Dock toolbar",
        "Minimap and zoom controls",
        "Drawers, inspector, and dialogs"
      ],
      "reuse": "Use this structure only for a spatial workspace. Keep navigation, viewport gestures, selection, and editor state separate from article scrolling.",
      "responsive": "The world remains pannable rather than collapsing into a content list. The dock and overlays adapt to the available screen; inspect both desktop and touch-sized captures.",
      "sources": [
        "lab/kville/main.htm"
      ],
      "appearance": "Pixel site chrome / kirupaVille default",
      "alt": "kirupaVille's full-viewport pixel city with the dock toolbar, zoom controls, and minimap.",
      "phoneAlt": "kirupaVille at phone width, with the city viewport, compact dock, and overlaid map controls.",
      "captureNote": "Public exploration view. The welcome dialog was dismissed with Escape; no plot was selected, claimed, or edited.",
      "dismissDialog": "#dlgAbout",
      "statusLabel": "Specialized current surface",
      "page": "/design/layouts.htm#layout-spatial-app",
      "captures": [
        {
          "id": "spatial-app-desktop",
          "layout": "spatial-app",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/lab/kville/main.htm",
          "finalURL": "https://www.kirupa.com/lab/kville/main.htm",
          "status": 200,
          "path": "/design/layouts/spatial-app-desktop.png",
          "appearance": "Pixel site chrome / kirupaVille default",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 1200
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "kirupaVille's full-viewport pixel city with the dock toolbar, zoom controls, and minimap.",
          "capturedAt": "2026-10-21T02:34:24.200Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "1998200fb805aba4f4f5e81ad93774a765fbea213949419f770e48c0eca102e7",
          "captureDefinitionSha256": "ffe7177d578185cee880ff69bae55429f5a9d1016fae7e2489bdbb696a658459",
          "note": "Public exploration view. The welcome dialog was dismissed with Escape; no plot was selected, claimed, or edited. Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "spatial-app-phone",
          "layout": "spatial-app",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/lab/kville/main.htm",
          "finalURL": "https://www.kirupa.com/lab/kville/main.htm",
          "status": 200,
          "path": "/design/layouts/spatial-app-phone.png",
          "appearance": "Pixel site chrome / kirupaVille default",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 844
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "kirupaVille at phone width, with the city viewport, compact dock, and overlaid map controls.",
          "capturedAt": "2026-10-21T02:34:26.226Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "38a7d51b8ae869e021eaa2478b57952f22801507dc2bb41abbb3e6d11d87939b",
          "captureDefinitionSha256": "884c9f89492f2cd68b34755b1eab363dae5a1955ae48a9986557cd9c706c6c8a",
          "note": "Public exploration view. The welcome dialog was dismissed with Escape; no plot was selected, claimed, or edited. Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "ranked-list",
      "title": "Live ranked list",
      "group": "applications",
      "family": "directory",
      "status": "specialized",
      "url": "https://www.kirupa.com/popular.php",
      "purpose": "A time-windowed content ranking with an update timestamp and explicit empty state.",
      "regions": [
        "Shared shell",
        "Ranking explanation",
        "Time-window/update metadata",
        "Ranked results or empty state"
      ],
      "reuse": "Treat this as the existing dynamic-list reference. Preserve its time-window label and empty state; do not infer its server implementation from the screenshot.",
      "responsive": "The public page keeps the ranking in one narrow content column while the shared header and side regions adapt.",
      "sources": [],
      "sourceNote": "Evidence is the public rendered page. popular.php's server source was not present in the reviewed checkout.",
      "alt": "What's Popular with its 24-hour window, update metadata, and the actual result state at capture time.",
      "phoneAlt": "What's Popular at phone width, with the ranking explanation, time-window label, and update time.",
      "statusLabel": "Specialized current surface",
      "page": "/design/layouts.htm#layout-ranked-list",
      "captures": [
        {
          "id": "ranked-list-desktop",
          "layout": "ranked-list",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/popular.php",
          "finalURL": "https://www.kirupa.com/popular.php",
          "status": 200,
          "path": "/design/layouts/ranked-list-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 1714
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "What's Popular with its 24-hour window, update metadata, and the actual result state at capture time.",
          "capturedAt": "2026-10-21T02:48:59.539Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "ca0935072535fb0b9acce4d8ae4ce0dc5836733f1c0604b77b782e0f3c8934e7",
          "captureDefinitionSha256": "80be4ed51c6eeaecc35d2971aa842d95d38071f25ae56bf33deed69d3c50e42d",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "ranked-list-phone",
          "layout": "ranked-list",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/popular.php",
          "finalURL": "https://www.kirupa.com/popular.php",
          "status": 200,
          "path": "/design/layouts/ranked-list-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 2342
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "What's Popular at phone width, with the ranking explanation, time-window label, and update time.",
          "capturedAt": "2026-10-21T02:49:00.782Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "85fdee4f342bd98b53554d36c336ebe259f2fe23c2c3d27b593513d344c071a1",
          "captureDefinitionSha256": "be5fbe2a198d7094c6146cab2948583112cfbf91b46fc8eb593d22e5550e1efd",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "archive-directory",
      "title": "Anchored archive",
      "group": "archives",
      "family": "directory",
      "status": "archive-current",
      "url": "https://www.kirupa.com/design/archive.htm",
      "purpose": "A long categorized link archive with an in-page table of contents.",
      "regions": [
        "Anchor-based section rail",
        "Native archive title",
        "Category headings and link lists",
        "Links back to current sections"
      ],
      "reuse": "Use for retained content that still needs an organized entry point. The content is historical; this page's shell is current.",
      "responsive": "The archive lists remain one reading column. The desktop anchor rail is hidden on small screens, while the same section headings remain in the document.",
      "sources": [
        "design/archive.htm",
        "ssi/newDesign/src/kirupa.css"
      ],
      "alt": "The Design Center archive with an anchor-based category rail and categorized tutorial links in the current shell.",
      "phoneAlt": "The Design Center archive at phone width, with category headings and link lists in one column.",
      "statusLabel": "Archive content / current shell",
      "page": "/design/layouts.htm#layout-archive-directory",
      "captures": [
        {
          "id": "archive-directory-desktop",
          "layout": "archive-directory",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/design/archive.htm",
          "finalURL": "https://www.kirupa.com/design/archive.htm",
          "status": 200,
          "path": "/design/layouts/archive-directory-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 4644
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Design Center archive with an anchor-based category rail and categorized tutorial links in the current shell.",
          "capturedAt": "2026-10-21T02:34:30.045Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "689b92a91971685f80008e6576ae86f083acb4acb45ddc0c258936b6fed2e655",
          "captureDefinitionSha256": "7967a4832db8d62aa498f8ce20fca96ed69217da1977d9aa99adefb4c9dd828b",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "archive-directory-phone",
          "layout": "archive-directory",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/design/archive.htm",
          "finalURL": "https://www.kirupa.com/design/archive.htm",
          "status": 200,
          "path": "/design/layouts/archive-directory-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 5202
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Design Center archive at phone width, with category headings and link lists in one column.",
          "capturedAt": "2026-10-21T02:34:31.331Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "453a5179fe54fb568c75eedee5c99d4c3e5efc3db89e75e891aba2672059e386",
          "captureDefinitionSha256": "e504badf2782c834be8370283734e0eeea67038add58dd5288d12f806f7ac054",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "experiment-article",
      "title": "Embedded experiment",
      "group": "archives",
      "family": "article",
      "status": "archive-current",
      "url": "https://www.kirupa.com/lab/comet.htm",
      "purpose": "An archived interactive experiment presented inside the current article shell.",
      "regions": [
        "Lab navigation rail",
        "Article title and author",
        "Archive notice",
        "Aspect-ratio player",
        "Instructions and source/download context"
      ],
      "reuse": "Use the published Lab wrapper for preserved SWF experiments. Keep the Ruffle player, fallback, attribution, and archive notice together.",
      "responsive": "The player fits its container while retaining the source aspect ratio. The article follows the shared rail and reading-column breakpoints.",
      "sources": [
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/comet.htm",
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css",
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/ssi/newDesign/left_lab.shtml"
      ],
      "sourceNote": "Published Lab release 87b8d16c, not the older Lab files in the inventory baseline.",
      "alt": "The Comet experiment with the current Lab rail, archive notice, and a Ruffle player inside the reading column.",
      "phoneAlt": "The Comet experiment at phone width with the archive notice and proportionally fitted player.",
      "player": true,
      "statusLabel": "Archive content / current shell",
      "page": "/design/layouts.htm#layout-experiment-article",
      "captures": [
        {
          "id": "experiment-article-desktop",
          "layout": "experiment-article",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/lab/comet.htm",
          "finalURL": "https://www.kirupa.com/lab/comet.htm",
          "status": 200,
          "path": "/design/layouts/experiment-article-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 2490
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Comet experiment with the current Lab rail, archive notice, and a Ruffle player inside the reading column.",
          "capturedAt": "2026-10-21T02:34:33.733Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "7ef58bb69d9868354dc7f6e7388629f37e26fc82f226a7a61068f5a00d052a2a",
          "captureDefinitionSha256": "7df290728cb6433abde1be270fedcde19e6d64e201f1e0c5a683a640e50cb6c3",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "experiment-article-phone",
          "layout": "experiment-article",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/lab/comet.htm",
          "finalURL": "https://www.kirupa.com/lab/comet.htm",
          "status": 200,
          "path": "/design/layouts/experiment-article-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 3536
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Comet experiment at phone width with the archive notice and proportionally fitted player.",
          "capturedAt": "2026-10-21T02:34:35.803Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "94712691a49662e170bf77d68999179b74bc046bb7f376615e97d3e153e19a6c",
          "captureDefinitionSha256": "db14f11660cf17422b5e4d91f3aeae3a4def7aa46cef372f4d3cc0016b3603f8",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "image-gallery",
      "title": "Artwork gallery",
      "group": "archives",
      "family": "gallery",
      "status": "archive-current",
      "url": "https://www.kirupa.com/lab/pixelPeople.htm",
      "purpose": "A responsive collection of community images with creator credits.",
      "regions": [
        "Lab rail and article introduction",
        "Image grid",
        "Per-entry captions and credits",
        "Shared footer"
      ],
      "reuse": "Reuse labGrid and its small, wide, or banner variants. Preserve original aspect ratios, creator attribution, and pixelArt treatment for pixel artwork. Stamps and other Lab image collections share this family.",
      "responsive": "The grid uses auto-fill/minmax rather than fixed column counts. Small pixel entries use a 110px minimum; wide and banner variants use their own source rules.",
      "sources": [
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/pixelPeople.htm",
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/kirupaStamps.htm",
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css"
      ],
      "sourceNote": "Published Lab release 87b8d16c. These are archived contributions in the current shell.",
      "alt": "The pixelPeople gallery with a multi-column grid of pixel characters and creator captions beside the Lab rail.",
      "phoneAlt": "The pixelPeople gallery at phone width with fewer image columns and credits retained under each contribution.",
      "captures": [
        {
          "id": "image-gallery-desktop",
          "layout": "image-gallery",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/lab/pixelPeople.htm",
          "finalURL": "https://www.kirupa.com/lab/pixelPeople.htm",
          "status": 200,
          "path": "/design/layouts/image-gallery-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 4274
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The pixelPeople gallery with a multi-column grid of pixel characters and creator captions beside the Lab rail.",
          "capturedAt": "2026-10-21T02:49:02.043Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "df8f354e847c053370aaa3f23e6acb65e8d1928f0ad561dcc845a1977bd045cd",
          "captureDefinitionSha256": "0fa2877761db1db18e3f33eff82b626e83a09101ef219b8601f77767716f561b",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "image-gallery-phone",
          "layout": "image-gallery",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/lab/pixelPeople.htm",
          "finalURL": "https://www.kirupa.com/lab/pixelPeople.htm",
          "status": 200,
          "path": "/design/layouts/image-gallery-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 637
          },
          "document": {
            "width": 390,
            "height": 8382
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The pixelPeople gallery at phone width with fewer image columns and credits retained under each contribution.",
          "capturedAt": "2026-10-21T02:49:03.342Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "527f69e38fad64f007cea573767f1c809aac651bde02065e60a82a23527eb310",
          "captureDefinitionSha256": "f82144b05a1409a96555c3d8ab48902f2fecc4b0fb39e1beff0baac71701891c",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Archive content / current shell",
      "page": "/design/layouts.htm#layout-image-gallery"
    },
    {
      "id": "contest-archive",
      "title": "Contest entries",
      "group": "archives",
      "family": "gallery",
      "status": "archive-current",
      "url": "https://www.kirupa.com/lab/fxpression.htm",
      "purpose": "A competition archive combining rules, attribution, and a collection of interactive entries.",
      "regions": [
        "Lab rail and contest introduction",
        "Contest details and rules",
        "Stacked player entries",
        "Entry attribution and result context"
      ],
      "reuse": "Keep competition context above its entries. Reuse labGridPlayers for the player collection; image-based battles use the same current shell with inline entry images and winner badges.",
      "responsive": "The source defines a centered single-column player grid. The 390px capture exposes horizontal overflow in some entries despite the source sizing rules. This is a live limitation, not a recommended phone treatment.",
      "sources": [
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/fxpression.htm",
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/battles.htm",
        "https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css"
      ],
      "sourceNote": "Published Lab release 87b8d16c. The image-based battle variant is included as a separate capture.",
      "alt": "FXpression's current article shell with its contest introduction and rules.",
      "phoneAlt": "The FXpression player collection at phone width, showing vertically stacked entries and the existing horizontal clipping of wide players.",
      "player": true,
      "captures": [
        {
          "id": "contest-archive-desktop",
          "layout": "contest-archive",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/lab/fxpression.htm",
          "finalURL": "https://www.kirupa.com/lab/fxpression.htm",
          "status": 200,
          "path": "/design/layouts/contest-archive-desktop.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 5453
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "FXpression's current article shell with its contest introduction and rules.",
          "capturedAt": "2026-10-21T02:49:04.730Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "8b128a46a630c251a142551b984b883638a230a639b4cd22842eeffe33c39c9b",
          "captureDefinitionSha256": "2fa6c9f2ea9f23e04741ab81f429423b3f840d08dedc4a6042987269f9d50f8b",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "contest-archive-entries",
          "layout": "contest-archive",
          "variant": "entries",
          "label": "Player entries",
          "source": "https://www.kirupa.com/lab/fxpression.htm",
          "finalURL": "https://www.kirupa.com/lab/fxpression.htm",
          "status": 200,
          "path": "/design/layouts/contest-archive-entries.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 1230
          },
          "document": {
            "width": 1600,
            "height": 5453
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The FXpression archive scrolled to its vertically stacked Ruffle player entries and attribution.",
          "capturedAt": "2026-10-21T02:49:07.339Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "e4df94d4ec2714bb862ae645506b07455e66fdd413643590f401cd8245e120d5",
          "captureDefinitionSha256": "9f69f1424e299c55789cd4a1d8a3cdd84f4e975af4e45a0556528a06e8fd1194",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "contest-archive-phone",
          "layout": "contest-archive",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/lab/fxpression.htm",
          "finalURL": "https://www.kirupa.com/lab/fxpression.htm",
          "status": 200,
          "path": "/design/layouts/contest-archive-phone.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 1540
          },
          "document": {
            "width": 583,
            "height": 6675
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The FXpression player collection at phone width, showing vertically stacked entries and the existing horizontal clipping of wide players.",
          "capturedAt": "2026-10-21T02:49:10.020Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "189df11b3c81589fd4d02bfa011a92c7571b70fafce8b51ea39a032854702eb4",
          "captureDefinitionSha256": "44981a52fa22ffbc306ad7c74c3e1495e8567efcf98e5f154cd2985b9884a9b0",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "contest-archive-battles",
          "layout": "contest-archive",
          "variant": "battles",
          "label": "Image battle variant",
          "source": "https://www.kirupa.com/lab/battles.htm",
          "finalURL": "https://www.kirupa.com/lab/battles.htm",
          "status": 200,
          "path": "/design/layouts/contest-archive-battles.png",
          "appearance": "Pixel / Blue / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 553
          },
          "document": {
            "width": 1600,
            "height": 9249
          },
          "appearanceClasses": "theme_blue",
          "visibleBrokenImages": [],
          "alt": "The Design Battles archive scrolled to community entries and winner labels in the current Lab article shell.",
          "capturedAt": "2026-10-21T02:49:11.388Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "de13eba46cfd85938af66c12ed86badda99fc51e691e6818aaa19d9e46c5ac23",
          "captureDefinitionSha256": "351bbdac5cc457d537c8b2495f69bc3a2f7cafbd6f79c06484a1ad3d2fb78425",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Archive content / current shell",
      "page": "/design/layouts.htm#layout-contest-archive"
    },
    {
      "id": "legacy-modular",
      "title": "Legacy multi-column shell",
      "group": "archives",
      "family": "legacy",
      "status": "legacy",
      "url": "https://www.kirupa.com/blend_wpf/index.htm",
      "purpose": "A retained older section index with compact navigation, a narrow link column, and a promotional sidebar.",
      "regions": [
        "Older header/search module",
        "Left navigation module",
        "Compact subject list",
        "Right promotion column",
        "Older footer modules"
      ],
      "reuse": "Historical reference only. For a new index, use the current topic layout; do not import this shell's spacing or module CSS.",
      "responsive": "This layout predates the current responsive shell. The phone capture documents its actual scaled or constrained presentation, not a recommended mobile pattern.",
      "sources": [
        "blend_wpf/index.htm",
        "ssi/header_module.shtml"
      ],
      "appearance": "Legacy shell / default appearance",
      "alt": "The older Blend/WPF index with its compact header, narrow left navigation, dense tutorial list, and right promotional column.",
      "phoneAlt": "The legacy Blend/WPF shell at phone size, showing its older multi-column presentation rather than a modern reflow.",
      "statusLabel": "Legacy shell",
      "page": "/design/layouts.htm#layout-legacy-modular",
      "captures": [
        {
          "id": "legacy-modular-desktop",
          "layout": "legacy-modular",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.com/blend_wpf/index.htm",
          "finalURL": "https://www.kirupa.com/blend_wpf/index.htm",
          "status": 200,
          "path": "/design/layouts/legacy-modular-desktop.png",
          "appearance": "Legacy shell / default appearance",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 3026
          },
          "appearanceClasses": "",
          "visibleBrokenImages": [],
          "alt": "The older Blend/WPF index with its compact header, narrow left navigation, dense tutorial list, and right promotional column.",
          "capturedAt": "2026-10-21T02:34:49.239Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "bc3a7e03787a73d038f49ddbbcf76e148a29ba192038c8fb603c52d7e7f64bf2",
          "captureDefinitionSha256": "84fc895bf1b5bde942d6408b93fa27a3026303535b6180fe9ec7c03bcefce9fb",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "legacy-modular-phone",
          "layout": "legacy-modular",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.com/blend_wpf/index.htm",
          "finalURL": "https://www.kirupa.com/blend_wpf/index.htm",
          "status": 200,
          "path": "/design/layouts/legacy-modular-phone.png",
          "appearance": "Legacy shell / default appearance",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 992,
            "height": 3026
          },
          "appearanceClasses": "",
          "visibleBrokenImages": [],
          "alt": "The legacy Blend/WPF shell at phone size, showing its older multi-column presentation rather than a modern reflow.",
          "capturedAt": "2026-10-21T02:34:50.451Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "837467950c3bea4f18c9d78383a51bd9be50433b711cfb72f069736598ae122b",
          "captureDefinitionSha256": "358c7479ea7c509789910b9f8118f28bd658006ec8b2512f4b9078727cd3432b",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "forum-list",
      "title": "Forum topic list",
      "group": "companions",
      "family": "community",
      "status": "companion",
      "url": "https://forum.kirupa.com/",
      "purpose": "The public Discourse community's topic browser.",
      "regions": [
        "Forum header and account actions",
        "Category sidebar",
        "Search and list tabs",
        "Topic rows with activity metadata"
      ],
      "reuse": "Change this through the forum's Discourse theme and components. Its layout and account controls are not kirupa.com SSI templates.",
      "responsive": "The mobile forum uses compact navigation and rearranged topic metadata. The separately captured phone view is the evidence for this platform behavior.",
      "sources": [],
      "sourceNote": "Public Discourse rendering. The deployed forum theme configuration is outside this repository.",
      "appearance": "Forum default / Light",
      "alt": "The public forum with category navigation, topic filters, and topic rows containing authors and activity metadata.",
      "phoneAlt": "The public forum topic list at phone width with compact navigation and rearranged topic metadata.",
      "statusLabel": "Companion site",
      "page": "/design/layouts.htm#layout-forum-list",
      "captures": [
        {
          "id": "forum-list-desktop",
          "layout": "forum-list",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://forum.kirupa.com/",
          "finalURL": "https://forum.kirupa.com/",
          "status": 200,
          "path": "/design/layouts/forum-list-desktop.png",
          "appearance": "Forum default / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 2616
          },
          "appearanceClasses": "text-size-normal anon no-touch discourse-no-touch desktop-view not-mobile-device theme_blue",
          "visibleBrokenImages": [],
          "alt": "The public forum with category navigation, topic filters, and topic rows containing authors and activity metadata.",
          "capturedAt": "2026-10-21T02:34:52.976Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "a53af7e1fd1efbe4dae379f9dad6b9324baa2c34971b67214d626e951e0328a2",
          "captureDefinitionSha256": "1203df49e2fd152e180b57e23191ca9f906c1d733aae068af40340825fb3a1d7",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "forum-list-phone",
          "layout": "forum-list",
          "variant": "phone",
          "label": "Phone",
          "source": "https://forum.kirupa.com/",
          "finalURL": "https://forum.kirupa.com/",
          "status": 200,
          "path": "/design/layouts/forum-list-phone.png",
          "appearance": "Forum default / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 2726
          },
          "appearanceClasses": "text-size-normal anon touch discourse-touch ipados-device ios-device mobile-view mobile-device theme_blue",
          "visibleBrokenImages": [],
          "alt": "The public forum topic list at phone width with compact navigation and rearranged topic metadata.",
          "capturedAt": "2026-10-21T02:34:55.163Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "f90494c564e8e7cfd6c7eb50e5d7839cffce07263f456eef0166a3f306f55112",
          "captureDefinitionSha256": "1c6fc0e5191a08e88025806cdfadaa8980a0ef395954ceb6baecfd1580dc1153",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "forum-topic",
      "title": "Forum conversation",
      "group": "companions",
      "family": "community",
      "status": "companion",
      "url": "https://forum.kirupa.com/t/spot-the-bug-180-save-button-click/683792",
      "purpose": "A threaded public discussion with author identity, posts, actions, and timeline navigation.",
      "regions": [
        "Forum header and sidebar",
        "Topic title and category",
        "Post stream",
        "Author and post actions",
        "Topic timeline"
      ],
      "reuse": "Use Discourse's topic view for discussions. Do not reproduce a forum thread as a native article or initialize a posting action inside a design preview.",
      "responsive": "The post stream takes the narrow viewport while desktop sidebar/timeline controls change position or collapse. Code remains within each post.",
      "sources": [],
      "sourceNote": "Public Discourse rendering. Only anonymous, read-only topic access was used.",
      "appearance": "Forum default / Light",
      "alt": "A public forum topic with its title, author identities, code-containing posts, and a right-hand timeline.",
      "phoneAlt": "A public forum conversation at phone width with its title and post stream in one column.",
      "statusLabel": "Companion site",
      "page": "/design/layouts.htm#layout-forum-topic",
      "captures": [
        {
          "id": "forum-topic-desktop",
          "layout": "forum-topic",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://forum.kirupa.com/t/spot-the-bug-180-save-button-click/683792",
          "finalURL": "https://forum.kirupa.com/t/spot-the-bug-180-save-button-click/683792",
          "status": 200,
          "path": "/design/layouts/forum-topic-desktop.png",
          "appearance": "Forum default / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 2928
          },
          "appearanceClasses": "text-size-normal anon no-touch discourse-no-touch desktop-view not-mobile-device theme_blue",
          "visibleBrokenImages": [],
          "alt": "A public forum topic with its title, author identities, code-containing posts, and a right-hand timeline.",
          "capturedAt": "2026-10-21T02:34:57.242Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "f9af83598e8becac985f332193e761e115aba18844b367831ad9bf0321872e6f",
          "captureDefinitionSha256": "7041d3579944374de5e7891e099c093307f29699c0d445f203772464fb99b48e",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "forum-topic-phone",
          "layout": "forum-topic",
          "variant": "phone",
          "label": "Phone",
          "source": "https://forum.kirupa.com/t/spot-the-bug-180-save-button-click/683792",
          "finalURL": "https://forum.kirupa.com/t/spot-the-bug-180-save-button-click/683792",
          "status": 200,
          "path": "/design/layouts/forum-topic-phone.png",
          "appearance": "Forum default / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 3377
          },
          "appearanceClasses": "text-size-normal anon touch discourse-touch ipados-device ios-device mobile-view mobile-device theme_blue",
          "visibleBrokenImages": [],
          "alt": "A public forum conversation at phone width with its title and post stream in one column.",
          "capturedAt": "2026-10-21T02:34:59.325Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "c206fe7669f056bc5d96b3d90a478b57004141d6ead87aa0bae34b98587d114d",
          "captureDefinitionSha256": "38ae6ea813f1d9047d49b3c97ad9ae5c251bf5b75c2f7d34ef133dca48360e0e",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ]
    },
    {
      "id": "newsletter",
      "title": "Newsletter publication",
      "group": "companions",
      "family": "publication",
      "status": "companion",
      "url": "https://www.kirupa.chat/archive",
      "purpose": "The separately hosted newsletter's public article archive.",
      "regions": [
        "Publication header and subscription controls",
        "Latest/Top/Discussions tabs",
        "Article rows with thumbnails and metadata",
        "Publication navigation"
      ],
      "reuse": "Use Substack's publication interface for the newsletter archive. The kirupa.com newsletter promotion links to this experience; it does not share the site's article shell.",
      "responsive": "The publication header becomes compact and archive rows fit the phone viewport. Substack controls this behavior independently of kirupa.com styles.",
      "sources": [],
      "sourceNote": "Public Substack rendering at kirupa.chat. Its template is not stored in this repository.",
      "appearance": "Substack publication default / Light",
      "alt": "The KIRUPA newsletter archive on Substack with publication navigation, list tabs, and article previews.",
      "phoneAlt": "The KIRUPA newsletter archive at phone width with compact publication navigation and article rows.",
      "captures": [
        {
          "id": "newsletter-desktop",
          "layout": "newsletter",
          "variant": "desktop",
          "label": "Desktop",
          "source": "https://www.kirupa.chat/archive",
          "finalURL": "https://www.kirupa.chat/archive",
          "status": 200,
          "path": "/design/layouts/newsletter-desktop.png",
          "appearance": "Substack publication default / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 5133
          },
          "appearanceClasses": "",
          "visibleBrokenImages": [],
          "alt": "The KIRUPA newsletter archive on Substack with publication navigation, list tabs, and article previews.",
          "capturedAt": "2026-10-21T02:35:01.044Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "3334b3a73267b2e18a4a95b9f9540772d1a104aa3284af797cc82bf09fb39e2f",
          "captureDefinitionSha256": "5ded659ad46a60502b4aa37a21486bef703f988f8ddf0a811ff42dc24cacb74b",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "newsletter-phone",
          "layout": "newsletter",
          "variant": "phone",
          "label": "Phone",
          "source": "https://www.kirupa.chat/archive",
          "finalURL": "https://www.kirupa.chat/archive",
          "status": 200,
          "path": "/design/layouts/newsletter-phone.png",
          "appearance": "Substack publication default / Light",
          "viewport": {
            "width": 390,
            "height": 844
          },
          "mobile": true,
          "width": 390,
          "height": 844,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 390,
            "height": 5244
          },
          "appearanceClasses": "",
          "visibleBrokenImages": [],
          "alt": "The KIRUPA newsletter archive at phone width with compact publication navigation and article rows.",
          "capturedAt": "2026-10-21T02:35:03.089Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "a8fe9f057bdaa59c47842bcf2c5d90b9260592e32bd59ebccc3545bcd496ae85",
          "captureDefinitionSha256": "9951cef7b519a3edf7af91aab3e1eef80be715709399e5de388bd7230ff3cfdd",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        },
        {
          "id": "newsletter-welcome",
          "layout": "newsletter",
          "variant": "welcome",
          "label": "First-visit subscribe page",
          "source": "https://www.kirupa.chat/",
          "finalURL": "https://www.kirupa.chat/",
          "status": 200,
          "path": "/design/layouts/newsletter-welcome.png",
          "appearance": "Substack publication default / Light",
          "viewport": {
            "width": 1600,
            "height": 1200
          },
          "mobile": false,
          "width": 1600,
          "height": 1200,
          "scroll": {
            "x": 0,
            "y": 0
          },
          "document": {
            "width": 1600,
            "height": 2378
          },
          "appearanceClasses": "has-intro-popup show-intro-popup",
          "visibleBrokenImages": [],
          "alt": "The newsletter's first-visit subscription page with publication artwork, an email field, and subscribe controls. No form was submitted.",
          "capturedAt": "2026-10-21T02:35:04.563Z",
          "browser": "Chromium 156.0.8078.4",
          "sha256": "49ae2aebda6cf7d7eb9ea1957728a5c843d3de74a67ce224f2b17e1e0bd872fd",
          "captureDefinitionSha256": "5cc3f65f18a54b5ed1cd903b045f884e9782471ee73ced6286d3a0d2193d5a2f",
          "note": "Fixed, anonymous capture. Writes and presence/tracking requests were blocked; no page markup or styles were replaced."
        }
      ],
      "statusLabel": "Companion site",
      "page": "/design/layouts.htm#layout-newsletter"
    }
  ]
}