@pixel-point/toolcraft 0.0.2

package/templates/starter/src/app/starter-performance.ts

@@ -0,0 +1,12 @@
+import {
+  defineToolcraftPerformance,
+  type ToolcraftPerformanceConfig,
+} from "@repo/toolcraft-runtime";
+
+export const starterPerformance: ToolcraftPerformanceConfig = defineToolcraftPerformance({
+  rendererStrategy: "none",
+  rendererWorkload: "none",
+  scenarios: [],
+  usesCustomRenderer: false,
+  workloadTargets: [],
+});

package/templates/starter/src/app/starter-schema.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+
+import { starterPerformance } from "./starter-performance";
+import { starterSchema } from "./starter-schema";
+
+describe("starterSchema", () => {
+  it("publishes the base Toolcraft template app contract for AI assembly", () => {
+    expect(starterSchema.canvas.draggable).toBe(true);
+    expect(starterSchema.canvas.enabled).toBe(true);
+    expect(starterSchema.canvas.sizing).toEqual({ mode: "intrinsic-media" });
+    expect(starterSchema.canvas.upload).toBe(true);
+    expect(starterSchema.panels.controls).toBeUndefined();
+    expect(starterSchema.panels.layers).toBeUndefined();
+    expect(starterSchema.panels.timeline).toBeUndefined();
+    expect(starterSchema.toolbar).toEqual({
+      history: true,
+      radar: true,
+      theme: true,
+      zoom: true,
+    });
+    expect(starterSchema.assembly.components).toEqual([
+      "canvas",
+      "toolbar",
+    ]);
+    expect(starterSchema.assembly.capabilities).toEqual(
+      expect.arrayContaining([
+        "canvas.draggable",
+        "canvas.upload",
+        "toolbar.history",
+        "toolbar.radar",
+        "toolbar.theme",
+        "toolbar.zoom",
+      ]),
+    );
+    expect(starterSchema.assembly.capabilities).not.toContain("controls.defaults");
+    expect(starterSchema.assembly.capabilities).not.toContain("timeline.playback");
+    expect(starterSchema.assembly.capabilities).not.toContain("timeline.keyframes");
+    expect(starterSchema.assembly.commands).toEqual(
+      expect.arrayContaining([
+        "canvas.center",
+        "canvas.setViewport",
+        "canvas.zoomIn",
+        "history.undo",
+        "media.delete",
+        "media.import",
+      ]),
+    );
+    expect(starterSchema.assembly.commands).not.toContain("controls.reset");
+    expect(starterSchema.assembly.commands).not.toContain("controls.setValue");
+    expect(starterSchema.assembly.commands).not.toContain("timeline.setCurrentTime");
+  });
+
+  it("starts without product-specific panels or controls", () => {
+    expect(starterSchema.panels.controls).toBeUndefined();
+    expect(starterSchema.panels.layers).toBeUndefined();
+    expect(starterSchema.panels.timeline).toBeUndefined();
+  });
+
+  it("does not imply timeline behavior before a product needs it", () => {
+    expect(starterSchema.assembly.capabilities).not.toContain("timeline.playback");
+    expect(starterSchema.assembly.capabilities).not.toContain("timeline.keyframes");
+    expect(starterSchema.assembly.commands).not.toContain("timeline.toggleControlKeyframes");
+    expect(starterSchema.assembly.commands).not.toContain("timeline.moveKeyframe");
+  });
+
+  it("keeps starter performance empty until the generated product adds controls", () => {
+    expect(starterPerformance.scenarios).toEqual([]);
+    expect(starterPerformance.workloadTargets).toEqual([]);
+  });
+});

package/templates/starter/src/app/starter-schema.ts

@@ -0,0 +1,15 @@
+import { defineToolcraft } from "@repo/toolcraft-runtime";
+
+export const starterSchema = defineToolcraft({
+  canvas: {
+    enabled: true,
+    sizing: { mode: "intrinsic-media" },
+    upload: true,
+  },
+  panels: {},
+  toolbar: {
+    history: true,
+    radar: true,
+    zoom: true,
+  },
+});

package/templates/starter/src/main.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { RouterProvider } from "@tanstack/react-router";
+
+import { router } from "./router";
+import "./styles.css";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Root element #root was not found.");
+}
+
+createRoot(rootElement).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);

package/templates/starter/src/router.tsx

@@ -0,0 +1,16 @@
+import { createRouter } from "@tanstack/react-router";
+
+import { routeTree } from "./routes/root";
+
+export const router = createRouter({
+  defaultPreload: "intent",
+  defaultPreloadStaleTime: 0,
+  routeTree,
+  scrollRestoration: true,
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}

package/templates/starter/src/routes/index.tsx

@@ -0,0 +1,7 @@
+import { ToolcraftApp } from "@repo/toolcraft-runtime/react";
+
+import { starterSchema } from "../app/starter-schema";
+
+export function StarterHome(): React.JSX.Element {
+  return <ToolcraftApp className="h-dvh min-h-dvh" schema={starterSchema} />;
+}

package/templates/starter/src/routes/root.tsx

@@ -0,0 +1,19 @@
+import { Outlet, createRootRoute, createRoute } from "@tanstack/react-router";
+
+import { StarterHome } from "./index";
+
+function RootLayout(): React.JSX.Element {
+  return <Outlet />;
+}
+
+const rootRoute = createRootRoute({
+  component: RootLayout,
+});
+
+const indexRoute = createRoute({
+  component: StarterHome,
+  getParentRoute: () => rootRoute,
+  path: "/",
+});
+
+export const routeTree = rootRoute.addChildren([indexRoute]);

package/templates/starter/src/styles.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+@source ".";
+@source "../../packages/ui/src";
+@source "../../packages/toolcraft-runtime/src";
+@import "tw-animate-css";
+@import "@fontsource-variable/inter";
+@import "@repo/ui/styles.css";
+@import "@repo/toolcraft-runtime/styles.css";
+
+@theme {
+  --spacing-field-control: 0.3125rem;
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 0.875rem;
+  --text-xs-plus: 0.8125rem;
+  --text-xs-plus--line-height: 1.125rem;
+  --font-sans: "Inter Variable", sans-serif;
+  --font-mono:
+    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant focus-visible (&:is([data-focus-visible-mode="keyboard"] *):focus-visible);
+
+:root {
+  --background: oklch(0 0 0);
+  --foreground: oklch(0.977 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --link: #70b0fa;
+  --primary: oklch(0.546 0.215 262.88);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.249 0.07 263.47);
+  --secondary-foreground: oklch(0.977 0 0);
+  --muted: #262626;
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: #0c8ce9;
+  --accent-foreground: oklch(0.985 0 0);
+  --inspect: #9149f5;
+  --attention: #ea733a;
+  --attention-foreground: oklch(0.145 0 0);
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: var(--foreground);
+  --border: oklch(0.311 0.013 279.19);
+  --input: oklch(0.311 0.013 279.19);
+  --ring: oklch(0.556 0 0);
+  --radius: 0.375rem;
+  --button-radius-xs: 0.125rem;
+  --button-radius-sm: 0.25rem;
+  --button-radius-md: 0.375rem;
+  --button-radius-lg: 0.5rem;
+  color-scheme: dark;
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+    box-sizing: border-box;
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+
+  html {
+    font-family: var(--font-sans);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  height: 100%;
+  min-height: 100%;
+}
+
+#root {
+  overflow: clip;
+}
+
+input,
+button {
+  font-family: inherit;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklab, var(--foreground) 10%, transparent) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+*::-webkit-scrollbar-track,
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  min-height: 2.75rem;
+  border: 0 solid transparent;
+  border-radius: 999px;
+  background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
+  background-clip: padding-box;
+}

package/templates/starter/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../packages/typescript-config/vite-react.json",
+  "compilerOptions": {
+    "types": ["vite/client", "node"],
+    "paths": {
+      "@/*": ["./src/*"],
+      "#/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/starter/vite.config.ts

@@ -0,0 +1,13 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});

package/templates/ui/components/composites/accordion.tsx

@@ -0,0 +1,73 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+
+import { cn } from "../../lib/utils";
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col overflow-hidden rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn(
+        "not-last:border-b not-last:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 cursor-pointer items-start justify-between gap-6 border border-transparent py-2 text-left text-base/relaxed font-medium transition-all outline-none hover:no-underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-[color:var(--muted-foreground)]",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <CaretDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <CaretUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-xs-plus/relaxed text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-[color:var(--foreground)] [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/templates/ui/components/composites/alert-dialog.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+
+import {
+  PortalLayerContainerProvider,
+  type PortalLayerContainer,
+  usePortalLayerContainer,
+} from "../primitives";
+import { cn } from "../../lib/utils";
+import { Button } from "../primitives";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({
+  children,
+  container,
+  ...props
+}: AlertDialogPrimitive.Portal.Props): React.JSX.Element {
+  const resolvedContainer = usePortalLayerContainer(container);
+  const portalNodeRef = React.useRef<HTMLDivElement | null>(null);
+
+  return (
+    <AlertDialogPrimitive.Portal
+      data-slot="alert-dialog-portal"
+      container={resolvedContainer}
+      ref={portalNodeRef}
+      {...props}
+    >
+      <PortalLayerContainerProvider container={portalNodeRef}>
+        {children}
+      </PortalLayerContainerProvider>
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/72 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  portalContainer,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  portalContainer?: PortalLayerContainer;
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal container={portalContainer}>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "floating-popup-surface group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl border p-5 popup-text-xs-plus text-[color:var(--popover-foreground)] duration-100 outline-none data-[size=default]:max-w-sm data-[size=sm]:max-w-72 data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "group/alert-dialog-header grid justify-items-center gap-x-3 gap-y-2 text-center sm:justify-items-start sm:text-left has-[>[data-slot=alert-dialog-media]]:grid-cols-[auto_1fr] has-[>[data-slot=alert-dialog-media]]:items-start has-[>[data-slot=alert-dialog-media]]:justify-items-start has-[>[data-slot=alert-dialog-media]]:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "mt-1 flex flex-col-reverse gap-2 border-t border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] pt-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 group-data-[size=sm]/alert-dialog-content:[&>[data-slot=alert-dialog-action]]:w-full group-data-[size=sm]/alert-dialog-content:[&>[data-slot=alert-dialog-cancel]]:w-full sm:flex sm:justify-end sm:[&>[data-slot=alert-dialog-action]]:w-auto sm:[&>[data-slot=alert-dialog-cancel]]:w-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "inline-flex size-10 items-center justify-center rounded-full border border-[color:color-mix(in_oklab,var(--border)_50%,transparent)] bg-[color:color-mix(in_oklab,var(--muted)_60%,transparent)] text-[color:var(--foreground)] shadow-xs group-has-[>[data-slot=alert-dialog-media]]/alert-dialog-header:row-span-2 *:[svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "popup-text-xs-plus leading-tight font-semibold tracking-tight group-has-[>[data-slot=alert-dialog-media]]/alert-dialog-header:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "popup-text-xs-plus leading-relaxed text-balance text-[color:var(--muted-foreground)] group-has-[>[data-slot=alert-dialog-media]]/alert-dialog-header:col-start-2 md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-[color:var(--foreground)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<
+    React.ComponentProps<typeof Button>,
+    "loading" | "loadingHeight" | "loadingIndicatorClassName" | "loadingWidth" | "size" | "variant"
+  >) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/templates/ui/components/composites/alert.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--card)] text-[color:var(--card-foreground)]",
+        destructive:
+          "border-[color:color-mix(in_oklab,var(--destructive)_40%,transparent)] bg-[color:color-mix(in_oklab,var(--destructive)_10%,transparent)] text-[color:var(--foreground)] [&>svg]:text-[color:var(--destructive)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      data-variant={variant ?? undefined}
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 group-data-[variant=destructive]/alert:text-[color:var(--destructive)] [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-[color:var(--foreground)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-xs/relaxed text-balance text-[color:var(--muted-foreground)] group-data-[variant=destructive]/alert:text-[color:color-mix(in_oklab,var(--destructive)_90%,transparent)] md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-[color:var(--foreground)] [&_p:not(:last-child)]:mb-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-1.5 right-2", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/templates/ui/components/composites/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../../lib/utils";
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio };