react-semaphor 0.1.327 → 0.1.328

package/dist/chunks/index-C1l78BIx.js

@@ -0,0 +1,3247 @@
+const F = "semaphor-data-app-browser-sandbox-files:v1", x = "browser://semaphor-data-app", R = "src/main.tsx", u = [
+  {
+    path: "src/App.tsx",
+    contents: `import { DataApp } from "./data-app"
+
+export default function App() {
+  return <DataApp />
+}
+`
+  },
+  {
+    path: "src/main.tsx",
+    contents: `import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App"
+import "./index.css"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+`
+  },
+  {
+    path: "src/index.css",
+    contents: `@import "tailwindcss";
+
+@theme {
+  --color-background: #ffffff;
+  --color-foreground: #09090b;
+  --color-card: #ffffff;
+  --color-card-foreground: #09090b;
+  --color-muted: #f4f4f5;
+  --color-muted-foreground: #71717a;
+  --color-border: #e4e4e7;
+  --color-input: #e4e4e7;
+  --color-ring: #18181b;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background: #f6f7f8;
+}
+`
+  },
+  {
+    path: "src/data-app/index.tsx",
+    contents: `import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { Activity, BarChart3, RefreshCw, Users } from "lucide-react"
+import {
+  useSemaphorInput,
+  useSemaphorInputOptions,
+  useSemaphorMetric,
+  useSemaphorRecords,
+} from "react-semaphor/data-app-sdk"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+export function DataApp() {
+  const segmentOptions = useSemaphorInputOptions({
+    id: "segment-options",
+    dataset: "customers",
+    field: "customer_segment",
+  })
+  const regionOptions = useSemaphorInputOptions({
+    id: "region-options",
+    dataset: "customers",
+    field: "region",
+  })
+  const segment = useSemaphorInput({
+    id: "segment",
+    kind: "filter",
+    field: "customer_segment",
+    value: "",
+    options: [{ value: "", label: "All segments" }, ...segmentOptions.options],
+  })
+  const region = useSemaphorInput({
+    id: "region",
+    kind: "filter",
+    field: "region",
+    value: "",
+    options: [{ value: "", label: "All regions" }, ...regionOptions.options],
+  })
+  const revenue = useSemaphorMetric({
+    id: "revenue",
+    dataset: "orders",
+    metric: "revenue",
+    comparison: "previous_period",
+    inputs: [segment, region],
+  })
+  const arr = useSemaphorMetric({
+    id: "arr",
+    dataset: "customers",
+    metric: "arr",
+    inputs: [segment, region],
+  })
+  const tickets = useSemaphorMetric({
+    id: "tickets",
+    dataset: "customers",
+    metric: "open_tickets",
+    inputs: [segment, region],
+  })
+  const customerHealth = useSemaphorRecords({
+    id: "customer-health",
+    dataset: "customers",
+    dimensions: ["customer_name", "customer_segment", "region"],
+    measures: ["health_score", "open_tickets", "arr"],
+    inputs: [segment, region],
+    limit: 8,
+  })
+  const chartData = customerHealth.records.map((row) => ({
+    customer: String(row.customer_name).split(" ")[0],
+    arr: Number(row.arr || 0),
+  }))
+  const chartConfig = {
+    arr: {
+      label: "ARR",
+      color: "#2563eb",
+    },
+  } satisfies ChartConfig
+
+  const resetFilters = () => {
+    segment.setValue("")
+    region.setValue("")
+  }
+
+  return (
+    <main className="min-h-screen bg-zinc-50 p-4 text-zinc-950 sm:p-6">
+      <section className="mx-auto flex max-w-6xl flex-col gap-4">
+        <div className="flex flex-col gap-3 rounded-lg border border-zinc-200 bg-white p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
+          <div className="min-w-0">
+            <Badge variant="secondary" className="mb-2 gap-1.5">
+              <BarChart3 className="size-3.5" />
+              Approved Browser Sandbox template
+            </Badge>
+            <h1 className="text-2xl font-semibold tracking-tight">Customer Revenue Console</h1>
+            <p className="mt-1 text-sm text-zinc-500">
+              Semaphor metrics, filters, shadcn source components, Tailwind, and Recharts in one browser-native starter.
+            </p>
+          </div>
+          <div className="grid gap-2 sm:grid-cols-[1fr_1fr_auto] lg:w-[520px]">
+            <label className="text-xs font-medium text-zinc-600">
+              Segment
+              <Select value={String(segment.value ?? "")} onValueChange={segment.setValue}>
+                <SelectTrigger className="mt-1 w-full">
+                  <SelectValue placeholder="All segments" />
+                </SelectTrigger>
+                <SelectContent>
+                  {segment.options.map((option) => (
+                    <SelectItem key={option.value} value={String(option.value)}>
+                    {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </label>
+            <label className="text-xs font-medium text-zinc-600">
+              Region
+              <Select value={String(region.value ?? "")} onValueChange={region.setValue}>
+                <SelectTrigger className="mt-1 w-full">
+                  <SelectValue placeholder="All regions" />
+                </SelectTrigger>
+                <SelectContent>
+                  {region.options.map((option) => (
+                    <SelectItem key={option.value} value={String(option.value)}>
+                    {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </label>
+            <Button type="button" variant="outline" className="self-end" onClick={resetFilters}>
+              <RefreshCw className="size-4" />
+              Reset
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-3">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2">
+              <div>
+                <CardDescription>Total revenue</CardDescription>
+                <CardTitle className="mt-1 text-2xl text-zinc-950">
+                  {revenue.value?.toLocaleString() ?? "0"}
+                </CardTitle>
+              </div>
+              <Activity className="size-4 text-zinc-400" />
+            </CardHeader>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2">
+              <div>
+                <CardDescription>Customer ARR</CardDescription>
+                <CardTitle className="mt-1 text-2xl text-zinc-950">
+                  {arr.value?.toLocaleString() ?? "0"}
+                </CardTitle>
+              </div>
+              <Users className="size-4 text-zinc-400" />
+            </CardHeader>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2">
+              <div>
+                <CardDescription>Open tickets</CardDescription>
+                <CardTitle className="mt-1 text-2xl text-zinc-950">
+                  {tickets.value?.toLocaleString() ?? "0"}
+                </CardTitle>
+              </div>
+              <Badge variant={tickets.value > 30 ? "destructive" : "secondary"}>
+                {tickets.value > 30 ? "Watch" : "Stable"}
+              </Badge>
+            </CardHeader>
+          </Card>
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_420px]">
+          <Card>
+            <CardHeader>
+              <CardTitle>ARR by account</CardTitle>
+              <CardDescription>Real Recharts rendered through the shadcn chart wrapper.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChartContainer config={chartConfig} className="h-[300px] w-full">
+                <BarChart data={chartData} margin={{ left: 0, right: 12 }}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis dataKey="customer" tickLine={false} axisLine={false} tickMargin={8} />
+                  <YAxis tickLine={false} axisLine={false} tickMargin={8} width={52} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Bar dataKey="arr" fill="var(--color-arr)" radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ChartContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Template coverage</CardTitle>
+              <CardDescription>Bundled source files the model can edit in-browser.</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-2 text-sm">
+              {["shadcn card/table/button/badge/chart", "Tailwind v4 compiler", "Recharts SVG charts", "Semaphor data hooks"].map((item) => (
+                <div key={item} className="flex items-center justify-between gap-3 rounded-md border border-zinc-200 px-3 py-2">
+                  <span className="text-zinc-700">{item}</span>
+                  <Badge variant="outline">Ready</Badge>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Customer health watchlist</CardTitle>
+            <CardDescription>Filtered fixture rows shaped through the Semaphor data app SDK.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto rounded-lg border border-zinc-200">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Customer</TableHead>
+                    <TableHead>Segment</TableHead>
+                    <TableHead>Region</TableHead>
+                    <TableHead className="text-right">Health</TableHead>
+                    <TableHead className="text-right">Tickets</TableHead>
+                    <TableHead className="text-right">ARR</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {customerHealth.records.map((row) => (
+                    <TableRow key={row.customer_name}>
+                      <TableCell className="font-medium text-zinc-900">{row.customer_name}</TableCell>
+                      <TableCell>{row.customer_segment}</TableCell>
+                      <TableCell>{row.region}</TableCell>
+                      <TableCell className="text-right">{row.health_score}</TableCell>
+                      <TableCell className="text-right">{row.open_tickets}</TableCell>
+                      <TableCell className="text-right">
+                        {Number(row.arr || 0).toLocaleString()}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  )
+}
+`
+  },
+  {
+    path: "src/lib/utils.ts",
+    contents: `import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`
+  },
+  {
+    path: "src/components/ui/badge.tsx",
+    contents: `import type { HTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+type BadgeVariant = "default" | "secondary" | "outline" | "destructive"
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default: "border-transparent bg-zinc-900 text-white",
+  secondary: "border-transparent bg-zinc-100 text-zinc-900",
+  outline: "border-zinc-200 bg-white text-zinc-700",
+  destructive: "border-transparent bg-red-100 text-red-700",
+}
+
+export function Badge({
+  className,
+  variant = "default",
+  ...props
+}: HTMLAttributes<HTMLSpanElement> & { variant?: BadgeVariant }) {
+  return (
+    <span
+      {...props}
+      className={cn(
+        "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium",
+        variantClasses[variant],
+        className,
+      )}
+    />
+  )
+}
+`
+  },
+  {
+    path: "src/components/ui/button.tsx",
+    contents: `import type { ButtonHTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+type ButtonVariant = "default" | "outline" | "ghost"
+type ButtonSize = "default" | "sm"
+
+const variantClasses: Record<ButtonVariant, string> = {
+  default: "bg-zinc-900 text-white hover:bg-zinc-700",
+  outline: "border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50",
+  ghost: "text-zinc-700 hover:bg-zinc-100",
+}
+
+const sizeClasses: Record<ButtonSize, string> = {
+  default: "h-9 px-3",
+  sm: "h-8 px-2.5 text-xs",
+}
+
+export function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant
+  size?: ButtonSize
+}) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-50",
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+    />
+  )
+}
+`
+  },
+  {
+    path: "src/components/ui/card.tsx",
+    contents: `import type { HTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Card(props: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={cn("rounded-lg border border-zinc-200 bg-white shadow-sm", props.className)} />
+}
+
+export function CardHeader(props: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={cn("p-4 pb-2", props.className)} />
+}
+
+export function CardTitle(props: HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 {...props} className={cn("text-sm font-medium text-zinc-600", props.className)} />
+}
+
+export function CardDescription(props: HTMLAttributes<HTMLParagraphElement>) {
+  return <p {...props} className={cn("text-xs text-zinc-500", props.className)} />
+}
+
+export function CardContent(props: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={cn("p-4 pt-2", props.className)} />
+}
+`
+  },
+  {
+    path: "src/components/ui/select.tsx",
+    contents: `import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type SelectContextValue = {
+  value?: string
+  selectedLabel?: React.ReactNode
+  open: boolean
+  setOpen: (open: boolean) => void
+  setValue: (value: string, label: React.ReactNode) => void
+}
+
+const SelectContext = React.createContext<SelectContextValue | null>(null)
+
+function useSelectContext(component: string) {
+  const context = React.useContext(SelectContext)
+  if (!context) {
+    throw new Error(component + " must be used within Select")
+  }
+  return context
+}
+
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  children,
+}: {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  children: React.ReactNode
+}) {
+  const isControlled = Object.prototype.hasOwnProperty.call(
+    arguments[0] || {},
+    "value",
+  )
+  const [localValue, setLocalValue] = React.useState(defaultValue)
+  const [selectedLabel, setSelectedLabel] = React.useState<React.ReactNode>()
+  const [open, setOpen] = React.useState(false)
+  const currentValue = isControlled ? value : localValue
+
+  const setNextValue = React.useCallback(
+    (nextValue: string, label: React.ReactNode) => {
+      if (!isControlled) setLocalValue(nextValue)
+      setSelectedLabel(label)
+      onValueChange?.(nextValue)
+      setOpen(false)
+    },
+    [isControlled, onValueChange],
+  )
+
+  return (
+    <SelectContext.Provider
+      value={{
+        value: currentValue,
+        selectedLabel,
+        open,
+        setOpen,
+        setValue: setNextValue,
+      }}
+    >
+      <div className="relative inline-block min-w-0">{children}</div>
+    </SelectContext.Provider>
+  )
+}
+
+function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const context = useSelectContext("SelectTrigger")
+
+  return (
+    <button
+      type="button"
+      data-slot="select-trigger"
+      aria-expanded={context.open}
+      onClick={() => context.setOpen(!context.open)}
+      className={cn(
+        "flex h-9 min-w-32 items-center justify-between gap-2 rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors hover:bg-zinc-50 focus:border-zinc-400 disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="min-w-0 flex-1 truncate text-left">{children}</span>
+      <span className="text-xs text-zinc-400">▾</span>
+    </button>
+  )
+}
+
+function SelectValue({ placeholder }: { placeholder?: string }) {
+  const context = useSelectContext("SelectValue")
+  return (
+    <span
+      data-slot="select-value"
+      className={cn(!context.selectedLabel && "text-zinc-400")}
+    >
+      {context.selectedLabel || context.value || placeholder || "Select"}
+    </span>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  const context = useSelectContext("SelectContent")
+  if (!context.open) return null
+
+  return (
+    <div
+      data-slot="select-content"
+      className={cn(
+        "absolute left-0 top-[calc(100%+4px)] z-50 max-h-64 min-w-full overflow-auto rounded-md border border-zinc-200 bg-white p-1 text-zinc-900 shadow-lg",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function SelectItem({
+  value,
+  className,
+  children,
+}: {
+  value: string
+  className?: string
+  children: React.ReactNode
+}) {
+  const context = useSelectContext("SelectItem")
+  const selected = context.value === value
+
+  return (
+    <button
+      type="button"
+      data-slot="select-item"
+      data-state={selected ? "checked" : "unchecked"}
+      onClick={() => context.setValue(value, children)}
+      className={cn(
+        "flex w-full items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-zinc-100 focus:bg-zinc-100",
+        selected && "bg-zinc-100 font-medium",
+        className,
+      )}
+    >
+      <span className="min-w-0 truncate">{children}</span>
+      {selected ? <span className="text-xs text-zinc-500">✓</span> : null}
+    </button>
+  )
+}
+
+function SelectGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div data-slot="select-group" className={cn("p-1", className)} {...props} />
+}
+
+function SelectLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div data-slot="select-label" className={cn("px-2 py-1.5 text-xs font-medium text-zinc-500", className)} {...props} />
+}
+
+function SelectSeparator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div data-slot="select-separator" className={cn("-mx-1 my-1 h-px bg-zinc-200", className)} {...props} />
+}
+
+function SelectScrollUpButton() {
+  return null
+}
+
+function SelectScrollDownButton() {
+  return null
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
+`
+  },
+  {
+    path: "src/components/ui/progress.tsx",
+    contents: `import type { HTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+function clampProgress(value: number | null | undefined) {
+  if (typeof value !== "number" || Number.isNaN(value)) return 0
+  return Math.max(0, Math.min(100, value))
+}
+
+function Progress({
+  className,
+  value,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { value?: number | null }) {
+  const safeValue = clampProgress(value)
+
+  return (
+    <div
+      data-slot="progress"
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={safeValue}
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-zinc-100",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        data-slot="progress-indicator"
+        className="h-full w-full flex-1 rounded-full bg-zinc-900 transition-transform"
+        style={{ transform: "translateX(-" + (100 - safeValue) + "%)" }}
+      />
+    </div>
+  )
+}
+
+export { Progress }
+`
+  },
+  {
+    path: "src/components/ui/calendar.tsx",
+    contents: `import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type CalendarMode = "single" | "range"
+type DateRange = { from?: Date; to?: Date }
+
+function startOfMonth(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+function addMonths(date: Date, count: number) {
+  return new Date(date.getFullYear(), date.getMonth() + count, 1)
+}
+
+function isSameDay(a?: Date, b?: Date) {
+  return Boolean(
+    a &&
+      b &&
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate(),
+  )
+}
+
+function isBetween(date: Date, from?: Date, to?: Date) {
+  if (!from || !to) return false
+  const value = date.getTime()
+  return value >= from.getTime() && value <= to.getTime()
+}
+
+function monthDays(month: Date) {
+  const first = startOfMonth(month)
+  const start = new Date(first)
+  start.setDate(first.getDate() - first.getDay())
+
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(start)
+    date.setDate(start.getDate() + index)
+    return date
+  })
+}
+
+function formatDate(value?: Date) {
+  return value
+    ? value.toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      })
+    : ""
+}
+
+function Calendar({
+  className,
+  mode = "single",
+  selected,
+  defaultMonth,
+  month,
+  onMonthChange,
+  onSelect,
+}: {
+  className?: string
+  mode?: CalendarMode
+  selected?: Date | DateRange
+  defaultMonth?: Date
+  month?: Date
+  onMonthChange?: (month: Date) => void
+  onSelect?: (value: Date | DateRange | undefined) => void
+}) {
+  const [localMonth, setLocalMonth] = React.useState(
+    startOfMonth(month || defaultMonth || new Date()),
+  )
+  const currentMonth = startOfMonth(month || localMonth)
+  const range = mode === "range" && selected && !(selected instanceof Date)
+    ? selected
+    : undefined
+  const selectedDate = selected instanceof Date ? selected : undefined
+
+  const setMonth = React.useCallback(
+    (nextMonth: Date) => {
+      const normalized = startOfMonth(nextMonth)
+      if (!month) setLocalMonth(normalized)
+      onMonthChange?.(normalized)
+    },
+    [month, onMonthChange],
+  )
+
+  const selectDate = React.useCallback(
+    (date: Date) => {
+      if (mode === "range") {
+        const currentRange =
+          selected && !(selected instanceof Date) ? selected : undefined
+        if (!currentRange?.from || currentRange.to) {
+          onSelect?.({ from: date, to: undefined })
+          return
+        }
+        if (date.getTime() < currentRange.from.getTime()) {
+          onSelect?.({ from: date, to: currentRange.from })
+          return
+        }
+        onSelect?.({ from: currentRange.from, to: date })
+        return
+      }
+
+      onSelect?.(date)
+    },
+    [mode, onSelect, selected],
+  )
+
+  return (
+    <div
+      data-slot="calendar"
+      className={cn(
+        "w-fit rounded-md border border-zinc-200 bg-white p-3 text-zinc-900 shadow-sm",
+        className,
+      )}
+    >
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <button
+          type="button"
+          className="inline-flex h-7 w-7 items-center justify-center rounded-md text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
+          onClick={() => setMonth(addMonths(currentMonth, -1))}
+          aria-label="Previous month"
+        >
+          {"<"}
+        </button>
+        <div className="min-w-32 text-center text-sm font-medium">
+          {currentMonth.toLocaleDateString(undefined, {
+            month: "long",
+            year: "numeric",
+          })}
+        </div>
+        <button
+          type="button"
+          className="inline-flex h-7 w-7 items-center justify-center rounded-md text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
+          onClick={() => setMonth(addMonths(currentMonth, 1))}
+          aria-label="Next month"
+        >
+          {">"}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-7 gap-1 text-center text-[11px] font-medium uppercase tracking-[0.08em] text-zinc-500">
+        {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (
+          <div key={day} className="h-6 leading-6">
+            {day}
+          </div>
+        ))}
+      </div>
+      <div className="mt-1 grid grid-cols-7 gap-1">
+        {monthDays(currentMonth).map((date) => {
+          const outside = date.getMonth() !== currentMonth.getMonth()
+          const selectedSingle = isSameDay(date, selectedDate)
+          const selectedRangeStart = isSameDay(date, range?.from)
+          const selectedRangeEnd = isSameDay(date, range?.to)
+          const selectedRangeMiddle = isBetween(date, range?.from, range?.to)
+          const selectedState =
+            selectedSingle || selectedRangeStart || selectedRangeEnd
+          const inRange = selectedRangeMiddle && !selectedState
+
+          return (
+            <button
+              key={date.toISOString()}
+              type="button"
+              data-slot="calendar-day"
+              data-selected={selectedState || undefined}
+              data-range-middle={inRange || undefined}
+              onClick={() => selectDate(date)}
+              className={cn(
+                "h-8 w-8 rounded-md text-center text-sm tabular-nums outline-none transition-colors hover:bg-zinc-100 focus:bg-zinc-100",
+                outside && "text-zinc-300",
+                inRange && "bg-zinc-100 text-zinc-900",
+                selectedState && "bg-zinc-900 text-white hover:bg-zinc-800 focus:bg-zinc-800",
+              )}
+            >
+              {date.getDate()}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function CalendarDayButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type="button" {...props} />
+}
+
+function DatePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date",
+  className,
+}: {
+  value?: Date
+  onValueChange?: (value: Date | undefined) => void
+  placeholder?: string
+  className?: string
+}) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className={cn("relative inline-block", className)}>
+      <button
+        type="button"
+        className="inline-flex h-9 min-w-40 items-center justify-between gap-2 rounded-md border border-zinc-200 bg-white px-3 text-sm text-zinc-900 shadow-sm hover:bg-zinc-50"
+        onClick={() => setOpen((next) => !next)}
+      >
+        <span className={cn(!value && "text-zinc-400")}>
+          {value ? formatDate(value) : placeholder}
+        </span>
+        <span className="text-xs text-zinc-400">▾</span>
+      </button>
+      {open ? (
+        <div className="absolute left-0 top-[calc(100%+4px)] z-50">
+          <Calendar
+            selected={value}
+            defaultMonth={value}
+            onSelect={(nextValue) => {
+              onValueChange?.(nextValue instanceof Date ? nextValue : undefined)
+              setOpen(false)
+            }}
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export { Calendar, CalendarDayButton, DatePicker }
+`
+  },
+  {
+    path: "src/components/ui/chart.tsx",
+    contents: `"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+export type ChartConfig = {
+  [key: string]: {
+    label?: React.ReactNode
+    color?: string
+    theme?: {
+      light?: string
+      dark?: string
+    }
+  }
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+  if (!context) {
+    throw new Error("useChart must be used within a ChartContainer")
+  }
+  return context
+}
+
+export function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ReactNode
+}) {
+  const uniqueId = React.useId().replace(/:/g, "")
+  const chartId = "chart-" + (id || uniqueId)
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs text-muted-foreground [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
+  const variables = Object.entries(config)
+    .map(([key, item]) => {
+      const color = item.theme?.light || item.color
+      return color ? "  --color-" + key + ": " + color + ";" : null
+    })
+    .filter(Boolean)
+
+  if (!variables.length) return null
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: "[data-chart=\\"" + id + "\\"] {\\n" + variables.join("\\n") + "\\n}",
+      }}
+    />
+  )
+}
+
+export const ChartTooltip = RechartsPrimitive.Tooltip
+export const ChartLegend = RechartsPrimitive.Legend
+
+export function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  className,
+  hideLabel = false,
+  hideIndicator = false,
+}: {
+  active?: boolean
+  payload?: Array<{
+    color?: string
+    dataKey?: string | number
+    name?: string | number
+    value?: React.ReactNode
+  }>
+  label?: React.ReactNode
+  className?: string
+  hideLabel?: boolean
+  hideIndicator?: boolean
+}) {
+  const { config } = useChart()
+
+  if (!active || !payload?.length) return null
+
+  return (
+    <div className={cn("grid min-w-[8rem] gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1.5 text-xs shadow-xl", className)}>
+      {!hideLabel && label ? <div className="font-medium text-foreground">{label}</div> : null}
+      <div className="grid gap-1.5">
+        {payload.map((item) => {
+          const key = String(item.dataKey || item.name || "")
+          const chartItem = config[key]
+          const color = item.color || chartItem?.color || "var(--color-" + key + ")"
+
+          return (
+            <div key={key} className="flex min-w-0 items-center gap-2">
+              {!hideIndicator ? (
+                <span
+                  className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                  style={{ backgroundColor: color }}
+                />
+              ) : null}
+              <span className="min-w-0 flex-1 truncate text-muted-foreground">
+                {chartItem?.label || item.name || key}
+              </span>
+              <span className="font-mono font-medium tabular-nums text-foreground">
+                {typeof item.value === "number" ? item.value.toLocaleString() : item.value}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export function ChartLegendContent({
+  payload,
+  className,
+}: {
+  payload?: Array<{ value?: string | number; color?: string }>
+  className?: string
+}) {
+  const { config } = useChart()
+
+  if (!payload?.length) return null
+
+  return (
+    <div className={cn("flex flex-wrap items-center justify-center gap-4 text-xs", className)}>
+      {payload.map((item) => {
+        const key = String(item.value || "")
+        const chartItem = config[key]
+        return (
+          <div key={key} className="flex items-center gap-1.5">
+            <span
+              className="h-2.5 w-2.5 rounded-[2px]"
+              style={{ backgroundColor: item.color || chartItem?.color || "var(--color-" + key + ")" }}
+            />
+            <span className="text-muted-foreground">{chartItem?.label || key}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+`
+  },
+  {
+    path: "src/components/ui/table.tsx",
+    contents: `import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Table(props: HTMLAttributes<HTMLTableElement>) {
+  return <table {...props} className={cn("w-full caption-bottom text-sm", props.className)} />
+}
+
+export function TableHeader(props: HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead {...props} className={cn("bg-zinc-50 text-xs uppercase text-zinc-500", props.className)} />
+}
+
+export function TableBody(props: HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody {...props} className={cn("divide-y divide-zinc-200 bg-white", props.className)} />
+}
+
+export function TableRow(props: HTMLAttributes<HTMLTableRowElement>) {
+  return <tr {...props} className={cn("border-b border-zinc-200 last:border-0", props.className)} />
+}
+
+export function TableHead(props: ThHTMLAttributes<HTMLTableCellElement>) {
+  return <th {...props} className={cn("h-10 whitespace-nowrap px-4 text-left align-middle font-medium", props.className)} />
+}
+
+export function TableCell(props: TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td {...props} className={cn("whitespace-nowrap px-4 py-3 align-middle text-zinc-600", props.className)} />
+}
+`
+  }
+], C = [
+  {
+    id: "semaphor-analytics",
+    name: "Semaphor Analytics Starter",
+    description: "Approved client-side React starter with Semaphor data hooks, shadcn source components, Tailwind v4, and Recharts.",
+    files: u
+  }
+], M = C[0].id;
+function p(e) {
+  return e.map((t) => ({
+    path: m(t.path),
+    contents: t.contents
+  })).sort((t, r) => t.path.localeCompare(r.path));
+}
+function W(e = M) {
+  return C.find((t) => t.id === e) || C[0];
+}
+const Z = {
+  id: "semaphor-browser-runtime-v1",
+  name: "Semaphor Browser Runtime",
+  execution: "browser-sandbox",
+  moduleSystem: "virtual-tsx-commonjs",
+  cssPipeline: {
+    mode: "tailwind-v4-or-fallback",
+    status: "The runtime tries Tailwind v4 candidate compilation and reports when it falls back to bundled utility CSS. Unsupported package CSS requires Local Bridge."
+  },
+  packages: [
+    { name: "react", source: "host", status: "supported" },
+    { name: "react-dom/client", source: "host", status: "supported" },
+    { name: "react-semaphor/data-app-sdk", source: "runtime", status: "supported" },
+    { name: "@semaphor/data-app-sdk", source: "runtime", status: "supported" },
+    { name: "lucide-react", source: "shim", status: "partial" },
+    { name: "recharts", source: "host", status: "partial" },
+    { name: "clsx", source: "runtime", status: "supported" },
+    { name: "tailwind-merge", source: "runtime", status: "supported" },
+    { name: "class-variance-authority", source: "shim", status: "partial" },
+    { name: "tailwindcss", source: "runtime", status: "partial" }
+  ],
+  components: [
+    { name: "badge", importPath: "@/components/ui/badge", sourceFile: "src/components/ui/badge.tsx", implementation: "source", dependencies: [] },
+    { name: "button", importPath: "@/components/ui/button", sourceFile: "src/components/ui/button.tsx", implementation: "source", dependencies: [] },
+    { name: "card", importPath: "@/components/ui/card", sourceFile: "src/components/ui/card.tsx", implementation: "source", dependencies: [] },
+    { name: "chart", importPath: "@/components/ui/chart", sourceFile: "src/components/ui/chart.tsx", implementation: "source", dependencies: ["recharts"] },
+    { name: "select", importPath: "@/components/ui/select", sourceFile: "src/components/ui/select.tsx", implementation: "source", dependencies: [] },
+    { name: "progress", importPath: "@/components/ui/progress", sourceFile: "src/components/ui/progress.tsx", implementation: "source", dependencies: [] },
+    { name: "calendar", importPath: "@/components/ui/calendar", sourceFile: "src/components/ui/calendar.tsx", implementation: "source", dependencies: [] },
+    { name: "table", importPath: "@/components/ui/table", sourceFile: "src/components/ui/table.tsx", implementation: "source", dependencies: [] }
+  ],
+  limits: {
+    writeScope: ["src/**"],
+    editableGlobs: ["src/**"],
+    unsupported: [
+      "package edits",
+      "arbitrary npm installs",
+      "server or Node APIs",
+      "Vite plugin changes",
+      "environment files"
+    ]
+  }
+}, y = {
+  projectRoot: x,
+  framework: "vite-react",
+  packageManager: "browser-sandbox",
+  runtimeManifest: Z,
+  packageJson: {
+    dependencies: {
+      "@semaphor/data-app-sdk": "bundled",
+      "class-variance-authority": "bundled",
+      clsx: "bundled",
+      "lucide-react": "bundled",
+      react: "bundled",
+      "react-dom": "bundled",
+      "react-semaphor": "bundled",
+      recharts: "bundled",
+      "tailwind-merge": "bundled",
+      tailwindcss: "bundled"
+    },
+    devDependencies: {
+      "@vitejs/plugin-react": "browser-sandbox",
+      typescript: "browser-sandbox",
+      vite: "browser-sandbox"
+    },
+    scripts: {
+      dev: "browser-sandbox dev",
+      build: "browser-sandbox build",
+      typecheck: "browser-sandbox validate"
+    }
+  },
+  componentsJson: {
+    aliases: {
+      ui: "@/components/ui"
+    }
+  },
+  tsconfig: {
+    baseUrl: ".",
+    paths: {
+      "@/*": ["src/*"]
+    },
+    jsx: "react-jsx",
+    strict: !0,
+    noUnusedLocals: !0,
+    noUnusedParameters: !0
+  },
+  files: {
+    source: u.map((e) => e.path),
+    root: ["package.json", "vite.config.ts", "tsconfig.json"],
+    editable: u.map((e) => e.path),
+    editableGlobs: ["src/**"],
+    approvalRequiredGlobs: [
+      "package.json",
+      "package-lock.json",
+      ".env*",
+      "*.config.*",
+      "vite.config.*",
+      "tsconfig*.json"
+    ],
+    styleEntries: ["src/index.css"],
+    localModules: u.map((e) => e.path).filter((e) => /\.(ts|tsx|js|jsx)$/.test(e))
+  },
+  validation: {
+    typecheck: "browser sandbox static validation",
+    build: "browser sandbox static export"
+  },
+  capabilities: {
+    version: 1,
+    source: "browser-sandbox-template",
+    uiComponents: [
+      {
+        name: "badge",
+        importPath: "@/components/ui/badge",
+        exports: ["Badge"],
+        example: {
+          imports: 'import { Badge } from "@/components/ui/badge"',
+          usage: '<Badge variant="secondary">Ready</Badge>'
+        }
+      },
+      {
+        name: "button",
+        importPath: "@/components/ui/button",
+        exports: ["Button"],
+        example: {
+          imports: 'import { Button } from "@/components/ui/button"',
+          usage: '<Button variant="outline">Reset</Button>'
+        }
+      },
+      {
+        name: "card",
+        importPath: "@/components/ui/card",
+        exports: ["Card", "CardContent", "CardDescription", "CardHeader", "CardTitle"],
+        example: {
+          imports: 'import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"',
+          usage: "<Card><CardHeader><CardTitle>Title</CardTitle><CardDescription>Context</CardDescription></CardHeader><CardContent>Content</CardContent></Card>"
+        }
+      },
+      {
+        name: "chart",
+        importPath: "@/components/ui/chart",
+        exports: [
+          "ChartConfig",
+          "ChartContainer",
+          "ChartLegend",
+          "ChartLegendContent",
+          "ChartTooltip",
+          "ChartTooltipContent"
+        ],
+        example: {
+          imports: 'import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"',
+          usage: '<ChartContainer config={chartConfig} className="h-[280px] w-full"><BarChart data={data}><ChartTooltip content={<ChartTooltipContent />} /></BarChart></ChartContainer>'
+        }
+      },
+      {
+        name: "select",
+        importPath: "@/components/ui/select",
+        exports: [
+          "Select",
+          "SelectContent",
+          "SelectGroup",
+          "SelectItem",
+          "SelectLabel",
+          "SelectSeparator",
+          "SelectTrigger",
+          "SelectValue"
+        ],
+        example: {
+          imports: 'import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"',
+          usage: '<Select value={value} onValueChange={setValue}><SelectTrigger className="w-48"><SelectValue placeholder="Segment" /></SelectTrigger><SelectContent><SelectItem value="enterprise">Enterprise</SelectItem></SelectContent></Select>'
+        }
+      },
+      {
+        name: "progress",
+        importPath: "@/components/ui/progress",
+        exports: ["Progress"],
+        example: {
+          imports: 'import { Progress } from "@/components/ui/progress"',
+          usage: '<Progress value={72} className="h-2" />'
+        }
+      },
+      {
+        name: "calendar",
+        importPath: "@/components/ui/calendar",
+        exports: ["Calendar", "CalendarDayButton", "DatePicker"],
+        example: {
+          imports: 'import { DatePicker } from "@/components/ui/calendar"',
+          usage: '<DatePicker value={date} onValueChange={setDate} placeholder="Order date" />'
+        }
+      },
+      {
+        name: "table",
+        importPath: "@/components/ui/table",
+        exports: ["Table", "TableBody", "TableCell", "TableHead", "TableHeader", "TableRow"],
+        example: {
+          imports: 'import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"',
+          usage: "<Table><TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Northstar</TableCell></TableRow></TableBody></Table>"
+        }
+      }
+    ],
+    dataApis: [
+      {
+        package: "react-semaphor/data-app-sdk",
+        source: "bundled",
+        exports: [
+          "SemaphorDataAppProvider",
+          "useSemaphorInput",
+          "useSemaphorInputOptions",
+          "useSemaphorMetric",
+          "useSemaphorRecords"
+        ],
+        datasets: [
+          {
+            name: "orders",
+            fields: [
+              "category",
+              "customer_segment",
+              "gross_margin",
+              "order_date",
+              "orders",
+              "region",
+              "revenue",
+              "satisfaction_score"
+            ]
+          },
+          {
+            name: "customers",
+            fields: [
+              "arr",
+              "customer_name",
+              "customer_segment",
+              "health_score",
+              "last_active_days",
+              "open_tickets",
+              "region"
+            ]
+          }
+        ],
+        examples: [
+          "const segmentInput = useSemaphorInput({ id: 'segment', kind: 'filter', field: 'customer_segment' })",
+          "const revenue = useSemaphorMetric({ id: 'revenue', dataset: 'orders', metric: 'revenue', inputs: [segmentInput] })",
+          "const rows = useSemaphorRecords({ id: 'trend', dataset: 'orders', dimensions: ['order_date'], measures: ['revenue'], inputs: [segmentInput] })"
+        ],
+        constraints: [
+          "Semaphor input kind is only 'filter' or 'control'.",
+          "Pass input objects into metrics/records via inputs: [input].",
+          "useSemaphorMetric config uses metric, not measures.",
+          "useSemaphorRecords returns { records }, and records are plain objects."
+        ]
+      }
+    ]
+  }
+};
+function U() {
+  return typeof window < "u";
+}
+function m(e) {
+  return e.replace(/\\/g, "/").replace(/\/+/g, "/").replace(/^\.\//, "");
+}
+function Q(e) {
+  const t = new Map(p(e).map((r) => [m(r.path), r]));
+  for (const r of u) {
+    const a = m(r.path);
+    t.has(a) || t.set(a, {
+      path: a,
+      contents: r.contents
+    });
+  }
+  return Array.from(t.values()).sort((r, a) => r.path.localeCompare(a.path));
+}
+function f() {
+  if (!U())
+    return p(u);
+  try {
+    const e = window.localStorage.getItem(F);
+    if (!e)
+      return p(u);
+    const t = JSON.parse(e);
+    if (!Array.isArray(t) || t.length === 0)
+      return p(u);
+    const r = Q(t);
+    return r.length !== t.length && D(r), r;
+  } catch {
+    return p(u);
+  }
+}
+function D(e) {
+  U() && window.localStorage.setItem(F, JSON.stringify(e));
+}
+function G(e = f()) {
+  return new Map(e.map((t) => [m(t.path), t.contents]));
+}
+function ee(e) {
+  const t = e.map((r) => m(r.path)).sort();
+  return Object.assign(Object.assign({}, y), { files: Object.assign(Object.assign({}, y.files), { source: t, editable: t.filter((r) => /^src\/.+\.(ts|tsx|js|jsx|css|json)$/.test(r)), styleEntries: t.filter((r) => /(^|\/)(index|app|globals)\.css$/i.test(r)), localModules: t.filter((r) => /\.(ts|tsx|js|jsx)$/.test(r)) }) });
+}
+function _e() {
+  return C.map((e) => ({
+    id: e.id,
+    name: e.name,
+    description: e.description,
+    fileCount: e.files.length
+  }));
+}
+function ze(e = M) {
+  D(p(W(e).files));
+}
+function Me() {
+  return ee(f());
+}
+function De(e) {
+  const t = G();
+  return e.map((r) => ({
+    path: r,
+    contents: t.get(m(r)) || ""
+  }));
+}
+function He() {
+  return f().map((e) => ({
+    path: m(e.path),
+    size: e.contents.length
+  })).sort((e, t) => e.path.localeCompare(t.path));
+}
+function $e(e = M) {
+  const t = W(e);
+  return {
+    provider: "browser-sandbox-template",
+    summary: `Seeded the ${t.name} template.`,
+    changes: [
+      {
+        kind: "edit",
+        label: `Replaced the virtual browser workspace with ${t.files.length} approved template files`
+      }
+    ],
+    files: p(t.files),
+    replaceExistingFiles: !0,
+    generationMeta: {
+      model: "approved-template",
+      strategy: t.id,
+      durationMs: 0,
+      outputChars: t.files.reduce((r, a) => r + a.contents.length, 0)
+    }
+  };
+}
+function Be({ files: e, sourcePath: t }) {
+  return {
+    provider: "browser-sandbox-local-import",
+    summary: `Imported approved browser files from ${t}.`,
+    changes: [
+      {
+        kind: "edit",
+        label: `Replaced the virtual browser workspace with ${e.length} local template files`
+      }
+    ],
+    files: p(e),
+    replaceExistingFiles: !0,
+    generationMeta: {
+      model: "local-template-import",
+      strategy: "dev-local-import",
+      durationMs: 0,
+      outputChars: e.reduce((r, a) => r + a.contents.length, 0)
+    }
+  };
+}
+function v({ command: e, ok: t, stderr: r = "", stdout: a = "", startedAt: n }) {
+  return {
+    command: e,
+    durationMs: Date.now() - n,
+    exitCode: t ? 0 : 1,
+    ok: t,
+    stdout: a,
+    stderr: r
+  };
+}
+function te(e) {
+  const t = /* @__PURE__ */ new Set([".ts", ".tsx", ".js", ".jsx", ".css", ".json"]), r = [];
+  for (const a of e) {
+    const n = m(a.path), o = n.match(/\.[^.]+$/), i = (o == null ? void 0 : o[0]) || "";
+    if (!a.path || n.startsWith("../") || n.startsWith("/")) {
+      r.push(`${a.path}: generated file path must be a normalized relative project path.`);
+      continue;
+    }
+    if (!n.startsWith("src/")) {
+      r.push(`${a.path}: browser sandbox revisions may only write files under src/**.`);
+      continue;
+    }
+    t.has(i) || r.push(`${a.path}: generated source files must use one of ${[...t].join(", ")}.`);
+  }
+  return {
+    ok: r.length === 0,
+    diagnostics: r
+  };
+}
+function re(e) {
+  const t = /* @__PURE__ */ new Set(), r = [
+    /import\s+(?:type\s+)?(?:[^'"]+\s+from\s+)?['"]([^'"]+)['"]/g,
+    /export\s+(?:type\s+)?[^'"]+\s+from\s+['"]([^'"]+)['"]/g,
+    /import\(\s*['"]([^'"]+)['"]\s*\)/g
+  ];
+  for (const a of r) {
+    let n;
+    for (; n = a.exec(e); )
+      t.add(n[1]);
+  }
+  return [...t];
+}
+function ae(e) {
+  if (e.startsWith("@")) {
+    const [t, r] = e.split("/");
+    return r ? `${t}/${r}` : e;
+  }
+  return e.split("/")[0];
+}
+function ne(e, t, r) {
+  const a = [], n = (o) => {
+    a.push(o);
+    for (const i of [".tsx", ".ts", ".jsx", ".js", ".css", ".json"])
+      a.push(`${o}${i}`);
+    for (const i of ["index.tsx", "index.ts", "index.jsx", "index.js"])
+      a.push(`${o}/${i}`);
+  };
+  if (t.startsWith(".")) {
+    const o = m(e).split("/");
+    o.pop();
+    const i = [...o, ...t.split("/")], l = [];
+    for (const s of i)
+      if (!(!s || s === ".")) {
+        if (s === "..") {
+          l.pop();
+          continue;
+        }
+        l.push(s);
+      }
+    n(l.join("/"));
+  }
+  return t.startsWith("@/") && n(`src/${t.slice(2)}`), a.some((o) => r.has(m(o)));
+}
+function oe(e, t = f()) {
+  var r, a;
+  const n = Object.assign(Object.assign({}, (r = y.packageJson) === null || r === void 0 ? void 0 : r.dependencies), (a = y.packageJson) === null || a === void 0 ? void 0 : a.devDependencies), o = /* @__PURE__ */ new Set([
+    ...t.map((s) => m(s.path)),
+    ...e.map((s) => m(s.path))
+  ]), i = /* @__PURE__ */ new Set([
+    "child_process",
+    "crypto",
+    "fs",
+    "http",
+    "https",
+    "node:child_process",
+    "node:crypto",
+    "node:fs",
+    "node:http",
+    "node:https",
+    "node:path",
+    "path"
+  ]), l = [];
+  for (const s of e)
+    for (const d of re(s.contents)) {
+      const b = ae(d);
+      if (i.has(d) || i.has(b)) {
+        l.push(`${s.path}: blocked server/runtime import "${d}". Browser sandbox apps must run in the browser.`);
+        continue;
+      }
+      if (d.startsWith(".") || d.startsWith("@/")) {
+        ne(s.path, d, o) || l.push(`${s.path}: local import "${d}" does not resolve from the browser sandbox files.`);
+        continue;
+      }
+      n[b] || l.push(`${s.path}: package import "${d}" is not available in Browser Sandbox. Switch to Local Bridge for arbitrary npm packages.`);
+    }
+  return {
+    ok: l.length === 0,
+    diagnostics: l
+  };
+}
+function je(e) {
+  const t = Date.now(), r = te(e.files), a = e.replaceExistingFiles ? [] : f();
+  if (!r.ok) {
+    const s = v({
+      command: "browser sandbox write policy validation",
+      ok: !1,
+      stderr: r.diagnostics.join(`
+`),
+      startedAt: t
+    });
+    return {
+      ok: !1,
+      projectRoot: x,
+      provider: e.provider || "browser-sandbox",
+      validation: "write-policy-validation",
+      summary: e.summary,
+      changes: e.changes,
+      generationMeta: e.generationMeta,
+      files: e.files.map((d) => ({ path: d.path, size: d.contents.length })),
+      changedFiles: [],
+      writePolicyValidation: r,
+      attempts: [{ label: e.attemptLabel || "initial", ok: !1, command: s }],
+      error: "Generated files failed Browser Sandbox write policy validation."
+    };
+  }
+  const n = oe(e.files, a);
+  if (!n.ok) {
+    const s = v({
+      command: "browser sandbox import validation",
+      ok: !1,
+      stderr: n.diagnostics.join(`
+`),
+      startedAt: t
+    });
+    return {
+      ok: !1,
+      projectRoot: x,
+      provider: e.provider || "browser-sandbox",
+      validation: "import-validation",
+      summary: e.summary,
+      changes: e.changes,
+      generationMeta: e.generationMeta,
+      files: e.files.map((d) => ({ path: d.path, size: d.contents.length })),
+      changedFiles: [],
+      importValidation: n,
+      attempts: [{ label: e.attemptLabel || "initial", ok: !1, command: s }],
+      error: "Generated files failed Browser Sandbox import validation."
+    };
+  }
+  const o = e.replaceExistingFiles ? /* @__PURE__ */ new Map() : G(), i = [];
+  for (const s of e.files) {
+    const d = m(s.path);
+    o.set(d, s.contents), i.push(d);
+  }
+  D([...o.entries()].map(([s, d]) => ({ path: s, contents: d })).sort((s, d) => s.path.localeCompare(d.path)));
+  const l = v({
+    command: "browser sandbox static validation",
+    ok: !0,
+    stdout: "Write policy and import validation passed. Browser preview refresh is handled by app-builder.",
+    startedAt: t
+  });
+  return {
+    ok: !0,
+    projectRoot: x,
+    provider: e.provider || "browser-sandbox",
+    validation: "typecheck",
+    summary: e.summary,
+    changes: e.changes,
+    generationMeta: e.generationMeta,
+    files: e.files.map((s) => ({ path: s.path, size: s.contents.length })),
+    changedFiles: i,
+    importValidation: n,
+    attempts: [{ label: e.attemptLabel || "initial", ok: !0, command: l }],
+    command: l
+  };
+}
+function Pe() {
+  const e = {
+    path: "src/data-app/index.tsx",
+    contents: `import { useEffect, useRef, useState } from "react"
+import { Activity, AlertTriangle, BarChart3, Users } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import {
+  useSemaphorInput,
+  useSemaphorInputOptions,
+  useSemaphorMetric,
+  useSemaphorRecords,
+} from "react-semaphor/data-app-sdk"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+export function DataApp() {
+  const statusRef = useRef<HTMLSpanElement | null>(null)
+  const [runtimeStatus, setRuntimeStatus] = useState("mounting")
+
+  useEffect(() => {
+    statusRef.current?.setAttribute("data-ready", "true")
+    setRuntimeStatus("interactive")
+  }, [])
+
+  const segmentOptions = useSemaphorInputOptions({
+    id: "segment-options",
+    dataset: "customers",
+    field: "customer_segment",
+  })
+  const regionOptions = useSemaphorInputOptions({
+    id: "region-options",
+    dataset: "customers",
+    field: "region",
+  })
+  const segment = useSemaphorInput({
+    id: "segment",
+    kind: "filter",
+    field: "customer_segment",
+    value: "",
+    options: [{ value: "", label: "All segments" }, ...segmentOptions.options],
+  })
+  const region = useSemaphorInput({
+    id: "region",
+    kind: "filter",
+    field: "region",
+    value: "",
+    options: [{ value: "", label: "All regions" }, ...regionOptions.options],
+  })
+  const revenue = useSemaphorMetric({
+    id: "revenue",
+    dataset: "orders",
+    metric: "revenue",
+    comparison: "previous_period",
+    inputs: [segment, region],
+  })
+
+  const orders = useSemaphorMetric({
+    id: "orders",
+    dataset: "orders",
+    metric: "orders",
+    comparison: "previous_period",
+    inputs: [segment, region],
+  })
+  const arr = useSemaphorMetric({
+    id: "arr",
+    dataset: "customers",
+    metric: "arr",
+    inputs: [segment, region],
+  })
+  const tickets = useSemaphorMetric({
+    id: "tickets",
+    dataset: "customers",
+    metric: "open_tickets",
+    inputs: [segment, region],
+  })
+  const customerHealth = useSemaphorRecords({
+    id: "customer-health",
+    dataset: "customers",
+    dimensions: ["customer_name", "customer_segment", "region"],
+    measures: ["health_score", "open_tickets", "arr"],
+    inputs: [segment, region],
+    limit: 6,
+  })
+  const chartData = customerHealth.records.map((row) => ({
+    customer: String(row.customer_name).split(" ")[0],
+    arr: Number(row.arr || 0),
+    open_tickets: Number(row.open_tickets || 0),
+  }))
+  const chartConfig = {
+    arr: {
+      label: "ARR",
+      color: "#2563eb",
+    },
+    open_tickets: {
+      label: "Open tickets",
+      color: "#f97316",
+    },
+  } satisfies ChartConfig
+
+  return (
+    <main className="min-h-screen bg-zinc-50 p-4 text-zinc-950 sm:p-6">
+      <section className="mx-auto max-w-6xl space-y-4">
+        <div className="flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
+          <div className="min-w-0">
+            <div className="mb-2 inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
+              <BarChart3 className="size-4" />
+              <span ref={statusRef}>Real React runtime: {runtimeStatus}</span>
+            </div>
+            <h1 className="text-2xl font-semibold tracking-tight">Revenue Command Center</h1>
+            <p className="mt-1 text-sm text-zinc-500">
+              Responsive filters, KPI cards, and customer watchlist render in-browser.
+            </p>
+          </div>
+          <div className="grid gap-2 sm:grid-cols-2 lg:w-[360px]">
+            <label className="text-xs font-medium text-zinc-600">
+              Segment
+              <Select value={String(segment.value ?? "")} onValueChange={segment.setValue}>
+                <SelectTrigger className="mt-1 w-full">
+                  <SelectValue placeholder="All segments" />
+                </SelectTrigger>
+                <SelectContent>
+                  {segment.options.map((option) => (
+                    <SelectItem key={option.value} value={String(option.value)}>
+                    {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </label>
+            <label className="text-xs font-medium text-zinc-600">
+              Region
+              <Select value={String(region.value ?? "")} onValueChange={region.setValue}>
+                <SelectTrigger className="mt-1 w-full">
+                  <SelectValue placeholder="All regions" />
+                </SelectTrigger>
+                <SelectContent>
+                  {region.options.map((option) => (
+                    <SelectItem key={option.value} value={String(option.value)}>
+                    {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </label>
+          </div>
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2">
+              <CardTitle>Revenue</CardTitle>
+              <Activity className="size-4 text-zinc-400" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-3xl font-semibold">
+                {revenue.value?.toLocaleString() ?? "0"}
+              </div>
+              <p className="mt-1 text-xs text-zinc-500">Current order fixture total</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2">
+              <CardTitle>Orders</CardTitle>
+              <BarChart3 className="size-4 text-zinc-400" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-3xl font-semibold">
+                {orders.value?.toLocaleString() ?? "0"}
+              </div>
+              <p className="mt-1 text-xs text-zinc-500">Filtered order volume</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2">
+              <CardTitle>Customer ARR</CardTitle>
+              <Users className="size-4 text-zinc-400" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-3xl font-semibold">
+                {arr.value?.toLocaleString() ?? "0"}
+              </div>
+              <p className="mt-1 text-xs text-zinc-500">Responds to segment and region</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-2">
+              <CardTitle>Open Tickets</CardTitle>
+              <AlertTriangle className="size-4 text-zinc-400" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-3xl font-semibold">
+                {tickets.value?.toLocaleString() ?? "0"}
+              </div>
+              <p className="mt-1 text-xs text-zinc-500">Support pressure signal</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Customer ARR by account</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={chartConfig} className="h-[280px] w-full">
+              <BarChart data={chartData} margin={{ left: 0, right: 12 }}>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="customer"
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                />
+                <YAxis
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                  width={52}
+                />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey="arr" fill="var(--color-arr)" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Customer health watchlist</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto rounded-lg border border-zinc-200">
+              <table className="min-w-full text-left text-sm">
+                <thead className="bg-zinc-50 text-xs uppercase text-zinc-500">
+                  <tr>
+                    <th className="px-4 py-3 font-medium">Customer</th>
+                    <th className="px-4 py-3 font-medium">Segment</th>
+                    <th className="px-4 py-3 font-medium">Region</th>
+                    <th className="px-4 py-3 text-right font-medium">Health</th>
+                    <th className="px-4 py-3 text-right font-medium">Tickets</th>
+                    <th className="px-4 py-3 text-right font-medium">ARR</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-zinc-200 bg-white">
+                  {customerHealth.records.map((row) => (
+                    <tr key={row.customer_name}>
+                      <td className="whitespace-nowrap px-4 py-3 font-medium text-zinc-900">
+                        {row.customer_name}
+                      </td>
+                      <td className="whitespace-nowrap px-4 py-3 text-zinc-600">
+                        {row.customer_segment}
+                      </td>
+                      <td className="whitespace-nowrap px-4 py-3 text-zinc-600">{row.region}</td>
+                      <td className="whitespace-nowrap px-4 py-3 text-right font-medium">
+                        {row.health_score}
+                      </td>
+                      <td className="whitespace-nowrap px-4 py-3 text-right">
+                        {row.open_tickets}
+                      </td>
+                      <td className="whitespace-nowrap px-4 py-3 text-right">
+                        {Number(row.arr || 0).toLocaleString()}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  )
+}
+`
+  };
+  return {
+    provider: "browser-sandbox",
+    summary: "Applied a deterministic Browser Sandbox smoke revision.",
+    changes: [
+      {
+        kind: "edit",
+        label: "Replaced the virtual browser workspace with a known-good smoke app"
+      }
+    ],
+    files: u.map((t) => t.path === e.path ? e : t),
+    replaceExistingFiles: !0,
+    generationMeta: {
+      model: "deterministic-smoke",
+      strategy: "browser-sandbox-smoke",
+      durationMs: 0,
+      outputChars: 0
+    }
+  };
+}
+function Ae() {
+  const e = Date.now(), t = v({
+    command: "browser sandbox build",
+    ok: !1,
+    stderr: "Static export is not implemented yet. Next step: compile the virtual filesystem with the Browser Sandbox compiler worker, then upload dist/** to S3.",
+    startedAt: e
+  });
+  return {
+    ok: !1,
+    projectRoot: x,
+    provider: "browser-sandbox",
+    validation: "build",
+    changedFiles: [],
+    attempts: [{ label: "publish", ok: !1, command: t }],
+    command: t,
+    error: t.stderr
+  };
+}
+async function Le() {
+  const e = f(), t = [];
+  try {
+    const r = await import("./typescript-H1EwZsOb.js").then((i) => i.t), a = {}, n = e.filter((i) => /\.(ts|tsx|js|jsx)$/.test(i.path));
+    for (const i of n) {
+      const l = m(i.path), s = r.transpileModule(i.contents, {
+        compilerOptions: {
+          esModuleInterop: !0,
+          jsx: r.JsxEmit.ReactJSX,
+          module: r.ModuleKind.CommonJS,
+          target: r.ScriptTarget.ES2020
+        },
+        fileName: l,
+        reportDiagnostics: !0
+      });
+      for (const d of s.diagnostics || [])
+        t.push(se(r, d));
+      a[l] = s.outputText;
+    }
+    if (a[R] || t.push(`${R}: browser sandbox entry file is missing.`), t.length > 0)
+      return {
+        html: E(t),
+        diagnostics: t
+      };
+    const o = await ie(e);
+    return {
+      html: ke({
+        css: o.css,
+        diagnostics: t,
+        entryPath: R,
+        moduleSources: a
+      }),
+      diagnostics: t,
+      warnings: o.warnings,
+      cssMode: o.mode
+    };
+  } catch (r) {
+    const a = r instanceof Error ? r.message : String(r);
+    return {
+      html: E([
+        `Browser Sandbox compiler failed before rendering: ${a}`
+      ]),
+      diagnostics: [a]
+    };
+  }
+}
+function se(e, t) {
+  const r = t.file && typeof t.start == "number" ? (() => {
+    const n = t.file.getLineAndCharacterOfPosition(t.start);
+    return `${t.file.fileName}:${n.line + 1}:${n.character + 1}`;
+  })() : "browser-sandbox", a = e.flattenDiagnosticMessageText(t.messageText, `
+`);
+  return `${r}: ${a}`;
+}
+async function ie(e) {
+  const t = e.filter((r) => r.path.endsWith(".css")).map((r) => r.contents).join(`
+`);
+  try {
+    const { compile: r } = await import("./lib-DFvr9fM4.js"), a = le(t), n = await r(a, {
+      from: void 0,
+      loadStylesheet: ce
+    });
+    return {
+      css: `${z}
+${n.build([...K(e)])}`,
+      mode: "tailwind",
+      warnings: []
+    };
+  } catch (r) {
+    const a = r instanceof Error ? r.message : String(r), n = t.replace(/@import\s+["']tailwindcss["'];?/g, "");
+    return {
+      css: [
+        z,
+        `/* Browser Sandbox Tailwind compiler failed; using fallback utility CSS. ${a} */`,
+        he(e),
+        n
+      ].join(`
+`),
+      mode: "fallback",
+      warnings: [
+        `Tailwind compiler was unavailable, so Browser Sandbox used fallback utility CSS. ${a}`
+      ]
+    };
+  }
+}
+function le(e) {
+  return /@import\s+["']tailwindcss(?:\/[^"']*)?["'];?/.test(e) || /@tailwind\s+/.test(e) ? e : `@import "tailwindcss";
+${e}`;
+}
+const P = /* @__PURE__ */ new Map();
+async function ce(e, t) {
+  const r = e.replace(/^\.\//, "tailwindcss/"), a = r === "tailwindcss" ? "/browser-sandbox/tailwind/index.css" : r === "tailwindcss/theme" ? "/browser-sandbox/tailwind/theme.css" : r === "tailwindcss/preflight" ? "/browser-sandbox/tailwind/preflight.css" : r === "tailwindcss/utilities" ? "/browser-sandbox/tailwind/utilities.css" : null;
+  if (!a)
+    throw new Error(`Unsupported Tailwind stylesheet import: ${e}`);
+  let n = P.get(a);
+  if (!n) {
+    const o = await fetch(a);
+    if (!o.ok)
+      throw new Error(`Unable to load Tailwind stylesheet ${a}: ${o.status}`);
+    n = await o.text(), P.set(a, n);
+  }
+  return {
+    base: t || new URL("/browser-sandbox/tailwind/", window.location.origin).href,
+    content: n,
+    path: a
+  };
+}
+const de = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+}, me = {
+  hover: ":hover",
+  focus: ":focus",
+  active: ":active",
+  disabled: ":disabled"
+}, q = {
+  0: "0",
+  px: "1px",
+  "0.5": "0.125rem",
+  1: "0.25rem",
+  "1.5": "0.375rem",
+  2: "0.5rem",
+  "2.5": "0.625rem",
+  3: "0.75rem",
+  "3.5": "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  11: "2.75rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  56: "14rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem"
+}, ue = {
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  "1/5": "20%",
+  "2/5": "40%",
+  "3/5": "60%",
+  "4/5": "80%",
+  "1/6": "16.666667%",
+  "5/6": "83.333333%",
+  "1/12": "8.333333%",
+  "2/12": "16.666667%",
+  "3/12": "25%",
+  "4/12": "33.333333%",
+  "5/12": "41.666667%",
+  "6/12": "50%",
+  "7/12": "58.333333%",
+  "8/12": "66.666667%",
+  "9/12": "75%",
+  "10/12": "83.333333%",
+  "11/12": "91.666667%"
+}, A = {
+  none: "none",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  full: "100%",
+  screen: "100vw"
+}, L = {
+  xs: "font-size: 0.75rem; line-height: 1rem;",
+  sm: "font-size: 0.875rem; line-height: 1.25rem;",
+  base: "font-size: 1rem; line-height: 1.5rem;",
+  lg: "font-size: 1.125rem; line-height: 1.75rem;",
+  xl: "font-size: 1.25rem; line-height: 1.75rem;",
+  "2xl": "font-size: 1.5rem; line-height: 2rem;",
+  "3xl": "font-size: 1.875rem; line-height: 2.25rem;",
+  "4xl": "font-size: 2.25rem; line-height: 2.5rem;",
+  "5xl": "font-size: 3rem; line-height: 1;",
+  "6xl": "font-size: 3.75rem; line-height: 1;"
+}, pe = {
+  none: "0",
+  sm: "0.125rem",
+  DEFAULT: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "2xl": "1rem",
+  "3xl": "1.5rem",
+  full: "9999px"
+}, fe = {
+  sm: "0 1px 2px rgba(24, 24, 27, 0.06)",
+  DEFAULT: "0 1px 3px rgba(24, 24, 27, 0.1), 0 1px 2px rgba(24, 24, 27, 0.06)",
+  md: "0 4px 6px -1px rgba(24, 24, 27, 0.1), 0 2px 4px -2px rgba(24, 24, 27, 0.1)",
+  lg: "0 10px 15px -3px rgba(24, 24, 27, 0.1), 0 4px 6px -4px rgba(24, 24, 27, 0.1)",
+  none: "none"
+}, ge = {
+  slate: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  },
+  zinc: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a"
+  },
+  red: { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 900: "#7f1d1d" },
+  amber: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 900: "#78350f" },
+  yellow: { 50: "#fefce8", 100: "#fef9c3", 200: "#fef08a", 500: "#eab308", 600: "#ca8a04", 700: "#a16207", 900: "#713f12" },
+  green: { 50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 500: "#22c55e", 600: "#16a34a", 700: "#15803d", 900: "#14532d" },
+  emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 500: "#10b981", 600: "#059669", 700: "#047857", 900: "#064e3b" },
+  blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 900: "#1e3a8a" },
+  indigo: { 50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 900: "#312e81" },
+  purple: { 50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 500: "#a855f7", 600: "#9333ea", 700: "#7e22ce", 900: "#581c87" },
+  rose: { 50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c", 900: "#881337" }
+}, V = {
+  background: "#ffffff",
+  foreground: "#09090b",
+  card: "#ffffff",
+  "card-foreground": "#09090b",
+  muted: "#f4f4f5",
+  "muted-foreground": "#71717a",
+  primary: "#18181b",
+  "primary-foreground": "#ffffff",
+  secondary: "#f4f4f5",
+  "secondary-foreground": "#18181b",
+  accent: "#f4f4f5",
+  "accent-foreground": "#18181b",
+  destructive: "#dc2626",
+  "destructive-foreground": "#ffffff",
+  border: "#e4e4e7",
+  input: "#e4e4e7",
+  ring: "#18181b",
+  white: "#ffffff",
+  black: "#000000",
+  transparent: "transparent"
+}, J = {
+  block: "display: block;",
+  "inline-block": "display: inline-block;",
+  inline: "display: inline;",
+  flex: "display: flex;",
+  "inline-flex": "display: inline-flex;",
+  grid: "display: grid;",
+  hidden: "display: none;",
+  table: "display: table;",
+  "table-row": "display: table-row;",
+  "table-cell": "display: table-cell;",
+  relative: "position: relative;",
+  absolute: "position: absolute;",
+  fixed: "position: fixed;",
+  sticky: "position: sticky;",
+  "flex-row": "flex-direction: row;",
+  "flex-col": "flex-direction: column;",
+  "flex-wrap": "flex-wrap: wrap;",
+  "flex-nowrap": "flex-wrap: nowrap;",
+  "flex-1": "flex: 1 1 0%;",
+  "flex-auto": "flex: 1 1 auto;",
+  "flex-none": "flex: none;",
+  grow: "flex-grow: 1;",
+  "grow-0": "flex-grow: 0;",
+  shrink: "flex-shrink: 1;",
+  "shrink-0": "flex-shrink: 0;",
+  "items-start": "align-items: flex-start;",
+  "items-center": "align-items: center;",
+  "items-end": "align-items: flex-end;",
+  "items-stretch": "align-items: stretch;",
+  "justify-start": "justify-content: flex-start;",
+  "justify-center": "justify-content: center;",
+  "justify-end": "justify-content: flex-end;",
+  "justify-between": "justify-content: space-between;",
+  "justify-around": "justify-content: space-around;",
+  "content-start": "align-content: flex-start;",
+  "content-center": "align-content: center;",
+  "self-start": "align-self: flex-start;",
+  "self-center": "align-self: center;",
+  "self-stretch": "align-self: stretch;",
+  "overflow-hidden": "overflow: hidden;",
+  "overflow-auto": "overflow: auto;",
+  "overflow-x-auto": "overflow-x: auto;",
+  "overflow-y-auto": "overflow-y: auto;",
+  "overflow-x-hidden": "overflow-x: hidden;",
+  "overflow-y-hidden": "overflow-y: hidden;",
+  truncate: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
+  "whitespace-nowrap": "white-space: nowrap;",
+  "whitespace-normal": "white-space: normal;",
+  "text-left": "text-align: left;",
+  "text-center": "text-align: center;",
+  "text-right": "text-align: right;",
+  "align-middle": "vertical-align: middle;",
+  "font-normal": "font-weight: 400;",
+  "font-medium": "font-weight: 500;",
+  "font-semibold": "font-weight: 600;",
+  "font-bold": "font-weight: 700;",
+  uppercase: "text-transform: uppercase;",
+  lowercase: "text-transform: lowercase;",
+  capitalize: "text-transform: capitalize;",
+  "tracking-tight": "letter-spacing: 0;",
+  "tracking-normal": "letter-spacing: 0;",
+  "tracking-wide": "letter-spacing: 0.025em;",
+  "tracking-wider": "letter-spacing: 0.05em;",
+  "leading-none": "line-height: 1;",
+  "leading-tight": "line-height: 1.25;",
+  "leading-snug": "line-height: 1.375;",
+  "leading-normal": "line-height: 1.5;",
+  "leading-relaxed": "line-height: 1.625;",
+  "min-h-screen": "min-height: 100vh;",
+  "h-screen": "height: 100vh;",
+  "w-screen": "width: 100vw;",
+  "w-full": "width: 100%;",
+  "h-full": "height: 100%;",
+  "min-w-0": "min-width: 0;",
+  "min-h-0": "min-height: 0;",
+  "min-w-full": "min-width: 100%;",
+  "border-collapse": "border-collapse: collapse;",
+  "border-separate": "border-collapse: separate;",
+  "object-cover": "object-fit: cover;",
+  "object-contain": "object-fit: contain;",
+  "aspect-square": "aspect-ratio: 1 / 1;",
+  "aspect-video": "aspect-ratio: 16 / 9;",
+  "cursor-pointer": "cursor: pointer;",
+  "cursor-default": "cursor: default;",
+  "select-none": "user-select: none;",
+  "pointer-events-none": "pointer-events: none;"
+};
+function he(e) {
+  const t = /* @__PURE__ */ new Set();
+  for (const r of K(e)) {
+    const a = xe(r);
+    a && t.add(a);
+  }
+  return [...t].join(`
+`);
+}
+function K(e) {
+  const t = /* @__PURE__ */ new Set(), r = (a) => {
+    a.split(/\s+/).map((n) => n.trim().replace(/[;,]+$/g, "")).filter(Boolean).filter((n) => !n.includes("\\") && !n.includes('"')).filter(be).forEach((n) => t.add(n));
+  };
+  for (const a of e) {
+    if (!/\.(ts|tsx|js|jsx)$/.test(a.path))
+      continue;
+    const n = /\bclassName\s*=\s*(["'`])([^"'`]+)\1/g;
+    let o;
+    for (; o = n.exec(a.contents); )
+      r(o[2]);
+    const i = /(["'`])([^"'`]*(?:-|:|\[)[^"'`]*)\1/g;
+    let l;
+    for (; l = i.exec(a.contents); )
+      r(l[2]);
+  }
+  return t;
+}
+function be(e) {
+  if (!e || e.includes("${") || e.startsWith("@"))
+    return !1;
+  const t = X(e).base;
+  return t ? e.includes("[") || e.includes(":") || t in J || /^(accent|basis|bg|border|caret|col-span|content|decoration|delay|divide-y|divide-x|divide|duration|ease|fill|font|from|gap|gap-x|gap-y|grid-cols|grid-rows|h|inset|items|justify|leading|m|mb|ml|mr|mt|mx|my|max-h|max-w|min-h|min-w|object|opacity|order|outline|overflow|overscroll|p|pb|pl|pr|pt|px|py|ring|rotate|rounded|row-span|scale|scroll|self|shadow|shrink|size|skew|space-y|space-x|stroke|text|to|top|right|bottom|left|tracking|transition|translate|via|w|whitespace|z)-/.test(t) || /^(tabular-nums|sr-only|not-sr-only|truncate|container|grow|isolate|invisible|visible)$/.test(t) || /^-?(mt|mr|mb|ml|mx|my|m|top|right|bottom|left)-/.test(t) : !1;
+}
+function X(e) {
+  const t = e.split(":");
+  return {
+    variants: t.slice(0, -1),
+    base: t[t.length - 1]
+  };
+}
+function xe(e) {
+  const { variants: t, base: r } = X(e), a = we(r);
+  if (!a)
+    return null;
+  const n = t.map((l) => me[l]).filter(Boolean).join(""), o = `.${Ne(e)}${n}`;
+  let i = a.includes("&") ? a.replace(/&/g, o) : `${o} { ${a} }`;
+  for (const l of t.slice().reverse()) {
+    const s = de[l];
+    s && (i = `@media (min-width: ${s}) { ${i} }`);
+  }
+  return i;
+}
+function we(e) {
+  const t = J[e];
+  if (t)
+    return t;
+  const r = e.startsWith("-"), a = r ? e.slice(1) : e, n = a.match(/^(p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|gap-x|gap-y|space-y|space-x)-(.+)$/);
+  if (n) {
+    const c = _(n[2]);
+    return c ? ve(n[1], r ? `-${c}` : c) : null;
+  }
+  const o = a.match(/^(size|w|h|min-w|max-w|min-h|max-h)-(.+)$/);
+  if (o) {
+    const c = Se(o[2], o[1]);
+    if (!c)
+      return null;
+    const j = {
+      size: "size",
+      w: "width",
+      h: "height",
+      "min-w": "min-width",
+      "max-w": "max-width",
+      "min-h": "min-height",
+      "max-h": "max-height"
+    }[o[1]];
+    return j === "size" ? `width: ${c}; height: ${c};` : `${j}: ${c};`;
+  }
+  const i = a.match(/^grid-cols-(.+)$/);
+  if (i) {
+    const c = I(i[1]);
+    return c ? `grid-template-columns: ${c};` : null;
+  }
+  const l = a.match(/^grid-rows-(.+)$/);
+  if (l) {
+    const c = I(l[1]);
+    return c ? `grid-template-rows: ${c};` : null;
+  }
+  const s = a.match(/^col-span-(\d+)$/);
+  if (s)
+    return `grid-column: span ${s[1]} / span ${s[1]};`;
+  const d = a.match(/^row-span-(\d+)$/);
+  if (d)
+    return `grid-row: span ${d[1]} / span ${d[1]};`;
+  const b = Ce(a);
+  if (b)
+    return b;
+  const S = a.match(/^rounded(?:-(.+))?$/);
+  if (S) {
+    const c = pe[S[1] || "DEFAULT"] || h(S[1] || "");
+    return c ? `border-radius: ${c};` : null;
+  }
+  const H = a.match(/^shadow(?:-(.+))?$/);
+  if (H) {
+    const c = fe[H[1] || "DEFAULT"];
+    return c ? `box-shadow: ${c};` : null;
+  }
+  const $ = ye(a);
+  if ($)
+    return $;
+  const N = a.match(/^text-(.+)$/);
+  if (N && L[N[1]])
+    return L[N[1]];
+  const k = a.match(/^leading-(.+)$/);
+  if (k) {
+    const c = q[k[1]] || h(k[1]);
+    return c ? `line-height: ${c};` : null;
+  }
+  const B = a.match(/^opacity-(\d+)$/);
+  if (B)
+    return `opacity: ${Number(B[1]) / 100};`;
+  const w = a.match(/^z-(.+)$/);
+  if (w)
+    return `z-index: ${w[1] === "auto" ? "auto" : h(w[1]) || w[1]};`;
+  const T = a.match(/^(inset|top|right|bottom|left)-(.+)$/);
+  if (T) {
+    const c = _(T[2]);
+    return c ? `${T[1]}: ${r ? `-${c}` : c};` : null;
+  }
+  return null;
+}
+function ve(e, t) {
+  switch (e) {
+    case "p":
+      return `padding: ${t};`;
+    case "px":
+      return `padding-left: ${t}; padding-right: ${t};`;
+    case "py":
+      return `padding-top: ${t}; padding-bottom: ${t};`;
+    case "pt":
+      return `padding-top: ${t};`;
+    case "pr":
+      return `padding-right: ${t};`;
+    case "pb":
+      return `padding-bottom: ${t};`;
+    case "pl":
+      return `padding-left: ${t};`;
+    case "m":
+      return `margin: ${t};`;
+    case "mx":
+      return `margin-left: ${t}; margin-right: ${t};`;
+    case "my":
+      return `margin-top: ${t}; margin-bottom: ${t};`;
+    case "mt":
+      return `margin-top: ${t};`;
+    case "mr":
+      return `margin-right: ${t};`;
+    case "mb":
+      return `margin-bottom: ${t};`;
+    case "ml":
+      return `margin-left: ${t};`;
+    case "gap":
+      return `gap: ${t};`;
+    case "gap-x":
+      return `column-gap: ${t};`;
+    case "gap-y":
+      return `row-gap: ${t};`;
+    case "space-y":
+      return `& > * + * { margin-top: ${t}; }`;
+    case "space-x":
+      return `& > * + * { margin-left: ${t}; }`;
+    default:
+      return "";
+  }
+}
+function Ce(e) {
+  if (e === "border")
+    return "border-width: 1px; border-style: solid; border-color: #e4e4e7;";
+  if (e === "border-0")
+    return "border-width: 0;";
+  if (e === "border-t")
+    return "border-top-width: 1px; border-top-style: solid; border-top-color: #e4e4e7;";
+  if (e === "border-r")
+    return "border-right-width: 1px; border-right-style: solid; border-right-color: #e4e4e7;";
+  if (e === "border-b")
+    return "border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e4e4e7;";
+  if (e === "border-l")
+    return "border-left-width: 1px; border-left-style: solid; border-left-color: #e4e4e7;";
+  const t = e.match(/^border-(\d+)$/);
+  if (t)
+    return `border-width: ${t[1]}px; border-style: solid;`;
+  if (e === "divide-y")
+    return "& > * + * { border-top-width: 1px; border-top-style: solid; border-color: #e4e4e7; }";
+  if (e === "divide-x")
+    return "& > * + * { border-left-width: 1px; border-left-style: solid; border-color: #e4e4e7; }";
+  const r = g(e, "divide-");
+  if (r)
+    return `& > * + * { border-color: ${r}; }`;
+  const a = g(e, "border-");
+  return a ? `border-color: ${a};` : null;
+}
+function ye(e) {
+  const t = g(e, "bg-");
+  if (t)
+    return `background-color: ${t};`;
+  const r = g(e, "text-");
+  if (r)
+    return `color: ${r};`;
+  const a = g(e, "fill-");
+  if (a)
+    return `fill: ${a};`;
+  const n = g(e, "stroke-");
+  return n ? `stroke: ${n};` : null;
+}
+function g(e, t) {
+  var r;
+  if (!e.startsWith(t))
+    return null;
+  const a = e.slice(t.length), n = h(a);
+  if (n)
+    return n;
+  if (V[a])
+    return V[a];
+  const o = a.split("-"), i = o.pop(), l = o.join("-");
+  return !i || !l ? null : ((r = ge[l]) === null || r === void 0 ? void 0 : r[i]) || null;
+}
+function Se(e, t) {
+  return t === "max-w" && A[e] ? A[e] : e === "auto" ? "auto" : e === "full" ? "100%" : e === "screen" ? t.includes("h") ? "100vh" : "100vw" : e === "min" ? "min-content" : e === "max" ? "max-content" : e === "fit" ? "fit-content" : _(e);
+}
+function _(e) {
+  return q[e] || ue[e] || h(e);
+}
+function I(e) {
+  const t = h(e);
+  if (t)
+    return t;
+  const r = Number(e);
+  return Number.isInteger(r) && r > 0 ? `repeat(${r}, minmax(0, 1fr))` : e === "none" ? "none" : null;
+}
+function h(e) {
+  if (!(e != null && e.startsWith("[")) || !e.endsWith("]"))
+    return null;
+  const t = e.slice(1, -1).replace(/_/g, " ");
+  return /[;{}<>]/.test(t) ? null : t;
+}
+function Ne(e) {
+  return e.replace(/([^a-zA-Z0-9_-])/g, "\\$1");
+}
+const z = `
+* { box-sizing: border-box; }
+html, body, #root { margin: 0; min-width: 320px; min-height: 100%; }
+body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f6f7f8; color: #18181b; }
+button, input, select, textarea { font: inherit; }
+button, select { cursor: pointer; }
+table { border-collapse: collapse; width: 100%; }
+th, td { text-align: inherit; vertical-align: middle; }
+svg { display: block; flex-shrink: 0; }
+.min-h-screen { min-height: 100vh; }
+.bg-zinc-50 { background: #fafafa; }
+.bg-white { background: #ffffff; }
+.bg-zinc-900 { background: #18181b; }
+.bg-blue-50 { background: #eff6ff; }
+.bg-emerald-50 { background: #ecfdf5; }
+.bg-red-50 { background: #fef2f2; }
+.text-zinc-950 { color: #09090b; }
+.text-zinc-900 { color: #18181b; }
+.text-zinc-800 { color: #27272a; }
+.text-zinc-700 { color: #3f3f46; }
+.text-zinc-600 { color: #52525b; }
+.text-zinc-500 { color: #71717a; }
+.text-white { color: #ffffff; }
+.text-blue-700 { color: #1d4ed8; }
+.text-emerald-700 { color: #047857; }
+.text-red-700 { color: #b91c1c; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.ml-auto { margin-left: auto; }
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.grid { display: grid; }
+.hidden { display: none; }
+.block { display: block; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.space-y-1 > * + * { margin-top: 0.25rem; }
+.space-y-2 > * + * { margin-top: 0.5rem; }
+.space-y-3 > * + * { margin-top: 0.75rem; }
+.max-w-3xl { max-width: 48rem; }
+.max-w-4xl { max-width: 56rem; }
+.max-w-5xl { max-width: 64rem; }
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.size-4 { width: 1rem; height: 1rem; }
+.size-5 { width: 1.25rem; height: 1.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.pt-2 { padding-top: 0.5rem; }
+.pb-2 { padding-bottom: 0.5rem; }
+.rounded { border-radius: 0.25rem; }
+.rounded-md { border-radius: 0.375rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.border { border-width: 1px; border-style: solid; border-color: #e4e4e7; }
+.border-zinc-100 { border-color: #f4f4f5; }
+.border-zinc-200 { border-color: #e4e4e7; }
+.border-blue-100 { border-color: #dbeafe; }
+.shadow-sm { box-shadow: 0 1px 2px rgba(24, 24, 27, 0.06); }
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+.text-2xl { font-size: 1.5rem; line-height: 2rem; }
+.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.uppercase { text-transform: uppercase; }
+.tracking-tight { letter-spacing: 0; }
+.leading-5 { line-height: 1.25rem; }
+.leading-6 { line-height: 1.5rem; }
+.overflow-hidden { overflow: hidden; }
+.overflow-auto { overflow: auto; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+@media (min-width: 640px) {
+  .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .sm\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+`;
+function ke({ css: e, diagnostics: t, entryPath: r, moduleSources: a }) {
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>${Y(e)}</style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      window.__SEMAPHOR_SANDBOX__ = {
+        entryPath: ${JSON.stringify(r)},
+        moduleSources: ${O(a)},
+        diagnostics: ${O(t)}
+      };
+    <\/script>
+    <script>${Re()}<\/script>
+  </body>
+</html>`;
+}
+function E(e) {
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>${Y(z)}</style>
+  </head>
+  <body>
+    <main class="min-h-screen bg-zinc-50 p-6 text-zinc-950">
+      <section class="mx-auto max-w-4xl rounded-lg border border-zinc-200 bg-white p-4 shadow-sm">
+        <h1 class="text-lg font-semibold">Browser Sandbox compile failed</h1>
+        <pre class="mt-3 overflow-auto rounded-md bg-zinc-900 p-3 text-xs text-white">${Te(e.join(`
+`))}</pre>
+      </section>
+    </main>
+  </body>
+</html>`;
+}
+function O(e) {
+  return JSON.stringify(e).replace(/</g, "\\u003c");
+}
+function Y(e) {
+  return e.replace(/<\/style/gi, "<\\/style");
+}
+function Te(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function Re() {
+  return `
+(() => {
+  const sandbox = window.__SEMAPHOR_SANDBOX__;
+  const moduleSources = sandbox.moduleSources || {};
+  const moduleCache = {};
+  const datasets = createDatasets();
+  const vendor = window.parent?.__SEMAPHOR_BROWSER_SANDBOX_VENDOR__;
+  if (!vendor?.React || !vendor?.ReactDOMClient) {
+    throw new Error("Browser Sandbox vendor runtime is not available from the app-builder host.");
+  }
+  const React = vendor.React;
+  const ReactDOMClient = vendor.ReactDOMClient;
+  const recharts = vendor.Recharts || createRechartsFallback(React);
+  const jsxRuntime = {
+    Fragment: React.Fragment,
+    jsx(type, props, key) {
+      return React.createElement(type, key === undefined ? props : { ...(props || {}), key });
+    },
+    jsxs(type, props, key) {
+      return React.createElement(type, key === undefined ? props : { ...(props || {}), key });
+    },
+  };
+  const reactPackage = { ...React, default: React, __esModule: true };
+  const reactDomClientPackage = { ...ReactDOMClient, default: ReactDOMClient, __esModule: true };
+
+  function createRechartsFallback(React) {
+    function ChartShell({ children, className = "", ...props }) {
+      return React.createElement(
+        "div",
+        {
+          ...props,
+          className: ["flex min-h-[180px] items-center justify-center rounded-md border border-dashed border-zinc-200 bg-zinc-50 text-xs text-zinc-500", className]
+            .filter(Boolean)
+            .join(" "),
+        },
+        React.createElement("div", { className: "space-y-2 text-center" }, [
+          React.createElement("div", { key: "label", className: "font-medium text-zinc-700" }, "Chart preview"),
+          React.createElement("div", { key: "meta" }, "Recharts is not bundled in this host; generated chart code is still import-valid."),
+          React.createElement("div", { key: "children", className: "hidden" }, children),
+        ]),
+      );
+    }
+
+    function NullPart({ children }) {
+      return React.createElement(React.Fragment, null, children || null);
+    }
+
+    return {
+      Area: NullPart,
+      AreaChart: ChartShell,
+      Bar: NullPart,
+      BarChart: ChartShell,
+      CartesianGrid: NullPart,
+      Cell: NullPart,
+      Legend: NullPart,
+      Line: NullPart,
+      LineChart: ChartShell,
+      Pie: NullPart,
+      PieChart: ChartShell,
+      ResponsiveContainer: ({ children, className = "", ...props }) =>
+        React.createElement("div", { ...props, className: ["h-full w-full", className].filter(Boolean).join(" ") }, children),
+      Tooltip: NullPart,
+      XAxis: NullPart,
+      YAxis: NullPart,
+    };
+  }
+
+  function createIcon(name) {
+    return function Icon(props = {}) {
+      return React.createElement(
+        "span",
+        {
+          ...props,
+          className: ["inline-flex size-5 items-center justify-center", props.className]
+            .filter(Boolean)
+            .join(" "),
+          title: props.title || name,
+        },
+        "◇",
+      );
+    };
+  }
+
+  const lucideReact = new Proxy({}, { get: (_target, key) => createIcon(String(key)) });
+
+  function useSemaphorRuntime() {
+    return { token: "browser-sandbox", apiBaseUrl: "/api" };
+  }
+
+  function SemaphorDataAppProvider({ children }) {
+    return children;
+  }
+
+  function useSemaphorInput(config) {
+    const [value, setValue] = React.useState(config.value ?? config.defaultValue);
+    const options = (config.options || []).map((option) =>
+      typeof option === "object" ? option : { value: option, label: String(option) },
+    );
+    const input = {
+      id: config.id,
+      kind: config.kind,
+      value,
+      setValue(nextValue) {
+        config.onValueChange?.(nextValue);
+        setValue(nextValue);
+      },
+      options,
+      isActive: hasInputValue(value),
+    };
+    if (config.kind === "filter") {
+      input.filter = {
+        field: config.field,
+        operator: config.operator || "=",
+        value,
+      };
+    } else {
+      input.control = {
+        role: config.role,
+        value,
+      };
+    }
+    return input;
+  }
+
+  function useSemaphorInputOptions(config) {
+    const rows = readDataset(config.dataset);
+    const values = [...new Set(rows.map((row) => row[config.field]).filter((value) => typeof value === "string" || typeof value === "number"))];
+    return {
+      id: config.id,
+      options: values.slice(0, config.limit || 50).map((value) => ({ value, label: String(value) })),
+      isLoading: false,
+      error: null,
+    };
+  }
+
+  function useSemaphorMetric(config) {
+    useSemaphorRuntime();
+    const rows = applyInputs(readDataset(config.dataset), config.inputs);
+    const value = sumField(rows, config.metric);
+    const comparisonValue =
+      config.comparison === "target"
+        ? config.targetValue ?? null
+        : config.comparison && config.comparison !== "none"
+          ? Math.round(value * 0.91)
+          : null;
+    const delta = comparisonValue === null ? null : value - comparisonValue;
+    const deltaPercent = comparisonValue && comparisonValue !== 0 ? delta / comparisonValue : null;
+    return {
+      id: config.id,
+      value,
+      comparisonValue,
+      delta,
+      deltaPercent,
+      trendline: buildTrendline(rows, config.dateField, config.metric),
+      isLoading: false,
+      error: null,
+    };
+  }
+
+  function useSemaphorRecords(config) {
+    useSemaphorRuntime();
+    const rows = applyInputs(readDataset(config.dataset), config.inputs);
+    const records = shapeRecords({
+      rows,
+      measures: config.measures || [],
+      dimensions: config.dimensions || [],
+      inputs: config.inputs || [],
+      limit: config.limit,
+    });
+    return {
+      id: config.id,
+      records,
+      isLoading: false,
+      error: null,
+      metadata: {
+        dataset: config.dataset,
+        rowCount: records.length,
+        source: "fixture",
+      },
+    };
+  }
+
+  const semaphorSdk = {
+    SemaphorDataAppProvider,
+    useSemaphorRuntime,
+    useSemaphorInput,
+    useSemaphorInputOptions,
+    useSemaphorMetric,
+    useSemaphorRecords,
+  };
+
+  function cx(...values) {
+    const classes = [];
+    const visit = (value) => {
+      if (!value) return;
+      if (typeof value === "string" || typeof value === "number") {
+        classes.push(String(value));
+        return;
+      }
+      if (Array.isArray(value)) {
+        value.forEach(visit);
+        return;
+      }
+      if (typeof value === "object") {
+        Object.entries(value).forEach(([key, enabled]) => {
+          if (enabled) classes.push(key);
+        });
+      }
+    };
+    values.forEach(visit);
+    return classes.join(" ");
+  }
+
+  const packages = {
+    react: reactPackage,
+    "react/jsx-runtime": jsxRuntime,
+    "react-dom/client": reactDomClientPackage,
+    "lucide-react": lucideReact,
+    recharts,
+    "@semaphor/data-app-sdk": semaphorSdk,
+    "react-semaphor/data-app-sdk": semaphorSdk,
+    clsx: { clsx: cx, default: cx },
+    "tailwind-merge": { twMerge: cx },
+    "class-variance-authority": { cva: () => () => "" },
+  };
+
+  function executeModule(moduleId) {
+    if (moduleCache[moduleId]) return moduleCache[moduleId].exports;
+    const code = moduleSources[moduleId];
+    if (!code) throw new Error("Missing sandbox module: " + moduleId);
+    const module = { exports: {} };
+    moduleCache[moduleId] = module;
+    const localRequire = (specifier) => requireFrom(moduleId, specifier);
+    new Function("require", "exports", "module", code)(
+      localRequire,
+      module.exports,
+      module,
+    );
+    return module.exports;
+  }
+
+  function requireFrom(importerPath, specifier) {
+    if (specifier.endsWith(".css")) return {};
+    if (packages[specifier]) return packages[specifier];
+    const resolved = resolveSpecifier(importerPath, specifier);
+    return executeModule(resolved);
+  }
+
+  function resolveSpecifier(importerPath, specifier) {
+    const candidates = [];
+    const addCandidates = (basePath) => {
+      candidates.push(basePath);
+      [".tsx", ".ts", ".jsx", ".js"].forEach((extension) => candidates.push(basePath + extension));
+      ["index.tsx", "index.ts", "index.jsx", "index.js"].forEach((indexFile) => candidates.push(basePath + "/" + indexFile));
+    };
+    if (specifier.startsWith("@/")) {
+      addCandidates("src/" + specifier.slice(2));
+    } else if (specifier.startsWith(".")) {
+      const importerParts = importerPath.split("/");
+      importerParts.pop();
+      const parts = [...importerParts, ...specifier.split("/")];
+      const resolvedParts = [];
+      for (const part of parts) {
+        if (!part || part === ".") continue;
+        if (part === "..") resolvedParts.pop();
+        else resolvedParts.push(part);
+      }
+      addCandidates(resolvedParts.join("/"));
+    } else {
+      throw new Error("Unsupported package in Browser Sandbox runtime: " + specifier);
+    }
+    const found = candidates.find((candidate) => moduleSources[candidate]);
+    if (!found) throw new Error("Cannot resolve " + specifier + " from " + importerPath);
+    return found;
+  }
+
+  function readDataset(dataset) {
+    return datasets[dataset] || datasets.orders;
+  }
+
+  function hasInputValue(value) {
+    if (value === undefined || value === null) return false;
+    if (Array.isArray(value)) return value.length > 0;
+    if (typeof value === "string") return value.trim().length > 0;
+    return true;
+  }
+
+  function applyInputs(rows, inputs) {
+    return rows.filter((row) =>
+      (inputs || []).every((input) => {
+        if (input.kind !== "filter" || !input.filter || !hasInputValue(input.value)) return true;
+        const candidate = row[input.filter.field];
+        const value = input.value;
+        switch (input.filter.operator) {
+          case "in":
+            return Array.isArray(value) ? value.includes(candidate) : candidate === value;
+          case "not in":
+            return Array.isArray(value) ? !value.includes(candidate) : candidate !== value;
+          case "!=":
+            return candidate !== value;
+          case ">":
+            return Number(candidate) > Number(value);
+          case ">=":
+            return Number(candidate) >= Number(value);
+          case "<":
+            return Number(candidate) < Number(value);
+          case "<=":
+            return Number(candidate) <= Number(value);
+          case "between":
+            return Array.isArray(value) && value.length >= 2
+              ? String(candidate) >= String(value[0]) && String(candidate) <= String(value[1])
+              : true;
+          case "=":
+          default:
+            return candidate === value;
+        }
+      }),
+    );
+  }
+
+  function sumField(rows, field) {
+    return rows.reduce((sum, row) => sum + Number(row[field] || 0), 0);
+  }
+
+  function buildTrendline(rows, dateField, metric) {
+    if (!dateField) return [];
+    return groupRows(rows, [dateField], [metric], []).map((row) => ({
+      date: String(row[dateField] || ""),
+      value: Number(row[metric] || 0),
+    }));
+  }
+
+  function shapeRecords(params) {
+    const grain = params.inputs.find((input) => input.kind === "control" && input.control?.role === "grain")?.value;
+    const dimensions = params.dimensions.map((dimension) =>
+      grain && /date/i.test(dimension) ? dimension + ":" + grain : dimension,
+    );
+    const records =
+      params.measures.length > 0 && dimensions.length > 0
+        ? groupRows(params.rows, dimensions, params.measures, params.inputs)
+        : params.rows;
+    return records.slice(0, params.limit || 500);
+  }
+
+  function groupRows(rows, dimensions, measures, inputs) {
+    const groups = new Map();
+    for (const row of rows) {
+      const dimensionValues = dimensions.map((dimension) => readDimensionValue(row, dimension, inputs));
+      const key = JSON.stringify(dimensionValues);
+      const existing =
+        groups.get(key) ||
+        Object.fromEntries(dimensions.map((dimension, index) => [cleanDimensionName(dimension), dimensionValues[index]]));
+      for (const measure of measures) {
+        existing[measure] = Number(existing[measure] || 0) + Number(row[measure] || 0);
+      }
+      groups.set(key, existing);
+    }
+    return [...groups.values()];
+  }
+
+  function readDimensionValue(row, dimension) {
+    const [field, grain] = dimension.split(":");
+    const value = row[field];
+    if (!grain || typeof value !== "string") return value;
+    if (grain === "month") return value.slice(0, 7);
+    if (grain === "year") return value.slice(0, 4);
+    return value;
+  }
+
+  function cleanDimensionName(dimension) {
+    return dimension.split(":")[0];
+  }
+
+  function createDatasets() {
+    const orders = [
+      { order_id: "ord_1001", order_date: "2026-01-08", customer_segment: "Technology", region: "West", category: "Software", revenue: 128400, gross_margin: 74200, orders: 164, satisfaction_score: 91 },
+      { order_id: "ord_1002", order_date: "2026-01-19", customer_segment: "Healthcare", region: "Northeast", category: "Services", revenue: 84600, gross_margin: 41800, orders: 93, satisfaction_score: 87 },
+      { order_id: "ord_1003", order_date: "2026-02-04", customer_segment: "Technology", region: "West", category: "Hardware", revenue: 151200, gross_margin: 81600, orders: 188, satisfaction_score: 93 },
+      { order_id: "ord_1004", order_date: "2026-02-21", customer_segment: "Retail", region: "South", category: "Software", revenue: 97300, gross_margin: 52200, orders: 121, satisfaction_score: 82 },
+      { order_id: "ord_1005", order_date: "2026-03-03", customer_segment: "Technology", region: "Central", category: "Services", revenue: 173900, gross_margin: 93100, orders: 206, satisfaction_score: 94 },
+      { order_id: "ord_1006", order_date: "2026-03-14", customer_segment: "Healthcare", region: "West", category: "Software", revenue: 112700, gross_margin: 65800, orders: 138, satisfaction_score: 89 },
+      { order_id: "ord_1007", order_date: "2026-04-02", customer_segment: "Retail", region: "Northeast", category: "Hardware", revenue: 134500, gross_margin: 62300, orders: 149, satisfaction_score: 84 },
+      { order_id: "ord_1008", order_date: "2026-04-20", customer_segment: "Technology", region: "South", category: "Software", revenue: 196800, gross_margin: 111900, orders: 232, satisfaction_score: 95 },
+      { order_id: "ord_1009", order_date: "2026-05-07", customer_segment: "Healthcare", region: "Central", category: "Services", revenue: 126300, gross_margin: 69100, orders: 157, satisfaction_score: 90 },
+      { order_id: "ord_1010", order_date: "2026-05-24", customer_segment: "Technology", region: "West", category: "Software", revenue: 218600, gross_margin: 128300, orders: 251, satisfaction_score: 96 },
+    ];
+    const customers = [
+      { customer_id: "cus_001", customer_name: "Northstar Systems", customer_segment: "Technology", region: "West", health_score: 94, arr: 420000, open_tickets: 2, last_active_days: 1 },
+      { customer_id: "cus_002", customer_name: "Meridian Health", customer_segment: "Healthcare", region: "Northeast", health_score: 86, arr: 280000, open_tickets: 4, last_active_days: 3 },
+      { customer_id: "cus_003", customer_name: "Atlas Retail Group", customer_segment: "Retail", region: "South", health_score: 72, arr: 190000, open_tickets: 9, last_active_days: 8 },
+      { customer_id: "cus_004", customer_name: "Helio Cloud", customer_segment: "Technology", region: "Central", health_score: 88, arr: 335000, open_tickets: 3, last_active_days: 2 },
+      { customer_id: "cus_005", customer_name: "Cedar Care", customer_segment: "Healthcare", region: "West", health_score: 81, arr: 245000, open_tickets: 5, last_active_days: 4 },
+      { customer_id: "cus_006", customer_name: "Urban Outfit Co", customer_segment: "Retail", region: "Northeast", health_score: 67, arr: 160000, open_tickets: 12, last_active_days: 11 },
+    ];
+    return { orders, customers };
+  }
+
+  function showRuntimeError(error) {
+    const root = document.getElementById("root");
+    root.innerHTML = "";
+    const main = document.createElement("main");
+    main.className = "min-h-screen bg-zinc-50 p-6 text-zinc-950";
+    main.innerHTML = '<section class="mx-auto max-w-4xl rounded-lg border border-zinc-200 bg-white p-4 shadow-sm"><h1 class="text-lg font-semibold">Browser Sandbox runtime failed</h1><pre class="mt-3 overflow-auto rounded-md bg-zinc-900 p-3 text-xs text-white"></pre></section>';
+    main.querySelector("pre").textContent = error?.stack || error?.message || String(error);
+    root.appendChild(main);
+  }
+
+  try {
+    executeModule(sandbox.entryPath);
+  } catch (error) {
+    showRuntimeError(error);
+  }
+})();
+`;
+}
+function Ve() {
+  const e = f(), t = e.find((a) => a.path === "src/data-app/index.tsx"), r = ((t == null ? void 0 : t.contents) || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f6f7f8; color: #18181b; }
+      main { min-height: 100vh; padding: 24px; box-sizing: border-box; }
+      .shell { max-width: 980px; margin: 0 auto; }
+      .badge { display: inline-flex; align-items: center; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 600; }
+      .panel { margin-top: 16px; border: 1px solid #e4e4e7; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04); }
+      .panel header { padding: 14px 16px; border-bottom: 1px solid #e4e4e7; }
+      .panel h1 { margin: 0; font-size: 16px; }
+      .panel p { margin: 6px 0 0; color: #71717a; font-size: 13px; line-height: 1.5; }
+      pre { margin: 0; max-height: 520px; overflow: auto; padding: 16px; background: #09090b; color: #e4e4e7; font-size: 12px; line-height: 1.6; }
+      .files { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
+      .file { border-radius: 5px; background: #f4f4f5; color: #52525b; padding: 3px 7px; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="shell">
+        <span class="badge">Browser Sandbox alpha</span>
+        <section class="panel">
+          <header>
+            <h1>Virtual app workspace</h1>
+            <p>The direct browser runtime is storing generated files in localStorage and validating write/import policy. The compiler worker and hot React preview are the next layer behind this mode.</p>
+            <div class="files">
+              ${e.map((a) => `<span class="file">${a.path}</span>`).join("")}
+            </div>
+          </header>
+          <pre>${r}</pre>
+        </section>
+      </div>
+    </main>
+  </body>
+</html>`;
+}
+export {
+  je as applyBrowserSandboxRevision,
+  Ve as browserSandboxPreviewHtml,
+  Le as compileBrowserSandboxPreviewHtml,
+  Be as createBrowserSandboxImportedTemplateRevision,
+  Pe as createBrowserSandboxSmokeRevision,
+  $e as createBrowserSandboxTemplateRevision,
+  He as listBrowserSandboxFiles,
+  _e as listBrowserSandboxTemplates,
+  De as readBrowserSandboxFiles,
+  Me as readBrowserSandboxWorkspaceContext,
+  ze as resetBrowserSandbox,
+  Ae as validateBrowserSandboxPublish
+};