react-semaphor 0.1.326 → 0.1.328

package/dist/chunks/index-1JWDPCun.js

@@ -0,0 +1,1935 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O="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(O);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(O,JSON.stringify(e))}function q(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 te(){return C.map(e=>({id:e.id,name:e.name,description:e.description,fileCount:e.files.length}))}function re(e=M){D(p(W(e).files))}function ae(){return ee(f())}function ne(e){const t=q();return e.map(r=>({path:r,contents:t.get(m(r))||""}))}function oe(){return f().map(e=>({path:m(e.path),size:e.contents.length})).sort((e,t)=>e.path.localeCompare(t.path))}function se(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 ie({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 le(e){const t=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 ce(e){const t=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 de(e){if(e.startsWith("@")){const[t,r]=e.split("/");return r?`${t}/${r}`:e}return e.split("/")[0]}function me(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 ue(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=new Set([...t.map(s=>m(s.path)),...e.map(s=>m(s.path))]),i=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 ce(s.contents)){const b=de(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("@/")){me(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 pe(e){const t=Date.now(),r=le(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=ue(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?new Map:q(),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 fe(){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 ge(){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 he(){const e=f(),t=[];try{const r=await Promise.resolve().then(()=>require("./typescript-Cmizj1hi.js")).then(i=>i.typescript),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(be(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 xe(e);return{html:je({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 be(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 xe(e){const t=e.filter(r=>r.path.endsWith(".css")).map(r=>r.contents).join(`
+`);try{const{compile:r}=await Promise.resolve().then(()=>require("./lib-Ce3zosXY.js")),a=we(t),n=await r(a,{from:void 0,loadStylesheet:ve});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} */`,Re(e),n].join(`
+`),mode:"fallback",warnings:[`Tailwind compiler was unavailable, so Browser Sandbox used fallback utility CSS. ${a}`]}}}function we(e){return/@import\s+["']tailwindcss(?:\/[^"']*)?["'];?/.test(e)||/@tailwind\s+/.test(e)?e:`@import "tailwindcss";
+${e}`}const j=new Map;async function ve(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=j.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(),j.set(a,n)}return{base:t||new URL("/browser-sandbox/tailwind/",window.location.origin).href,content:n,path:a}}const Ce={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},ye={hover:":hover",focus:":focus",active:":active",disabled:":disabled"},G={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"},Se={"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;"},Ne={none:"0",sm:"0.125rem",DEFAULT:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem","3xl":"1.5rem",full:"9999px"},ke={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"},Te={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 Re(e){const t=new Set;for(const r of K(e)){const a=ze(r);a&&t.add(a)}return[...t].join(`
+`)}function K(e){const t=new Set,r=a=>{a.split(/\s+/).map(n=>n.trim().replace(/[;,]+$/g,"")).filter(Boolean).filter(n=>!n.includes("\\")&&!n.includes('"')).filter(_e).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 _e(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 ze(e){const{variants:t,base:r}=X(e),a=Me(r);if(!a)return null;const n=t.map(l=>ye[l]).filter(Boolean).join(""),o=`.${Pe(e)}${n}`;let i=a.includes("&")?a.replace(/&/g,o):`${o} { ${a} }`;for(const l of t.slice().reverse()){const s=Ce[l];s&&(i=`@media (min-width: ${s}) { ${i} }`)}return i}function Me(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?De(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=$e(o[2],o[1]);if(!c)return null;const P={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 P==="size"?`width: ${c}; height: ${c};`:`${P}: ${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=Be(a);if(b)return b;const S=a.match(/^rounded(?:-(.+))?$/);if(S){const c=Ne[S[1]||"DEFAULT"]||h(S[1]||"");return c?`border-radius: ${c};`:null}const B=a.match(/^shadow(?:-(.+))?$/);if(B){const c=ke[B[1]||"DEFAULT"];return c?`box-shadow: ${c};`:null}const H=He(a);if(H)return H;const N=a.match(/^text-(.+)$/);if(N&&L[N[1]])return L[N[1]];const k=a.match(/^leading-(.+)$/);if(k){const c=G[k[1]]||h(k[1]);return c?`line-height: ${c};`:null}const $=a.match(/^opacity-(\d+)$/);if($)return`opacity: ${Number($[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 De(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 Be(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 He(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=Te[l])===null||r===void 0?void 0:r[i])||null}function $e(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 G[e]||Se[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 Pe(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 je({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: ${F(a)},
+        diagnostics: ${F(t)}
+      };
+    <\/script>
+    <script>${Le()}<\/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">${Ae(e.join(`
+`))}</pre>
+      </section>
+    </main>
+  </body>
+</html>`}function F(e){return JSON.stringify(e).replace(/</g,"\\u003c")}function Y(e){return e.replace(/<\/style/gi,"<\\/style")}function Ae(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function Le(){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>`}exports.applyBrowserSandboxRevision=pe;exports.browserSandboxPreviewHtml=Ve;exports.compileBrowserSandboxPreviewHtml=he;exports.createBrowserSandboxImportedTemplateRevision=ie;exports.createBrowserSandboxSmokeRevision=fe;exports.createBrowserSandboxTemplateRevision=se;exports.listBrowserSandboxFiles=oe;exports.listBrowserSandboxTemplates=te;exports.readBrowserSandboxFiles=ne;exports.readBrowserSandboxWorkspaceContext=ae;exports.resetBrowserSandbox=re;exports.validateBrowserSandboxPublish=ge;