stylegallery 0.1.7 → 0.1.9

package/motion/techniques/scroll-choreography.md

@@ -0,0 +1,154 @@
+---
+type: Domain Recipe
+title: Scroll Choreography Technique
+description: Copy-ready GSAP ScrollTrigger and Lenis setup, pinned horizontal travel, scrubbed scenes, and a native CSS scroll-timeline equivalent.
+domain: motion
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Scroll Choreography Technique
+
+Primary role: executable motion technique.
+
+## Repository Boundary
+
+Product-layer script and CSS for `showcase/` works and consumer pages. The document keeps vertical scroll ownership; this technique never adds animation to reusable Layout pattern CSS. For scene contracts and briefs, use [Scroll-driven Story](../interaction-recipes.md#scroll-driven-story) and the [Motion Brief](../motion-brief.md).
+
+## Reusable Method
+
+### 1. Load As Enhancement
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js" defer></script>
+<script type="module" src="app.js"></script>
+```
+
+```js
+const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+const { gsap, ScrollTrigger, Lenis } = window;
+if (gsap && ScrollTrigger && !reduceMotion) {
+  gsap.registerPlugin(ScrollTrigger);
+  document.documentElement.classList.add("motion"); // CSS hides pre-animation states only under .motion
+  startMotion();
+}
+```
+
+```css
+.motion [data-reveal] { opacity: 0; transform: translateY(24px); }
+```
+
+Initial hidden states live behind the `.motion` class. With no script, a failed CDN, or reduced motion, the page stays fully visible.
+
+### 2. One Ticker For Smooth Scroll And Triggers
+
+```js
+const lenis = new Lenis({ lerp: 0.11, wheelMultiplier: 0.9 });
+lenis.on("scroll", ScrollTrigger.update);
+gsap.ticker.add((time) => lenis.raf(time * 1000));
+gsap.ticker.lagSmoothing(0);
+```
+
+Driving Lenis from GSAP's ticker keeps pinned scenes in step with the smoothed scroll. Two separate `requestAnimationFrame` loops make pins jitter.
+
+In-page links should go through Lenis and still move focus:
+
+```js
+for (const link of document.querySelectorAll('a[href^="#"]')) {
+  link.addEventListener("click", (event) => {
+    const target = document.querySelector(link.getAttribute("href"));
+    if (!target) return;
+    event.preventDefault();
+    lenis.scrollTo(target, { duration: 1.4 });
+    target.setAttribute("tabindex", "-1");
+    target.focus({ preventScroll: true });
+  });
+}
+```
+
+### 3. Reveal On Enter
+
+```js
+gsap.to("[data-reveal]", {
+  opacity: 1, y: 0, duration: 1.1, ease: "expo.out", stagger: 0.12,
+  scrollTrigger: { trigger: ".section", start: "top 80%" },
+});
+```
+
+### 4. Scrubbed Scene
+
+Tie a property directly to scroll progress; `scrub: true` follows exactly, a number adds catch-up smoothing in seconds.
+
+```js
+gsap.to(".hero_inner", {
+  yPercent: -18, opacity: 0.25, ease: "none",
+  scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: true },
+});
+```
+
+### 5. Pinned Horizontal Travel
+
+Vertical scroll moves a horizontal track while the section is pinned. Enable it only where it fits and keep a vertical list otherwise.
+
+```js
+const media = gsap.matchMedia();
+media.add("(min-width: 64rem)", () => {
+  const track = document.querySelector(".schedule_track");
+  const distance = () => track.scrollWidth - document.documentElement.clientWidth;
+  gsap.to(track, {
+    x: () => -distance(), ease: "none",
+    scrollTrigger: { trigger: ".schedule", start: "top top", end: () => `+=${distance()}`, pin: true, scrub: 0.6, invalidateOnRefresh: true },
+  });
+});
+```
+
+```css
+.schedule_viewport { overflow: clip; }             /* the track never widens the document */
+@media (min-width: 64rem) { .schedule_track { display: flex; inline-size: max-content; } }
+```
+
+Keep focusable controls out of the moving track, or they can receive focus while translated off-screen.
+
+### 6. Native Alternative: CSS Scroll-Driven Animation
+
+For a single scrubbed property with no library:
+
+```css
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .reveal {
+      animation: reveal linear both;
+      animation-range: entry 10% cover 35%;
+      animation-timeline: view();
+    }
+  }
+}
+@keyframes reveal { from { opacity: 0; transform: translateY(40px); } }
+```
+
+## Opinionated Guidance
+
+Choose three or four scroll scenes per page and make each one say something. A page where everything fades up on scroll has no choreography, only delay.
+
+## Platform-Specific Guidance
+
+Lenis smooths wheel input but leaves native touch scrolling alone by default, which is the right choice on phones. `ScrollTrigger.refresh()` runs on resize; functions for `x` and `end` plus `invalidateOnRefresh` let pinned distances recompute. CSS `animation-timeline` is not available in every engine; wrap it in `@supports`.
+
+## Unsupported Absolutes
+
+Durations, easings, and trigger offsets here were tuned for one page. Pinning is not appropriate for content that must be read at the reader's own pace.
+
+## Verification Contract
+
+A page using this technique passes `node scripts/check-showcase.mjs`: no horizontal overflow while pinned, focus order intact with Lenis active, and all text visible under reduced motion. Review the middle-scroll screenshot to confirm the pinned section clears any fixed header.
+
+## Source, License, And Attribution
+
+Locally authored technique. GSAP and Lenis are loaded at runtime under their own licenses; no library source is reproduced.
+
+## IA Navigation
+
+Parent: [Motion](../index.md).
+Next: [Kinetic Type Technique](kinetic-type.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylegallery",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A governed gallery of portable interface knowledge with knowledge CLIs, website compilation, and MCP servers.",
   "type": "module",
   "license": "MIT",
@@ -23,6 +23,7 @@
   "engines": {
     "node": ">=22"
   },
+  "packageManager": "bun@1.3.14",
   "files": [
     "AGENTS.md",
     "CATALOG.md",
@@ -94,18 +95,14 @@
     "design-terminology/source-vocabularies.md",
     "design-terminology/token-semantics.md",
     "design-terminology/typography-semantics.md",
-    "game-ui/classification.md",
-    "game-ui/decision-tree.md",
-    "game-ui/index.md",
-    "game-ui/reference-record.md",
-    "game-ui/screen-hierarchy.md",
-    "game-ui/screen-recipes.md",
-    "game-ui/unity/architecture.md",
-    "game-ui/unity/cli-loop.md",
-    "game-ui/unity/org-wiki.md",
-    "game-ui/unity/repository-map.md",
-    "game-ui/unity/ui-systems.md",
-    "game-ui/verification-workflow.md",
+    "expression/brand-studies.md",
+    "expression/direction-brief.md",
+    "expression/directions/nocturne-editorial.md",
+    "expression/directions/warm-print.md",
+    "expression/index.md",
+    "expression/techniques/gradient-atmosphere.md",
+    "expression/techniques/grain-and-texture.md",
+    "expression/techniques/webgl-hero.md",
     "guides/decision-tree.md",
     "guides/documentation-mode-taxonomy.md",
     "guides/layout-brief.md",
@@ -124,6 +121,8 @@
     "motion/practice-reference.md",
     "motion/rendering-and-performance.md",
     "motion/review-workflow.md",
+    "motion/techniques/kinetic-type.md",
+    "motion/techniques/scroll-choreography.md",
     "motion/vocabulary.md",
     "patterns/centering/center.md",
     "patterns/centering/index.md",
@@ -263,7 +262,8 @@
     "scripts/sg-mcp.mjs",
     "scripts/sg-server.mjs",
     "scripts/sg.mjs",
-    "scripts/strict-json.mjs"
+    "scripts/strict-json.mjs",
+    "showcase/README.md"
   ],
   "bin": {
     "sg": "scripts/sg-entry.mjs",
@@ -304,6 +304,9 @@
     "validate": "node scripts/validate-reference-artifacts.mjs --manifest consumer-reference/generated/manifest.json --json",
     "validate:component-state": "node scripts/validate-component-state.mjs --json && node scripts/generate-consumer-reference-evidence.mjs --check --json",
     "test:state-management": "node --test scripts/test-state-management-examples.mjs",
+    "test:showcase": "node scripts/check-showcase.mjs",
+    "test:showcase:self": "node scripts/test-check-showcase.mjs",
+    "showcase:serve": "node scripts/serve-showcase.mjs",
     "test:compiler": "node --test scripts/test-sg-compiler.mjs",
     "sg:v1": "node scripts/sg.mjs",
     "sg:mcp:v1": "node scripts/sg-mcp.mjs"

package/platform-guides/compatibility-matrix.md

@@ -75,7 +75,7 @@ Test fallback paths deliberately rather than waiting for accidental unsupported
 
 ## Platform-Specific Guidance
 
-Apple, Android, and Windows guide pages own their dated official-source sets. Recheck them for native claims and separately verify the target runtime. Game-engine adaptation routes to [Game UI](../game-ui/index.md).
+Apple, Android, and Windows guide pages own their dated official-source sets. Recheck them for native claims and separately verify the target runtime.
 
 ## Unsupported Absolutes
 

package/quality/claim-records/samples.md

@@ -33,6 +33,12 @@ Boundary or limitation: The image cannot prove usability, accessibility, brand f
 Debt or escalation: If the visual reference conflicts with source order, focus order, accessibility, or content stress behavior, regenerate the prompt or record a blocked decision.
 
 Decision: pass when the harmony gate is complete before the image is generated.
+Evidence refs: `quality/gates/harmony-evaluation.md`
+Verified by: human
+Reviewed at: 2026-10-15
+Review by: not applicable
+Source revision: not applicable
+Conflicts with: not applicable
 
 ## Claim Record 2 - Screenshot Diff Limits
 
@@ -59,6 +65,12 @@ Boundary or limitation: A screenshot can hide focus order, screen-reader output,
 Debt or escalation: Escalate to accessibility or user evidence when the claim says readable, usable, accessible, clear, good, better, or harmonious for a person or task.
 
 Decision: review_required when screenshots are the only evidence for a human-outcome claim.
+Evidence refs: `quality/evidence/visual-qa.md`, `quality/gates/visual-evidence.md`
+Verified by: mixed
+Reviewed at: 2026-10-15
+Review by: not applicable
+Source revision: not applicable
+Conflicts with: not applicable
 
 ## Claim Record 3 - Accessibility Scan Limits
 
@@ -85,6 +97,44 @@ Boundary or limitation: The scan cannot prove accessibility for every user, devi
 Debt or escalation: Accessibility debt must name affected users, owner, review trigger, and the evidence gap before it can be accepted.
 
 Decision: blocked when a known accessibility failure is treated as a taste tradeoff or ordinary visual debt.
+Evidence refs: `quality/evidence/accessibility.md`, `quality/gates/accessibility-evidence.md`
+Verified by: human
+Reviewed at: 2026-10-15
+Review by: not applicable
+Source revision: not applicable
+Conflicts with: not applicable
+
+## Claim Record 4 - Scroll-Body-Shell Scroll Ownership
+
+Principle: A layout pattern owns its named scroll container.
+
+Claim: The `scroll-body-shell` pattern keeps header and footer regions fixed while only the named body region scrolls, with no horizontal overflow and keyboard focus following DOM order, at 320, 768, and 1440 CSS pixels.
+
+Context: Viewport-shell patterns regress silently when a layout change hands scroll to the document root, traps focus, or overflows a narrow viewport; prose alone cannot catch this.
+
+Use case: not applicable.
+
+Warrant: A browser render oracle loads a faithful demo of the pattern at three widths and asserts the body is the only scroll owner, the document root does not overflow, Tab order matches DOM order, reduced motion shows no running infinite animation, and axe-core reports no serious or critical violation.
+
+Evidence family: `validator`, `rendered`.
+
+Verification protocol: `node scripts/check-pattern-oracle.mjs --json` renders the demo fixture and fails when any width breaks the contract; `node scripts/test-check-pattern-oracle.mjs` guards the oracle with positive and negative fixtures.
+
+Implementation handoff: not applicable.
+Consumer reference: not_applicable
+Consumer reference reason: This pattern-oracle sample contains no consumer-specific reference record.
+
+Boundary or limitation: The oracle proves the demo's rendered layout contract on one Chromium engine; it does not prove the pattern is usable, accessible for every assistive technology, or correct in browsers it does not render.
+
+Debt or escalation: Extend the oracle to more patterns only after measuring CI time and render stability; a flaky render is a blocking defect, not an accepted cost.
+
+Decision: pass when the oracle is green at all three widths.
+Evidence refs: `scripts/check-pattern-oracle.mjs`, `scripts/test-check-pattern-oracle.mjs`, `tests/fixtures/pattern-oracle/scroll-body-shell/index.html`
+Verified by: auto
+Reviewed at: 2026-10-15
+Review by: not applicable
+Source revision: not applicable
+Conflicts with: not applicable
 
 ## IA Navigation
 

package/quality/claim-records/stylegallery-multidomain-scope.md

@@ -8,11 +8,11 @@ description: Decision to supersede the layout-only repository identity with a go
 
 ## Decision
 
-StyleGallery supersedes the repository-wide `layout-gallery` identity with five explicit domains: Layout, Motion, Design Engineering, Game UI, and Platform Guides. The prior layout-only rules remain authoritative inside Layout instead of being deleted or silently weakened.
+StyleGallery supersedes the repository-wide `layout-gallery` identity with six explicit domains: Layout, Motion, Design Engineering, Platform Guides, Design Terminology, and Expression. The prior layout-only rules remain authoritative inside Layout instead of being deleted or silently weakened.
 
 ## Context
 
-The repository name and intended collection now exceed a single spatial corpus. Treating motion, interface craft, game-interface knowledge, engine-specific Game UI implementation, or platform comparison as Layout patterns would violate the existing pattern boundary, while leaving them ungoverned would bypass source-of-truth, ownership, lifecycle, and evidence rules.
+The repository name and intended collection now exceed a single spatial corpus. Treating motion, interface craft, art direction, terminology comparison, or platform comparison as Layout patterns would violate the existing pattern boundary, while leaving them ungoverned would bypass source-of-truth, ownership, lifecycle, and evidence rules.
 
 ## Warrant
 

package/quality/claims.md

@@ -63,13 +63,36 @@ Consumer reference reason: This blank claim template declares no consumer-specif
 Boundary or limitation:
 Debt or escalation:
 Decision:
+Evidence refs:
+Verified by:
+Reviewed at:
+Review by: not applicable
+Source revision: not applicable
+Conflicts with: not applicable
 ```
 
 `Use case` and `Implementation handoff` are required for harmony claims. For other claim types, write `not applicable` rather than deleting the fields.
 
+## Machine Fields
+
+Records under `claim-records/` carry machine-readable fields so a validator can check them in CI. `scripts/validate-claim-records.mjs` enforces these fields; `scripts/test-validate-claim-records.mjs` guards the validator with positive and negative fixtures.
+
+- `Evidence refs`: one or more backticked refs, comma-separated. A ref is a repository-relative path that must resolve to an existing file, or an agent-native StableRef-style id (for example `sg://...` or a dotted `domain.kind`). At least one ref is required. Inline code is used so link checking does not treat a ref as a navigable link.
+- `Verified by`: exactly one of `auto`, `human`, or `mixed`.
+- `Reviewed at`: a real `YYYY-MM-DD` date (the freshness review date).
+- `Review by`: a real `YYYY-MM-DD` date or `not applicable`.
+- `Source revision`: a commit SHA, URL, or `not applicable`, recorded for the deferred external-source drift audit.
+- `Conflicts with`: backticked claim refs or `not applicable`, recorded for the deferred conflict index.
+
+Automation certifies only what it can check: `Verified by: auto` is allowed only when the `Decision` is `pass`, and every `Evidence refs` entry must then be executable (a `scripts/` or `tests/` path, or a StableRef id). A `review_required` or `blocked` decision needs `human` or `mixed` verification, which in turn must cite at least one human-review artifact under `quality/evidence/` or `quality/gates/`. This keeps the repository's own rule that a scan cannot certify complete accessibility.
+
+## Source Of Truth
+
+Markdown claim records under `quality/claim-records/*.md` are the canonical, human-authored source of truth for claims, consistent with the governance matrix (quality docs are a Manual `quality/**/*.md` family). The agent-native epistemic graph under `consumer-reference/agent-native/` is a separate machine representation; the machine field names here align with its `claim` record (`evidence_refs`, `validation_refs`, `observed_at`) so the two can converge through a future projection, without making either import the other.
+
 ## Review Rule
 
-A record is complete only when the evidence family names what the artifact can support and the boundary says what it cannot prove. Evidence without a warrant remains a blocking condition.
+A record is complete only when the evidence family names what the artifact can support and the boundary says what it cannot prove. Evidence without a warrant remains a blocking condition, and a machine-readable record is complete only when its machine fields pass `scripts/validate-claim-records.mjs`.
 
 ## IA Navigation
 

package/quality/evidence/executable-evidence.md

@@ -37,7 +37,7 @@ Executable evidence identifies which claims are machine-enforced, which are only
 | Promotion governance remains a closed JSON-only, invariant-scoped, deferred example contract. | `scripts/validate-promotion-rfc.mjs` and `scripts/test-validate-promotion-rfc.mjs` | `node scripts/validate-promotion-rfc.mjs --json`; `node scripts/test-validate-promotion-rfc.mjs --json` | The manifest-declared policy and two canonical examples pass with deferred decisions, zero attestations, exact support commitment, and no promotion claim. | Manifest-declared invalid fixtures plus forged, unregistered, duplicate, path, extension, support, evidence, canonical-drift, and lifecycle mutations exit non-zero with named findings. | Synthetic validation does not authenticate adoption, organizations, owners, support capacity, provenance, or a promotion decision; the current canonical inventory supplies no real independent consumers. |
 | Portable token source and generated CSS agree through the pinned restricted adapter. | `scripts/build-reference-artifacts.mjs`, `scripts/validate-reference-artifacts.mjs`, and `scripts/test-reference-adapters.mjs` | Build with `--fail-on-warning`, validate the generated manifest, then run the adapter fixture harness. | Dimension, color, duration, tested border values, and whole-token curly aliases emit nonzero CSS declarations with matching counts and hashes; output references remain CSS variable references. | `$extends`, JSON Pointer, resolver/modifier/theme documents, unknown reserved fields, non-string descriptions, adapter-unsafe path segments, untested type/unit, partial/dangling/cyclic/type-mismatched aliases, missing output, zero count, warning, scaffold/unknown manifest fields, missing/duplicate declaration, object sentinel, unresolved or forged value, and count drift must fail with named findings and non-zero child exit. | Proves the pinned adapter preserves this tested subset and that committed artifacts independently rebuild from their canonical source, not that tokens are product defaults, portable beyond the tested adapters, visually suitable, or adopted by a consumer. |
 | The proposed Chromium sentinel preserves canonical card-grid geometry and truth-derived calibration evidence. | `tests/consumer-reference-sentinels.spec.mjs`, `scripts/test-consumer-reference-sentinel.mjs`, `scripts/validate-baseline-manifest.mjs`, and strict raw calibration harnesses. | Run the ordinary sentinel and semantic negatives in the digest-pinned nonblocking Chromium job; validate manifest/raw evidence in the contract job. | Computed visibility/cardinality/grid/gap/geometry/overflow checks precede a locator screenshot; raw DOM and AX bytes are recorded and hash-checked across runs; completion and zero diff derive only from a zero child exit, the exact passing Playwright identity, verified raw hashes, and post-assertion comparison proof. | Hidden layout, long-content overflow, fake/malformed Playwright, missing or nonzero exit, absent comparison/artifact, tampered hash, duplicate/unknown metadata, malformed recursive records, and incomplete run sets must fail without writing a completed aggregate. | Local DOM/AX/rendered evidence does not prove semantic DOM/AX conformance, product suitability, accessibility, or owner approval. Completed-CI repository, workflow, run ID and attempt, SHA, and artifact-name fields are workflow-recorded, self-asserted metadata, not an external attestation. The self-asserted repository field names the canonical upstream changeroa/StyleGallery; the self-asserted execution_repository field names the actual GitHub Actions repository and is limited to changeroa/StyleGallery or ark-jo/StyleGallery. The committed calibration's external_verification object records an independently checked GitHub Actions run and artifact API identity; artifact.api_digest is distinct from committed_ci.raw_evidence_sha256. Future CI aggregates remain awaiting_external_verification until their uploaded artifact API identity is independently checked. Linux/amd64 repeatability is externally verified only for committed run 29260372260; it does not establish baseline-owner approval or product suitability. Baseline-owner approval remains unclaimed until the named owner explicitly approves it. Synthetic fixtures validate rejection and acceptance behavior only; they are not authenticated provenance. Both Chromium jobs are nonblocking and CI never updates snapshots. |
-| Governed-local button states retain source-bound visual, DOM, and accessibility-tree evidence across both example profiles. | `scripts/create-component-state-session.mjs`, `scripts/finalize-component-state-evidence.mjs`, `scripts/validate-component-state.mjs`, and the component-state source, contract, artifact, generator, and sentinel harnesses. | `npm run test:component-state`; `npm run validate:component-state`; run the digest-pinned component-state browser capture and `npm run test:component-state:runtime-negative`. | Editorial and terminal each declare the five compound scenarios `action-disabled-busy`, `action-focused`, `action-loading-busy`, `disclosure-expanded-loading`, and `toggle-focused-pressed`; their environment-scoped approved PNG hashes and dimensions are canonical pre-capture inputs; the generated state, keyboard, and evidence matrices match their records; one clean capture session binds the browser artifacts to the governed source inventory. | Missing or altered source bindings, missing executable source manifests, invalid state/profile records, scenario drift, coordinated PNG/manifest/sidecar substitution, unapproved environment-specific raster identity, malformed or replayed runtime artifacts, hash/count mismatch, insufficient focus clearance, and sentinel mutations must exit non-zero with named findings. | Proves the declared examples and captured channels agree for an explicitly approved browser environment. Legacy source-less receipts are intentionally rejected by the capture receipt, `session_link`, and `completed_session` schemas and by executable finalization and validation. Environment-scoped PNG identity does not imply cross-platform pixel equivalence. It does not prove product suitability, independent adoption, full accessibility, cross-browser behavior, or owner approval; synthetic negative fixtures are not authenticated provenance. |
+| Governed-local button states retain source-bound visual, DOM, and accessibility-tree evidence across both example profiles. | `scripts/create-component-state-session.mjs`, `scripts/finalize-component-state-evidence.mjs`, `scripts/validate-component-state.mjs`, and the component-state source, contract, artifact, generator, and sentinel harnesses. | `bun run test:component-state`; `bun run validate:component-state`; run the digest-pinned component-state browser capture and `bun run test:component-state:runtime-negative`. | Editorial and terminal each declare the five compound scenarios `action-disabled-busy`, `action-focused`, `action-loading-busy`, `disclosure-expanded-loading`, and `toggle-focused-pressed`; their environment-scoped approved PNG hashes and dimensions are canonical pre-capture inputs; the generated state, keyboard, and evidence matrices match their records; one clean capture session binds the browser artifacts to the governed source inventory. | Missing or altered source bindings, missing executable source manifests, invalid state/profile records, scenario drift, coordinated PNG/manifest/sidecar substitution, unapproved environment-specific raster identity, malformed or replayed runtime artifacts, hash/count mismatch, insufficient focus clearance, and sentinel mutations must exit non-zero with named findings. | Proves the declared examples and captured channels agree for an explicitly approved browser environment. Legacy source-less receipts are intentionally rejected by the capture receipt, `session_link`, and `completed_session` schemas and by executable finalization and validation. Environment-scoped PNG identity does not imply cross-platform pixel equivalence. It does not prove product suitability, independent adoption, full accessibility, cross-browser behavior, or owner approval; synthetic negative fixtures are not authenticated provenance. |
 
 ## Validator Severity Contract
 

package/quality/index.md

@@ -1,6 +1,6 @@
 # Quality Gates
 
-`quality/` is shared StyleGallery infrastructure for deciding whether Layout, Motion, Design Engineering, Game UI, Platform Guides, and Design Terminology claims are admissible.
+`quality/` is shared StyleGallery infrastructure for deciding whether Layout, Motion, Design Engineering, Platform Guides, Design Terminology, and Expression claims are admissible.
 
 This shared layer does not make the repository a visual design system. Layout pattern files still own spatial structure only; domain guidance cannot bypass these gates. Quality gates explain how claims are framed, what evidence can support them, and when review or debt is required.
 
@@ -50,6 +50,5 @@ Use this script for lightweight tree tests:
 | Compare an Apple interaction convention. | [README](../README.md) | [Apple Interaction](../platform-guides/apple-interaction.md) | The first selected route is Platform Guides and source/version limits are reached within two hops. |
 | Declare whether a consumer reference applies. | [README](../README.md) | [Consumer Reference](../consumer-reference/index.md) | The handoff reaches the shared contract without classifying it as a seventh domain. |
 | Prove a consumer migration preserves declared behavior. | [README](../README.md) | [Consumer Migration Readiness](../design-engineering/consumer-migration-readiness.md) | The reader reaches the Design Engineering method and its evidence gate within two hops. |
-| Find the authority route for uGUI, UI Toolkit, or NGUI. | [README](../README.md) | [Unity UI Systems](../game-ui/unity/ui-systems.md) | The first selected route is Game UI, and the system-specific source and version boundary is reached within three hops. |
 
 Record `PASS` only when the expected primary route is the first route selected. A link resolving successfully is not enough; the selected route must match the task intent.

package/scripts/agent-native/v2/material-admission.mjs

@@ -17,7 +17,7 @@ const MANIFEST_REF = "sg:manifest/material-admission-v2";
 const MATERIAL_REF_PATTERN = /^sg:material\/path-sha256-[a-f0-9]{64}$/;
 const MATERIAL_VERSION_PATTERN = /^sg:material\/path-sha256-[a-f0-9]{64}@sha256:[a-f0-9]{64}$/;
 const HASH_PATTERN = /^[a-f0-9]{64}$/;
-const DOMAINS = new Set(["layout", "motion", "design-engineering", "game-ui", "platform-guides", "design-terminology", "shared"]);
+const DOMAINS = new Set(["layout", "motion", "design-engineering", "platform-guides", "design-terminology", "expression", "shared"]);
 const LIFECYCLES = new Set(["draft", "stable", "deprecated", "experimental", "generated"]);
 const RECORD_KEYS = new Set(["schema_version", "record_kind", "stable_ref", "version_id", "repository_path", "media_type", "source_sha256", "byte_length", "lifecycle", "domain"]);
 const MANIFEST_KEYS = new Set(["schema_version", "record_kind", "stable_ref", "version_id", "admission_policy_ref", "admission_policy_version_id", "materials"]);

package/scripts/agent-native/v2/material-identity.mjs

@@ -6,7 +6,7 @@ export const MATERIAL_STABLE_REF_KINDS = Object.freeze(["domain", "page", "patte
 const KIND_SET = new Set(MATERIAL_STABLE_REF_KINDS);
 const KEBAB = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 const PATH_ID = /^path-sha256-[a-f0-9]{64}$/;
-const DOMAIN_IDS = new Set(["layout", "motion", "design-engineering", "game-ui", "platform-guides", "design-terminology"]);
+const DOMAIN_IDS = new Set(["layout", "motion", "design-engineering", "platform-guides", "design-terminology", "expression"]);
 const MATERIAL_ID = PATH_ID;
 
 export class MaterialIdentityError extends TypeError {
@@ -56,7 +56,7 @@ export function materialIdentityForRecord(record) {
   if (typeof repositoryPath !== "string") fail("material_record_identity_invalid", "record has no bound source path");
   let kind = "page";
   let id = `path-sha256-${sha256(Buffer.from(repositoryPath, "utf8"))}`;
-  const domainMatch = /^(layout|motion|design-engineering|game-ui|platform-guides|design-terminology)\/index\.md$/.exec(repositoryPath);
+  const domainMatch = /^(layout|motion|design-engineering|platform-guides|design-terminology|expression)\/index\.md$/.exec(repositoryPath);
   if (domainMatch) { kind = "domain"; id = domainMatch[1]; }
   else if (/^patterns\/[^/]+\/[^/]+\.md$/.test(repositoryPath)) kind = "pattern";
   return deepFreeze({

package/scripts/compiler/README.md

@@ -12,13 +12,13 @@ Use `sg compile`, `sg timeline`, and the other commands below directly. The `sty
 
 ## Setup
 
-Install StyleGallery with Node.js 22 or newer using `npm install --global stylegallery`. For an unreleased StyleGallery checkout, run commands from that checkout as `npm run sg -- <command>` instead. If another program already owns the `sg` command, use the equivalent `stylegallery` executable or the npm script. The compiler is a [separate private repository](https://github.com/changeroa/site-compiler); an account with access must install it once:
+Install StyleGallery with Node.js 22 or newer using `npm install --global stylegallery`. For an unreleased StyleGallery checkout, run commands from that checkout as `bun run sg -- <command>` instead. If another program already owns the `sg` command, use the equivalent `stylegallery` executable or the npm script. The compiler is a [separate private repository](https://github.com/changeroa/site-compiler); an account with access must install it once:
 
 ```sh
 gh repo clone changeroa/site-compiler /absolute/path/to/site-compiler
 cd /absolute/path/to/site-compiler
-npm ci --ignore-scripts --no-audit --no-fund
-npx playwright install chromium
+bun install --frozen-lockfile --ignore-scripts
+bunx playwright install chromium
 export SG_COMPILER_ROOT=/absolute/path/to/site-compiler
 sg discover --format json
 ```
@@ -90,13 +90,13 @@ Use `sg discover` or `sg ops` for the full input schemas. CLI options use hyphen
 
 Call `compile` with `{"url":"https://example.com","out":"/absolute/path/to/captures/example"}` or `gate` with `{"in":"/absolute/path/to/captures/example"}`. Prefer absolute paths because the MCP client's launch directory may differ from your terminal. Long captures require a client request timeout longer than the capture; the runner's timeout does not change client settings. `workflow` and the knowledge tools are read-only; execution tools are marked as potentially destructive and non-idempotent because existing artifacts may be replaced.
 
-From the StyleGallery checkout, use `npm run sg -- compile ...` and `npm run sg:mcp` for local development. To connect an MCP client to that unreleased checkout, use `"command": "node"` and `"args": ["/absolute/path/to/StyleGallery/scripts/sg-server.mjs"]` with the same environment settings. The frozen six-tool v1 server is `npm run sg:mcp:v1`, and its CLI is `npm run sg:v1 -- ...`.
+From the StyleGallery checkout, use `bun run sg -- compile ...` and `bun run sg:mcp` for local development. To connect an MCP client to that unreleased checkout, use `"command": "node"` and `"args": ["/absolute/path/to/StyleGallery/scripts/sg-server.mjs"]` with the same environment settings. The frozen six-tool v1 server is `bun run sg:mcp:v1`, and its CLI is `bun run sg:v1 -- ...`.
 
 ## Contracts And Verification
 
 The adapter follows the handoff fields in [Component Contract](../../design-engineering/component-contract.md): explicit inputs, outputs, process ownership, cancellation, and observable failure. Motion transcription remains governed by [Observed Choreography](../../motion/observed-choreography.md). These are routes into the existing domains; the transport creates no new domain or reusable Layout styling.
 
-From the StyleGallery checkout, run `npm run test:compiler` for subprocess, argument, cancellation, JSON, and MCP transport checks. With a compiler installation and Chromium available, run `SG_COMPILER_INTEGRATION_ROOT=/absolute/path/to/site-compiler npm run test:compiler` to also capture a local fixture with the real upstream scripts. Model transcription, model builds, and product release packaging are separate upstream operations and are not exercised by that smoke test.
+From the StyleGallery checkout, run `bun run test:compiler` for subprocess, argument, cancellation, JSON, and MCP transport checks. With a compiler installation and Chromium available, run `SG_COMPILER_INTEGRATION_ROOT=/absolute/path/to/site-compiler bun run test:compiler` to also capture a local fixture with the real upstream scripts. Model transcription, model builds, and product release packaging are separate upstream operations and are not exercised by that smoke test.
 
 Implementation handoff:
 

package/showcase/README.md

@@ -0,0 +1,127 @@
+---
+type: Showcase Guide
+title: Showcase
+description: Free-form, single-page expressive works checked by outcome instead of authoring rules.
+lifecycle: experimental
+---
+
+# Showcase
+
+Primary role: expressive work area.
+
+`showcase/` holds complete, expressive pages: brand studies, landing pages, and art-directed experiments. The Layout authoring rules do not apply here. A work may use any CSS property, any selector, gradients, blend modes, WebGL, GSAP, Lenis, or its own fonts. Layout still sets the floor: a work has to pass the outcome checks below. It does not have to follow the pattern CSS style guide.
+
+## Why It Exists
+
+Reusable Layout patterns exclude decorative styling so they stay portable. That rule is correct for `patterns/**`, but it made the repository unable to express a finished product page. Showcase is the product layer where the finished page lives. It depends on Layout and Expression. Nothing depends on it.
+
+## Work Contract
+
+Each work is one directory, `showcase/<slug>/`, containing:
+
+- `index.html`: the entry page. It may load local files or pinned CDN libraries.
+- `brief.md`: the direction, frontmatter with `type: Showcase Brief`, `title`, `description`, and `brand_study: true|false`.
+- Any other local assets the page needs.
+
+A brand study (`brand_study: true`) reinterprets a named real brand. It additionally requires:
+
+- `subject:` in the brief frontmatter, naming the brand being studied.
+- `<meta name="robots" content="noindex, nofollow">` in `index.html`.
+- Visible text containing "Unofficial" on the page.
+- No copied logos, trademarks as artwork, or verbatim marketing copy. Write original copy in the brand's register instead.
+
+See [Brand Studies](../expression/brand-studies.md) for the reasoning and limits.
+
+## Asset Selection
+
+Reuse existing assets first: reference-site media, supplied files, and project assets. Record the source and selected file for each image/video slot in the brief. Cropping, sizing, compression, masks, and grading adapt an existing asset to the page.
+
+Create new assets only for intentionally graphical/vector work: icons, diagrams, patterns, abstract graphics, and vector illustrations. Do not generate photography, video, or realistic product renders, or replace them with CSS/SVG/canvas stand-ins. If the right asset is missing, find an existing one or record the gap rather than drawing a substitute to pass the richness check. Working product UI can still be implemented as behavior; it is not a replacement for photographic media. See [Image Weight](../expression/techniques/image-weight.md).
+
+## Brief Template
+
+```md
+---
+type: Showcase Brief
+title: <Work name>
+description: <One sentence: what the page is and what it should feel like.>
+brand_study: false
+---
+
+# <Work name>
+
+## Direction
+Reference, mood, and the one thing a visitor should remember.
+
+## System
+Type pairing, palette, texture, and motion density, with actual values or a link to an Expression direction.
+
+## Techniques
+Expression and Motion technique pages the work uses.
+
+## Assets
+Existing source URL/path and selected local file per slot; list any intentionally graphical/vector assets to create and any missing media.
+
+## Layout Floor
+Scroll owner, pinned or sticky regions, and how the page collapses at 320px.
+```
+
+## Preview
+
+```sh
+bun run showcase:serve              # http://localhost:4180/ (hub) and one URL per work
+bun run showcase:serve -- --port 4190
+```
+
+Working on a remote machine over SSH? Run this on your own machine, then open `http://localhost:4180/` in your local browser:
+
+```sh
+ssh -N -L 4180:127.0.0.1:4180 <user>@<remote-host>
+```
+
+The serve command prints this line with the right user and host filled in. Fonts and libraries load from CDNs in the visitor's browser, so the local machine needs internet access.
+
+Once any work exists, `showcase/index.html` is the hub that lists every work: the first work creates it, every later work adds a card, and each work's footer links back to `../`.
+
+## Outcome Checks
+
+`bun run test:showcase` (or `node scripts/check-showcase.mjs --work <slug>`) runs the hub and every work in headless Chromium. Each check maps to a scenario in the [QA contract](QA.md):
+
+| Check | Failure |
+| --- | --- |
+| Brief contract | Missing brief fields, or a brand study without `subject`, `noindex`, or visible "Unofficial" text. |
+| Runtime and assets | Any uncaught page error, or any same-origin request answered with 4xx. Failed CDN requests alone are tolerated. |
+| Horizontal overflow | Document wider than the viewport at 320, 768, or 1440 CSS pixels, at the top, middle, or bottom. |
+| Focus | A tabbable element with no box, outside the viewport, covered by another element (such as a sticky header), or reached out of DOM order. |
+| Reduced motion | With `prefers-reduced-motion: reduce`, a heading or paragraph invisible on arrival, or an infinite animation running. |
+| Contrast | Text over a solid background below WCAG AA: 4.5:1, or 3:1 for large text. |
+| Links and actions | A link to raw Markdown, an empty `#`, a missing `#id`, or `#top` outside the header; a `[data-demo]` action that is not a button, shows no visible `role="status"` message, or moves the page. |
+| Identity | No title or no favicon. |
+| Hash navigation | Clicking the first header nav link does not update the URL hash or lands its heading under the header or below the top half; Back does not return near the top; opening the last nav target's URL directly does not land on it. |
+| Short viewport | At 1280x620, a fixed or pinned element that contains text is taller than the viewport. |
+| Offscreen ambient | At 1440 wide, an infinite CSS animation or repeating GSAP tween still running on an element entirely offscreen. Mark ambient containers `data-ambient` and pause them with an IntersectionObserver. |
+| Offline | With every non-local request blocked: page errors, hidden text, or overflow at 390 wide. |
+| No script | With every script blocked: hidden text or overflow at 390 wide. |
+| Hub | Works exist but `showcase/index.html` is missing, or a work directory it does not link. With no works, the check passes and reports that there is nothing to check. |
+| Richness: empty screen | At 1440x900, a screen where images, video, canvas, SVG of at least 120x80, background images, and elements marked `data-surface` cover under 8% and text covers under 10%. |
+| Richness: response | Fewer than 4 elements with transitions per screen of page length (at least 12), or link and button transitions with a median above 350ms. |
+| Richness: surface detail | Fewer than 2 elements with a mask or clip-path, or fewer than 3 with 1px hairline borders. |
+
+Richness findings are warnings by default so older works keep passing; run with `--richness error` to make them failures, which new works must pass. Mark a drawn scene or a live product mock built from HTML with `data-surface` so the check counts it; never mark a gradient or an empty panel.
+
+Fictional actions (subscribe, book, get a key) must be `<button type="button" data-demo="...">` elements that show an honest message in a `role="status"` region, never links that jump to the top.
+
+Screenshots are taken after entrance tweens and CSS transitions settle and are written to `.tmp/showcase/<slug>/`. The checks do not judge taste: review the screenshots. `bun run test:showcase:self` proves each check can fail by running the checker against fixtures built to violate it.
+
+## Works
+
+The repository ships the contract, the checker, and the guidance, but no committed works. Works are built per project in `showcase/<slug>/` and must pass the checks above before they are shared.
+
+## Starting A Work Fast
+
+Read this page, the [Expression Direction Brief](../expression/direction-brief.md), one [Expression direction](../expression/index.md), and the [Motion techniques](../motion/techniques/scroll-choreography.md) you need. Skip governance, provenance, and consumer-reference documents: a showcase work creates no governed record. Plan one image, drawn scene, or product surface per screen before writing CSS ([Image Weight](../expression/techniques/image-weight.md)). Build, add a hub card, run `bun run showcase:serve` and `node scripts/check-showcase.mjs --work <slug> --richness error`, look at the screenshots, and iterate.
+
+## IA Navigation
+
+Parent: [StyleGallery](../index.md).
+Next: [Expression](../expression/index.md).