@screenbook/ui 0.0.1

package/dist/server/pages/graph.astro.mjs

@@ -0,0 +1,107 @@
+import { e as createComponent, k as renderComponent, r as renderTemplate, m as maybeRenderHead, n as renderScript, l as Fragment } from '../chunks/astro/server_m7yT4wCr.mjs';
+import 'piccolore';
+import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_DJf-tycc.mjs';
+/* empty css                                 */
+export { renderers } from '../renderers.mjs';
+
+const $$Graph = createComponent(async ($$result, $$props, $$slots) => {
+  const screens = loadScreens();
+  let navigationGraph = "";
+  if (screens.length > 0) {
+    const lines = ["flowchart TD"];
+    for (const screen of screens) {
+      const label = screen.title.replace(/"/g, "'");
+      const id = screen.id.replace(/\./g, "_");
+      lines.push(`    ${id}["${label}"]`);
+    }
+    lines.push("");
+    for (const screen of screens) {
+      if (screen.next) {
+        const fromId = screen.id.replace(/\./g, "_");
+        for (const nextId of screen.next) {
+          const toId = nextId.replace(/\./g, "_");
+          lines.push(`    ${fromId} --> ${toId}`);
+        }
+      }
+    }
+    navigationGraph = lines.join("\n");
+  }
+  let apiGraph = "";
+  if (screens.length > 0) {
+    const lines = ["flowchart LR"];
+    const apis = /* @__PURE__ */ new Set();
+    for (const screen of screens) {
+      if (screen.dependsOn) {
+        for (const api of screen.dependsOn) {
+          const baseName = api.split(".")[0];
+          apis.add(baseName);
+        }
+      }
+    }
+    lines.push("    %% API nodes");
+    for (const api of apis) {
+      const id = api.replace(/\./g, "_");
+      lines.push(`    ${id}[/"${api}"/]`);
+    }
+    lines.push("");
+    lines.push("    %% Screen nodes");
+    for (const screen of screens) {
+      if (screen.dependsOn && screen.dependsOn.length > 0) {
+        const label = screen.title.replace(/"/g, "'");
+        const id = screen.id.replace(/\./g, "_");
+        lines.push(`    ${id}["${label}"]`);
+      }
+    }
+    lines.push("");
+    lines.push("    %% Dependencies");
+    for (const screen of screens) {
+      if (screen.dependsOn) {
+        const screenId = screen.id.replace(/\./g, "_");
+        const connectedApis = /* @__PURE__ */ new Set();
+        for (const api of screen.dependsOn) {
+          const baseName = api.split(".")[0];
+          if (!connectedApis.has(baseName)) {
+            connectedApis.add(baseName);
+            const apiId = baseName.replace(/\./g, "_");
+            lines.push(`    ${apiId} --> ${screenId}`);
+          }
+        }
+      }
+    }
+    lines.push("");
+    lines.push("    %% Styling");
+    lines.push(`    classDef apiNode fill:#14b8a6,stroke:#5eead4,stroke-width:2px,color:#042f2e`);
+    for (const api of apis) {
+      const id = api.replace(/\./g, "_");
+      lines.push(`    class ${id} apiNode`);
+    }
+    apiGraph = lines.join("\n");
+  }
+  const apiCount = new Set(
+    screens.flatMap((s) => (s.dependsOn || []).map((d) => d.split(".")[0]))
+  ).size;
+  return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": "Graph", "currentPage": "graph", "data-astro-cid-oy34yelw": true }, { "default": async ($$result2) => renderTemplate` ${maybeRenderHead()}<div class="container" data-astro-cid-oy34yelw> <div class="page-header" data-astro-cid-oy34yelw> <h1 class="page-title" data-astro-cid-oy34yelw>Dependency Graph</h1> <p class="page-description" data-astro-cid-oy34yelw>
+Visualize relationships between screens and APIs.
+</p> </div> ${screens.length === 0 ? renderTemplate`<div class="empty-state" data-astro-cid-oy34yelw> <svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-oy34yelw> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" data-astro-cid-oy34yelw></path> </svg> <h2 class="empty-state-title" data-astro-cid-oy34yelw>No graph data</h2> <p class="empty-state-description" data-astro-cid-oy34yelw>
+Run the build command to generate screen metadata.
+</p> <code class="empty-state-code" data-astro-cid-oy34yelw> <span class="prompt" data-astro-cid-oy34yelw>$</span> screenbook build
+</code> </div>` : renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "data-astro-cid-oy34yelw": true }, { "default": async ($$result3) => renderTemplate` <div class="graph-controls" data-astro-cid-oy34yelw> <div class="view-toggle" data-astro-cid-oy34yelw> <button class="toggle-btn active" data-view="navigation" data-astro-cid-oy34yelw> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-oy34yelw> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" data-astro-cid-oy34yelw></path> </svg>
+Navigation
+</button> <button class="toggle-btn" data-view="api" data-astro-cid-oy34yelw> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-oy34yelw> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" data-astro-cid-oy34yelw></path> </svg>
+API Dependencies
+</button> </div> <div class="graph-stats" data-astro-cid-oy34yelw> <span class="stat" data-astro-cid-oy34yelw>${screens.length} screens</span> <span class="stat" data-astro-cid-oy34yelw>${apiCount} APIs</span> </div> </div> <div class="graph-container" id="navigation-graph" data-astro-cid-oy34yelw> <pre class="mermaid" data-graph="navigation" data-astro-cid-oy34yelw>${navigationGraph}</pre> </div> <div class="graph-container hidden" id="api-graph" data-astro-cid-oy34yelw> <pre class="mermaid" data-graph="api" data-astro-cid-oy34yelw>${apiGraph}</pre> </div> <div class="graph-legend" id="navigation-legend" data-astro-cid-oy34yelw> <div class="graph-legend-item" data-astro-cid-oy34yelw> <div class="legend-node" data-astro-cid-oy34yelw></div> <span data-astro-cid-oy34yelw>Screen</span> </div> <div class="graph-legend-item" data-astro-cid-oy34yelw> <div class="legend-edge" data-astro-cid-oy34yelw></div> <span data-astro-cid-oy34yelw>Navigation flow</span> </div> </div> <div class="graph-legend hidden" id="api-legend" data-astro-cid-oy34yelw> <div class="graph-legend-item" data-astro-cid-oy34yelw> <div class="legend-node legend-api" data-astro-cid-oy34yelw></div> <span data-astro-cid-oy34yelw>API</span> </div> <div class="graph-legend-item" data-astro-cid-oy34yelw> <div class="legend-node" data-astro-cid-oy34yelw></div> <span data-astro-cid-oy34yelw>Screen</span> </div> <div class="graph-legend-item" data-astro-cid-oy34yelw> <div class="legend-edge" data-astro-cid-oy34yelw></div> <span data-astro-cid-oy34yelw>Depends on</span> </div> </div> ` })}`} </div> ${renderScript($$result2, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/graph.astro?astro&type=script&index=0&lang.ts")} ` })} `;
+}, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/graph.astro", void 0);
+
+const $$file = "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/graph.astro";
+const $$url = "/graph";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	default: $$Graph,
+	file: $$file,
+	url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };

package/dist/server/pages/impact.astro.mjs

@@ -0,0 +1,52 @@
+import { e as createComponent, f as createAstro, k as renderComponent, r as renderTemplate, m as maybeRenderHead, n as renderScript, l as Fragment, h as addAttribute } from '../chunks/astro/server_m7yT4wCr.mjs';
+import 'piccolore';
+import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_DJf-tycc.mjs';
+import { g as getAllApis, a as analyzeImpact, b as generateImpactMermaid, f as formatImpactMarkdown } from '../chunks/impactAnalysis_Bz5lMdmy.mjs';
+/* empty css                                  */
+export { renderers } from '../renderers.mjs';
+
+const $$Astro = createAstro();
+const $$Impact = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
+  Astro2.self = $$Impact;
+  const screens = loadScreens();
+  const allApis = getAllApis(screens);
+  const url = Astro2.url;
+  const apiQuery = url.searchParams.get("api") || "";
+  let result = null;
+  let mermaidGraph = "";
+  let markdown = "";
+  if (apiQuery && screens.length > 0) {
+    result = analyzeImpact(screens, apiQuery, 3);
+    mermaidGraph = generateImpactMermaid(screens, result);
+    markdown = formatImpactMarkdown(result);
+  }
+  return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": "Impact Analysis", "currentPage": "impact", "data-astro-cid-kf663cba": true }, { "default": async ($$result2) => renderTemplate` ${maybeRenderHead()}<div class="container" data-astro-cid-kf663cba> <div class="page-header" data-astro-cid-kf663cba> <h1 class="page-title" data-astro-cid-kf663cba>Impact Analysis</h1> <p class="page-description" data-astro-cid-kf663cba>
+Analyze which screens are affected when an API changes.
+</p> </div> ${screens.length === 0 ? renderTemplate`<div class="empty-state" data-astro-cid-kf663cba> <svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" data-astro-cid-kf663cba></path> </svg> <h2 class="empty-state-title" data-astro-cid-kf663cba>No screen data</h2> <p class="empty-state-description" data-astro-cid-kf663cba>
+Run the build command to generate screen metadata.
+</p> <code class="empty-state-code" data-astro-cid-kf663cba> <span class="prompt" data-astro-cid-kf663cba>$</span> screenbook build
+</code> </div>` : renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "data-astro-cid-kf663cba": true }, { "default": async ($$result3) => renderTemplate` <div class="impact-search" data-astro-cid-kf663cba> <form method="get" class="search-form" data-astro-cid-kf663cba> <div class="search-wrapper impact-search-wrapper" data-astro-cid-kf663cba> <svg class="search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" data-astro-cid-kf663cba></path> </svg> <input type="text" name="api" class="search-input" placeholder="Enter API name (e.g., InvoiceAPI.getDetail)"${addAttribute(apiQuery, "value")} list="api-suggestions" data-astro-cid-kf663cba> <datalist id="api-suggestions" data-astro-cid-kf663cba> ${allApis.map((api) => renderTemplate`<option${addAttribute(api, "value")} data-astro-cid-kf663cba></option>`)} </datalist> <button type="submit" class="search-button" data-astro-cid-kf663cba>
+Analyze
+</button> </div> </form> ${allApis.length > 0 && !apiQuery && renderTemplate`<div class="api-suggestions" data-astro-cid-kf663cba> <p class="suggestions-label" data-astro-cid-kf663cba>Available APIs:</p> <div class="tags" data-astro-cid-kf663cba> ${allApis.slice(0, 10).map((api) => renderTemplate`<a${addAttribute(`/impact?api=${encodeURIComponent(api)}`, "href")} class="tag" data-astro-cid-kf663cba> ${api} </a>`)} ${allApis.length > 10 && renderTemplate`<span class="tag tag-more" data-astro-cid-kf663cba>+${allApis.length - 10} more</span>`} </div> </div>`} </div> ${result && renderTemplate`<div class="impact-results" data-astro-cid-kf663cba> <div class="impact-summary" data-astro-cid-kf663cba> <div class="stats" data-astro-cid-kf663cba> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-total" data-astro-cid-kf663cba>${result.totalCount}</div> <div class="stat-label" data-astro-cid-kf663cba>Total Affected</div> </div> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-direct" data-astro-cid-kf663cba>${result.direct.length}</div> <div class="stat-label" data-astro-cid-kf663cba>Direct</div> </div> <div class="stat" data-astro-cid-kf663cba> <div class="stat-value stat-transitive" data-astro-cid-kf663cba>${result.transitive.length}</div> <div class="stat-label" data-astro-cid-kf663cba>Transitive</div> </div> </div> <button id="copy-markdown" class="copy-button"${addAttribute(markdown, "data-markdown")} data-astro-cid-kf663cba> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" data-astro-cid-kf663cba></path> </svg>
+Copy as Markdown
+</button> </div> ${result.totalCount === 0 ? renderTemplate`<div class="no-impact" data-astro-cid-kf663cba> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-kf663cba></path> </svg> <p data-astro-cid-kf663cba>No screens depend on <code data-astro-cid-kf663cba>${apiQuery}</code></p> </div>` : renderTemplate`${renderComponent($$result3, "Fragment", Fragment, { "data-astro-cid-kf663cba": true }, { "default": async ($$result4) => renderTemplate` <div class="impact-graph" data-astro-cid-kf663cba> <div class="graph-container" data-astro-cid-kf663cba> <pre class="mermaid" data-astro-cid-kf663cba>${mermaidGraph}</pre> </div> <div class="graph-legend" data-astro-cid-kf663cba> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node legend-direct" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Direct dependency</span> </div> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node legend-transitive" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Transitive</span> </div> <div class="graph-legend-item" data-astro-cid-kf663cba> <div class="legend-node" data-astro-cid-kf663cba></div> <span data-astro-cid-kf663cba>Not affected</span> </div> </div> </div> <div class="impact-details" data-astro-cid-kf663cba> ${result.direct.length > 0 && renderTemplate`<div class="section" data-astro-cid-kf663cba> <h3 class="section-title" data-astro-cid-kf663cba> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" data-astro-cid-kf663cba></path> </svg>
+Direct Dependencies (${result.direct.length})
+</h3> <div class="screen-link-list" data-astro-cid-kf663cba> ${result.direct.map((screen) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="screen-link impact-screen direct" data-astro-cid-kf663cba> <div class="screen-link-info" data-astro-cid-kf663cba> <div class="screen-link-title" data-astro-cid-kf663cba>${screen.title}</div> <div class="screen-link-id" data-astro-cid-kf663cba>${screen.route}</div> </div> ${screen.owner && screen.owner.length > 0 && renderTemplate`<div class="screen-link-owner" data-astro-cid-kf663cba> ${screen.owner.join(", ")} </div>`} </a>`)} </div> </div>`} ${result.transitive.length > 0 && renderTemplate`<div class="section" data-astro-cid-kf663cba> <h3 class="section-title" data-astro-cid-kf663cba> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-kf663cba> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" data-astro-cid-kf663cba></path> </svg>
+Transitive Dependencies (${result.transitive.length})
+</h3> <div class="screen-link-list" data-astro-cid-kf663cba> ${result.transitive.map(({ screen, path }) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="screen-link impact-screen transitive" data-astro-cid-kf663cba> <div class="screen-link-info" data-astro-cid-kf663cba> <div class="screen-link-title" data-astro-cid-kf663cba>${screen.title}</div> <div class="screen-link-path" data-astro-cid-kf663cba> ${path.join(" \u2192 ")} </div> </div> </a>`)} </div> </div>`} </div> ` })}`} </div>`}` })}`} </div> ${renderScript($$result2, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/impact.astro?astro&type=script&index=0&lang.ts")} ` })} `;
+}, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/impact.astro", void 0);
+
+const $$file = "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/impact.astro";
+const $$url = "/impact";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	default: $$Impact,
+	file: $$file,
+	url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };

package/dist/server/pages/index.astro.mjs

@@ -0,0 +1,28 @@
+import { e as createComponent, k as renderComponent, r as renderTemplate, m as maybeRenderHead, n as renderScript, l as Fragment, h as addAttribute } from '../chunks/astro/server_m7yT4wCr.mjs';
+import 'piccolore';
+import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_DJf-tycc.mjs';
+export { renderers } from '../renderers.mjs';
+
+const $$Index = createComponent(($$result, $$props, $$slots) => {
+  const screens = loadScreens();
+  const allTags = [...new Set(screens.flatMap((s) => s.tags ?? []))];
+  return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": "Screens", "currentPage": "screens" }, { "default": ($$result2) => renderTemplate` ${maybeRenderHead()}<div class="container"> <div class="page-header"> <h1 class="page-title">Screens</h1> <p class="page-description">
+Browse all screens in your application. Click on a screen to see details and navigation flows.
+</p> </div> ${screens.length === 0 ? renderTemplate`<div class="empty-state"> <svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path> </svg> <h2 class="empty-state-title">No screens found</h2> <p class="empty-state-description">
+Get started by generating screen metadata from your routes.
+</p> <div class="empty-state-steps"> <div class="empty-state-step"> <span class="step-number">1</span> <div class="step-content"> <div class="step-title">Generate screen.meta.ts files</div> <code class="step-code">screenbook generate</code> </div> </div> <div class="empty-state-step"> <span class="step-number">2</span> <div class="step-content"> <div class="step-title">Build the screen catalog</div> <code class="step-code">screenbook build</code> </div> </div> <div class="empty-state-step"> <span class="step-number">3</span> <div class="step-content"> <div class="step-title">Restart the dev server</div> <code class="step-code">screenbook dev</code> </div> </div> </div> <div class="empty-state-features"> <p class="features-title">What you'll get:</p> <ul class="features-list"> <li>Screen catalog with search & filter</li> <li>Navigation graph visualization</li> <li>Impact analysis for API changes</li> <li>CI lint for documentation coverage</li> </ul> </div> </div>` : renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate` <div class="search-wrapper"> <svg class="search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <input type="text" id="search" placeholder="Search screens..." class="search-input"> </div> ${allTags.length > 0 && renderTemplate`<div class="tags"> ${allTags.map((tag) => renderTemplate`<button class="tag"${addAttribute(tag, "data-tag")}>${tag}</button>`)} </div>`}<div class="screen-grid" id="screen-list"> ${screens.map((screen) => renderTemplate`<a${addAttribute(`/screen/${screen.id}`, "href")} class="card-link"${addAttribute(screen.tags?.join(",") ?? "", "data-tags")}${addAttribute(screen.title.toLowerCase(), "data-title")}${addAttribute(screen.id.toLowerCase(), "data-id")}> <div class="card"> <h3 class="card-title">${screen.title}</h3> <div class="card-route">${screen.route}</div> <div class="card-meta"> <span class="card-meta-item"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5"></path> </svg> ${screen.id} </span> ${screen.owner && screen.owner.length > 0 && renderTemplate`<span class="card-meta-item"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"></path> </svg> ${screen.owner.join(", ")} </span>`} </div> ${screen.tags && screen.tags.length > 0 && renderTemplate`<div class="card-tags"> ${screen.tags.map((tag) => renderTemplate`<span class="card-tag">${tag}</span>`)} </div>`} </div> </a>`)} </div> ` })}`} </div> ${renderScript($$result2, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/index.astro?astro&type=script&index=0&lang.ts")} ` })}`;
+}, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/index.astro", void 0);
+
+const $$file = "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/index.astro";
+const $$url = "";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	default: $$Index,
+	file: $$file,
+	url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };

package/dist/server/pages/screen/_id_.astro.mjs

@@ -0,0 +1,52 @@
+import { e as createComponent, f as createAstro, k as renderComponent, r as renderTemplate, m as maybeRenderHead, h as addAttribute } from '../../chunks/astro/server_m7yT4wCr.mjs';
+import 'piccolore';
+import { l as loadScreens, $ as $$Layout } from '../../chunks/loadScreens_DJf-tycc.mjs';
+import { c as getApiDependencyCount } from '../../chunks/impactAnalysis_Bz5lMdmy.mjs';
+export { renderers } from '../../renderers.mjs';
+
+const $$Astro = createAstro();
+function getStaticPaths() {
+  const screens = loadScreens();
+  return screens.map((screen) => ({
+    params: { id: screen.id }
+  }));
+}
+const $$id = createComponent(($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
+  Astro2.self = $$id;
+  const screens = loadScreens();
+  const apiCounts = getApiDependencyCount(screens);
+  const { id } = Astro2.params;
+  const screen = screens.find((s) => s.id === id);
+  if (!screen) {
+    return Astro2.redirect("/");
+  }
+  const entryScreens = screens.filter((s) => screen.entryPoints?.includes(s.id));
+  const nextScreens = screens.filter((s) => screen.next?.includes(s.id));
+  return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": screen.title }, { "default": ($$result2) => renderTemplate` ${maybeRenderHead()}<div class="container"> <a href="/" class="back-link"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path> </svg>
+Back to screens
+</a> <div class="detail-header"> <h1 class="detail-title">${screen.title}</h1> <div class="detail-route"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"></path> </svg> ${screen.route} </div> </div> <div class="detail-content"> <div> <!-- Information --> <div class="section"> <h2 class="section-title">Information</h2> <div class="info-list"> <div class="info-item"> <span class="info-label">ID</span> <span class="info-value"><code>${screen.id}</code></span> </div> ${screen.owner && screen.owner.length > 0 && renderTemplate`<div class="info-item"> <span class="info-label">Owner</span> <span class="info-value">${screen.owner.join(", ")}</span> </div>`} ${screen.tags && screen.tags.length > 0 && renderTemplate`<div class="info-item"> <span class="info-label">Tags</span> <span class="info-value"> <div class="card-tags"> ${screen.tags.map((tag) => renderTemplate`<span class="card-tag">${tag}</span>`)} </div> </span> </div>`} ${screen.description && renderTemplate`<div class="info-item"> <span class="info-label">Description</span> <span class="info-value">${screen.description}</span> </div>`} </div> </div> <!-- Dependencies --> ${screen.dependsOn && screen.dependsOn.length > 0 && renderTemplate`<div class="section"> <h2 class="section-title">Dependencies</h2> <div class="dep-list"> ${screen.dependsOn.map((dep) => {
+    const count = apiCounts.get(dep) || 1;
+    const otherCount = count - 1;
+    return renderTemplate`<a${addAttribute(`/impact?api=${encodeURIComponent(dep)}`, "href")} class="dep-item dep-item-link"> <div class="dep-item-main"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path> </svg> <span>${dep}</span> </div> <div class="dep-item-meta"> ${otherCount > 0 && renderTemplate`<span class="dep-count">+${otherCount} other${otherCount > 1 ? "s" : ""}</span>`} <svg class="dep-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path> </svg> </div> </a>`;
+  })} </div> </div>`} <!-- External Links --> ${screen.links && screen.links.length > 0 && renderTemplate`<div class="section"> <h2 class="section-title">Links</h2> <div class="dep-list"> ${screen.links.map((link) => renderTemplate`<a${addAttribute(link.url, "href")} target="_blank" rel="noopener noreferrer" class="dep-item"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path> </svg> ${link.label} </a>`)} </div> </div>`} </div> <div> <!-- Entry Points --> ${entryScreens.length > 0 && renderTemplate`<div class="sidebar-card"> <h3 class="sidebar-card-title"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"></path> </svg>
+Entry Points
+</h3> <div class="screen-link-list"> ${entryScreens.map((s) => renderTemplate`<a${addAttribute(`/screen/${s.id}`, "href")} class="screen-link"> <div class="screen-link-info"> <span class="screen-link-title">${s.title}</span> <span class="screen-link-id">${s.id}</span> </div> <svg class="screen-link-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path> </svg> </a>`)} </div> </div>`} <!-- Next Screens --> ${nextScreens.length > 0 && renderTemplate`<div class="sidebar-card"> <h3 class="sidebar-card-title"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path> </svg>
+Next Screens
+</h3> <div class="screen-link-list"> ${nextScreens.map((s) => renderTemplate`<a${addAttribute(`/screen/${s.id}`, "href")} class="screen-link"> <div class="screen-link-info"> <span class="screen-link-title">${s.title}</span> <span class="screen-link-id">${s.id}</span> </div> <svg class="screen-link-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path> </svg> </a>`)} </div> </div>`} </div> </div> </div> ` })}`;
+}, "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/screen/[id].astro", void 0);
+
+const $$file = "/Users/wadakatu/www/experiments/screenbook/packages/ui/src/pages/screen/[id].astro";
+const $$url = "/screen/[id]";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	default: $$id,
+	file: $$file,
+	getStaticPaths,
+	url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };

package/dist/server/renderers.mjs

@@ -0,0 +1,3 @@
+const renderers = [];
+
+export { renderers };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@screenbook/ui",
+  "version": "0.0.1",
+  "description": "UI for Screenbook - screen catalog and navigation graph viewer",
+  "type": "module",
+  "dependencies": {
+    "@astrojs/node": "^9.5.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "astro": "^5.16.0",
+    "mermaid": "^11.4.0",
+    "tailwindcss": "^4.0.0",
+    "@screenbook/core": "0.0.1"
+  },
+  "keywords": [
+    "screenbook",
+    "ui",
+    "screen",
+    "catalog",
+    "navigation"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wadakatu/screenbook.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/wadakatu/screenbook#readme",
+  "bugs": {
+    "url": "https://github.com/wadakatu/screenbook/issues"
+  },
+  "devDependencies": {
+    "prettier": "^3.7.4",
+    "prettier-plugin-astro": "^0.14.1"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "format": "prettier --write \"**/*.astro\"",
+    "format:check": "prettier --check \"**/*.astro\""
+  }
+}

package/public/logo.svg

@@ -0,0 +1,5 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="45" y="12" width="40" height="20" rx="3" fill="#14b8a6"/>
+  <rect x="15" y="40" width="40" height="20" rx="3" fill="#14b8a6"/>
+  <rect x="45" y="68" width="40" height="20" rx="3" fill="#14b8a6"/>
+</svg>

package/src/layouts/Layout.astro

@@ -0,0 +1,60 @@
+---
+import "@/styles/global.css"
+
+interface Props {
+	title: string
+	currentPage?: "screens" | "graph" | "impact" | "coverage"
+}
+
+const { title, currentPage } = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>{title} | Screenbook</title>
+	</head>
+	<body>
+		<header class="header">
+			<div class="container">
+				<div class="header-content">
+					<a href="/" class="logo">
+						<img src="/logo.svg" alt="" class="logo-icon" width="24" height="24" />
+						Screenbook
+					</a>
+					<nav class="nav">
+						<a href="/" class:list={["nav-link", { active: currentPage === "screens" }]}>
+							<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+							</svg>
+							Screens
+						</a>
+						<a href="/graph" class:list={["nav-link", { active: currentPage === "graph" }]}>
+							<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+							</svg>
+							Graph
+						</a>
+						<a href="/impact" class:list={["nav-link", { active: currentPage === "impact" }]}>
+							<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+							</svg>
+							Impact
+						</a>
+						<a href="/coverage" class:list={["nav-link", { active: currentPage === "coverage" }]}>
+							<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+							</svg>
+							Coverage
+						</a>
+					</nav>
+				</div>
+			</div>
+		</header>
+		<main>
+			<slot />
+		</main>
+	</body>
+</html>