@screenbook/ui 0.0.1

package/src/pages/impact.astro

@@ -0,0 +1,459 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import { loadScreens } from "@/utils/loadScreens"
+import {
+	analyzeImpact,
+	getAllApis,
+	generateImpactMermaid,
+	formatImpactMarkdown,
+} from "@/utils/impactAnalysis"
+
+const screens = loadScreens()
+const allApis = getAllApis(screens)
+
+const url = Astro.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)
+}
+---
+
+<Layout title="Impact Analysis" currentPage="impact">
+	<div class="container">
+		<div class="page-header">
+			<h1 class="page-title">Impact Analysis</h1>
+			<p class="page-description">
+				Analyze which screens are affected when an API changes.
+			</p>
+		</div>
+
+		{screens.length === 0 ? (
+			<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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+				</svg>
+				<h2 class="empty-state-title">No screen data</h2>
+				<p class="empty-state-description">
+					Run the build command to generate screen metadata.
+				</p>
+				<code class="empty-state-code">
+					<span class="prompt">$</span> screenbook build
+				</code>
+			</div>
+		) : (
+			<>
+				<div class="impact-search">
+					<form method="get" class="search-form">
+						<div class="search-wrapper impact-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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+							</svg>
+							<input
+								type="text"
+								name="api"
+								class="search-input"
+								placeholder="Enter API name (e.g., InvoiceAPI.getDetail)"
+								value={apiQuery}
+								list="api-suggestions"
+							/>
+							<datalist id="api-suggestions">
+								{allApis.map((api) => (
+									<option value={api} />
+								))}
+							</datalist>
+							<button type="submit" class="search-button">
+								Analyze
+							</button>
+						</div>
+					</form>
+
+					{allApis.length > 0 && !apiQuery && (
+						<div class="api-suggestions">
+							<p class="suggestions-label">Available APIs:</p>
+							<div class="tags">
+								{allApis.slice(0, 10).map((api) => (
+									<a href={`/impact?api=${encodeURIComponent(api)}`} class="tag">
+										{api}
+									</a>
+								))}
+								{allApis.length > 10 && (
+									<span class="tag tag-more">+{allApis.length - 10} more</span>
+								)}
+							</div>
+						</div>
+					)}
+				</div>
+
+				{result && (
+					<div class="impact-results">
+						<div class="impact-summary">
+							<div class="stats">
+								<div class="stat">
+									<div class="stat-value stat-total">{result.totalCount}</div>
+									<div class="stat-label">Total Affected</div>
+								</div>
+								<div class="stat">
+									<div class="stat-value stat-direct">{result.direct.length}</div>
+									<div class="stat-label">Direct</div>
+								</div>
+								<div class="stat">
+									<div class="stat-value stat-transitive">{result.transitive.length}</div>
+									<div class="stat-label">Transitive</div>
+								</div>
+							</div>
+
+							<button
+								id="copy-markdown"
+								class="copy-button"
+								data-markdown={markdown}
+							>
+								<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<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" />
+								</svg>
+								Copy as Markdown
+							</button>
+						</div>
+
+						{result.totalCount === 0 ? (
+							<div class="no-impact">
+								<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+									<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" />
+								</svg>
+								<p>No screens depend on <code>{apiQuery}</code></p>
+							</div>
+						) : (
+							<>
+								<div class="impact-graph">
+									<div class="graph-container">
+										<pre class="mermaid">{mermaidGraph}</pre>
+									</div>
+									<div class="graph-legend">
+										<div class="graph-legend-item">
+											<div class="legend-node legend-direct"></div>
+											<span>Direct dependency</span>
+										</div>
+										<div class="graph-legend-item">
+											<div class="legend-node legend-transitive"></div>
+											<span>Transitive</span>
+										</div>
+										<div class="graph-legend-item">
+											<div class="legend-node"></div>
+											<span>Not affected</span>
+										</div>
+									</div>
+								</div>
+
+								<div class="impact-details">
+									{result.direct.length > 0 && (
+										<div class="section">
+											<h3 class="section-title">
+												<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+													<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" />
+												</svg>
+												Direct Dependencies ({result.direct.length})
+											</h3>
+											<div class="screen-link-list">
+												{result.direct.map((screen) => (
+													<a href={`/screen/${screen.id}`} class="screen-link impact-screen direct">
+														<div class="screen-link-info">
+															<div class="screen-link-title">{screen.title}</div>
+															<div class="screen-link-id">{screen.route}</div>
+														</div>
+														{screen.owner && screen.owner.length > 0 && (
+															<div class="screen-link-owner">
+																{screen.owner.join(", ")}
+															</div>
+														)}
+													</a>
+												))}
+											</div>
+										</div>
+									)}
+
+									{result.transitive.length > 0 && (
+										<div class="section">
+											<h3 class="section-title">
+												<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>
+												Transitive Dependencies ({result.transitive.length})
+											</h3>
+											<div class="screen-link-list">
+												{result.transitive.map(({ screen, path }) => (
+													<a href={`/screen/${screen.id}`} class="screen-link impact-screen transitive">
+														<div class="screen-link-info">
+															<div class="screen-link-title">{screen.title}</div>
+															<div class="screen-link-path">
+																{path.join(" → ")}
+															</div>
+														</div>
+													</a>
+												))}
+											</div>
+										</div>
+									)}
+								</div>
+							</>
+						)}
+					</div>
+				)}
+			</>
+		)}
+	</div>
+
+	<script>
+		import mermaid from "mermaid"
+
+		mermaid.initialize({
+			startOnLoad: true,
+			theme: "base",
+			themeVariables: {
+				darkMode: true,
+				background: "transparent",
+				fontFamily: "system-ui, sans-serif",
+				primaryColor: "#1e293b",
+				primaryTextColor: "#e2e8f0",
+				primaryBorderColor: "#64748b",
+				lineColor: "#64748b",
+				secondaryColor: "#1e293b",
+				tertiaryColor: "#1e293b",
+				nodeTextColor: "#ffffff",
+			},
+			flowchart: {
+				useMaxWidth: true,
+				htmlLabels: true,
+				curve: "basis",
+				padding: 20,
+				nodeSpacing: 50,
+				rankSpacing: 60,
+			},
+		})
+
+		// Copy markdown functionality
+		const copyButton = document.getElementById("copy-markdown")
+		if (copyButton) {
+			copyButton.addEventListener("click", async () => {
+				const markdown = copyButton.dataset.markdown
+				if (markdown) {
+					await navigator.clipboard.writeText(markdown)
+					const originalText = copyButton.innerHTML
+					copyButton.innerHTML = `
+						<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+						</svg>
+						Copied!
+					`
+					setTimeout(() => {
+						copyButton.innerHTML = originalText
+					}, 2000)
+				}
+			})
+		}
+	</script>
+</Layout>
+
+<style>
+	.impact-search {
+		margin-bottom: 32px;
+	}
+
+	.search-form {
+		margin-bottom: 16px;
+	}
+
+	.impact-search-wrapper {
+		display: flex;
+		gap: 12px;
+		max-width: 600px;
+	}
+
+	.impact-search-wrapper .search-input {
+		flex: 1;
+	}
+
+	.search-button {
+		padding: 10px 20px;
+		font-size: var(--text-sm);
+		font-weight: 500;
+		color: var(--color-bg);
+		background: var(--color-accent);
+		border: none;
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		transition: background 0.15s ease;
+	}
+
+	.search-button:hover {
+		background: var(--color-accent-hover);
+	}
+
+	.api-suggestions {
+		margin-top: 16px;
+	}
+
+	.suggestions-label {
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+		margin-bottom: 8px;
+	}
+
+	.tag-more {
+		background: transparent;
+		border-style: dashed;
+		cursor: default;
+	}
+
+	.impact-summary {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 24px;
+		background: var(--color-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg);
+		margin-bottom: 24px;
+	}
+
+	.stat-direct {
+		color: #f87171;
+	}
+
+	.stat-transitive {
+		color: #fb923c;
+	}
+
+	.copy-button {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 10px 16px;
+		font-size: var(--text-sm);
+		font-weight: 500;
+		color: var(--color-text-secondary);
+		background: var(--color-bg-muted);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.copy-button:hover {
+		border-color: var(--color-border-hover);
+		color: var(--color-text);
+	}
+
+	.copy-button svg {
+		width: 16px;
+		height: 16px;
+	}
+
+	.no-impact {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 12px;
+		padding: 48px 24px;
+		background: var(--color-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg);
+		text-align: center;
+	}
+
+	.no-impact svg {
+		width: 48px;
+		height: 48px;
+		color: var(--color-success);
+	}
+
+	.no-impact p {
+		font-size: var(--text-lg);
+		color: var(--color-text-secondary);
+	}
+
+	.impact-graph {
+		margin-bottom: 32px;
+	}
+
+	/* Override Mermaid text colors for better contrast */
+	.impact-graph :global(.mermaid .node.direct .nodeLabel),
+	.impact-graph :global(.mermaid .node.direct .nodeLabel p),
+	.impact-graph :global(.mermaid .node.direct .nodeLabel span),
+	.impact-graph :global(.mermaid .node.transitive .nodeLabel),
+	.impact-graph :global(.mermaid .node.transitive .nodeLabel p),
+	.impact-graph :global(.mermaid .node.transitive .nodeLabel span) {
+		fill: #ffffff !important;
+		color: #ffffff !important;
+		font-weight: 600 !important;
+	}
+
+	.impact-graph :global(.mermaid .node.normal .nodeLabel),
+	.impact-graph :global(.mermaid .node.normal .nodeLabel p),
+	.impact-graph :global(.mermaid .node.normal .nodeLabel span) {
+		fill: #e2e8f0 !important;
+		color: #e2e8f0 !important;
+	}
+
+	.impact-graph :global(.mermaid .nodeLabel) {
+		font-weight: 500;
+	}
+
+	.impact-graph :global(.mermaid .nodeLabel p) {
+		margin: 0;
+	}
+
+	.legend-direct {
+		background: #dc2626 !important;
+		border-color: #fef2f2 !important;
+	}
+
+	.legend-transitive {
+		background: #ea580c !important;
+		border-color: #fff7ed !important;
+	}
+
+	.impact-details {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+		gap: 24px;
+	}
+
+	.section-title {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.section-title svg {
+		width: 18px;
+		height: 18px;
+	}
+
+	.impact-screen.direct {
+		border-left: 3px solid #dc2626;
+	}
+
+	.impact-screen.transitive {
+		border-left: 3px solid #ea580c;
+	}
+
+	.screen-link-path {
+		font-size: var(--text-xs);
+		font-family: ui-monospace, monospace;
+		color: var(--color-text-muted);
+	}
+
+	.screen-link-owner {
+		font-size: var(--text-xs);
+		color: var(--color-text-muted);
+		padding: 4px 8px;
+		background: var(--color-bg);
+		border-radius: var(--radius-sm);
+	}
+</style>

package/src/pages/index.astro

@@ -0,0 +1,167 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import { loadScreens } from "@/utils/loadScreens"
+
+const screens = loadScreens()
+const allTags = [...new Set(screens.flatMap((s) => s.tags ?? []))]
+---
+
+<Layout title="Screens" currentPage="screens">
+	<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 ? (
+			<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" />
+				</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>
+		) : (
+			<>
+				<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" />
+					</svg>
+					<input
+						type="text"
+						id="search"
+						placeholder="Search screens..."
+						class="search-input"
+					/>
+				</div>
+
+				{allTags.length > 0 && (
+					<div class="tags">
+						{allTags.map((tag) => (
+							<button class="tag" data-tag={tag}>{tag}</button>
+						))}
+					</div>
+				)}
+
+				<div class="screen-grid" id="screen-list">
+					{screens.map((screen) => (
+						<a
+							href={`/screen/${screen.id}`}
+							class="card-link"
+							data-tags={screen.tags?.join(",") ?? ""}
+							data-title={screen.title.toLowerCase()}
+							data-id={screen.id.toLowerCase()}
+						>
+							<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" />
+										</svg>
+										{screen.id}
+									</span>
+									{screen.owner && screen.owner.length > 0 && (
+										<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" />
+											</svg>
+											{screen.owner.join(", ")}
+										</span>
+									)}
+								</div>
+								{screen.tags && screen.tags.length > 0 && (
+									<div class="card-tags">
+										{screen.tags.map((tag) => (
+											<span class="card-tag">{tag}</span>
+										))}
+									</div>
+								)}
+							</div>
+						</a>
+					))}
+				</div>
+			</>
+		)}
+	</div>
+
+	<script>
+		const searchInput = document.getElementById("search") as HTMLInputElement
+		const screenList = document.getElementById("screen-list")
+		const tagButtons = document.querySelectorAll(".tag")
+
+		let activeTag: string | null = null
+
+		function filterScreens() {
+			const query = searchInput?.value.toLowerCase() ?? ""
+			const cards = screenList?.querySelectorAll(".card-link") as NodeListOf<HTMLElement>
+
+			cards?.forEach((card) => {
+				const title = card.dataset.title ?? ""
+				const id = card.dataset.id ?? ""
+				const tags = card.dataset.tags ?? ""
+
+				const matchesSearch = title.includes(query) || id.includes(query)
+				const matchesTag = !activeTag || tags.includes(activeTag)
+
+				card.style.display = matchesSearch && matchesTag ? "block" : "none"
+			})
+		}
+
+		searchInput?.addEventListener("input", filterScreens)
+
+		tagButtons.forEach((btn) => {
+			btn.addEventListener("click", () => {
+				const tag = (btn as HTMLElement).dataset.tag
+				if (activeTag === tag) {
+					activeTag = null
+					tagButtons.forEach((b) => b.classList.remove("active"))
+				} else {
+					tagButtons.forEach((b) => b.classList.remove("active"))
+					activeTag = tag ?? null
+					btn.classList.add("active")
+				}
+				filterScreens()
+			})
+		})
+	</script>
+</Layout>