npm - @screenbook/ui - Versions diffs - 1.1.0 → 1.1.2 - Mend

@screenbook/ui 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/README.md +30 -0
package/dist/client/_astro/coverage.BzPU-EGZ.css +1 -0
package/dist/server/entry.mjs +1 -1
package/dist/server/{manifest_smcahUO6.mjs → manifest_BGl49hHW.mjs} +1 -1
package/dist/server/pages/coverage.astro.mjs +1 -1
package/dist/server/pages/editor.astro.mjs +1 -1
package/dist/server/pages/graph.astro.mjs +1 -1
package/dist/server/pages/impact.astro.mjs +1 -1
package/dist/server/pages/index.astro.mjs +1 -1
package/dist/server/pages/screen/_id_.astro.mjs +1 -1
package/package.json +5 -1
package/.astro/content-assets.mjs +0 -1
package/.astro/content-modules.mjs +0 -1
package/.astro/content.d.ts +0 -199
package/.astro/types.d.ts +0 -2
package/.prettierrc +0 -15
package/CHANGELOG.md +0 -77
package/astro.config.mjs +0 -20
package/dist/client/_astro/coverage.DLKSOM4m.css +0 -1
package/public/logo.svg +0 -5
package/src/components/MockFormEditor.tsx +0 -1280
package/src/components/MockPreview.astro +0 -811
package/src/layouts/Layout.astro +0 -77
package/src/pages/api/save-mock.ts +0 -182
package/src/pages/coverage.astro +0 -399
package/src/pages/editor.astro +0 -33
package/src/pages/graph.astro +0 -368
package/src/pages/impact.astro +0 -462
package/src/pages/index.astro +0 -176
package/src/pages/screen/[id].astro +0 -195
package/src/styles/global.css +0 -904
package/src/styles/mock-editor.css +0 -1351
package/src/utils/impactAnalysis.ts +0 -304
package/src/utils/loadCoverage.ts +0 -30
package/src/utils/loadScreens.ts +0 -18
package/tsconfig.json +0 -10
/package/dist/server/chunks/{loadScreens_CkCqdbH2.mjs → loadScreens_B8bVK3q5.mjs} +0 -0

package/src/layouts/Layout.astro DELETED Viewed

@@ -1,77 +0,0 @@
----
-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>
-		<a href="#main-content" class="skip-link">Skip to main content</a>
-		<header class="header">
-			<div class="container">
-				<div class="header-content">
-					<a href="/" class="logo">
-						<img src="/logo.svg" alt="Screenbook home" class="logo-icon" width="24" height="24" />
-						Screenbook
-					</a>
-					<nav class="nav" aria-label="Main navigation">
-						<a
-							href="/"
-							class:list={["nav-link", { active: currentPage === "screens" }]}
-							aria-current={currentPage === "screens" ? "page" : undefined}
-						>
-							<svg aria-hidden="true" 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" }]}
-							aria-current={currentPage === "graph" ? "page" : undefined}
-						>
-							<svg aria-hidden="true" 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" }]}
-							aria-current={currentPage === "impact" ? "page" : undefined}
-						>
-							<svg aria-hidden="true" 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" }]}
-							aria-current={currentPage === "coverage" ? "page" : undefined}
-						>
-							<svg aria-hidden="true" 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 id="main-content">
-			<slot />
-		</main>
-	</body>
-</html>

package/src/pages/api/save-mock.ts DELETED Viewed

@@ -1,182 +0,0 @@
-import { existsSync, readFileSync } from "node:fs"
-import { join } from "node:path"
-import type { APIRoute } from "astro"
-import { Project, SyntaxKind } from "ts-morph"
-interface ScreenWithFilePath {
-	id: string
-	filePath: string
-	[key: string]: unknown
-}
-interface SaveMockRequest {
-	screenId: string
-	mock: {
-		sections: Array<{
-			title?: string
-			layout?: string
-			elements: Array<Record<string, unknown>>
-		}>
-	}
-}
-export const POST: APIRoute = async ({ request }) => {
-	try {
-		const body = (await request.json()) as SaveMockRequest
-		const { screenId, mock } = body
-		if (!screenId || !mock) {
-			return new Response(
-				JSON.stringify({ error: "screenId and mock are required" }),
-				{ status: 400, headers: { "Content-Type": "application/json" } },
-			)
-		}
-		// Load screens.json to get filePath
-		const screensPath = join(process.cwd(), ".screenbook", "screens.json")
-		if (!existsSync(screensPath)) {
-			return new Response(
-				JSON.stringify({
-					error: "screens.json not found. Run screenbook build first.",
-				}),
-				{ status: 404, headers: { "Content-Type": "application/json" } },
-			)
-		}
-		const screens = JSON.parse(
-			readFileSync(screensPath, "utf-8"),
-		) as ScreenWithFilePath[]
-		const screen = screens.find((s) => s.id === screenId)
-		if (!screen) {
-			return new Response(
-				JSON.stringify({ error: `Screen '${screenId}' not found` }),
-				{ status: 404, headers: { "Content-Type": "application/json" } },
-			)
-		}
-		if (!screen.filePath) {
-			return new Response(
-				JSON.stringify({
-					error: `Screen '${screenId}' does not have filePath. Rebuild with latest CLI.`,
-				}),
-				{ status: 400, headers: { "Content-Type": "application/json" } },
-			)
-		}
-		// Use ts-morph to update the file
-		const result = await updateMockInFile(screen.filePath, mock)
-		if (!result.success) {
-			return new Response(JSON.stringify({ error: result.error }), {
-				status: 500,
-				headers: { "Content-Type": "application/json" },
-			})
-		}
-		return new Response(
-			JSON.stringify({ success: true, filePath: screen.filePath }),
-			{ status: 200, headers: { "Content-Type": "application/json" } },
-		)
-	} catch (error) {
-		const message = error instanceof Error ? error.message : "Unknown error"
-		return new Response(JSON.stringify({ error: message }), {
-			status: 500,
-			headers: { "Content-Type": "application/json" },
-		})
-	}
-}
-async function updateMockInFile(
-	filePath: string,
-	mock: SaveMockRequest["mock"],
-): Promise<{ success: boolean; error?: string }> {
-	try {
-		const project = new Project()
-		const sourceFile = project.addSourceFileAtPath(filePath)
-		// Find the defineScreen call
-		const callExpressions = sourceFile.getDescendantsOfKind(
-			SyntaxKind.CallExpression,
-		)
-		const defineScreenCall = callExpressions.find((call) => {
-			const expression = call.getExpression()
-			return expression.getText() === "defineScreen"
-		})
-		if (!defineScreenCall) {
-			return { success: false, error: "defineScreen() call not found in file" }
-		}
-		// Get the object literal argument
-		const args = defineScreenCall.getArguments()
-		const firstArg = args[0]
-		if (!firstArg) {
-			return { success: false, error: "defineScreen() has no arguments" }
-		}
-		if (firstArg.getKind() !== SyntaxKind.ObjectLiteralExpression) {
-			return {
-				success: false,
-				error: "defineScreen() argument is not an object literal",
-			}
-		}
-		const obj = firstArg.asKind(SyntaxKind.ObjectLiteralExpression)
-		if (!obj) {
-			return { success: false, error: "Failed to parse object literal" }
-		}
-		// Find existing mock property
-		const mockProperty = obj.getProperty("mock")
-		// Generate mock code string
-		const mockCode = generateMockCode(mock)
-		if (mockProperty) {
-			// Update existing mock property
-			mockProperty.replaceWithText(`mock: ${mockCode}`)
-		} else {
-			// Add new mock property at the end
-			obj.addPropertyAssignment({
-				name: "mock",
-				initializer: mockCode,
-			})
-		}
-		// Save the file
-		await sourceFile.save()
-		return { success: true }
-	} catch (error) {
-		const message = error instanceof Error ? error.message : "Unknown error"
-		return { success: false, error: message }
-	}
-}
-function generateMockCode(mock: SaveMockRequest["mock"]): string {
-	const sections = mock.sections.map((section) => {
-		const props: string[] = []
-		if (section.title) {
-			props.push(`title: ${JSON.stringify(section.title)}`)
-		}
-		if (section.layout && section.layout !== "vertical") {
-			props.push(`layout: ${JSON.stringify(section.layout)}`)
-		}
-		const elements = section.elements.map((element) => {
-			const elementProps = Object.entries(element)
-				.filter(([_, value]) => value !== undefined && value !== "")
-				.map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
-				.join(", ")
-			return `{ ${elementProps} }`
-		})
-		props.push(`elements: [\n\t\t\t${elements.join(",\n\t\t\t")},\n\t\t]`)
-		return `{\n\t\t${props.join(",\n\t\t")},\n\t}`
-	})
-	return `{\n\tsections: [\n\t${sections.join(",\n\t")},\n\t],\n}`
-}

package/src/pages/coverage.astro DELETED Viewed

@@ -1,399 +0,0 @@
----
-import Layout from "@/layouts/Layout.astro"
-import { loadCoverage } from "@/utils/loadCoverage"
-import { loadScreens } from "@/utils/loadScreens"
-const coverage = loadCoverage()
-const screens = loadScreens()
-// Calculate color based on percentage
-function getPercentageColor(percentage: number): string {
-	if (percentage >= 80) return "text-green-400"
-	if (percentage >= 50) return "text-yellow-400"
-	return "text-red-400"
-}
-function getPercentageBg(percentage: number): string {
-	if (percentage >= 80) return "bg-green-500/20 border-green-500/30"
-	if (percentage >= 50) return "bg-yellow-500/20 border-yellow-500/30"
-	return "bg-red-500/20 border-red-500/30"
-}
----
-<Layout title="Coverage" currentPage="coverage">
-	<div class="container">
-		<div class="page-header">
-			<h1 class="page-title">Coverage Dashboard</h1>
-			<p class="page-description">
-				Track documentation coverage across your screens.
-			</p>
-		</div>
-		{!coverage ? (
-			<div class="empty-state">
-				<svg class="empty-state-icon" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<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>
-				<h2 class="empty-state-title">No coverage data</h2>
-				<p class="empty-state-description">
-					Run the build command to generate coverage data.
-				</p>
-				<code class="empty-state-code">
-					<span class="prompt">$</span> screenbook build
-				</code>
-			</div>
-		) : (
-			<>
-				{/* Main Stats */}
-				<div class="coverage-hero">
-					<div class={`coverage-percentage ${getPercentageBg(coverage.percentage)}`}>
-						<span class={`percentage-value ${getPercentageColor(coverage.percentage)}`}>
-							{coverage.percentage}%
-						</span>
-						<span class="percentage-label">Coverage</span>
-					</div>
-					<div class="coverage-stats">
-						<div class="stat-card">
-							<div class="stat-value">{coverage.covered}</div>
-							<div class="stat-label">Documented</div>
-						</div>
-						<div class="stat-card">
-							<div class="stat-value">{coverage.total}</div>
-							<div class="stat-label">Total Routes</div>
-						</div>
-						<div class="stat-card">
-							<div class="stat-value">{coverage.missing.length}</div>
-							<div class="stat-label">Missing</div>
-						</div>
-					</div>
-				</div>
-				<div class="coverage-grid">
-					{/* By Owner */}
-					<div class="coverage-section">
-						<h2 class="section-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="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>
-							By Owner
-						</h2>
-						<div class="owner-list">
-							{Object.entries(coverage.byOwner).map(([owner, data]) => (
-								<div class="owner-item">
-									<div class="owner-info">
-										<span class="owner-name">{owner}</span>
-										<span class="owner-count">{data.count} screen{data.count > 1 ? "s" : ""}</span>
-									</div>
-									<div class="owner-bar">
-										<div
-											class="owner-bar-fill"
-											style={`width: ${Math.round((data.count / coverage.covered) * 100)}%`}
-										></div>
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
-					{/* By Tag */}
-					<div class="coverage-section">
-						<h2 class="section-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.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
-								<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
-							</svg>
-							By Tag
-						</h2>
-						<div class="tags-grid">
-							{Object.entries(coverage.byTag)
-								.sort(([, a], [, b]) => b - a)
-								.map(([tag, count]) => (
-									<a href={`/?tag=${encodeURIComponent(tag)}`} class="tag-card">
-										<span class="tag-name">{tag}</span>
-										<span class="tag-count">{count}</span>
-									</a>
-								))}
-						</div>
-					</div>
-				</div>
-				{/* Missing Routes */}
-				{coverage.missing.length > 0 && (
-					<div class="coverage-section missing-section">
-						<h2 class="section-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="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>
-							Missing Documentation ({coverage.missing.length})
-						</h2>
-						<p class="section-description">
-							These routes don't have a <code>screen.meta.ts</code> file yet.
-						</p>
-						<div class="missing-list">
-							{coverage.missing.map((item) => (
-								<div class="missing-item">
-									<div class="missing-route">
-										<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-											<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>
-										<span>{item.route}</span>
-									</div>
-									<div class="missing-action">
-										<code class="suggested-path">{item.suggestedPath}</code>
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
-				)}
-				<div class="coverage-footer">
-					<p class="timestamp">
-						Last updated: {new Date(coverage.timestamp).toLocaleString()}
-					</p>
-				</div>
-			</>
-		)}
-	</div>
-</Layout>
-<style>
-	.coverage-hero {
-		display: flex;
-		gap: 32px;
-		align-items: center;
-		margin-bottom: 48px;
-	}
-	.coverage-percentage {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 180px;
-		height: 180px;
-		border-radius: 50%;
-		border: 3px solid;
-		flex-shrink: 0;
-	}
-	.percentage-value {
-		font-size: 3.5rem;
-		font-weight: 700;
-		line-height: 1;
-	}
-	.percentage-label {
-		font-size: var(--text-sm);
-		color: var(--color-text-secondary);
-		margin-top: 4px;
-	}
-	.coverage-stats {
-		display: flex;
-		gap: 24px;
-		flex-wrap: wrap;
-	}
-	.stat-card {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		padding: 24px 32px;
-		text-align: center;
-		min-width: 120px;
-	}
-	.stat-value {
-		font-size: var(--text-3xl);
-		font-weight: 700;
-		color: var(--color-text);
-	}
-	.stat-label {
-		font-size: var(--text-sm);
-		color: var(--color-text-muted);
-		margin-top: 4px;
-	}
-	.coverage-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-		gap: 32px;
-		margin-bottom: 48px;
-	}
-	.coverage-section {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		padding: 24px;
-	}
-	.section-title {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		font-size: var(--text-lg);
-		font-weight: 600;
-		margin-bottom: 20px;
-		color: var(--color-text);
-	}
-	.section-title svg {
-		width: 20px;
-		height: 20px;
-		color: var(--color-accent);
-	}
-	.section-description {
-		font-size: var(--text-sm);
-		color: var(--color-text-muted);
-		margin-bottom: 16px;
-	}
-	.owner-list {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-	.owner-item {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-	.owner-info {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	.owner-name {
-		font-size: var(--text-sm);
-		font-weight: 500;
-		color: var(--color-text);
-	}
-	.owner-count {
-		font-size: var(--text-xs);
-		color: var(--color-text-muted);
-	}
-	.owner-bar {
-		height: 8px;
-		background: var(--color-bg-muted);
-		border-radius: 4px;
-		overflow: hidden;
-	}
-	.owner-bar-fill {
-		height: 100%;
-		background: var(--color-accent);
-		border-radius: 4px;
-		transition: width 0.3s ease;
-	}
-	.tags-grid {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-	}
-	.tag-card {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 8px 12px;
-		background: var(--color-bg-muted);
-		border-radius: var(--radius-md);
-		text-decoration: none;
-		transition: background 0.15s ease;
-	}
-	.tag-card:hover {
-		background: var(--color-surface-hover);
-	}
-	.tag-name {
-		font-size: var(--text-sm);
-		color: var(--color-text);
-	}
-	.tag-count {
-		font-size: var(--text-xs);
-		color: var(--color-accent);
-		font-weight: 600;
-		background: var(--color-accent-bg);
-		padding: 2px 6px;
-		border-radius: 4px;
-	}
-	.missing-section {
-		grid-column: 1 / -1;
-	}
-	.missing-list {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
-	.missing-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 12px 16px;
-		background: var(--color-bg-muted);
-		border-radius: var(--radius-md);
-		border-left: 3px solid var(--color-warning);
-	}
-	.missing-route {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		font-size: var(--text-sm);
-		color: var(--color-text);
-	}
-	.missing-route svg {
-		width: 16px;
-		height: 16px;
-		color: var(--color-text-muted);
-	}
-	.suggested-path {
-		font-size: var(--text-xs);
-		color: var(--color-text-muted);
-	}
-	.coverage-footer {
-		text-align: center;
-		padding-top: 24px;
-		border-top: 1px solid var(--color-border);
-	}
-	.timestamp {
-		font-size: var(--text-xs);
-		color: var(--color-text-muted);
-	}
-	@media (max-width: 768px) {
-		.coverage-hero {
-			flex-direction: column;
-			text-align: center;
-		}
-		.coverage-stats {
-			justify-content: center;
-		}
-		.missing-item {
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 8px;
-		}
-	}
-</style>

package/src/pages/editor.astro DELETED Viewed

@@ -1,33 +0,0 @@
----
-import Layout from "@/layouts/Layout.astro"
-import { MockFormEditor } from "@/components/MockFormEditor"
-import { loadScreens } from "@/utils/loadScreens"
-const screens = loadScreens()
-const url = Astro.url
-const screenId = url.searchParams.get("screen")
-const screen = screenId ? screens.find((s) => s.id === screenId) : null
----
-<Layout title="Mock Editor">
-	<div class="editor-container">
-		<MockFormEditor
-			client:only="react"
-			screenId={screen?.id}
-			screenTitle={screen?.title || "New Screen"}
-			initialMock={screen?.mock}
-		/>
-	</div>
-</Layout>
-<style>
-	.editor-container {
-		position: fixed;
-		top: 60px;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: #141822;
-	}
-</style>