lism-cli 0.8.0 → 0.10.0

package/README.md

@@ -13,6 +13,7 @@ lism-cli create [targetDir] [--template <name|category>] [--lang <ja|en>]  # tem
 lism-cli init  [--ui-framework <react|astro>] [--ui-dir <path>]  # lism.config ファイルの新規生成
 lism-cli ui    { add <names...> | list }                    # Lism UI コンポーネントの追加
 lism-cli skill { add [skill] | check | update }             # AI エージェント向け SKILL.md 配置
+lism-cli mockup                                             # 画面モックアップ作成の案内
 ```
 
 ## 使い方
@@ -35,7 +36,7 @@ pnpm dlx lism-cli create --template blog-astro-minimal --lang en ./my-blog
 
 同じ動作は `pnpm create lism` / `npm create lism@latest` でも呼び出せます（`create-lism` パッケージ経由）。挙動は両者で共通です。
 
-`--lang <ja|en>` は CLIの表示言語に加えて、**生成されるテンプレート本体の言語**にも反映されます。`--lang` を指定しない場合は、対話端末（TTY）ではほかのどの選択よりも先に言語選択プロンプトが表示され、選んだ言語で以降の表示とテンプレート生成が確定します（非対話環境・CI等では `en` にフォールバック）。対応言語版を持つテンプレート（`blog-astro-minimal` / `blog-astro-personal` / `blog-astro-techlog` / `lp-astro-corporate` / `lp-astro-interior`）では、指定言語のサイト文言・サンプルコンテンツで生成されます。言語版が無いテンプレートは、指定言語に関わらず既存（ベース）の内容で生成されます。
+`--lang <ja|en>` は CLIの表示言語に加えて、**生成されるテンプレート本体の言語**にも反映されます。`--lang` を指定しない場合は、対話端末（TTY）ではほかのどの選択よりも先に言語選択プロンプトが表示され、選んだ言語で以降の表示とテンプレート生成が確定します（非対話環境・CI等では `en` にフォールバック）。対応言語版を持つテンプレート（`blog-astro-minimal` / `blog-astro-personal` / `blog-astro-techlog` / `lp-astro-corporate` / `lp-astro-interior` / `lp-astro-ryokan`）では、指定言語のサイト文言・サンプルコンテンツで生成されます。言語版が無いテンプレートは、指定言語に関わらず既存（ベース）の内容で生成されます。
 
 ### lism.config の生成
 
@@ -91,12 +92,13 @@ pnpm dlx lism-cli ui add accordion --ref dev
 
 同梱スキル（`SKILL.md` ほか一式）を各種AIツールの所定ディレクトリへ展開します。
 
-同梱スキルは以下の2つです：
+同梱スキルは以下の3つです：
 
 | スキル | 説明 |
 |--------|------|
 | `lism-css-guide` | Lism CSSでUI・ページを実装・修正する時に使う実装ガイド |
 | `lism-css-refactor` | 既存の Lism CSSコードを、見た目や挙動を変えずにLismらしい書き方へ整理するリファクタガイド |
+| `lism-mockup-guide` | `@lism-css/mockup`で画面モックアップを組む時のワークフローとデータ契約のガイド（`lism-css-guide`併用前提） |
 
 ```bash
 # 対話モード（使用中のツールを自動検出）
@@ -133,6 +135,24 @@ pnpm dlx lism-cli skill update --claude
 | `--gemini` | `.gemini/skills/<skill>` |
 | `--junie` | `.junie/skills/<skill>` |
 
+### 画面モックアップの案内
+
+`lism-cli mockup` は、画面モックアップを作成するCLI [`@lism-css/mockup`](https://www.npmjs.com/package/@lism-css/mockup) の使い方を表示するだけのコマンドです。`lism-cli` 自体はモックアップ機能を持ちません。
+
+```bash
+pnpm dlx lism-cli mockup
+```
+
+モックアップの作成・検証・プレビューは `@lism-css/mockup` を直接実行してください。
+
+```bash
+npx @lism-css/mockup init [dir]    # ひな形＋契約説明書の生成
+npx @lism-css/mockup check [dir]   # 非対話の検証
+npx @lism-css/mockup dev [dir]     # devサーバー起動（ブラウザ確認用）
+```
+
+AIエージェントにモックアップを作らせる場合は、`lism-mockup-guide` スキル（前述の `skill add`）も併せて導入してください。
+
 ## lism.config.js
 
 `ui add` が読み込む設定ファイル（新規作成するのは `init`）。CSSの設定（`tokens` 等）とUI設定を同居できます。

package/dist/{chunk-RTEZODLP.js → chunk-CRXMV7GV.js}

@@ -1,5 +1,5 @@
 // <define:__LISM_PACKAGE_VERSIONS__>
-var define_LISM_PACKAGE_VERSIONS_default = { "lism-css": "0.24.0", "@lism-css/ui": "0.24.0", "@lism-css/plugin": "0.3.0" };
+var define_LISM_PACKAGE_VERSIONS_default = { "lism-css": "0.27.0", "@lism-css/ui": "0.27.0", "@lism-css/plugin": "0.4.3" };
 
 // src/logger.ts
 import pc from "picocolors";
@@ -58,6 +58,10 @@ var messages = {
     ja: "\u65E2\u5B58\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA\u3092\u5F37\u5236\u4E0A\u66F8\u304D",
     en: "Overwrite existing directory"
   },
+  "cli.create.opt.ref": {
+    ja: "\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u53D6\u5F97\u5143\u306E Git ref\uFF08\u30D6\u30E9\u30F3\u30C1 / \u30BF\u30B0 / \u30B3\u30DF\u30C3\u30C8\uFF09",
+    en: "Git ref to fetch templates from (branch / tag / commit)"
+  },
   // init
   "cli.init.description": {
     ja: "lism.config \u30D5\u30A1\u30A4\u30EB\u3092\u65B0\u898F\u751F\u6210\u3059\u308B",
@@ -100,6 +104,11 @@ var messages = {
     ja: "\u53D6\u5F97\u5143\u306E Git ref\uFF08\u30D6\u30E9\u30F3\u30C1 / \u30BF\u30B0 / \u30B3\u30DF\u30C3\u30C8\uFF09",
     en: "Git ref to fetch from (branch / tag / commit)"
   },
+  // mockup
+  "cli.mockup.description": {
+    ja: "\u753B\u9762\u30E2\u30C3\u30AF\u30A2\u30C3\u30D7\u306E\u6848\u5185\u3092\u8868\u793A\u3059\u308B\uFF08\u5B9F\u4F53\u306F @lism-css/mockup\uFF09",
+    en: "Show guidance for mockups (provided by @lism-css/mockup)"
+  },
   // skill
   "cli.skill.description": {
     ja: "AI \u30A8\u30FC\u30B8\u30A7\u30F3\u30C8\u5411\u3051\u30B9\u30AD\u30EB\uFF08SKILL.md\uFF09\u306E\u914D\u7F6E\u3068\u7BA1\u7406",
@@ -350,6 +359,13 @@ var messages = {
     en: "Total: {count} components"
   },
   // ---------------------------------------------------------------------------
+  // mockup
+  // ---------------------------------------------------------------------------
+  "mockup.guide": {
+    ja: "\u753B\u9762\u30E2\u30C3\u30AF\u30A2\u30C3\u30D7\u6A5F\u80FD\u306F\u5225\u30D1\u30C3\u30B1\u30FC\u30B8 @lism-css/mockup \u304C\u63D0\u4F9B\u3057\u307E\u3059\u3002\n\n  npx @lism-css/mockup init [dir]   \u2026 \u3072\u306A\u5F62\uFF0B\u5951\u7D04\u8AAC\u660E\u66F8\u306E\u751F\u6210\n  npx @lism-css/mockup dev [dir]    \u2026 dev\u30B5\u30FC\u30D0\u30FC\u8D77\u52D5\uFF08\u30D6\u30E9\u30A6\u30B6\u78BA\u8A8D\u7528\uFF09\n  npx @lism-css/mockup check [dir]  \u2026 \u975E\u5BFE\u8A71\u306E\u691C\u8A3C\n\n\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB\u6E08\u307F\u306E\u74B0\u5883\u3067\u306F bin \u306E lism-mockup \u3067\u3082\u5B9F\u884C\u3067\u304D\u307E\u3059\u3002",
+    en: "Mockup features are provided by a separate package, @lism-css/mockup.\n\n  npx @lism-css/mockup init [dir]   ... Generate scaffolding and a contract document\n  npx @lism-css/mockup dev [dir]    ... Start the dev server (for browser preview)\n  npx @lism-css/mockup check [dir]  ... Run non-interactive checks\n\nIf installed, you can also run it via the lism-mockup bin."
+  },
+  // ---------------------------------------------------------------------------
   // skill
   // ---------------------------------------------------------------------------
   // skill add
@@ -547,11 +563,11 @@ import { downloadTemplate } from "giget";
 import { select, input, confirm } from "@inquirer/prompts";
 
 // src/version.ts
-var LISM_CSS_VERSION = "0.24.0" ? "0.24.0" : "unknown";
+var LISM_CSS_VERSION = "0.27.0" ? "0.27.0" : "unknown";
 var LISM_PACKAGE_VERSIONS = typeof define_LISM_PACKAGE_VERSIONS_default !== "undefined" && define_LISM_PACKAGE_VERSIONS_default ? define_LISM_PACKAGE_VERSIONS_default : {
   "lism-css": LISM_CSS_VERSION
 };
-var CLI_VERSION = "0.8.0" ? "0.8.0" : "unknown";
+var CLI_VERSION = "0.10.0" ? "0.10.0" : "unknown";
 
 // src/constants.ts
 var SOURCE_REPO = "lism-css/lism-css";
@@ -564,7 +580,7 @@ var UI_COMPONENTS_PATH = "packages/lism-ui/src/components";
 var UI_HELPER_PATH = "packages/lism-ui/src/helper";
 var UI_REGISTRY_INDEX_PATH = "packages/lism-ui/registry-index.json";
 var SKILL_SOURCE_BASE = "skills";
-var SKILL_NAMES = ["lism-css-guide", "lism-css-refactor"];
+var SKILL_NAMES = ["lism-css-guide", "lism-css-refactor", "lism-mockup-guide"];
 var TEMPLATES_PATH = "templates";
 
 // ../../templates/manifest.ts
@@ -613,6 +629,10 @@ var TEMPLATES = [
     },
     title: { ja: "Blog Minimal", en: "Blog Minimal" },
     description: { ja: "\u8A18\u4E8B\u4E00\u89A7 / \u8A73\u7D30 / Tags \u306E\u307F\u306E\u6700\u5C0F\u69CB\u6210\u306E Astro \u30D6\u30ED\u30B0", en: "Minimal Astro blog with posts and tags only" },
+    intro: {
+      ja: "\u8A18\u4E8B\u4E00\u89A7\u30FB\u8A18\u4E8B\u8A73\u7D30\u30FB\u30BF\u30B0\u30DA\u30FC\u30B8\u3060\u3051\u3067\u69CB\u6210\u3057\u305F\u3001\u3044\u3061\u3070\u3093\u5C0F\u3055\u306A Astro \u30D6\u30ED\u30B0\u3067\u3059\u3002\u4F59\u8A08\u306A\u6A5F\u80FD\u3092\u6301\u305F\u306A\u3044\u306E\u3067\u3001Lism CSS \u3067\u30D6\u30ED\u30B0\u3092\u7D44\u3080\u624B\u9806\u3092\u6700\u77ED\u3067\u8FFD\u3048\u307E\u3059\u3002\u72EC\u81EA\u306E\u6A5F\u80FD\u3092\u8DB3\u3057\u3066\u3044\u304F\u571F\u53F0\u306B\u3082\u304A\u3059\u3059\u3081\u3067\u3059\u3002",
+      en: "The smallest Astro blog, made up of only a post list, post pages, and tag pages. With no extra features, it is the quickest way to see how a blog is built with Lism CSS, and a good base to add your own features to."
+    },
     previewUrl: `${PREVIEW_ORIGIN}/blog-astro-minimal/`,
     previewUrlEn: `${PREVIEW_ORIGIN}/blog-astro-minimal/en/`,
     features: {
@@ -636,6 +656,10 @@ var TEMPLATES = [
       ja: "\u500B\u4EBA\u30D6\u30ED\u30B0\u30FB\u30A8\u30C3\u30BB\u30A4\u5411\u3051\u3002\u5E74\u6708\u30A2\u30FC\u30AB\u30A4\u30D6\u3064\u304D\u306E\u843D\u3061\u7740\u3044\u305F Astro \u30D6\u30ED\u30B0",
       en: "Personal / essay-style Astro blog with monthly archives"
     },
+    intro: {
+      ja: "\u500B\u4EBA\u30D6\u30ED\u30B0\u3084\u30A8\u30C3\u30BB\u30A4\u5411\u3051\u306E\u3001\u843D\u3061\u7740\u3044\u305F\u8AAD\u307F\u7269\u7CFB\u30C7\u30B6\u30A4\u30F3\u306E Astro \u30D6\u30ED\u30B0\u3067\u3059\u3002\u30BF\u30B0\u3068\u5E74\u6708\u30A2\u30FC\u30AB\u30A4\u30D6\u3067\u904E\u53BB\u8A18\u4E8B\u3092\u305F\u3069\u308C\u3001\u30B7\u30A7\u30A2\u30DC\u30BF\u30F3\u3068 OGP \u753B\u50CF\u306E\u81EA\u52D5\u751F\u6210\u3082\u5099\u3048\u3066\u3044\u307E\u3059\u3002\u6587\u7AE0\u3092\u4E3B\u5F79\u306B\u3057\u305F\u30B5\u30A4\u30C8\u3092\u3059\u3050\u59CB\u3081\u3089\u308C\u307E\u3059\u3002",
+      en: "A calm, reading-focused Astro blog for personal sites and essays. Tags and monthly archives make older posts easy to find, and share buttons and auto-generated OG images are included. Ideal for a site where the writing comes first."
+    },
     previewUrl: `${PREVIEW_ORIGIN}/blog-astro-personal/`,
     previewUrlEn: `${PREVIEW_ORIGIN}/blog-astro-personal/en/`,
     features: {
@@ -659,6 +683,10 @@ var TEMPLATES = [
       ja: "\u6280\u8853\u30D6\u30ED\u30B0\u5411\u3051\u3002\u30B3\u30FC\u30C9\u30CF\u30A4\u30E9\u30A4\u30C8\u30FB\u30AB\u30C6\u30B4\u30EA\u30FB\u30BF\u30B0\u30FBTOC\u30FB\u5E74\u6708\u30A2\u30FC\u30AB\u30A4\u30D6\u30FB\u691C\u7D22\u3092\u88C5\u5099\u3057\u305F Astro \u30D6\u30ED\u30B0",
       en: "Tech blog with code highlighting, categories, tags, TOC, monthly archives and search"
     },
+    intro: {
+      ja: "\u6280\u8853\u30D6\u30ED\u30B0\u5411\u3051\u306B\u6A5F\u80FD\u3092\u63C3\u3048\u305F Astro \u30D6\u30ED\u30B0\u3067\u3059\u3002\u30B3\u30FC\u30C9\u30CF\u30A4\u30E9\u30A4\u30C8\u3068\u76EE\u6B21\u3001\u30AB\u30C6\u30B4\u30EA\u3068\u30BF\u30B0\u3001\u5E74\u6708\u30A2\u30FC\u30AB\u30A4\u30D6\u306B\u52A0\u3048\u3001Pagefind \u306B\u3088\u308B\u5168\u6587\u691C\u7D22\u3068\u30C0\u30FC\u30AF\u30E2\u30FC\u30C9\u3082\u5099\u3048\u3066\u3044\u307E\u3059\u3002\u8A18\u4E8B\u6570\u304C\u5897\u3048\u3066\u3082\u63A2\u3057\u3084\u3059\u3044\u3001\u672C\u683C\u904B\u7528\u5411\u3051\u306E\u69CB\u6210\u3067\u3059\u3002",
+      en: "A fully equipped Astro blog for technical writing. It includes code highlighting, a table of contents, categories and tags, monthly archives, full-text search with Pagefind, and dark mode. Built for blogs that keep growing and need to stay easy to navigate."
+    },
     previewUrl: `${PREVIEW_ORIGIN}/blog-astro-techlog/`,
     previewUrlEn: `${PREVIEW_ORIGIN}/blog-astro-techlog/en/`,
     features: {
@@ -696,6 +724,10 @@ var TEMPLATES = [
     sourcePath: "lp/astro",
     title: { ja: "LP Corporate", en: "LP Corporate" },
     description: { ja: "\u30B3\u30FC\u30DD\u30EC\u30FC\u30C8\u30B5\u30A4\u30C8\u5411\u3051\u306E Astro \u30E9\u30F3\u30C7\u30A3\u30F3\u30B0\u30DA\u30FC\u30B8", en: "Astro landing page for corporate sites" },
+    intro: {
+      ja: "\u4F01\u696D\u30B5\u30A4\u30C8\u5411\u3051\u306E1\u30DA\u30FC\u30B8\u69CB\u6210\u306E Astro \u30E9\u30F3\u30C7\u30A3\u30F3\u30B0\u30DA\u30FC\u30B8\u3067\u3059\u3002\u4F1A\u793E\u7D39\u4ECB\u30FB\u7279\u5FB4\u30FB\u5236\u4F5C\u5B9F\u7E3E\u30FB\u304A\u77E5\u3089\u305B\u30FBFAQ\u30FB\u304A\u5BA2\u69D8\u306E\u58F0\u30FB\u4F01\u696D\u60C5\u5831\u30FB\u304A\u554F\u3044\u5408\u308F\u305B\u3068\u3001\u30B3\u30FC\u30DD\u30EC\u30FC\u30C8\u30B5\u30A4\u30C8\u306B\u5FC5\u8981\u306A\u30BB\u30AF\u30B7\u30E7\u30F3\u3092\u4E00\u901A\u308A\u542B\u307F\u307E\u3059\u3002",
+      en: "A one-page Astro landing page for corporate sites. It covers the sections a company site needs: about, features, works, news, FAQ, testimonials, company information, and contact."
+    },
     previewUrl: `${PREVIEW_ORIGIN}/lp-astro/corporate/`,
     previewUrlEn: `${PREVIEW_ORIGIN}/lp-astro/en/corporate/`
   },
@@ -709,6 +741,10 @@ var TEMPLATES = [
     sourcePath: "lp/astro",
     title: { ja: "LP Interior", en: "LP Interior" },
     description: { ja: "\u30A4\u30F3\u30C6\u30EA\u30A2\u30FB\u66AE\u3089\u3057\u7CFB\u30B5\u30FC\u30D3\u30B9\u5411\u3051\u306E Astro \u30E9\u30F3\u30C7\u30A3\u30F3\u30B0\u30DA\u30FC\u30B8", en: "Astro landing page for interior / lifestyle services" },
+    intro: {
+      ja: "\u30A4\u30F3\u30C6\u30EA\u30A2\u3084\u66AE\u3089\u3057\u306B\u95A2\u308F\u308B\u30B5\u30FC\u30D3\u30B9\u5411\u3051\u306E\u3001\u5199\u771F\u3092\u5927\u304D\u304F\u898B\u305B\u308B Astro \u30E9\u30F3\u30C7\u30A3\u30F3\u30B0\u30DA\u30FC\u30B8\u3067\u3059\u3002\u30DF\u30C3\u30B7\u30E7\u30F3\u30FB\u30E1\u30C3\u30BB\u30FC\u30B8\u30FB\u7279\u9577\u30FB\u30B5\u30FC\u30D3\u30B9\u30FB\u3054\u4F9D\u983C\u306E\u6D41\u308C\u30FB\u304A\u5BA2\u69D8\u306E\u58F0\u30FBFAQ\u30FB\u304A\u554F\u3044\u5408\u308F\u305B\u306E\u30BB\u30AF\u30B7\u30E7\u30F3\u3067\u69CB\u6210\u3057\u3066\u3044\u307E\u3059\u3002",
+      en: "A photo-forward Astro landing page for interior and lifestyle services. It is made up of mission, message, features, services, process, customer voices, FAQ, and contact sections."
+    },
     previewUrl: `${PREVIEW_ORIGIN}/lp-astro/interior/`,
     previewUrlEn: `${PREVIEW_ORIGIN}/lp-astro/en/interior/`
   },
@@ -722,7 +758,8 @@ var TEMPLATES = [
     sourcePath: "lp/astro",
     title: { ja: "LP Ryokan", en: "LP Ryokan" },
     description: { ja: "\u65C5\u9928\u30FB\u5BBF\u6CCA\u696D\u5411\u3051\u306E Astro \u30E9\u30F3\u30C7\u30A3\u30F3\u30B0\u30DA\u30FC\u30B8", en: "Astro landing page for ryokan / lodging" },
-    draft: true
+    previewUrl: `${PREVIEW_ORIGIN}/lp-astro/ryokan/`,
+    previewUrlEn: `${PREVIEW_ORIGIN}/lp-astro/en/ryokan/`
   }
 ];
 
@@ -754,10 +791,10 @@ var CATEGORIES = [
     variantPromptKey: "create.promptSelectVariant.web"
   }
 ];
-async function runCreate({ template, targetDir, force = false, lang }) {
-  await runCreateWithTemplates({ template, targetDir, force, lang }, TEMPLATES);
+async function runCreate({ template, targetDir, force = false, lang, ref }) {
+  await runCreateWithTemplates({ template, targetDir, force, lang, ref }, TEMPLATES);
 }
-async function runCreateWithTemplates({ template, targetDir, force = false, lang }, templates) {
+async function runCreateWithTemplates({ template, targetDir, force = false, lang, ref = DEFAULT_TEMPLATES_REF }, templates) {
   const resolvedLang = await resolveLang(lang);
   setLang(resolvedLang);
   const availableTemplates = templates.filter((tpl2) => !tpl2.draft);
@@ -773,7 +810,6 @@ async function runCreateWithTemplates({ template, targetDir, force = false, lang
       return;
     }
   }
-  const ref = DEFAULT_TEMPLATES_REF;
   logger.info(t("create.fetching", { name: tpl.slug, ref }));
   await downloadTemplateSource(tpl, outDir, ref, force);
   await applyLangOverlay(tpl, outDir, ref, resolvedLang);
@@ -785,7 +821,7 @@ async function runCreateWithTemplates({ template, targetDir, force = false, lang
 async function createCommand(targetDir, options, command) {
   const langOpt = command?.optsWithGlobals().lang;
   const lang = typeof langOpt === "string" ? langOpt : void 0;
-  await runCreate({ template: options.template, targetDir, force: options.force, lang });
+  await runCreate({ template: options.template, targetDir, force: options.force, lang, ref: options.ref });
 }
 async function resolveLang(explicit) {
   if (explicit === "ja" || explicit === "en") return explicit;
@@ -935,14 +971,14 @@ function cleanupDevArtifacts(projectDir) {
     fs.rmSync(langDir, { recursive: true, force: true });
   }
 }
-function resolveVariantDir(srcDir, variant, lang) {
+function resolveLangVariantDir(srcDir, variant, lang) {
   const langVariant = `${lang}/${variant}`;
   const hasLangVariant = fs.existsSync(path.join(srcDir, "pages", langVariant, "index.astro"));
-  return hasLangVariant ? langVariant : variant;
+  return hasLangVariant ? langVariant : void 0;
 }
 function extractVariantFiles(projectDir, tpl, lang) {
   const srcDir = path.join(projectDir, "src");
-  const variant = resolveVariantDir(srcDir, tpl.variant, lang);
+  const { variant } = tpl;
   const pagesVariantIndex = path.join(srcDir, "pages", variant, "index.astro");
   if (!fs.existsSync(pagesVariantIndex)) {
     throw new Error(
@@ -953,19 +989,22 @@ function extractVariantFiles(projectDir, tpl, lang) {
     );
   }
   if (!fs.existsSync(srcDir) || !fs.statSync(srcDir).isDirectory()) return;
+  const langVariant = resolveLangVariantDir(srcDir, variant, lang);
+  const variantDirs = langVariant ? [variant, langVariant] : [variant];
   for (const entry of fs.readdirSync(srcDir, { withFileTypes: true })) {
     if (!entry.isDirectory()) continue;
     const parentDir = path.join(srcDir, entry.name);
-    const variantDirInside = path.join(parentDir, variant);
-    if (!fs.existsSync(variantDirInside)) continue;
-    if (!fs.statSync(variantDirInside).isDirectory()) continue;
-    mergeDirectory(variantDirInside, parentDir);
+    const variantDirsInside = variantDirs.map((dir) => path.join(parentDir, dir)).filter((dir) => fs.existsSync(dir) && fs.statSync(dir).isDirectory());
+    if (variantDirsInside.length === 0) continue;
+    for (const variantDirInside of variantDirsInside) {
+      mergeDirectory(variantDirInside, parentDir);
+    }
     for (const child of fs.readdirSync(parentDir, { withFileTypes: true })) {
       if (!child.isDirectory()) continue;
       fs.rmSync(path.join(parentDir, child.name), { recursive: true, force: true });
     }
   }
-  rewriteVariantAliasImports(srcDir, variant);
+  rewriteVariantAliasImports(srcDir, variantDirs);
 }
 var ALIAS_REWRITE_EXTENSIONS = /* @__PURE__ */ new Set([
   ".astro",
@@ -985,9 +1024,9 @@ var ALIAS_REWRITE_EXTENSIONS = /* @__PURE__ */ new Set([
   ".svelte",
   ".html"
 ]);
-function rewriteVariantAliasImports(srcDir, variant) {
+function rewriteVariantAliasImports(srcDir, variantDirs) {
   if (!fs.existsSync(srcDir)) return;
-  const pattern = new RegExp(`(@/[^/'"\\s\`]+)/${escapeRegExp(variant)}/`, "g");
+  const patterns = variantDirs.map((dir) => new RegExp(`(@/[^/'"\\s\`]+)/${escapeRegExp(dir)}/`, "g"));
   walkFiles(srcDir, (filePath) => {
     const ext = path.extname(filePath);
     if (!ALIAS_REWRITE_EXTENSIONS.has(ext)) return;
@@ -997,8 +1036,11 @@ function rewriteVariantAliasImports(srcDir, variant) {
     } catch {
       return;
     }
-    if (!original.includes(`/${variant}/`)) return;
-    const replaced = original.replace(pattern, "$1/");
+    if (!variantDirs.some((dir) => original.includes(`/${dir}/`))) return;
+    let replaced = original;
+    for (const pattern of patterns) {
+      replaced = replaced.replace(pattern, "$1/");
+    }
     if (replaced !== original) {
       fs.writeFileSync(filePath, replaced);
     }

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   preScanLang,
   setLang,
   t
-} from "./chunk-RTEZODLP.js";
+} from "./chunk-CRXMV7GV.js";
 
 // src/createProgram.ts
 import { Command as Command4 } from "commander";
@@ -111,13 +111,7 @@ function renderUiSnippet(cli) {
   return `ui: ${renderCliObject(cli, "")},`;
 }
 function renderCliObject(cli, indent) {
-  return [
-    "{",
-    //
-    `${indent}  framework: ${JSON.stringify(cli.framework)},`,
-    `${indent}  dir: ${JSON.stringify(cli.dir)},`,
-    `${indent}}`
-  ].join("\n");
+  return ["{", `${indent}  framework: ${JSON.stringify(cli.framework)},`, `${indent}  dir: ${JSON.stringify(cli.dir)},`, `${indent}}`].join("\n");
 }
 
 // src/commands/ui/fetcher.ts
@@ -853,6 +847,11 @@ async function resolveUiConfig(options) {
   return useUi ? promptUiConfig(uiOptions) : null;
 }
 
+// src/commands/mockup.ts
+function mockupCommand() {
+  logger.log(t("mockup.guide"));
+}
+
 // src/createProgram.ts
 function createLismProgram() {
   const program2 = new Command4();
@@ -862,11 +861,12 @@ function createLismProgram() {
     const lang = opts.lang;
     if (typeof lang === "string") setLang(lang);
   });
-  program2.command("create").description(t("cli.create.description")).argument("[targetDir]", t("cli.create.arg.targetDir")).option("-t, --template <name>", t("cli.create.opt.template")).option("-f, --force", t("cli.create.opt.force"), false).action(createCommand);
+  program2.command("create").description(t("cli.create.description")).argument("[targetDir]", t("cli.create.arg.targetDir")).option("-t, --template <name>", t("cli.create.opt.template")).option("-f, --force", t("cli.create.opt.force"), false).option("--ref <ref>", t("cli.create.opt.ref")).action(createCommand);
   const init = program2.command("init").description(t("cli.init.description"));
   applyUiSectionOptions(init).action(initCommand);
   program2.addCommand(createUiCommand());
   program2.addCommand(createSkillCommand());
+  program2.command("mockup").description(t("cli.mockup.description")).allowExcessArguments().action(mockupCommand);
   return program2;
 }
 

package/dist/lib.d.ts

@@ -2,6 +2,8 @@ interface RunCreateArgs {
     template?: string;
     targetDir?: string;
     force?: boolean;
+    /** テンプレ取得元の Git ref。未指定なら `DEFAULT_TEMPLATES_REF`。 */
+    ref?: string;
     /**
      * 明示指定された言語（`--lang`）。`ja` / `en` のときその言語で CLI 表示・テンプレ生成を確定する。
      * 未指定（undefined / 不正値）の場合は、対話端末では最初に言語選択プロンプトを出し、
@@ -9,8 +11,7 @@ interface RunCreateArgs {
      */
     lang?: string;
 }
-/** `lism-cli create` / `create-lism` から共通で使える実体関数 */
-declare function runCreate({ template, targetDir, force, lang }: RunCreateArgs): Promise<void>;
+declare function runCreate({ template, targetDir, force, lang, ref }: RunCreateArgs): Promise<void>;
 
 /**
  * CLI 表示用のメッセージ辞書（ja / en）。
@@ -21,6 +22,7 @@ declare function runCreate({ template, targetDir, force, lang }: RunCreateArgs):
  *   - `init.*`   … `lism-cli init` サブコマンド
  *   - `ui.*`     … `lism-cli ui` 配下
  *   - `skill.*`  … `lism-cli skill` 配下
+ *   - `mockup.*` … `lism-cli mockup` 配下
  *   - `config.*` … lism.config.* まわりのエラー・警告
  *   - `common.*` … 汎用
  *
@@ -51,6 +53,10 @@ declare const messages: {
         readonly ja: "既存ディレクトリを強制上書き";
         readonly en: "Overwrite existing directory";
     };
+    readonly 'cli.create.opt.ref': {
+        readonly ja: "テンプレート取得元の Git ref（ブランチ / タグ / コミット）";
+        readonly en: "Git ref to fetch templates from (branch / tag / commit)";
+    };
     readonly 'cli.init.description': {
         readonly ja: "lism.config ファイルを新規生成する";
         readonly en: "Generate a new lism.config file";
@@ -91,6 +97,10 @@ declare const messages: {
         readonly ja: "取得元の Git ref（ブランチ / タグ / コミット）";
         readonly en: "Git ref to fetch from (branch / tag / commit)";
     };
+    readonly 'cli.mockup.description': {
+        readonly ja: "画面モックアップの案内を表示する（実体は @lism-css/mockup）";
+        readonly en: "Show guidance for mockups (provided by @lism-css/mockup)";
+    };
     readonly 'cli.skill.description': {
         readonly ja: "AI エージェント向けスキル（SKILL.md）の配置と管理";
         readonly en: "Manage SKILL.md files for AI agents";
@@ -327,6 +337,10 @@ declare const messages: {
         readonly ja: "合計: {count} コンポーネント";
         readonly en: "Total: {count} components";
     };
+    readonly 'mockup.guide': {
+        readonly ja: string;
+        readonly en: string;
+    };
     readonly 'skill.add.detected': {
         readonly ja: "検出した AI ツール: {list}";
         readonly en: "Detected AI tools: {list}";
@@ -443,11 +457,8 @@ declare const messages: {
 type MessageKey = keyof typeof messages;
 
 type Lang = 'ja' | 'en';
-/** 現在の言語を設定する（未知の値は無視） */
 declare function setLang(lang: string | undefined): void;
-/**
- * メッセージキーから現在の言語の文字列を取得し、必要に応じて `{name}` プレースホルダーを置換する。
- */
+/** 現在の言語のメッセージを取得し、プレースホルダーを展開する。 */
 declare function t(key: MessageKey, vars?: Record<string, string | number>): string;
 /**
  * ロケール非依存の 2 言語オブジェクトから現在の言語の値を返す。

package/dist/lib.js

@@ -3,7 +3,7 @@ import {
   setLang,
   t,
   tOf
-} from "./chunk-RTEZODLP.js";
+} from "./chunk-CRXMV7GV.js";
 export {
   runCreate,
   setLang,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lism-cli",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "CLI for scaffolding projects and adding UI components for Lism CSS / Lism UI.",
   "author": {
     "name": "ddryo",
@@ -39,16 +39,16 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "@inquirer/prompts": "^7.0.0",
-    "commander": "^13.0.0",
-    "giget": "^3.2.0",
-    "jiti": "^2.6.1",
-    "picocolors": "^1.1.0"
+    "@inquirer/prompts": "^7.10.1",
+    "commander": "^13.1.0",
+    "giget": "^3.3.0",
+    "jiti": "^2.7.0",
+    "picocolors": "^1.1.1"
   },
   "devDependencies": {
-    "@types/node": "^25.5.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.8.3"
+    "@types/node": "^25.9.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   },
   "engines": {
     "node": ">=18.0.0"