stylegallery 0.1.10 → 0.1.12
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.
- package/AGENTS.md +2 -2
- package/GOVERNANCE.md +1 -1
- package/README.md +38 -35
- package/consumer-reference/agent-native/README.md +5 -5
- package/consumer-reference/agent-native/v2/material-registry.json +1 -1
- package/design-engineering/loading-and-feedback.md +1 -0
- package/design-engineering/native-interaction-contracts.md +2 -0
- package/design-engineering/state-management/patterns/latest-request-wins.md +2 -0
- package/design-engineering/state-management/patterns/optimistic-overlay.md +1 -0
- package/design-engineering/state-management/patterns/single-flight.md +2 -0
- package/design-engineering/state-management/patterns/unsaved-navigation.md +2 -0
- package/design-engineering/state-management/patterns/url-state.md +1 -0
- package/design-engineering/state-management/recipes/delete-undo.md +1 -0
- package/design-engineering/text-input-and-internationalization.md +1 -0
- package/expression/directions/nocturne-editorial.md +1 -0
- package/expression/directions/warm-print.md +1 -0
- package/expression/techniques/gradient-atmosphere.md +1 -0
- package/expression/techniques/grain-and-texture.md +1 -0
- package/expression/techniques/webgl-hero.md +1 -0
- package/guides/decision-tree.md +2 -0
- package/guides/webpage-generation-workflow.md +2 -0
- package/log.md +29 -0
- package/motion/accessible-motion.md +2 -0
- package/motion/interruption-and-retargeting.md +2 -0
- package/motion/rendering-and-performance.md +1 -0
- package/motion/techniques/kinetic-type.md +1 -0
- package/motion/techniques/scroll-choreography.md +2 -0
- package/package.json +14 -8
- package/patterns/centering/center.md +1 -0
- package/patterns/centering/super-center.md +2 -0
- package/patterns/containment/box.md +1 -0
- package/patterns/containment/clamped-card.md +1 -0
- package/patterns/containment/content-limiter.md +2 -0
- package/patterns/containment/fluid-styles.md +1 -0
- package/patterns/grid-repetition/card-grid.md +2 -0
- package/patterns/grid-repetition/columns.md +1 -0
- package/patterns/grid-repetition/dense-grid.md +1 -0
- package/patterns/grid-repetition/grid-wrapper.md +1 -0
- package/patterns/grid-repetition/masonry-approx.md +1 -0
- package/patterns/grid-repetition/page-grid.md +1 -0
- package/patterns/grid-repetition/ram-grid.md +2 -0
- package/patterns/grid-repetition/twelve-span-grid.md +1 -0
- package/patterns/in-line-grouping/badge-list.md +1 -0
- package/patterns/in-line-grouping/breadcrumb.md +1 -0
- package/patterns/in-line-grouping/cluster.md +1 -0
- package/patterns/in-line-grouping/deconstructed-pancake.md +1 -0
- package/patterns/in-line-grouping/pagination.md +1 -0
- package/patterns/in-line-grouping/reel.md +2 -0
- package/patterns/in-line-grouping/split-nav.md +1 -0
- package/patterns/in-line-grouping/tab-strip.md +1 -0
- package/patterns/in-line-grouping/wrap-row.md +1 -0
- package/patterns/media-fit/frame.md +2 -0
- package/patterns/media-fit/icon-frame.md +1 -0
- package/patterns/overlay-exception/imposter.md +1 -0
- package/patterns/overlay-exception/overlay-stack.md +1 -0
- package/patterns/split-sidebar/list-detail.md +1 -0
- package/patterns/split-sidebar/main-with-rail.md +1 -0
- package/patterns/split-sidebar/media-object.md +1 -0
- package/patterns/split-sidebar/sidebar.md +2 -0
- package/patterns/split-sidebar/split-screen.md +1 -0
- package/patterns/split-sidebar/sticky-aside.md +2 -0
- package/patterns/split-sidebar/supporting-pane.md +1 -0
- package/patterns/split-sidebar/switcher.md +2 -0
- package/patterns/stacking/feed.md +1 -0
- package/patterns/stacking/line-up.md +2 -0
- package/patterns/stacking/stack.md +1 -0
- package/patterns/stacking/step-nav.md +1 -0
- package/patterns/viewport-shell/cover.md +1 -0
- package/patterns/viewport-shell/fixed-sidenav-shell.md +2 -0
- package/patterns/viewport-shell/holy-grail.md +2 -0
- package/patterns/viewport-shell/panel-layout.md +1 -0
- package/patterns/viewport-shell/scroll-body-shell.md +2 -0
- package/patterns/viewport-shell/sticky-footer.md +2 -0
- package/patterns/viewport-shell/sticky-header.md +2 -0
- package/platform-guides/preferences-and-accessibility.md +1 -0
- package/recipes/article-page.md +1 -0
- package/recipes/command-surface.md +1 -0
- package/recipes/dashboard.md +1 -0
- package/recipes/form-flow.md +1 -0
- package/recipes/homepage.md +2 -0
- package/recipes/list-detail.md +1 -0
- package/recipes/saas-settings.md +1 -0
- package/scripts/agent-native/v2/material-cli-adapter.mjs +7 -5
- package/scripts/agent-native/v2/material-queries.mjs +21 -0
- package/scripts/agent-native/v2/material-search-v3.mjs +409 -0
- package/scripts/compiler/README.md +16 -16
- package/scripts/compiler/mcp.mjs +38 -2
- package/scripts/legacy-sg-material-mcp.mjs +9 -0
- package/scripts/legacy-sg-material.mjs +4 -0
- package/scripts/pattern-data.mjs +409 -0
- package/scripts/sg-entry.mjs +2 -2
- package/scripts/sg-material-mcp.mjs +1 -1
- package/scripts/stylegallery-cli.mjs +130 -0
- package/skills/stylegallery-search/SKILL.md +34 -0
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Loading, Progress, And Feedback
|
|
4
4
|
description: Separate input acknowledgement, pending work, stale content, confirmed completion, and measurable responsiveness.
|
|
5
|
+
aliases: ["loading state","spinner","skeleton","progress indicator","로딩 상태","스켈레톤","진행 표시"]
|
|
5
6
|
domain: design-engineering
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Native Interaction Contracts
|
|
4
4
|
description: Choose disclosure, dialog, popover, menu, and combobox behavior by semantics, focus, dismissal, and input ownership.
|
|
5
|
+
aliases: ["dialog","popover","modal","menu","combobox","다이얼로그","팝오버","모달"]
|
|
6
|
+
questions: ["When should I use a dialog instead of a popover?"]
|
|
5
7
|
domain: design-engineering
|
|
6
8
|
lifecycle: experimental
|
|
7
9
|
provenance_kind: local
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Latest Request Wins
|
|
4
4
|
description: Prevent an older read response from replacing the result of a newer user intent.
|
|
5
|
+
aliases: ["race condition","stale response","out of order responses","경쟁 조건","오래된 응답"]
|
|
6
|
+
questions: ["How do I stop an older search response from replacing newer results?"]
|
|
5
7
|
domain: design-engineering
|
|
6
8
|
lifecycle: experimental
|
|
7
9
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Optimistic Overlay And Recovery
|
|
4
4
|
description: Show a speculative change while preserving an authoritative base for recovery.
|
|
5
|
+
aliases: ["optimistic update","optimistic UI","rollback","낙관적 업데이트"]
|
|
5
6
|
domain: design-engineering
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Single Flight And Duplicate Submission
|
|
4
4
|
description: Apply an explicit policy to repeated activation of one pending operation.
|
|
5
|
+
aliases: ["double submit","duplicate submission","prevent double click","중복 제출","중복 클릭 방지","중복 제출 방지"]
|
|
6
|
+
questions: ["How do I prevent a form from being submitted twice?"]
|
|
5
7
|
domain: design-engineering
|
|
6
8
|
lifecycle: experimental
|
|
7
9
|
provenance_kind: local
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Unsaved Changes And Navigation
|
|
4
4
|
description: Make leaving an edited screen an explicit decision without losing the current draft.
|
|
5
|
+
aliases: ["unsaved changes warning","leave page confirmation","beforeunload","저장하지 않은 변경 사항","이탈 경고"]
|
|
6
|
+
questions: ["How do I warn before leaving with unsaved changes?"]
|
|
5
7
|
domain: design-engineering
|
|
6
8
|
lifecycle: experimental
|
|
7
9
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: URL State And History
|
|
4
4
|
description: Keep shareable screen state consistent across links, refresh, and browser history.
|
|
5
|
+
aliases: ["query string state","filters in URL","deep link","URL 상태","쿼리 파라미터"]
|
|
5
6
|
domain: design-engineering
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Deletion And Supported Undo
|
|
4
4
|
description: Remove the intended entity and provide recovery that matches actual backend capabilities.
|
|
5
|
+
aliases: ["undo delete","delete with undo","삭제 취소","실행 취소"]
|
|
5
6
|
domain: design-engineering
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Text Input And Internationalization
|
|
4
4
|
description: Design composition-aware editing, explicit text units, bidirectional content, and locale-bound presentation without corrupting user input.
|
|
5
|
+
aliases: ["IME","composition events","RTL","bidi","한글 입력","입력기 조합"]
|
|
5
6
|
domain: design-engineering
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Nocturne Editorial Direction
|
|
4
4
|
description: A dark, glowing, editorial direction with concrete type, color, texture, and motion-density values.
|
|
5
|
+
aliases: ["dark theme direction","dark editorial","다크 에디토리얼"]
|
|
5
6
|
domain: expression
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Warm Print Direction
|
|
4
4
|
description: A light, warm, print-inspired direction with concrete type, color, texture, and motion-density values.
|
|
5
|
+
aliases: ["light print style","warm editorial","따뜻한 인쇄 느낌"]
|
|
5
6
|
domain: expression
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Recipe
|
|
3
3
|
title: Gradient Atmosphere
|
|
4
4
|
description: Copy-ready blurred gradient fields, card glows, and gradient text for expressive product pages.
|
|
5
|
+
aliases: ["blurred gradient","glow","gradient text","그라데이션 배경"]
|
|
5
6
|
domain: expression
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Recipe
|
|
3
3
|
title: Grain And Texture
|
|
4
4
|
description: Copy-ready film grain, noise, and halftone textures without image files.
|
|
5
|
+
aliases: ["film grain","noise texture","halftone","그레인","노이즈 텍스처"]
|
|
5
6
|
domain: expression
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Recipe
|
|
3
3
|
title: WebGL Hero Field
|
|
4
4
|
description: A three.js point field behind a hero, with pointer parallax, offscreen pausing, and safe fallbacks.
|
|
5
|
+
aliases: ["three.js hero","WebGL background","3D hero","3D 배경"]
|
|
5
6
|
domain: expression
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
package/guides/decision-tree.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Planning Guide
|
|
3
3
|
title: Layout Decision Tree
|
|
4
4
|
description: Question-driven route from screen constraints to StyleGallery Layout patterns and recipes.
|
|
5
|
+
aliases: ["choose a layout pattern","which pattern","레이아웃 패턴 고르기","패턴 선택"]
|
|
6
|
+
questions: ["Which layout pattern should I use for this screen?"]
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
# Layout Decision Tree
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Planning Guide
|
|
3
3
|
title: Webpage Generation Workflow
|
|
4
4
|
description: Intake-to-implementation workflow for turning raw content into a homepage or ordinary webpage layout.
|
|
5
|
+
aliases: ["build a webpage from content","landing page workflow","웹페이지 만들기","랜딩 페이지 만들기"]
|
|
6
|
+
questions: ["How do I turn raw content into a homepage or webpage layout?"]
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
# Webpage Generation Workflow
|
package/log.md
CHANGED
|
@@ -1,7 +1,36 @@
|
|
|
1
1
|
# StyleGallery Log
|
|
2
2
|
|
|
3
|
+
## 2026-10-19
|
|
4
|
+
|
|
5
|
+
Understood as: release `stylegallery@0.1.12`, which makes agent search one `stylegallery` command with BM25F ranking, Korean aliases, readable ids, section reads, and a CI retrieval gate.
|
|
6
|
+
|
|
7
|
+
- CLI: `stylegallery` is the only command name. It adds `search`, `read`, `retrieve`, `help`/`--help`, and `version`/`--version` beside the existing governed and compiler commands; `context --query` builds the material context. The `sg` bin is removed because it collides with ast-grep. `sg-material`, `stylegallery-material`, and `stylegallery-material-mcp` print a rename notice and delegate in this release only. `stylegallery-mcp` gains `search` and `read` tools that return the same JSON as the CLI.
|
|
8
|
+
- Search v3 (`scripts/agent-native/v2/material-search-v3.mjs`): BM25F over title, aliases, description, questions, path, headings, and body; Hangul 2-grams indexed only from Korean aliases, questions, and titles; an optional `query_en`; readable ids `sg:<domain>/<slug>` with hash identities kept for `--detailed`; schema 3.0 results with a verbatim snippet and the next `read` command; `read --outline` and `read --section`.
|
|
9
|
+
- Metadata: frontmatter `aliases` and `questions` (JSON lists) for all 46 Layout patterns, through `scripts/pattern-data.mjs` and the pattern generator, and for 29 recipe, guide, motion, design-engineering, platform, and expression documents.
|
|
10
|
+
- Evaluation: `eval/search/questions.json` holds 75 questions (56 English, 19 Korean or mixed, 19 must-pass, 15 held out from alias writing). `eval/search/scores.json` records the legacy ranker on the original corpus and search v3: Hit@5 0.613 to 0.973, nDCG@5 0.482 to 0.863, MRR 0.510 to 0.876, must-pass 14/19 to 19/19, Korean Hit@5 0.105 to 1.0, held-out Hit@5 0.533 to 0.867. `validate.yml` runs `scripts/test-stylegallery-search.mjs` and `scripts/search-eval.mjs --gate` on every pull request.
|
|
11
|
+
- `skills/stylegallery-search/SKILL.md` ships one search how-to skill.
|
|
12
|
+
|
|
13
|
+
Consumer reference: not_applicable
|
|
14
|
+
Consumer reference reason: This change adds retrieval tooling and search metadata and selects no consumer-reference profile or record.
|
|
15
|
+
|
|
3
16
|
## 2026-10-16
|
|
4
17
|
|
|
18
|
+
Understood as: release `stylegallery@0.1.11`, the first version published by the Trusted Publishing workflow from PR #57.
|
|
19
|
+
|
|
20
|
+
- Bumped the package version from `0.1.10` to `0.1.11`. The release carries PR #57: `.github/workflows/publish.yml` publishes the package when a GitHub Release is published, authenticating to npm with GitHub OIDC instead of a token, and the README Releasing section describes the flow. This version is published by creating the GitHub Release `v0.1.11`, not from a local machine.
|
|
21
|
+
- The package `files` list is unchanged. 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.
|
|
22
|
+
|
|
23
|
+
Consumer reference: not_applicable
|
|
24
|
+
Consumer reference reason: This change releases a package version and selects no consumer-reference profile or record.
|
|
25
|
+
|
|
26
|
+
Understood as: publish the npm package from GitHub Actions through npm Trusted Publishing (OIDC) instead of a local token.
|
|
27
|
+
|
|
28
|
+
- Added `.github/workflows/publish.yml`. A published GitHub Release runs it on a GitHub-hosted runner with `id-token: write`, Node 22, and npm 11.21.1 (Trusted Publishing needs npm 11.5.1 or later and Node 22.14 or later). It checks that the release tag is `v` plus the `package.json` version, runs the governance, lifecycle, reference-artifact, material, and Registrar checks and `npm pack --dry-run`, then runs `npm publish`. No npm token secret is used, and npm generates provenance for the public repository. Actions are pinned to the same commit SHAs as the other workflows.
|
|
29
|
+
- `README.md` gains a Releasing section: merge the version-bump pull request, create a GitHub Release tagged `v<version>`, and the workflow publishes. The workflow cannot publish until the `stylegallery` package names `changeroa/StyleGallery` and `publish.yml` as a Trusted Publisher on npmjs.com with `npm publish` allowed. That registration is not done yet, because a new entry expires unless its first publish succeeds within two days. Source: https://docs.npmjs.com/trusted-publishers, read 2026-10-16.
|
|
30
|
+
|
|
31
|
+
Consumer reference: not_applicable
|
|
32
|
+
Consumer reference reason: This change adds a release workflow and its documentation and selects no consumer-reference profile or record.
|
|
33
|
+
|
|
5
34
|
Understood as: release `stylegallery@0.1.10` with the Registrar, the Conservator, and the holy-grail and icon-frame doc fixes from PR #55.
|
|
6
35
|
|
|
7
36
|
- 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"`.
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Accessible Motion And Equivalent Feedback
|
|
4
4
|
description: Separate motion preferences, automatic updates, flashing, and semantic feedback before designing reduced-motion behavior.
|
|
5
|
+
aliases: ["reduced motion","prefers-reduced-motion","motion sensitivity","모션 줄이기","애니메이션 줄이기","접근성 모션"]
|
|
6
|
+
questions: ["How should the interface respond to prefers-reduced-motion?"]
|
|
5
7
|
domain: motion
|
|
6
8
|
lifecycle: experimental
|
|
7
9
|
provenance_kind: local
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Interruption And Retargeting
|
|
4
4
|
description: Keep semantic intent, presented motion, cancellation, and teardown consistent under repeated input.
|
|
5
|
+
aliases: ["interrupted animation","animation cancellation","repeated clicks during animation","애니메이션 중단"]
|
|
6
|
+
questions: ["What happens when the user triggers the same transition again mid-animation?"]
|
|
5
7
|
domain: motion
|
|
6
8
|
lifecycle: experimental
|
|
7
9
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Guide
|
|
3
3
|
title: Motion Rendering And Performance
|
|
4
4
|
description: Diagnose animation cost and choose native transition mechanisms with measurable behavior and complete fallbacks.
|
|
5
|
+
aliases: ["animation performance","jank","dropped frames","애니메이션 성능","버벅임"]
|
|
5
6
|
domain: motion
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
type: Domain Recipe
|
|
3
3
|
title: Kinetic Type Technique
|
|
4
4
|
description: Copy-ready split-word headline rises, scroll-lit paragraphs, count-ups, and marquees that keep accessible text intact.
|
|
5
|
+
aliases: ["text animation","headline animation","kinetic typography","텍스트 애니메이션","타이포 애니메이션"]
|
|
5
6
|
domain: motion
|
|
6
7
|
lifecycle: experimental
|
|
7
8
|
provenance_kind: local
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
type: Domain Recipe
|
|
3
3
|
title: Scroll Choreography Technique
|
|
4
4
|
description: Copy-ready GSAP ScrollTrigger and Lenis setup, pinned horizontal travel, scrubbed scenes, and a native CSS scroll-timeline equivalent.
|
|
5
|
+
aliases: ["scroll animation","ScrollTrigger","scroll-driven animation","pinned section","스크롤 애니메이션","스크롤 연출"]
|
|
6
|
+
questions: ["How do I build a pinned horizontal scroll scene?"]
|
|
5
7
|
domain: motion
|
|
6
8
|
lifecycle: experimental
|
|
7
9
|
provenance_kind: local
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stylegallery",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"description": "A governed gallery of portable interface knowledge with knowledge CLIs, website compilation, and MCP servers.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -251,6 +251,7 @@
|
|
|
251
251
|
"scripts/agent-native/v2/material-operation-registry.mjs",
|
|
252
252
|
"scripts/agent-native/v2/material-queries.mjs",
|
|
253
253
|
"scripts/agent-native/v2/material-registry.mjs",
|
|
254
|
+
"scripts/agent-native/v2/material-search-v3.mjs",
|
|
254
255
|
"scripts/compiler/README.md",
|
|
255
256
|
"scripts/compiler/cli.mjs",
|
|
256
257
|
"scripts/compiler/mcp.mjs",
|
|
@@ -258,6 +259,8 @@
|
|
|
258
259
|
"scripts/compiler/runtime.mjs",
|
|
259
260
|
"scripts/conservator-exhibits.mjs",
|
|
260
261
|
"scripts/conservator.mjs",
|
|
262
|
+
"scripts/legacy-sg-material-mcp.mjs",
|
|
263
|
+
"scripts/legacy-sg-material.mjs",
|
|
261
264
|
"scripts/markdown-structure.mjs",
|
|
262
265
|
"scripts/pattern-data.mjs",
|
|
263
266
|
"scripts/registrar.mjs",
|
|
@@ -268,14 +271,15 @@
|
|
|
268
271
|
"scripts/sg-server.mjs",
|
|
269
272
|
"scripts/sg.mjs",
|
|
270
273
|
"scripts/strict-json.mjs",
|
|
271
|
-
"
|
|
274
|
+
"scripts/stylegallery-cli.mjs",
|
|
275
|
+
"showcase/README.md",
|
|
276
|
+
"skills/stylegallery-search/SKILL.md"
|
|
272
277
|
],
|
|
273
278
|
"bin": {
|
|
274
|
-
"sg": "scripts/sg-
|
|
275
|
-
"sg-material": "scripts/sg-material.mjs",
|
|
279
|
+
"sg-material": "scripts/legacy-sg-material.mjs",
|
|
276
280
|
"stylegallery": "scripts/sg-entry.mjs",
|
|
277
|
-
"stylegallery-material": "scripts/sg-material.mjs",
|
|
278
|
-
"stylegallery-material-mcp": "scripts/sg-material-mcp.mjs",
|
|
281
|
+
"stylegallery-material": "scripts/legacy-sg-material.mjs",
|
|
282
|
+
"stylegallery-material-mcp": "scripts/legacy-sg-material-mcp.mjs",
|
|
279
283
|
"stylegallery-mcp": "scripts/sg-server.mjs"
|
|
280
284
|
},
|
|
281
285
|
"publishConfig": {
|
|
@@ -301,7 +305,6 @@
|
|
|
301
305
|
"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",
|
|
302
306
|
"test:lifecycle-dispositions": "node scripts/test-lifecycle-disposition.mjs",
|
|
303
307
|
"validate:lifecycle-dispositions": "node scripts/validate-lifecycle-disposition.mjs --json",
|
|
304
|
-
"sg": "node scripts/sg-entry.mjs",
|
|
305
308
|
"sg:material": "node scripts/sg-material.mjs",
|
|
306
309
|
"sg:material:mcp": "node scripts/sg-material-mcp.mjs",
|
|
307
310
|
"sg:mcp": "node scripts/sg-server.mjs",
|
|
@@ -318,7 +321,10 @@
|
|
|
318
321
|
"showcase:serve": "node scripts/serve-showcase.mjs",
|
|
319
322
|
"test:compiler": "node --test scripts/test-sg-compiler.mjs",
|
|
320
323
|
"sg:v1": "node scripts/sg.mjs",
|
|
321
|
-
"sg:mcp:v1": "node scripts/sg-mcp.mjs"
|
|
324
|
+
"sg:mcp:v1": "node scripts/sg-mcp.mjs",
|
|
325
|
+
"stylegallery": "node scripts/sg-entry.mjs",
|
|
326
|
+
"test:search": "node --test scripts/test-stylegallery-search.mjs",
|
|
327
|
+
"eval:search": "node scripts/search-eval.mjs --gate"
|
|
322
328
|
},
|
|
323
329
|
"devDependencies": {
|
|
324
330
|
"@playwright/test": "1.61.0",
|
|
@@ -4,6 +4,7 @@ name: center
|
|
|
4
4
|
title: center
|
|
5
5
|
category: Centering
|
|
6
6
|
description: Center a block while respecting a maximum measure.
|
|
7
|
+
aliases: ["center horizontally","max width centered","가운데 정렬","수평 가운데 정렬"]
|
|
7
8
|
primary_spatial_problem: Center a block while respecting a maximum measure.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,8 @@ name: super-center
|
|
|
4
4
|
title: super-center
|
|
5
5
|
category: Centering
|
|
6
6
|
description: Center one region along both axes.
|
|
7
|
+
aliases: ["center horizontally and vertically","center a div","place-items center","가운데 정렬","정중앙 정렬"]
|
|
8
|
+
questions: ["How do I center an element both horizontally and vertically?"]
|
|
7
9
|
primary_spatial_problem: Center one region along both axes.
|
|
8
10
|
secondary_spatial_problems: none
|
|
9
11
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: box
|
|
|
4
4
|
title: box
|
|
5
5
|
category: Containment
|
|
6
6
|
description: Wrap content with predictable internal spacing.
|
|
7
|
+
aliases: ["padded box","내부 여백 박스"]
|
|
7
8
|
primary_spatial_problem: Wrap content with predictable internal spacing.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: block
|
|
@@ -4,6 +4,7 @@ name: clamped-card
|
|
|
4
4
|
title: clamped-card
|
|
5
5
|
category: Containment
|
|
6
6
|
description: Constrain a card to a readable fluid width.
|
|
7
|
+
aliases: ["card max width clamp","카드 폭 제한"]
|
|
7
8
|
primary_spatial_problem: Constrain a card to a readable fluid width.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,8 @@ name: content-limiter
|
|
|
4
4
|
title: content-limiter
|
|
5
5
|
category: Containment
|
|
6
6
|
description: Keep prose width readable inside fluid containers.
|
|
7
|
+
aliases: ["readable line length","max measure","prose width","읽기 좋은 줄 길이","본문 폭 제한"]
|
|
8
|
+
questions: ["How do I keep prose at a readable line length?"]
|
|
7
9
|
primary_spatial_problem: Keep prose width readable inside fluid containers.
|
|
8
10
|
secondary_spatial_problems: none
|
|
9
11
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: fluid-styles
|
|
|
4
4
|
title: fluid-styles
|
|
5
5
|
category: Containment
|
|
6
6
|
description: Let a region fill available width without exceeding a readable max.
|
|
7
|
+
aliases: ["fluid width with max","유동 폭"]
|
|
7
8
|
primary_spatial_problem: Let a region fill available width without exceeding a readable max.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,8 @@ name: card-grid
|
|
|
4
4
|
title: card-grid
|
|
5
5
|
category: Grid / Repetition
|
|
6
6
|
description: Align repeating cards in rows and columns.
|
|
7
|
+
aliases: ["responsive card grid","cards in rows and columns","카드 그리드","반응형 카드 그리드","카드 목록"]
|
|
8
|
+
questions: ["How do I align repeating cards into a responsive grid?"]
|
|
7
9
|
primary_spatial_problem: Align repeating cards in rows and columns.
|
|
8
10
|
secondary_spatial_problems: none
|
|
9
11
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: columns
|
|
|
4
4
|
title: columns
|
|
5
5
|
category: Grid / Repetition
|
|
6
6
|
description: Flow long content into balanced text columns.
|
|
7
|
+
aliases: ["multi-column text","css columns","다단 텍스트"]
|
|
7
8
|
primary_spatial_problem: Flow long content into balanced text columns.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: dense-grid
|
|
|
4
4
|
title: dense-grid
|
|
5
5
|
category: Grid / Repetition
|
|
6
6
|
description: Fill a compact grid with repeated small items.
|
|
7
|
+
aliases: ["compact grid","grid-auto-flow dense","촘촘한 그리드"]
|
|
7
8
|
primary_spatial_problem: Fill a compact grid with repeated small items.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: grid-wrapper
|
|
|
4
4
|
title: grid-wrapper
|
|
5
5
|
category: Grid / Repetition
|
|
6
6
|
description: Center grid tracks while allowing full-width breakout tracks.
|
|
7
|
+
aliases: ["full bleed breakout","full-width breakout","풀 블리드","전체 폭 확장"]
|
|
7
8
|
primary_spatial_problem: Center grid tracks while allowing full-width breakout tracks.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: masonry-approx
|
|
|
4
4
|
title: masonry-approx
|
|
5
5
|
category: Grid / Repetition
|
|
6
6
|
description: Approximate staggered content with columns when exact row alignment is not needed.
|
|
7
|
+
aliases: ["masonry","pinterest style","staggered layout","메이슨리","핀터레스트 스타일"]
|
|
7
8
|
primary_spatial_problem: Approximate staggered content with columns when exact row alignment is not needed.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: block
|
|
@@ -4,6 +4,7 @@ name: page-grid
|
|
|
4
4
|
title: page-grid
|
|
5
5
|
category: Grid / Repetition
|
|
6
6
|
description: Align page content to margins, gutters, and a central track.
|
|
7
|
+
aliases: ["page margins and gutters","central content track","페이지 그리드"]
|
|
7
8
|
primary_spatial_problem: Align page content to margins, gutters, and a central track.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,8 @@ name: ram-grid
|
|
|
4
4
|
title: ram-grid
|
|
5
5
|
category: Grid / Repetition
|
|
6
6
|
description: Repeat items into as many useful columns as space allows.
|
|
7
|
+
aliases: ["repeat auto-fit minmax","responsive grid without media queries","auto-fit grid","반응형 그리드","반응형 카드 그리드"]
|
|
8
|
+
questions: ["How do I make a grid that fits as many columns as space allows without media queries?"]
|
|
7
9
|
primary_spatial_problem: Repeat items into as many useful columns as space allows.
|
|
8
10
|
secondary_spatial_problems: none
|
|
9
11
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: twelve-span-grid
|
|
|
4
4
|
title: twelve-span-grid
|
|
5
5
|
category: Grid / Repetition
|
|
6
6
|
description: Provide a twelve-column placement scaffold.
|
|
7
|
+
aliases: ["12 column grid","twelve column layout","12단 그리드"]
|
|
7
8
|
primary_spatial_problem: Provide a twelve-column placement scaffold.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: badge-list
|
|
|
4
4
|
title: badge-list
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Align item labels with trailing counts.
|
|
7
|
+
aliases: ["tags with counts","labels with trailing counts","배지 목록","개수 표시 목록"]
|
|
7
8
|
primary_spatial_problem: Align item labels with trailing counts.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: breadcrumb
|
|
|
4
4
|
title: breadcrumb
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Lay out hierarchy links compactly with wrapping.
|
|
7
|
+
aliases: ["breadcrumbs","hierarchy links","브레드크럼","경로 표시"]
|
|
7
8
|
primary_spatial_problem: Lay out hierarchy links compactly with wrapping.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: cluster
|
|
|
4
4
|
title: cluster
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Keep related items together while allowing wrapping.
|
|
7
|
+
aliases: ["inline group that wraps","tag group","항목 묶음","줄바꿈 그룹"]
|
|
7
8
|
primary_spatial_problem: Keep related items together while allowing wrapping.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: deconstructed-pancake
|
|
|
4
4
|
title: deconstructed-pancake
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Let equal cards stretch in a row and stack naturally when narrow.
|
|
7
|
+
aliases: ["cards stretch then stack","flex wrap cards","카드 가로 배치 후 세로 쌓기"]
|
|
7
8
|
primary_spatial_problem: Let equal cards stretch in a row and stack naturally when narrow.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: pagination
|
|
|
4
4
|
title: pagination
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Lay out page controls as a bounded wrapping row.
|
|
7
|
+
aliases: ["page numbers","page controls","페이지네이션","페이지 번호"]
|
|
7
8
|
primary_spatial_problem: Lay out page controls as a bounded wrapping row.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,8 @@ name: reel
|
|
|
4
4
|
title: reel
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Let a row scroll horizontally instead of wrapping.
|
|
7
|
+
aliases: ["horizontal scroll row","carousel row","scrollable row","가로 스크롤","가로 스크롤 목록"]
|
|
8
|
+
questions: ["How do I make a row scroll horizontally instead of wrapping?"]
|
|
7
9
|
primary_spatial_problem: Let a row scroll horizontally instead of wrapping.
|
|
8
10
|
secondary_spatial_problems: none
|
|
9
11
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: split-nav
|
|
|
4
4
|
title: split-nav
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Separate primary and secondary nav actions in one row.
|
|
7
|
+
aliases: ["navbar with left and right items","primary and secondary nav","내비게이션 바","좌우 분리 내비게이션"]
|
|
7
8
|
primary_spatial_problem: Separate primary and secondary nav actions in one row.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: tab-strip
|
|
|
4
4
|
title: tab-strip
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Keep peer tabs in one stable row that can wrap.
|
|
7
|
+
aliases: ["tabs row","tab bar","탭 바","탭 메뉴"]
|
|
7
8
|
primary_spatial_problem: Keep peer tabs in one stable row that can wrap.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: wrap-row
|
|
|
4
4
|
title: wrap-row
|
|
5
5
|
category: In-line grouping
|
|
6
6
|
description: Wrap controls into rows with stable gaps.
|
|
7
|
+
aliases: ["wrapping toolbar","button row that wraps","버튼 줄바꿈"]
|
|
7
8
|
primary_spatial_problem: Wrap controls into rows with stable gaps.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,8 @@ name: frame
|
|
|
4
4
|
title: frame
|
|
5
5
|
category: Media / Fit
|
|
6
6
|
description: Preserve media aspect ratio in a responsive slot.
|
|
7
|
+
aliases: ["aspect ratio box","responsive image slot","object-fit","이미지 비율 유지","종횡비"]
|
|
8
|
+
questions: ["How do I keep media at a fixed aspect ratio?"]
|
|
7
9
|
primary_spatial_problem: Preserve media aspect ratio in a responsive slot.
|
|
8
10
|
secondary_spatial_problems: none
|
|
9
11
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: icon-frame
|
|
|
4
4
|
title: icon-frame
|
|
5
5
|
category: Media / Fit
|
|
6
6
|
description: Keep an icon aligned inside a fixed square slot.
|
|
7
|
+
aliases: ["icon slot","square icon box","아이콘 정렬"]
|
|
7
8
|
primary_spatial_problem: Keep an icon aligned inside a fixed square slot.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: imposter
|
|
|
4
4
|
title: imposter
|
|
5
5
|
category: Overlay / Exception
|
|
6
6
|
description: Place an overlay region over a parent without changing document order.
|
|
7
|
+
aliases: ["overlay over parent","positioned overlay","modal over card","오버레이","겹쳐 띄우기"]
|
|
7
8
|
primary_spatial_problem: Place an overlay region over a parent without changing document order.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: overlay-stack
|
|
|
4
4
|
title: overlay-stack
|
|
5
5
|
category: Overlay / Exception
|
|
6
6
|
description: Stack several regions into the same grid cell.
|
|
7
|
+
aliases: ["stack in one grid cell","text over image","겹치는 레이어","이미지 위 텍스트"]
|
|
7
8
|
primary_spatial_problem: Stack several regions into the same grid cell.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: both
|
|
@@ -4,6 +4,7 @@ name: list-detail
|
|
|
4
4
|
title: list-detail
|
|
5
5
|
category: Split / Sidebar
|
|
6
6
|
description: Place an explorable list beside its detail region.
|
|
7
|
+
aliases: ["master detail","list and detail panes","목록 상세","리스트 디테일"]
|
|
7
8
|
primary_spatial_problem: Place an explorable list beside its detail region.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: main-with-rail
|
|
|
4
4
|
title: main-with-rail
|
|
5
5
|
category: Split / Sidebar
|
|
6
6
|
description: Keep primary content dominant with a narrow secondary rail.
|
|
7
|
+
aliases: ["content with right rail","secondary rail","메인과 보조 레일"]
|
|
7
8
|
primary_spatial_problem: Keep primary content dominant with a narrow secondary rail.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: media-object
|
|
|
4
4
|
title: media-object
|
|
5
5
|
category: Split / Sidebar
|
|
6
6
|
description: Align media and descriptive content as a stable pair.
|
|
7
|
+
aliases: ["image beside text","avatar with text","미디어 오브젝트","이미지와 텍스트 나란히"]
|
|
7
8
|
primary_spatial_problem: Align media and descriptive content as a stable pair.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,8 @@ name: sidebar
|
|
|
4
4
|
title: sidebar
|
|
5
5
|
category: Split / Sidebar
|
|
6
6
|
description: Let a narrow sidebar and wider content wrap when space is tight.
|
|
7
|
+
aliases: ["wrapping sidebar","intrinsic sidebar","사이드바","사이드바 레이아웃"]
|
|
8
|
+
questions: ["How do I make a sidebar wrap under the content when space is tight?"]
|
|
7
9
|
primary_spatial_problem: Let a narrow sidebar and wider content wrap when space is tight.
|
|
8
10
|
secondary_spatial_problems: none
|
|
9
11
|
layout_axis: inline
|
|
@@ -4,6 +4,7 @@ name: split-screen
|
|
|
4
4
|
title: split-screen
|
|
5
5
|
category: Split / Sidebar
|
|
6
6
|
description: Split a viewport or region into two balanced panes.
|
|
7
|
+
aliases: ["two column split","50/50 split","화면 분할","2단 분할"]
|
|
7
8
|
primary_spatial_problem: Split a viewport or region into two balanced panes.
|
|
8
9
|
secondary_spatial_problems: none
|
|
9
10
|
layout_axis: inline
|
|
@@ -4,6 +4,8 @@ name: sticky-aside
|
|
|
4
4
|
title: sticky-aside
|
|
5
5
|
category: Split / Sidebar
|
|
6
6
|
description: Keep related aside content visible during long reads.
|
|
7
|
+
aliases: ["sticky sidebar","sticky table of contents","고정 사이드 영역","스티키 사이드바"]
|
|
8
|
+
questions: ["How do I keep an aside visible during long reads?"]
|
|
7
9
|
primary_spatial_problem: Keep related aside content visible during long reads.
|
|
8
10
|
secondary_spatial_problems: none
|
|
9
11
|
layout_axis: block
|