storybook-addon-dependency-previews 0.1.0

package/dist/cli/scripts/postprocess.mjs

@@ -0,0 +1,106 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { basename, dirname, extname, posix, resolve } from "node:path";
+import { toId } from "@storybook/csf";
+
+//#region cli/scripts/postprocess.ts
+const [, , inPathArg, outPathArg] = process.argv;
+const inPath = resolve(inPathArg || ".storybook/dependency-previews.raw.json");
+const outPath = resolve(outPathArg || ".storybook/dependency-previews.json");
+if (!existsSync(dirname(outPath))) mkdirSync(dirname(outPath), { recursive: true });
+const raw = JSON.parse(readFileSync(inPath, "utf8"));
+const norm = (p) => posix.normalize(p.replaceAll("\\", "/"));
+const isComponent = (p) => {
+	return /src\/(components|ui|lib)\//.test(p) && !/\.(css|scss|sass|less)$/.test(p);
+};
+/** Simple keyed-push to avoid duplicates */
+function pushUnique(list, item) {
+	if (!list.some((x) => x.componentPath === item.componentPath)) {
+		list.push(item);
+	}
+}
+const graph = {};
+for (const m of raw.modules || []) {
+	const from = norm(m.source);
+	if (!isComponent(from)) continue;
+	const deps = (m.dependencies || []).map((d) => d.resolved && norm(d.resolved)).filter(Boolean).filter(isComponent);
+	const topLevelFromStory = getStoryId(from);
+	if (!graph[from]) graph[from] = {
+		componentPath: from,
+		...topLevelFromStory && {
+			storyId: topLevelFromStory?.id,
+			storyTitle: topLevelFromStory?.title,
+			storyTitlePath: topLevelFromStory?.titlePath,
+			storyFilePath: topLevelFromStory?.filePath
+		},
+		builtWith: [],
+		usedIn: []
+	};
+	for (const to of deps) {
+		if (from === to) continue;
+		const toStory = getStoryId(to);
+		const builtWithEntry = {
+			componentPath: to,
+			...toStory && {
+				storyId: toStory.id,
+				storyTitle: toStory.title,
+				storyTitlePath: toStory.titlePath,
+				storyFilePath: toStory.filePath
+			}
+		};
+		if (!graph[to]) graph[to] = {
+			...builtWithEntry,
+			builtWith: [],
+			usedIn: []
+		};
+		pushUnique(graph[from].builtWith, builtWithEntry);
+		const fromStory = getStoryId(from);
+		const usedInEntry = {
+			componentPath: from,
+			...fromStory && {
+				storyId: fromStory.id,
+				storyTitle: fromStory.title,
+				storyTitlePath: fromStory.titlePath,
+				storyFilePath: fromStory.filePath
+			}
+		};
+		pushUnique(graph[to].usedIn, usedInEntry);
+	}
+}
+const byPath = (a, b) => (a.componentPath || "").localeCompare(b.componentPath || "");
+for (const k of Object.keys(graph)) {
+	graph[k].builtWith.sort(byPath);
+	graph[k].usedIn.sort(byPath);
+}
+writeFileSync(outPath, JSON.stringify(graph, null, 2));
+function getStoryId(componentPath) {
+	const rawFileData = getRawStoryFileData(componentPath);
+	if (!rawFileData.storyFileData) return null;
+	const match = rawFileData.storyFileData.match(/title:\s*['"`]([^'"`]+)['"`]/);
+	if (!match) return null;
+	const titlePath = match[1];
+	const title = basename(titlePath).trim();
+	return {
+		title,
+		titlePath,
+		id: toId(titlePath, "docs"),
+		filePath: rawFileData.storyFilePath
+	};
+}
+function getRawStoryFileData(componentPath) {
+	const base = componentPath.replace(/\.\w+$/, "");
+	const storiesPath = `${base}.stories${extname(componentPath)}`;
+	const storyPath = `${base}.story${extname(componentPath)}`;
+	const storiesData = getRawFileData(storiesPath);
+	const storyData = getRawFileData(storyPath);
+	return {
+		storyFileData: storiesData || storyData || null,
+		storyFilePath: storiesData && storiesPath || storyData && storyPath || null
+	};
+}
+function getRawFileData(path) {
+	return existsSync(path) && readFileSync(path, "utf8");
+}
+
+//#endregion
+export {  };
+//# sourceMappingURL=postprocess.mjs.map

package/dist/cli/scripts/postprocess.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"postprocess.mjs","names":[],"sources":["../../../cli/scripts/postprocess.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs'\nimport { resolve, posix, dirname, extname, basename } from 'node:path'\nimport { toId } from '@storybook/csf'\nimport type { Deps, Graph, StoryInfo } from '../../src/types.js'\n\nconst [, , inPathArg, outPathArg] = process.argv\nconst inPath = resolve(inPathArg || '.storybook/dependency-previews.raw.json')\nconst outPath = resolve(outPathArg || '.storybook/dependency-previews.json')\n\nif (!existsSync(dirname(outPath)))\n\tmkdirSync(dirname(outPath), { recursive: true })\n\nconst raw = JSON.parse(readFileSync(inPath, 'utf8'))\nconst norm = (p: string) => posix.normalize(p.replaceAll('\\\\', '/'))\nconst isComponent = (p: string) => {\n\treturn (\n\t\t/src\\/(components|ui|lib)\\//.test(p) &&\n\t\t// Ignore css files\n\t\t!/\\.(css|scss|sass|less)$/.test(p)\n\t)\n}\n\n/** Simple keyed-push to avoid duplicates */\nfunction pushUnique(list: Array<StoryInfo>, item: StoryInfo) {\n\tif (!list.some((x) => x.componentPath === item.componentPath)) {\n\t\tlist.push(item)\n\t}\n}\n\nconst graph: Graph = {}\n\nfor (const m of raw.modules || []) {\n\tconst from = norm(m.source)\n\tif (!isComponent(from)) continue\n\n\tconst deps = (m.dependencies || [])\n\t\t.map((d: any) => d.resolved && norm(d.resolved))\n\t\t.filter(Boolean)\n\t\t.filter(isComponent)\n\n\tconst topLevelFromStory = getStoryId(from)\n\n\tif (!graph[from])\n\t\tgraph[from] = {\n\t\t\tcomponentPath: from,\n\t\t\t...(topLevelFromStory && {\n\t\t\t\tstoryId: topLevelFromStory?.id,\n\t\t\t\tstoryTitle: topLevelFromStory?.title,\n\t\t\t\tstoryTitlePath: topLevelFromStory?.titlePath,\n\t\t\t\tstoryFilePath: topLevelFromStory?.filePath,\n\t\t\t}),\n\t\t\tbuiltWith: [],\n\t\t\tusedIn: [],\n\t\t} satisfies Deps\n\n\tfor (const to of deps) {\n\t\tif (from === to) continue // 🔒 skip self-edges\n\n\t\t// ---- builtWith: from → to\n\t\tconst toStory = getStoryId(to)\n\t\tconst builtWithEntry: StoryInfo = {\n\t\t\tcomponentPath: to, // ✅ the dependency, not \"from\"\n\t\t\t...(toStory && {\n\t\t\t\tstoryId: toStory.id,\n\t\t\t\tstoryTitle: toStory.title,\n\t\t\t\tstoryTitlePath: toStory.titlePath,\n\t\t\t\tstoryFilePath: toStory.filePath,\n\t\t\t}),\n\t\t}\n\n\t\tif (!graph[to])\n\t\t\tgraph[to] = {\n\t\t\t\t...builtWithEntry,\n\t\t\t\tbuiltWith: [],\n\t\t\t\tusedIn: [],\n\t\t\t}\n\n\t\tpushUnique(graph[from].builtWith, builtWithEntry)\n\n\t\t// ---- usedIn: to ← from\n\t\tconst fromStory = getStoryId(from)\n\t\tconst usedInEntry: StoryInfo = {\n\t\t\tcomponentPath: from,\n\t\t\t...(fromStory && {\n\t\t\t\tstoryId: fromStory.id,\n\t\t\t\tstoryTitle: fromStory.title,\n\t\t\t\tstoryTitlePath: fromStory.titlePath,\n\t\t\t\tstoryFilePath: fromStory.filePath,\n\t\t\t}),\n\t\t}\n\t\tpushUnique(graph[to].usedIn, usedInEntry)\n\t}\n}\n\n// Stable sort by path for nicer diffs/UI\nconst byPath = (a: StoryInfo, b: StoryInfo) =>\n\t(a.componentPath || '').localeCompare(b.componentPath || '')\n\nfor (const k of Object.keys(graph)) {\n\tgraph[k].builtWith.sort(byPath)\n\tgraph[k].usedIn.sort(byPath)\n}\n\nwriteFileSync(outPath, JSON.stringify(graph, null, 2))\n\nfunction getStoryId(componentPath: string) {\n\tconst rawFileData = getRawStoryFileData(componentPath)\n\tif (!rawFileData.storyFileData) return null\n\n\tconst match = rawFileData.storyFileData.match(\n\t\t/title:\\s*['\"`]([^'\"`]+)['\"`]/,\n\t)\n\tif (!match) return null\n\n\tconst titlePath = match[1]\n\tconst title = basename(titlePath).trim()\n\treturn {\n\t\ttitle: title,\n\t\ttitlePath: titlePath,\n\t\tid: toId(titlePath, 'docs'),\n\t\tfilePath: rawFileData.storyFilePath,\n\t}\n}\n\nfunction getRawStoryFileData(componentPath: string) {\n\tconst base = componentPath.replace(/\\.\\w+$/, '')\n\tconst storiesPath = `${base}.stories${extname(componentPath)}`\n\tconst storyPath = `${base}.story${extname(componentPath)}`\n\n\tconst storiesData = getRawFileData(storiesPath)\n\tconst storyData = getRawFileData(storyPath)\n\n\treturn {\n\t\tstoryFileData: storiesData || storyData || null,\n\t\tstoryFilePath:\n\t\t\t(storiesData && storiesPath) || (storyData && storyPath) || null,\n\t}\n}\n\nfunction getRawFileData(path: string) {\n\treturn existsSync(path) && readFileSync(path, 'utf8')\n}\n"],"mappings":"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"}

package/dist/components/ComponentSourceLink.cjs

@@ -0,0 +1,42 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_useStoryParams = require('../hooks/useStoryParams.cjs');
+const require_TooltipTrigger = require('./TooltipTrigger.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_components_ComponentSourceLink_module_css = require("./ComponentSourceLink.module.css");
+src_components_ComponentSourceLink_module_css = require_runtime.__toESM(src_components_ComponentSourceLink_module_css);
+
+//#region src/components/ComponentSourceLink.tsx
+function ComponentSourceLink({ storyInfo, ariaDescribedBy }) {
+	const storyParameters = require_useStoryParams.useStoryParams();
+	const isLocalHost = window?.location.hostname === "localhost" || window?.location.hostname === "127.0.0.1";
+	const vsCodeRootUrl = getVsCodeRootUrl(storyParameters.dependencyPreviews.projectRootPath);
+	const gitRootUrl = storyParameters.dependencyPreviews.sourceRootUrl;
+	const sourceRootUrl = isLocalHost ? vsCodeRootUrl : gitRootUrl;
+	const relativePath = storyInfo.componentPath.replace(/\\/g, "/").replace(/^\.?\/+/, "");
+	if (!sourceRootUrl) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: relativePath });
+	}
+	const href = (sourceRootUrl.endsWith("/") ? sourceRootUrl : sourceRootUrl + "/") + encodeURI(relativePath);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TooltipTrigger.TooltipTrigger, {
+		TriggerElem: "a",
+		className: src_components_ComponentSourceLink_module_css.default.ComponentSourceLink,
+		href,
+		newWindow: true,
+		"aria-describedby": ariaDescribedBy,
+		tooltipText: `View source (opens in ${isLocalHost ? "VS Code" : "new tab"})`,
+		dangerouslySetInnerHTML: { __html: relativePath.replaceAll("/", "/<wbr/>") }
+	});
+}
+function getVsCodeRootUrl(projectRootPath) {
+	let newProjectRootPath = projectRootPath;
+	newProjectRootPath = projectRootPath.replace(/^\/@fs\//, "/");
+	if (newProjectRootPath.match(/^\/[A-Za-z]:\//)) {
+		newProjectRootPath = newProjectRootPath.slice(1);
+	}
+	newProjectRootPath = newProjectRootPath.replace(/\\/g, "/");
+	return `vscode://file/${newProjectRootPath}`;
+}
+
+//#endregion
+exports.ComponentSourceLink = ComponentSourceLink;
+//# sourceMappingURL=ComponentSourceLink.cjs.map

package/dist/components/ComponentSourceLink.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentSourceLink.cjs","names":["useStoryParams","TooltipTrigger","s"],"sources":["../../src/components/ComponentSourceLink.tsx"],"sourcesContent":["import type { StoryInfo } from '../types'\n\nimport s from './ComponentSourceLink.module.css'\nimport { TooltipTrigger } from './TooltipTrigger'\nimport { useStoryParams } from '../hooks/useStoryParams'\n\ninterface Props {\n\tstoryInfo: StoryInfo\n\tariaDescribedBy?: string\n}\nexport function ComponentSourceLink({ storyInfo, ariaDescribedBy }: Props) {\n\tconst storyParameters = useStoryParams()\n\n\tconst isLocalHost =\n\t\twindow?.location.hostname === 'localhost' ||\n\t\twindow?.location.hostname === '127.0.0.1'\n\n\tconst vsCodeRootUrl = getVsCodeRootUrl(\n\t\tstoryParameters.dependencyPreviews.projectRootPath,\n\t)\n\tconst gitRootUrl = storyParameters.dependencyPreviews.sourceRootUrl\n\n\tconst sourceRootUrl = isLocalHost ? vsCodeRootUrl : gitRootUrl\n\n\t// Normalize: force POSIX slashes and strip leading ./ or /\n\tconst relativePath = storyInfo.componentPath\n\t\t.replace(/\\\\/g, '/')\n\t\t.replace(/^\\.?\\/+/, '')\n\n\tif (!sourceRootUrl) {\n\t\treturn <span>{relativePath}</span>\n\t}\n\tconst href =\n\t\t(sourceRootUrl.endsWith('/') ? sourceRootUrl : sourceRootUrl + '/') +\n\t\tencodeURI(relativePath)\n\n\treturn (\n\t\t<TooltipTrigger\n\t\t\tTriggerElem=\"a\"\n\t\t\tclassName={s.ComponentSourceLink}\n\t\t\thref={href}\n\t\t\tnewWindow\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\ttooltipText={`View source (opens in ${\n\t\t\t\tisLocalHost ? 'VS Code' : 'new tab'\n\t\t\t})`}\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t// allow line breaks on slashes\n\t\t\t\t__html: relativePath.replaceAll('/', '/<wbr/>'),\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction getVsCodeRootUrl(projectRootPath: string) {\n\tlet newProjectRootPath = projectRootPath\n\n\t// Remove Vite's /@fs/ prefix if present\n\tnewProjectRootPath = projectRootPath.replace(/^\\/@fs\\//, '/')\n\n\t// Fix Windows path: remove leading slash from /C:/Users/... -> C:/Users/...\n\tif (newProjectRootPath.match(/^\\/[A-Za-z]:\\//)) {\n\t\tnewProjectRootPath = newProjectRootPath.slice(1)\n\t}\n\n\t// Ensure forward slashes for VS Code (works on all platforms)\n\tnewProjectRootPath = newProjectRootPath.replace(/\\\\/g, '/')\n\n\treturn `vscode://file/${newProjectRootPath}`\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,oBAAoB,EAAE,WAAW,mBAA0B;CAC1E,MAAM,kBAAkBA,uCAAgB;CAExC,MAAM,cACL,QAAQ,SAAS,aAAa,eAC9B,QAAQ,SAAS,aAAa;CAE/B,MAAM,gBAAgB,iBACrB,gBAAgB,mBAAmB,gBACnC;CACD,MAAM,aAAa,gBAAgB,mBAAmB;CAEtD,MAAM,gBAAgB,cAAc,gBAAgB;CAGpD,MAAM,eAAe,UAAU,cAC7B,QAAQ,OAAO,IAAI,CACnB,QAAQ,WAAW,GAAG;AAExB,KAAI,CAAC,eAAe;AACnB,SAAO,2CAAC,oBAAM,eAAoB;;CAEnC,MAAM,QACJ,cAAc,SAAS,IAAI,GAAG,gBAAgB,gBAAgB,OAC/D,UAAU,aAAa;AAExB,QACC,2CAACC;EACA,aAAY;EACZ,WAAWC,sDAAE;EACP;EACN;EACA,oBAAkB;EAClB,aAAa,yBACZ,cAAc,YAAY,UAC1B;EACD,yBAAyB,EAExB,QAAQ,aAAa,WAAW,KAAK,UAAU,EAC/C;GACA;;AAIJ,SAAS,iBAAiB,iBAAyB;CAClD,IAAI,qBAAqB;AAGzB,sBAAqB,gBAAgB,QAAQ,YAAY,IAAI;AAG7D,KAAI,mBAAmB,MAAM,iBAAiB,EAAE;AAC/C,uBAAqB,mBAAmB,MAAM,EAAE;;AAIjD,sBAAqB,mBAAmB,QAAQ,OAAO,IAAI;AAE3D,QAAO,iBAAiB"}

package/dist/components/ComponentSourceLink.mjs

@@ -0,0 +1,40 @@
+import { useStoryParams } from "../hooks/useStoryParams.mjs";
+import { TooltipTrigger } from "./TooltipTrigger.mjs";
+import { jsx } from "react/jsx-runtime";
+import s from "./ComponentSourceLink.module.css";
+
+//#region src/components/ComponentSourceLink.tsx
+function ComponentSourceLink({ storyInfo, ariaDescribedBy }) {
+	const storyParameters = useStoryParams();
+	const isLocalHost = window?.location.hostname === "localhost" || window?.location.hostname === "127.0.0.1";
+	const vsCodeRootUrl = getVsCodeRootUrl(storyParameters.dependencyPreviews.projectRootPath);
+	const gitRootUrl = storyParameters.dependencyPreviews.sourceRootUrl;
+	const sourceRootUrl = isLocalHost ? vsCodeRootUrl : gitRootUrl;
+	const relativePath = storyInfo.componentPath.replace(/\\/g, "/").replace(/^\.?\/+/, "");
+	if (!sourceRootUrl) {
+		return /* @__PURE__ */ jsx("span", { children: relativePath });
+	}
+	const href = (sourceRootUrl.endsWith("/") ? sourceRootUrl : sourceRootUrl + "/") + encodeURI(relativePath);
+	return /* @__PURE__ */ jsx(TooltipTrigger, {
+		TriggerElem: "a",
+		className: s.ComponentSourceLink,
+		href,
+		newWindow: true,
+		"aria-describedby": ariaDescribedBy,
+		tooltipText: `View source (opens in ${isLocalHost ? "VS Code" : "new tab"})`,
+		dangerouslySetInnerHTML: { __html: relativePath.replaceAll("/", "/<wbr/>") }
+	});
+}
+function getVsCodeRootUrl(projectRootPath) {
+	let newProjectRootPath = projectRootPath;
+	newProjectRootPath = projectRootPath.replace(/^\/@fs\//, "/");
+	if (newProjectRootPath.match(/^\/[A-Za-z]:\//)) {
+		newProjectRootPath = newProjectRootPath.slice(1);
+	}
+	newProjectRootPath = newProjectRootPath.replace(/\\/g, "/");
+	return `vscode://file/${newProjectRootPath}`;
+}
+
+//#endregion
+export { ComponentSourceLink };
+//# sourceMappingURL=ComponentSourceLink.mjs.map

package/dist/components/ComponentSourceLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentSourceLink.mjs","names":[],"sources":["../../src/components/ComponentSourceLink.tsx"],"sourcesContent":["import type { StoryInfo } from '../types'\n\nimport s from './ComponentSourceLink.module.css'\nimport { TooltipTrigger } from './TooltipTrigger'\nimport { useStoryParams } from '../hooks/useStoryParams'\n\ninterface Props {\n\tstoryInfo: StoryInfo\n\tariaDescribedBy?: string\n}\nexport function ComponentSourceLink({ storyInfo, ariaDescribedBy }: Props) {\n\tconst storyParameters = useStoryParams()\n\n\tconst isLocalHost =\n\t\twindow?.location.hostname === 'localhost' ||\n\t\twindow?.location.hostname === '127.0.0.1'\n\n\tconst vsCodeRootUrl = getVsCodeRootUrl(\n\t\tstoryParameters.dependencyPreviews.projectRootPath,\n\t)\n\tconst gitRootUrl = storyParameters.dependencyPreviews.sourceRootUrl\n\n\tconst sourceRootUrl = isLocalHost ? vsCodeRootUrl : gitRootUrl\n\n\t// Normalize: force POSIX slashes and strip leading ./ or /\n\tconst relativePath = storyInfo.componentPath\n\t\t.replace(/\\\\/g, '/')\n\t\t.replace(/^\\.?\\/+/, '')\n\n\tif (!sourceRootUrl) {\n\t\treturn <span>{relativePath}</span>\n\t}\n\tconst href =\n\t\t(sourceRootUrl.endsWith('/') ? sourceRootUrl : sourceRootUrl + '/') +\n\t\tencodeURI(relativePath)\n\n\treturn (\n\t\t<TooltipTrigger\n\t\t\tTriggerElem=\"a\"\n\t\t\tclassName={s.ComponentSourceLink}\n\t\t\thref={href}\n\t\t\tnewWindow\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\ttooltipText={`View source (opens in ${\n\t\t\t\tisLocalHost ? 'VS Code' : 'new tab'\n\t\t\t})`}\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t// allow line breaks on slashes\n\t\t\t\t__html: relativePath.replaceAll('/', '/<wbr/>'),\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction getVsCodeRootUrl(projectRootPath: string) {\n\tlet newProjectRootPath = projectRootPath\n\n\t// Remove Vite's /@fs/ prefix if present\n\tnewProjectRootPath = projectRootPath.replace(/^\\/@fs\\//, '/')\n\n\t// Fix Windows path: remove leading slash from /C:/Users/... -> C:/Users/...\n\tif (newProjectRootPath.match(/^\\/[A-Za-z]:\\//)) {\n\t\tnewProjectRootPath = newProjectRootPath.slice(1)\n\t}\n\n\t// Ensure forward slashes for VS Code (works on all platforms)\n\tnewProjectRootPath = newProjectRootPath.replace(/\\\\/g, '/')\n\n\treturn `vscode://file/${newProjectRootPath}`\n}\n"],"mappings":";;;;;;AAUA,SAAgB,oBAAoB,EAAE,WAAW,mBAA0B;CAC1E,MAAM,kBAAkB,gBAAgB;CAExC,MAAM,cACL,QAAQ,SAAS,aAAa,eAC9B,QAAQ,SAAS,aAAa;CAE/B,MAAM,gBAAgB,iBACrB,gBAAgB,mBAAmB,gBACnC;CACD,MAAM,aAAa,gBAAgB,mBAAmB;CAEtD,MAAM,gBAAgB,cAAc,gBAAgB;CAGpD,MAAM,eAAe,UAAU,cAC7B,QAAQ,OAAO,IAAI,CACnB,QAAQ,WAAW,GAAG;AAExB,KAAI,CAAC,eAAe;AACnB,SAAO,oBAAC,oBAAM,eAAoB;;CAEnC,MAAM,QACJ,cAAc,SAAS,IAAI,GAAG,gBAAgB,gBAAgB,OAC/D,UAAU,aAAa;AAExB,QACC,oBAAC;EACA,aAAY;EACZ,WAAW,EAAE;EACP;EACN;EACA,oBAAkB;EAClB,aAAa,yBACZ,cAAc,YAAY,UAC1B;EACD,yBAAyB,EAExB,QAAQ,aAAa,WAAW,KAAK,UAAU,EAC/C;GACA;;AAIJ,SAAS,iBAAiB,iBAAyB;CAClD,IAAI,qBAAqB;AAGzB,sBAAqB,gBAAgB,QAAQ,YAAY,IAAI;AAG7D,KAAI,mBAAmB,MAAM,iBAAiB,EAAE;AAC/C,uBAAqB,mBAAmB,MAAM,EAAE;;AAIjD,sBAAqB,mBAAmB,QAAQ,OAAO,IAAI;AAE3D,QAAO,iBAAiB"}

package/dist/components/ComponentSourceLink.module.css

@@ -0,0 +1,5 @@
+.ComponentSourceLink {
+	&:hover {
+		text-decoration: underline;
+	}
+}

package/dist/components/CopyButton.cjs

@@ -0,0 +1,112 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_CopyIcon = require('./icons/CopyIcon.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_components_CopyButton_module_css = require("./CopyButton.module.css");
+src_components_CopyButton_module_css = require_runtime.__toESM(src_components_CopyButton_module_css);
+
+//#region src/components/CopyButton.tsx
+function CopyButton({ label, copyContent, copyMessage = "Copied to clipboard", errorMessage = "Copy failed" }) {
+	const [status, setStatus] = (0, react.useState)("idle");
+	const [isResultOpen, setResultOpen] = (0, react.useState)(false);
+	const [isForcedShut, setIsForcedShut] = (0, react.useState)(false);
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	const [isFocused, setIsFocused] = (0, react.useState)(false);
+	const tooltipId = (0, react.useId)();
+	const srId = (0, react.useId)();
+	const resultMessageId = (0, react.useId)();
+	const btnRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		function handler(e) {
+			if (e.key === "Escape" && (isHovered || isFocused)) {
+				e.stopPropagation();
+				reset();
+				setIsForcedShut(true);
+			}
+		}
+		document.addEventListener("keyup", handler);
+		return () => document.removeEventListener("keyup", handler);
+	}, [isHovered, isFocused]);
+	async function onCopy() {
+		try {
+			await navigator.clipboard.writeText(copyContent);
+			setStatus("copied");
+			setResultOpen(true);
+		} catch {
+			setStatus("error");
+			setResultOpen(true);
+		}
+	}
+	function reset() {
+		setStatus("idle");
+		setResultOpen(false);
+	}
+	function onBlur() {
+		reset();
+		setIsForcedShut(false);
+		setIsFocused(false);
+	}
+	function onFocus() {
+		setIsFocused(true);
+	}
+	function onMouseEnter() {
+		setIsForcedShut(false);
+		setIsHovered(true);
+	}
+	function onMouseLeave() {
+		setIsHovered(false);
+		reset();
+		if (isFocused) {
+			setIsForcedShut(true);
+		}
+	}
+	function onKeyDown(e) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onCopy();
+		}
+	}
+	const copyResultMessage = {
+		error: errorMessage,
+		copied: copyMessage,
+		idle: ""
+	}[status];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: src_components_CopyButton_module_css.default.wrapper,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: btnRef,
+				type: "button",
+				className: src_components_CopyButton_module_css.default.CopyButton,
+				onClick: onCopy,
+				onFocus,
+				onBlur,
+				onMouseEnter,
+				onMouseLeave,
+				onKeyDown,
+				"aria-label": label,
+				"aria-describedby": isResultOpen ? resultMessageId : undefined,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopyIcon.CopyIcon, { className: src_components_CopyButton_module_css.default.icon })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: tooltipId,
+				className: src_components_CopyButton_module_css.default.tooltip,
+				"aria-hidden": "true",
+				"data-force-closed": isForcedShut,
+				children: copyResultMessage || label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: srId,
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: src_components_CopyButton_module_css.default.srOnly,
+				children: copyResultMessage
+			})
+		]
+	});
+}
+
+//#endregion
+exports.CopyButton = CopyButton;
+//# sourceMappingURL=CopyButton.cjs.map

package/dist/components/CopyButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.cjs","names":["s","CopyIcon"],"sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react'\nimport { CopyIcon } from './icons/CopyIcon'\nimport s from './CopyButton.module.css'\n\ntype Status = 'idle' | 'copied' | 'error'\n\ninterface Props {\n\tlabel: string\n\tcopyContent: string\n\tcopyMessage?: string\n\terrorMessage?: string\n}\n\nexport function CopyButton({\n\tlabel,\n\tcopyContent,\n\tcopyMessage = 'Copied to clipboard',\n\terrorMessage = 'Copy failed',\n}: Props) {\n\tconst [status, setStatus] = useState<Status>('idle')\n\tconst [isResultOpen, setResultOpen] = useState(false)\n\tconst [isForcedShut, setIsForcedShut] = useState(false)\n\tconst [isHovered, setIsHovered] = useState(false)\n\tconst [isFocused, setIsFocused] = useState(false)\n\tconst tooltipId = useId()\n\tconst srId = useId()\n\tconst resultMessageId = useId()\n\tconst btnRef = useRef<HTMLButtonElement | null>(null)\n\n\tuseEffect(() => {\n\t\tfunction handler(e: KeyboardEvent) {\n\t\t\tif (e.key === 'Escape' && (isHovered || isFocused)) {\n\t\t\t\te.stopPropagation()\n\t\t\t\treset()\n\t\t\t\tsetIsForcedShut(true)\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keyup', handler)\n\t\treturn () => document.removeEventListener('keyup', handler)\n\t}, [isHovered, isFocused])\n\n\tasync function onCopy() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(copyContent)\n\t\t\tsetStatus('copied')\n\t\t\tsetResultOpen(true)\n\t\t} catch {\n\t\t\tsetStatus('error')\n\t\t\tsetResultOpen(true)\n\t\t}\n\t}\n\tfunction reset() {\n\t\tsetStatus('idle')\n\t\tsetResultOpen(false)\n\t}\n\n\tfunction onBlur() {\n\t\treset()\n\t\tsetIsForcedShut(false)\n\t\tsetIsFocused(false)\n\t}\n\tfunction onFocus() {\n\t\tsetIsFocused(true)\n\t}\n\tfunction onMouseEnter() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsHovered(true)\n\t}\n\tfunction onMouseLeave() {\n\t\tsetIsHovered(false)\n\t\treset()\n\t\tif (isFocused) {\n\t\t\tsetIsForcedShut(true)\n\t\t}\n\t}\n\tfunction onKeyDown(e: React.KeyboardEvent) {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tonCopy()\n\t\t}\n\t}\n\n\tconst copyResultMessage = {\n\t\terror: errorMessage,\n\t\tcopied: copyMessage,\n\t\tidle: '',\n\t}[status]\n\n\treturn (\n\t\t<span className={s.wrapper}>\n\t\t\t<button\n\t\t\t\tref={btnRef}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={s.CopyButton}\n\t\t\t\tonClick={onCopy}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\taria-label={label}\n\t\t\t\taria-describedby={isResultOpen ? resultMessageId : undefined}\n\t\t\t>\n\t\t\t\t<CopyIcon className={s.icon} />\n\t\t\t</button>\n\n\t\t\t<span\n\t\t\t\tid={tooltipId}\n\t\t\t\tclassName={s.tooltip}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-force-closed={isForcedShut}\n\t\t\t>\n\t\t\t\t{copyResultMessage || label}\n\t\t\t</span>\n\n\t\t\t<span\n\t\t\t\tid={srId}\n\t\t\t\trole=\"status\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\tclassName={s.srOnly}\n\t\t\t>\n\t\t\t\t{copyResultMessage}\n\t\t\t</span>\n\t\t</span>\n\t)\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,WAAW,EAC1B,OACA,aACA,cAAc,uBACd,eAAe,iBACN;CACT,MAAM,CAAC,QAAQ,iCAA8B,OAAO;CACpD,MAAM,CAAC,cAAc,qCAA0B,MAAM;CACrD,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAM,CAAC,WAAW,oCAAyB,MAAM;CACjD,MAAM,CAAC,WAAW,oCAAyB,MAAM;CACjD,MAAM,8BAAmB;CACzB,MAAM,yBAAc;CACpB,MAAM,oCAAyB;CAC/B,MAAM,2BAA0C,KAAK;AAErD,4BAAgB;EACf,SAAS,QAAQ,GAAkB;AAClC,OAAI,EAAE,QAAQ,aAAa,aAAa,YAAY;AACnD,MAAE,iBAAiB;AACnB,WAAO;AACP,oBAAgB,KAAK;;;AAGvB,WAAS,iBAAiB,SAAS,QAAQ;AAC3C,eAAa,SAAS,oBAAoB,SAAS,QAAQ;IACzD,CAAC,WAAW,UAAU,CAAC;CAE1B,eAAe,SAAS;AACvB,MAAI;AACH,SAAM,UAAU,UAAU,UAAU,YAAY;AAChD,aAAU,SAAS;AACnB,iBAAc,KAAK;UACZ;AACP,aAAU,QAAQ;AAClB,iBAAc,KAAK;;;CAGrB,SAAS,QAAQ;AAChB,YAAU,OAAO;AACjB,gBAAc,MAAM;;CAGrB,SAAS,SAAS;AACjB,SAAO;AACP,kBAAgB,MAAM;AACtB,eAAa,MAAM;;CAEpB,SAAS,UAAU;AAClB,eAAa,KAAK;;CAEnB,SAAS,eAAe;AACvB,kBAAgB,MAAM;AACtB,eAAa,KAAK;;CAEnB,SAAS,eAAe;AACvB,eAAa,MAAM;AACnB,SAAO;AACP,MAAI,WAAW;AACd,mBAAgB,KAAK;;;CAGvB,SAAS,UAAU,GAAwB;AAC1C,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACvC,KAAE,gBAAgB;AAClB,WAAQ;;;CAIV,MAAM,oBAAoB;EACzB,OAAO;EACP,QAAQ;EACR,MAAM;EACN,CAAC;AAEF,QACC,4CAAC;EAAK,WAAWA,6CAAE;;GAClB,2CAAC;IACA,KAAK;IACL,MAAK;IACL,WAAWA,6CAAE;IACb,SAAS;IACA;IACD;IACM;IACA;IACH;IACX,cAAY;IACZ,oBAAkB,eAAe,kBAAkB;cAEnD,2CAACC,6BAAS,WAAWD,6CAAE,OAAQ;KACvB;GAET,2CAAC;IACA,IAAI;IACJ,WAAWA,6CAAE;IACb,eAAY;IACZ,qBAAmB;cAElB,qBAAqB;KAChB;GAEP,2CAAC;IACA,IAAI;IACJ,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAWA,6CAAE;cAEZ;KACK;;GACD"}

package/dist/components/CopyButton.mjs

@@ -0,0 +1,110 @@
+import { CopyIcon } from "./icons/CopyIcon.mjs";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./CopyButton.module.css";
+
+//#region src/components/CopyButton.tsx
+function CopyButton({ label, copyContent, copyMessage = "Copied to clipboard", errorMessage = "Copy failed" }) {
+	const [status, setStatus] = useState("idle");
+	const [isResultOpen, setResultOpen] = useState(false);
+	const [isForcedShut, setIsForcedShut] = useState(false);
+	const [isHovered, setIsHovered] = useState(false);
+	const [isFocused, setIsFocused] = useState(false);
+	const tooltipId = useId();
+	const srId = useId();
+	const resultMessageId = useId();
+	const btnRef = useRef(null);
+	useEffect(() => {
+		function handler(e) {
+			if (e.key === "Escape" && (isHovered || isFocused)) {
+				e.stopPropagation();
+				reset();
+				setIsForcedShut(true);
+			}
+		}
+		document.addEventListener("keyup", handler);
+		return () => document.removeEventListener("keyup", handler);
+	}, [isHovered, isFocused]);
+	async function onCopy() {
+		try {
+			await navigator.clipboard.writeText(copyContent);
+			setStatus("copied");
+			setResultOpen(true);
+		} catch {
+			setStatus("error");
+			setResultOpen(true);
+		}
+	}
+	function reset() {
+		setStatus("idle");
+		setResultOpen(false);
+	}
+	function onBlur() {
+		reset();
+		setIsForcedShut(false);
+		setIsFocused(false);
+	}
+	function onFocus() {
+		setIsFocused(true);
+	}
+	function onMouseEnter() {
+		setIsForcedShut(false);
+		setIsHovered(true);
+	}
+	function onMouseLeave() {
+		setIsHovered(false);
+		reset();
+		if (isFocused) {
+			setIsForcedShut(true);
+		}
+	}
+	function onKeyDown(e) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onCopy();
+		}
+	}
+	const copyResultMessage = {
+		error: errorMessage,
+		copied: copyMessage,
+		idle: ""
+	}[status];
+	return /* @__PURE__ */ jsxs("span", {
+		className: s.wrapper,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				ref: btnRef,
+				type: "button",
+				className: s.CopyButton,
+				onClick: onCopy,
+				onFocus,
+				onBlur,
+				onMouseEnter,
+				onMouseLeave,
+				onKeyDown,
+				"aria-label": label,
+				"aria-describedby": isResultOpen ? resultMessageId : undefined,
+				children: /* @__PURE__ */ jsx(CopyIcon, { className: s.icon })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: tooltipId,
+				className: s.tooltip,
+				"aria-hidden": "true",
+				"data-force-closed": isForcedShut,
+				children: copyResultMessage || label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: srId,
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: s.srOnly,
+				children: copyResultMessage
+			})
+		]
+	});
+}
+
+//#endregion
+export { CopyButton };
+//# sourceMappingURL=CopyButton.mjs.map

package/dist/components/CopyButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.mjs","names":[],"sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react'\nimport { CopyIcon } from './icons/CopyIcon'\nimport s from './CopyButton.module.css'\n\ntype Status = 'idle' | 'copied' | 'error'\n\ninterface Props {\n\tlabel: string\n\tcopyContent: string\n\tcopyMessage?: string\n\terrorMessage?: string\n}\n\nexport function CopyButton({\n\tlabel,\n\tcopyContent,\n\tcopyMessage = 'Copied to clipboard',\n\terrorMessage = 'Copy failed',\n}: Props) {\n\tconst [status, setStatus] = useState<Status>('idle')\n\tconst [isResultOpen, setResultOpen] = useState(false)\n\tconst [isForcedShut, setIsForcedShut] = useState(false)\n\tconst [isHovered, setIsHovered] = useState(false)\n\tconst [isFocused, setIsFocused] = useState(false)\n\tconst tooltipId = useId()\n\tconst srId = useId()\n\tconst resultMessageId = useId()\n\tconst btnRef = useRef<HTMLButtonElement | null>(null)\n\n\tuseEffect(() => {\n\t\tfunction handler(e: KeyboardEvent) {\n\t\t\tif (e.key === 'Escape' && (isHovered || isFocused)) {\n\t\t\t\te.stopPropagation()\n\t\t\t\treset()\n\t\t\t\tsetIsForcedShut(true)\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keyup', handler)\n\t\treturn () => document.removeEventListener('keyup', handler)\n\t}, [isHovered, isFocused])\n\n\tasync function onCopy() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(copyContent)\n\t\t\tsetStatus('copied')\n\t\t\tsetResultOpen(true)\n\t\t} catch {\n\t\t\tsetStatus('error')\n\t\t\tsetResultOpen(true)\n\t\t}\n\t}\n\tfunction reset() {\n\t\tsetStatus('idle')\n\t\tsetResultOpen(false)\n\t}\n\n\tfunction onBlur() {\n\t\treset()\n\t\tsetIsForcedShut(false)\n\t\tsetIsFocused(false)\n\t}\n\tfunction onFocus() {\n\t\tsetIsFocused(true)\n\t}\n\tfunction onMouseEnter() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsHovered(true)\n\t}\n\tfunction onMouseLeave() {\n\t\tsetIsHovered(false)\n\t\treset()\n\t\tif (isFocused) {\n\t\t\tsetIsForcedShut(true)\n\t\t}\n\t}\n\tfunction onKeyDown(e: React.KeyboardEvent) {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tonCopy()\n\t\t}\n\t}\n\n\tconst copyResultMessage = {\n\t\terror: errorMessage,\n\t\tcopied: copyMessage,\n\t\tidle: '',\n\t}[status]\n\n\treturn (\n\t\t<span className={s.wrapper}>\n\t\t\t<button\n\t\t\t\tref={btnRef}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={s.CopyButton}\n\t\t\t\tonClick={onCopy}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\taria-label={label}\n\t\t\t\taria-describedby={isResultOpen ? resultMessageId : undefined}\n\t\t\t>\n\t\t\t\t<CopyIcon className={s.icon} />\n\t\t\t</button>\n\n\t\t\t<span\n\t\t\t\tid={tooltipId}\n\t\t\t\tclassName={s.tooltip}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-force-closed={isForcedShut}\n\t\t\t>\n\t\t\t\t{copyResultMessage || label}\n\t\t\t</span>\n\n\t\t\t<span\n\t\t\t\tid={srId}\n\t\t\t\trole=\"status\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\tclassName={s.srOnly}\n\t\t\t>\n\t\t\t\t{copyResultMessage}\n\t\t\t</span>\n\t\t</span>\n\t)\n}\n"],"mappings":";;;;;;AAaA,SAAgB,WAAW,EAC1B,OACA,aACA,cAAc,uBACd,eAAe,iBACN;CACT,MAAM,CAAC,QAAQ,aAAa,SAAiB,OAAO;CACpD,MAAM,CAAC,cAAc,iBAAiB,SAAS,MAAM;CACrD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,YAAY,OAAO;CACzB,MAAM,OAAO,OAAO;CACpB,MAAM,kBAAkB,OAAO;CAC/B,MAAM,SAAS,OAAiC,KAAK;AAErD,iBAAgB;EACf,SAAS,QAAQ,GAAkB;AAClC,OAAI,EAAE,QAAQ,aAAa,aAAa,YAAY;AACnD,MAAE,iBAAiB;AACnB,WAAO;AACP,oBAAgB,KAAK;;;AAGvB,WAAS,iBAAiB,SAAS,QAAQ;AAC3C,eAAa,SAAS,oBAAoB,SAAS,QAAQ;IACzD,CAAC,WAAW,UAAU,CAAC;CAE1B,eAAe,SAAS;AACvB,MAAI;AACH,SAAM,UAAU,UAAU,UAAU,YAAY;AAChD,aAAU,SAAS;AACnB,iBAAc,KAAK;UACZ;AACP,aAAU,QAAQ;AAClB,iBAAc,KAAK;;;CAGrB,SAAS,QAAQ;AAChB,YAAU,OAAO;AACjB,gBAAc,MAAM;;CAGrB,SAAS,SAAS;AACjB,SAAO;AACP,kBAAgB,MAAM;AACtB,eAAa,MAAM;;CAEpB,SAAS,UAAU;AAClB,eAAa,KAAK;;CAEnB,SAAS,eAAe;AACvB,kBAAgB,MAAM;AACtB,eAAa,KAAK;;CAEnB,SAAS,eAAe;AACvB,eAAa,MAAM;AACnB,SAAO;AACP,MAAI,WAAW;AACd,mBAAgB,KAAK;;;CAGvB,SAAS,UAAU,GAAwB;AAC1C,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACvC,KAAE,gBAAgB;AAClB,WAAQ;;;CAIV,MAAM,oBAAoB;EACzB,OAAO;EACP,QAAQ;EACR,MAAM;EACN,CAAC;AAEF,QACC,qBAAC;EAAK,WAAW,EAAE;;GAClB,oBAAC;IACA,KAAK;IACL,MAAK;IACL,WAAW,EAAE;IACb,SAAS;IACA;IACD;IACM;IACA;IACH;IACX,cAAY;IACZ,oBAAkB,eAAe,kBAAkB;cAEnD,oBAAC,YAAS,WAAW,EAAE,OAAQ;KACvB;GAET,oBAAC;IACA,IAAI;IACJ,WAAW,EAAE;IACb,eAAY;IACZ,qBAAmB;cAElB,qBAAqB;KAChB;GAEP,oBAAC;IACA,IAAI;IACJ,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAW,EAAE;cAEZ;KACK;;GACD"}

package/dist/components/CopyButton.module.css

@@ -0,0 +1,76 @@
+.wrapper {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+}
+
+/* 44x44 target (WCAG) while keeping visual size small */
+.CopyButton {
+	--btn-size: 1.3em;
+	inline-size: var(--btn-size);
+	block-size: var(--btn-size);
+	display: inline-grid;
+	place-items: center;
+	padding: 0.2em;
+	color: var(--sb-color-text-secondary, #5c6870);
+	background: var(--sb-bg2, #f8f9fa);
+	border: 1px solid currentColor;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+.CopyButton:focus-visible {
+	outline: 2px solid var(--sb-color-primary, #1ea7fd);
+	outline-offset: 2px;
+}
+
+/* Prefer minimum 3:1 contrast for the icon */
+.icon {
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+/* Tooltip element (instead of ::before so SRs can reference it) */
+.tooltip {
+	position: absolute;
+	inset-inline-start: calc(100% + 0.5em);
+	inset-block-start: 50%;
+	transform: translateY(-50%);
+	background: var(--sb-bg1, #fff);
+	color: var(--sb-color-text-secondary, #5c6870);
+	border: 1px solid currentColor;
+	border-radius: 4px;
+	padding: 0.25em 0.5em;
+	white-space: nowrap;
+	z-index: 10;
+	font-size: 0.8em;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+	transition: opacity 0.3s ease, visibility 0.3s ease;
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+}
+
+.CopyButton {
+	&:hover,
+	&:focus-visible {
+		& + .tooltip:not([data-force-closed='true']) {
+			opacity: 1;
+			visibility: visible;
+			pointer-events: auto;
+		}
+	}
+}
+
+/* Screen-reader only utility */
+.srOnly {
+	position: absolute !important;
+	inline-size: 1px;
+	block-size: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	white-space: nowrap;
+	border: 0;
+}

package/dist/components/Expandable.cjs

@@ -0,0 +1,51 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_DoubleChevronDown = require('./icons/DoubleChevronDown.cjs');
+const require_X = require('./icons/X.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_components_Expandable_module_css = require("./Expandable.module.css");
+src_components_Expandable_module_css = require_runtime.__toESM(src_components_Expandable_module_css);
+
+//#region src/components/Expandable.tsx
+function Expandable({ onToggle, Header, children, Icon }) {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+		className: src_components_Expandable_module_css.default.container,
+		onToggle: (e) => {
+			e.stopPropagation();
+			const isTogglingToOpen = e.currentTarget.open;
+			const isAnimationSupported = CSS.supports("interpolate-size", "allow-keywords") && CSS.supports("transition-behavior", "allow-discrete");
+			onToggle?.(isTogglingToOpen);
+			if (isAnimationSupported) {
+				if (isTogglingToOpen) {
+					setIsOpen(isTogglingToOpen);
+				} else {
+					setTimeout(() => {
+						setIsOpen(isTogglingToOpen);
+					}, .3 * 1e3);
+				}
+			} else {
+				setIsOpen(isTogglingToOpen);
+			}
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+			className: src_components_Expandable_module_css.default.header,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: `${src_components_Expandable_module_css.default.icon}` }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: src_components_Expandable_module_css.default.headContent,
+					children: Header
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DoubleChevronDown.DoubleChevronDown, { className: `${src_components_Expandable_module_css.default.icon} ${src_components_Expandable_module_css.default.OpenIcon}` }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_X.X, { className: `${src_components_Expandable_module_css.default.icon} ${src_components_Expandable_module_css.default.CloseIcon}` })
+			]
+		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: src_components_Expandable_module_css.default.body,
+			children
+		})]
+	});
+}
+
+//#endregion
+exports.Expandable = Expandable;
+//# sourceMappingURL=Expandable.cjs.map

package/dist/components/Expandable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.cjs","names":["s","DoubleChevronDown","X"],"sources":["../../src/components/Expandable.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react'\nimport s from './Expandable.module.css'\nimport { DoubleChevronDown } from './icons/DoubleChevronDown'\nimport { X } from './icons/X'\nimport type { IconComponent } from './icons/iconTypes'\n\ninterface PropsForExpandable {\n\tHeader: ReactNode\n\tchildren: ReactNode\n\tIcon: IconComponent\n\tonToggle?: (toggleState: boolean) => void\n}\nexport function Expandable({\n\tonToggle,\n\tHeader,\n\tchildren,\n\tIcon,\n}: PropsForExpandable) {\n\tconst [isOpen, setIsOpen] = useState(false)\n\n\treturn (\n\t\t<details\n\t\t\tclassName={s.container}\n\t\t\tonToggle={(e) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tconst isTogglingToOpen = e.currentTarget.open\n\t\t\t\tconst isAnimationSupported =\n\t\t\t\t\tCSS.supports('interpolate-size', 'allow-keywords') &&\n\t\t\t\t\tCSS.supports('transition-behavior', 'allow-discrete')\n\t\t\t\tonToggle?.(isTogglingToOpen)\n\n\t\t\t\t// since we unmount on close we need to delay the unmount when the accordion is closing\n\t\t\t\tif (isAnimationSupported) {\n\t\t\t\t\tif (isTogglingToOpen) {\n\t\t\t\t\t\tsetIsOpen(isTogglingToOpen)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tsetIsOpen(isTogglingToOpen)\n\t\t\t\t\t\t}, 0.3 * 1000)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsetIsOpen(isTogglingToOpen)\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<summary className={s.header}>\n\t\t\t\t{/* Need to handle show/hide of icons with CSS since isOpen has a delay on close */}\n\t\t\t\t<Icon className={`${s.icon}`} />\n\t\t\t\t<div className={s.headContent}>{Header}</div>\n\t\t\t\t<DoubleChevronDown className={`${s.icon} ${s.OpenIcon}`} />\n\t\t\t\t<X className={`${s.icon} ${s.CloseIcon}`} />\n\t\t\t</summary>\n\t\t\t{isOpen && <div className={s.body}>{children}</div>}\n\t\t</details>\n\t)\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,WAAW,EAC1B,UACA,QACA,UACA,QACsB;CACtB,MAAM,CAAC,QAAQ,iCAAsB,MAAM;AAE3C,QACC,4CAAC;EACA,WAAWA,6CAAE;EACb,WAAW,MAAM;AAChB,KAAE,iBAAiB;GACnB,MAAM,mBAAmB,EAAE,cAAc;GACzC,MAAM,uBACL,IAAI,SAAS,oBAAoB,iBAAiB,IAClD,IAAI,SAAS,uBAAuB,iBAAiB;AACtD,cAAW,iBAAiB;AAG5B,OAAI,sBAAsB;AACzB,QAAI,kBAAkB;AACrB,eAAU,iBAAiB;WACrB;AACN,sBAAiB;AAChB,gBAAU,iBAAiB;QACzB,KAAM,IAAK;;UAET;AACN,cAAU,iBAAiB;;;aAI7B,4CAAC;GAAQ,WAAWA,6CAAE;;IAErB,2CAAC,QAAK,WAAW,GAAGA,6CAAE,SAAU;IAChC,2CAAC;KAAI,WAAWA,6CAAE;eAAc;MAAa;IAC7C,2CAACC,+CAAkB,WAAW,GAAGD,6CAAE,KAAK,GAAGA,6CAAE,aAAc;IAC3D,2CAACE,eAAE,WAAW,GAAGF,6CAAE,KAAK,GAAGA,6CAAE,cAAe;;IACnC,EACT,UAAU,2CAAC;GAAI,WAAWA,6CAAE;GAAO;IAAe;GAC1C"}

package/dist/components/Expandable.mjs

@@ -0,0 +1,49 @@
+import { DoubleChevronDown } from "./icons/DoubleChevronDown.mjs";
+import { X } from "./icons/X.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./Expandable.module.css";
+
+//#region src/components/Expandable.tsx
+function Expandable({ onToggle, Header, children, Icon }) {
+	const [isOpen, setIsOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("details", {
+		className: s.container,
+		onToggle: (e) => {
+			e.stopPropagation();
+			const isTogglingToOpen = e.currentTarget.open;
+			const isAnimationSupported = CSS.supports("interpolate-size", "allow-keywords") && CSS.supports("transition-behavior", "allow-discrete");
+			onToggle?.(isTogglingToOpen);
+			if (isAnimationSupported) {
+				if (isTogglingToOpen) {
+					setIsOpen(isTogglingToOpen);
+				} else {
+					setTimeout(() => {
+						setIsOpen(isTogglingToOpen);
+					}, .3 * 1e3);
+				}
+			} else {
+				setIsOpen(isTogglingToOpen);
+			}
+		},
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: s.header,
+			children: [
+				/* @__PURE__ */ jsx(Icon, { className: `${s.icon}` }),
+				/* @__PURE__ */ jsx("div", {
+					className: s.headContent,
+					children: Header
+				}),
+				/* @__PURE__ */ jsx(DoubleChevronDown, { className: `${s.icon} ${s.OpenIcon}` }),
+				/* @__PURE__ */ jsx(X, { className: `${s.icon} ${s.CloseIcon}` })
+			]
+		}), isOpen && /* @__PURE__ */ jsx("div", {
+			className: s.body,
+			children
+		})]
+	});
+}
+
+//#endregion
+export { Expandable };
+//# sourceMappingURL=Expandable.mjs.map