stylegallery 0.1.6 → 0.1.8

package/motion/rendering-and-performance.md

@@ -0,0 +1,89 @@
+---
+type: Domain Guide
+title: Motion Rendering And Performance
+description: Diagnose animation cost and choose native transition mechanisms with measurable behavior and complete fallbacks.
+domain: motion
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-09-21
+---
+
+# Motion Rendering And Performance
+
+Primary role: source-backed rendering diagnosis and mechanism selection.
+
+## Repository Boundary
+
+This guide owns questions about the delivery of product motion. It does not grant reusable Layout CSS animation properties, establish universal frame budgets, or treat a trace from one machine as proof for every device. Use the existing [Practice Reference](practice-reference.md) for the boundary between mechanics and taste.
+
+## Reusable Method
+
+Describe the visible failure before choosing a faster-looking API: input responds late, geometry jumps, frames arrive irregularly, content is blank during decoding, or the wrong state appears. Record the target browser/device, surface size, concurrent work, and source revision. Select evidence that distinguishes these failures.
+
+### Source Findings
+
+| Source | What it supports | What it does not establish |
+| --- | --- | --- |
+| [web.dev animation guide](https://web.dev/articles/animations-guide) | Rendering work depends on the properties and effects involved; inspect paint and compositing behavior. | That a property or library always runs on a GPU. |
+| [Layout thrashing](https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing) | Interleaved style writes and geometry reads can force synchronous layout; batching can avoid repeated work. | That every geometry read is a defect. |
+| [Chrome runtime performance](https://developer.chrome.com/docs/devtools/performance) | Recorded frames and main-thread work can locate a runtime bottleneck. | Hardware equivalence between throttling and an actual device. |
+| [View Transitions Level 1](https://www.w3.org/TR/css-view-transitions-1/) | Same-document transitions wrap a DOM update and expose distinct update, readiness, and finish promises. | Route state, data consistency, or a universal cross-document contract. |
+| [Scroll-driven Animations](https://www.w3.org/TR/scroll-animations-1/) | Scroll progress and view progress are distinct timeline models. | That a visually scrubbed sequence has correct reading order or accessibility. |
+| [CSS Transitions Level 2](https://www.w3.org/TR/css-transitions-2/#defining-before-change-style) | `@starting-style` supplies entry styling for relevant newly rendered elements. | Correct exit teardown, focus handling, or support in an unspecified runtime. |
+
+These are dated source readings, not a compatibility table. The linked standards-track documents include work in progress; check the selected browser and feature combination before making a shipping claim.
+
+### Match The Mechanism To The Responsibility
+
+| Responsibility | Candidate | First failure probe |
+| --- | --- | --- |
+| Animate one local state difference | CSS transition with a static endpoint | Disable transitions; the endpoint must still be correct. |
+| Control an effect's playback lifecycle | Web Animations | Interrupt and dispose it; verify cleanup and promise handling. |
+| Visually connect a replaced DOM state | Same-document View Transition | Skip the transition; the DOM update must still occur once. |
+| Bind presentation to a scroll interval | Native scroll/view timeline where supported | Remove support; content must remain readable in order. |
+| Coordinate media decoding with chapters | Consumer-owned controller | Delay or fail a frame decode; preserve a readable fallback. |
+
+This selection table is a local reasoning aid. It does not rank CSS, JavaScript, or native APIs by universal speed.
+
+### A Diagnostic Sequence
+
+1. Reproduce the failure with representative content and a repeatable input sequence. Save the initial state, not just the final screenshot.
+2. Inspect the slow interval: input queueing, script execution, style/layout, paint, compositing, and media work where the tooling exposes them.
+3. Change one suspected cost while retaining the same task and information. For a suspected layout loop, batch the same reads before writes rather than removing the interaction.
+4. Compare trace intervals and final behavior. Report both improvements and regressions; averaging the entire page can hide the bad interval.
+5. Repeat on a declared target device when the claim concerns that device. Keep emulation and real-device observations separate.
+
+For continuous motion, inspect frame delivery during the effect. For input responsiveness, use [Loading And Feedback](../design-engineering/loading-and-feedback.md) and its distinction between next paint and completed work. A responsive first frame can precede an unsuccessful operation.
+
+### View Transition Failure Contract
+
+Treat the DOM update as the essential operation. `updateCallbackDone` reports that update's result; `ready` can reject when an animation cannot start; visual skipping can still lead to successful completion. Handle the promises relevant to the selected API version and keep route/focus error handling independent of decoration. The [specification interface](https://www.w3.org/TR/css-view-transitions-1/#viewtransition) is the source for these distinctions.
+
+Local probes: request a second navigation before the first effect ends, remove a named element, use a duplicate transition name, fail the update callback, and resize during capture. Determine which failures skip only the effect and which prevent the destination update. Do not infer business success from the existence of a transition object.
+
+## Opinionated Guidance
+
+Choose the smallest effect that explains the state change. Promote an element or retain a large snapshot only when the measured benefit justifies its lifetime and resource cost. Reducing the work is often easier to explain than adding coordination machinery, but retain evidence for the actual tradeoff.
+
+## Platform-Specific Guidance
+
+DevTools UI and event names change; record tool/browser versions and retain raw traces. A native timeline needs a source-bound fallback, especially for media chapters with independent decoding. Follow [Scroll-driven Story](interaction-recipes.md#scroll-driven-story) for reading, scroll ownership, and runnable examples.
+
+## Unsupported Absolutes
+
+An average FPS value cannot prove every frame arrived on time. Smooth video playback of a capture cannot establish input latency. A compositor-friendly effect does not remove image decode, memory, script, or accessibility costs.
+
+## Verification Contract
+
+Report the initial failure, task-preserving comparison, target environment, raw artifact locator, observed difference, and remaining limitations. Keep source-derived expectations separate from measured timings. Test the static path, rapid input, cold and warm media/cache conditions, and reduced motion when relevant.
+
+The sequence above is a proposed diagnostic protocol; this documentation change captures no runtime performance evidence. Re-review when the effect, content scale, browser feature, or target hardware changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis. The linked official browser guidance and specifications were inspected 2026-09-21; no source code, figures, or tables are reproduced. `consumer_reference: not_applicable` because no consumer implementation or performance record is selected.
+
+## IA Navigation
+
+Parent: [Motion](index.md).
+Next: [Motion Review Workflow](review-workflow.md).

package/motion/techniques/kinetic-type.md

@@ -0,0 +1,145 @@
+---
+type: Domain Recipe
+title: Kinetic Type Technique
+description: Copy-ready split-word headline rises, scroll-lit paragraphs, count-ups, and marquees that keep accessible text intact.
+domain: motion
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Kinetic Type Technique
+
+Primary role: executable motion technique.
+
+## Repository Boundary
+
+Product-layer script and CSS for `showcase/` works and consumer pages. Setup and the `.motion` enhancement gate come from [Scroll Choreography Technique](scroll-choreography.md).
+
+## Reusable Method
+
+### Split-Word Rise
+
+Each word rises out of its own clipped line box. The heading keeps its full sentence as the accessible name, and the visual word spans are hidden from assistive technology.
+
+```js
+function splitHeadings() {
+  for (const heading of document.querySelectorAll("[data-split]")) {
+    heading.setAttribute("aria-label", heading.textContent.replace(/\s+/g, " ").trim());
+    const fragment = document.createDocumentFragment();
+    for (const node of [...heading.childNodes]) {
+      const tag = node.nodeName === "EM" ? "em" : "span";
+      for (const word of node.textContent.split(/(\s+)/)) {
+        if (!word) continue;
+        if (/^\s+$/.test(word)) { fragment.append(" "); continue; }
+        const outer = document.createElement("span");
+        outer.className = "split_word";
+        outer.setAttribute("aria-hidden", "true");
+        const inner = document.createElement(tag);
+        inner.className = "split_inner";
+        inner.textContent = word;
+        outer.append(inner);
+        fragment.append(outer);
+      }
+    }
+    heading.replaceChildren(fragment);
+  }
+}
+splitHeadings();
+gsap.to(".split_inner", { y: 0, duration: 1.3, ease: "expo.out", stagger: 0.06, delay: 0.15 });
+```
+
+```css
+.motion .split_word { display: inline-block; overflow: clip; padding-block-end: 0.08em; vertical-align: top; }
+.motion .split_inner { display: inline-block; transform: translateY(105%); }
+```
+
+The `padding-block-end` keeps descenders from being clipped. Run the split before measuring anything, and only once.
+
+### Scroll-Lit Paragraph
+
+Words start dim and light up with scroll progress.
+
+```js
+for (const paragraph of document.querySelectorAll("[data-words]")) {
+  const words = paragraph.textContent.trim().split(/\s+/);
+  paragraph.replaceChildren(...words.flatMap((word, index) => {
+    const span = Object.assign(document.createElement("span"), { className: "word_dim", textContent: word });
+    return index === 0 ? [span] : [" ", span];
+  }));
+}
+gsap.to(".word_dim", {
+  opacity: 1, ease: "none", stagger: 0.4,
+  scrollTrigger: { trigger: "[data-words]", start: "top 78%", end: "bottom 45%", scrub: true },
+});
+```
+
+```css
+.motion .word_dim { opacity: 0.16; }
+```
+
+### Count-Up
+
+The final number is in the HTML; motion only animates toward it.
+
+```html
+<dd data-count="41920">41,920</dd>
+```
+
+```js
+for (const element of document.querySelectorAll("[data-count]")) {
+  const state = { value: 0 };
+  gsap.to(state, {
+    value: Number(element.dataset.count), duration: 2, ease: "power3.out",
+    onUpdate: () => { element.textContent = Math.round(state.value).toLocaleString("en-US"); },
+    scrollTrigger: { trigger: element, start: "top 88%", once: true },
+  });
+}
+```
+
+Use `font-variant-numeric: tabular-nums` so the width does not jitter while counting.
+
+### Marquee
+
+Pure CSS. Duplicate the content once and translate by half.
+
+```html
+<div class="marquee" aria-hidden="true">
+  <div class="marquee_track"><span>One</span><span>Two</span><span>One</span><span>Two</span></div>
+</div>
+```
+
+```css
+.marquee { overflow: clip; }
+.marquee_track { animation: marquee 32s linear infinite; display: flex; gap: 2.5rem; inline-size: max-content; white-space: nowrap; }
+@keyframes marquee { to { transform: translateX(-50%); } }
+@media (prefers-reduced-motion: reduce) {
+  .marquee_track { animation: none; flex-wrap: wrap; inline-size: auto; white-space: normal; }
+}
+```
+
+The marquee is decorative and `aria-hidden`. Never put the only copy of important text in it.
+
+## Opinionated Guidance
+
+Animate words, not letters. Letter-by-letter reveals look impressive once and read slowly every time after that.
+
+## Platform-Specific Guidance
+
+Splitting text breaks browser hyphenation and some `text-wrap: balance` results across word spans; check the split headline at 320px. Screen readers read the `aria-label`, so keep it identical to the visible sentence.
+
+## Unsupported Absolutes
+
+Stagger and duration values suit short display headlines. Long paragraphs should not rise word by word.
+
+## Verification Contract
+
+Under reduced motion or with no GSAP, every split heading and lit paragraph is fully visible and the marquee is static. `node scripts/check-showcase.mjs` enforces both.
+
+## Source, License, And Attribution
+
+Locally authored technique. GSAP is loaded at runtime under its own license; no library source is reproduced.
+
+## IA Navigation
+
+Parent: [Motion](../index.md).
+Next: [Showcase](../../showcase/README.md).

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,8 +1,9 @@
 {
   "name": "stylegallery",
-  "version": "0.1.6",
-  "description": "A governed gallery of portable interface knowledge with deterministic CLIs and read-only MCP servers.",
+  "version": "0.1.8",
+  "description": "A governed gallery of portable interface knowledge with knowledge CLIs, website compilation, and MCP servers.",
   "type": "module",
+  "license": "MIT",
   "homepage": "https://github.com/changeroa/StyleGallery#readme",
   "bugs": {
     "url": "https://github.com/changeroa/StyleGallery/issues"
@@ -22,12 +23,16 @@
   "engines": {
     "node": ">=22"
   },
+  "packageManager": "bun@1.3.14",
   "files": [
     "AGENTS.md",
     "CATALOG.md",
     "DOMAINS.md",
     "GOVERNANCE.md",
     "GUIDE.md",
+    "LICENSE",
+    "LICENSE-DOCS",
+    "NOTICE",
     "README.md",
     "consumer-reference/agent-native/README.md",
     "consumer-reference/agent-native/registry.json",
@@ -52,29 +57,52 @@
     "design-engineering/decision-tree.md",
     "design-engineering/index.md",
     "design-engineering/interface-craft.md",
+    "design-engineering/loading-and-feedback.md",
+    "design-engineering/native-interaction-contracts.md",
     "design-engineering/reference-profiles/governed-local/editorial/profile.json",
     "design-engineering/reference-profiles/governed-local/index.md",
     "design-engineering/reference-profiles/index.md",
+    "design-engineering/state-management/decision-tree.md",
+    "design-engineering/state-management/index.md",
+    "design-engineering/state-management/patterns/derived-state.md",
+    "design-engineering/state-management/patterns/draft-and-baseline.md",
+    "design-engineering/state-management/patterns/id-selection.md",
+    "design-engineering/state-management/patterns/identity-reset.md",
+    "design-engineering/state-management/patterns/latest-request-wins.md",
+    "design-engineering/state-management/patterns/optimistic-overlay.md",
+    "design-engineering/state-management/patterns/single-flight.md",
+    "design-engineering/state-management/patterns/single-owner.md",
+    "design-engineering/state-management/patterns/submitted-snapshot.md",
+    "design-engineering/state-management/patterns/unsaved-navigation.md",
+    "design-engineering/state-management/patterns/url-state.md",
+    "design-engineering/state-management/patterns/versioned-restore.md",
+    "design-engineering/state-management/recipes/delete-undo.md",
+    "design-engineering/state-management/recipes/index.md",
+    "design-engineering/state-management/recipes/multi-step-form.md",
+    "design-engineering/state-management/recipes/search-detail.md",
+    "design-engineering/state-management/recipes/settings-save.md",
+    "design-engineering/state-management/state-brief.md",
+    "design-engineering/state-management/verification.md",
+    "design-engineering/text-input-and-internationalization.md",
     "design-engineering/worked-examples.md",
     "design-terminology/comparison-workflow.md",
     "design-terminology/concept-families.md",
     "design-terminology/conflict-cases.md",
     "design-terminology/index.md",
+    "design-terminology/interaction-semantics.md",
     "design-terminology/relation-types.md",
     "design-terminology/source-kinds.md",
     "design-terminology/source-vocabularies.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",
+    "design-terminology/token-semantics.md",
+    "design-terminology/typography-semantics.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",
@@ -83,12 +111,18 @@
     "index.md",
     "layout/index.md",
     "log.md",
+    "motion/accessible-motion.md",
     "motion/decision-tree.md",
     "motion/index.md",
     "motion/interaction-recipes.md",
+    "motion/interruption-and-retargeting.md",
     "motion/motion-brief.md",
+    "motion/observed-choreography.md",
     "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",
@@ -147,10 +181,13 @@
     "patterns/viewport-shell/sticky-footer.md",
     "patterns/viewport-shell/sticky-header.md",
     "platform-guides/adaptation-workflow.md",
+    "platform-guides/adaptive-navigation.md",
     "platform-guides/android-interaction.md",
     "platform-guides/apple-interaction.md",
     "platform-guides/compatibility-matrix.md",
     "platform-guides/index.md",
+    "platform-guides/input-and-focus.md",
+    "platform-guides/preferences-and-accessibility.md",
     "platform-guides/windows-interaction.md",
     "quality/claim-records/design-terminology-domain-scope.md",
     "quality/claim-records/index.md",
@@ -214,19 +251,27 @@
     "scripts/agent-native/v2/material-operation-registry.mjs",
     "scripts/agent-native/v2/material-queries.mjs",
     "scripts/agent-native/v2/material-registry.mjs",
+    "scripts/compiler/README.md",
+    "scripts/compiler/cli.mjs",
+    "scripts/compiler/mcp.mjs",
+    "scripts/compiler/operations.mjs",
+    "scripts/compiler/runtime.mjs",
+    "scripts/sg-entry.mjs",
     "scripts/sg-material-mcp.mjs",
     "scripts/sg-material.mjs",
     "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.mjs",
+    "sg": "scripts/sg-entry.mjs",
     "sg-material": "scripts/sg-material.mjs",
-    "stylegallery": "scripts/sg.mjs",
+    "stylegallery": "scripts/sg-entry.mjs",
     "stylegallery-material": "scripts/sg-material.mjs",
     "stylegallery-material-mcp": "scripts/sg-material-mcp.mjs",
-    "stylegallery-mcp": "scripts/sg-mcp.mjs"
+    "stylegallery-mcp": "scripts/sg-server.mjs"
   },
   "publishConfig": {
     "access": "public"
@@ -251,13 +296,20 @@
     "test:material": "node scripts/agent-native/v2/test-material-admission.mjs && node scripts/agent-native/v2/test-material-registry.mjs && node scripts/agent-native/v2/test-material-query.mjs && node scripts/agent-native/v2/test-material-context.mjs && node scripts/agent-native/v2/test-sg-material-cli.mjs && node scripts/agent-native/v2/test-material-mcp.mjs && node scripts/agent-native/v2/test-material-mcp-stdio.mjs && node scripts/agent-native/v2/test-sg-material-package.mjs",
     "test:lifecycle-dispositions": "node scripts/test-lifecycle-disposition.mjs",
     "validate:lifecycle-dispositions": "node scripts/validate-lifecycle-disposition.mjs --json",
-    "sg": "node scripts/sg.mjs",
+    "sg": "node scripts/sg-entry.mjs",
     "sg:material": "node scripts/sg-material.mjs",
     "sg:material:mcp": "node scripts/sg-material-mcp.mjs",
-    "sg:mcp": "node scripts/sg-mcp.mjs",
+    "sg:mcp": "node scripts/sg-server.mjs",
     "test:agent-native": "node scripts/test-agent-knowledge-kernel.mjs --json && node scripts/test-agent-execution-kernel.mjs --json && node scripts/test-agent-execution-safety.mjs --json && node scripts/test-agent-events.mjs --json && node scripts/test-agent-learning.mjs --json && node scripts/test-agent-native-schemas.mjs --json && node scripts/test-sg-cli.mjs --json && node scripts/test-agent-conformance-receipt.mjs --json && node scripts/test-agent-mcp.mjs --json && node scripts/test-agent-registry-mcp-integrity.mjs --json && node scripts/test-agent-registry-mutations.mjs --json && node scripts/test-agent-adapter-conformance.mjs --json && node scripts/agent-native/v2/test-agent-extension-boundary.mjs && node scripts/test-agent-projections.mjs --json && node scripts/agent-native/v2/test-agent-v1-compatibility.mjs",
     "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"
+    "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"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.12.1",
@@ -270,5 +322,8 @@
     "@modelcontextprotocol/sdk": "1.29.0",
     "style-dictionary": "5.5.0",
     "zod": "4.4.3"
+  },
+  "overrides": {
+    "brace-expansion": "5.0.9"
   }
 }