@ui-annotate/react-vite 0.1.0

package/dist/ui/components/switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+function Switch({ className, size = "default", ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground") }) }));
+}
+export { Switch };

package/dist/ui/components/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/ui/components/table.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function Table({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+}
+function TableHeader({ className, ...props }) {
+    return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
+}
+function TableBody({ className, ...props }) {
+    return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
+}
+function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
+}
+function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+}
+function TableHead({ className, ...props }) {
+    return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+}
+function TableCell({ className, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+}
+function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/ui/components/tabs.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/ui/components/tabs.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+function Tabs({ className, orientation = "horizontal", ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className), ...props }));
+}
+const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
+    variants: {
+        variant: {
+            default: "bg-muted",
+            line: "gap-1 bg-transparent",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function TabsList({ className, variant = "default", ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props }));
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/ui/components/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

package/dist/ui/components/textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Textarea };

package/dist/ui/components/toggle-group.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { toggleVariants } from "./toggle.js";
+declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem };

package/dist/ui/components/toggle-group.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+import { toggleVariants } from "./toggle.js";
+const ToggleGroupContext = React.createContext({
+    size: "default",
+    variant: "default",
+    spacing: 0,
+});
+function ToggleGroup({ className, variant, size, spacing = 0, children, ...props }) {
+    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children: children }) }));
+}
+function ToggleGroupItem({ className, children, variant, size, ...props }) {
+    const context = React.useContext(ToggleGroupContext);
+    return (_jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant ?? variant, "data-size": context.size ?? size, "data-spacing": context.spacing, className: cn(toggleVariants({
+            variant: context.variant ?? variant,
+            size: context.size ?? size,
+        }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l", className), ...props, children: children }));
+}
+export { ToggleGroup, ToggleGroupItem };

package/dist/ui/components/toggle.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+export { Toggle, toggleVariants };

package/dist/ui/components/toggle.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+        },
+        size: {
+            default: "h-9 min-w-9 px-2",
+            sm: "h-8 min-w-8 px-1.5",
+            lg: "h-10 min-w-10 px-2.5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Toggle({ className, variant, size, ...props }) {
+    return (_jsx(TogglePrimitive.Root, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
+}
+export { Toggle, toggleVariants };

package/dist/ui/components/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, style, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/ui/components/tooltip.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+import { usePortalContainer } from "../portal/portal-container.js";
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 0, children, style, ...props }) {
+    const { container, zIndex } = usePortalContainer();
+    return (_jsx(TooltipPrimitive.Portal, { container: container ?? undefined, children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, style: { ...style, ...(zIndex === undefined ? {} : { zIndex }) }, className: cn("pointer-events-auto z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })] }) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./lib/utils.js";
+export * from "./portal/portal-container.js";

package/dist/ui/index.js

@@ -0,0 +1,2 @@
+export * from "./lib/utils.js";
+export * from "./portal/portal-container.js";

package/dist/ui/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/ui/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/ui/portal/portal-container.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+type PortalContainerContextValue = {
+    container: HTMLElement | null;
+    zIndex: number | undefined;
+};
+type PortalContainerProviderProps = {
+    children: ReactNode;
+    container?: HTMLElement | null;
+    zIndex?: number;
+};
+export declare function PortalContainerProvider({ children, container, zIndex }: PortalContainerProviderProps): ReactNode;
+export declare function usePortalContainer(): PortalContainerContextValue;
+export {};

package/dist/ui/portal/portal-container.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const PortalContainerContext = createContext({
+    container: null,
+    zIndex: undefined
+});
+export function PortalContainerProvider({ children, container, zIndex }) {
+    return (_jsx(PortalContainerContext.Provider, { value: { container: container ?? null, zIndex }, children: children }));
+}
+export function usePortalContainer() {
+    return useContext(PortalContainerContext);
+}

package/dist/ui-annotate-plugin.d.ts

@@ -0,0 +1,28 @@
+import { type UiAnnotateInspectorPluginOptions } from "./inspector-transform.js";
+export type UiAnnotatePluginOptions = Pick<UiAnnotateInspectorPluginOptions, "enabled" | "root">;
+type VitePluginLike = {
+    name: string;
+    apply?: "serve";
+    config?(config?: ViteUserConfigLike): unknown;
+    resolveId?(id: string): string | undefined;
+    load?(this: VitePluginLoadContext, id: string): string | Promise<string | undefined> | undefined;
+    transformIndexHtml?(html: string): unknown;
+};
+type VitePluginLoadContext = {
+    addWatchFile?(id: string): void;
+};
+type ViteUserConfigLike = {
+    server?: {
+        watch?: {
+            ignored?: WatchIgnored;
+            [key: string]: unknown;
+        } | null;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+};
+type WatchIgnoredPattern = string | RegExp | ((testString: string, stats?: unknown) => boolean);
+type WatchIgnored = WatchIgnoredPattern | WatchIgnoredPattern[];
+export declare function uiAnnotate(options?: UiAnnotatePluginOptions): VitePluginLike[];
+export declare function createUiAnnotatePlugin(options?: UiAnnotatePluginOptions): VitePluginLike[];
+export {};

package/dist/ui-annotate-plugin.js

@@ -0,0 +1,227 @@
+import { createRequire } from "node:module";
+import { readFile } from "node:fs/promises";
+import { basename, dirname, isAbsolute, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { ANNOTATE_TASK_FILE_NAME } from "./protocol/index.js";
+import { Scanner } from "@tailwindcss/oxide";
+import { compile } from "tailwindcss";
+import { createUiAnnotateInspectorPlugin } from "./inspector-transform.js";
+const UI_ANNOTATE_RUNTIME_MODULE_ID = "virtual:ui-annotate-runtime";
+const RESOLVED_UI_ANNOTATE_RUNTIME_MODULE_ID = `\0${UI_ANNOTATE_RUNTIME_MODULE_ID}`;
+const UI_ANNOTATE_RUNTIME_MODULE_URL = `/@id/__x00__${UI_ANNOTATE_RUNTIME_MODULE_ID}`;
+const UI_ANNOTATE_RUNTIME_IMPORT_ID = "@ui-annotate/react-vite/runtime";
+const UI_ANNOTATE_RUNTIME_STYLE_IMPORT_ID = "@ui-annotate/react-vite/runtime/style.css";
+const ANNOTATE_TASK_WATCH_IGNORES = [
+    `**/${ANNOTATE_TASK_FILE_NAME}`
+];
+export function uiAnnotate(options = {}) {
+    return createUiAnnotatePlugin(options);
+}
+export function createUiAnnotatePlugin(options = {}) {
+    if (options.enabled === false) {
+        return [];
+    }
+    return [
+        createUiAnnotateInspectorPlugin(options),
+        createUiAnnotateRuntimePlugin()
+    ];
+}
+function createUiAnnotateRuntimePlugin() {
+    const require = createRequire(import.meta.url);
+    const runtimeEntryPath = resolvePackagedRuntimePath("index.js");
+    const runtimeStylePath = resolvePackagedRuntimePath("style.css");
+    return {
+        name: "ui-annotate-runtime",
+        apply: "serve",
+        config(config = {}) {
+            appendAnnotateTaskWatchIgnores(config);
+            return {
+                resolve: {
+                    // Linked host apps can otherwise load one React from the app and another from
+                    // the embedded UI Annotate runtime, which breaks hooks inside the runtime.
+                    dedupe: ["react", "react-dom"],
+                    alias: {
+                        [UI_ANNOTATE_RUNTIME_STYLE_IMPORT_ID]: runtimeStylePath,
+                        [UI_ANNOTATE_RUNTIME_IMPORT_ID]: runtimeEntryPath
+                    }
+                }
+            };
+        },
+        resolveId(id) {
+            if (id === UI_ANNOTATE_RUNTIME_MODULE_ID) {
+                return RESOLVED_UI_ANNOTATE_RUNTIME_MODULE_ID;
+            }
+        },
+        async load(id) {
+            if (id !== RESOLVED_UI_ANNOTATE_RUNTIME_MODULE_ID) {
+                return;
+            }
+            const { css: annotateCss, dependencies } = await compileUiAnnotateRuntimeCss(require);
+            for (const dependency of dependencies) {
+                this.addWatchFile?.(dependency);
+            }
+            return `
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { UiAnnotate } from "${UI_ANNOTATE_RUNTIME_IMPORT_ID}";
+
+const rootId = "__ui_annotate_root__";
+const storeKey = "__UI_ANNOTATE_ROOT__";
+const styleId = "ui-annotate-style";
+const appId = "ui-annotate-app";
+const portalId = "ui-annotate-portal";
+const annotateCss = ${JSON.stringify(annotateCss)};
+let rootElement = document.getElementById(rootId);
+
+if (!rootElement) {
+  rootElement = document.createElement("div");
+  rootElement.id = rootId;
+  document.body.append(rootElement);
+}
+
+Object.assign(rootElement.style, {
+  position: "fixed",
+  inset: "0",
+  zIndex: "2147483647",
+  pointerEvents: "none"
+});
+
+const shadowRoot = rootElement.shadowRoot ?? rootElement.attachShadow({ mode: "open" });
+let styleElement = shadowRoot.querySelector(\`style[data-ui-annotate-style="\${styleId}"]\`);
+
+if (!styleElement) {
+  styleElement = document.createElement("style");
+  styleElement.dataset.uiAnnotateStyle = styleId;
+  shadowRoot.append(styleElement);
+}
+
+styleElement.textContent = annotateCss;
+
+let appElement = shadowRoot.querySelector(\`[data-ui-annotate-app="\${appId}"]\`);
+
+if (!appElement) {
+  appElement = document.createElement("div");
+  appElement.dataset.uiAnnotateApp = appId;
+  shadowRoot.append(appElement);
+}
+
+let portalElement = shadowRoot.querySelector(\`[data-ui-annotate-portal="\${portalId}"]\`);
+
+if (!portalElement) {
+  portalElement = document.createElement("div");
+  portalElement.dataset.uiAnnotatePortal = portalId;
+  shadowRoot.append(portalElement);
+}
+
+const store = window[storeKey] ?? {};
+
+if (!store.root || store.appElement !== appElement) {
+  store.root = createRoot(appElement);
+  store.appElement = appElement;
+}
+
+window[storeKey] = store;
+store.root.render(React.createElement(UiAnnotate, { rootElement, portalContainer: portalElement }));
+
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    store.root?.render(React.createElement(React.Fragment));
+  });
+}
+      `;
+        },
+        transformIndexHtml(html) {
+            return {
+                html,
+                tags: [
+                    {
+                        tag: "script",
+                        attrs: {
+                            type: "module",
+                            src: UI_ANNOTATE_RUNTIME_MODULE_URL
+                        },
+                        injectTo: "body"
+                    }
+                ]
+            };
+        }
+    };
+}
+function appendAnnotateTaskWatchIgnores(config) {
+    config.server ??= {};
+    if (config.server.watch === null) {
+        return;
+    }
+    config.server.watch ??= {};
+    config.server.watch.ignored = mergeWatchIgnored(config.server.watch.ignored, ANNOTATE_TASK_WATCH_IGNORES);
+}
+function mergeWatchIgnored(current, additions) {
+    const currentPatterns = current === undefined
+        ? []
+        : Array.isArray(current)
+            ? current
+            : [current];
+    const nextPatterns = [...currentPatterns];
+    for (const addition of additions) {
+        if (!nextPatterns.includes(addition)) {
+            nextPatterns.push(addition);
+        }
+    }
+    return nextPatterns;
+}
+async function compileUiAnnotateRuntimeCss(require) {
+    const cssPath = resolvePackagedRuntimePath("style.css");
+    const dependencies = new Set([cssPath]);
+    const css = await readFile(cssPath, "utf8");
+    const compiler = await compile(css, {
+        base: dirname(cssPath),
+        from: cssPath,
+        loadStylesheet: async (id, base) => {
+            const stylesheetPath = resolveStylesheet(id, base, require);
+            dependencies.add(stylesheetPath);
+            return {
+                path: stylesheetPath,
+                base: dirname(stylesheetPath),
+                content: await readFile(stylesheetPath, "utf8")
+            };
+        }
+    });
+    const scanner = new Scanner({
+        sources: resolveUiAnnotateRuntimeSources(compiler.root, compiler.sources, dirname(cssPath))
+    });
+    const candidates = scanner.scan();
+    for (const file of scanner.files) {
+        dependencies.add(file);
+    }
+    return {
+        css: compiler.build(candidates),
+        dependencies: [...dependencies]
+    };
+}
+function resolveStylesheet(id, base, require) {
+    if (id.startsWith(".")) {
+        return resolve(base, id);
+    }
+    if (isAbsolute(id)) {
+        return id;
+    }
+    return require.resolve(id, { paths: [base] });
+}
+function resolveUiAnnotateRuntimeSources(root, sources, fallbackBase) {
+    const rootSources = root === "none"
+        ? []
+        : root === null
+            ? [{ base: fallbackBase, pattern: "**/*", negated: false }]
+            : [{ ...root, negated: false }];
+    return rootSources.concat(sources);
+}
+function resolvePackagedRuntimePath(subpath) {
+    return resolve(resolvePackageDistDir(), "runtime", subpath);
+}
+function resolvePackageDistDir() {
+    const moduleDir = dirname(fileURLToPath(import.meta.url));
+    if (basename(moduleDir) === "src") {
+        return resolve(moduleDir, "../dist");
+    }
+    return moduleDir;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@ui-annotate/react-vite",
+  "version": "0.1.0",
+  "description": "Annotate React UI issues in Vite apps and hand them off to coding agents.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "default": "./dist/runtime/index.js"
+    },
+    "./runtime/style.css": {
+      "default": "./dist/runtime/style.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "dependencies": {
+    "@tailwindcss/oxide": "^4.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0",
+    "radix-ui": "^1.4.3",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^5.8.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "vite": "^8.0.13"
+  },
+  "devDependencies": {
+    "vite": "^8.0.13"
+  },
+  "scripts": {
+    "build": "node scripts/build-single-package.mjs",
+    "clean": "node -e \"const fs=require('node:fs'); for (const path of ['dist','tsconfig.tsbuildinfo']) fs.rmSync(path,{recursive:true,force:true})\"",
+    "test": "tsx --test src/__tests__/*.test.ts",
+    "type-check": "tsc -p tsconfig.json --noEmit",
+    "typecheck": "pnpm run type-check"
+  }
+}