stylegallery 0.1.11 → 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.
Files changed (94) hide show
  1. package/AGENTS.md +2 -2
  2. package/GOVERNANCE.md +1 -1
  3. package/README.md +28 -35
  4. package/consumer-reference/agent-native/README.md +5 -5
  5. package/consumer-reference/agent-native/v2/material-registry.json +1 -1
  6. package/design-engineering/loading-and-feedback.md +1 -0
  7. package/design-engineering/native-interaction-contracts.md +2 -0
  8. package/design-engineering/state-management/patterns/latest-request-wins.md +2 -0
  9. package/design-engineering/state-management/patterns/optimistic-overlay.md +1 -0
  10. package/design-engineering/state-management/patterns/single-flight.md +2 -0
  11. package/design-engineering/state-management/patterns/unsaved-navigation.md +2 -0
  12. package/design-engineering/state-management/patterns/url-state.md +1 -0
  13. package/design-engineering/state-management/recipes/delete-undo.md +1 -0
  14. package/design-engineering/text-input-and-internationalization.md +1 -0
  15. package/expression/directions/nocturne-editorial.md +1 -0
  16. package/expression/directions/warm-print.md +1 -0
  17. package/expression/techniques/gradient-atmosphere.md +1 -0
  18. package/expression/techniques/grain-and-texture.md +1 -0
  19. package/expression/techniques/webgl-hero.md +1 -0
  20. package/guides/decision-tree.md +2 -0
  21. package/guides/webpage-generation-workflow.md +2 -0
  22. package/log.md +13 -0
  23. package/motion/accessible-motion.md +2 -0
  24. package/motion/interruption-and-retargeting.md +2 -0
  25. package/motion/rendering-and-performance.md +1 -0
  26. package/motion/techniques/kinetic-type.md +1 -0
  27. package/motion/techniques/scroll-choreography.md +2 -0
  28. package/package.json +14 -8
  29. package/patterns/centering/center.md +1 -0
  30. package/patterns/centering/super-center.md +2 -0
  31. package/patterns/containment/box.md +1 -0
  32. package/patterns/containment/clamped-card.md +1 -0
  33. package/patterns/containment/content-limiter.md +2 -0
  34. package/patterns/containment/fluid-styles.md +1 -0
  35. package/patterns/grid-repetition/card-grid.md +2 -0
  36. package/patterns/grid-repetition/columns.md +1 -0
  37. package/patterns/grid-repetition/dense-grid.md +1 -0
  38. package/patterns/grid-repetition/grid-wrapper.md +1 -0
  39. package/patterns/grid-repetition/masonry-approx.md +1 -0
  40. package/patterns/grid-repetition/page-grid.md +1 -0
  41. package/patterns/grid-repetition/ram-grid.md +2 -0
  42. package/patterns/grid-repetition/twelve-span-grid.md +1 -0
  43. package/patterns/in-line-grouping/badge-list.md +1 -0
  44. package/patterns/in-line-grouping/breadcrumb.md +1 -0
  45. package/patterns/in-line-grouping/cluster.md +1 -0
  46. package/patterns/in-line-grouping/deconstructed-pancake.md +1 -0
  47. package/patterns/in-line-grouping/pagination.md +1 -0
  48. package/patterns/in-line-grouping/reel.md +2 -0
  49. package/patterns/in-line-grouping/split-nav.md +1 -0
  50. package/patterns/in-line-grouping/tab-strip.md +1 -0
  51. package/patterns/in-line-grouping/wrap-row.md +1 -0
  52. package/patterns/media-fit/frame.md +2 -0
  53. package/patterns/media-fit/icon-frame.md +1 -0
  54. package/patterns/overlay-exception/imposter.md +1 -0
  55. package/patterns/overlay-exception/overlay-stack.md +1 -0
  56. package/patterns/split-sidebar/list-detail.md +1 -0
  57. package/patterns/split-sidebar/main-with-rail.md +1 -0
  58. package/patterns/split-sidebar/media-object.md +1 -0
  59. package/patterns/split-sidebar/sidebar.md +2 -0
  60. package/patterns/split-sidebar/split-screen.md +1 -0
  61. package/patterns/split-sidebar/sticky-aside.md +2 -0
  62. package/patterns/split-sidebar/supporting-pane.md +1 -0
  63. package/patterns/split-sidebar/switcher.md +2 -0
  64. package/patterns/stacking/feed.md +1 -0
  65. package/patterns/stacking/line-up.md +2 -0
  66. package/patterns/stacking/stack.md +1 -0
  67. package/patterns/stacking/step-nav.md +1 -0
  68. package/patterns/viewport-shell/cover.md +1 -0
  69. package/patterns/viewport-shell/fixed-sidenav-shell.md +2 -0
  70. package/patterns/viewport-shell/holy-grail.md +2 -0
  71. package/patterns/viewport-shell/panel-layout.md +1 -0
  72. package/patterns/viewport-shell/scroll-body-shell.md +2 -0
  73. package/patterns/viewport-shell/sticky-footer.md +2 -0
  74. package/patterns/viewport-shell/sticky-header.md +2 -0
  75. package/platform-guides/preferences-and-accessibility.md +1 -0
  76. package/recipes/article-page.md +1 -0
  77. package/recipes/command-surface.md +1 -0
  78. package/recipes/dashboard.md +1 -0
  79. package/recipes/form-flow.md +1 -0
  80. package/recipes/homepage.md +2 -0
  81. package/recipes/list-detail.md +1 -0
  82. package/recipes/saas-settings.md +1 -0
  83. package/scripts/agent-native/v2/material-cli-adapter.mjs +7 -5
  84. package/scripts/agent-native/v2/material-queries.mjs +21 -0
  85. package/scripts/agent-native/v2/material-search-v3.mjs +409 -0
  86. package/scripts/compiler/README.md +16 -16
  87. package/scripts/compiler/mcp.mjs +38 -2
  88. package/scripts/legacy-sg-material-mcp.mjs +9 -0
  89. package/scripts/legacy-sg-material.mjs +4 -0
  90. package/scripts/pattern-data.mjs +409 -0
  91. package/scripts/sg-entry.mjs +2 -2
  92. package/scripts/sg-material-mcp.mjs +1 -1
  93. package/scripts/stylegallery-cli.mjs +130 -0
  94. package/skills/stylegallery-search/SKILL.md +34 -0
@@ -8,11 +8,11 @@ description: Run a separately installed website compiler through the SG CLI and
8
8
 
9
9
  Primary role: compiler setup and execution reference.
10
10
 
11
- Use `sg compile`, `sg timeline`, and the other commands below directly. The `stylegallery-mcp` server exposes the same names alongside `discover`, `resolve`, `claims`, `context`, `ops`, and `retrieve`. Compiler operations can write files, open websites, and invoke a model; each tool declares those effects. The original [v1 knowledge interface](../../consumer-reference/agent-native/README.md) remains available separately.
11
+ Use `stylegallery compile`, `stylegallery timeline`, and the other commands below directly. The `stylegallery-mcp` server exposes the same names alongside `discover`, `resolve`, `claims`, `context`, `ops`, and `retrieve`. Compiler operations can write files, open websites, and invoke a model; each tool declares those effects. The original [v1 knowledge interface](../../consumer-reference/agent-native/README.md) remains available separately.
12
12
 
13
13
  ## Setup
14
14
 
15
- Install StyleGallery with Node.js 22 or newer using `npm install --global stylegallery`. For an unreleased StyleGallery checkout, run commands from that checkout as `bun run sg -- <command>` instead. If another program already owns the `sg` command, use the equivalent `stylegallery` executable or the npm script. The compiler is a [separate private repository](https://github.com/changeroa/site-compiler); an account with access must install it once:
15
+ Install StyleGallery with Node.js 22 or newer using `npm install --global stylegallery`. For an unreleased StyleGallery checkout, run commands from that checkout as `bun run stylegallery -- <command>` instead. The compiler is a [separate private repository](https://github.com/changeroa/site-compiler); an account with access must install it once:
16
16
 
17
17
  ```sh
18
18
  gh repo clone changeroa/site-compiler /absolute/path/to/site-compiler
@@ -20,32 +20,32 @@ cd /absolute/path/to/site-compiler
20
20
  bun install --frozen-lockfile --ignore-scripts
21
21
  bunx playwright install chromium
22
22
  export SG_COMPILER_ROOT=/absolute/path/to/site-compiler
23
- sg discover --format json
23
+ stylegallery discover --format json
24
24
  ```
25
25
 
26
26
  Set `SG_COMPILER_ROOT` in your shell profile for CLI use and in your MCP server environment for MCP use. A CLI invocation can override it with `--compiler-root /absolute/path/to/site-compiler`. `discover` preserves the knowledge response and adds a top-level `compiler` object containing installation status, the actual Git revision, tracked changes, and available operations. Missing compiler setup leaves knowledge queries usable.
27
27
 
28
- The verified upstream revision is declared in [scripts/compiler/operations.mjs](operations.mjs). `matches_verified_revision` is true only for that revision without tracked modifications; a mismatch is reported but does not block execution. Use that revision when reproducing the verified workflow. To use a newer upstream version, update your compiler checkout with `git pull --ff-only` and `npm ci`, then inspect `sg discover` and `sg workflow`; SG does not fetch or upgrade code during a tool call. The compiler source, browser binaries, captured frames, and private pack data are not included in the StyleGallery npm package.
28
+ The verified upstream revision is declared in [scripts/compiler/operations.mjs](operations.mjs). `matches_verified_revision` is true only for that revision without tracked modifications; a mismatch is reported but does not block execution. Use that revision when reproducing the verified workflow. To use a newer upstream version, update your compiler checkout with `git pull --ff-only` and `npm ci`, then inspect `stylegallery discover` and `stylegallery workflow`; SG does not fetch or upgrade code during a tool call. The compiler source, browser binaries, captured frames, and private pack data are not included in the StyleGallery npm package.
29
29
 
30
30
  ## CLI
31
31
 
32
32
  Run these from the consumer project's working directory:
33
33
 
34
34
  ```sh
35
- sg workflow
36
- sg workflow --document readme
37
- sg compile --url https://example.com --out ./captures/example
38
- sg timeline --url https://example.com --out ./captures/example --step 500 --grow
39
- sg transcribe --in ./captures --only example
40
- sg sale --in ./captures/example --out ./captures/example/sale
41
- sg gate --in ./captures/example --sale ./captures/example/sale --json ./captures/example/qa-report.json
42
- sg build --packs ./captures --out ./builds --only example
43
- sg shots --builds ./builds --slug example
35
+ stylegallery workflow
36
+ stylegallery workflow --document readme
37
+ stylegallery compile --url https://example.com --out ./captures/example
38
+ stylegallery timeline --url https://example.com --out ./captures/example --step 500 --grow
39
+ stylegallery transcribe --in ./captures --only example
40
+ stylegallery sale --in ./captures/example --out ./captures/example/sale
41
+ stylegallery gate --in ./captures/example --sale ./captures/example/sale --json ./captures/example/qa-report.json
42
+ stylegallery build --packs ./captures --out ./builds --only example
43
+ stylegallery shots --builds ./builds --slug example
44
44
  ```
45
45
 
46
46
  `compile` captures scenes and frames; it does not produce a SceneBook by itself. A SceneBook describes scene geometry and content; its Timeline companion describes observed scroll behavior. `transcribe` produces these documents. Transcription and the optional sale-preview builder require an installed, authenticated `claude` CLI and can incur model usage. Their input roots contain one subdirectory per pack. Supply `--stylegallery` only when a different SG corpus should be used; the installed StyleGallery package is the default.
47
47
 
48
- Read `sg workflow` before selecting stages. Its installed compiler document owns the task policy: faithful reconstruction, adaptation for a new design, or sale-package production. These are task purposes, not CLI flags. Reconstruction uses available source media and direct observation to fill document gaps; the current implementation agent remains the builder. A media record carries source URLs, responsive variants, reuse or replacement decisions, and playback checks separately from the observation document.
48
+ Read `stylegallery workflow` before selecting stages. Its installed compiler document owns the task policy: faithful reconstruction, adaptation for a new design, or sale-package production. These are task purposes, not CLI flags. Reconstruction uses available source media and direct observation to fill document gaps; the current implementation agent remains the builder. A media record carries source URLs, responsive variants, reuse or replacement decisions, and playback checks separately from the observation document.
49
49
 
50
50
  `sale` replaces observed copy with structural descriptors. `build` consumes only those sale editions and intentionally restricts original-page and external-media access. It is a package preview, not the faithful-reconstruction route. Use sale, build, and release operations when that package purpose is requested. A document-only evaluation is an explicit experiment, not the default website workflow. The SG skill only retrieves this workflow; it does not duplicate these policies.
51
51
 
@@ -70,7 +70,7 @@ By default, `sale` writes its private audit to `copy-audit.private.json` in the
70
70
 
71
71
  All CLI results are one JSON envelope on stdout, including failures. Child logs are returned in `result.stdout` and `result.stderr`, with a 64 KiB tail per stream and truncation flags. Relative path options resolve from the caller's working directory; upstream scripts execute from the compiler checkout. `pack-release` is the upstream exception with fixed checkout-relative directories, and produces local archives without publishing them.
72
72
 
73
- Use `sg discover` or `sg ops` for the full input schemas. CLI options use hyphens (`--max-height`); MCP inputs use underscores (`max_height`). Unknown options, repeated CLI options, missing required paths, and invalid numeric values fail before execution. `--format json` is optional. `--runner-timeout-ms` bounds the entire process tree, defaults to 30 minutes, and accepts up to six hours; `--timeout-ms` on model operations instead controls upstream per-job timeouts. Interrupting the CLI or cancelling an MCP request terminates its running process tree.
73
+ Use `stylegallery discover` or `stylegallery ops` for the full input schemas. CLI options use hyphens (`--max-height`); MCP inputs use underscores (`max_height`). Unknown options, repeated CLI options, missing required paths, and invalid numeric values fail before execution. `--format json` is optional. `--runner-timeout-ms` bounds the entire process tree, defaults to 30 minutes, and accepts up to six hours; `--timeout-ms` on model operations instead controls upstream per-job timeouts. Interrupting the CLI or cancelling an MCP request terminates its running process tree.
74
74
 
75
75
  `ok` reports process success. Batch scripts can exit zero with failed individual jobs: use the returned ledger path to inspect each pack. A gate pass is an upstream consistency check, not SG conformance, accessibility proof, or rights clearance. Each result records the compiler revision, tracked-change status, executed script hash, and normalized arguments. Captures and generated documents remain consumer-owned outputs and are not admitted to the governed material registry.
76
76
 
@@ -90,7 +90,7 @@ Use `sg discover` or `sg ops` for the full input schemas. CLI options use hyphen
90
90
 
91
91
  Call `compile` with `{"url":"https://example.com","out":"/absolute/path/to/captures/example"}` or `gate` with `{"in":"/absolute/path/to/captures/example"}`. Prefer absolute paths because the MCP client's launch directory may differ from your terminal. Long captures require a client request timeout longer than the capture; the runner's timeout does not change client settings. `workflow` and the knowledge tools are read-only; execution tools are marked as potentially destructive and non-idempotent because existing artifacts may be replaced.
92
92
 
93
- From the StyleGallery checkout, use `bun run sg -- compile ...` and `bun run sg:mcp` for local development. To connect an MCP client to that unreleased checkout, use `"command": "node"` and `"args": ["/absolute/path/to/StyleGallery/scripts/sg-server.mjs"]` with the same environment settings. The frozen six-tool v1 server is `bun run sg:mcp:v1`, and its CLI is `bun run sg:v1 -- ...`.
93
+ From the StyleGallery checkout, use `bun run stylegallery -- compile ...` and `bun run sg:mcp` for local development. To connect an MCP client to that unreleased checkout, use `"command": "node"` and `"args": ["/absolute/path/to/StyleGallery/scripts/sg-server.mjs"]` with the same environment settings. The frozen six-tool v1 server is `bun run sg:mcp:v1`, and its CLI is `bun run sg:v1 -- ...`.
94
94
 
95
95
  ## Contracts And Verification
96
96
 
@@ -6,6 +6,40 @@ import { agentNativeRegistry } from "../agent-native/registry.mjs";
6
6
  import { compilerOperations, compilerToolDefinitions } from "./operations.mjs";
7
7
  import { withCompilerDiscovery } from "./cli.mjs";
8
8
  import { executeCompiler, failure } from "./runtime.mjs";
9
+ import { materialRuntimeOptions } from "../agent-native/v2/material-cli-adapter.mjs";
10
+ import { invokeSearchOperation } from "../agent-native/v2/material-search-v3.mjs";
11
+
12
+ const readOnly = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
13
+ export const searchToolDefinitions = Object.freeze([
14
+ {
15
+ name: "search",
16
+ description: "Search the StyleGallery Markdown corpus (layout patterns, recipes, motion, design engineering, platform guides, terminology, expression). Offline BM25F ranking. Returns light results: id, path, title, description, a verbatim snippet, and the next read command. When the question is not in English, also pass query_en with an English rewrite; Korean-only queries match only documents with Korean aliases.",
17
+ inputSchema: {
18
+ type: "object", additionalProperties: false, required: ["query"],
19
+ properties: {
20
+ query: { type: "string", description: "The question or keywords, in any language." },
21
+ query_en: { type: "string", description: "English rewrite of query. Strongly recommended when query is not English." },
22
+ limit: { type: "integer", minimum: 1, maximum: 50, default: 5 },
23
+ paths_only: { type: "boolean", description: "Return repository-relative paths only." },
24
+ response_format: { type: "string", enum: ["concise", "detailed"], default: "concise", description: "detailed adds scores, hash identities, and ranking terms." },
25
+ },
26
+ },
27
+ annotations: readOnly,
28
+ },
29
+ {
30
+ name: "read",
31
+ description: "Read one StyleGallery document by id (for example sg:layout/sticky-header), repository path, or StableRef. Use outline to list section slugs, then section to read only that part.",
32
+ inputSchema: {
33
+ type: "object", additionalProperties: false, required: ["reference"],
34
+ properties: {
35
+ reference: { type: "string" },
36
+ outline: { type: "boolean" },
37
+ section: { type: "string", description: "Heading slug from outline." },
38
+ },
39
+ },
40
+ annotations: readOnly,
41
+ },
42
+ ]);
9
43
 
10
44
  // Compose at the transport boundary. The byte-frozen v1 server, registry,
11
45
  // conformance receipts, and resources remain independently usable.
@@ -28,7 +62,7 @@ export function createSgMcpServer(config = {}) {
28
62
  };
29
63
  });
30
64
  server.server.setRequestHandler(ListToolsRequestSchema, async () => ({
31
- tools: [...legacyTools, ...compilerToolDefinitions()].sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0),
65
+ tools: [...legacyTools, ...compilerToolDefinitions(), ...searchToolDefinitions].sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0),
32
66
  }));
33
67
  const callSchema = CallToolRequestSchema.extend({
34
68
  params: CallToolRequestSchema.shape.params.extend({ arguments: z.unknown().optional() }),
@@ -37,7 +71,9 @@ export function createSgMcpServer(config = {}) {
37
71
  const operation = request.params.name;
38
72
  let input = request.params.arguments ?? {};
39
73
  let report;
40
- if (Object.hasOwn(compilerOperations, operation) || operation === "workflow") {
74
+ if (operation === "search" || operation === "read") {
75
+ report = invokeSearchOperation(operation, input, materialRuntimeOptions());
76
+ } else if (Object.hasOwn(compilerOperations, operation) || operation === "workflow") {
41
77
  const signals = [lifetime.signal, extra.signal, config.signal].filter(Boolean);
42
78
  report = await executeCompiler(operation, input, { ...config, signal: AbortSignal.any(signals) });
43
79
  } else if (legacyByName.has(operation)) {
@@ -0,0 +1,9 @@
1
+ #!/usr/bin/env node
2
+ // Old bin name `stylegallery-material-mcp`: notice on stderr, then serve unchanged for 0.1.12 only.
3
+ import { main } from "./sg-material-mcp.mjs";
4
+
5
+ process.stderr.write("stylegallery-material-mcp is renamed: use stylegallery-mcp (tools: search, read). This old name will be removed in the next release.\n");
6
+ await main().catch((error) => {
7
+ process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
8
+ process.exitCode = 1;
9
+ });
@@ -0,0 +1,4 @@
1
+ #!/usr/bin/env node
2
+ // Old bin names `sg-material` and `stylegallery-material`: notice, then delegate for 0.1.12 only.
3
+ process.stderr.write("sg-material is renamed to `stylegallery` (stylegallery search, stylegallery read, stylegallery context --query). This old name will be removed in the next release.\n");
4
+ await import("./sg-material.mjs");
@@ -323,3 +323,412 @@ export const patterns = [
323
323
  ["masonry-approx", "Grid / Repetition", "Approximate staggered content with columns when exact row alignment is not needed.", "block", "fluid", sources.mdnCookbook, [[".masonry_approx", { "column-gap": "1rem", "column-width": "14rem" }]]],
324
324
  ["main-with-rail", "Split / Sidebar", "Keep primary content dominant with a narrow secondary rail.", "inline", "reflow", sources.govukLayout, [[".main_with_rail", { display: "grid", gap: "1rem", "grid-template-columns": "repeat(auto-fit, minmax(min(18rem, 100%), 1fr))" }], [".main_with_rail_main", { "min-inline-size": "0" }], [".main_with_rail_side", { "min-inline-size": "0" }]]],
325
325
  ];
326
+
327
+ // Search-only metadata: English and Korean names an agent may use for each pattern,
328
+ // and questions the pattern's sections answer. Emitted as frontmatter aliases/questions.
329
+ export const searchMetadata = {
330
+ "sticky-header": {
331
+ "aliases": [
332
+ "pinned top bar",
333
+ "sticky top navigation",
334
+ "헤더 고정",
335
+ "고정 헤더",
336
+ "상단 고정 메뉴"
337
+ ],
338
+ "questions": [
339
+ "How do I keep the header visible while the page scrolls?"
340
+ ]
341
+ },
342
+ "sticky-footer": {
343
+ "aliases": [
344
+ "footer at bottom",
345
+ "push footer down",
346
+ "푸터 고정",
347
+ "하단 푸터",
348
+ "푸터를 화면 아래에 붙이기"
349
+ ],
350
+ "questions": [
351
+ "How do I keep the footer at the bottom when content is short?"
352
+ ]
353
+ },
354
+ "scroll-body-shell": {
355
+ "aliases": [
356
+ "fixed header and footer with scrolling body",
357
+ "app shell",
358
+ "스크롤 영역",
359
+ "본문만 스크롤"
360
+ ],
361
+ "questions": [
362
+ "How do I make only the body scroll between a fixed header and footer?"
363
+ ]
364
+ },
365
+ "fixed-sidenav-shell": {
366
+ "aliases": [
367
+ "fixed side navigation",
368
+ "sidenav shell",
369
+ "고정 사이드 내비게이션",
370
+ "사이드바 레이아웃",
371
+ "고정 사이드바"
372
+ ],
373
+ "questions": [
374
+ "How do I keep side navigation fixed while the main content scrolls?"
375
+ ]
376
+ },
377
+ "holy-grail": {
378
+ "aliases": [
379
+ "header footer two sidebars",
380
+ "three column page layout",
381
+ "홀리 그레일 레이아웃",
382
+ "3단 레이아웃"
383
+ ],
384
+ "questions": [
385
+ "How do I lay out a header, footer, two sidebars, and main content?"
386
+ ]
387
+ },
388
+ "cover": {
389
+ "aliases": [
390
+ "full height hero",
391
+ "vertically centered hero",
392
+ "커버 레이아웃",
393
+ "전체 높이 히어로"
394
+ ]
395
+ },
396
+ "panel-layout": {
397
+ "aliases": [
398
+ "main and utility panels",
399
+ "패널 레이아웃"
400
+ ]
401
+ },
402
+ "sidebar": {
403
+ "aliases": [
404
+ "wrapping sidebar",
405
+ "intrinsic sidebar",
406
+ "사이드바",
407
+ "사이드바 레이아웃"
408
+ ],
409
+ "questions": [
410
+ "How do I make a sidebar wrap under the content when space is tight?"
411
+ ]
412
+ },
413
+ "sticky-aside": {
414
+ "aliases": [
415
+ "sticky sidebar",
416
+ "sticky table of contents",
417
+ "고정 사이드 영역",
418
+ "스티키 사이드바"
419
+ ],
420
+ "questions": [
421
+ "How do I keep an aside visible during long reads?"
422
+ ]
423
+ },
424
+ "switcher": {
425
+ "aliases": [
426
+ "row to stack without media query",
427
+ "flex switcher",
428
+ "가로 세로 전환"
429
+ ],
430
+ "questions": [
431
+ "How do I switch equal regions from a row to a stack without a breakpoint?"
432
+ ]
433
+ },
434
+ "list-detail": {
435
+ "aliases": [
436
+ "master detail",
437
+ "list and detail panes",
438
+ "목록 상세",
439
+ "리스트 디테일"
440
+ ]
441
+ },
442
+ "split-screen": {
443
+ "aliases": [
444
+ "two column split",
445
+ "50/50 split",
446
+ "화면 분할",
447
+ "2단 분할"
448
+ ]
449
+ },
450
+ "main-with-rail": {
451
+ "aliases": [
452
+ "content with right rail",
453
+ "secondary rail",
454
+ "메인과 보조 레일"
455
+ ]
456
+ },
457
+ "media-object": {
458
+ "aliases": [
459
+ "image beside text",
460
+ "avatar with text",
461
+ "미디어 오브젝트",
462
+ "이미지와 텍스트 나란히"
463
+ ]
464
+ },
465
+ "supporting-pane": {
466
+ "aliases": [
467
+ "supporting panel",
468
+ "보조 패널"
469
+ ]
470
+ },
471
+ "ram-grid": {
472
+ "aliases": [
473
+ "repeat auto-fit minmax",
474
+ "responsive grid without media queries",
475
+ "auto-fit grid",
476
+ "반응형 그리드",
477
+ "반응형 카드 그리드"
478
+ ],
479
+ "questions": [
480
+ "How do I make a grid that fits as many columns as space allows without media queries?"
481
+ ]
482
+ },
483
+ "card-grid": {
484
+ "aliases": [
485
+ "responsive card grid",
486
+ "cards in rows and columns",
487
+ "카드 그리드",
488
+ "반응형 카드 그리드",
489
+ "카드 목록"
490
+ ],
491
+ "questions": [
492
+ "How do I align repeating cards into a responsive grid?"
493
+ ]
494
+ },
495
+ "dense-grid": {
496
+ "aliases": [
497
+ "compact grid",
498
+ "grid-auto-flow dense",
499
+ "촘촘한 그리드"
500
+ ]
501
+ },
502
+ "twelve-span-grid": {
503
+ "aliases": [
504
+ "12 column grid",
505
+ "twelve column layout",
506
+ "12단 그리드"
507
+ ]
508
+ },
509
+ "page-grid": {
510
+ "aliases": [
511
+ "page margins and gutters",
512
+ "central content track",
513
+ "페이지 그리드"
514
+ ]
515
+ },
516
+ "grid-wrapper": {
517
+ "aliases": [
518
+ "full bleed breakout",
519
+ "full-width breakout",
520
+ "풀 블리드",
521
+ "전체 폭 확장"
522
+ ]
523
+ },
524
+ "columns": {
525
+ "aliases": [
526
+ "multi-column text",
527
+ "css columns",
528
+ "다단 텍스트"
529
+ ]
530
+ },
531
+ "masonry-approx": {
532
+ "aliases": [
533
+ "masonry",
534
+ "pinterest style",
535
+ "staggered layout",
536
+ "메이슨리",
537
+ "핀터레스트 스타일"
538
+ ]
539
+ },
540
+ "reel": {
541
+ "aliases": [
542
+ "horizontal scroll row",
543
+ "carousel row",
544
+ "scrollable row",
545
+ "가로 스크롤",
546
+ "가로 스크롤 목록"
547
+ ],
548
+ "questions": [
549
+ "How do I make a row scroll horizontally instead of wrapping?"
550
+ ]
551
+ },
552
+ "cluster": {
553
+ "aliases": [
554
+ "inline group that wraps",
555
+ "tag group",
556
+ "항목 묶음",
557
+ "줄바꿈 그룹"
558
+ ]
559
+ },
560
+ "breadcrumb": {
561
+ "aliases": [
562
+ "breadcrumbs",
563
+ "hierarchy links",
564
+ "브레드크럼",
565
+ "경로 표시"
566
+ ]
567
+ },
568
+ "pagination": {
569
+ "aliases": [
570
+ "page numbers",
571
+ "page controls",
572
+ "페이지네이션",
573
+ "페이지 번호"
574
+ ]
575
+ },
576
+ "tab-strip": {
577
+ "aliases": [
578
+ "tabs row",
579
+ "tab bar",
580
+ "탭 바",
581
+ "탭 메뉴"
582
+ ]
583
+ },
584
+ "split-nav": {
585
+ "aliases": [
586
+ "navbar with left and right items",
587
+ "primary and secondary nav",
588
+ "내비게이션 바",
589
+ "좌우 분리 내비게이션"
590
+ ]
591
+ },
592
+ "wrap-row": {
593
+ "aliases": [
594
+ "wrapping toolbar",
595
+ "button row that wraps",
596
+ "버튼 줄바꿈"
597
+ ]
598
+ },
599
+ "badge-list": {
600
+ "aliases": [
601
+ "tags with counts",
602
+ "labels with trailing counts",
603
+ "배지 목록",
604
+ "개수 표시 목록"
605
+ ]
606
+ },
607
+ "deconstructed-pancake": {
608
+ "aliases": [
609
+ "cards stretch then stack",
610
+ "flex wrap cards",
611
+ "카드 가로 배치 후 세로 쌓기"
612
+ ]
613
+ },
614
+ "stack": {
615
+ "aliases": [
616
+ "vertical rhythm",
617
+ "vertical spacing between children",
618
+ "스택",
619
+ "세로 간격"
620
+ ]
621
+ },
622
+ "feed": {
623
+ "aliases": [
624
+ "content feed",
625
+ "activity feed",
626
+ "피드"
627
+ ]
628
+ },
629
+ "line-up": {
630
+ "aliases": [
631
+ "equal height cards",
632
+ "buttons aligned at bottom",
633
+ "card footer alignment",
634
+ "카드 버튼 하단 정렬"
635
+ ],
636
+ "questions": [
637
+ "How do I align card footer actions at the bottom?"
638
+ ]
639
+ },
640
+ "step-nav": {
641
+ "aliases": [
642
+ "stepper",
643
+ "steps list",
644
+ "단계 표시",
645
+ "스텝 내비게이션"
646
+ ]
647
+ },
648
+ "center": {
649
+ "aliases": [
650
+ "center horizontally",
651
+ "max width centered",
652
+ "가운데 정렬",
653
+ "수평 가운데 정렬"
654
+ ]
655
+ },
656
+ "super-center": {
657
+ "aliases": [
658
+ "center horizontally and vertically",
659
+ "center a div",
660
+ "place-items center",
661
+ "가운데 정렬",
662
+ "정중앙 정렬"
663
+ ],
664
+ "questions": [
665
+ "How do I center an element both horizontally and vertically?"
666
+ ]
667
+ },
668
+ "box": {
669
+ "aliases": [
670
+ "padded box",
671
+ "내부 여백 박스"
672
+ ]
673
+ },
674
+ "clamped-card": {
675
+ "aliases": [
676
+ "card max width clamp",
677
+ "카드 폭 제한"
678
+ ]
679
+ },
680
+ "content-limiter": {
681
+ "aliases": [
682
+ "readable line length",
683
+ "max measure",
684
+ "prose width",
685
+ "읽기 좋은 줄 길이",
686
+ "본문 폭 제한"
687
+ ],
688
+ "questions": [
689
+ "How do I keep prose at a readable line length?"
690
+ ]
691
+ },
692
+ "fluid-styles": {
693
+ "aliases": [
694
+ "fluid width with max",
695
+ "유동 폭"
696
+ ]
697
+ },
698
+ "frame": {
699
+ "aliases": [
700
+ "aspect ratio box",
701
+ "responsive image slot",
702
+ "object-fit",
703
+ "이미지 비율 유지",
704
+ "종횡비"
705
+ ],
706
+ "questions": [
707
+ "How do I keep media at a fixed aspect ratio?"
708
+ ]
709
+ },
710
+ "icon-frame": {
711
+ "aliases": [
712
+ "icon slot",
713
+ "square icon box",
714
+ "아이콘 정렬"
715
+ ]
716
+ },
717
+ "imposter": {
718
+ "aliases": [
719
+ "overlay over parent",
720
+ "positioned overlay",
721
+ "modal over card",
722
+ "오버레이",
723
+ "겹쳐 띄우기"
724
+ ]
725
+ },
726
+ "overlay-stack": {
727
+ "aliases": [
728
+ "stack in one grid cell",
729
+ "text over image",
730
+ "겹치는 레이어",
731
+ "이미지 위 텍스트"
732
+ ]
733
+ }
734
+ };
@@ -1,13 +1,13 @@
1
1
  #!/usr/bin/env node
2
2
 
3
3
  try {
4
- const { runSgCli } = await import("./compiler/cli.mjs");
4
+ const { runStylegalleryCli } = await import("./stylegallery-cli.mjs");
5
5
  const controller = new AbortController();
6
6
  const cancel = () => controller.abort();
7
7
  process.once("SIGINT", cancel);
8
8
  process.once("SIGTERM", cancel);
9
9
  try {
10
- const result = await runSgCli(process.argv.slice(2), { signal: controller.signal });
10
+ const result = await runStylegalleryCli(process.argv.slice(2), { signal: controller.signal });
11
11
  process.stdout.write(result.output);
12
12
  process.exitCode = result.exitCode;
13
13
  } finally {
@@ -54,7 +54,7 @@ export class MaterialMcpStdin extends Transform {
54
54
  }
55
55
  }
56
56
 
57
- async function main() {
57
+ export async function main() {
58
58
  const server = createMaterialMcpServer();
59
59
  const input = new MaterialMcpStdin();
60
60
  const transport = new StdioServerTransport(input);