stylegallery 0.1.8 → 0.1.10

package/expression/brand-studies.md

@@ -21,7 +21,7 @@ A brand study reinterprets a real, named brand as an unofficial design exercise.
 2. Add `<meta name="robots" content="noindex, nofollow">` to `index.html`.
 3. Show the word "Unofficial" in visible page text, typically in the title and footer, e.g. "Unofficial brand study".
 4. Study the brand's register, then write original copy in that register. Do not paste taglines, product copy, or press text.
-5. Do not use the brand's logo files, icon sets, trademarked artwork, or product photography. Draw an original wordmark in a web font, or use the plain brand name as text.
+5. Reuse existing photographs, videos, product renders, and other media from the reference or supplied/project assets; record their source in the brief. Do not replace them with generated pictures or CSS/SVG product stand-ins. Create assets only for intentionally graphical or vector work, following [Image Weight](techniques/image-weight.md). Keep the brand name as plain text rather than copying its logo as the study's identity.
 6. Run `node scripts/check-showcase.mjs --work <slug>`. The brief and page checks fail if steps 1-3 are missing.
 
 ## Opinionated Guidance
@@ -38,7 +38,7 @@ Following these steps reduces confusion and copying risk. It is not legal advice
 
 ## Verification Contract
 
-The showcase checker enforces the machine-checkable steps (subject, `noindex`, visible Unofficial text). A reviewer checks the rest from the source and screenshots: no copied logos, artwork, or verbatim copy.
+The showcase checker enforces the machine-checkable steps (subject, `noindex`, visible Unofficial text). A reviewer checks original copy, plain-text brand identity, recorded media sources, and whether newly created assets are intentionally graphical/vector rather than substitutes for photography or realistic renders.
 
 ## Source, License, And Attribution
 

package/expression/direction-brief.md

@@ -30,8 +30,13 @@ type:
   label: # family, case, tracking
 palette: # 3-6 hex values with roles: ground, text, accent, secondary accent
 texture: # grain, noise, paper, halftone, or none, with strength
-atmosphere: # gradient field, WebGL, photography, illustration, or none
+atmosphere: # gradient field, grain, or WebGL behind content; never in place of content
+imagery: # existing asset per slot: source URL/path, crop, focal point, and role; name any missing asset
+asset_creation: # none by default; only intentionally graphical/vector assets, never generated photos/video/realistic renders
+response: # what answers the pointer (links, cards, tabs, media frames) and how fast; 100-320ms states, 400-500ms reveals
+surface_detail: # edge-fade masks, rounded media clips, hairlines between panels
 motion_density: # entrance sequence count, scroll scenes, ambient loops
+length: # screens planned and the sequence each idea gets (setup, product, proof)
 signature: # the one unusual move this page makes that a template would not
 constraints: # performance budget, accessibility floor, brand rules
 consumer_reference: not_applicable
@@ -40,10 +45,17 @@ consumer_reference_reason: A direction brief selects no consumer reference recor
 
 ### Choosing Values Fast
 
-- Pair one expressive display face with one quiet body face and one mono or small-caps label face. Three families is the ceiling.
-- Set display type larger and tighter than feels safe: `clamp()` from about 3rem at 320px up to 9-13rem at 1440px, tracking around -0.03em, line height 0.85-0.95.
+These defaults come from [Measured Expression Benchmarks](measured-benchmarks.md), which compared 49 live homepages with StyleGallery studies built from the older advice. The studies read as empty and loud; the originals read as full and calm.
+
+- Select existing assets before writing the page: reference-site media, supplied files, then project assets. Reuse photographs, video, and product renders instead of making replacements. New asset creation is limited to intentional graphics/vectors: icons, diagrams, patterns, abstract graphics, and vector illustrations. SVG, canvas, WebGL, or an image generator is not a workaround for recreating a photographic scene.
+- Put existing imagery, an intentional vector graphic, or a live product surface on every screen. Implementing a working UI is page behavior, not permission to fabricate photographic product imagery. If an asset is missing, find an existing one or name the missing slot rather than filling it with a crude drawing. See [Image Weight](techniques/image-weight.md).
+- Size display type from the page's job, not bigger than feels safe: the largest text is 3.5-5.5 times the body (measured median 56px over 14px), tracking 0em on Korean and system faces and about -0.02em on Latin grotesks, line height 1.1-1.2. Only a campaign or editorial hero goes to 6-7 times. See [Display Type Calibration](techniques/display-type-calibration.md).
+- Pair one display face with one body face, plus a mono or small-caps label face only if the page needs it. Two families is the measured median; three is the ceiling.
+- Make many things answer the pointer: every link, button, card, tab, and media frame gets a 100-320ms state change on `opacity`, `color`, `transform`, or `background-color` (measured median: 76 responsive elements per page). Reserve 400-500ms for reveals.
+- Finish surfaces: edge-fade masks on anything that scrolls or bleeds, rounded clips on media, 1px hairlines between panels instead of soft shadows. See [Masks, Clips, And Hairlines](techniques/surface-detail.md).
+- Pace the page at 6-10 screens and give each idea a sequence (setup, product, proof) instead of one beat. Change the background band about every three screens, not every screen.
 - Pick a ground that is not pure black or pure white (`#07070a`, `#f4efe6`). Use one hot accent and at most one cool counter-accent.
-- Spend expression in a few places: one hero moment, one signature scroll scene, one closing moment. Leave the rest quiet so those land.
+- Spend the big moments in a few places: one hero moment, one signature scroll scene, one closing moment. Everywhere else stays calm but never empty: quiet sections still carry imagery and respond to the pointer.
 
 ## Opinionated Guidance
 
@@ -59,7 +71,7 @@ No palette, type pairing, or density is correct for every subject. A filled brie
 
 ## Verification Contract
 
-The brief is ready when every field has a concrete value and `signature` names a specific move. The built page is verified by `node scripts/check-showcase.mjs --work <slug>` and by reviewing its screenshots against `memory` and `signature`.
+The brief is ready when every field has a concrete value, `imagery` names a slot for every screen, and `signature` names a specific move. The built page is verified by `node scripts/check-showcase.mjs --work <slug> --richness error`, which fails an empty screen, too few responsive elements, slow link transitions, and missing masks or hairlines, and by reviewing its screenshots against `memory` and `signature`.
 
 ## Source, License, And Attribution
 

package/expression/directions/nocturne-editorial.md

@@ -43,20 +43,21 @@ Mood: a city at 3am seen through glass. Dark ground, warm glowing accents, overs
 
 | Role | Value |
 | --- | --- |
-| Hero display | `--serif` 400, `clamp(3.1rem, 11.5vw, 11rem)`, tracking -0.035em, line height 0.9, `text-wrap: balance` |
-| Section display | `--serif` 400, `clamp(2.6rem, 7vw, 7rem)`, tracking -0.03em, line height 0.95 |
+| Hero display | `--serif` 400, `clamp(2.8rem, 1.6rem + 4.4vw, 6.5rem)`, tracking -0.02em, line height 1.02, `text-wrap: balance`. Measured editorial and creative homepages top out at a median 88px; 11rem heroes read as a poster, not a page ([Display Type Calibration](../techniques/display-type-calibration.md)) |
+| Section display | `--serif` 400, `clamp(2rem, 1.3rem + 2.4vw, 3.6rem)`, tracking -0.02em, line height 1.08 |
 | Body | `--sans` 350, `clamp(1rem, 0.95rem + 0.25vw, 1.125rem)`, line height 1.55, dimmed to `--paper-dim` for secondary copy |
 | Labels | `--mono` 0.75rem, uppercase, tracking 0.14em |
 | Accent word | Italic serif with `linear-gradient(100deg, var(--ember), #ffb454 40%, var(--violet))` clipped to text, one word per headline |
 | Surfaces | `--ink-2` with 1px `--line` border, radius 1.5rem, two corner radial gradients from the card's own accent pair |
 | Buttons | Pill radius, primary is `--paper` on `--ink`, ghost is a `--line` border only |
 | Texture | [Grain](../techniques/grain-and-texture.md) at 0.22 opacity, `mix-blend-mode: overlay` |
-| Atmosphere | [Gradient aurora](../techniques/gradient-atmosphere.md) behind the hero, optional [WebGL field](../techniques/webgl-hero.md) |
-| Motion density | One entrance sequence, three to four scroll scenes, one ambient loop. Easing `expo.out`, entrances 1.1-1.3s, 0.06s word stagger |
+| Atmosphere | [Gradient aurora](../techniques/gradient-atmosphere.md) behind the hero, optional [WebGL field](../techniques/webgl-hero.md). Atmosphere sits behind content, never in place of it |
+| Imagery | A picture, drawn scene, or live product surface on every screen, framed with a rounded clip and an edge-fade mask where it bleeds into the ground ([Image Weight](../techniques/image-weight.md), [Masks, Clips, And Hairlines](../techniques/surface-detail.md)) |
+| Motion density | One entrance sequence, three to four scroll scenes, one ambient loop, and responsive states on every link, card, tab, and media frame at 150-300ms. Easing `expo.out`, entrances 0.6-0.9s, 0.06s word stagger |
 
 ## Opinionated Guidance
 
-Use the gradient only on one italic word per headline; used on whole sentences it turns into a gaming UI. Keep body copy dim and let display type carry the contrast.
+Use the gradient only on one italic word per headline; used on whole sentences it turns into a gaming UI. Keep body copy dim and let imagery and display type share the contrast. A dark page with only type and an aurora reads empty after the first screen; give every screen something to look at.
 
 ## Platform-Specific Guidance
 

package/expression/directions/warm-print.md

@@ -38,18 +38,18 @@ Mood: a well-made independent magazine. Off-white paper, heavy grotesk display,
 
 | Role | Value |
 | --- | --- |
-| Hero display | `--grotesk` 800, `clamp(3rem, 12vw, 12.5rem)`, tracking -0.05em, line height 0.85, uppercase optional |
-| Section display | `--grotesk` 700, `clamp(2.2rem, 6vw, 6rem)`, tracking -0.04em |
+| Hero display | `--grotesk` 800, `clamp(2.8rem, 1.4rem + 5vw, 7rem)`, tracking -0.03em, line height 1.0, uppercase optional. Measured editorial and creative homepages top out at a median 88px ([Display Type Calibration](../techniques/display-type-calibration.md)) |
+| Section display | `--grotesk` 700, `clamp(2rem, 1.2rem + 2.8vw, 3.8rem)`, tracking -0.025em |
 | Body | `--text` 400, 1.125rem, line height 1.6, max 34rem measure |
 | Labels | `--mono` 0.72rem, uppercase, tracking 0.1em, preceded by a `--rule` hairline |
 | Grid | Visible 1px `--rule` column lines on a 12-column grid at 64rem and wider |
 | Surfaces | Flat `--paper-2`, no shadows, no radius or at most 0.25rem |
-| Images | Duotone via `mix-blend-mode: multiply` over `--spot`, or grayscale plus [halftone](../techniques/grain-and-texture.md#halftone) |
-| Motion density | Few entrances, crisp: 0.6-0.8s, `--ease-out`, line-by-line reveals, one horizontal marquee of headlines |
+| Images | One picture or drawn plate per spread and at least one per screen ([Image Weight](../techniques/image-weight.md)), duotone via `mix-blend-mode: multiply` over `--spot`, or grayscale plus [halftone](../techniques/grain-and-texture.md#halftone) |
+| Motion density | Few entrances, crisp: 0.6-0.8s, `--ease-out`, line-by-line reveals, one horizontal marquee of headlines, and underline or color responses on every link and card at 150-250ms |
 
 ## Opinionated Guidance
 
-Light editorial pages die from timidity. Make the display type uncomfortably big, let one headline break the grid, and keep everything else strictly on it.
+Light editorial pages die from timidity, but the cure is pictures and a strict grid, not size. Give every spread an image, let one headline break the grid, and keep everything else strictly on it.
 
 ## Platform-Specific Guidance
 

package/expression/index.md

@@ -18,6 +18,18 @@ Out of scope: layout mechanics and scroll ownership (Layout), timing, interrupti
 | Add glowing, drifting color behind content. | [Gradient Atmosphere](techniques/gradient-atmosphere.md) |
 | Add film grain, noise, or paper texture. | [Grain And Texture](techniques/grain-and-texture.md) |
 | Put a live WebGL field behind a hero. | [WebGL Hero Field](techniques/webgl-hero.md) |
+| Style a money product: one accent, big numerals, a working calculator. | [Fintech Clarity Direction](directions/fintech-clarity.md) |
+| Present physical products or vehicles one stage at a time. | [Hardware Catalogue Direction](directions/hardware-catalogue.md) |
+| Style a software tool in dark or light, with mono labels and a working mock. | [Developer Tool Direction](directions/developer-tool.md) |
+| Style a Korean service or commerce page with Pretendard and dense grids. | [Korean Service Direction](directions/korean-service.md) |
+| Make an intentionally vector product diagram, not a substitute for photography. | [Drawn Products](techniques/drawn-products.md) |
+| Add a small working product demo that answers honestly. | [Live Product Demos](techniques/live-product-demos.md) |
+| Put a pointer-reactive 3D object field on a page without WebGL. | [Canvas 3D Without WebGL](techniques/canvas-3d.md) |
+| Check a page against measured values from 49 live homepages, and see why the studies read as less expressive. | [Measured Expression Benchmarks](measured-benchmarks.md) |
+| Reuse existing assets, frame imagery, and restrict new assets to graphics/vectors. | [Image Weight](techniques/image-weight.md) |
+| Calibrate display size, weight, tracking, and leading so type reads confident, not loud. | [Display Type Calibration](techniques/display-type-calibration.md) |
+| Add the finishing detail of edge-fade masks, rounded clips, wipes, blur-in, and hairlines. | [Masks, Clips, And Hairlines](techniques/surface-detail.md) |
+| Find a finished brand study to learn from, and the lessons 54 studies taught. | [Study Atlas](study-atlas.md) |
 | Reinterpret a real brand as an unofficial study. | [Brand Studies](brand-studies.md) |
 
 Build the result in [Showcase](../showcase/README.md) and add motion from [Motion techniques](../motion/techniques/scroll-choreography.md).

package/expression/techniques/webgl-hero.md

@@ -120,4 +120,4 @@ Locally authored recipe. three.js is MIT licensed and loaded at runtime; no thre
 ## IA Navigation
 
 Parent: [Expression](../index.md).
-Next: [Brand Studies](../brand-studies.md).
+Next: [Fintech Clarity Direction](../directions/fintech-clarity.md).

package/log.md

@@ -1,5 +1,45 @@
 # StyleGallery Log
 
+## 2026-10-16
+
+Understood as: release `stylegallery@0.1.10` with the Registrar, the Conservator, and the holy-grail and icon-frame doc fixes from PR #55.
+
+- Bumped the package version from `0.1.9` to `0.1.10`. The release carries PR #55: `sg registrar` checks every claim record against 35 rules, `sg conservator` renders all 46 Layout pattern exhibits at 320, 768, and 1440 CSS pixels with negative controls, `holy-grail` stacks below 48rem, and the `icon-frame` sample has `role="img"`.
+- The package `files` list already gained `scripts/registrar.mjs`, `scripts/conservator.mjs`, `scripts/conservator-exhibits.mjs`, `scripts/markdown-structure.mjs`, and `scripts/pattern-data.mjs` in PR #55. This release changes only the version, this log entry, the material registry for the log bytes, and the A2A and AG-UI caller inventories bound to `package.json` and the registry.
+
+Consumer reference: not_applicable
+Consumer reference reason: This change releases a package version and selects no consumer-reference profile or record.
+
+Understood as: fix the two Layout doc defects the Conservator found, then measure both patterns without workarounds.
+
+- `holy-grail` now has the breakpoint its `breakpointed` responsiveness promised. `scripts/pattern-data.mjs` adds `@media (max-width: 47.99rem) { .holy_grail { grid-template: "header" auto "left" auto "main" 1fr "right" auto "footer" auto / 1fr; } }`, so below 48rem the five regions stack in one column in DOM order and a 320px viewport no longer overflows by 96px. 1440px is unchanged. `scripts/generate-patterns.mjs` accepts an at-rule entry (`["@media ...", [[selector, declarations]], note]`), renders it as a nested block, counts its properties under Core Properties, and writes the change point and its note under Constraints And Change Points.
+- The `icon-frame` sample adds `role="img"` to the labelled span, which clears axe-core's serious `aria-prohibited-attr`.
+- The Conservator measures `holy-grail` at 320, 768, and 1440. Below 768px it checks the `holy-grail-stack` behavior: every region takes the full column width and follows the previous one with the 1rem gap, and the shared root-overflow check stays at 0. The negative control is unchanged (remove the base `grid-template`) and fails at 768 and 1440; at 320 the breakpoint overrides the removed declaration. The `icon-frame` exhibit imports the doc sample from `scripts/pattern-data.mjs` verbatim instead of adding its own `role`, and only a harness rule sizes the empty svg. Both `not_measured` entries and their claim-record notes (records 11 and 18) are removed. The package now ships `scripts/pattern-data.mjs` because the packaged exhibits import it.
+
+Consumer reference: not_applicable
+Consumer reference reason: This change corrects two Layout pattern docs and their render exhibits and selects no consumer-reference profile or record.
+
+Understood as: rename the claim-record validator to the Registrar and the pattern render oracle to the Conservator, raise both to their widest useful coverage, and ship both as `sg` subcommands.
+
+- Renamed `scripts/validate-claim-records.mjs` to `scripts/registrar.mjs` and `scripts/check-pattern-oracle.mjs` to `scripts/conservator.mjs`, with their tests, package scripts, and the `.github/workflows/registrar-conservator.yml` workflow (formerly `claim-records.yml`; jobs `registrar` and `conservator`). The names describe the gallery roles: the Registrar keeps the claim register and the provenance of each record, and the Conservator inspects each exhibit directly.
+- The Registrar grows from 15 to 35 rules. New rules check every template field and the template itself, repeated fields, record numbering and title uniqueness, evidence-family names against `quality/evidence/families.md`, the consumer-reference shape, review dates that are in the future, out of order, or overdue (a warning), the source-revision format, a review date for claims bound to an external source, conflict refs that must name another record and be reciprocal, `sg://conservator/<pattern>` refs, `auto` verdicts that use human-outcome terms or lack the `validator` family, record-file indexing, and one record per Conservator exhibit. `sg registrar --stale` and `--unverified` list records that need review. Every rule has a failing fixture.
+- The Conservator grows from one pattern to all 46 Layout patterns. Each exhibit renders the pattern doc's CSS block verbatim and measures that pattern's claimed geometry. Each negative control removes one declaration the doc lists as breaking and must fail on the named behavior. Claim Records 5 to 49 in `quality/claim-records/samples.md` bind each exhibit, and record 4 covers `scroll-body-shell`. Sample 4's evidence family `rendered` was not in the glossary and is now `validator`, `screenshot`, `accessibility`. The per-pattern records live in the existing samples file because the material corpus is sealed at 180 documents. The committed `tests/fixtures/pattern-oracle/` fixture is replaced by in-memory exhibits.
+- Findings left for the Layout owner: the `icon-frame` doc sample puts `aria-label` on a span with no role, which axe-core reports as serious, so the exhibit adds `role="img"`. `holy-grail` is documented as breakpointed, but its CSS has no breakpoint and overflows a 320px viewport by 96px, so the exhibit is measured at 768 and 1440 only.
+- Owner decision (2026-10-16): Playwright may be a required package dependency. `playwright` and `@axe-core/playwright` move to `dependencies` (about 22MB). Browsers are not downloaded at install. `sg conservator` reports `browser_missing` with the install command, accepts `--install-browser`, and accepts `--channel chrome` for an installed Chrome. The package now ships `scripts/registrar.mjs`, `scripts/conservator.mjs`, `scripts/conservator-exhibits.mjs`, and `scripts/markdown-structure.mjs`. In an installed package, evidence refs to repository-only files are warnings, not failures.
+
+Consumer reference: not_applicable
+Consumer reference reason: This change renames and extends repository quality checks and selects no consumer-reference profile or record.
+
+## 2026-10-15
+
+Understood as: release `stylegallery@0.1.9` with the machine-verifiable claim records and the scroll-body-shell render oracle from PR #53.
+
+- Bumped the package version from `0.1.8` to `0.1.9`. The release carries PR #53: `scripts/validate-claim-records.mjs` checks the machine-readable fields of every `## Claim Record` section under `quality/claim-records/`, `scripts/check-pattern-oracle.mjs` renders `tests/fixtures/pattern-oracle/scroll-body-shell/index.html` at 320, 768, and 1440 CSS pixels, and the Claim record checks workflow runs both with their fixture tests.
+- The package `files` list is unchanged. The updated `quality/claims.md` and the new `quality/claim-records/samples.md` were already packaged. The two new checks stay repository-only like the other validators (`validate-domains`, `check-showcase`): the claim-record validator imports the unpackaged `scripts/markdown-structure.mjs`, and the oracle needs the development dependencies Playwright and `@axe-core/playwright` plus a fixture under `tests/`, which the package does not ship. Run them from a repository checkout.
+
+Consumer reference: not_applicable
+Consumer reference reason: This change releases a package version and selects no consumer-reference profile or record.
+
 ## 2026-09-28
 
 Understood as: switch the repository package manager from npm to Bun and release `stylegallery@0.1.8`.

package/motion/index.md

@@ -35,6 +35,75 @@ These workflows and worked cases are usable experimental guidance. Expected-resu
 - [Interruption And Retargeting](interruption-and-retargeting.md). Resolve repeated input, cancellation, and stale completion callbacks.
 - [Motion Rendering And Performance](rendering-and-performance.md). Choose native mechanisms and diagnose measured delivery failures.
 
+## Visual Reference: Motion Prompt
+
+[Motion Prompt by @ssaengcho](https://motion-prompt-ssaengcho.soldaeng-guri.chatgpt.site/#top) is an external Korean motion dictionary for comparing effects visually and describing the intended movement. Its interface lists 36 effects and five combinations across entrance/exit, emphasis, sequencing, space, scene transitions, shape/focus, timing, and text.
+
+Use it to select an observable effect, then record the actual product behavior in the [Motion Brief](motion-brief.md): trigger, moving property, start/end state, interruption, reduced-motion alternative, and completion feedback. For example, distinguish moving an element from moving imagery inside a stationary frame, and distinguish changing opacity from revealing through a moving mask.
+
+The dictionary's example durations and prompts are reference choices, not StyleGallery defaults or measured performance guarantees. Its naming is not a replacement for the [Motion Vocabulary](vocabulary.md).
+
+[Run all 41 local examples](https://style.gallery/examples/category/guide/?q=Motion%20Prompt). Every effect and combination has its own execution page, timeline scrubber, restart, pause, reverse, final-state control, and reduced-motion alternative. Local examples use StyleGallery's theme rather than copying the reference site's presentation.
+
+### Complete Effect Inventory
+
+| No. | Source effect | Local execution |
+| --- | --- | --- |
+| 1 | Fade in | [페이드 인](https://style.gallery/examples/guide/motion-prompt-fade/) |
+| 2 | Slide in | [슬라이드 인](https://style.gallery/examples/guide/motion-prompt-slide/) |
+| 3 | Scale in | [스케일 인](https://style.gallery/examples/guide/motion-prompt-scale/) |
+| 4 | Mask reveal | [마스크 리빌](https://style.gallery/examples/guide/motion-prompt-mask/) |
+| 5 | Overshoot | [오버슈트](https://style.gallery/examples/guide/motion-prompt-over/) |
+| 6 | Bounce | [바운스](https://style.gallery/examples/guide/motion-prompt-bounce/) |
+| 7 | Pulse | [펄스](https://style.gallery/examples/guide/motion-prompt-pulse/) |
+| 8 | Shake | [셰이크](https://style.gallery/examples/guide/motion-prompt-shake/) |
+| 9 | Stagger | [스태거](https://style.gallery/examples/guide/motion-prompt-stagger/) |
+| 10 | Typewriter | [타이프라이터](https://style.gallery/examples/guide/motion-prompt-type/) |
+| 11 | Tracking animation | [트래킹 애니메이션](https://style.gallery/examples/guide/motion-prompt-tracking/) |
+| 12 | Trim paths | [트림 패스](https://style.gallery/examples/guide/motion-prompt-line/) |
+| 13 | Zoom in | [줌 인](https://style.gallery/examples/guide/motion-prompt-zoom/) |
+| 14 | Panning | [패닝](https://style.gallery/examples/guide/motion-prompt-pan/) |
+| 15 | Position inside mask | [프레임 내부 이동](https://style.gallery/examples/guide/motion-prompt-crop/) |
+| 16 | Parallax | [패럴랙스](https://style.gallery/examples/guide/motion-prompt-parallax/) |
+| 17 | Cross dissolve | [크로스 디졸브](https://style.gallery/examples/guide/motion-prompt-dissolve/) |
+| 18 | Wipe | [와이프](https://style.gallery/examples/guide/motion-prompt-wipe/) |
+| 19 | Push | [푸시](https://style.gallery/examples/guide/motion-prompt-push/) |
+| 20 | Iris reveal | [아이리스 리빌](https://style.gallery/examples/guide/motion-prompt-iris/) |
+| 21 | Rotation | [로테이션](https://style.gallery/examples/guide/motion-prompt-rotate/) |
+| 22 | Floating | [플로팅](https://style.gallery/examples/guide/motion-prompt-float/) |
+| 23 | Morphing | [모핑](https://style.gallery/examples/guide/motion-prompt-morph/) |
+| 24 | Blur reveal | [블러 리빌](https://style.gallery/examples/guide/motion-prompt-blur/) |
+| 25 | Linear | [리니어](https://style.gallery/examples/guide/motion-prompt-linear/) |
+| 26 | Ease in | [이즈 인](https://style.gallery/examples/guide/motion-prompt-easein/) |
+| 27 | Ease out | [이즈 아웃](https://style.gallery/examples/guide/motion-prompt-easeout/) |
+| 28 | Ease in out | [이즈 인 아웃](https://style.gallery/examples/guide/motion-prompt-easeboth/) |
+| 29 | Text scramble | [텍스트 스크램블](https://style.gallery/examples/guide/motion-prompt-scramble/) |
+| 30 | Karaoke highlight | [가라오케 하이라이트](https://style.gallery/examples/guide/motion-prompt-karaoke/) |
+| 31 | Word by word | [워드 바이 워드](https://style.gallery/examples/guide/motion-prompt-wordreveal/) |
+| 32 | Line by line reveal | [라인 바이 라인 리빌](https://style.gallery/examples/guide/motion-prompt-linereveal/) |
+| 33 | Text wave | [텍스트 웨이브](https://style.gallery/examples/guide/motion-prompt-charwave/) |
+| 34 | Character flip | [캐릭터 플립](https://style.gallery/examples/guide/motion-prompt-charflip/) |
+| 35 | Count up | [카운트업](https://style.gallery/examples/guide/motion-prompt-countup/) |
+| 36 | Text stroke reveal | [텍스트 스트로크 리빌](https://style.gallery/examples/guide/motion-prompt-textstroke/) |
+
+### Complete Combination Inventory
+
+| No. | Source combination | Local execution |
+| --- | --- | --- |
+| 1 | Zoom and fade | [제품을 부드럽게 보여주기](https://style.gallery/examples/guide/motion-prompt-soft-zoom/) |
+| 2 | Upward slide and fade | [제목이 올라오며 나타나기](https://style.gallery/examples/guide/motion-prompt-title-slide/) |
+| 3 | Overshoot and rotation | [로고가 돌면서 톡 나타나기](https://style.gallery/examples/guide/motion-prompt-logo-pop/) |
+| 4 | Tracking contraction and fade | [넓게 퍼진 글자가 모이기](https://style.gallery/examples/guide/motion-prompt-tracking-title/) |
+| 5 | Staggered image and title | [사진 다음에 제목 등장](https://style.gallery/examples/guide/motion-prompt-image-title/) |
+
+### Source And Verification Boundary
+
+Source review: 2026-09-29. The public page, all 36 rendered effects, all five rendered combinations, and their Web Animations tracks were inspected. The first definition file contains 28 effects; a second script adds eight text effects. The local inventory checks both sets and the five combination presets rather than trusting the headline count alone.
+
+The local implementations preserve the observed durations, delays, repetitions, keyframe sequence, and moving properties. Two corrections are explicit: the reference's whole-timeline step easing hides intermediate count-up and scramble values; the local versions step each segment so those values appear. Theme colors and image-example materials differ intentionally. Image combinations reuse an existing project photograph instead of the reference's schematic placeholder.
+
+These are independent implementations with attribution to Motion Prompt / @ssaengcho, not a distribution of its source bundle, prompt collection, or a claim of an upstream license. The website repository records source-file hashes and captured tracks alongside its coverage tests. Chromium observations are not a cross-browser or native-platform conformance claim.
+
 ## Domain Contract
 
 See [StyleGallery Domains](../DOMAINS.md) for lifecycle, provenance, page membership, and staleness rules.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylegallery",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "A governed gallery of portable interface knowledge with knowledge CLIs, website compilation, and MCP servers.",
   "type": "module",
   "license": "MIT",
@@ -256,6 +256,11 @@
     "scripts/compiler/mcp.mjs",
     "scripts/compiler/operations.mjs",
     "scripts/compiler/runtime.mjs",
+    "scripts/conservator-exhibits.mjs",
+    "scripts/conservator.mjs",
+    "scripts/markdown-structure.mjs",
+    "scripts/pattern-data.mjs",
+    "scripts/registrar.mjs",
     "scripts/sg-entry.mjs",
     "scripts/sg-material-mcp.mjs",
     "scripts/sg-material.mjs",
@@ -304,6 +309,10 @@
     "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",
+    "registrar": "node scripts/registrar.mjs",
+    "test:registrar": "node scripts/test-registrar.mjs",
+    "conservator": "node scripts/conservator.mjs",
+    "test:conservator": "node scripts/test-conservator.mjs",
     "test:showcase": "node scripts/check-showcase.mjs",
     "test:showcase:self": "node scripts/test-check-showcase.mjs",
     "showcase:serve": "node scripts/serve-showcase.mjs",
@@ -312,14 +321,15 @@
     "sg:mcp:v1": "node scripts/sg-mcp.mjs"
   },
   "devDependencies": {
-    "@axe-core/playwright": "4.12.1",
     "@playwright/test": "1.61.0",
     "ajv": "8.20.0",
     "ajv-formats": "3.0.1"
   },
   "dependencies": {
+    "@axe-core/playwright": "4.12.1",
     "@chenglou/pretext": "0.0.8",
     "@modelcontextprotocol/sdk": "1.29.0",
+    "playwright": "1.61.0",
     "style-dictionary": "5.5.0",
     "zod": "4.4.3"
   },

package/patterns/media-fit/icon-frame.md

@@ -27,7 +27,7 @@ Use this pattern when you need to keep an icon aligned inside a fixed square slo
 ## HTML
 
 ```html
-<span class="icon_frame" aria-label="Calendar">
+<span class="icon_frame" role="img" aria-label="Calendar">
     <svg aria-hidden="true" viewBox="0 0 24 24"></svg>
 </span>
 ```

package/patterns/viewport-shell/holy-grail.md

@@ -66,6 +66,12 @@ Use this pattern when you need to place header, footer, sidebars, and main conte
 .holy_grail_footer {
     grid-area: footer;
 }
+
+@media (max-width: 47.99rem) {
+    .holy_grail {
+        grid-template: "header" auto "left" auto "main" 1fr "right" auto "footer" auto / 1fr;
+    }
+}
 ```
 
 ## Core Properties
@@ -79,6 +85,7 @@ Use this pattern when you need to place header, footer, sidebars, and main conte
 ## Constraints And Change Points
 
 - breakpointed responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Change point `@media (max-width: 47.99rem)` overrides `grid-template` on `.holy_grail`. Below 48rem the two 12rem side columns no longer fit beside main content, so all five regions stack in one column in DOM order: header, left, main, right, footer. At 48rem and wider the three-column shell applies.
 - Keep the HTML class hooks and CSS selectors in one-to-one agreement.
 
 ## Scroll Ownership