@ui-annotate/react-vite 0.1.0

package/dist/runtime/windows/AnnotateWindow.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { CheckIcon, CopyIcon, PlusIcon, RotateCcwIcon, Trash2Icon, XIcon } from "lucide-react";
+import { ANNOTATE_TASK_FILE_NAME } from "../../protocol/constants.js";
+import { Button } from "../../ui/components/button.js";
+import { ScrollArea } from "../../ui/components/scroll-area.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/components/tabs.js";
+import { Textarea } from "../../ui/components/textarea.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/components/tooltip.js";
+import { cn } from "../../ui/lib/utils.js";
+import { writeClipboardText } from "../shared/clipboard.js";
+import { TargetTraceTree } from "./TargetTraceTree.js";
+import { EmptyState, ErrorState, SaveStatusText } from "./window-shared.js";
+export function AnnotateWindow({ activeTargetId, saveError, saveStatus, targets, taskError, taskStatus, getTraceNodeElement, onActiveTargetChange, onAddComment, onChangeComment, onDeleteComment, onDeleteTarget, onHoverTraceNode, onOpenPath, onResetTargets }) {
+    const [editingComment, setEditingComment] = useState(null);
+    const selectedTarget = targets.find((target) => target.id === activeTargetId) ?? targets[0] ?? null;
+    if (taskStatus === "loading") {
+        return _jsx(EmptyState, { children: "Loading annotate task." });
+    }
+    if (taskStatus === "error") {
+        return _jsx(ErrorState, { children: taskError });
+    }
+    return (_jsxs("div", { className: "flex h-full min-w-0 flex-col gap-3 overflow-hidden bg-background", children: [_jsx(AnnotateTaskPathInfo, { path: ANNOTATE_TASK_FILE_NAME, targetCount: targets.length, onResetTargets: onResetTargets }), selectedTarget ? (_jsxs(Tabs, { className: "min-h-0 flex-1 overflow-hidden", value: selectedTarget.id, onValueChange: onActiveTargetChange, children: [_jsx("div", { className: "shrink-0 border-b border-border/50 px-3 pb-2", children: _jsx(TabsList, { className: "w-full grid", style: { gridTemplateColumns: `repeat(${targets.length}, 1fr)` }, children: targets.map((target) => (_jsx(TabsTrigger, { value: target.id, children: target.id }, target.id))) }) }), targets.map((target) => (_jsx(TabsContent, { value: target.id, className: "min-h-0 data-[state=active]:flex data-[state=active]:flex-1 data-[state=active]:flex-col", children: _jsx(ScrollArea, { className: "min-h-0 flex-1", children: _jsxs("div", { className: "flex flex-col gap-4 p-3", children: [_jsx(TargetComments, { editingComment: editingComment, target: target, onAddComment: () => {
+                                            setEditingComment({ targetId: target.id, index: target.comments.length });
+                                            onAddComment(target.id);
+                                        }, onBlurComment: () => setEditingComment(null), onChangeComment: (index, value) => onChangeComment(target.id, index, value), onDeleteComment: (index) => onDeleteComment(target.id, index), onEditComment: (index) => setEditingComment({ targetId: target.id, index }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-semibold uppercase text-muted-foreground", children: "Trace" }), _jsx(TargetTraceTree, { target: target, getTraceNodeElement: getTraceNodeElement(target.id), onHoverTraceNode: (node) => onHoverTraceNode(target.id, node), onOpenPath: onOpenPath })] }), _jsx("div", { className: "pt-2 pb-4", children: _jsxs(Button, { type: "button", variant: "secondary", className: "w-full", onClick: () => onDeleteTarget(target.id), children: [_jsx(Trash2Icon, { "data-icon": "inline-start", "aria-hidden": "true" }), "Delete target"] }) })] }) }) }, target.id)))] })) : (_jsx("div", { className: "min-h-0 flex-1", children: _jsx(EmptyState, { children: "Click a component in annotate mode to add a target." }) })), _jsxs("div", { className: "shrink-0 px-3 pb-3", children: [_jsx(SaveStatusText, { status: saveStatus }), saveError ? _jsx("div", { className: "mt-2", children: _jsx(ErrorState, { children: saveError }) }) : null] })] }));
+}
+function AnnotateTaskPathInfo({ path, targetCount, onResetTargets }) {
+    const [copied, setCopied] = useState(false);
+    const resetCopiedTimerRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (resetCopiedTimerRef.current !== null) {
+                window.clearTimeout(resetCopiedTimerRef.current);
+            }
+        };
+    }, []);
+    async function handleCopyPath() {
+        if (!(await writeClipboardText(path))) {
+            return;
+        }
+        setCopied(true);
+        if (resetCopiedTimerRef.current !== null) {
+            window.clearTimeout(resetCopiedTimerRef.current);
+        }
+        resetCopiedTimerRef.current = window.setTimeout(() => {
+            setCopied(false);
+            resetCopiedTimerRef.current = null;
+        }, 1200);
+    }
+    return (_jsx("div", { className: "shrink-0 border-b border-border/50 px-3 py-2", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs", children: [_jsx("span", { className: "shrink-0 font-semibold uppercase text-muted-foreground", children: "Task file" }), _jsx("code", { className: "min-w-0 flex-1 truncate rounded bg-muted/60 px-2 py-1 font-mono text-foreground", children: path }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 shrink-0", "aria-label": "Copy annotate task path", onClick: handleCopyPath, children: copied ? (_jsx(CheckIcon, { "data-icon": "inline-start", "aria-hidden": "true" })) : (_jsx(CopyIcon, { "data-icon": "inline-start", "aria-hidden": "true" })) }) }), _jsx(TooltipContent, { side: "bottom", children: copied ? "Copied" : "Copy path" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 shrink-0", "aria-label": "Reset annotate task targets", disabled: targetCount === 0, onClick: onResetTargets, children: _jsx(RotateCcwIcon, { "data-icon": "inline-start", "aria-hidden": "true" }) }) }), _jsx(TooltipContent, { side: "bottom", children: "Reset targets" })] })] }) }));
+}
+function TargetComments({ editingComment, target, onAddComment, onBlurComment, onChangeComment, onDeleteComment, onEditComment }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-semibold uppercase text-muted-foreground", children: "Comments" }), _jsxs("div", { className: "overflow-hidden rounded-md border bg-background", children: [target.comments.length === 0 ? (_jsx("div", { className: "flex min-h-11 items-center px-3 text-sm text-muted-foreground", children: "No comments yet." })) : (_jsx("div", { className: "divide-y", children: target.comments.map((comment, index) => {
+                            const isEditing = editingComment?.targetId === target.id && editingComment.index === index;
+                            return (_jsxs("div", { className: "flex min-w-0 items-start gap-1 px-2 py-1.5", children: [isEditing ? (_jsx(AutoGrowCommentTextarea, { value: comment, onBlur: onBlurComment, onChange: (value) => onChangeComment(index, value) })) : (_jsx("button", { type: "button", className: cn("min-w-0 flex-1 rounded-sm px-1.5 py-1 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none", "whitespace-pre-wrap break-words"), onClick: () => onEditComment(index), children: comment.trim() ? comment : "Empty comment" })), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0", "aria-label": `Delete ${target.id} comment`, onClick: () => onDeleteComment(index), children: _jsx(XIcon, { "data-icon": "inline-start", "aria-hidden": "true" }) })] }, index));
+                        }) })), _jsxs(Button, { className: "h-10 w-full rounded-none border-0 border-t border-dashed text-muted-foreground hover:text-foreground", type: "button", variant: "ghost", onClick: onAddComment, children: [_jsx(PlusIcon, { "data-icon": "inline-start", "aria-hidden": "true" }), "Add comment"] })] })] }));
+}
+function AutoGrowCommentTextarea({ value, onBlur, onChange }) {
+    const textareaRef = useRef(null);
+    useLayoutEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea) {
+            return;
+        }
+        textarea.style.height = "0px";
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    }, [value]);
+    function handleChange(event) {
+        onChange(event.target.value);
+    }
+    function handleBlur(_event) {
+        onBlur();
+    }
+    function handleKeyDown(event) {
+        if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) {
+            return;
+        }
+        event.preventDefault();
+        event.currentTarget.blur();
+    }
+    return (_jsx(Textarea, { ref: textareaRef, className: "min-h-8 flex-1 resize-none overflow-hidden py-1.5 text-sm", value: value, placeholder: "Describe the UI change for this target.", rows: 1, autoFocus: true, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown }));
+}

package/dist/runtime/windows/AnnotateWindowFrame.d.ts

@@ -0,0 +1,26 @@
+import { type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
+import { type LucideIcon } from "lucide-react";
+export type AnnotateWindowFrameState = {
+    open: boolean;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    zIndex: number;
+};
+export type AnnotateWindowResizeDirection = {
+    horizontal: -1 | 0 | 1;
+    vertical: -1 | 0 | 1;
+};
+export declare function AnnotateWindowFrame<TId extends string>({ children, floating, icon: Icon, id, label, state, title, onBeginMove, onBeginResize, onClose }: {
+    children: ReactNode;
+    floating?: boolean;
+    icon: LucideIcon;
+    id: TId;
+    label: string;
+    state: AnnotateWindowFrameState;
+    title: string;
+    onBeginMove(id: TId, event: ReactPointerEvent<HTMLElement>): void;
+    onBeginResize(id: TId, direction: AnnotateWindowResizeDirection, event: ReactPointerEvent<HTMLDivElement>): void;
+    onClose(id: TId): void;
+}): ReactNode;

package/dist/runtime/windows/AnnotateWindowFrame.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Button } from "../../ui/components/button.js";
+import { cn } from "../../ui/lib/utils.js";
+const resizeHandles = [
+    {
+        className: "top-0 left-3 right-3 h-2 cursor-ns-resize",
+        direction: { horizontal: 0, vertical: -1 }
+    },
+    {
+        className: "right-0 top-3 bottom-3 w-2 cursor-ew-resize",
+        direction: { horizontal: 1, vertical: 0 }
+    },
+    {
+        className: "bottom-0 left-3 right-3 h-2 cursor-ns-resize",
+        direction: { horizontal: 0, vertical: 1 }
+    },
+    {
+        className: "left-0 top-3 bottom-3 w-2 cursor-ew-resize",
+        direction: { horizontal: -1, vertical: 0 }
+    },
+    {
+        className: "top-0 left-0 size-3 cursor-nwse-resize",
+        direction: { horizontal: -1, vertical: -1 }
+    },
+    {
+        className: "top-0 right-0 size-3 cursor-nesw-resize",
+        direction: { horizontal: 1, vertical: -1 }
+    },
+    {
+        className: "bottom-0 right-0 size-3 cursor-nwse-resize",
+        direction: { horizontal: 1, vertical: 1 }
+    },
+    {
+        className: "bottom-0 left-0 size-3 cursor-nesw-resize",
+        direction: { horizontal: -1, vertical: 1 }
+    }
+];
+export function AnnotateWindowFrame({ children, floating = true, icon: Icon, id, label, state, title, onBeginMove, onBeginResize, onClose }) {
+    const style = floating
+        ? {
+            left: state.x,
+            top: state.y,
+            width: state.width,
+            height: state.height,
+            zIndex: state.zIndex
+        }
+        : {
+            width: state.width,
+            height: state.height
+        };
+    return (_jsxs("section", { className: cn("pointer-events-auto flex flex-col overflow-hidden rounded-xl border bg-card/95 text-card-foreground shadow-xl backdrop-blur", floating ? "fixed z-20" : "relative max-w-full"), style: style, "aria-label": label, children: [_jsxs("header", { className: "flex min-h-9 cursor-move select-none items-center justify-between gap-2 border-b bg-muted/30 py-0.5 pl-2.5 pr-1.5", onPointerDown: (event) => onBeginMove(id, event), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs font-semibold text-foreground", children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "min-w-0 truncate", children: title })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-6" // 覆盖为 size-6（24px），不再被 size="icon" 默认的 size-9（36px）撑开
+                        , "aria-label": `Close ${label}`, onPointerDown: (event) => event.stopPropagation(), onClick: () => onClose(id), children: _jsx(XIcon, { "data-icon": "inline-start", "aria-hidden": "true" }) })] }), _jsx("div", { className: "min-h-0 flex-1 p-3", children: children }), floating
+                ? resizeHandles.map((handle) => (_jsx("div", { className: cn("absolute touch-none", handle.className), "aria-hidden": "true", onPointerDown: (event) => onBeginResize(id, handle.direction, event) }, `${handle.direction.horizontal}:${handle.direction.vertical}`)))
+                : null] }));
+}

package/dist/runtime/windows/TargetTraceTree.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import { type TraceFrame, type TraceNodeRef } from "../../protocol/task-model.js";
+export type TargetTraceTreeTarget = {
+    trace?: TraceFrame[];
+};
+export type TraceNodeElementResolver = (node: TraceNodeRef) => Element | null;
+export declare function TargetTraceTree({ target, getTraceNodeElement, onHoverTraceNode, onOpenPath }: {
+    target: TargetTraceTreeTarget;
+    getTraceNodeElement?: TraceNodeElementResolver;
+    onHoverTraceNode?(node: TraceNodeRef | null): void;
+    onOpenPath(path: string): void;
+}): ReactNode;

package/dist/runtime/windows/TargetTraceTree.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { CheckIcon, ComponentIcon, CopyIcon, FileCodeIcon, MoreHorizontalIcon, SquareCodeIcon } from "lucide-react";
+import { Button } from "../../ui/components/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/components/dropdown-menu.js";
+import { cn } from "../../ui/lib/utils.js";
+import { writeClipboardText } from "../shared/clipboard.js";
+export function TargetTraceTree({ target, getTraceNodeElement, onHoverTraceNode, onOpenPath }) {
+    const sections = useMemo(() => createStackSections(target), [target.trace]);
+    const modifierPressed = useModifierPressed();
+    if (sections.length === 0) {
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "No trace detected." });
+    }
+    return (_jsx("div", { className: "flex flex-col gap-2", "aria-label": "Target trace", children: sections.map((section) => (_jsx(StackSectionView, { section: section, getTraceNodeElement: getTraceNodeElement, onHoverTraceNode: onHoverTraceNode, onOpenPath: onOpenPath, modifierPressed: modifierPressed }, section.key))) }));
+}
+function StackSectionView({ section, getTraceNodeElement, onHoverTraceNode, onOpenPath, modifierPressed }) {
+    const fileNode = section.frameIndex === undefined
+        ? null
+        : {
+            kind: "file",
+            frameIndex: section.frameIndex
+        };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "group/trace flex w-full min-w-0 items-start gap-1 rounded-md hover:bg-accent hover:text-accent-foreground", onPointerEnter: () => onHoverTraceNode?.(fileNode), onPointerLeave: () => onHoverTraceNode?.(null), children: [_jsxs("button", { type: "button", className: cn("flex min-w-0 flex-1 items-start gap-2 rounded-md px-2 pt-1.5 text-left focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none", modifierPressed ? "cursor-pointer" : "cursor-default"), title: `${section.relativePath}\nCtrl/Cmd click to open`, onClick: (event) => openOnModifierClick(event, section.path, onOpenPath), children: [_jsx(FileCodeIcon, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-mono text-xs font-semibold", children: section.fileName }), _jsx("span", { className: "block truncate text-[11px] leading-4 text-muted-foreground", children: section.relativePath })] })] }), fileNode ? (_jsx(TraceNodeActionsMenu, { ariaLabel: `Open ${section.fileName} trace actions`, copyText: section.copyText, contentCopyHeader: section.contentCopyHeader, node: fileNode, getTraceNodeElement: getTraceNodeElement })) : null] }), section.nodes.length > 0 ? (_jsx("ul", { className: "ml-3 border-l border-border/80", children: _jsx(StackNodeView, { nodes: section.nodes, index: 0, getTraceNodeElement: getTraceNodeElement, onHoverTraceNode: onHoverTraceNode, onOpenPath: onOpenPath, modifierPressed: modifierPressed }) })) : null] }));
+}
+function StackNodeView({ nodes, index, getTraceNodeElement, onHoverTraceNode, onOpenPath, modifierPressed }) {
+    const node = nodes[index];
+    if (!node) {
+        return null;
+    }
+    const Icon = node.kind === "native" ? SquareCodeIcon : ComponentIcon;
+    const callNode = node.frameIndex === undefined || node.callIndex === undefined
+        ? null
+        : {
+            kind: "call",
+            frameIndex: node.frameIndex,
+            callIndex: node.callIndex
+        };
+    return (_jsxs("li", { className: "flex flex-col", children: [_jsxs("div", { className: "group/trace flex min-w-0 items-center gap-1 rounded-md hover:bg-accent hover:text-accent-foreground", onPointerEnter: () => onHoverTraceNode?.(callNode), onPointerLeave: () => onHoverTraceNode?.(null), children: [_jsxs("button", { type: "button", className: cn("flex min-w-0 flex-1 items-center gap-1.5 rounded-md pt-1 pr-2 pl-0 text-left text-xs focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none", modifierPressed ? "cursor-pointer" : "cursor-default", node.kind === "native" ? "font-mono text-muted-foreground" : "font-medium text-foreground"), title: `${node.path}\nCtrl/Cmd click to open`, onClick: (event) => openOnModifierClick(event, node.path, onOpenPath), children: [_jsxs("span", { className: "relative h-5 w-[30px] shrink-0 text-muted-foreground", "aria-hidden": "true", children: [index > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute top-0 bottom-1/2 left-0 border-l border-border/80" }), _jsx("span", { className: "absolute top-1/2 left-0 w-3 border-t border-border/80" })] })) : null, _jsx(Icon, { className: "absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-muted-foreground" })] }), _jsx("span", { className: "min-w-0 truncate", children: node.name })] }), callNode ? (_jsx(TraceNodeActionsMenu, { ariaLabel: `Open ${node.name} trace actions`, copyText: node.copyText, contentCopyHeader: node.contentCopyHeader, node: callNode, getTraceNodeElement: getTraceNodeElement })) : null] }), index < nodes.length - 1 ? (_jsx("ul", { className: "ml-[23px]", children: _jsx(StackNodeView, { nodes: nodes, index: index + 1, getTraceNodeElement: getTraceNodeElement, onHoverTraceNode: onHoverTraceNode, onOpenPath: onOpenPath, modifierPressed: modifierPressed }) })) : null] }));
+}
+function useModifierPressed() {
+    const [modifierPressed, setModifierPressed] = useState(false);
+    useEffect(() => {
+        function updateModifierState(event) {
+            setModifierPressed(event.ctrlKey || event.metaKey);
+        }
+        function resetModifierState() {
+            setModifierPressed(false);
+        }
+        window.addEventListener("keydown", updateModifierState);
+        window.addEventListener("keyup", updateModifierState);
+        window.addEventListener("blur", resetModifierState);
+        return () => {
+            window.removeEventListener("keydown", updateModifierState);
+            window.removeEventListener("keyup", updateModifierState);
+            window.removeEventListener("blur", resetModifierState);
+        };
+    }, []);
+    return modifierPressed;
+}
+function TraceNodeActionsMenu({ ariaLabel, copyText, contentCopyHeader, node, getTraceNodeElement }) {
+    const [copiedAction, setCopiedAction] = useState(null);
+    const [contentElementAvailable, setContentElementAvailable] = useState(true);
+    function handleOpenChange(open) {
+        if (open) {
+            setContentElementAvailable(Boolean(getTraceNodeElement?.(node)));
+        }
+    }
+    async function copyToClipboard(action, text) {
+        const copiedToClipboard = await writeClipboardText(text);
+        if (!copiedToClipboard) {
+            return;
+        }
+        setCopiedAction(action);
+        window.setTimeout(() => {
+            setCopiedAction((current) => current === action ? null : current);
+        }, 1200);
+    }
+    async function handleCopyPath(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        await copyToClipboard("path", copyText);
+    }
+    async function handleCopyContent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const element = getTraceNodeElement?.(node) ?? null;
+        if (!element) {
+            setContentElementAvailable(false);
+            return;
+        }
+        await copyToClipboard("content", formatVisibleContentCopyText(contentCopyHeader, getVisibleElementContent(element)));
+    }
+    return (_jsxs(DropdownMenu, { onOpenChange: handleOpenChange, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "pointer-events-none size-7 shrink-0 opacity-0 group-hover/trace:pointer-events-auto group-hover/trace:opacity-60 focus-visible:pointer-events-auto focus-visible:opacity-100 data-[state=open]:pointer-events-auto data-[state=open]:opacity-100", title: "More", "aria-label": ariaLabel, children: _jsx(MoreHorizontalIcon, { "data-icon": "inline-start", "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuItem, { onSelect: handleCopyPath, children: [copiedAction === "path" ? (_jsx(CheckIcon, { "data-icon": "inline-start", "aria-hidden": "true" })) : (_jsx(CopyIcon, { "data-icon": "inline-start", "aria-hidden": "true" })), "Copy path"] }), _jsxs(DropdownMenuItem, { disabled: !contentElementAvailable, title: contentElementAvailable ? undefined : "No DOM match", onSelect: handleCopyContent, children: [copiedAction === "content" ? (_jsx(CheckIcon, { "data-icon": "inline-start", "aria-hidden": "true" })) : (_jsx(CopyIcon, { "data-icon": "inline-start", "aria-hidden": "true" })), "Copy InnerText"] })] }) })] }));
+}
+function getVisibleElementContent(element) {
+    if (element instanceof HTMLElement) {
+        return element.innerText.trim();
+    }
+    return (element.textContent ?? "").trim();
+}
+function formatVisibleContentCopyText(header, content) {
+    return `${header}\n\`\`\`interText\n${content}\n\`\`\``;
+}
+function openOnModifierClick(event, path, onOpenPath) {
+    if (!event.ctrlKey && !event.metaKey) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    onOpenPath(path);
+}
+function createStackSections(target) {
+    return target.trace ? createStackSectionsFromTrace(target.trace) : [];
+}
+function createStackSectionsFromTrace(trace) {
+    return trace
+        .map((frame, frameIndex) => {
+        const calls = frame.calls.map((call, callIndex) => {
+            const sourcePath = `${frame.file}:${call.line}`;
+            const path = `${sourcePath}:1`;
+            return {
+                key: `node:${frameIndex}:${callIndex}:${path}:${call.component}`,
+                name: call.component,
+                path,
+                copyText: formatTraceCallCopyText(sourcePath, call.component),
+                contentCopyHeader: formatTraceCallCopyText(sourcePath, call.component),
+                frameIndex,
+                callIndex,
+                kind: isNativeElementName(call.component) ? "native" : "component"
+            };
+        });
+        const firstCall = frame.calls[0];
+        const path = firstCall ? `${frame.file}:${firstCall.line}:1` : `${frame.file}:1:1`;
+        const copyText = formatTraceFileCopyText(frame.file);
+        const contentCopyHeader = firstCall
+            ? formatTraceCallCopyText(`${frame.file}:${firstCall.line}`, firstCall.component)
+            : frame.file;
+        return {
+            key: `section:${frameIndex}:${path}`,
+            fileName: getFileName(frame.file),
+            relativePath: frame.file,
+            path,
+            copyText,
+            contentCopyHeader,
+            frameIndex,
+            nodes: calls
+        };
+    })
+        .filter((section) => section.nodes.length > 0);
+}
+function getFileName(relativePath) {
+    return relativePath.split("/").filter(Boolean).at(-1) ?? relativePath;
+}
+function formatTraceFileCopyText(path) {
+    return path;
+}
+function formatTraceCallCopyText(path, component) {
+    return `${path} ${component}`;
+}
+function isNativeElementName(name) {
+    const leafName = name.split(".").at(-1) ?? name;
+    return /^[a-z][a-z0-9-]*$/.test(leafName);
+}

package/dist/runtime/windows/window-shared.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export type TaskStatus = "idle" | "loading" | "ready" | "error";
+export type SaveStatus = "idle" | "dirty" | "saving" | "saved" | "error";
+export declare function EmptyState({ children }: {
+    children: ReactNode;
+}): ReactNode;
+export declare function ErrorState({ children }: {
+    children: ReactNode;
+}): ReactNode;
+export declare function SaveStatusText({ status }: {
+    status: SaveStatus;
+}): ReactNode;
+export declare function getSaveStatusClass(status: SaveStatus): string;
+export declare function getSaveStatusText(status: SaveStatus): string;

package/dist/runtime/windows/window-shared.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../ui/lib/utils.js";
+export function EmptyState({ children }) {
+    return _jsx("div", { className: "p-4 text-sm leading-relaxed text-muted-foreground", children: children });
+}
+export function ErrorState({ children }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: children }));
+}
+export function SaveStatusText({ status }) {
+    return (_jsx("span", { className: cn("shrink-0 text-xs font-medium", getSaveStatusClass(status)), children: getSaveStatusText(status) }));
+}
+export function getSaveStatusClass(status) {
+    switch (status) {
+        case "dirty":
+        case "saving":
+            return "text-amber-600";
+        case "saved":
+            return "text-primary";
+        case "error":
+            return "text-destructive";
+        default:
+            return "text-muted-foreground";
+    }
+}
+export function getSaveStatusText(status) {
+    switch (status) {
+        case "dirty":
+            return "Unsaved";
+        case "saving":
+            return "Saving";
+        case "saved":
+            return "Saved";
+        case "error":
+            return "Save failed";
+        default:
+            return "Idle";
+    }
+}

package/dist/task-api.d.ts

@@ -0,0 +1,15 @@
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
+import { type AnnotateTaskFile } from "./protocol/index.js";
+export type AnnotateApiServerOptions = {
+    root?: string;
+};
+export type AnnotateApiServerResult = {
+    server: ReturnType<typeof createServer>;
+    root: string;
+};
+export declare function resolveAnnotateTaskPath(root: string): string;
+export declare function readAnnotateTask(root: string): Promise<AnnotateTaskFile>;
+export declare function writeAnnotateTask(root: string, task: unknown): Promise<AnnotateTaskFile>;
+export declare function validateAnnotateTaskFile(input: unknown): AnnotateTaskFile;
+export declare function createAnnotateApiServer(options?: AnnotateApiServerOptions): AnnotateApiServerResult;
+export declare function handleUiAnnotateRequest(root: string, request: IncomingMessage, response: ServerResponse): Promise<boolean>;