required-doc 0.0.4 → 0.0.6

package/dist/index.js

@@ -1,61 +1,61 @@
 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 S, useRouter as C } from "vue-router";
+import { RouterLink as x, RouterView as re, createRouter as ie, createWebHistory as ae, useRouter as S } from "vue-router";
 //#endregion
 //#region src/App.vue
-var w = /* @__PURE__ */ l({
+var C = /* @__PURE__ */ l({
 	__name: "App",
 	setup(e) {
 		return (e, t) => (m(), r(y(re)));
 	}
-}), T = [], E = [], D = [], O = !0, k = [], A;
-function ae(e) {
-	T = e.components, E = e.pages, D = e.colors, O = e.options?.showThemeToggle ?? !0, k = e.options?.devices ?? [], A = e.options?.baseColors;
+}), 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;
 }
-function oe() {
+function se() {
+	return D;
+}
+function ce() {
 	return O;
 }
-function se() {
+function le() {
 	return k;
 }
-function ce() {
-	return A;
+function A() {
+	return w;
 }
-function j() {
+function ue() {
 	return T;
 }
-function le() {
+function de() {
 	return E;
 }
-function ue() {
-	return D;
-}
-function de(e, t) {
-	return [...T, ...E].find((n) => n.kind === e && n.name === t);
+function fe(e, t) {
+	return [...w, ...T].find((n) => n.kind === e && n.name === t);
 }
 //#endregion
 //#region src/lib/theme.ts
-var M = h(!1);
-ne(M, (e) => {
+var j = h(!1);
+ne(j, (e) => {
 	document.documentElement.classList.toggle("dark", e);
 }, { immediate: !0 });
-function fe() {
+function pe() {
 	return {
-		isDark: M,
+		isDark: j,
 		toggle: () => {
-			M.value = !M.value;
+			j.value = !j.value;
 		}
 	};
 }
 //#endregion
 //#region src/catalog/CatalogView.vue?vue&type=script&setup=true&lang.ts
-var pe = { class: "mx-auto min-h-screen max-w-3xl p-8" }, N = { class: "mb-8 flex items-center" }, me = { class: "mb-10" }, he = { class: "space-y-2" }, ge = { class: "font-bold dark:text-gray-100" }, P = { class: "ml-1 text-xs text-gray-400" }, _e = { class: "text-sm text-gray-500 dark:text-gray-400" }, ve = { class: "mb-10" }, ye = { class: "space-y-2" }, be = { class: "font-bold dark:text-gray-100" }, xe = { class: "ml-1 text-xs text-gray-400" }, Se = { class: "text-sm text-gray-500 dark:text-gray-400" }, F = { 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" }, Ce = { class: "flex gap-3" }, we = { class: "font-bold dark:text-gray-100" }, Te = { class: "flex gap-3" }, Ee = { class: "flex-1" }, De = { class: "space-y-1" }, Oe = { class: "space-y-2" }, ke = "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", Ae = /* @__PURE__ */ l({
+var M = { class: "mx-auto min-h-screen max-w-3xl p-8" }, N = { class: "mb-8 flex items-center" }, me = { class: "mb-10" }, he = { class: "space-y-2" }, ge = { class: "font-bold dark:text-gray-100" }, P = { class: "ml-1 text-xs text-gray-400" }, _e = { class: "text-sm text-gray-500 dark:text-gray-400" }, ve = { class: "mb-10" }, ye = { class: "space-y-2" }, be = { class: "font-bold dark:text-gray-100" }, xe = { class: "ml-1 text-xs text-gray-400" }, Se = { class: "text-sm text-gray-500 dark:text-gray-400" }, F = { 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" }, Ce = { class: "flex gap-3" }, we = { class: "font-bold dark:text-gray-100" }, Te = { class: "flex gap-3" }, Ee = { class: "flex-1" }, De = { class: "space-y-1" }, Oe = { class: "space-y-2" }, ke = "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", Ae = /* @__PURE__ */ l({
 	__name: "CatalogView",
 	setup(t) {
-		let { isDark: n, toggle: r } = fe(), l = oe(), u = se(), f = j(), p = le();
+		let { isDark: n, toggle: r } = pe(), l = se(), u = ce(), f = A(), p = ue();
 		function ee(e) {
 			return e.minWidth === e.maxWidth ? `${e.maxWidth}px` : `${e.minWidth}–${e.maxWidth}px`;
 		}
-		return (t, h) => (m(), a("div", pe, [
+		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", {
 				key: 0,
 				type: "button",
@@ -1453,47 +1453,71 @@ function Rt(e) {
 	return $.parse(e, { async: !1 });
 }
 //#endregion
-//#region src/ReqScreen.vue?vue&type=script&setup=true&lang.ts
+//#region src/MockDeviceFrame.vue?vue&type=script&setup=true&lang.ts
 var zt = {
+	key: 0,
+	class: "inline-block"
+}, Bt = { class: "rounded-[2.5rem] bg-black p-3 shadow-xl" }, Vt = {
+	key: 0,
+	class: "pointer-events-none absolute left-1/2 top-0 z-10 h-6 w-28 -translate-x-1/2 rounded-b-2xl bg-black"
+}, Ht = /* @__PURE__ */ l({
+	__name: "MockDeviceFrame",
+	props: {
+		frame: {},
+		screenWidth: {},
+		baseStyle: {}
+	},
+	setup(e) {
+		function t(e) {
+			return `${e}px`;
+		}
+		return (n, r) => e.frame === "phone" || e.frame === "tablet" ? (m(), 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"),
+			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", {
+			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) })
+		}, [r[1] ||= o("div", { class: "flex items-center gap-2 border-b border-gray-300 bg-gray-800 px-3 py-2 dark:border-gray-700" }, [
+			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));
+	}
+}), Ut = {
 	key: 0,
 	class: "min-h-screen p-6"
-}, Bt = { 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" }, Vt = { class: "text-lg font-bold" }, Ht = { class: "ml-auto flex items-center gap-3" }, Ut = { class: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-6" }, Wt = { class: "rounded-lg border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-800" }, Gt = { class: "mb-3 flex items-center justify-between" }, Kt = { class: "flex items-center gap-3" }, qt = {
+}, Wt = { 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" }, Gt = { class: "text-lg font-bold" }, Kt = { class: "ml-auto flex items-center gap-3" }, qt = { class: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-6" }, Jt = { class: "rounded-lg border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-800" }, Yt = { class: "mb-3 flex items-center justify-between" }, Xt = { class: "flex items-center gap-3" }, Zt = {
 	key: 0,
 	class: "font-mono text-xs text-gray-500 dark:text-gray-400"
-}, Jt = {
+}, Qt = {
 	key: 0,
 	class: "text-gray-400"
-}, Yt = ["onClick"], Xt = { class: "rounded-md bg-white p-4 transition-colors dark:bg-gray-800" }, Zt = {
-	key: 0,
-	class: "w-full"
-}, Qt = { class: "rounded-[2.5rem] bg-black p-3 shadow-xl" }, $t = { class: "relative overflow-hidden rounded-[1.8rem]" }, en = {
-	key: 0,
-	class: "pointer-events-none absolute left-1/2 top-0 z-10 h-6 w-28 -translate-x-1/2 rounded-b-2xl bg-black"
-}, tn = {
-	key: 1,
-	class: "w-full overflow-hidden rounded-xl border-2 border-gray-300 shadow-sm dark:border-gray-700"
-}, nn = { class: "rounded-lg border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-800" }, rn = ["innerHTML"], an = {
+}, $t = ["onClick"], en = { class: "rounded-md bg-white p-4 transition-colors dark:bg-gray-800" }, tn = { class: "rounded-lg border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-800" }, nn = ["innerHTML"], rn = {
 	key: 1,
 	class: "fixed inset-0 z-50 overflow-auto bg-[#e8eaed] dark:bg-[#141414]"
-}, on = /* @__PURE__ */ l({
+}, an = /* @__PURE__ */ l({
 	__name: "ReqScreen",
 	props: {
 		title: {},
 		doc: {}
 	},
 	setup(n) {
-		let r = n, l = t(() => Rt(r.doc)), { isDark: te, toggle: re } = fe(), ie = oe(), S = se(), C = h(S[0]?.id ?? ""), w = t(() => S.find((e) => e.id === C.value) ?? S[0]);
-		function T(e) {
-			return `${e}px`;
-		}
-		let E = ce(), D = t(() => {
-			if (!E) return {};
-			let e = te.value ? E.dark : E.light;
+		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;
 			return {
 				background: e.bg,
 				color: e.font
 			};
-		}), O = h(null), k = h(null), A = h(0), ae = h(0), j = h(!1), le = h(null), ue = t(() => {
+		}), D = h(null), O = h(null), k = h(0), oe = h(0), A = h(!1), ue = h(null), de = t(() => {
 			let e = w.value;
 			return e ? {
 				min: e.minWidth,
@@ -1503,33 +1527,33 @@ var zt = {
 				max: 0
 			};
 		});
-		function de() {
+		function fe() {
 			let e = w.value;
 			if (!e) return 0;
-			let t = le.value ?? e.minWidth;
+			let t = ue.value ?? e.minWidth;
 			return Math.min(e.maxWidth, Math.max(e.minWidth, t));
 		}
-		let M = t(() => de()), pe = t(() => {
+		let j = t(() => fe()), M = t(() => {
 			let e = w.value;
 			return !!e && e.minWidth < e.maxWidth;
 		}), N = t(() => {
-			if (j.value) return 1;
-			let e = M.value;
-			return !e || A.value === 0 ? 1 : Math.min(1, A.value / e);
-		}), me = t(() => M.value ? M.value * N.value : 0), he = t(() => ae.value * N.value), ge = t(() => j.value && M.value > 0 && A.value > 0 && M.value < A.value), P = h(!1), _e = 0, ve = 0, ye = 1;
+			if (A.value) return 1;
+			let e = j.value;
+			return !e || k.value === 0 ? 1 : Math.min(1, k.value / e);
+		}), me = t(() => j.value ? j.value * N.value : 0), he = t(() => oe.value * N.value), ge = t(() => A.value && j.value > 0 && k.value > 0 && j.value < k.value), P = h(!1), _e = 0, ve = 0, ye = 1;
 		function be(e) {
 			let t = w.value;
-			t && (le.value = Math.min(t.maxWidth, Math.max(t.minWidth, e)));
+			t && (ue.value = Math.min(t.maxWidth, Math.max(t.minWidth, e)));
 		}
 		function xe(e) {
-			let t = M.value;
+			let t = j.value;
 			C.value = e, be(t);
 		}
 		function Se(e) {
-			if (j.value || !w.value || !pe.value) return;
+			if (!w.value || !M.value) return;
 			e.preventDefault(), e.stopPropagation();
 			let t = e.currentTarget;
-			t.setPointerCapture(e.pointerId), P.value = !0, _e = e.clientX, ve = M.value, ye = N.value, document.body.style.userSelect = "none", document.body.style.cursor = "ew-resize";
+			t.setPointerCapture(e.pointerId), P.value = !0, _e = e.clientX, ve = j.value, ye = N.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;
@@ -1542,13 +1566,13 @@ var zt = {
 		}
 		let F = null;
 		function I() {
-			O.value && (A.value = O.value.clientWidth), k.value && (ae.value = k.value.offsetHeight);
+			D.value && (k.value = D.value.clientWidth), O.value && (oe.value = O.value.offsetHeight);
 		}
 		function Ce() {
-			F?.disconnect(), O.value && F?.observe(O.value), k.value && F?.observe(k.value);
+			F?.disconnect(), D.value && F?.observe(D.value), O.value && F?.observe(O.value);
 		}
 		function we(e) {
-			e.key === "Escape" && (j.value = !1);
+			e.key === "Escape" && (A.value = !1);
 		}
 		return ee(() => {
 			F = new ResizeObserver(() => I()), Ce(), I(), window.addEventListener("keydown", we);
@@ -1556,53 +1580,65 @@ var zt = {
 			F?.disconnect(), window.removeEventListener("keydown", we);
 		}), ne([
 			C,
-			j,
-			M
+			A,
+			j
 		], () => u(() => {
 			Ce(), I();
-		})), (t, r) => j.value ? (m(), a("div", an, [o("button", {
+		})), (t, l) => A.value ? (m(), 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: r[2] ||= (e) => j.value = !1
+			onClick: l[2] ||= (e) => A.value = !1
 		}, " 閉じる（Esc） "), o("div", {
 			ref_key: "areaRef",
-			ref: O,
-			class: "flex min-h-full justify-center"
+			ref: D,
+			class: "flex min-h-full w-full justify-center"
 		}, [w.value ? (m(), a("div", {
 			key: 0,
-			class: d(["relative shrink-0", ge.value ? "border border-gray-300 shadow-lg dark:border-gray-600" : ""]),
-			style: f({ width: T(M.value) })
+			class: d(["relative w-fit shrink-0", ge.value ? "border border-gray-300 shadow-lg dark:border-gray-600" : ""])
 		}, [o("div", {
 			ref_key: "contentRef",
-			ref: k,
-			style: f({
-				width: T(M.value),
-				...D.value
-			})
-		}, [_(t.$slots, "mock")], 4)], 6)) : i("", !0)], 512)])) : (m(), a("div", zt, [o("header", Bt, [
+			ref: O,
+			class: "w-fit"
+		}, [w.value ? (m(), r(Ht, {
+			key: 0,
+			frame: w.value.frame,
+			"screen-width": j.value,
+			"base-style": E.value
+		}, {
+			default: b(() => [_(t.$slots, "mock")]),
+			_: 3
+		}, 8, [
+			"frame",
+			"screen-width",
+			"base-style"
+		])) : i("", !0)], 512), M.value ? (m(), 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", P.value ? "opacity-100" : ""]),
+			onPointerdown: Se
+		}, [o("div", { class: d(["h-10 w-1 rounded-full bg-gray-400 dark:bg-gray-500", P.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), {
 				to: "/catalog",
 				class: "text-sm text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
 			}, {
-				default: b(() => [...r[3] ||= [s(" ← 一覧 ", -1)]]),
+				default: b(() => [...l[3] ||= [s(" ← 一覧 ", -1)]]),
 				_: 1
 			}),
-			o("h1", Vt, v(n.title), 1),
-			o("div", Ht, [
+			o("h1", Gt, v(n.title), 1),
+			o("div", Kt, [
 				_(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: r[0] ||= (e) => j.value = !j.value
-				}, v(j.value ? "要件を表示" : "プレビュー"), 1),
-				y(ie) ? (m(), a("button", {
+					onClick: l[0] ||= (e) => A.value = !A.value
+				}, v(A.value ? "要件を表示" : "プレビュー"), 1),
+				y(ae) ? (m(), 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: r[1] ||= (...e) => y(re) && y(re)(...e)
-				}, v(y(te) ? "ライトモード" : "ダークモード"), 1)) : i("", !0)
+					onClick: l[1] ||= (...e) => y(ie) && y(ie)(...e)
+				}, v(y(re) ? "ライトモード" : "ダークモード"), 1)) : i("", !0)
 			])
-		]), o("div", Ut, [o("section", Wt, [o("div", Gt, [r[4] ||= o("span", { class: "text-xs font-bold uppercase tracking-wide text-gray-400" }, " 画面 mock ", -1), o("div", Kt, [w.value ? (m(), a("span", qt, [s(v(M.value) + "px ", 1), pe.value ? (m(), a("span", Jt, " （" + v(ue.value.min) + "–" + v(ue.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, [w.value ? (m(), a("span", Zt, [s(v(j.value) + "px ", 1), M.value ? (m(), a("span", Qt, " （" + v(de.value.min) + "–" + v(de.value.max) + "） ", 1)) : i("", !0)])) : i("", !0), y(S).length > 1 ? (m(), a("div", {
 			key: 1,
 			class: d(["inline-flex overflow-hidden rounded-md border border-gray-300 text-xs font-bold dark:border-gray-600", P.value ? "pointer-events-none" : ""])
 		}, [(m(!0), a(e, null, g(y(S), (e) => (m(), a("button", {
@@ -1610,47 +1646,46 @@ var zt = {
 			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, Yt))), 128))], 2)) : i("", !0)])]), o("div", Xt, [o("div", {
+		}, v(e.label), 11, $t))), 128))], 2)) : i("", !0)])]), o("div", en, [o("div", {
 			ref_key: "areaRef",
-			ref: O
+			ref: D
 		}, [w.value ? (m(), a("div", {
 			key: 0,
 			class: "relative mx-auto overflow-hidden",
 			style: f({
 				width: me.value ? `${me.value}px` : "",
-				height: ae.value ? `${he.value}px` : "auto"
+				height: oe.value ? `${he.value}px` : "auto"
 			})
 		}, [o("div", {
 			ref_key: "contentRef",
-			ref: k,
-			class: "origin-top-left",
-			style: f({
-				width: T(M.value),
-				transform: `scale(${N.value})`
-			})
-		}, [w.value.frame === "phone" || w.value.frame === "tablet" ? (m(), a("div", Zt, [o("div", Qt, [o("div", $t, [w.value.frame === "phone" ? (m(), a("div", en)) : i("", !0), o("div", {
-			class: d(["px-4 pb-6", w.value.frame === "phone" ? "pt-9" : "pt-6"]),
-			style: f(D.value)
-		}, [_(t.$slots, "mock"), r[5] ||= o("div", { class: "mx-auto mt-6 h-1 w-24 rounded-full bg-gray-300 dark:bg-gray-600" }, null, -1)], 6)])])])) : (m(), a("div", tn, [r[6] ||= o("div", { class: "flex items-center gap-2 border-b border-gray-300 bg-gray-800 px-3 py-2 dark:border-gray-700" }, [
-			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", {
-			class: "p-4",
-			style: f(D.value)
-		}, [_(t.$slots, "mock")], 4)]))], 4), pe.value ? (m(), a("div", {
+			ref: O,
+			class: "origin-top-left w-fit",
+			style: f({ transform: `scale(${N.value})` })
+		}, [w.value ? (m(), r(Ht, {
+			key: 0,
+			frame: w.value.frame,
+			"screen-width": j.value,
+			"base-style": E.value
+		}, {
+			default: b(() => [_(t.$slots, "mock")]),
+			_: 3
+		}, 8, [
+			"frame",
+			"screen-width",
+			"base-style"
+		])) : i("", !0)], 4), M.value ? (m(), 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", P.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", P.value ? "bg-blue-500 dark:bg-blue-400" : ""]) }, null, 2)], 34)) : i("", !0)], 4)) : i("", !0)], 512)])]), o("section", nn, [r[7] ||= o("div", { class: "mb-3 text-xs font-bold uppercase tracking-wide text-gray-400" }, " 要件 ", -1), o("div", {
+		}, [o("div", { class: d(["h-10 w-1 rounded-full bg-gray-400 dark:bg-gray-500", P.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: l.value
-		}, null, 8, rn)])])]));
+			innerHTML: te.value
+		}, null, 8, nn)])])]));
 	}
-}), sn = { class: "flex items-center gap-2 text-sm" }, cn = ["value"], ln = ["value"], un = ["innerHTML"], dn = {
+}), on = { class: "flex items-center gap-2 text-sm" }, sn = ["value"], cn = ["value"], ln = ["innerHTML"], un = {
 	key: 1,
 	class: "p-8"
-}, fn = { class: "text-gray-600" }, pn = /* @__PURE__ */ l({
+}, dn = { class: "text-gray-600" }, fn = /* @__PURE__ */ l({
 	__name: "ReqPageView",
 	props: {
 		kind: {},
@@ -1658,30 +1693,30 @@ var zt = {
 		ver: {}
 	},
 	setup(n) {
-		let i = n, l = C(), u = t(() => de(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) : []);
+		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 t = e.target.value;
 			l.push(`/${i.kind}s/${i.name}/${t}`);
 		}
-		return (t, i) => u.value && f.value ? (m(), r(on, {
+		return (t, i) => u.value && f.value ? (m(), r(an, {
 			key: 0,
 			title: u.value.title,
 			doc: f.value.req
 		}, {
-			toolbar: b(() => [o("label", sn, [i[0] ||= o("span", { class: "text-gray-500 dark:text-gray-400" }, "バージョン", -1), o("select", {
+			toolbar: b(() => [o("label", on, [i[0] ||= o("span", { class: "text-gray-500 dark:text-gray-400" }, "バージョン", -1), o("select", {
 				value: d.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", {
 				key: e,
 				value: e
-			}, v(e), 9, ln))), 128))], 40, cn)])]),
+			}, 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, un)) : (m(), r(te(f.value.view), { key: 1 }))]),
+			}, null, 8, ln)) : (m(), r(te(f.value.view), { key: 1 }))]),
 			_: 1
-		}, 8, ["title", "doc"])) : (m(), a("div", dn, [o("p", fn, "該当するアイテムが見つかりません: " + v(n.kind) + " / " + v(n.name), 1), c(y(x), {
+		}, 8, ["title", "doc"])) : (m(), a("div", un, [o("p", dn, "該当するアイテムが見つかりません: " + v(n.kind) + " / " + v(n.name), 1), c(y(x), {
 			to: "/catalog",
 			class: "text-blue-600 underline"
 		}, {
@@ -1689,13 +1724,13 @@ var zt = {
 			_: 1
 		})]));
 	}
-}), mn = { class: "min-h-screen p-6" }, hn = { 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" }, gn = { class: "rounded-lg bg-gray-50 p-5 transition-colors dark:bg-gray-900" }, _n = { class: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4" }, vn = { class: "p-3" }, yn = { class: "font-mono text-sm font-bold dark:text-gray-100" }, bn = { class: "mt-1 space-y-0.5 font-mono text-xs" }, xn = {
+}), 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 = {
 	key: 0,
 	class: "mt-1 text-xs text-gray-600 dark:text-gray-400"
-}, Sn = /* @__PURE__ */ l({
+}, xn = /* @__PURE__ */ l({
 	__name: "ColorsView",
 	setup(t) {
-		let { isDark: n, toggle: r } = fe(), l = oe(), u = ce(), p = [...u ? [{
+		let { isDark: n, toggle: r } = pe(), l = se(), u = le(), p = [...u ? [{
 			name: "baseBg",
 			light: u.light.bg,
 			dark: u.dark.bg,
@@ -1705,8 +1740,8 @@ var zt = {
 			light: u.light.font,
 			dark: u.dark.font,
 			desc: "モックの基本文字色"
-		}] : [], ...ue()];
-		return (t, u) => (m(), a("div", mn, [o("header", hn, [
+		}] : [], ...de()];
+		return (t, u) => (m(), a("div", pn, [o("header", mn, [
 			c(y(x), {
 				to: "/catalog",
 				class: "text-sm text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
@@ -1721,24 +1756,24 @@ var zt = {
 				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", gn, [o("div", _n, [(m(), a(e, null, g(p, (e) => o("div", {
+		]), o("div", hn, [o("div", gn, [(m(), a(e, null, g(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", vn, [
-			o("div", yn, v(e.name), 1),
-			o("div", bn, [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", xn, v(e.desc), 1)) : i("", !0)
+		}, 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)
 		])])), 64))])])]));
 	}
 });
 //#endregion
 //#region src/router.ts
-function Cn() {
+function Sn() {
 	return ie({
-		history: S(),
+		history: ae(),
 		routes: [
 			{
 				path: "/",
@@ -1752,12 +1787,12 @@ function Cn() {
 			{
 				path: "/colors",
 				name: "colors",
-				component: Sn
+				component: xn
 			},
 			{
 				path: "/components/:name/:ver?",
 				name: "component",
-				component: pn,
+				component: fn,
 				props: (e) => ({
 					kind: "component",
 					name: e.params.name,
@@ -1767,7 +1802,7 @@ function Cn() {
 			{
 				path: "/pages/:name/:ver?",
 				name: "page",
-				component: pn,
+				component: fn,
 				props: (e) => ({
 					kind: "page",
 					name: e.params.name,
@@ -1779,10 +1814,10 @@ function Cn() {
 }
 //#endregion
 //#region src/createSpecViewer.ts
-function wn(e) {
-	ae(e);
-	let t = n(w);
-	return t.use(Cn()), t;
+function Cn(e) {
+	oe(e);
+	let t = n(C);
+	return t.use(Sn()), t;
 }
 //#endregion
-export { wn as createSpecViewer };
+export { Cn as createSpecViewer };

package/package.json

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