required-doc 0.0.7 → 0.0.8

package/README.md

@@ -99,6 +99,16 @@ createSpecViewer({
   components: [Input, Button],
   pages: [loginPage],
   colors,
+  options: {
+    devices: [
+      { id: 'pc', label: 'PC', frame: 'pc', minWidth: 1024, maxWidth: 1920 },
+      { id: 'phone', label: 'Phone', frame: 'phone', minWidth: 320, maxWidth: 1023 },
+    ],
+    baseColors: {
+      light: { bg: '#f5f6f8', font: '#1f2937' },
+      dark: { bg: '#131313', font: '#f3f3f3' },
+    },
+  },
 }).mount('#app')
 ```
 
@@ -159,8 +169,30 @@ const meta: ItemMeta = {
 export default meta
 ```
 
-- `view`: モックの表示物。**素の HTML 文字列（`?raw`）** または Vue コンポーネント。
-- `req`: 要件の Markdown 文字列（`?raw`）。
+- `view`: 単一 mock のとき。**HTML 文字列（`?raw`）** または Vue コンポーネント。
+- `variants`: 状態別 mock（例: 0件 / 10件）。**2 件以上**で mock 内にタブが出る。`variants` を使う場合 `view` は省略可。
+- `req`: 要件 Markdown（状態共通）。
+
+```ts
+const meta: ItemMeta = {
+  name: 'CollageListPage',
+  kind: 'page',
+  title: 'コラージュ一覧',
+  desc: '…',
+  latest: 'v1',
+  versions: {
+    v1: {
+      req: CollageListReq,
+      variants: [
+        { id: 'empty', label: '0件', view: CollageListEmptyMock },
+        { id: 'full',  label: '10件', view: CollageListFullMock },
+      ],
+    },
+  },
+}
+```
+
+単一 mock の従来形（`view` のみ）もそのまま使える。
 
 作ったら `main.ts` の `components` / `pages` 配列に 1 行足す。
 
@@ -207,19 +239,19 @@ export const colors: ColorToken[] = [
 
 ## オプション（`createSpecViewer({ ..., options })`）
 
-すべて**任意**。省略すればデフォルトが使われる（書くのは変えたい項目だけでOK）。
+`showThemeToggle` 以外は**省略時デフォルトなし**。`devices` と `baseColors` は利用側で必ず指定する。
 
 ```ts
 createSpecViewer({
   components, pages, colors,
   options: {
-    showThemeToggle: true,   // ダーク/ライト切替ボタンの表示（既定 true）
-    devices: [               // mock の端末タブ（既定 PC / Phone）
-      { id: 'pc',     label: 'PC',     frame: 'pc',     width: 1024 },
-      { id: 'tablet', label: 'Tablet', frame: 'tablet', width: 768 },
-      { id: 'phone',  label: 'Phone',  frame: 'phone',  width: 360 },
+    showThemeToggle: true,   // ダーク/ライト切替ボタン（省略時 true）
+    devices: [               // mock の端末タブ（必須）
+      { id: 'pc',     label: 'PC',     frame: 'pc',     minWidth: 1024, maxWidth: 1920 },
+      { id: 'tablet', label: 'Tablet', frame: 'tablet', minWidth: 768,  maxWidth: 1024 },
+      { id: 'phone',  label: 'Phone',  frame: 'phone',  minWidth: 320,  maxWidth: 1023 },
     ],
-    baseColors: {            // モック画面の基本色（既定は下記の値）
+    baseColors: {            // モック画面の基本色（必須）
       light: { bg: '#f5f6f8', font: '#1f2937' },
       dark:  { bg: '#131313', font: '#f3f3f3' },
     },
@@ -233,29 +265,36 @@ createSpecViewer({
 
 ### devices
 
-mock 上部のタブに出る端末リスト。
+mock 上部のタブに出る端末リスト。**タブごとに min〜max の範囲が独立**している（Phone の max を超えて PC 幅にはならない）。
 
 | フィールド | 説明 |
 | --- | --- |
 | `id` | タブ識別子（例 `'pc'`） |
 | `label` | タブ表示名（例 `'PC'`） |
 | `frame` | 枠の見た目。`'pc'`=ブラウザ風 / `'phone'`=ノッチ付き / `'tablet'`=ノッチなしベゼル |
-| `width` | 画面幅（**px・必須**） |
+| `minWidth` | mock の **viewport 最小幅**（px）。端末枠・ノッチは含まない |
+| `maxWidth` | mock の **viewport 最大幅**（px）。端末枠・ノッチは含まない |
 
 - 配列を 1 件だけ（例: PC のみ）にすると端末タブ自体が消える。
-- `width` は**デザインの実寸**。ペースに収まらなければ縮めず、**全体を縮尺（最大 1x、はみ出す分だけ縮小）**して表示する。
+- `minWidth === maxWidth` の端末は幅固定（リサイズハンドル非表示）。
+- 表示幅は **mock が描画される viewport 幅**。Phone の黒ベゼル・ノッチはその外側の装飾として重ねる（mock の左右 padding は付けない）。
+- 詳細画面: 右端ドラッグで **選択中タブの min〜max** の範囲内に変更。ペースに収まらなければ**端末枠込みで縮尺**（最大 1x）。
+- タブ切替時は現在幅を引き継ぎ、新タブの min〜max に clamp する。
 
 ### baseColors
 
-モック画面（PC/Tablet/Phone の画面・全画面プレビュー）の**背景色と基本文字色**を、ライト/ダークごとに指定する。
+モック画面（PC/Tablet/Phone の画面・プレビュー）の**背景色と基本文字色**を、ライト/ダークごとに指定する。
 ここで指定した値は `/colors` の一覧に `baseBg` / `baseFont` として自動表示される（情報源が二重化しない）。
 
 ---
 
 ## プレビューモード
 
-- ヘッダの「プレビュー」ボタンで、**要件パネルを隠し画面そのものだけを全画面表示**する。
-- 余計な枠・ヘッダ・ラベルは出さず、選択中端末の `width` で実寸レイアウト → ビューポートに合わせて縮尺表示。
+- ヘッダの「プレビュー」ボタンで、**要件パネルを隠して全画面表示**する。
+- **詳細画面と同じ端末枠・同じ viewport 幅**で mock を **1:1** 表示する（縮尺なし。はみ出す場合はスクロール）。
+- mock の viewport がブラウザより**狭い**ときだけ、外側に境界線（グレー背景 + ボーダー）を出す。**同幅なら枠なし**。
+- 右端ドラッグで幅変更可能（詳細と同じく、**プレビュー前に選んだ端末タブの min〜max 内**）。
+- 端末タブはプレビュー中は出ない（詳細で選んだ端末を引き継ぐ）。
 - 退室は **`Esc`** または右上の「閉じる」ボタン。
 
 ---
@@ -264,7 +303,7 @@ mock 上部のタブに出る端末リスト。
 
 - `createSpecViewer(config)` が `config` を `registryStore` に注入し、ルータ付き Vue アプリを返す。
 - ルート: `/catalog`, `/components/:name/:ver?`, `/pages/:name/:ver?`, `/colors`。
-- `ReqScreen.vue` が額縁（ヘッダ / 左モック / 右要件）と端末枠・縮尺・プレビューを担当。
+- `ReqScreen.vue` が額縁（ヘッダ / 左 mock / 右要件）と端末枠・縮尺・プレビューを担当。端末枠は `MockDeviceFrame.vue`。
 - Tailwind ユーティリティはパッケージに同梱せず、**利用側の `@source` 経由で生成**（`dist/index.js` 内のクラス文字列を走査）。パッケージ同梱の `style.css` は req-md 等の独自スタイルのみ。
 
 ### 公開 API / 型
@@ -290,9 +329,8 @@ import {
 | --- | --- |
 | 部品/画面を追加 | `meta.ts` + `v1/*.html` + `v1/*.req.md` を作り、`main.ts` の配列に追加 |
 | バージョンを増やす | `v2/` を足して `meta.ts` の `versions` と `latest` を更新 |
-| 端末を変える | `options.devices` を編集（PC のみ・Tablet 追加など） |
-| 端末の幅を変える | 各 device の `width`（px） |
+| 端末を変える | 詳細画面の mock 上部タブ、または `options.devices` を編集 |
+| 端末の幅を変える | 詳細 / プレビューで右端ドラッグ（選択中タブの `minWidth`〜`maxWidth` 内） |
 | ダーク切替を隠す | `options.showThemeToggle: false` |
 | モックの基本色を変える | `options.baseColors`（`/colors` にも反映） |
 | ビューア本体を直した | `cd npm_pack && npm run build` で再ビルド |
-```

package/dist/index.js

@@ -1,92 +1,92 @@
-import { Fragment as e, computed as t, createApp as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as ee, openBlock as m, ref as h, renderList as g, renderSlot as _, resolveDynamicComponent as te, toDisplayString as v, unref as y, watch as ne, withCtx as b } from "vue";
-import { RouterLink as x, RouterView as re, createRouter as ie, createWebHistory as ae, useRouter as S } from "vue-router";
+import { Fragment as e, computed as t, createApp as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, resolveDynamicComponent as ee, toDisplayString as y, unref as b, watch as te, withCtx as x } from "vue";
+import { RouterLink as S, RouterView as ne, createRouter as C, createWebHistory as re, useRouter as w } from "vue-router";
 //#endregion
 //#region src/App.vue
-var C = /* @__PURE__ */ l({
+var T = /* @__PURE__ */ l({
 	__name: "App",
 	setup(e) {
-		return (e, t) => (m(), r(y(re)));
+		return (e, t) => (h(), r(b(ne)));
 	}
-}), w = [], T = [], E = [], D = !0, O = [], k;
-function oe(e) {
-	w = e.components, T = e.pages, E = e.colors, D = e.options?.showThemeToggle ?? !0, O = e.options?.devices ?? [], k = e.options?.baseColors;
+}), E = [], D = [], O = [], k = !0, A = [], j;
+function ie(e) {
+	E = e.components, D = e.pages, O = e.colors, k = e.options?.showThemeToggle ?? !0, A = e.options?.devices ?? [], j = e.options?.baseColors;
 }
-function se() {
-	return D;
-}
-function ce() {
-	return O;
-}
-function le() {
+function ae() {
 	return k;
 }
-function ue() {
-	return w;
+function oe() {
+	return A;
 }
-function A() {
-	return T;
+function se() {
+	return j;
 }
-function de() {
+function M() {
 	return E;
 }
-function fe(e, t) {
-	return [...w, ...T].find((n) => n.kind === e && n.name === t);
+function N() {
+	return D;
+}
+function ce() {
+	return O;
+}
+function le(e, t) {
+	return [...E, ...D].find((n) => n.kind === e && n.name === t);
 }
 //#endregion
 //#region src/lib/theme.ts
-var j = h(!1);
-ne(j, (e) => {
+var P = g(!1);
+te(P, (e) => {
 	document.documentElement.classList.toggle("dark", e);
 }, { immediate: !0 });
-function pe() {
+function ue() {
 	return {
-		isDark: j,
+		isDark: P,
 		toggle: () => {
-			j.value = !j.value;
+			P.value = !P.value;
 		}
 	};
 }
 //#endregion
 //#region src/catalog/CatalogView.vue?vue&type=script&setup=true&lang.ts
-var M = { class: "mx-auto min-h-screen max-w-3xl p-8" }, N = { class: "mb-8 flex items-center" }, P = { class: "mb-10" }, me = { class: "space-y-2" }, he = { class: "font-bold dark:text-gray-100" }, ge = { class: "ml-1 text-xs text-gray-400" }, F = { class: "text-sm text-gray-500 dark:text-gray-400" }, _e = { class: "mb-10" }, ve = { class: "space-y-2" }, ye = { class: "font-bold dark:text-gray-100" }, be = { class: "ml-1 text-xs text-gray-400" }, xe = { class: "text-sm text-gray-500 dark:text-gray-400" }, Se = { class: "mb-2 rounded-lg border border-gray-300 bg-white p-4 dark:border-gray-700 dark:bg-gray-800" }, I = { class: "space-y-2 text-sm" }, L = { class: "flex gap-3" }, Ce = { class: "font-bold dark:text-gray-100" }, we = { class: "flex gap-3" }, Te = { class: "flex-1" }, Ee = { class: "space-y-1" }, De = { class: "space-y-2" }, Oe = "block rounded-lg border border-gray-300 bg-white p-4 transition hover:border-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400", ke = /* @__PURE__ */ l({
+var F = { class: "mx-auto min-h-screen max-w-3xl p-8" }, I = { class: "mb-8 flex items-center" }, L = { class: "mb-10" }, de = { class: "space-y-2" }, fe = { class: "font-bold dark:text-gray-100" }, pe = { class: "ml-1 text-xs text-gray-400" }, R = { class: "text-sm text-gray-500 dark:text-gray-400" }, me = { class: "mb-10" }, he = { class: "space-y-2" }, ge = { class: "font-bold dark:text-gray-100" }, _e = { class: "ml-1 text-xs text-gray-400" }, ve = { class: "text-sm text-gray-500 dark:text-gray-400" }, ye = { class: "mb-2 rounded-lg border border-gray-300 bg-white p-4 dark:border-gray-700 dark:bg-gray-800" }, z = { class: "space-y-2 text-sm" }, B = { class: "flex gap-3" }, be = { class: "font-bold dark:text-gray-100" }, xe = { class: "flex gap-3" }, Se = { class: "flex-1" }, Ce = { class: "space-y-1" }, we = { class: "space-y-2" }, Te = "block rounded-lg border border-gray-300 bg-white p-4 transition hover:border-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400", Ee = /* @__PURE__ */ l({
 	__name: "CatalogView",
 	setup(t) {
-		let { isDark: n, toggle: r } = pe(), l = se(), u = ce(), f = ue(), p = A();
-		function ee(e) {
+		let { isDark: n, toggle: r } = ue(), l = ae(), u = oe(), f = M(), p = N();
+		function m(e) {
 			return e.minWidth === e.maxWidth ? `${e.maxWidth}px` : `${e.minWidth}–${e.maxWidth}px`;
 		}
-		return (t, h) => (m(), a("div", M, [
-			o("div", N, [h[1] ||= o("h1", { class: "text-2xl font-bold dark:text-gray-100" }, "要件書カタログ", -1), y(l) ? (m(), a("button", {
+		return (t, g) => (h(), a("div", F, [
+			o("div", I, [g[1] ||= o("h1", { class: "text-2xl font-bold dark:text-gray-100" }, "要件書カタログ", -1), b(l) ? (h(), a("button", {
 				key: 0,
 				type: "button",
 				class: "ml-auto rounded-md border border-gray-300 px-3 py-1 text-xs font-bold text-gray-600 transition hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
-				onClick: h[0] ||= (...e) => y(r) && y(r)(...e)
-			}, v(y(n) ? "ライトモード" : "ダークモード"), 1)) : i("", !0)]),
-			o("section", P, [h[2] ||= o("h2", { class: "mb-3 text-lg font-bold text-gray-700 dark:text-gray-300" }, "ページ", -1), o("ul", me, [(m(!0), a(e, null, g(y(p), (e) => (m(), a("li", { key: e.name }, [c(y(x), {
+				onClick: g[0] ||= (...e) => b(r) && b(r)(...e)
+			}, y(b(n) ? "ライトモード" : "ダークモード"), 1)) : i("", !0)]),
+			o("section", L, [g[2] ||= o("h2", { class: "mb-3 text-lg font-bold text-gray-700 dark:text-gray-300" }, "ページ", -1), o("ul", de, [(h(!0), a(e, null, _(b(p), (e) => (h(), a("li", { key: e.name }, [c(b(S), {
 				to: `/pages/${e.name}`,
-				class: d(Oe)
+				class: d(Te)
 			}, {
-				default: b(() => [o("div", he, [s(v(e.title) + " ", 1), o("span", ge, "(" + v(e.latest) + ")", 1)]), o("div", F, v(e.desc), 1)]),
+				default: x(() => [o("div", fe, [s(y(e.title) + " ", 1), o("span", pe, "(" + y(e.latest) + ")", 1)]), o("div", R, y(e.desc), 1)]),
 				_: 2
 			}, 1032, ["to"])]))), 128))])]),
-			o("section", _e, [h[3] ||= o("h2", { class: "mb-3 text-lg font-bold text-gray-700 dark:text-gray-300" }, "コンポーネント", -1), o("ul", ve, [(m(!0), a(e, null, g(y(f), (e) => (m(), a("li", { key: e.name }, [c(y(x), {
+			o("section", me, [g[3] ||= o("h2", { class: "mb-3 text-lg font-bold text-gray-700 dark:text-gray-300" }, "コンポーネント", -1), o("ul", he, [(h(!0), a(e, null, _(b(f), (e) => (h(), a("li", { key: e.name }, [c(b(S), {
 				to: `/components/${e.name}`,
-				class: d(Oe)
+				class: d(Te)
 			}, {
-				default: b(() => [o("div", ye, [s(v(e.title) + " ", 1), o("span", be, "(" + v(e.latest) + ")", 1)]), o("div", xe, v(e.desc), 1)]),
+				default: x(() => [o("div", ge, [s(y(e.title) + " ", 1), o("span", _e, "(" + y(e.latest) + ")", 1)]), o("div", ve, y(e.desc), 1)]),
 				_: 2
 			}, 1032, ["to"])]))), 128))])]),
 			o("section", null, [
-				h[8] ||= o("h2", { class: "mb-3 text-lg font-bold text-gray-700 dark:text-gray-300" }, "デザイン", -1),
-				o("div", Se, [h[6] ||= o("div", { class: "mb-2 text-xs font-bold uppercase tracking-wide text-gray-400" }, "表示設定", -1), o("dl", I, [o("div", L, [h[4] ||= o("dt", { class: "w-28 shrink-0 text-gray-500 dark:text-gray-400" }, "ダークモード切替", -1), o("dd", Ce, v(y(l) ? "表示" : "非表示"), 1)]), o("div", we, [h[5] ||= o("dt", { class: "w-28 shrink-0 text-gray-500 dark:text-gray-400" }, "端末", -1), o("dd", Te, [o("ul", Ee, [(m(!0), a(e, null, g(y(u), (e) => (m(), a("li", {
+				g[8] ||= o("h2", { class: "mb-3 text-lg font-bold text-gray-700 dark:text-gray-300" }, "デザイン", -1),
+				o("div", ye, [g[6] ||= o("div", { class: "mb-2 text-xs font-bold uppercase tracking-wide text-gray-400" }, "表示設定", -1), o("dl", z, [o("div", B, [g[4] ||= o("dt", { class: "w-28 shrink-0 text-gray-500 dark:text-gray-400" }, "ダークモード切替", -1), o("dd", be, y(b(l) ? "表示" : "非表示"), 1)]), o("div", xe, [g[5] ||= o("dt", { class: "w-28 shrink-0 text-gray-500 dark:text-gray-400" }, "端末", -1), o("dd", Se, [o("ul", Ce, [(h(!0), a(e, null, _(b(u), (e) => (h(), a("li", {
 					key: e.id,
 					class: "font-mono text-xs text-gray-700 dark:text-gray-200"
-				}, v(e.label) + "（" + v(e.frame) + "） / 幅: " + v(ee(e)), 1))), 128))])])])])]),
-				o("ul", De, [o("li", null, [c(y(x), {
+				}, y(e.label) + "（" + y(e.frame) + "） / 幅: " + y(m(e)), 1))), 128))])])])])]),
+				o("ul", we, [o("li", null, [c(b(S), {
 					to: "/colors",
-					class: d(Oe)
+					class: d(Te)
 				}, {
-					default: b(() => [...h[7] ||= [o("div", { class: "font-bold dark:text-gray-100" }, "カラー", -1), o("div", { class: "text-sm text-gray-500 dark:text-gray-400" }, "accentColor 等の色定義一覧", -1)]]),
+					default: x(() => [...g[7] ||= [o("div", { class: "font-bold dark:text-gray-100" }, "カラー", -1), o("div", { class: "text-sm text-gray-500 dark:text-gray-400" }, "accentColor 等の色定義一覧", -1)]]),
 					_: 1
 				})])])
 			])
@@ -95,7 +95,7 @@ var M = { class: "mx-auto min-h-screen max-w-3xl p-8" }, N = { class: "mb-8 flex
 });
 //#endregion
 //#region node_modules/marked/lib/marked.esm.js
-function Ae() {
+function De() {
 	return {
 		async: !1,
 		breaks: !1,
@@ -109,22 +109,22 @@ function Ae() {
 		walkTokens: null
 	};
 }
-var R = Ae();
-function je(e) {
-	R = e;
+var V = De();
+function Oe(e) {
+	V = e;
 }
-var z = { exec: () => null };
-function B(e, t = "") {
+var H = { exec: () => null };
+function U(e, t = "") {
 	let n = typeof e == "string" ? e : e.source, r = {
 		replace: (e, t) => {
 			let i = typeof t == "string" ? t : t.source;
-			return i = i.replace(V.caret, "$1"), n = n.replace(e, i), r;
+			return i = i.replace(W.caret, "$1"), n = n.replace(e, i), r;
 		},
 		getRegex: () => new RegExp(n, t)
 	};
 	return r;
 }
-var V = {
+var W = {
 	codeRemoveIndent: /^(?: {1,4}| {0,3}\t)/gm,
 	outputLinkReplace: /\\([\[\]])/g,
 	indentCodeCompensation: /^(\s+)(?:```)/,
@@ -181,78 +181,78 @@ var V = {
 	fencesBeginRegex: (e) => RegExp(`^ {0,${Math.min(3, e - 1)}}(?:\`\`\`|~~~)`),
 	headingBeginRegex: (e) => RegExp(`^ {0,${Math.min(3, e - 1)}}#`),
 	htmlBeginRegex: (e) => RegExp(`^ {0,${Math.min(3, e - 1)}}<(?:[a-z].*>|!--)`, "i")
-}, Me = /^(?:[ \t]*(?:\n|$))+/, Ne = /^((?: {4}| {0,3}\t)[^\n]+(?:\n(?:[ \t]*(?:\n|$))*)?)+/, Pe = /^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})([^\n]*)(?:\n|$)(?:|([\s\S]*?)(?:\n|$))(?: {0,3}\1[~`]* *(?=\n|$)|$)/, H = /^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/, Fe = /^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/, Ie = /(?:[*+-]|\d{1,9}[.)])/, Le = /^(?!bull |blockCode|fences|blockquote|heading|html|table)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html|table))+?)\n {0,3}(=+|-+) *(?:\n+|$)/, Re = B(Le).replace(/bull/g, Ie).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/\|table/g, "").getRegex(), ze = B(Le).replace(/bull/g, Ie).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/table/g, / {0,3}\|?(?:[:\- ]*\|)+[\:\- ]*\n/).getRegex(), Be = /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/, Ve = /^[^\n]+/, He = /(?!\s*\])(?:\\.|[^\[\]\\])+/, Ue = B(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label", He).replace("title", /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex(), We = B(/^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/).replace(/bull/g, Ie).getRegex(), U = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul", Ge = /<!--(?:-?>|[\s\S]*?(?:-->|$))/, Ke = B("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|<![A-Z][\\s\\S]*?(?:>\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$))", "i").replace("comment", Ge).replace("tag", U).replace("attribute", / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex(), qe = B(Be).replace("hr", H).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", U).getRegex(), Je = {
-	blockquote: B(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph", qe).getRegex(),
-	code: Ne,
-	def: Ue,
-	fences: Pe,
-	heading: Fe,
-	hr: H,
-	html: Ke,
-	lheading: Re,
-	list: We,
-	newline: Me,
-	paragraph: qe,
-	table: z,
-	text: Ve
-}, Ye = B("^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)").replace("hr", H).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("blockquote", " {0,3}>").replace("code", "(?: {4}| {0,3}	)[^\\n]").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", U).getRegex(), Xe = {
-	...Je,
-	lheading: ze,
-	table: Ye,
-	paragraph: B(Be).replace("hr", H).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("table", Ye).replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", U).getRegex()
-}, Ze = {
-	...Je,
-	html: B("^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:\"[^\"]*\"|'[^']*'|\\s[^'\"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))").replace("comment", Ge).replace(/tag/g, "(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(),
+}, ke = /^(?:[ \t]*(?:\n|$))+/, Ae = /^((?: {4}| {0,3}\t)[^\n]+(?:\n(?:[ \t]*(?:\n|$))*)?)+/, je = /^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})([^\n]*)(?:\n|$)(?:|([\s\S]*?)(?:\n|$))(?: {0,3}\1[~`]* *(?=\n|$)|$)/, G = /^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/, Me = /^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/, Ne = /(?:[*+-]|\d{1,9}[.)])/, Pe = /^(?!bull |blockCode|fences|blockquote|heading|html|table)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html|table))+?)\n {0,3}(=+|-+) *(?:\n+|$)/, Fe = U(Pe).replace(/bull/g, Ne).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/\|table/g, "").getRegex(), Ie = U(Pe).replace(/bull/g, Ne).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/table/g, / {0,3}\|?(?:[:\- ]*\|)+[\:\- ]*\n/).getRegex(), Le = /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/, Re = /^[^\n]+/, ze = /(?!\s*\])(?:\\.|[^\[\]\\])+/, Be = U(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label", ze).replace("title", /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex(), Ve = U(/^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/).replace(/bull/g, Ne).getRegex(), He = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul", Ue = /<!--(?:-?>|[\s\S]*?(?:-->|$))/, We = U("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|<![A-Z][\\s\\S]*?(?:>\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$))", "i").replace("comment", Ue).replace("tag", He).replace("attribute", / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex(), Ge = U(Le).replace("hr", G).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", He).getRegex(), Ke = {
+	blockquote: U(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph", Ge).getRegex(),
+	code: Ae,
+	def: Be,
+	fences: je,
+	heading: Me,
+	hr: G,
+	html: We,
+	lheading: Fe,
+	list: Ve,
+	newline: ke,
+	paragraph: Ge,
+	table: H,
+	text: Re
+}, qe = U("^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)").replace("hr", G).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("blockquote", " {0,3}>").replace("code", "(?: {4}| {0,3}	)[^\\n]").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", He).getRegex(), Je = {
+	...Ke,
+	lheading: Ie,
+	table: qe,
+	paragraph: U(Le).replace("hr", G).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("table", qe).replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", He).getRegex()
+}, Ye = {
+	...Ke,
+	html: U("^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:\"[^\"]*\"|'[^']*'|\\s[^'\"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))").replace("comment", Ue).replace(/tag/g, "(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(),
 	def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/,
 	heading: /^(#{1,6})(.*)(?:\n+|$)/,
-	fences: z,
+	fences: H,
 	lheading: /^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/,
-	paragraph: B(Be).replace("hr", H).replace("heading", " *#{1,6} *[^\n]").replace("lheading", Re).replace("|table", "").replace("blockquote", " {0,3}>").replace("|fences", "").replace("|list", "").replace("|html", "").replace("|tag", "").getRegex()
-}, Qe = /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/, $e = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/, et = /^( {2,}|\\)\n(?!\s*$)/, tt = /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/, W = /[\p{P}\p{S}]/u, nt = /[\s\p{P}\p{S}]/u, rt = /[^\s\p{P}\p{S}]/u, it = B(/^((?![*_])punctSpace)/, "u").replace(/punctSpace/g, nt).getRegex(), at = /(?!~)[\p{P}\p{S}]/u, ot = /(?!~)[\s\p{P}\p{S}]/u, st = /(?:[^\s\p{P}\p{S}]|~)/u, ct = /\[[^[\]]*?\]\((?:\\.|[^\\\(\)]|\((?:\\.|[^\\\(\)])*\))*\)|`[^`]*?`|<[^<>]*?>/g, lt = /^(?:\*+(?:((?!\*)punct)|[^\s*]))|^_+(?:((?!_)punct)|([^\s_]))/, ut = B(lt, "u").replace(/punct/g, W).getRegex(), dt = B(lt, "u").replace(/punct/g, at).getRegex(), ft = "^[^_*]*?__[^_*]*?\\*[^_*]*?(?=__)|[^*]+(?=[^*])|(?!\\*)punct(\\*+)(?=[\\s]|$)|notPunctSpace(\\*+)(?!\\*)(?=punctSpace|$)|(?!\\*)punctSpace(\\*+)(?=notPunctSpace)|[\\s](\\*+)(?!\\*)(?=punct)|(?!\\*)punct(\\*+)(?!\\*)(?=punct)|notPunctSpace(\\*+)(?=notPunctSpace)", pt = B(ft, "gu").replace(/notPunctSpace/g, rt).replace(/punctSpace/g, nt).replace(/punct/g, W).getRegex(), mt = B(ft, "gu").replace(/notPunctSpace/g, st).replace(/punctSpace/g, ot).replace(/punct/g, at).getRegex(), ht = B("^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|(?!_)punct(_+)(?=[\\s]|$)|notPunctSpace(_+)(?!_)(?=punctSpace|$)|(?!_)punctSpace(_+)(?=notPunctSpace)|[\\s](_+)(?!_)(?=punct)|(?!_)punct(_+)(?!_)(?=punct)", "gu").replace(/notPunctSpace/g, rt).replace(/punctSpace/g, nt).replace(/punct/g, W).getRegex(), gt = B(/\\(punct)/, "gu").replace(/punct/g, W).getRegex(), _t = B(/^<(scheme:[^\s\x00-\x1f<>]*|email)>/).replace("scheme", /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/).replace("email", /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/).getRegex(), vt = B(Ge).replace("(?:-->|$)", "-->").getRegex(), yt = B("^comment|^</[a-zA-Z][\\w:-]*\\s*>|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>|^<\\?[\\s\\S]*?\\?>|^<![a-zA-Z]+\\s[\\s\\S]*?>|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>").replace("comment", vt).replace("attribute", /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/).getRegex(), G = /(?:\[(?:\\.|[^\[\]\\])*\]|\\.|`[^`]*`|[^\[\]\\`])*?/, bt = B(/^!?\[(label)\]\(\s*(href)(?:(?:[ \t]*(?:\n[ \t]*)?)(title))?\s*\)/).replace("label", G).replace("href", /<(?:\\.|[^\n<>\\])+>|[^ \t\n\x00-\x1f]*/).replace("title", /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/).getRegex(), xt = B(/^!?\[(label)\]\[(ref)\]/).replace("label", G).replace("ref", He).getRegex(), St = B(/^!?\[(ref)\](?:\[\])?/).replace("ref", He).getRegex(), Ct = {
-	_backpedal: z,
-	anyPunctuation: gt,
-	autolink: _t,
-	blockSkip: ct,
-	br: et,
-	code: $e,
-	del: z,
-	emStrongLDelim: ut,
-	emStrongRDelimAst: pt,
-	emStrongRDelimUnd: ht,
-	escape: Qe,
-	link: bt,
-	nolink: St,
-	punctuation: it,
-	reflink: xt,
-	reflinkSearch: B("reflink|nolink(?!\\()", "g").replace("reflink", xt).replace("nolink", St).getRegex(),
-	tag: yt,
-	text: tt,
-	url: z
+	paragraph: U(Le).replace("hr", G).replace("heading", " *#{1,6} *[^\n]").replace("lheading", Fe).replace("|table", "").replace("blockquote", " {0,3}>").replace("|fences", "").replace("|list", "").replace("|html", "").replace("|tag", "").getRegex()
+}, Xe = /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/, Ze = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/, Qe = /^( {2,}|\\)\n(?!\s*$)/, $e = /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/, K = /[\p{P}\p{S}]/u, et = /[\s\p{P}\p{S}]/u, tt = /[^\s\p{P}\p{S}]/u, nt = U(/^((?![*_])punctSpace)/, "u").replace(/punctSpace/g, et).getRegex(), rt = /(?!~)[\p{P}\p{S}]/u, it = /(?!~)[\s\p{P}\p{S}]/u, at = /(?:[^\s\p{P}\p{S}]|~)/u, ot = /\[[^[\]]*?\]\((?:\\.|[^\\\(\)]|\((?:\\.|[^\\\(\)])*\))*\)|`[^`]*?`|<[^<>]*?>/g, st = /^(?:\*+(?:((?!\*)punct)|[^\s*]))|^_+(?:((?!_)punct)|([^\s_]))/, ct = U(st, "u").replace(/punct/g, K).getRegex(), lt = U(st, "u").replace(/punct/g, rt).getRegex(), ut = "^[^_*]*?__[^_*]*?\\*[^_*]*?(?=__)|[^*]+(?=[^*])|(?!\\*)punct(\\*+)(?=[\\s]|$)|notPunctSpace(\\*+)(?!\\*)(?=punctSpace|$)|(?!\\*)punctSpace(\\*+)(?=notPunctSpace)|[\\s](\\*+)(?!\\*)(?=punct)|(?!\\*)punct(\\*+)(?!\\*)(?=punct)|notPunctSpace(\\*+)(?=notPunctSpace)", dt = U(ut, "gu").replace(/notPunctSpace/g, tt).replace(/punctSpace/g, et).replace(/punct/g, K).getRegex(), ft = U(ut, "gu").replace(/notPunctSpace/g, at).replace(/punctSpace/g, it).replace(/punct/g, rt).getRegex(), pt = U("^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|(?!_)punct(_+)(?=[\\s]|$)|notPunctSpace(_+)(?!_)(?=punctSpace|$)|(?!_)punctSpace(_+)(?=notPunctSpace)|[\\s](_+)(?!_)(?=punct)|(?!_)punct(_+)(?!_)(?=punct)", "gu").replace(/notPunctSpace/g, tt).replace(/punctSpace/g, et).replace(/punct/g, K).getRegex(), mt = U(/\\(punct)/, "gu").replace(/punct/g, K).getRegex(), ht = U(/^<(scheme:[^\s\x00-\x1f<>]*|email)>/).replace("scheme", /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/).replace("email", /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/).getRegex(), gt = U(Ue).replace("(?:-->|$)", "-->").getRegex(), _t = U("^comment|^</[a-zA-Z][\\w:-]*\\s*>|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>|^<\\?[\\s\\S]*?\\?>|^<![a-zA-Z]+\\s[\\s\\S]*?>|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>").replace("comment", gt).replace("attribute", /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/).getRegex(), vt = /(?:\[(?:\\.|[^\[\]\\])*\]|\\.|`[^`]*`|[^\[\]\\`])*?/, yt = U(/^!?\[(label)\]\(\s*(href)(?:(?:[ \t]*(?:\n[ \t]*)?)(title))?\s*\)/).replace("label", vt).replace("href", /<(?:\\.|[^\n<>\\])+>|[^ \t\n\x00-\x1f]*/).replace("title", /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/).getRegex(), bt = U(/^!?\[(label)\]\[(ref)\]/).replace("label", vt).replace("ref", ze).getRegex(), xt = U(/^!?\[(ref)\](?:\[\])?/).replace("ref", ze).getRegex(), St = {
+	_backpedal: H,
+	anyPunctuation: mt,
+	autolink: ht,
+	blockSkip: ot,
+	br: Qe,
+	code: Ze,
+	del: H,
+	emStrongLDelim: ct,
+	emStrongRDelimAst: dt,
+	emStrongRDelimUnd: pt,
+	escape: Xe,
+	link: yt,
+	nolink: xt,
+	punctuation: nt,
+	reflink: bt,
+	reflinkSearch: U("reflink|nolink(?!\\()", "g").replace("reflink", bt).replace("nolink", xt).getRegex(),
+	tag: _t,
+	text: $e,
+	url: H
+}, Ct = {
+	...St,
+	link: U(/^!?\[(label)\]\((.*?)\)/).replace("label", vt).getRegex(),
+	reflink: U(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace("label", vt).getRegex()
 }, wt = {
-	...Ct,
-	link: B(/^!?\[(label)\]\((.*?)\)/).replace("label", G).getRegex(),
-	reflink: B(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace("label", G).getRegex()
-}, Tt = {
-	...Ct,
-	emStrongRDelimAst: mt,
-	emStrongLDelim: dt,
-	url: B(/^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/, "i").replace("email", /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/).getRegex(),
+	...St,
+	emStrongRDelimAst: ft,
+	emStrongLDelim: lt,
+	url: U(/^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/, "i").replace("email", /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/).getRegex(),
 	_backpedal: /(?:[^?!.,:;*_'"~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_'"~)]+(?!$))+/,
 	del: /^(~~?)(?=[^\s~])((?:\\.|[^\\])*?(?:\\.|[^\s~\\]))\1(?=[^~]|$)/,
 	text: /^([`~]+|[^`~])(?:(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|https?:\/\/|ftp:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/
+}, Tt = {
+	...wt,
+	br: U(Qe).replace("{2,}", "*").getRegex(),
+	text: U(wt.text).replace("\\b_", "\\b_| {2,}\\n").replace(/\{2,\}/g, "*").getRegex()
 }, Et = {
-	...Tt,
-	br: B(et).replace("{2,}", "*").getRegex(),
-	text: B(Tt.text).replace("\\b_", "\\b_| {2,}\\n").replace(/\{2,\}/g, "*").getRegex()
-}, K = {
-	normal: Je,
-	gfm: Xe,
-	pedantic: Ze
+	normal: Ke,
+	gfm: Je,
+	pedantic: Ye
 }, q = {
-	normal: Ct,
-	gfm: Tt,
-	breaks: Et,
-	pedantic: wt
+	normal: St,
+	gfm: wt,
+	breaks: Tt,
+	pedantic: Ct
 }, Dt = {
 	"&": "&amp;",
 	"<": "&lt;",
@@ -262,27 +262,27 @@ var V = {
 }, Ot = (e) => Dt[e];
 function J(e, t) {
 	if (t) {
-		if (V.escapeTest.test(e)) return e.replace(V.escapeReplace, Ot);
-	} else if (V.escapeTestNoEncode.test(e)) return e.replace(V.escapeReplaceNoEncode, Ot);
+		if (W.escapeTest.test(e)) return e.replace(W.escapeReplace, Ot);
+	} else if (W.escapeTestNoEncode.test(e)) return e.replace(W.escapeReplaceNoEncode, Ot);
 	return e;
 }
 function kt(e) {
 	try {
-		e = encodeURI(e).replace(V.percentDecode, "%");
+		e = encodeURI(e).replace(W.percentDecode, "%");
 	} catch {
 		return null;
 	}
 	return e;
 }
 function At(e, t) {
-	let n = e.replace(V.findPipe, (e, t, n) => {
+	let n = e.replace(W.findPipe, (e, t, n) => {
 		let r = !1, i = t;
 		for (; --i >= 0 && n[i] === "\\";) r = !r;
 		return r ? "|" : " |";
-	}).split(V.splitPipe), r = 0;
+	}).split(W.splitPipe), r = 0;
 	if (n[0].trim() || n.shift(), n.length > 0 && !n.at(-1)?.trim() && n.pop(), t) if (n.length > t) n.splice(t);
 	else for (; n.length < t;) n.push("");
-	for (; r < n.length; r++) n[r] = n[r].trim().replace(V.slashPipe, "|");
+	for (; r < n.length; r++) n[r] = n[r].trim().replace(W.slashPipe, "|");
 	return n;
 }
 function Y(e, t, n) {
@@ -334,7 +334,7 @@ var Pt = class {
 	rules;
 	lexer;
 	constructor(e) {
-		this.options = e || R;
+		this.options = e || V;
 	}
 	space(e) {
 		let t = this.rules.block.newline.exec(e);
@@ -747,21 +747,21 @@ ${c}` : c;
 	tokenizer;
 	inlineQueue;
 	constructor(e) {
-		this.tokens = [], this.tokens.links = /* @__PURE__ */ Object.create(null), this.options = e || R, this.options.tokenizer = this.options.tokenizer || new Pt(), this.tokenizer = this.options.tokenizer, this.tokenizer.options = this.options, this.tokenizer.lexer = this, this.inlineQueue = [], this.state = {
+		this.tokens = [], this.tokens.links = /* @__PURE__ */ Object.create(null), this.options = e || V, this.options.tokenizer = this.options.tokenizer || new Pt(), this.tokenizer = this.options.tokenizer, this.tokenizer.options = this.options, this.tokenizer.lexer = this, this.inlineQueue = [], this.state = {
 			inLink: !1,
 			inRawBlock: !1,
 			top: !0
 		};
 		let t = {
-			other: V,
-			block: K.normal,
+			other: W,
+			block: Et.normal,
 			inline: q.normal
 		};
-		this.options.pedantic ? (t.block = K.pedantic, t.inline = q.pedantic) : this.options.gfm && (t.block = K.gfm, this.options.breaks ? t.inline = q.breaks : t.inline = q.gfm), this.tokenizer.rules = t;
+		this.options.pedantic ? (t.block = Et.pedantic, t.inline = q.pedantic) : this.options.gfm && (t.block = Et.gfm, this.options.breaks ? t.inline = q.breaks : t.inline = q.gfm), this.tokenizer.rules = t;
 	}
 	static get rules() {
 		return {
-			block: K,
+			block: Et,
 			inline: q
 		};
 	}
@@ -772,7 +772,7 @@ ${c}` : c;
 		return new e(n).inlineTokens(t);
 	}
 	lex(e) {
-		e = e.replace(V.carriageReturn, "\n"), this.blockTokens(e, this.tokens);
+		e = e.replace(W.carriageReturn, "\n"), this.blockTokens(e, this.tokens);
 		for (let e = 0; e < this.inlineQueue.length; e++) {
 			let t = this.inlineQueue[e];
 			this.inlineTokens(t.src, t.tokens);
@@ -780,7 +780,7 @@ ${c}` : c;
 		return this.inlineQueue = [], this.tokens;
 	}
 	blockTokens(e, t = [], n = !1) {
-		for (this.options.pedantic && (e = e.replace(V.tabCharGlobal, "    ").replace(V.spaceLine, "")); e;) {
+		for (this.options.pedantic && (e = e.replace(W.tabCharGlobal, "    ").replace(W.spaceLine, "")); e;) {
 			let r;
 			if (this.options.extensions?.block?.some((n) => (r = n.call({ lexer: this }, e, t)) ? (e = e.substring(r.raw.length), t.push(r), !0) : !1)) continue;
 			if (r = this.tokenizer.space(e)) {
@@ -952,13 +952,13 @@ ${c}` : c;
 	options;
 	parser;
 	constructor(e) {
-		this.options = e || R;
+		this.options = e || V;
 	}
 	space(e) {
 		return "";
 	}
 	code({ text: e, lang: t, escaped: n }) {
-		let r = (t || "").match(V.notSpaceStart)?.[0], i = e.replace(V.endingNewline, "") + "\n";
+		let r = (t || "").match(W.notSpaceStart)?.[0], i = e.replace(W.endingNewline, "") + "\n";
 		return r ? "<pre><code class=\"language-" + J(r) + "\">" + (n ? i : J(i, !0)) + "</code></pre>\n" : "<pre><code>" + (n ? i : J(i, !0)) + "</code></pre>\n";
 	}
 	blockquote({ tokens: e }) {
@@ -1095,7 +1095,7 @@ ${e}</tr>
 	renderer;
 	textRenderer;
 	constructor(e) {
-		this.options = e || R, this.options.renderer = this.options.renderer || new Ft(), this.renderer = this.options.renderer, this.renderer.options = this.options, this.renderer.parser = this, this.textRenderer = new It();
+		this.options = e || V, this.options.renderer = this.options.renderer || new Ft(), this.renderer = this.options.renderer, this.renderer.options = this.options, this.renderer.parser = this, this.textRenderer = new It();
 	}
 	static parse(t, n) {
 		return new e(n).parse(t);
@@ -1246,7 +1246,7 @@ ${e}</tr>
 	options;
 	block;
 	constructor(e) {
-		this.options = e || R;
+		this.options = e || V;
 	}
 	static passThroughHooks = /* @__PURE__ */ new Set([
 		"preprocess",
@@ -1269,7 +1269,7 @@ ${e}</tr>
 		return this.block ? Z.parse : Z.parseInline;
 	}
 }, Q = new class {
-	defaults = Ae();
+	defaults = De();
 	options = this.setOptions;
 	parse = this.parseMarkdown(!0);
 	parseInline = this.parseMarkdown(!1);
@@ -1440,9 +1440,9 @@ function $(e, t) {
 //#endregion
 //#region src/lib/markdown.ts
 $.options = $.setOptions = function(e) {
-	return Q.setOptions(e), $.defaults = Q.defaults, je($.defaults), $;
-}, $.getDefaults = Ae, $.defaults = R, $.use = function(...e) {
-	return Q.use(...e), $.defaults = Q.defaults, je($.defaults), $;
+	return Q.setOptions(e), $.defaults = Q.defaults, Oe($.defaults), $;
+}, $.getDefaults = De, $.defaults = V, $.use = function(...e) {
+	return Q.use(...e), $.defaults = Q.defaults, Oe($.defaults), $;
 }, $.walkTokens = function(e, t) {
 	return Q.walkTokens(e, t);
 }, $.parseInline = Q.parseInline, $.Parser = Z, $.parser = Z.parse, $.Renderer = Ft, $.TextRenderer = It, $.Lexer = X, $.lexer = X.lex, $.Tokenizer = Pt, $.Hooks = Lt, $.parse = $, $.options, $.setOptions, $.use, $.walkTokens, $.parseInline, Z.parse, X.lex, $.setOptions({
@@ -1471,17 +1471,17 @@ var zt = {
 		function t(e) {
 			return `${e}px`;
 		}
-		return (n, r) => e.frame === "phone" || e.frame === "tablet" ? (m(), a("div", zt, [o("div", Bt, [o("div", {
+		return (n, r) => e.frame === "phone" || e.frame === "tablet" ? (h(), a("div", zt, [o("div", Bt, [o("div", {
 			class: "relative overflow-hidden rounded-[1.8rem]",
 			style: f({
 				width: t(e.screenWidth),
 				...e.baseStyle
 			})
 		}, [
-			e.frame === "phone" ? (m(), a("div", Vt)) : i("", !0),
-			_(n.$slots, "default"),
+			e.frame === "phone" ? (h(), a("div", Vt)) : i("", !0),
+			v(n.$slots, "default"),
 			r[0] ||= o("div", { class: "pointer-events-none absolute bottom-2 left-1/2 z-10 h-1 w-24 -translate-x-1/2 rounded-full bg-gray-300 dark:bg-gray-600" }, null, -1)
-		], 4)])])) : (m(), a("div", {
+		], 4)])])) : (h(), a("div", {
 			key: 1,
 			class: "inline-block overflow-hidden rounded-xl border-2 border-gray-300 shadow-sm dark:border-gray-700",
 			style: f({ width: t(e.screenWidth) })
@@ -1489,7 +1489,7 @@ var zt = {
 			o("span", { class: "h-3 w-3 rounded-full bg-red-400" }),
 			o("span", { class: "h-3 w-3 rounded-full bg-yellow-400" }),
 			o("span", { class: "h-3 w-3 rounded-full bg-green-400" })
-		], -1), o("div", { style: f(e.baseStyle) }, [_(n.$slots, "default")], 4)], 4));
+		], -1), o("div", { style: f(e.baseStyle) }, [v(n.$slots, "default")], 4)], 4));
 	}
 }), Ut = {
 	key: 0,
@@ -1510,15 +1510,15 @@ var zt = {
 		doc: {}
 	},
 	setup(n) {
-		let l = n, te = t(() => Rt(l.doc)), { isDark: re, toggle: ie } = pe(), ae = se(), S = ce(), C = h(S[0]?.id ?? ""), w = t(() => S.find((e) => e.id === C.value) ?? S[0]), T = le(), E = t(() => {
-			if (!T) return {};
-			let e = re.value ? T.dark : T.light;
+		let l = n, ee = t(() => Rt(l.doc)), { isDark: ne, toggle: C } = ue(), re = ae(), w = oe(), T = g(w[0]?.id ?? ""), E = t(() => w.find((e) => e.id === T.value) ?? w[0]), D = se(), O = t(() => {
+			if (!D) return {};
+			let e = ne.value ? D.dark : D.light;
 			return {
 				background: e.bg,
 				color: e.font
 			};
-		}), D = h(null), O = h(null), k = h(0), oe = h(0), ue = h(0), A = h(!1), de = h(null), fe = t(() => {
-			let e = w.value;
+		}), k = g(null), A = g(null), j = g(0), ie = g(0), M = g(0), N = g(!1), ce = g(null), le = t(() => {
+			let e = E.value;
 			return e ? {
 				min: e.minWidth,
 				max: e.maxWidth
@@ -1527,168 +1527,171 @@ var zt = {
 				max: 0
 			};
 		});
-		function j() {
-			let e = w.value;
+		function P() {
+			let e = E.value;
 			if (!e) return 0;
-			let t = de.value ?? e.minWidth;
+			let t = ce.value ?? e.minWidth;
 			return Math.min(e.maxWidth, Math.max(e.minWidth, t));
 		}
-		let M = t(() => j()), N = t(() => {
-			let e = w.value;
+		let F = t(() => P()), I = t(() => {
+			let e = E.value;
 			return !!e && e.minWidth < e.maxWidth;
-		}), P = t(() => {
-			if (A.value) return 1;
-			let e = ue.value || M.value;
-			return !e || k.value === 0 ? 1 : Math.min(1, k.value / e);
-		}), me = t(() => {
-			let e = ue.value || M.value;
-			return e ? e * P.value : 0;
-		}), he = t(() => oe.value * P.value), ge = t(() => A.value && M.value > 0 && k.value > 0 && M.value < k.value), F = h(!1), _e = 0, ve = 0, ye = 1;
-		function be(e) {
-			let t = w.value;
-			t && (de.value = Math.min(t.maxWidth, Math.max(t.minWidth, e)));
+		}), L = t(() => {
+			if (N.value) return 1;
+			let e = M.value || F.value;
+			return !e || j.value === 0 ? 1 : Math.min(1, j.value / e);
+		}), de = t(() => {
+			let e = M.value || F.value;
+			return e ? e * L.value : 0;
+		}), fe = t(() => ie.value * L.value), pe = t(() => N.value && F.value > 0 && j.value > 0 && F.value < j.value), R = g(!1), me = 0, he = 0, ge = 1;
+		function _e(e) {
+			let t = E.value;
+			t && (ce.value = Math.min(t.maxWidth, Math.max(t.minWidth, e)));
 		}
-		function xe(e) {
-			let t = M.value;
-			C.value = e, be(t);
+		function ve(e) {
+			let t = F.value;
+			T.value = e, _e(t);
 		}
-		function Se(e) {
-			if (!w.value || !N.value) return;
+		function ye(e) {
+			if (!E.value || !I.value) return;
 			e.preventDefault(), e.stopPropagation();
 			let t = e.currentTarget;
-			t.setPointerCapture(e.pointerId), F.value = !0, _e = e.clientX, ve = M.value, ye = P.value, document.body.style.userSelect = "none", document.body.style.cursor = "ew-resize";
+			t.setPointerCapture(e.pointerId), R.value = !0, me = e.clientX, he = F.value, ge = L.value, document.body.style.userSelect = "none", document.body.style.cursor = "ew-resize";
 			function n(e) {
 				if (!e.isPrimary) return;
-				let t = (e.clientX - _e) / ye;
-				be(ve + t);
+				let t = (e.clientX - me) / ge;
+				_e(he + t);
 			}
 			function r(e) {
-				e.isPrimary && (t.releasePointerCapture(e.pointerId), F.value = !1, document.body.style.userSelect = "", document.body.style.cursor = "", t.removeEventListener("pointermove", n), t.removeEventListener("pointerup", r), t.removeEventListener("pointercancel", r), u(L));
+				e.isPrimary && (t.releasePointerCapture(e.pointerId), R.value = !1, document.body.style.userSelect = "", document.body.style.cursor = "", t.removeEventListener("pointermove", n), t.removeEventListener("pointerup", r), t.removeEventListener("pointercancel", r), u(B));
 			}
 			t.addEventListener("pointermove", n), t.addEventListener("pointerup", r), t.addEventListener("pointercancel", r);
 		}
-		let I = null;
-		function L() {
-			D.value && (k.value = D.value.clientWidth), O.value && (oe.value = O.value.offsetHeight, ue.value = O.value.offsetWidth);
+		let z = null;
+		function B() {
+			k.value && (j.value = k.value.clientWidth), A.value && (ie.value = A.value.offsetHeight, M.value = A.value.offsetWidth);
 		}
-		function Ce() {
-			I?.disconnect(), D.value && I?.observe(D.value), O.value && I?.observe(O.value);
+		function be() {
+			z?.disconnect(), k.value && z?.observe(k.value), A.value && z?.observe(A.value);
 		}
-		function we(e) {
-			e.key === "Escape" && (A.value = !1);
+		function xe(e) {
+			e.key === "Escape" && (N.value = !1);
 		}
-		return ee(() => {
-			I = new ResizeObserver(() => L()), Ce(), L(), window.addEventListener("keydown", we);
+		return m(() => {
+			z = new ResizeObserver(() => B()), be(), B(), window.addEventListener("keydown", xe);
 		}), p(() => {
-			I?.disconnect(), window.removeEventListener("keydown", we);
-		}), ne([
-			C,
-			A,
-			M
+			z?.disconnect(), window.removeEventListener("keydown", xe);
+		}), te([
+			T,
+			N,
+			F
 		], () => u(() => {
-			Ce(), L();
-		})), (t, l) => A.value ? (m(), a("div", rn, [o("button", {
+			be(), B();
+		})), (t, l) => N.value ? (h(), a("div", rn, [o("button", {
 			type: "button",
 			class: "fixed right-4 top-4 z-10 rounded-md border border-gray-300 bg-white px-3 py-1 text-xs font-bold text-gray-700 shadow-sm transition hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
-			onClick: l[2] ||= (e) => A.value = !1
+			onClick: l[2] ||= (e) => N.value = !1
 		}, " 閉じる（Esc） "), o("div", {
 			ref_key: "areaRef",
-			ref: D,
+			ref: k,
 			class: "flex min-h-full w-full justify-center"
-		}, [w.value ? (m(), a("div", {
+		}, [E.value ? (h(), a("div", {
 			key: 0,
-			class: d(["relative w-fit shrink-0", ge.value ? "border border-gray-300 shadow-lg dark:border-gray-600" : ""])
+			class: d(["relative w-fit shrink-0", pe.value ? "border border-gray-300 shadow-lg dark:border-gray-600" : ""])
 		}, [o("div", {
 			ref_key: "contentRef",
-			ref: O,
+			ref: A,
 			class: "w-fit"
-		}, [w.value ? (m(), r(Ht, {
+		}, [E.value ? (h(), r(Ht, {
 			key: 0,
-			frame: w.value.frame,
-			"screen-width": M.value,
-			"base-style": E.value
+			frame: E.value.frame,
+			"screen-width": F.value,
+			"base-style": O.value
 		}, {
-			default: b(() => [_(t.$slots, "mock")]),
+			default: x(() => [v(t.$slots, "mock")]),
 			_: 3
 		}, 8, [
 			"frame",
 			"screen-width",
 			"base-style"
-		])) : i("", !0)], 512), N.value ? (m(), a("div", {
+		])) : i("", !0)], 512), I.value ? (h(), a("div", {
 			key: 0,
-			class: d(["absolute inset-y-0 -right-1 z-20 flex w-3 cursor-ew-resize touch-none items-center justify-center opacity-60 hover:opacity-100", F.value ? "opacity-100" : ""]),
-			onPointerdown: Se
-		}, [o("div", { class: d(["h-10 w-1 rounded-full bg-gray-400 dark:bg-gray-500", F.value ? "bg-blue-500 dark:bg-blue-400" : ""]) }, null, 2)], 34)) : i("", !0)], 2)) : i("", !0)], 512)])) : (m(), a("div", Ut, [o("header", Wt, [
-			c(y(x), {
+			class: d(["absolute inset-y-0 -right-1 z-20 flex w-3 cursor-ew-resize touch-none items-center justify-center opacity-60 hover:opacity-100", R.value ? "opacity-100" : ""]),
+			onPointerdown: ye
+		}, [o("div", { class: d(["h-10 w-1 rounded-full bg-gray-400 dark:bg-gray-500", R.value ? "bg-blue-500 dark:bg-blue-400" : ""]) }, null, 2)], 34)) : i("", !0)], 2)) : i("", !0)], 512)])) : (h(), a("div", Ut, [o("header", Wt, [
+			c(b(S), {
 				to: "/catalog",
 				class: "text-sm text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
 			}, {
-				default: b(() => [...l[3] ||= [s(" ← 一覧 ", -1)]]),
+				default: x(() => [...l[3] ||= [s(" ← 一覧 ", -1)]]),
 				_: 1
 			}),
-			o("h1", Gt, v(n.title), 1),
+			o("h1", Gt, y(n.title), 1),
 			o("div", Kt, [
-				_(t.$slots, "toolbar"),
+				v(t.$slots, "toolbar"),
 				o("button", {
 					type: "button",
 					class: "rounded-md border border-gray-300 px-3 py-1 text-xs font-bold text-gray-600 transition hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700",
-					onClick: l[0] ||= (e) => A.value = !A.value
-				}, v(A.value ? "要件を表示" : "プレビュー"), 1),
-				y(ae) ? (m(), a("button", {
+					onClick: l[0] ||= (e) => N.value = !N.value
+				}, y(N.value ? "要件を表示" : "プレビュー"), 1),
+				b(re) ? (h(), a("button", {
 					key: 0,
 					type: "button",
 					class: "rounded-md border border-gray-300 px-3 py-1 text-xs font-bold text-gray-600 transition hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700",
-					onClick: l[1] ||= (...e) => y(ie) && y(ie)(...e)
-				}, v(y(re) ? "ライトモード" : "ダークモード"), 1)) : i("", !0)
+					onClick: l[1] ||= (...e) => b(C) && b(C)(...e)
+				}, y(b(ne) ? "ライトモード" : "ダークモード"), 1)) : i("", !0)
 			])
-		]), o("div", qt, [o("section", Jt, [o("div", Yt, [l[4] ||= o("span", { class: "text-xs font-bold uppercase tracking-wide text-gray-400" }, " 画面 mock ", -1), o("div", Xt, [w.value ? (m(), a("span", Zt, [s(v(M.value) + "px ", 1), N.value ? (m(), a("span", Qt, " （" + v(fe.value.min) + "–" + v(fe.value.max) + "） ", 1)) : i("", !0)])) : i("", !0), y(S).length > 1 ? (m(), a("div", {
+		]), o("div", qt, [o("section", Jt, [o("div", Yt, [l[4] ||= o("span", { class: "text-xs font-bold uppercase tracking-wide text-gray-400" }, " 画面 mock ", -1), o("div", Xt, [E.value ? (h(), a("span", Zt, [s(y(F.value) + "px ", 1), I.value ? (h(), a("span", Qt, " （" + y(le.value.min) + "–" + y(le.value.max) + "） ", 1)) : i("", !0)])) : i("", !0), b(w).length > 1 ? (h(), a("div", {
 			key: 1,
-			class: d(["inline-flex overflow-hidden rounded-md border border-gray-300 text-xs font-bold dark:border-gray-600", F.value ? "pointer-events-none" : ""])
-		}, [(m(!0), a(e, null, g(y(S), (e) => (m(), a("button", {
+			class: d(["inline-flex overflow-hidden rounded-md border border-gray-300 text-xs font-bold dark:border-gray-600", R.value ? "pointer-events-none" : ""])
+		}, [(h(!0), a(e, null, _(b(w), (e) => (h(), a("button", {
 			key: e.id,
 			type: "button",
-			class: d(["px-3 py-1 transition", C.value === e.id ? "bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"]),
-			onClick: (t) => xe(e.id)
-		}, v(e.label), 11, $t))), 128))], 2)) : i("", !0)])]), o("div", en, [o("div", {
+			class: d(["px-3 py-1 transition", T.value === e.id ? "bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"]),
+			onClick: (t) => ve(e.id)
+		}, y(e.label), 11, $t))), 128))], 2)) : i("", !0)])]), o("div", en, [o("div", {
 			ref_key: "areaRef",
-			ref: D
-		}, [w.value ? (m(), a("div", {
+			ref: k
+		}, [E.value ? (h(), a("div", {
 			key: 0,
 			class: "relative mx-auto overflow-hidden",
 			style: f({
-				width: me.value ? `${me.value}px` : "",
-				height: oe.value ? `${he.value}px` : "auto"
+				width: de.value ? `${de.value}px` : "",
+				height: ie.value ? `${fe.value}px` : "auto"
 			})
 		}, [o("div", {
 			ref_key: "contentRef",
-			ref: O,
+			ref: A,
 			class: "origin-top-left w-fit",
-			style: f({ transform: `scale(${P.value})` })
-		}, [w.value ? (m(), r(Ht, {
+			style: f({ transform: `scale(${L.value})` })
+		}, [E.value ? (h(), r(Ht, {
 			key: 0,
-			frame: w.value.frame,
-			"screen-width": M.value,
-			"base-style": E.value
+			frame: E.value.frame,
+			"screen-width": F.value,
+			"base-style": O.value
 		}, {
-			default: b(() => [_(t.$slots, "mock")]),
+			default: x(() => [v(t.$slots, "mock")]),
 			_: 3
 		}, 8, [
 			"frame",
 			"screen-width",
 			"base-style"
-		])) : i("", !0)], 4), N.value ? (m(), a("div", {
+		])) : i("", !0)], 4), I.value ? (h(), a("div", {
 			key: 0,
-			class: d(["absolute inset-y-0 -right-1 z-20 flex w-3 cursor-ew-resize touch-none items-center justify-center", F.value ? "opacity-100" : "opacity-60 hover:opacity-100"]),
-			onPointerdown: Se
-		}, [o("div", { class: d(["h-10 w-1 rounded-full bg-gray-400 dark:bg-gray-500", F.value ? "bg-blue-500 dark:bg-blue-400" : ""]) }, null, 2)], 34)) : i("", !0)], 4)) : i("", !0)], 512)])]), o("section", tn, [l[5] ||= o("div", { class: "mb-3 text-xs font-bold uppercase tracking-wide text-gray-400" }, " 要件 ", -1), o("div", {
+			class: d(["absolute inset-y-0 -right-1 z-20 flex w-3 cursor-ew-resize touch-none items-center justify-center", R.value ? "opacity-100" : "opacity-60 hover:opacity-100"]),
+			onPointerdown: ye
+		}, [o("div", { class: d(["h-10 w-1 rounded-full bg-gray-400 dark:bg-gray-500", R.value ? "bg-blue-500 dark:bg-blue-400" : ""]) }, null, 2)], 34)) : i("", !0)], 4)) : i("", !0)], 512)])]), o("section", tn, [l[5] ||= o("div", { class: "mb-3 text-xs font-bold uppercase tracking-wide text-gray-400" }, " 要件 ", -1), o("div", {
 			class: "req-md",
-			innerHTML: te.value
+			innerHTML: ee.value
 		}, null, 8, nn)])])]));
 	}
-}), on = { class: "flex items-center gap-2 text-sm" }, sn = ["value"], cn = ["value"], ln = ["innerHTML"], un = {
+}), on = { class: "flex items-center gap-2 text-sm" }, sn = ["value"], cn = ["value"], ln = {
+	key: 0,
+	class: "mb-3 flex items-center gap-2"
+}, un = { class: "inline-flex overflow-hidden rounded-md border border-gray-300 text-xs font-bold dark:border-gray-600" }, dn = ["onClick"], fn = ["innerHTML"], pn = {
 	key: 1,
 	class: "p-8"
-}, dn = { class: "text-gray-600" }, fn = /* @__PURE__ */ l({
+}, mn = { class: "text-gray-600" }, hn = /* @__PURE__ */ l({
 	__name: "ReqPageView",
 	props: {
 		kind: {},
@@ -1696,44 +1699,60 @@ var zt = {
 		ver: {}
 	},
 	setup(n) {
-		let i = n, l = S(), u = t(() => fe(i.kind, i.name)), d = t(() => i.ver || u.value?.latest || ""), f = t(() => u.value?.versions[d.value]), p = t(() => u.value ? Object.keys(u.value.versions) : []);
-		function ee(e) {
+		let l = n, u = w(), f = t(() => le(l.kind, l.name)), p = t(() => l.ver || f.value?.latest || ""), m = t(() => f.value?.versions[p.value]), v = t(() => f.value ? Object.keys(f.value.versions) : []);
+		function ne(e) {
+			return e ? e.variants?.length ? e.variants : e.view === void 0 ? [] : [{
+				id: "default",
+				label: "default",
+				view: e.view
+			}] : [];
+		}
+		let C = t(() => ne(m.value)), re = t(() => C.value.length > 1), T = g(""), E = t(() => C.value.find((e) => e.id === T.value)?.view ?? C.value[0]?.view);
+		te(() => [m.value, p.value], () => {
+			T.value = C.value[0]?.id ?? "";
+		}, { immediate: !0 });
+		function D(e) {
 			let t = e.target.value;
-			l.push(`/${i.kind}s/${i.name}/${t}`);
+			u.push(`/${l.kind}s/${l.name}/${t}`);
 		}
-		return (t, i) => u.value && f.value ? (m(), r(an, {
+		return (t, l) => f.value && m.value && E.value !== void 0 ? (h(), r(an, {
 			key: 0,
-			title: u.value.title,
-			doc: f.value.req
+			title: f.value.title,
+			doc: m.value.req
 		}, {
-			toolbar: b(() => [o("label", on, [i[0] ||= o("span", { class: "text-gray-500 dark:text-gray-400" }, "バージョン", -1), o("select", {
-				value: d.value,
+			toolbar: x(() => [o("label", on, [l[0] ||= o("span", { class: "text-gray-500 dark:text-gray-400" }, "バージョン", -1), o("select", {
+				value: p.value,
 				class: "rounded border border-gray-300 bg-white px-2 py-1 text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100",
-				onChange: ee
-			}, [(m(!0), a(e, null, g(p.value, (e) => (m(), a("option", {
+				onChange: D
+			}, [(h(!0), a(e, null, _(v.value, (e) => (h(), a("option", {
 				key: e,
 				value: e
-			}, v(e), 9, cn))), 128))], 40, sn)])]),
-			mock: b(() => [typeof f.value.view == "string" ? (m(), a("div", {
-				key: 0,
-				innerHTML: f.value.view
-			}, null, 8, ln)) : (m(), r(te(f.value.view), { key: 1 }))]),
+			}, y(e), 9, cn))), 128))], 40, sn)])]),
+			mock: x(() => [re.value ? (h(), a("div", ln, [l[1] ||= o("span", { class: "text-xs font-bold uppercase tracking-wide text-gray-400" }, "状態", -1), o("div", un, [(h(!0), a(e, null, _(C.value, (e) => (h(), a("button", {
+				key: e.id,
+				type: "button",
+				class: d(["px-3 py-1 transition", T.value === e.id ? "bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"]),
+				onClick: (t) => T.value = e.id
+			}, y(e.label), 11, dn))), 128))])])) : i("", !0), typeof E.value == "string" ? (h(), a("div", {
+				key: 1,
+				innerHTML: E.value
+			}, null, 8, fn)) : (h(), r(ee(E.value), { key: 2 }))]),
 			_: 1
-		}, 8, ["title", "doc"])) : (m(), a("div", un, [o("p", dn, "該当するアイテムが見つかりません: " + v(n.kind) + " / " + v(n.name), 1), c(y(x), {
+		}, 8, ["title", "doc"])) : (h(), a("div", pn, [o("p", mn, "該当するアイテムが見つかりません: " + y(n.kind) + " / " + y(n.name), 1), c(b(S), {
 			to: "/catalog",
 			class: "text-blue-600 underline"
 		}, {
-			default: b(() => [...i[1] ||= [s("← 一覧へ戻る", -1)]]),
+			default: x(() => [...l[2] ||= [s("← 一覧へ戻る", -1)]]),
 			_: 1
 		})]));
 	}
-}), pn = { class: "min-h-screen p-6" }, mn = { class: "mb-5 flex items-center gap-4 rounded-lg border border-gray-200 bg-white px-5 py-3 text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100" }, hn = { class: "rounded-lg bg-gray-50 p-5 transition-colors dark:bg-gray-900" }, gn = { class: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4" }, _n = { class: "p-3" }, vn = { class: "font-mono text-sm font-bold dark:text-gray-100" }, yn = { class: "mt-1 space-y-0.5 font-mono text-xs" }, bn = {
+}), gn = { class: "min-h-screen p-6" }, _n = { class: "mb-5 flex items-center gap-4 rounded-lg border border-gray-200 bg-white px-5 py-3 text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100" }, vn = { class: "rounded-lg bg-gray-50 p-5 transition-colors dark:bg-gray-900" }, yn = { class: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4" }, bn = { class: "p-3" }, xn = { class: "font-mono text-sm font-bold dark:text-gray-100" }, Sn = { class: "mt-1 space-y-0.5 font-mono text-xs" }, Cn = {
 	key: 0,
 	class: "mt-1 text-xs text-gray-600 dark:text-gray-400"
-}, xn = /* @__PURE__ */ l({
+}, wn = /* @__PURE__ */ l({
 	__name: "ColorsView",
 	setup(t) {
-		let { isDark: n, toggle: r } = pe(), l = se(), u = le(), p = [...u ? [{
+		let { isDark: n, toggle: r } = ue(), l = ae(), u = se(), p = [...u ? [{
 			name: "baseBg",
 			light: u.light.bg,
 			dark: u.dark.bg,
@@ -1743,40 +1762,40 @@ var zt = {
 			light: u.light.font,
 			dark: u.dark.font,
 			desc: "モックの基本文字色"
-		}] : [], ...de()];
-		return (t, u) => (m(), a("div", pn, [o("header", mn, [
-			c(y(x), {
+		}] : [], ...ce()];
+		return (t, u) => (h(), a("div", gn, [o("header", _n, [
+			c(b(S), {
 				to: "/catalog",
 				class: "text-sm text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
 			}, {
-				default: b(() => [...u[1] ||= [s(" ← 一覧 ", -1)]]),
+				default: x(() => [...u[1] ||= [s(" ← 一覧 ", -1)]]),
 				_: 1
 			}),
 			u[2] ||= o("h1", { class: "text-lg font-bold" }, "カラー", -1),
-			y(l) ? (m(), a("button", {
+			b(l) ? (h(), a("button", {
 				key: 0,
 				type: "button",
 				class: "ml-auto rounded-md border border-gray-300 px-3 py-1 text-xs font-bold text-gray-600 transition hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700",
-				onClick: u[0] ||= (...e) => y(r) && y(r)(...e)
-			}, v(y(n) ? "ライトモード" : "ダークモード"), 1)) : i("", !0)
-		]), o("div", hn, [o("div", gn, [(m(), a(e, null, g(p, (e) => o("div", {
+				onClick: u[0] ||= (...e) => b(r) && b(r)(...e)
+			}, y(b(n) ? "ライトモード" : "ダークモード"), 1)) : i("", !0)
+		]), o("div", vn, [o("div", yn, [(h(), a(e, null, _(p, (e) => o("div", {
 			key: e.name,
 			class: "overflow-hidden rounded-lg border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800"
 		}, [o("div", {
 			class: "h-24 w-full border-b border-gray-200 dark:border-gray-700",
-			style: f({ background: y(n) ? e.dark : e.light })
-		}, null, 4), o("div", _n, [
-			o("div", vn, v(e.name), 1),
-			o("div", yn, [o("div", { class: d(y(n) ? "text-gray-500" : "font-bold text-gray-700") }, " light: " + v(e.light), 3), o("div", { class: d(y(n) ? "font-bold text-gray-200" : "text-gray-500") }, " dark: " + v(e.dark), 3)]),
-			e.desc ? (m(), a("div", bn, v(e.desc), 1)) : i("", !0)
+			style: f({ background: b(n) ? e.dark : e.light })
+		}, null, 4), o("div", bn, [
+			o("div", xn, y(e.name), 1),
+			o("div", Sn, [o("div", { class: d(b(n) ? "text-gray-500" : "font-bold text-gray-700") }, " light: " + y(e.light), 3), o("div", { class: d(b(n) ? "font-bold text-gray-200" : "text-gray-500") }, " dark: " + y(e.dark), 3)]),
+			e.desc ? (h(), a("div", Cn, y(e.desc), 1)) : i("", !0)
 		])])), 64))])])]));
 	}
 });
 //#endregion
 //#region src/router.ts
-function Sn() {
-	return ie({
-		history: ae(),
+function Tn() {
+	return C({
+		history: re(),
 		routes: [
 			{
 				path: "/",
@@ -1785,17 +1804,17 @@ function Sn() {
 			{
 				path: "/catalog",
 				name: "catalog",
-				component: ke
+				component: Ee
 			},
 			{
 				path: "/colors",
 				name: "colors",
-				component: xn
+				component: wn
 			},
 			{
 				path: "/components/:name/:ver?",
 				name: "component",
-				component: fn,
+				component: hn,
 				props: (e) => ({
 					kind: "component",
 					name: e.params.name,
@@ -1805,7 +1824,7 @@ function Sn() {
 			{
 				path: "/pages/:name/:ver?",
 				name: "page",
-				component: fn,
+				component: hn,
 				props: (e) => ({
 					kind: "page",
 					name: e.params.name,
@@ -1817,10 +1836,10 @@ function Sn() {
 }
 //#endregion
 //#region src/createSpecViewer.ts
-function Cn(e) {
-	oe(e);
-	let t = n(C);
-	return t.use(Sn()), t;
+function En(e) {
+	ie(e);
+	let t = n(T);
+	return t.use(Tn()), t;
 }
 //#endregion
-export { Cn as createSpecViewer };
+export { En as createSpecViewer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "required-doc",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "files": ["dist", "style.css", "types.d.ts"],
   "main": "./dist/index.js",

package/types.d.ts

@@ -2,8 +2,15 @@ import type { App, Component } from 'vue'
 
 export type ItemKind = 'component' | 'page'
 
-export interface VersionEntry {
+export interface ViewVariant {
+  id: string
+  label: string
   view: string | Component
+}
+
+export interface VersionEntry {
+  view?: string | Component
+  variants?: ViewVariant[]
   req: string
 }