stylegallery 0.1.11 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/AGENTS.md +2 -2
  2. package/DOMAINS.md +1 -1
  3. package/GOVERNANCE.md +2 -2
  4. package/README.md +67 -35
  5. package/consumer-reference/agent-native/README.md +5 -5
  6. package/consumer-reference/agent-native/v2/admission-policy.json +66 -1
  7. package/consumer-reference/agent-native/v2/material-registry.json +1 -1
  8. package/consumer-reference/agent-native/v2/schema/admission-policy.schema.json +2 -2
  9. package/design-engineering/evidence-patterns/autocomplete.md +83 -0
  10. package/design-engineering/evidence-patterns/bottom-navigation.md +78 -0
  11. package/design-engineering/evidence-patterns/breadcrumbs.md +78 -0
  12. package/design-engineering/evidence-patterns/dark-mode-contrast.md +83 -0
  13. package/design-engineering/evidence-patterns/data-tables.md +86 -0
  14. package/design-engineering/evidence-patterns/empty-states.md +80 -0
  15. package/design-engineering/evidence-patterns/error-recovery.md +84 -0
  16. package/design-engineering/evidence-patterns/faceted-filters.md +90 -0
  17. package/design-engineering/evidence-patterns/form-labels.md +82 -0
  18. package/design-engineering/evidence-patterns/index.md +69 -0
  19. package/design-engineering/evidence-patterns/inline-validation.md +94 -0
  20. package/design-engineering/evidence-patterns/input-masks.md +79 -0
  21. package/design-engineering/evidence-patterns/tabs-and-segmented-controls.md +81 -0
  22. package/design-engineering/index.md +17 -0
  23. package/design-engineering/loading-and-feedback.md +29 -1
  24. package/design-engineering/native-interaction-contracts.md +10 -0
  25. package/design-engineering/state-management/patterns/latest-request-wins.md +2 -0
  26. package/design-engineering/state-management/patterns/optimistic-overlay.md +1 -0
  27. package/design-engineering/state-management/patterns/single-flight.md +2 -0
  28. package/design-engineering/state-management/patterns/unsaved-navigation.md +2 -0
  29. package/design-engineering/state-management/patterns/url-state.md +1 -0
  30. package/design-engineering/state-management/recipes/delete-undo.md +7 -0
  31. package/design-engineering/text-input-and-internationalization.md +1 -0
  32. package/expression/directions/nocturne-editorial.md +1 -0
  33. package/expression/directions/warm-print.md +1 -0
  34. package/expression/techniques/gradient-atmosphere.md +1 -0
  35. package/expression/techniques/grain-and-texture.md +1 -0
  36. package/expression/techniques/webgl-hero.md +1 -0
  37. package/guides/decision-tree.md +2 -0
  38. package/guides/webpage-generation-workflow.md +2 -0
  39. package/log.md +22 -0
  40. package/motion/accessible-motion.md +2 -0
  41. package/motion/interruption-and-retargeting.md +2 -0
  42. package/motion/rendering-and-performance.md +1 -0
  43. package/motion/techniques/kinetic-type.md +1 -0
  44. package/motion/techniques/scroll-choreography.md +2 -0
  45. package/package.json +27 -8
  46. package/patterns/centering/center.md +1 -0
  47. package/patterns/centering/super-center.md +2 -0
  48. package/patterns/containment/box.md +1 -0
  49. package/patterns/containment/clamped-card.md +1 -0
  50. package/patterns/containment/content-limiter.md +2 -0
  51. package/patterns/containment/fluid-styles.md +1 -0
  52. package/patterns/grid-repetition/card-grid.md +2 -0
  53. package/patterns/grid-repetition/columns.md +1 -0
  54. package/patterns/grid-repetition/dense-grid.md +1 -0
  55. package/patterns/grid-repetition/grid-wrapper.md +1 -0
  56. package/patterns/grid-repetition/masonry-approx.md +1 -0
  57. package/patterns/grid-repetition/page-grid.md +1 -0
  58. package/patterns/grid-repetition/ram-grid.md +2 -0
  59. package/patterns/grid-repetition/twelve-span-grid.md +1 -0
  60. package/patterns/in-line-grouping/badge-list.md +1 -0
  61. package/patterns/in-line-grouping/breadcrumb.md +1 -0
  62. package/patterns/in-line-grouping/cluster.md +1 -0
  63. package/patterns/in-line-grouping/deconstructed-pancake.md +1 -0
  64. package/patterns/in-line-grouping/pagination.md +1 -0
  65. package/patterns/in-line-grouping/reel.md +2 -0
  66. package/patterns/in-line-grouping/split-nav.md +1 -0
  67. package/patterns/in-line-grouping/tab-strip.md +1 -0
  68. package/patterns/in-line-grouping/wrap-row.md +1 -0
  69. package/patterns/media-fit/frame.md +2 -0
  70. package/patterns/media-fit/icon-frame.md +1 -0
  71. package/patterns/overlay-exception/imposter.md +1 -0
  72. package/patterns/overlay-exception/overlay-stack.md +1 -0
  73. package/patterns/split-sidebar/list-detail.md +1 -0
  74. package/patterns/split-sidebar/main-with-rail.md +1 -0
  75. package/patterns/split-sidebar/media-object.md +1 -0
  76. package/patterns/split-sidebar/sidebar.md +2 -0
  77. package/patterns/split-sidebar/split-screen.md +1 -0
  78. package/patterns/split-sidebar/sticky-aside.md +2 -0
  79. package/patterns/split-sidebar/supporting-pane.md +1 -0
  80. package/patterns/split-sidebar/switcher.md +2 -0
  81. package/patterns/stacking/feed.md +1 -0
  82. package/patterns/stacking/line-up.md +2 -0
  83. package/patterns/stacking/stack.md +1 -0
  84. package/patterns/stacking/step-nav.md +1 -0
  85. package/patterns/viewport-shell/cover.md +1 -0
  86. package/patterns/viewport-shell/fixed-sidenav-shell.md +2 -0
  87. package/patterns/viewport-shell/holy-grail.md +2 -0
  88. package/patterns/viewport-shell/panel-layout.md +1 -0
  89. package/patterns/viewport-shell/scroll-body-shell.md +2 -0
  90. package/patterns/viewport-shell/sticky-footer.md +2 -0
  91. package/patterns/viewport-shell/sticky-header.md +2 -0
  92. package/platform-guides/input-and-focus.md +10 -0
  93. package/platform-guides/preferences-and-accessibility.md +1 -0
  94. package/recipes/article-page.md +1 -0
  95. package/recipes/command-surface.md +1 -0
  96. package/recipes/dashboard.md +1 -0
  97. package/recipes/form-flow.md +1 -0
  98. package/recipes/homepage.md +2 -0
  99. package/recipes/list-detail.md +1 -0
  100. package/recipes/saas-settings.md +1 -0
  101. package/scripts/agent-native/v2/material-cli-adapter.mjs +7 -5
  102. package/scripts/agent-native/v2/material-queries.mjs +21 -0
  103. package/scripts/agent-native/v2/material-search-v3.mjs +409 -0
  104. package/scripts/compiler/README.md +16 -16
  105. package/scripts/compiler/mcp.mjs +38 -2
  106. package/scripts/legacy-sg-material-mcp.mjs +9 -0
  107. package/scripts/legacy-sg-material.mjs +4 -0
  108. package/scripts/pattern-data.mjs +409 -0
  109. package/scripts/sg-entry.mjs +2 -2
  110. package/scripts/sg-material-mcp.mjs +1 -1
  111. package/scripts/stylegallery-cli.mjs +130 -0
  112. package/skills/stylegallery-search/SKILL.md +34 -0
@@ -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
@@ -39,6 +40,12 @@ Use pending-until-confirmed deletion by default in this recipe. An optimistic ov
39
40
  | Delete the last row | Show empty state and move focus to a logical heading |
40
41
  | Undo expires or restoration fails | Explain failure and reconcile actual collection state |
41
42
 
43
+ ### Confirmation Versus Reversal
44
+
45
+ [WCAG Error Prevention, SC 3.3.4](https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-legal-financial-data.html) was rechecked 2026-10-19 against the 2024 WCAG 2.2 Recommendation. For its scoped legal/financial, user-controlled stored-data, and test-response submissions, at least one of three conditions applies: reversibility, input checking with correction opportunity, or review/confirmation with correction before finalization. This is a normative alternative set, not a study showing Undo always beats confirmation.
46
+
47
+ Local decision: prefer supported recovery for frequent reversible low-cost actions; use explicit review before genuinely consequential irreversible commitment. Keep the existing backend contract decisive. A five-second toast cannot make an irreversible write reversible, and a confirm dialog cannot establish the accuracy of the submitted snapshot. Test expiry, failed restoration, unknown outcome, and focus after deleting the last item.
48
+
42
49
  ## Opinionated Guidance
43
50
 
44
51
  Keep the ownership boundaries visible when composing the patterns. One screen can combine these mechanisms without making every value global. Record the rejected alternative and its user-visible cost in the [state brief](../state-brief.md).
@@ -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
@@ -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,5 +1,27 @@
1
1
  # StyleGallery Log
2
2
 
3
+ ## 2026-10-19
4
+
5
+ Understood as: release `stylegallery@0.1.13`, which ships the evidence-based UI pattern documents from PR #61 and the README CLI reference from PR #62.
6
+
7
+ - Design Engineering: `design-engineering/evidence-patterns/` adds 12 documents (inline validation, error recovery, form labels, input masks, faceted filters, autocomplete, empty states, data tables, tabs and segmented controls, breadcrumbs, bottom navigation, dark-mode contrast) with 22 cited sources; `loading-and-feedback`, `native-interaction-contracts`, `platform-guides/input-and-focus`, and the `delete-undo` recipe gain evidence sections.
8
+ - Search evaluation: 91 questions, Hit@5 0.978, nDCG@5 0.877, must-pass 35/35.
9
+ - README: a CLI reference under Quick Start lists the agent loop and every command with its options.
10
+
11
+ Consumer reference: not_applicable
12
+ Consumer reference reason: This release adds documentation and selects no consumer-reference profile or record.
13
+
14
+ 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.
15
+
16
+ - 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.
17
+ - 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`.
18
+ - 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.
19
+ - 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.
20
+ - `skills/stylegallery-search/SKILL.md` ships one search how-to skill.
21
+
22
+ Consumer reference: not_applicable
23
+ Consumer reference reason: This change adds retrieval tooling and search metadata and selects no consumer-reference profile or record.
24
+
3
25
  ## 2026-10-16
4
26
 
5
27
  Understood as: release `stylegallery@0.1.11`, the first version published by the Trusted Publishing workflow from PR #57.
@@ -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.11",
3
+ "version": "0.1.13",
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",
@@ -55,6 +55,19 @@
55
55
  "design-engineering/component-contract.md",
56
56
  "design-engineering/consumer-migration-readiness.md",
57
57
  "design-engineering/decision-tree.md",
58
+ "design-engineering/evidence-patterns/autocomplete.md",
59
+ "design-engineering/evidence-patterns/bottom-navigation.md",
60
+ "design-engineering/evidence-patterns/breadcrumbs.md",
61
+ "design-engineering/evidence-patterns/dark-mode-contrast.md",
62
+ "design-engineering/evidence-patterns/data-tables.md",
63
+ "design-engineering/evidence-patterns/empty-states.md",
64
+ "design-engineering/evidence-patterns/error-recovery.md",
65
+ "design-engineering/evidence-patterns/faceted-filters.md",
66
+ "design-engineering/evidence-patterns/form-labels.md",
67
+ "design-engineering/evidence-patterns/index.md",
68
+ "design-engineering/evidence-patterns/inline-validation.md",
69
+ "design-engineering/evidence-patterns/input-masks.md",
70
+ "design-engineering/evidence-patterns/tabs-and-segmented-controls.md",
58
71
  "design-engineering/index.md",
59
72
  "design-engineering/interface-craft.md",
60
73
  "design-engineering/loading-and-feedback.md",
@@ -251,6 +264,7 @@
251
264
  "scripts/agent-native/v2/material-operation-registry.mjs",
252
265
  "scripts/agent-native/v2/material-queries.mjs",
253
266
  "scripts/agent-native/v2/material-registry.mjs",
267
+ "scripts/agent-native/v2/material-search-v3.mjs",
254
268
  "scripts/compiler/README.md",
255
269
  "scripts/compiler/cli.mjs",
256
270
  "scripts/compiler/mcp.mjs",
@@ -258,6 +272,8 @@
258
272
  "scripts/compiler/runtime.mjs",
259
273
  "scripts/conservator-exhibits.mjs",
260
274
  "scripts/conservator.mjs",
275
+ "scripts/legacy-sg-material-mcp.mjs",
276
+ "scripts/legacy-sg-material.mjs",
261
277
  "scripts/markdown-structure.mjs",
262
278
  "scripts/pattern-data.mjs",
263
279
  "scripts/registrar.mjs",
@@ -268,14 +284,15 @@
268
284
  "scripts/sg-server.mjs",
269
285
  "scripts/sg.mjs",
270
286
  "scripts/strict-json.mjs",
271
- "showcase/README.md"
287
+ "scripts/stylegallery-cli.mjs",
288
+ "showcase/README.md",
289
+ "skills/stylegallery-search/SKILL.md"
272
290
  ],
273
291
  "bin": {
274
- "sg": "scripts/sg-entry.mjs",
275
- "sg-material": "scripts/sg-material.mjs",
292
+ "sg-material": "scripts/legacy-sg-material.mjs",
276
293
  "stylegallery": "scripts/sg-entry.mjs",
277
- "stylegallery-material": "scripts/sg-material.mjs",
278
- "stylegallery-material-mcp": "scripts/sg-material-mcp.mjs",
294
+ "stylegallery-material": "scripts/legacy-sg-material.mjs",
295
+ "stylegallery-material-mcp": "scripts/legacy-sg-material-mcp.mjs",
279
296
  "stylegallery-mcp": "scripts/sg-server.mjs"
280
297
  },
281
298
  "publishConfig": {
@@ -301,7 +318,6 @@
301
318
  "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
319
  "test:lifecycle-dispositions": "node scripts/test-lifecycle-disposition.mjs",
303
320
  "validate:lifecycle-dispositions": "node scripts/validate-lifecycle-disposition.mjs --json",
304
- "sg": "node scripts/sg-entry.mjs",
305
321
  "sg:material": "node scripts/sg-material.mjs",
306
322
  "sg:material:mcp": "node scripts/sg-material-mcp.mjs",
307
323
  "sg:mcp": "node scripts/sg-server.mjs",
@@ -318,7 +334,10 @@
318
334
  "showcase:serve": "node scripts/serve-showcase.mjs",
319
335
  "test:compiler": "node --test scripts/test-sg-compiler.mjs",
320
336
  "sg:v1": "node scripts/sg.mjs",
321
- "sg:mcp:v1": "node scripts/sg-mcp.mjs"
337
+ "sg:mcp:v1": "node scripts/sg-mcp.mjs",
338
+ "stylegallery": "node scripts/sg-entry.mjs",
339
+ "test:search": "node --test scripts/test-stylegallery-search.mjs",
340
+ "eval:search": "node scripts/search-eval.mjs --gate"
322
341
  },
323
342
  "devDependencies": {
324
343
  "@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
@@ -4,6 +4,7 @@ name: supporting-pane
4
4
  title: supporting-pane
5
5
  category: Split / Sidebar
6
6
  description: Keep supplemental information beside a primary task.
7
+ aliases: ["supporting panel","보조 패널"]
7
8
  primary_spatial_problem: Keep supplemental information beside a primary task.
8
9
  secondary_spatial_problems: none
9
10
  layout_axis: inline
@@ -4,6 +4,8 @@ name: switcher
4
4
  title: switcher
5
5
  category: Split / Sidebar
6
6
  description: Switch equal regions from row to stack without a viewport breakpoint.
7
+ aliases: ["row to stack without media query","flex switcher","가로 세로 전환"]
8
+ questions: ["How do I switch equal regions from a row to a stack without a breakpoint?"]
7
9
  primary_spatial_problem: Switch equal regions from row to stack without a viewport breakpoint.
8
10
  secondary_spatial_problems: none
9
11
  layout_axis: inline
@@ -4,6 +4,7 @@ name: feed
4
4
  title: feed
5
5
  category: Stacking
6
6
  description: Stack repeated content items with stable rhythm.
7
+ aliases: ["content feed","activity feed","피드"]
7
8
  primary_spatial_problem: Stack repeated content items with stable rhythm.
8
9
  secondary_spatial_problems: none
9
10
  layout_axis: block
@@ -4,6 +4,8 @@ name: line-up
4
4
  title: line-up
5
5
  category: Stacking
6
6
  description: Keep card footer actions aligned at the bottom.
7
+ aliases: ["equal height cards","buttons aligned at bottom","card footer alignment","카드 버튼 하단 정렬"]
8
+ questions: ["How do I align card footer actions at the bottom?"]
7
9
  primary_spatial_problem: Keep card footer actions aligned at the bottom.
8
10
  secondary_spatial_problems: none
9
11
  layout_axis: block