@forgeax/interface 0.4.1

package/dist/package/node/components/TourOverlay/TourOverlay.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// TourOverlay — a reusable coach-mark tour that highlights live shell elements
+// by their `data-tour-id` attribute. Business-agnostic: the caller supplies the
+// step list + copy; this component owns geometry, keyboard a11y, and focus.
+//
+// Anchor registry: elements opt in by rendering `data-tour-id="<id>"`. The
+// overlay resolves each step's anchor with `querySelector`, tracks its
+// bounding rect (recomputed on resize/scroll), paints a highlight ring, and
+// floats the coach card on the side with the most room. Missing anchor →
+// the card centers and the ring hides (tour still advances).
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createRestartableTimeoutTaskLifecycle, installViewportResizeObservation, installViewportScrollObservation, } from '@forgeax/app-shell/react';
+
+const RING_PAD = 4;
+const RING_OUTLINE = 2;
+const COACH_GAP = 12;
+const COACH_W = 260;
+const COACH_H_EST = 150;
+const VIEWPORT_PAD = 12;
+function readOneRect(anchorId) {
+    const el = document.querySelector(`[data-tour-id="${CSS.escape(anchorId)}"]`);
+    if (!el)
+        return null;
+    // Panel anchors are out-of-flow zero-size markers (see panelRegistry.tourWrap):
+    // their own rect is empty, so measure the parent — the dockview content box
+    // that IS the panel's area. Other anchors (topbar regions, composer) are real
+    // elements measured directly.
+    const target = el.hasAttribute('data-tour-anchor-parent') ? el.parentElement : el;
+    if (!target)
+        return null;
+    const r = target.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0)
+        return null;
+    return { top: r.top, left: r.left, width: r.width, height: r.height };
+}
+/** Bounding union of one or more anchors' rects. Missing / zero-size anchors are
+ *  skipped, so a region spans whatever anchors are present (the left column =
+ *  hierarchy + inspector highlights as a single box even if one is momentarily
+ *  unlaid-out). Returns null only when NONE resolve — the coach then centers. */
+function readAnchorRect(anchorIds) {
+    let top = Infinity;
+    let left = Infinity;
+    let right = -Infinity;
+    let bottom = -Infinity;
+    let found = false;
+    for (const id of anchorIds) {
+        const r = readOneRect(id);
+        if (!r)
+            continue;
+        found = true;
+        top = Math.min(top, r.top);
+        left = Math.min(left, r.left);
+        right = Math.max(right, r.left + r.width);
+        bottom = Math.max(bottom, r.top + r.height);
+    }
+    if (!found)
+        return null;
+    return { top, left, width: right - left, height: bottom - top };
+}
+/** Ring box = anchor grown by RING_PAD, then clamped inside the viewport. The
+ *  2px outline is painted OUTSIDE the box, so when an anchor hugs a viewport edge
+ *  the raw ring (anchor - RING_PAD) spills off-screen and that side of the
+ *  highlight disappears. Clamp each edge to keep the whole ring (incl. outline)
+ *  visible. */
+function ringBox(anchor) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const min = RING_OUTLINE;
+    const top = Math.max(min, anchor.top - RING_PAD);
+    const left = Math.max(min, anchor.left - RING_PAD);
+    const bottom = Math.min(vh - min, anchor.top + anchor.height + RING_PAD);
+    const right = Math.min(vw - min, anchor.left + anchor.width + RING_PAD);
+    return { top, left, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
+}
+/** Choose a coach position (below → above → right → left → centered) that fits
+ *  the viewport, then clamp inside it. `coachH` is the MEASURED card height (see
+ *  the caller's layout effect) — using the real height, not a fixed estimate, is
+ *  what makes a tall card flip cleanly ABOVE a bottom-edge anchor (e.g. the
+ *  footer) instead of overflowing off-screen. */
+function coachPosition(anchor, coachH) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    if (!anchor) {
+        return { top: Math.max(VIEWPORT_PAD, vh / 2 - coachH / 2), left: vw / 2 - COACH_W / 2 };
+    }
+    const belowTop = anchor.top + anchor.height + COACH_GAP;
+    const aboveTop = anchor.top - coachH - COACH_GAP;
+    let top;
+    let left;
+    if (belowTop + coachH <= vh - VIEWPORT_PAD) {
+        top = belowTop;
+        left = anchor.left + anchor.width / 2 - COACH_W / 2;
+    }
+    else if (aboveTop >= VIEWPORT_PAD) {
+        top = aboveTop;
+        left = anchor.left + anchor.width / 2 - COACH_W / 2;
+    }
+    else if (anchor.left + anchor.width + COACH_GAP + COACH_W <= vw - VIEWPORT_PAD) {
+        top = anchor.top;
+        left = anchor.left + anchor.width + COACH_GAP;
+    }
+    else {
+        top = anchor.top;
+        left = anchor.left - COACH_W - COACH_GAP;
+    }
+    top = Math.min(Math.max(VIEWPORT_PAD, top), vh - coachH - VIEWPORT_PAD);
+    left = Math.min(Math.max(VIEWPORT_PAD, left), vw - COACH_W - VIEWPORT_PAD);
+    return { top, left };
+}
+export function TourOverlay({ steps, stepIndex, onStepChange, onClose, labels }) {
+    const step = steps[stepIndex];
+    // Anchor id is the ONLY stable identity of a step: `steps`/`step` are rebuilt
+    // (new object refs) on every parent render because their copy comes from the
+    // i18n `t()` closure. Keying effects on the object would re-run them every
+    // render and reset the retry timer before it can fire — so key on this string.
+    // Stable string identity for effects: `steps`/`step` get new object refs on
+    // every parent render (i18n t() closure), and an array anchorId would be a new
+    // ref too — so key on the joined id string and rebuild the id list from it.
+    const anchorKey = Array.isArray(step?.anchorId)
+        ? step.anchorId.join('|')
+        : (step?.anchorId ?? '');
+    const [anchorRect, setAnchorRect] = useState(null);
+    // Measured coach-card height. Body copy varies per step (short "chat" vs long
+    // "footer"), so a fixed estimate mis-clamps a tall card at a bottom-edge
+    // anchor. Seed with the estimate, then correct to the real height below.
+    const [coachH, setCoachH] = useState(COACH_H_EST);
+    const coachRef = useRef(null);
+    const isLast = stepIndex >= steps.length - 1;
+    const isFirst = stepIndex <= 0;
+    const recompute = useCallback(() => {
+        if (!anchorKey)
+            return;
+        setAnchorRect(readAnchorRect(anchorKey.split('|')));
+    }, [anchorKey]);
+    // Measure the current step's anchor, RETRYING until it has a real rect. The
+    // dockview panels (sidebar/preview/chat) lay out asynchronously after mount,
+    // so a one-shot measure on step 0 lands before the panel has a size → null →
+    // no ring (the classic "first step doesn't highlight" bug). Poll briefly until
+    // a non-zero rect appears, then stop; give up after ~1.2s (anchor genuinely
+    // absent → coach just centers).
+    useLayoutEffect(() => {
+        if (!anchorKey)
+            return;
+        let attempts = 0;
+        const retry = createRestartableTimeoutTaskLifecycle({ delayMs: 60, task: tick });
+        function tick() {
+            const rect = readAnchorRect(anchorKey.split('|'));
+            setAnchorRect(rect);
+            attempts += 1;
+            if (rect || attempts >= 20)
+                return;
+            retry.schedule();
+        }
+        tick();
+        return () => retry.dispose();
+    }, [anchorKey]);
+    // Measure the card's real height after it renders (before paint), so the next
+    // layout pass positions/clamps it with the true height. Only sets on change →
+    // converges in one extra pass (position doesn't affect the card's height).
+    useLayoutEffect(() => {
+        const h = coachRef.current?.offsetHeight ?? 0;
+        if (h > 0 && h !== coachH)
+            setCoachH(h);
+    }, [stepIndex, anchorRect, step?.body, coachH]);
+    useEffect(() => {
+        const onWin = () => recompute();
+        const disposeViewportResizeObservation = installViewportResizeObservation({
+            target: window,
+            onResize: onWin,
+        });
+        const disposeViewportScrollObservation = installViewportScrollObservation({
+            target: window,
+            onScroll: onWin,
+        });
+        return () => {
+            disposeViewportScrollObservation();
+            disposeViewportResizeObservation();
+        };
+    }, [recompute]);
+    const goNext = useCallback(() => {
+        if (isLast)
+            onClose(true);
+        else
+            onStepChange(stepIndex + 1);
+    }, [isLast, onClose, onStepChange, stepIndex]);
+    const goPrev = useCallback(() => {
+        if (!isFirst)
+            onStepChange(stepIndex - 1);
+    }, [isFirst, onStepChange, stepIndex]);
+    // Keyboard a11y: Esc skips, arrows/Enter navigate. Focus the coach on mount /
+    // step change so screen readers announce the new content and Tab is trapped.
+    useEffect(() => {
+        coachRef.current?.focus();
+    }, [stepIndex]);
+    if (!step)
+        return null;
+    const coach = coachPosition(anchorRect, coachH);
+    const ring = anchorRect ? ringBox(anchorRect) : null;
+    // evenodd polygon: full viewport minus the ring rect → dim everywhere except
+    // the highlighted panel (which stays undimmed).
+    const scrimClip = ring
+        ? `polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, ${ring.left}px ${ring.top}px, ${ring.left}px ${ring.top + ring.height}px, ${ring.left + ring.width}px ${ring.top + ring.height}px, ${ring.left + ring.width}px ${ring.top}px, ${ring.left}px ${ring.top}px)`
+        : undefined;
+    return (_jsxs("div", { className: "tour-root", role: "dialog", "aria-modal": "true", "aria-label": step.anchor, children: [_jsx("div", { className: "tour-scrim", style: scrimClip ? { clipPath: scrimClip } : undefined, onClick: (e) => e.stopPropagation() }), ring && (_jsxs(_Fragment, { children: [_jsx("div", { className: "tour-hole-sink", style: { top: ring.top, left: ring.left, width: ring.width, height: ring.height }, onClick: (e) => e.stopPropagation() }), _jsx("div", { className: "tour-ring", style: { top: ring.top, left: ring.left, width: ring.width, height: ring.height } })] })), _jsxs("div", { className: "tour-coach", ref: coachRef, tabIndex: -1, onKeyDown: (e) => {
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        onClose(false);
+                    }
+                    else if (e.key === 'ArrowRight' || e.key === 'Enter') {
+                        e.preventDefault();
+                        goNext();
+                    }
+                    else if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        goPrev();
+                    }
+                    else if (e.key === 'Tab') {
+                        const focusables = coachRef.current?.querySelectorAll('button:not(:disabled)');
+                        if (!focusables || focusables.length === 0)
+                            return;
+                        const first = focusables[0];
+                        const last = focusables[focusables.length - 1];
+                        if (e.shiftKey && document.activeElement === first) {
+                            e.preventDefault();
+                            last.focus();
+                        }
+                        else if (!e.shiftKey && document.activeElement === last) {
+                            e.preventDefault();
+                            first.focus();
+                        }
+                    }
+                }, style: { top: coach.top, left: coach.left, width: COACH_W }, children: [_jsxs("div", { className: "tour-coach-head", children: [_jsxs("span", { className: "tour-coach-count", children: [stepIndex + 1, " / ", steps.length] }), _jsx("span", { className: "tour-coach-anchor", children: step.anchor })] }), _jsx("div", { className: "tour-coach-body", children: step.body }), _jsxs("div", { className: "tour-coach-actions", children: [_jsx("button", { type: "button", className: "tour-btn tour-btn-ghost", onClick: goPrev, disabled: isFirst, children: labels.prev }), _jsx("div", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "tour-btn tour-btn-ghost", onClick: () => onClose(false), children: labels.skip }), _jsx("button", { type: "button", className: "tour-btn tour-btn-primary", onClick: goNext, children: isLast ? labels.done : labels.next })] })] })] }));
+}

package/dist/package/node/components/TourOverlay/index.js

@@ -0,0 +1 @@
+export { TourOverlay } from './TourOverlay.js';

package/dist/package/node/components/ownership.js

@@ -0,0 +1,7 @@
+export const COMPONENT_OWNERSHIP = {
+    source: 'forgeax-interface',
+    genericDestination: '@forgeax/app-shell',
+    productOwner: 'forgeax-ide',
+    status: 'migration-inventory',
+    rule: 'generic shell primitives migrate; domain UI stays with its product owner',
+};

package/dist/package/node/components/ui/SearchableMenu.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from './command.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+// Component-owned UE menu skin; kept beside the reusable interaction primitive.
+
+/**
+ * Shared UE-style searchable anchored menu. Popover owns focus/escape/collision;
+ * cmdk owns filtering and keyboard selection. Domain callers only provide data.
+ */
+export function SearchableMenu({ trigger, items, onSelect, searchPlaceholder, emptyText, ariaLabel, className, footer, }) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const groups = useMemo(() => {
+        const grouped = new Map();
+        for (const item of items) {
+            const key = item.group ?? '';
+            const group = grouped.get(key);
+            if (group)
+                group.push(item);
+            else
+                grouped.set(key, [item]);
+        }
+        return [...grouped.entries()];
+    }, [items]);
+    const changeOpen = (next) => {
+        setOpen(next);
+        if (!next)
+            setQuery('');
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: changeOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: "start", sideOffset: 4, className: cn('fx-searchable-menu', className), children: _jsxs(Command, { className: "fx-searchable-menu__command", label: ariaLabel, children: [_jsx(CommandInput, { autoFocus: true, className: "fx-searchable-menu__input", value: query, onValueChange: setQuery, placeholder: searchPlaceholder }), _jsxs(CommandList, { className: "fx-searchable-menu__list", children: [_jsx(CommandEmpty, { className: "fx-searchable-menu__empty", children: emptyText }), groups.map(([group, groupItems], groupIndex) => (_jsxs("div", { children: [groupIndex > 0 && _jsx(CommandSeparator, { className: "fx-searchable-menu__separator" }), _jsx(CommandGroup, { className: "fx-searchable-menu__group", heading: group || undefined, children: groupItems.map((item) => {
+                                                const Icon = item.icon;
+                                                const value = [item.label, item.id, ...(item.keywords ?? [])].join(' ');
+                                                return (_jsxs(CommandItem, { className: "fx-searchable-menu__item", value: value, disabled: item.disabled, onSelect: () => {
+                                                        onSelect(item);
+                                                        changeOpen(false);
+                                                    }, children: [Icon && _jsx(Icon, { className: "fx-searchable-menu__icon", "aria-hidden": true }), _jsxs("span", { className: "fx-searchable-menu__content", children: [_jsx("span", { className: "fx-searchable-menu__label", children: item.label }), item.description && (_jsx("span", { className: "fx-searchable-menu__description", children: item.description }))] })] }, item.id));
+                                            }) })] }, group || '__default')))] }), footer && _jsx("div", { className: "fx-searchable-menu__footer", children: footer })] }) })] }));
+}

package/dist/package/node/components/ui/alert-dialog.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn } from '../../lib/utils.js';
+import { buttonVariants } from './button.js';
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { ref: ref, className: cn(
+    // Top tier (--z-toplevel) so a blocking confirm/alert always sits above
+    // every app layer it can be triggered from — settings panel (--z-app-modal
+    // 1500) AND topbar menus (--z-menu 10001). At a lower z it rendered behind
+    // the settings scrim: unclickable + dimmed-illegible. See styles/tokens.css.
+    'fixed inset-0 z-[var(--z-toplevel)] bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn(
+            // Elevated modal surface on design tokens: popover (elev1) bg + white
+            // fg + token border/radius, matching the app's other floating panels.
+            'fixed left-[50%] top-[50%] z-[var(--z-toplevel)] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', className), ...props })] })));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+const AlertDialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold', className), ...props })));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: cn(buttonVariants(), className), ...props })));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, 
+    // The default `outline` variant renders bg-background (invisible on the
+    // dialog's own surface) and flips to lime `bg-accent` on hover — neither
+    // matches the app. Use the app's canonical neutral button instead: subtle
+    // white-overlay fill + faint border + secondary text + neutral hover.
+    className: cn(buttonVariants({ variant: 'outline' }), 'border-white/10 bg-white/[0.06] text-foreground/80 hover:bg-white/10 hover:text-foreground', className), ...props })));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/package/node/components/ui/button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+const buttonVariants = cva('no-motion-lift inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+            outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+            secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2',
+            sm: 'h-8 rounded-md px-3 text-xs',
+            lg: 'h-10 rounded-md px-8',
+            icon: 'h-9 w-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
+Button.displayName = 'Button';
+export { Button, buttonVariants };

package/dist/package/node/components/ui/checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center text-current'), children: _jsx(Check, { className: "h-3.5 w-3.5" }) }) })));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

package/dist/package/node/components/ui/command.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn('flex h-full w-full flex-col overflow-hidden bg-popover text-popover-foreground', className), ...props })));
+Command.displayName = CommandPrimitive.displayName;
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3", "cmdk-input-wrapper": "", children: [_jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx(CommandPrimitive.Input, { ref: ref, className: cn('flex h-10 w-full bg-transparent py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] })));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, className: cn('max-h-72 overflow-y-auto overflow-x-hidden p-1 thin-scrollbar', className), ...props })));
+CommandList.displayName = CommandPrimitive.List.displayName;
+const CommandEmpty = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className: cn('px-3 py-8 text-center text-sm text-muted-foreground', className), ...props })));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, className: cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-muted-foreground', className), ...props })));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Separator, { ref: ref, className: cn('-mx-1 h-px bg-border', className), ...props })));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Item, { ref: ref, className: cn('relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50', className), ...props })));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, };

package/dist/package/node/components/ui/dialog.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, style, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, style: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: 'var(--z-app-modal)',
+        ...style,
+    }, className: cn('fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, hideClose, style, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, style: {
+                position: 'fixed',
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                zIndex: 'var(--z-app-modal-top)',
+                ...style,
+            }, className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), ...props, children: [children, !hideClose && (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] })));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));
+DialogHeader.displayName = 'DialogHeader';
+const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+DialogFooter.displayName = 'DialogFooter';
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/package/node/components/ui/dropdown-menu.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../lib/utils.js";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props })));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, sideOffset = 4, style, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.SubContent, { ref: ref, sideOffset: sideOffset, style: { zIndex: "var(--z-menu)", ...style }, className: cn("z-[var(--z-menu)] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 origin-[--radix-dropdown-menu-content-transform-origin]", className), ...props }) })));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, onCloseAutoFocus, style, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, style: { zIndex: "var(--z-menu)", ...style }, 
+        // On close, Radix's DropdownMenu explicitly calls `triggerRef.focus()`
+        // (react-dropdown-menu's own onCloseAutoFocus). When the trigger is also a
+        // hover Tooltip trigger — as PanelShell's header menu buttons are (Tooltip
+        // > DropdownMenuTrigger > button) — that programmatic re-focus makes the
+        // tooltip pop up with NO hover and flashes a focus ring. Cancelling the
+        // auto-refocus (the event is cancelable, so preventDefault propagates
+        // through composeEventHandlers and skips the .focus()) kills both
+        // artefacts at the shared component, for every menu, without touching any
+        // call site. Callers can still opt back in via their own onCloseAutoFocus.
+        onCloseAutoFocus: onCloseAutoFocus ?? ((event) => event.preventDefault()), className: cn("z-[var(--z-menu)] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 origin-[--radix-dropdown-menu-content-transform-origin]", className), ...props }) })));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, };

package/dist/package/node/components/ui/input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+    return (_jsx("input", { type: type, className: cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ref: ref, ...props }));
+});
+Input.displayName = 'Input';
+export { Input };

package/dist/package/node/components/ui/label.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../../lib/utils.js';
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className), ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };

package/dist/package/node/components/ui/popover.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../../lib/utils.js';
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 6, style, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, style: { zIndex: 'var(--z-menu)', ...style }, className: cn('z-[var(--z-menu)] w-64 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', className), ...props }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/dist/package/node/components/ui/select.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn(
+    // border-solid is explicit because this app runs Tailwind with preflight
+    // OFF (see interface/tailwind.config.ts); without it a <button>'s UA border
+    // stays `outset`, so the `border` utility renders a beveled/"half" edge.
+    // no-motion-lift opts this <button> out of the shell's generic button
+    // hover/press lift (motion.css) — a form-control trigger must not jitter.
+    'no-motion-lift flex h-9 w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md border border-solid border-input bg-transparent px-3 py-2 text-sm text-foreground shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn(
+        // border-solid + explicit border-border: preflight is OFF, so a div's
+        // border-style defaults to `none` (invisible) and its border-color to
+        // currentColor (a bright edge). Pin both to the shadcn defaults.
+        'relative z-[var(--z-menu)] max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-solid border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/package/node/components/ui/tabs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/utils.js";
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex items-center gap-1 rounded-lg bg-muted p-1", className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-all", "hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/package/node/components/ui/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("textarea", { className: cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ref: ref, ...props }));
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };

package/dist/package/node/components/ui/tooltip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../../lib/utils.js';
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, style, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, style: { pointerEvents: 'none', ...style }, className: cn('pointer-events-none z-[var(--z-tooltip)] overflow-hidden rounded-[4px] border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-[--radix-tooltip-content-transform-origin]', className), ...props }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };