stylegallery 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/AGENTS.md +13 -1
  2. package/DOMAINS.md +7 -3
  3. package/GOVERNANCE.md +13 -11
  4. package/LICENSE-DOCS +2 -2
  5. package/README.md +23 -10
  6. package/consumer-reference/agent-native/v2/admission-policy.json +32 -37
  7. package/consumer-reference/agent-native/v2/material-registry.json +1 -1
  8. package/consumer-reference/agent-native/v2/schema/admission-policy.schema.json +3 -3
  9. package/consumer-reference/agent-native/v2/schema/material-record.schema.json +1 -1
  10. package/design-engineering/state-management/index.md +1 -1
  11. package/design-engineering/state-management/patterns/derived-state.md +1 -1
  12. package/design-engineering/state-management/patterns/draft-and-baseline.md +1 -1
  13. package/design-engineering/state-management/patterns/id-selection.md +1 -1
  14. package/design-engineering/state-management/patterns/identity-reset.md +1 -1
  15. package/design-engineering/state-management/patterns/latest-request-wins.md +1 -1
  16. package/design-engineering/state-management/patterns/optimistic-overlay.md +1 -1
  17. package/design-engineering/state-management/patterns/single-flight.md +1 -1
  18. package/design-engineering/state-management/patterns/single-owner.md +1 -1
  19. package/design-engineering/state-management/patterns/submitted-snapshot.md +1 -1
  20. package/design-engineering/state-management/patterns/unsaved-navigation.md +1 -1
  21. package/design-engineering/state-management/patterns/url-state.md +1 -1
  22. package/design-engineering/state-management/patterns/versioned-restore.md +1 -1
  23. package/design-engineering/state-management/verification.md +1 -1
  24. package/design-terminology/conflict-cases.md +1 -1
  25. package/design-terminology/source-kinds.md +1 -1
  26. package/expression/brand-studies.md +50 -0
  27. package/expression/direction-brief.md +71 -0
  28. package/expression/directions/nocturne-editorial.md +80 -0
  29. package/expression/directions/warm-print.md +73 -0
  30. package/expression/index.md +40 -0
  31. package/expression/techniques/gradient-atmosphere.md +107 -0
  32. package/expression/techniques/grain-and-texture.md +83 -0
  33. package/expression/techniques/webgl-hero.md +123 -0
  34. package/guides/vocabulary.md +1 -1
  35. package/index.md +3 -3
  36. package/log.md +35 -0
  37. package/motion/index.md +2 -0
  38. package/motion/techniques/kinetic-type.md +145 -0
  39. package/motion/techniques/scroll-choreography.md +154 -0
  40. package/package.json +17 -14
  41. package/platform-guides/compatibility-matrix.md +1 -1
  42. package/quality/claim-records/stylegallery-multidomain-scope.md +2 -2
  43. package/quality/evidence/executable-evidence.md +1 -1
  44. package/quality/index.md +1 -2
  45. package/scripts/agent-native/v2/material-admission.mjs +1 -1
  46. package/scripts/agent-native/v2/material-identity.mjs +2 -2
  47. package/scripts/compiler/README.md +5 -5
  48. package/showcase/README.md +113 -0
  49. package/game-ui/classification.md +0 -82
  50. package/game-ui/decision-tree.md +0 -81
  51. package/game-ui/index.md +0 -45
  52. package/game-ui/reference-record.md +0 -62
  53. package/game-ui/screen-hierarchy.md +0 -107
  54. package/game-ui/screen-recipes.md +0 -101
  55. package/game-ui/unity/architecture.md +0 -166
  56. package/game-ui/unity/cli-loop.md +0 -84
  57. package/game-ui/unity/org-wiki.md +0 -146
  58. package/game-ui/unity/repository-map.md +0 -102
  59. package/game-ui/unity/ui-systems.md +0 -85
  60. package/game-ui/verification-workflow.md +0 -100
@@ -75,7 +75,7 @@ Test fallback paths deliberately rather than waiting for accidental unsupported
75
75
 
76
76
  ## Platform-Specific Guidance
77
77
 
78
- 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).
78
+ Apple, Android, and Windows guide pages own their dated official-source sets. Recheck them for native claims and separately verify the target runtime.
79
79
 
80
80
  ## Unsupported Absolutes
81
81
 
@@ -8,11 +8,11 @@ description: Decision to supersede the layout-only repository identity with a go
8
8
 
9
9
  ## Decision
10
10
 
11
- 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.
11
+ 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.
12
12
 
13
13
  ## Context
14
14
 
15
- 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.
15
+ 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.
16
16
 
17
17
  ## Warrant
18
18
 
@@ -37,7 +37,7 @@ Executable evidence identifies which claims are machine-enforced, which are only
37
37
  | 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. |
38
38
  | 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. |
39
39
  | 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. |
40
- | 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. |
40
+ | 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. |
41
41
 
42
42
  ## Validator Severity Contract
43
43
 
package/quality/index.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Quality Gates
2
2
 
3
- `quality/` is shared StyleGallery infrastructure for deciding whether Layout, Motion, Design Engineering, Game UI, Platform Guides, and Design Terminology claims are admissible.
3
+ `quality/` is shared StyleGallery infrastructure for deciding whether Layout, Motion, Design Engineering, Platform Guides, Design Terminology, and Expression claims are admissible.
4
4
 
5
5
  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.
6
6
 
@@ -50,6 +50,5 @@ Use this script for lightweight tree tests:
50
50
  | 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. |
51
51
  | 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. |
52
52
  | 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. |
53
- | 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. |
54
53
 
55
54
  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.
@@ -17,7 +17,7 @@ const MANIFEST_REF = "sg:manifest/material-admission-v2";
17
17
  const MATERIAL_REF_PATTERN = /^sg:material\/path-sha256-[a-f0-9]{64}$/;
18
18
  const MATERIAL_VERSION_PATTERN = /^sg:material\/path-sha256-[a-f0-9]{64}@sha256:[a-f0-9]{64}$/;
19
19
  const HASH_PATTERN = /^[a-f0-9]{64}$/;
20
- const DOMAINS = new Set(["layout", "motion", "design-engineering", "game-ui", "platform-guides", "design-terminology", "shared"]);
20
+ const DOMAINS = new Set(["layout", "motion", "design-engineering", "platform-guides", "design-terminology", "expression", "shared"]);
21
21
  const LIFECYCLES = new Set(["draft", "stable", "deprecated", "experimental", "generated"]);
22
22
  const RECORD_KEYS = new Set(["schema_version", "record_kind", "stable_ref", "version_id", "repository_path", "media_type", "source_sha256", "byte_length", "lifecycle", "domain"]);
23
23
  const MANIFEST_KEYS = new Set(["schema_version", "record_kind", "stable_ref", "version_id", "admission_policy_ref", "admission_policy_version_id", "materials"]);
@@ -6,7 +6,7 @@ export const MATERIAL_STABLE_REF_KINDS = Object.freeze(["domain", "page", "patte
6
6
  const KIND_SET = new Set(MATERIAL_STABLE_REF_KINDS);
7
7
  const KEBAB = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
8
8
  const PATH_ID = /^path-sha256-[a-f0-9]{64}$/;
9
- const DOMAIN_IDS = new Set(["layout", "motion", "design-engineering", "game-ui", "platform-guides", "design-terminology"]);
9
+ const DOMAIN_IDS = new Set(["layout", "motion", "design-engineering", "platform-guides", "design-terminology", "expression"]);
10
10
  const MATERIAL_ID = PATH_ID;
11
11
 
12
12
  export class MaterialIdentityError extends TypeError {
@@ -56,7 +56,7 @@ export function materialIdentityForRecord(record) {
56
56
  if (typeof repositoryPath !== "string") fail("material_record_identity_invalid", "record has no bound source path");
57
57
  let kind = "page";
58
58
  let id = `path-sha256-${sha256(Buffer.from(repositoryPath, "utf8"))}`;
59
- const domainMatch = /^(layout|motion|design-engineering|game-ui|platform-guides|design-terminology)\/index\.md$/.exec(repositoryPath);
59
+ const domainMatch = /^(layout|motion|design-engineering|platform-guides|design-terminology|expression)\/index\.md$/.exec(repositoryPath);
60
60
  if (domainMatch) { kind = "domain"; id = domainMatch[1]; }
61
61
  else if (/^patterns\/[^/]+\/[^/]+\.md$/.test(repositoryPath)) kind = "pattern";
62
62
  return deepFreeze({
@@ -12,13 +12,13 @@ Use `sg compile`, `sg timeline`, and the other commands below directly. The `sty
12
12
 
13
13
  ## Setup
14
14
 
15
- 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:
15
+ 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:
16
16
 
17
17
  ```sh
18
18
  gh repo clone changeroa/site-compiler /absolute/path/to/site-compiler
19
19
  cd /absolute/path/to/site-compiler
20
- npm ci --ignore-scripts --no-audit --no-fund
21
- npx playwright install chromium
20
+ bun install --frozen-lockfile --ignore-scripts
21
+ bunx playwright install chromium
22
22
  export SG_COMPILER_ROOT=/absolute/path/to/site-compiler
23
23
  sg discover --format json
24
24
  ```
@@ -90,13 +90,13 @@ Use `sg discover` or `sg ops` for the full input schemas. CLI options use hyphen
90
90
 
91
91
  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.
92
92
 
93
- 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 -- ...`.
93
+ 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 -- ...`.
94
94
 
95
95
  ## Contracts And Verification
96
96
 
97
97
  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.
98
98
 
99
- 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.
99
+ 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.
100
100
 
101
101
  Implementation handoff:
102
102
 
@@ -0,0 +1,113 @@
1
+ ---
2
+ type: Showcase Guide
3
+ title: Showcase
4
+ description: Free-form, single-page expressive works checked by outcome instead of authoring rules.
5
+ lifecycle: experimental
6
+ ---
7
+
8
+ # Showcase
9
+
10
+ Primary role: expressive work area.
11
+
12
+ `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.
13
+
14
+ ## Why It Exists
15
+
16
+ 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.
17
+
18
+ ## Work Contract
19
+
20
+ Each work is one directory, `showcase/<slug>/`, containing:
21
+
22
+ - `index.html`: the entry page. It may load local files or pinned CDN libraries.
23
+ - `brief.md`: the direction, frontmatter with `type: Showcase Brief`, `title`, `description`, and `brand_study: true|false`.
24
+ - Any other local assets the page needs.
25
+
26
+ A brand study (`brand_study: true`) reinterprets a named real brand. It additionally requires:
27
+
28
+ - `subject:` in the brief frontmatter, naming the brand being studied.
29
+ - `<meta name="robots" content="noindex, nofollow">` in `index.html`.
30
+ - Visible text containing "Unofficial" on the page.
31
+ - No copied logos, trademarks as artwork, or verbatim marketing copy. Write original copy in the brand's register instead.
32
+
33
+ See [Brand Studies](../expression/brand-studies.md) for the reasoning and limits.
34
+
35
+ ## Brief Template
36
+
37
+ ```md
38
+ ---
39
+ type: Showcase Brief
40
+ title: <Work name>
41
+ description: <One sentence: what the page is and what it should feel like.>
42
+ brand_study: false
43
+ ---
44
+
45
+ # <Work name>
46
+
47
+ ## Direction
48
+ Reference, mood, and the one thing a visitor should remember.
49
+
50
+ ## System
51
+ Type pairing, palette, texture, and motion density, with actual values or a link to an Expression direction.
52
+
53
+ ## Techniques
54
+ Expression and Motion technique pages the work uses.
55
+
56
+ ## Layout Floor
57
+ Scroll owner, pinned or sticky regions, and how the page collapses at 320px.
58
+ ```
59
+
60
+ ## Preview
61
+
62
+ ```sh
63
+ bun run showcase:serve # http://localhost:4180/ (hub) and one URL per work
64
+ bun run showcase:serve -- --port 4190
65
+ ```
66
+
67
+ Working on a remote machine over SSH? Run this on your own machine, then open `http://localhost:4180/` in your local browser:
68
+
69
+ ```sh
70
+ ssh -N -L 4180:127.0.0.1:4180 <user>@<remote-host>
71
+ ```
72
+
73
+ 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.
74
+
75
+ 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 `../`.
76
+
77
+ ## Outcome Checks
78
+
79
+ `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):
80
+
81
+ | Check | Failure |
82
+ | --- | --- |
83
+ | Brief contract | Missing brief fields, or a brand study without `subject`, `noindex`, or visible "Unofficial" text. |
84
+ | Runtime and assets | Any uncaught page error, or any same-origin request answered with 4xx. Failed CDN requests alone are tolerated. |
85
+ | Horizontal overflow | Document wider than the viewport at 320, 768, or 1440 CSS pixels, at the top, middle, or bottom. |
86
+ | 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. |
87
+ | Reduced motion | With `prefers-reduced-motion: reduce`, a heading or paragraph invisible on arrival, or an infinite animation running. |
88
+ | Contrast | Text over a solid background below WCAG AA: 4.5:1, or 3:1 for large text. |
89
+ | 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. |
90
+ | Identity | No title or no favicon. |
91
+ | 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. |
92
+ | Short viewport | At 1280x620, a fixed or pinned element that contains text is taller than the viewport. |
93
+ | 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. |
94
+ | Offline | With every non-local request blocked: page errors, hidden text, or overflow at 390 wide. |
95
+ | No script | With every script blocked: hidden text or overflow at 390 wide. |
96
+ | 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. |
97
+
98
+ 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.
99
+
100
+ 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.
101
+
102
+ ## Works
103
+
104
+ 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.
105
+
106
+ ## Starting A Work Fast
107
+
108
+ Read this page, 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. Build, add a hub card, run `bun run showcase:serve` and `node scripts/check-showcase.mjs --work <slug>`, look at the screenshots, and iterate.
109
+
110
+ ## IA Navigation
111
+
112
+ Parent: [StyleGallery](../index.md).
113
+ Next: [Expression](../expression/index.md).
@@ -1,82 +0,0 @@
1
- ---
2
- type: Domain Guide
3
- title: Game UI Classification
4
- description: Engine-neutral method for classifying game interfaces by player task, presentation, input, state, and motion.
5
- domain: game-ui
6
- lifecycle: experimental
7
- ---
8
-
9
- # Game UI Classification
10
-
11
- Primary role: game-interface classification guide.
12
-
13
- ## Repository Boundary
14
-
15
- This guide proposes a local, project-neutral taxonomy for classifying observable game-interface behavior without assuming a specific engine or art direction. Its player-task classes and classification axes are review tools, not a universal ontology. It does not turn a visual genre into a functional category or authorize decorative properties in reusable Layout patterns.
16
-
17
- ## Reusable Method
18
-
19
- 1. Capture the rendered screen or interaction in context.
20
- 2. Assign one primary player-task class.
21
- 3. Add secondary classes only when the same surface genuinely composes responsibilities.
22
- 4. Record visual language, input, state, motion, and implementation as separate axes.
23
- 5. Attach evidence for default, exceptional, and transitional states.
24
- 6. State what is observed, inferred, and still unverified.
25
-
26
- ## Player-Task Classes
27
-
28
- | Primary class | Player question | Typical examples |
29
- | --- | --- | --- |
30
- | `hud` | What is happening during play right now? | Health, ammo, objective, marker, cooldown |
31
- | `navigation` | Where can I go next? | Main menu, pause menu, chapter or mode selection |
32
- | `dialog` | What decision or interruption needs attention? | Confirmation, reconnect, privacy, system notice |
33
- | `inventory` | What do I own, equip, compare, or improve? | Loadout, stash, equipment, crafting, upgrade |
34
- | `progression` | What did I unlock or how am I advancing? | Results, level up, rewards, rank change |
35
- | `commerce` | What can I acquire and at what cost? | Shop, offer, product detail, currency shortage |
36
- | `tutorial` | What action should I learn or perform? | Coach mark, forced step, contextual hint |
37
- | `narrative` | What story or authored event is being presented? | Dialogue, boss intro, cinematic overlay |
38
- | `system-status` | Is the application ready and connected? | Splash, loading, sign-in, reconnect, patch status |
39
- | `input-surface` | How do I directly control the game? | Virtual stick, action button, key binding |
40
-
41
- ## Classification Axes
42
-
43
- | Axis | Example values | Evidence requirement |
44
- | --- | --- | --- |
45
- | World relationship | `diegetic`, `spatial`, `overlay`, `full-screen` | Capture placement relative to play space |
46
- | Material character | `flat-graphic`, `framed`, `skeuomorphic`, `translucent`, `textural` | Capture repeated surface treatment |
47
- | Genre signal | `tactical`, `industrial`, `fantasy-ornamental`, `arcade`, `horror`, `casual` | Show repeated shape, type, icon, and material cues |
48
- | Information density | `sparse`, `standard`, `dense` | Count simultaneous choices and information groups |
49
- | Emphasis model | `typographic`, `icon-led`, `character-led`, `item-led`, `effect-led` | Identify first and second attention targets |
50
- | Input | pointer, keyboard, gamepad, touch, gaze, mixed | Exercise every declared input mode |
51
- | Motion role | affordance, activation, state change, transition, value change, reward, guidance, ambient | Record trigger, properties, timing, and interruption |
52
-
53
- ## Opinionated Guidance
54
-
55
- - Organize the gallery first by player task, then filter by presentation and implementation axes.
56
- - Use two or three visual tags supported by repeated evidence.
57
- - Classify independent player-task regions separately when a screen composes them.
58
- - Do not infer style or behavior from project, prefab, widget, scene, or class names alone.
59
-
60
- ## Platform-Specific Guidance
61
-
62
- Record engine, UI framework, render space, scaling policy, navigation system, text system, and motion system as implementation evidence. Route detailed engine hierarchy and API guidance to the matching engine-specific Game UI guide.
63
-
64
- ## Unsupported Absolutes
65
-
66
- - A genre label does not establish a visual style.
67
- - A screenshot does not prove responsive behavior, focus behavior, or motion interruption.
68
- - A production project's folder structure is not a universal architecture.
69
- - Similar appearance does not prove equivalent accessibility, performance, or interaction behavior.
70
-
71
- ## Verification Contract
72
-
73
- Verify narrow and wide surfaces, every declared input mode, long localized text, empty and loading states, disabled and error states, repeated open and close, rapid selection changes, and interrupted motion where relevant.
74
-
75
- ## Source, License, And Attribution
76
-
77
- This page is a locally authored, project-neutral proposed taxonomy. It reproduces no game assets, project-specific hierarchy, or upstream implementation samples.
78
-
79
- ## IA Navigation
80
-
81
- Parent: [Game UI](index.md).
82
- Next: [Game UI Screen Hierarchy](screen-hierarchy.md).
@@ -1,81 +0,0 @@
1
- ---
2
- type: Domain Guide
3
- title: Game UI Decision Tree
4
- description: Select player-task recipes, ownership boundaries, and engine routes from the screen's purpose.
5
- domain: game-ui
6
- lifecycle: experimental
7
- provenance_kind: local
8
- ---
9
-
10
- # Game UI Decision Tree
11
-
12
- Primary role: game screen planning route.
13
-
14
- ## Repository Boundary
15
-
16
- This route selects game-interface responsibilities independently of engine and art direction. The [Classification](classification.md) remains the local taxonomy; the [Screen Hierarchy](screen-hierarchy.md) defines ownership roles.
17
-
18
- ## Reusable Method
19
-
20
- 1. Write the player's question while the interface is visible.
21
- 2. Choose one primary task class from the table below.
22
- 3. Decide whether play continues and which input actions must be blocked.
23
- 4. Assign lifetime, focus, sorting, and state ownership.
24
- 5. Adapt a [Screen Recipe](screen-recipes.md), then run the [Verification Workflow](verification-workflow.md).
25
-
26
- ## Player Task Route
27
-
28
- | Player question | Primary class | Recipe |
29
- | --- | --- | --- |
30
- | What is happening during play? | `hud` | [Play status and input](screen-recipes.md#play-status-and-input) |
31
- | How do I perform an action? | `input-surface` | [Play status and input](screen-recipes.md#play-status-and-input) |
32
- | Where can I go, pause, or leave? | `navigation` | [Pause and navigation](screen-recipes.md#pause-and-navigation) |
33
- | What decision requires attention? | `dialog` | [Blocking decisions and connection](screen-recipes.md#blocking-decisions-and-connection) |
34
- | Is the game ready or connected? | `system-status` | [Blocking decisions and connection](screen-recipes.md#blocking-decisions-and-connection) |
35
- | What can I equip or compare? | `inventory` | [Inventory and comparison](screen-recipes.md#inventory-and-comparison) |
36
- | What have I earned or unlocked? | `progression` | [Results and progression](screen-recipes.md#results-and-progression) |
37
- | What can I obtain, and at what cost? | `commerce` | [Offers and acquisition](screen-recipes.md#offers-and-acquisition) |
38
- | What should I learn next? | `tutorial` | [Teaching and narrative](screen-recipes.md#teaching-and-narrative) |
39
- | What story is being presented? | `narrative` | [Teaching and narrative](screen-recipes.md#teaching-and-narrative) |
40
-
41
- If a screen contains several tasks, classify regions independently. A purchase confirmation inside an inventory screen is a dialog owned by a commerce operation; it is not another inventory slot.
42
-
43
- ## Ownership Decisions
44
-
45
- | Decision | Record before implementing |
46
- | --- | --- |
47
- | Lifetime | Application, session, scene, screen, entity, or one operation |
48
- | Play relationship | Continues, pauses locally, or requests a networked pause; identify authority |
49
- | Input | Active action map, focus owner, pointer/gamepad coexistence, cancellation |
50
- | Ordering | Screen, HUD, world-linked, modal, or transient host; name competing hosts |
51
- | Data | Authoritative state versus preview, selection, pending operation and stale data |
52
- | Exit | What is restored, destroyed, retained, or reconciled |
53
-
54
- ## Worked Selection
55
-
56
- A loadout screen shows owned equipment, character attributes, and a purchase button for an unavailable slot. Inventory is primary; comparison is a supporting region. The purchase flow is commerce and any confirmation is a modal decision. Closing the modal returns to the same slot. Losing connection updates operation status without clearing the loadout selection. A server response after the screen closes belongs to the operation owner, not a destroyed view.
57
-
58
- ## Opinionated Guidance
59
-
60
- Separate the player's task from visual genre. Assign one cancellation owner for each active layer so the same Back/Cancel input does not dismiss a dialog and its parent screen together.
61
-
62
- ## Platform-Specific Guidance
63
-
64
- For Unity, select the [UI System](unity/ui-systems.md), map [Architecture](unity/architecture.md), then use the [CLI Loop](unity/cli-loop.md) for the declared stack. Other engines retain these role contracts but require their own verified API mapping; no cross-engine runtime equivalence is claimed.
65
-
66
- ## Unsupported Absolutes
67
-
68
- A pause menu does not imply multiplayer simulation can pause. Hierarchy order does not prove input blocking, focus, or sorting. A taxonomy label does not establish rendered behavior.
69
-
70
- ## Verification Contract
71
-
72
- Check one ordinary screen, one overlay composition, and one unexpected interruption such as disconnection or scene teardown. Every active layer needs a named lifetime, input, sorting, and exit owner. Revisit the route if a real player task cannot be classified without forcing unrelated responsibilities together.
73
-
74
- ## Source, License, And Attribution
75
-
76
- Locally authored route and fictional loadout case. It imports no game assets, third-party hierarchy, or engine code.
77
-
78
- ## IA Navigation
79
-
80
- Parent: [Game UI](index.md).
81
- Next: [Game UI Screen Recipes](screen-recipes.md).
package/game-ui/index.md DELETED
@@ -1,45 +0,0 @@
1
- # Game UI
2
-
3
- Game UI owns engine-neutral guidance for game-interface purpose, presentation, screen hierarchy, and evidence records, plus named engine implementation guides.
4
-
5
- ## Scope Boundary
6
-
7
- In scope: player-task classification, screen and overlay hierarchy, reusable reference metadata, state coverage, cross-engine comparison vocabulary, and engine-specific implementation guidance.
8
-
9
- Out of scope: reusable Layout CSS, universal visual prescriptions, and treating one engine's scene graph or API as a cross-engine requirement.
10
-
11
- ## Evidence And Research Boundary
12
-
13
- The player-task classes and classification axes are a local taxonomy proposed for StyleGallery review, not Interface In Game's universal ontology.
14
-
15
- Interface In Game was reviewed on 2026-07-14 through its [home page](https://interfaceingame.com/), [games index](https://interfaceingame.com/games/), and representative records for [Team Fortress 2](https://interfaceingame.com/games/team-fortress-2/), [Genshin Impact (Mobile)](https://interfaceingame.com/games/genshin-impact-mobile/), and [Gris](https://interfaceingame.com/games/gris/). In this bounded sample, the site exposed site-local facets such as Genres, Themes, and Platforms, while screenshots used Elements. The sample informs the local separation of player task from other axes; it does not cover the archive or establish the site's full information model.
16
-
17
- ## Start Here
18
-
19
- | Task | Route |
20
- | --- | --- |
21
- | Choose by player task and ownership. | [Game UI Decision Tree](decision-tree.md) |
22
- | Compose all ten player-task classes with failure cases. | [Game UI Screen Recipes](screen-recipes.md) |
23
- | Record input, state, hierarchy, and teardown evidence. | [Game UI Verification Workflow](verification-workflow.md) |
24
-
25
- These workflows and worked cases are usable experimental guidance. Expected-result tables are test designs; actual product, engine, and reader evidence must be recorded separately. Review on a failed task, a source change, or a changed ownership contract.
26
-
27
- ## Available Guides
28
-
29
- - [Game UI Classification](classification.md) separates player purpose from visual language, input, state, and motion.
30
- - [Game UI Screen Hierarchy](screen-hierarchy.md) defines engine-neutral layers from application shell to atomic control.
31
- - [Game UI Reference Record](reference-record.md) provides the minimum evidence schema for gallery entries.
32
- - [Unity UI Architecture](unity/architecture.md) maps the hierarchy roles to Unity Scenes, Canvas layers, prefabs, runtime instances, input, and motion ownership.
33
- - [Unity UI Systems](unity/ui-systems.md) compares uGUI, UI Toolkit, and NGUI ownership and capability shapes at pinned sources.
34
- - [Unity CLI Loop](unity/cli-loop.md) defines a source-pinned command loop for Unity UI inspection and stack-specific interaction evidence.
35
- - [Unity Repository Map](unity/repository-map.md) maps the public Unity-Technologies repository snapshot by UI relevance, authority, and lifecycle.
36
- - [Unity Organization Compressed Wiki](unity/org-wiki.md) routes all 804 captured public repositories through a tracked inventory and bounded exclusive clusters.
37
-
38
- ## Domain Contract
39
-
40
- Game UI describes interface purpose, screen composition, and how named engines can realize that model. Platform Guides cover non-game platform conventions; Layout owns portable spatial patterns.
41
-
42
- ## IA Navigation
43
-
44
- Parent: [StyleGallery](../index.md).
45
- Next: [Game UI Decision Tree](decision-tree.md).
@@ -1,62 +0,0 @@
1
- ---
2
- type: Domain Guide
3
- title: Game UI Reference Record
4
- description: Minimum evidence record for adding a game-interface reference to StyleGallery.
5
- domain: game-ui
6
- lifecycle: experimental
7
- ---
8
-
9
- # Game UI Reference Record
10
-
11
- Primary role: gallery evidence template.
12
-
13
- ## Repository Boundary
14
-
15
- This record captures enough context to compare a game UI reference without importing its assets, source hierarchy, or implementation assumptions as gallery policy.
16
-
17
- ## Reusable Method
18
-
19
- Complete the record from rendered evidence first, then add hierarchy and implementation facts. Mark unknown fields instead of guessing from names.
20
-
21
- ## Minimum Record
22
-
23
- | Field | Required content |
24
- | --- | --- |
25
- | Identity | Entry name, source, capture date, source revision or version |
26
- | Player task | One primary class and justified secondary classes |
27
- | Presentation | Two or three visual-language tags with rendered evidence |
28
- | Hierarchy | Root, layer, screen, region, component, and control ownership |
29
- | Platform | Engine, UI framework, relevant package or runtime versions |
30
- | Surface | Render space, aspect ratios, safe area, scaling policy |
31
- | Input | Supported modes, initial focus, navigation, cancellation, focus return |
32
- | States | Default, selected, disabled, loading, error, empty, modal |
33
- | Motion | Role, trigger, properties, timing, interruption, completion |
34
- | Evidence | Screen capture, recording, hierarchy capture, relevant source paths |
35
- | Boundary | Observed facts, inferences, unknowns, and reuse restrictions |
36
-
37
- ## Opinionated Guidance
38
-
39
- Prefer a complete record to a large screenshot collection missing state, hierarchy, or input evidence. It must explain the classification and what remains unproven.
40
-
41
- ## Platform-Specific Guidance
42
-
43
- Use the matching engine-specific Game UI guide to fill implementation fields. Engine terms supplement this record; they do not replace the engine-neutral player-task and hierarchy roles.
44
-
45
- ## Unsupported Absolutes
46
-
47
- - A source path is not rendered evidence.
48
- - A polished capture is not proof of edge-state behavior.
49
- - A single aspect ratio or input mode is not broad platform coverage.
50
-
51
- ## Verification Contract
52
-
53
- Reject an entry if its primary player task, rendered state, source identity, or evidence boundary is unknown. Keep incomplete entries in draft; do not infer missing facts.
54
-
55
- ## Source, License, And Attribution
56
-
57
- Record source licensing and reuse restrictions per entry. Do not copy protected game assets into the repository merely to make the record self-contained.
58
-
59
- ## IA Navigation
60
-
61
- Parent: [Game UI](index.md).
62
- Next: [Unity UI Architecture](unity/architecture.md).
@@ -1,107 +0,0 @@
1
- ---
2
- type: Domain Guide
3
- title: Game UI Screen Hierarchy
4
- description: Engine-neutral ownership model for composing game-interface shells, screens, layers, regions, components, and controls.
5
- domain: game-ui
6
- lifecycle: experimental
7
- ---
8
-
9
- # Game UI Screen Hierarchy
10
-
11
- Primary role: engine-neutral hierarchy guide.
12
-
13
- ## Repository Boundary
14
-
15
- This hierarchy describes interface responsibility, not a required scene graph or prefab tree. Engines may realize the same roles through scenes, widgets, documents, entities, prefabs, or runtime objects.
16
-
17
- ## Reusable Method
18
-
19
- Read a game UI hierarchy from ownership outward:
20
-
21
- 1. Identify the lifetime owner.
22
- 2. Identify the active player task.
23
- 3. Separate persistent, replaceable, modal, transient, and world-linked layers.
24
- 4. Name screen regions by responsibility.
25
- 5. Find repeated components and atomic controls.
26
- 6. Record navigation, input blocking, sorting, focus, and teardown ownership.
27
-
28
- ## Reference Hierarchy
29
-
30
- ```text
31
- Application UI Root
32
- ├── Persistent Services
33
- │ ├── Input and Focus Routing
34
- │ ├── Loading and Blocking
35
- │ ├── Notifications
36
- │ └── Accessibility and Localization
37
- ├── Screen Host
38
- │ └── Active Screen
39
- │ ├── Screen Header
40
- │ ├── Primary Region
41
- │ ├── Supporting Region
42
- │ └── Screen Actions
43
- ├── HUD Layer
44
- │ ├── Player Status
45
- │ ├── World Status
46
- │ ├── Objectives
47
- │ └── Context Actions
48
- ├── Modal Layer
49
- │ ├── Blocker
50
- │ └── Dialog or Popup Stack
51
- ├── Transient Layer
52
- │ ├── Toasts
53
- │ ├── Tooltips
54
- │ └── Reward and Feedback Effects
55
- └── World-Linked UI
56
- ├── Markers
57
- ├── Labels
58
- └── Interaction Prompts
59
- ```
60
-
61
- ## Hierarchy Roles
62
-
63
- | Level | Owns | Must not silently own |
64
- | --- | --- | --- |
65
- | Application root | Cross-screen lifetime, global routing, top-level sorting | Screen-specific business state |
66
- | Layer host | Ordering, visibility policy, input blocking | Individual component presentation |
67
- | Screen | One primary player task and its navigation boundary | Unrelated global services |
68
- | Region | A stable information or action responsibility | Whole-screen lifecycle |
69
- | Component | Reusable stateful presentation unit | Global navigation policy |
70
- | Control | One direct interaction or value presentation | Hidden cross-screen side effects |
71
-
72
- ## Composition Rules
73
-
74
- - Keep persistent services independent from replaceable screen content.
75
- - Assign explicit ownership for modal blocking and modal content.
76
- - Separate popup stacks, notifications, tooltips, and reward effects when their lifetime, input, sorting, or interruption responsibilities differ.
77
- - Distinguish world-linked UI from screen-space HUD by camera, target, and lifetime ownership, not shared visual tokens.
78
- - Prefer explicit data and state inputs for repeated list cells, slots, tabs, meters, and buttons over implicit global-state access.
79
- - Preserve logical navigation order when visual sorting or animation changes.
80
-
81
- ## Opinionated Guidance
82
-
83
- A shallow tree is not automatically better than a deep tree. Prefer boundaries that make lifetime, input, sorting, and reuse obvious. Undocumented nodes used only to offset animation, scaling, or masking side effects are a fragility signal.
84
-
85
- ## Platform-Specific Guidance
86
-
87
- Map these roles to the target engine without copying the hierarchy literally. See [Unity UI Architecture](unity/architecture.md) for Unity Scene, Canvas, prefab, and runtime mapping.
88
-
89
- ## Unsupported Absolutes
90
-
91
- - Do not require one root Canvas, widget tree, or scene for every game.
92
- - Do not equate folder nesting with runtime ownership.
93
- - Do not assume a prefab, widget, or component boundary is also a navigation boundary.
94
- - Do not infer input blocking or render order from hierarchy position alone.
95
-
96
- ## Verification Contract
97
-
98
- Trace one screen from creation through teardown. Record its creator, sorting layer, input blocker, focus entry and return, what survives screen changes, and modal or transition interruption behavior.
99
-
100
- ## Source, License, And Attribution
101
-
102
- This page synthesizes recurring hierarchy responsibilities observed across game UI implementations without reproducing any project-specific object tree.
103
-
104
- ## IA Navigation
105
-
106
- Parent: [Game UI](index.md).
107
- Next: [Game UI Reference Record](reference-record.md).