@screenbook/ui 0.1.0 → 1.1.0

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

@@ -1,6 +1,6 @@
 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_JhK3F9tC.mjs';
+import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_CkCqdbH2.mjs';
 import { g as getAllApis, a as analyzeImpact, b as generateImpactMermaid, f as formatImpactMarkdown } from '../chunks/impactAnalysis_LvYEc57d.mjs';
 /* empty css                                  */
 export { renderers } from '../renderers.mjs';

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

@@ -1,6 +1,6 @@
 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_JhK3F9tC.mjs';
+import { l as loadScreens, $ as $$Layout } from '../chunks/loadScreens_CkCqdbH2.mjs';
 export { renderers } from '../renderers.mjs';
 
 const $$Index = createComponent(($$result, $$props, $$slots) => {

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

@@ -1,9 +1,132 @@
-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 { e as createComponent, f as createAstro, m as maybeRenderHead, h as addAttribute, r as renderTemplate, k as renderComponent } from '../../chunks/astro/server_m7yT4wCr.mjs';
 import 'piccolore';
-import { l as loadScreens, $ as $$Layout } from '../../chunks/loadScreens_JhK3F9tC.mjs';
+import { l as loadScreens, $ as $$Layout } from '../../chunks/loadScreens_CkCqdbH2.mjs';
+import 'clsx';
+/* empty css                                   */
 import { c as getApiDependencyCount } from '../../chunks/impactAnalysis_LvYEc57d.mjs';
 export { renderers } from '../../renderers.mjs';
 
+const $$Astro$1 = createAstro();
+const $$MockPreview = createComponent(($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$1, $$props, $$slots);
+  Astro2.self = $$MockPreview;
+  const { mock, screenId } = Astro2.props;
+  function getButtonStyle(variant) {
+    switch (variant) {
+      case "primary":
+        return "background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); color: white;";
+      case "danger":
+        return "background: #ef4444; color: white;";
+      default:
+        return "background: #3d4660; color: #94a3b8;";
+    }
+  }
+  function getTextStyle(variant) {
+    switch (variant) {
+      case "heading":
+        return "font-size: 16px; font-weight: 700; color: #e2e8f0;";
+      case "subheading":
+        return "font-size: 14px; font-weight: 600; color: #cbd5e1;";
+      case "caption":
+        return "font-size: 11px; color: #64748b;";
+      default:
+        return "font-size: 13px; color: #94a3b8;";
+    }
+  }
+  function getAspectRatioPadding(ratio) {
+    if (!ratio) return "56.25%";
+    const [w, h] = ratio.split(":").map(Number);
+    if (!w || !h) return "56.25%";
+    return `${h / w * 100}%`;
+  }
+  return renderTemplate`${maybeRenderHead()}<div class="mock-preview" data-astro-cid-ewujvhfk> <div class="mock-header" data-astro-cid-ewujvhfk> <div class="mock-header-left" data-astro-cid-ewujvhfk> <svg class="mock-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ewujvhfk> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" data-astro-cid-ewujvhfk></path> </svg> <span data-astro-cid-ewujvhfk>Wireframe Mock</span> </div> <a${addAttribute(`/editor?screen=${screenId}`, "href")} class="edit-mock-link" data-astro-cid-ewujvhfk> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ewujvhfk> <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" data-astro-cid-ewujvhfk></path> </svg>
+Edit Mock
+</a> </div> <div class="mock-frame" data-astro-cid-ewujvhfk> ${mock.sections.map((section) => renderTemplate`<div class="mock-section" data-astro-cid-ewujvhfk> ${section.title && renderTemplate`<div class="section-title" data-astro-cid-ewujvhfk>${section.title}</div>`} <div${addAttribute(`section-elements ${section.layout === "horizontal" ? "horizontal" : "vertical"}`, "class")} data-astro-cid-ewujvhfk> ${section.elements.map((element) => {
+    if (element.type === "button") {
+      const buttonContent = renderTemplate`<div${addAttribute(`mock-button ${element.navigateTo ? "has-navigation" : ""}`, "class")}${addAttribute(getButtonStyle(element.variant), "style")} data-astro-cid-ewujvhfk> <span class="button-label" data-astro-cid-ewujvhfk>${element.label}</span> ${element.navigateTo && renderTemplate`<span class="button-navigate" data-astro-cid-ewujvhfk>
+→ ${element.navigateTo} </span>`} </div>`;
+      return element.navigateTo ? renderTemplate`<a${addAttribute(`/screen/${element.navigateTo}`, "href")} class="element-link" data-astro-cid-ewujvhfk> ${buttonContent} </a>` : buttonContent;
+    }
+    if (element.type === "input") {
+      return renderTemplate`<div class="mock-input" data-astro-cid-ewujvhfk> <span class="input-label" data-astro-cid-ewujvhfk>${element.label}</span> <span class="input-placeholder" data-astro-cid-ewujvhfk> ${element.placeholder || "Enter value..."} </span> </div>`;
+    }
+    if (element.type === "link") {
+      const linkContent = renderTemplate`<div${addAttribute(`mock-link-card ${element.navigateTo ? "has-navigation" : ""}`, "class")} data-astro-cid-ewujvhfk> <span class="link-label" data-astro-cid-ewujvhfk>${element.label}</span> ${element.navigateTo && renderTemplate`<span class="link-navigate" data-astro-cid-ewujvhfk>→ ${element.navigateTo}</span>`} </div>`;
+      return element.navigateTo ? renderTemplate`<a${addAttribute(`/screen/${element.navigateTo}`, "href")} class="element-link" data-astro-cid-ewujvhfk> ${linkContent} </a>` : renderTemplate`<div class="mock-link" data-astro-cid-ewujvhfk>${element.label}</div>`;
+    }
+    if (element.type === "text") {
+      return renderTemplate`<div class="mock-text"${addAttribute(getTextStyle(element.variant), "style")} data-astro-cid-ewujvhfk> ${element.label} </div>`;
+    }
+    if (element.type === "image") {
+      return renderTemplate`<div class="mock-image"${addAttribute(`padding-bottom: ${getAspectRatioPadding(element.aspectRatio)}`, "style")} data-astro-cid-ewujvhfk> <div class="image-placeholder" data-astro-cid-ewujvhfk> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-ewujvhfk> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" data-astro-cid-ewujvhfk></path> </svg> <span data-astro-cid-ewujvhfk>${element.label}</span> </div> </div>`;
+    }
+    if (element.type === "list") {
+      const itemCount = element.itemCount || 3;
+      const listContent = renderTemplate`<div${addAttribute(`mock-list ${element.itemNavigateTo ? "has-navigation" : ""}`, "class")} data-astro-cid-ewujvhfk> <div class="list-header" data-astro-cid-ewujvhfk>${element.label}</div> ${Array.from({ length: itemCount }).map((_, i) => renderTemplate`<div class="list-item"${addAttribute(
+        i < itemCount - 1 ? "border-bottom: 1px solid #1e2433;" : "",
+        "style"
+      )} data-astro-cid-ewujvhfk>
+Item ${i + 1} </div>`)} ${element.itemNavigateTo && renderTemplate`<div class="list-footer" data-astro-cid-ewujvhfk>→ ${element.itemNavigateTo}</div>`} </div>`;
+      return element.itemNavigateTo ? renderTemplate`<a${addAttribute(`/screen/${element.itemNavigateTo}`, "href")} class="element-link" data-astro-cid-ewujvhfk> ${listContent} </a>` : listContent;
+    }
+    if (element.type === "table") {
+      const columns = element.columns || [
+        "Column 1",
+        "Column 2",
+        "Column 3"
+      ];
+      const rowCount = element.rowCount || 3;
+      const tableContent = renderTemplate`<div${addAttribute(`mock-table ${element.rowNavigateTo ? "has-navigation" : ""}`, "class")} data-astro-cid-ewujvhfk> <div class="table-header" data-astro-cid-ewujvhfk>${element.label}</div> <div class="table-content" data-astro-cid-ewujvhfk> <div class="table-row table-header-row" data-astro-cid-ewujvhfk> ${columns.map((col) => renderTemplate`<div class="table-cell" data-astro-cid-ewujvhfk>${col}</div>`)} </div> ${Array.from({ length: rowCount }).map((_, i) => renderTemplate`<div class="table-row" data-astro-cid-ewujvhfk> ${columns.map((_2, j) => renderTemplate`<div class="table-cell" data-astro-cid-ewujvhfk>
+Data ${i + 1}-${j + 1} </div>`)} </div>`)} </div> ${element.rowNavigateTo && renderTemplate`<div class="table-footer" data-astro-cid-ewujvhfk>→ ${element.rowNavigateTo}</div>`} </div>`;
+      return element.rowNavigateTo ? renderTemplate`<a${addAttribute(`/screen/${element.rowNavigateTo}`, "href")} class="element-link" data-astro-cid-ewujvhfk> ${tableContent} </a>` : tableContent;
+    }
+    return null;
+  })} </div>  ${section.children && section.children.length > 0 && renderTemplate`<div class="child-sections" data-astro-cid-ewujvhfk> ${section.children.map((childSection) => renderTemplate`<div class="mock-section child-section" data-astro-cid-ewujvhfk> ${childSection.title && renderTemplate`<div class="section-title child-section-title" data-astro-cid-ewujvhfk> ${childSection.title} </div>`} <div${addAttribute(`section-elements ${childSection.layout === "horizontal" ? "horizontal" : "vertical"}`, "class")} data-astro-cid-ewujvhfk> ${childSection.elements.map((element) => {
+    if (element.type === "button") {
+      const buttonContent = renderTemplate`<div${addAttribute(`mock-button ${element.navigateTo ? "has-navigation" : ""}`, "class")}${addAttribute(getButtonStyle(element.variant), "style")} data-astro-cid-ewujvhfk> <span class="button-label" data-astro-cid-ewujvhfk>${element.label}</span> ${element.navigateTo && renderTemplate`<span class="button-navigate" data-astro-cid-ewujvhfk>
+→ ${element.navigateTo} </span>`} </div>`;
+      return element.navigateTo ? renderTemplate`<a${addAttribute(`/screen/${element.navigateTo}`, "href")} class="element-link" data-astro-cid-ewujvhfk> ${buttonContent} </a>` : buttonContent;
+    }
+    if (element.type === "input") {
+      return renderTemplate`<div class="mock-input" data-astro-cid-ewujvhfk> <span class="input-label" data-astro-cid-ewujvhfk>${element.label}</span> <span class="input-placeholder" data-astro-cid-ewujvhfk> ${element.placeholder || "Enter value..."} </span> </div>`;
+    }
+    if (element.type === "link") {
+      const linkContent = renderTemplate`<div${addAttribute(`mock-link-card ${element.navigateTo ? "has-navigation" : ""}`, "class")} data-astro-cid-ewujvhfk> <span class="link-label" data-astro-cid-ewujvhfk>${element.label}</span> ${element.navigateTo && renderTemplate`<span class="link-navigate" data-astro-cid-ewujvhfk>
+→ ${element.navigateTo} </span>`} </div>`;
+      return element.navigateTo ? renderTemplate`<a${addAttribute(`/screen/${element.navigateTo}`, "href")} class="element-link" data-astro-cid-ewujvhfk> ${linkContent} </a>` : renderTemplate`<div class="mock-link" data-astro-cid-ewujvhfk>${element.label}</div>`;
+    }
+    if (element.type === "text") {
+      return renderTemplate`<div class="mock-text"${addAttribute(getTextStyle(element.variant), "style")} data-astro-cid-ewujvhfk> ${element.label} </div>`;
+    }
+    if (element.type === "image") {
+      return renderTemplate`<div class="mock-image"${addAttribute(`padding-bottom: ${getAspectRatioPadding(element.aspectRatio)}`, "style")} data-astro-cid-ewujvhfk> <div class="image-placeholder" data-astro-cid-ewujvhfk> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" data-astro-cid-ewujvhfk> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" data-astro-cid-ewujvhfk></path> </svg> <span data-astro-cid-ewujvhfk>${element.label}</span> </div> </div>`;
+    }
+    if (element.type === "list") {
+      const itemCount = element.itemCount || 3;
+      const listContent = renderTemplate`<div${addAttribute(`mock-list ${element.itemNavigateTo ? "has-navigation" : ""}`, "class")} data-astro-cid-ewujvhfk> <div class="list-header" data-astro-cid-ewujvhfk>${element.label}</div> ${Array.from({ length: itemCount }).map((_, i) => renderTemplate`<div class="list-item"${addAttribute(
+        i < itemCount - 1 ? "border-bottom: 1px solid #1e2433;" : "",
+        "style"
+      )} data-astro-cid-ewujvhfk>
+Item ${i + 1} </div>`)} ${element.itemNavigateTo && renderTemplate`<div class="list-footer" data-astro-cid-ewujvhfk>
+→ ${element.itemNavigateTo} </div>`} </div>`;
+      return element.itemNavigateTo ? renderTemplate`<a${addAttribute(`/screen/${element.itemNavigateTo}`, "href")} class="element-link" data-astro-cid-ewujvhfk> ${listContent} </a>` : listContent;
+    }
+    if (element.type === "table") {
+      const columns = element.columns || [
+        "Column 1",
+        "Column 2",
+        "Column 3"
+      ];
+      const rowCount = element.rowCount || 3;
+      const tableContent = renderTemplate`<div${addAttribute(`mock-table ${element.rowNavigateTo ? "has-navigation" : ""}`, "class")} data-astro-cid-ewujvhfk> <div class="table-header" data-astro-cid-ewujvhfk>${element.label}</div> <div class="table-content" data-astro-cid-ewujvhfk> <div class="table-row table-header-row" data-astro-cid-ewujvhfk> ${columns.map((col) => renderTemplate`<div class="table-cell" data-astro-cid-ewujvhfk>${col}</div>`)} </div> ${Array.from({ length: rowCount }).map((_, i) => renderTemplate`<div class="table-row" data-astro-cid-ewujvhfk> ${columns.map((_2, j) => renderTemplate`<div class="table-cell" data-astro-cid-ewujvhfk>
+Data ${i + 1}-${j + 1} </div>`)} </div>`)} </div> ${element.rowNavigateTo && renderTemplate`<div class="table-footer" data-astro-cid-ewujvhfk>
+→ ${element.rowNavigateTo} </div>`} </div>`;
+      return element.rowNavigateTo ? renderTemplate`<a${addAttribute(`/screen/${element.rowNavigateTo}`, "href")} class="element-link" data-astro-cid-ewujvhfk> ${tableContent} </a>` : tableContent;
+    }
+    return null;
+  })} </div> </div>`)} </div>`} </div>`)} </div> </div> `;
+}, "/home/runner/work/screenbook/screenbook/packages/ui/src/components/MockPreview.astro", void 0);
+
 const $$Astro = createAstro();
 function getStaticPaths() {
   const screens = loadScreens();
@@ -29,7 +152,7 @@ Back to screens
     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 aria-hidden="true" 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 aria-hidden="true" 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 aria-hidden="true" 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>
+  })} </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 aria-hidden="true" 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>`} <!-- Mock Preview --> ${screen.mock && renderTemplate`<div class="section"> <h2 class="section-title">UI Wireframe</h2> ${renderComponent($$result2, "MockPreview", $$MockPreview, { "mock": screen.mock, "screenId": screen.id })} </div>`} </div> <div> <!-- Entry Points --> ${entryScreens.length > 0 && renderTemplate`<div class="sidebar-card"> <h3 class="sidebar-card-title"> <svg aria-hidden="true" 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 aria-hidden="true" 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

package/dist/server/renderers.mjs

@@ -1,3 +1,202 @@
-const renderers = [];
+import React, { createElement } from 'react';
+import ReactDOM from 'react-dom/server';
+
+const contexts = /* @__PURE__ */ new WeakMap();
+const ID_PREFIX = "r";
+function getContext(rendererContextResult) {
+  if (contexts.has(rendererContextResult)) {
+    return contexts.get(rendererContextResult);
+  }
+  const ctx = {
+    currentIndex: 0,
+    get id() {
+      return ID_PREFIX + this.currentIndex.toString();
+    }
+  };
+  contexts.set(rendererContextResult, ctx);
+  return ctx;
+}
+function incrementId(rendererContextResult) {
+  const ctx = getContext(rendererContextResult);
+  const id = ctx.id;
+  ctx.currentIndex++;
+  return id;
+}
+
+const StaticHtml = ({
+  value,
+  name,
+  hydrate = true
+}) => {
+  if (!value) return null;
+  const tagName = hydrate ? "astro-slot" : "astro-static-slot";
+  return createElement(tagName, {
+    name,
+    suppressHydrationWarning: true,
+    dangerouslySetInnerHTML: { __html: value }
+  });
+};
+StaticHtml.shouldComponentUpdate = () => false;
+var static_html_default = StaticHtml;
+
+const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+const reactTypeof = Symbol.for("react.element");
+const reactTransitionalTypeof = Symbol.for("react.transitional.element");
+async function check(Component, props, children) {
+  if (typeof Component === "object") {
+    return Component["$$typeof"].toString().slice("Symbol(".length).startsWith("react");
+  }
+  if (typeof Component !== "function") return false;
+  if (Component.name === "QwikComponent") return false;
+  if (typeof Component === "function" && Component["$$typeof"] === Symbol.for("react.forward_ref"))
+    return false;
+  if (Component.prototype != null && typeof Component.prototype.render === "function") {
+    return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component);
+  }
+  let isReactComponent = false;
+  function Tester(...args) {
+    try {
+      const vnode = Component(...args);
+      if (vnode && (vnode["$$typeof"] === reactTypeof || vnode["$$typeof"] === reactTransitionalTypeof)) {
+        isReactComponent = true;
+      }
+    } catch {
+    }
+    return React.createElement("div");
+  }
+  await renderToStaticMarkup.call(this, Tester, props, children);
+  return isReactComponent;
+}
+async function getNodeWritable() {
+  let nodeStreamBuiltinModuleName = "node:stream";
+  let { Writable } = await import(
+    /* @vite-ignore */
+    nodeStreamBuiltinModuleName
+  );
+  return Writable;
+}
+function needsHydration(metadata) {
+  return metadata?.astroStaticSlot ? !!metadata.hydrate : true;
+}
+async function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
+  let prefix;
+  if (this && this.result) {
+    prefix = incrementId(this.result);
+  }
+  const attrs = { prefix };
+  delete props["class"];
+  const slots = {};
+  for (const [key, value] of Object.entries(slotted)) {
+    const name = slotName(key);
+    slots[name] = React.createElement(static_html_default, {
+      hydrate: needsHydration(metadata),
+      value,
+      name
+    });
+  }
+  const newProps = {
+    ...props,
+    ...slots
+  };
+  const newChildren = children ?? props.children;
+  if (newChildren != null) {
+    newProps.children = React.createElement(static_html_default, {
+      hydrate: needsHydration(metadata),
+      value: newChildren
+    });
+  }
+  const formState = this ? await getFormState(this) : void 0;
+  if (formState) {
+    attrs["data-action-result"] = JSON.stringify(formState[0]);
+    attrs["data-action-key"] = formState[1];
+    attrs["data-action-name"] = formState[2];
+  }
+  const vnode = React.createElement(Component, newProps);
+  const renderOptions = {
+    identifierPrefix: prefix,
+    formState
+  };
+  let html;
+  if ("renderToReadableStream" in ReactDOM) {
+    html = await renderToReadableStreamAsync(vnode, renderOptions);
+  } else {
+    html = await renderToPipeableStreamAsync(vnode, renderOptions);
+  }
+  return { html, attrs };
+}
+async function getFormState({
+  result
+}) {
+  const { request, actionResult } = result;
+  if (!actionResult) return void 0;
+  if (!isFormRequest(request.headers.get("content-type"))) return void 0;
+  const { searchParams } = new URL(request.url);
+  const formData = await request.clone().formData();
+  const actionKey = formData.get("$ACTION_KEY")?.toString();
+  const actionName = searchParams.get("_action");
+  if (!actionKey || !actionName) return void 0;
+  return [actionResult, actionKey, actionName];
+}
+async function renderToPipeableStreamAsync(vnode, options) {
+  const Writable = await getNodeWritable();
+  let html = "";
+  return new Promise((resolve, reject) => {
+    let error = void 0;
+    let stream = ReactDOM.renderToPipeableStream(vnode, {
+      ...options,
+      onError(err) {
+        error = err;
+        reject(error);
+      },
+      onAllReady() {
+        stream.pipe(
+          new Writable({
+            write(chunk, _encoding, callback) {
+              html += chunk.toString("utf-8");
+              callback();
+            },
+            destroy() {
+              resolve(html);
+            }
+          })
+        );
+      }
+    });
+  });
+}
+async function readResult(stream) {
+  const reader = stream.getReader();
+  let result = "";
+  const decoder = new TextDecoder("utf-8");
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      if (value) {
+        result += decoder.decode(value);
+      } else {
+        decoder.decode(new Uint8Array());
+      }
+      return result;
+    }
+    result += decoder.decode(value, { stream: true });
+  }
+}
+async function renderToReadableStreamAsync(vnode, options) {
+  return await readResult(await ReactDOM.renderToReadableStream(vnode, options));
+}
+const formContentTypes = ["application/x-www-form-urlencoded", "multipart/form-data"];
+function isFormRequest(contentType) {
+  const type = contentType?.split(";")[0].toLowerCase();
+  return formContentTypes.some((t) => type === t);
+}
+const renderer = {
+  name: "@astrojs/react",
+  check,
+  renderToStaticMarkup,
+  supportsAstroStaticSlot: true
+};
+var server_default = renderer;
+
+const renderers = [Object.assign({"name":"@astrojs/react","clientEntrypoint":"@astrojs/react/client.js","serverEntrypoint":"@astrojs/react/server.js"}, { ssr: server_default }),];
 
 export { renderers };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@screenbook/ui",
-	"version": "0.1.0",
+	"version": "1.1.0",
 	"description": "UI for Screenbook - screen catalog and navigation graph viewer",
 	"type": "module",
 	"scripts": {
@@ -12,10 +12,13 @@
 	},
 	"dependencies": {
 		"@astrojs/node": "^9.5.1",
+		"@astrojs/react": "^4.4.2",
 		"@screenbook/core": "workspace:*",
 		"@tailwindcss/vite": "^4.0.0",
 		"astro": "^5.16.0",
 		"mermaid": "^11.4.0",
+		"react": "^19.2.3",
+		"react-dom": "^19.2.3",
 		"tailwindcss": "^4.0.0"
 	},
 	"keywords": [
@@ -36,7 +39,10 @@
 		"url": "https://github.com/wadakatu/screenbook/issues"
 	},
 	"devDependencies": {
+		"@types/react": "^19.2.7",
+		"@types/react-dom": "^19.2.3",
 		"prettier": "^3.7.4",
-		"prettier-plugin-astro": "^0.14.1"
+		"prettier-plugin-astro": "^0.14.1",
+		"ts-morph": "^27.0.2"
 	}
 }