@kortix/ui 0.14.3 → 0.14.4

package/dist/files/project/components/open-change-request-dialog.js

@@ -0,0 +1,129 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert, AlertContent, AlertDescription, AlertTitle, } from '../../../primitives/alert.js';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { Input } from '../../../primitives/input.js';
+import { Label } from '../../../primitives/label.js';
+import Loading from '../../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
+import { Textarea } from '../../../primitives/textarea.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { StackIcon as Layers } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useBranches } from '../hooks/use-branches.js';
+import { useOpenChangeRequest, useVersionDiff } from '../hooks/use-change-requests.js';
+import { DiffPreviewBanner } from './diff-preview-banner.js';
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function displayBranchName(name) {
+    return UUID_RE.test(name) ? name.slice(0, 8) : name;
+}
+function FieldRow({ label, children }) {
+    return (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2.5", children: [_jsx(Label, { className: "text-muted-foreground w-12 shrink-0 text-xs font-medium tracking-wide uppercase", children: label }), children] }));
+}
+function BranchValue({ name }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(Layers, { className: "text-muted-foreground size-3 shrink-0" }), _jsx("span", { className: "text-foreground truncate font-mono text-xs", children: name })] }));
+}
+function BranchRow({ branch }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs("div", { className: "flex items-center justify-start gap-2 py-0.5", children: [_jsx(Layers, { className: "text-muted-foreground size-4 shrink-0" }), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [branch.subject && (_jsx("span", { className: "text-muted-foreground/80 truncate text-xs", children: branch.subject })), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate font-mono text-xs", children: displayBranchName(branch.name) }), branch.is_default && (_jsx(Badge, { variant: "kortix", size: "xs", className: "shrink-0 text-[11px]", children: tI18nComplete.raw('text37a8eec1ce19') }))] })] })] }));
+}
+const PICKER_TRIGGER_CLASS = 'py-2 flex-1 min-w-0 rounded-sm border-0 bg-transparent px-2 hover:bg-muted/40 focus:ring-0';
+export function OpenChangeRequestDialog({ open, onOpenChange, projectId, defaultBranch, session = null, initialHeadRef, onCreated, }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const lastSessionRef = useRef(session);
+    useEffect(() => {
+        if (session)
+            lastSessionRef.current = session;
+    }, [session]);
+    const activeSession = session ?? lastSessionRef.current;
+    const sessionMode = activeSession !== null;
+    const branchesQuery = useBranches({ enabled: open && !sessionMode, projectId });
+    const branches = branchesQuery.data?.branches ?? [];
+    const branchMap = useMemo(() => {
+        const m = new Map();
+        for (const b of branches)
+            m.set(b.name, b);
+        return m;
+    }, [branches]);
+    const headOptions = useMemo(() => branches.filter((b) => b.name !== defaultBranch), [branches, defaultBranch]);
+    const [title, setTitle] = useState('');
+    const [description, setDescription] = useState('');
+    const [pickedHeadRef, setPickedHeadRef] = useState('');
+    const [pickedBaseRef, setPickedBaseRef] = useState(defaultBranch);
+    const headRef = sessionMode ? activeSession.branch_name : pickedHeadRef;
+    // In session mode the base is derived server-side from the session's own
+    // base_ref, which is not necessarily the project default: a session started
+    // from `dev` must propose into `dev`. Sending `defaultBranch` here is what
+    // used to retarget those change requests at `main`.
+    const baseRef = sessionMode ? (activeSession.base_ref ?? defaultBranch) : pickedBaseRef;
+    useEffect(() => {
+        if (!open)
+            return;
+        setTitle('');
+        setDescription('');
+        if (sessionMode)
+            return;
+        setPickedBaseRef(defaultBranch);
+        if (initialHeadRef && initialHeadRef !== defaultBranch) {
+            setPickedHeadRef(initialHeadRef);
+        }
+        else if (headOptions.length === 1) {
+            setPickedHeadRef(headOptions[0].name);
+        }
+        else {
+            setPickedHeadRef('');
+        }
+    }, [open, sessionMode, session?.session_id, initialHeadRef, defaultBranch, headOptions.length]);
+    useEffect(() => {
+        if (!open || sessionMode)
+            return;
+        if (pickedHeadRef || headOptions.length === 0)
+            return;
+        setPickedHeadRef(headOptions[0].name);
+    }, [open, sessionMode, pickedHeadRef, headOptions]);
+    const openMutation = useOpenChangeRequest({ projectId });
+    const diffQuery = useVersionDiff(open && headRef && baseRef && headRef !== baseRef ? { from: headRef, into: baseRef } : null, { enabled: open, projectId });
+    const diffPreview = diffQuery.data;
+    const hasChanges = Boolean(diffPreview) &&
+        !diffPreview.is_same_ref &&
+        !diffPreview.is_up_to_date &&
+        diffPreview.files_changed > 0;
+    const canSubmit = Boolean(title.trim()) &&
+        Boolean(headRef) &&
+        headRef !== baseRef &&
+        !diffQuery.isLoading &&
+        hasChanges;
+    const handleSubmit = () => {
+        if (!canSubmit)
+            return;
+        openMutation.mutate({
+            title: title.trim(),
+            description: description.trim() || undefined,
+            head_ref: headRef,
+            base_ref: sessionMode ? undefined : baseRef,
+            session_id: sessionMode ? activeSession.session_id : undefined,
+        }, {
+            onSuccess: (cr) => {
+                successToast(tHardcodedUi('i18nComplete.text3c93bd037d60', { value0: cr.number }));
+                onOpenChange(false);
+                onCreated?.(cr.cr_id);
+            },
+            onError: (err) => errorToast(err.message),
+        });
+    };
+    const hasOnlyDefaultBranch = !sessionMode && !branchesQuery.isLoading && headOptions.length === 0;
+    const selectedHeadBranch = headRef ? branchMap.get(headRef) : undefined;
+    const selectedBaseBranch = branchMap.get(baseRef);
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsxs(ModalContent, { className: "gap-0 overflow-hidden p-0 lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line226JsxTextOpenChangeRequest') }), _jsx(ModalDescription, { className: "text-balance", children: sessionMode ? (_jsxs(_Fragment, { children: [tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line231JsxTextProposeMergingThisSessionAposSWorkInto'), ' ', _jsx("span", { className: "text-foreground font-mono", children: defaultBranch }), tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line232JsxTextTheSessionNeedsToHaveCommittedAndPushed')] })) : (tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line237JsxTextProposeMergingOneVersionIntoAnotherTheMerge')) })] }), hasOnlyDefaultBranch ? (_jsxs(_Fragment, { children: [_jsx(ModalBody, { className: "space-y-3 pt-0", children: _jsx(Alert, { variant: "warning", children: _jsxs(AlertContent, { children: [_jsx(AlertTitle, { children: tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line246JsxAttrTitleNoNonDefaultVersionsYet') }), _jsx(AlertDescription, { children: tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line247JsxTextStartASessionEachSessionLivesOnIts') })] }) }) }), _jsx(ModalFooter, { className: "sm:justify-end", children: _jsx(Button, { variant: "outline-ghost", size: "sm", onClick: () => onOpenChange(false), children: tHardcodedUi.raw('i18nComplete.text7d9eb7acb13e') }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(ModalBody, { className: "space-y-4 pt-0", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "cr-title", className: "text-foreground text-xs font-medium", children: tHardcodedUi.raw('i18nComplete.text7e8cd2056da7') }), _jsx(Input, { id: "cr-title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: sessionMode
+                                                ? activeSession?.name || tHardcodedUi.raw('i18nComplete.text86771dc859f8')
+                                                : tHardcodedUi.raw('i18nComplete.text5796178ec4f5'), autoFocus: true, className: "h-9", onKeyDown: (e) => {
+                                                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey))
+                                                    handleSubmit();
+                                            } })] }), _jsx("div", { className: "border-border divide-border bg-popover divide-y rounded-md border", children: sessionMode ? (_jsxs(_Fragment, { children: [_jsx(FieldRow, { label: tHardcodedUi.raw('i18nComplete.text218197693424'), children: _jsx(BranchValue, { name: `${displayBranchName(headRef)} (session)` }) }), _jsx(FieldRow, { label: tHardcodedUi.raw('i18nComplete.textae8252daa297'), children: _jsx(BranchValue, { name: baseRef }) })] })) : (_jsxs(_Fragment, { children: [_jsx(FieldRow, { label: tHardcodedUi.raw('i18nComplete.text218197693424'), children: _jsxs(Select, { value: headRef || undefined, onValueChange: setPickedHeadRef, disabled: branchesQuery.isLoading || headOptions.length === 0, children: [_jsx(SelectTrigger, { className: PICKER_TRIGGER_CLASS, children: selectedHeadBranch ? (_jsx(BranchRow, { branch: selectedHeadBranch })) : (_jsx(SelectValue, { placeholder: tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line305JsxAttrPlaceholderPickAVersion') })) }), _jsx(SelectContent, { className: "max-h-[260px] w-[420px]", children: headOptions.map((b) => (_jsx(SelectItem, { value: b.name, className: "py-1.5", children: _jsx(BranchRow, { branch: b }) }, b.name))) })] }) }), _jsx(FieldRow, { label: tHardcodedUi.raw('i18nComplete.textae8252daa297'), children: _jsxs(Select, { value: baseRef, onValueChange: setPickedBaseRef, disabled: branchesQuery.isLoading, children: [_jsx(SelectTrigger, { className: PICKER_TRIGGER_CLASS, children: selectedBaseBranch ? (_jsx(BranchRow, { branch: selectedBaseBranch })) : (_jsx(SelectValue, {})) }), _jsx(SelectContent, { className: "max-h-[260px] w-[420px]", children: branches.map((b) => (_jsx(SelectItem, { value: b.name, className: "py-1.5", children: _jsx(BranchRow, { branch: b }) }, b.name))) })] }) })] })) }), headRef && baseRef && headRef !== baseRef && (_jsx(DiffPreviewBanner, { loading: diffQuery.isLoading, error: diffQuery.error, preview: diffPreview })), !sessionMode && headRef && baseRef && headRef === baseRef && (
+                                // One sentence, so it is a description and not a title:
+                                // `AlertTitle` is `line-clamp-1` and would eat the second half.
+                                _jsx(Alert, { variant: "warning", children: _jsx(AlertContent, { children: _jsx(AlertDescription, { children: tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line354JsxTextPickTwoDifferentVersionsYouCanAposT') }) }) })), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "cr-description", className: "text-foreground text-xs font-medium", children: [tHardcodedUi.raw('i18nComplete.text526e0087cc3f'), ' ', _jsx("span", { className: "text-muted-foreground font-normal", children: tHardcodedUi.raw('i18nComplete.text0059798b7f70') })] }), _jsx(Textarea, { id: "cr-description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line369JsxAttrPlaceholderContextForReviewersWhatChangedAndWhy'), rows: 3, className: "resize-none" })] })] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { variant: "outline-ghost", size: "sm", className: "w-full sm:w-auto", onClick: () => onOpenChange(false), disabled: openMutation.isPending, children: tHardcodedUi.raw('i18nComplete.text19766ed6ccb2') }), _jsxs(Button, { size: "sm", className: "w-full sm:w-auto", disabled: !canSubmit || openMutation.isPending, onClick: handleSubmit, children: [openMutation.isPending && _jsx(Loading, { className: "size-3.5 shrink-0" }), tHardcodedUi.raw('featuresProjectFilesComponentsOpenChangeRequestDialog.line386JsxTextOpenChangeRequest')] })] })] }))] }) }));
+}

package/dist/files/project/components/own-clicks.d.ts

@@ -0,0 +1,12 @@
+import type { SyntheticEvent } from 'react';
+/**
+ * Wrap a row or card click handler so it ignores clicks that only reach it
+ * through React's tree.
+ *
+ * A dropdown menu renders its items in a portal, but React bubbles their
+ * events through the component tree, not the DOM. Without this, choosing
+ * Remove in a file card's menu also fires the card's own click, which opens
+ * the preview above the delete confirmation it just asked for (and choosing
+ * Remove on a folder navigates into the folder being deleted).
+ */
+export declare function ownClicks(handler: (() => void) | undefined): ((event: SyntheticEvent) => void) | undefined;

package/dist/files/project/components/own-clicks.js

@@ -0,0 +1,20 @@
+/**
+ * Wrap a row or card click handler so it ignores clicks that only reach it
+ * through React's tree.
+ *
+ * A dropdown menu renders its items in a portal, but React bubbles their
+ * events through the component tree, not the DOM. Without this, choosing
+ * Remove in a file card's menu also fires the card's own click, which opens
+ * the preview above the delete confirmation it just asked for (and choosing
+ * Remove on a folder navigates into the folder being deleted).
+ */
+export function ownClicks(handler) {
+    if (!handler)
+        return undefined;
+    return (event) => {
+        const host = event.currentTarget;
+        if (typeof host?.contains === 'function' && !host.contains(event.target))
+            return;
+        handler();
+    };
+}

package/dist/files/project/components/review-panel.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+import { EmptyState } from '../../../primitives/empty-state.js';
+/**
+ * Shared chrome for the two right-edge review drawers over the project repo —
+ * `ChangeRequestsPanel` (proposed changes) and `CheckpointsPanel` (version
+ * history).
+ *
+ * They were two ~300-line files with the same aside, the same header, the same
+ * `groupByDate`, and the same hand-rolled loading / error / empty blocks. That
+ * duplication is why they drifted, and it is where the border noise came from:
+ * a header rule, a filter rule, and a group header carrying BOTH `border-t`
+ * and `border-b` stacked four hairlines into the top 160px of a 400px panel.
+ *
+ * The rules here:
+ *   • ONE hairline in the whole panel body — under the top block, where the
+ *     controls stop and the content starts. Everything else separates by
+ *     spacing and type weight.
+ *   • Group labels are labels: no border, no fill, no backdrop blur, no sticky
+ *     layer, no count, no collapse chevron.
+ *   • Rows are soft chips (`mx-1 rounded-md`), not full-bleed bands with a
+ *     `border-l-2` accent rail.
+ */
+export interface DateGroup<T> {
+    label: string;
+    items: T[];
+}
+/**
+ * Bucket newest-first items under Today / Yesterday / This week / "Month Year".
+ *
+ * One generic implementation. Both panels shipped a byte-identical private
+ * copy of this, differing only in how they read a timestamp off the item.
+ */
+export declare function groupByDate<T>(items: T[], timestampOf: (item: T) => number): DateGroup<T>[];
+export declare function ReviewPanel({ open, onClose, title, actions, filters, children, }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    /** Icon buttons for the header's right edge, before Close. */
+    actions?: ReactNode;
+    /** Filter row under the title. Shares the header block's single hairline. */
+    filters?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A date bucket's heading. Deliberately just a label — the old version was a
+ * sticky, blurred, double-bordered `Disclosure` trigger with a count badge and
+ * a rotating chevron, i.e. five pieces of chrome to say one word.
+ */
+export declare function ReviewGroupLabel({ children, first }: {
+    children: ReactNode;
+    first?: boolean;
+}): import("react").JSX.Element;
+/**
+ * A list row. Soft chip rather than a full-bleed band: hover and selection
+ * read as a shape you can point at instead of a stripe across the panel.
+ */
+export declare function ReviewRow({ isActive, onSelect, onPrefetch, children, }: {
+    isActive: boolean;
+    onSelect: () => void;
+    /** Warm the row's detail data on hover / touch, before the click lands. */
+    onPrefetch?: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Row skeleton shaped like a real row, so the swap does not jump. */
+export declare function ReviewRowSkeleton({ count }: {
+    count?: number;
+}): import("react").JSX.Element;
+/** Panel-sized error state — the system component, not a hand-rolled block. */
+export declare function ReviewError({ title, error }: {
+    title: string;
+    error: unknown;
+}): import("react").JSX.Element;
+export { EmptyState as ReviewEmpty };

package/dist/files/project/components/review-panel.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { Button } from '../../../primitives/button.js';
+import Hint from '../../../primitives/hint.js';
+import { ScrollArea } from '../../../primitives/scroll-area.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { EmptyState } from '../../../primitives/empty-state.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { cn } from '../../../lib/utils.js';
+import { XIcon } from '@phosphor-icons/react';
+/**
+ * Bucket newest-first items under Today / Yesterday / This week / "Month Year".
+ *
+ * One generic implementation. Both panels shipped a byte-identical private
+ * copy of this, differing only in how they read a timestamp off the item.
+ */
+export function groupByDate(items, timestampOf) {
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const yesterday = new Date(today.getTime() - 86_400_000);
+    const thisWeekStart = new Date(today.getTime() - now.getDay() * 86_400_000);
+    const groups = new Map();
+    for (const item of items) {
+        const d = new Date(timestampOf(item));
+        const day = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+        let label;
+        if (day.getTime() >= today.getTime())
+            label = 'Today';
+        else if (day.getTime() >= yesterday.getTime())
+            label = 'Yesterday';
+        else if (day.getTime() >= thisWeekStart.getTime())
+            label = 'This week';
+        else
+            label = d.toLocaleDateString(undefined, { year: 'numeric', month: 'long' });
+        if (!groups.has(label))
+            groups.set(label, []);
+        groups.get(label).push(item);
+    }
+    return Array.from(groups.entries()).map(([label, items]) => ({ label, items }));
+}
+/* ------------------------------------------------------------------ *
+ * Shell
+ * ------------------------------------------------------------------ */
+export function ReviewPanel({ open, onClose, title, actions, filters, children, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs("aside", { "aria-hidden": !open, "aria-label": title, className: cn('absolute top-0 right-0 bottom-0 z-30 flex w-[400px] max-w-full flex-col', 'border-border bg-background border-l', 'transition-transform duration-200 ease-out motion-reduce:transition-none', open ? 'translate-x-0' : 'pointer-events-none translate-x-full'), children: [_jsxs("div", { className: "border-border/60 shrink-0 border-b", children: [_jsxs("div", { className: "flex h-11 items-center gap-1 pr-2 pl-3", children: [_jsx("h2", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: title }), actions, _jsx(Hint, { label: tI18nComplete.raw('text7d9eb7acb13e'), side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onClose, "aria-label": tI18nComplete.raw('text7d9eb7acb13e'), className: "text-muted-foreground hover:text-foreground active:scale-[0.96]", children: _jsx(XIcon, { className: "size-4" }) }) })] }), filters ? _jsx("div", { className: "px-3 pb-2", children: filters }) : null] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(ScrollArea, { className: "h-full", children: children }) })] }));
+}
+/**
+ * A date bucket's heading. Deliberately just a label — the old version was a
+ * sticky, blurred, double-bordered `Disclosure` trigger with a count badge and
+ * a rotating chevron, i.e. five pieces of chrome to say one word.
+ */
+export function ReviewGroupLabel({ children, first }) {
+    return (_jsx("h3", { className: cn('text-muted-foreground px-3 pb-1 text-xs font-medium', first ? 'pt-3' : 'pt-5'), children: children }));
+}
+/**
+ * A list row. Soft chip rather than a full-bleed band: hover and selection
+ * read as a shape you can point at instead of a stripe across the panel.
+ */
+export function ReviewRow({ isActive, onSelect, onPrefetch, children, }) {
+    return (_jsx("button", { type: "button", onClick: onSelect, onPointerEnter: onPrefetch, onFocus: onPrefetch, "aria-current": isActive || undefined, className: cn('mx-1 flex w-[calc(100%-0.5rem)] cursor-pointer items-start gap-2.5 rounded-md px-2 py-2 text-left', 'transition-colors', isActive ? 'bg-primary/[0.06]' : 'hover:bg-foreground/[0.04]'), children: children }));
+}
+/** Row skeleton shaped like a real row, so the swap does not jump. */
+export function ReviewRowSkeleton({ count = 6 }) {
+    return (_jsx("div", { className: "space-y-1 px-3 pt-3", children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: "flex items-start gap-2.5 py-2", children: [_jsx(Skeleton, { className: "mt-0.5 size-4 shrink-0 rounded-full" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }, i))) }));
+}
+/** Panel-sized error state — the system component, not a hand-rolled block. */
+export function ReviewError({ title, error }) {
+    return (_jsx(ErrorState, { size: "sm", className: "py-10", title: title, description: error instanceof Error ? error.message : undefined }));
+}
+export { EmptyState as ReviewEmpty };

package/dist/files/project/components/use-drive-row-interactions.d.ts

@@ -0,0 +1,27 @@
+import type { FileNode } from '../../../internal/files/types.js';
+import { type DroppedEntry } from '../drop-tree.js';
+interface DriveRowInteractions {
+    node: FileNode;
+    onRename?: (node: FileNode, newName: string) => void;
+    onDropMove?: (sourcePath: string, targetDirPath: string) => void;
+    onDropUpload?: (files: File[], targetDirPath: string, entries?: DroppedEntry[]) => void;
+    selectRenameInput: (el: HTMLInputElement) => void;
+}
+export declare function useDriveRowInteractions({ node, onRename, onDropMove, onDropUpload, selectRenameInput, }: DriveRowInteractions): {
+    isDragOver: boolean;
+    isDragging: boolean;
+    isRenaming: boolean;
+    setIsRenaming: (renaming: boolean) => void;
+    renameName: string;
+    setRenameName: import("react").Dispatch<import("react").SetStateAction<string>>;
+    renameInputRef: import("react").RefObject<HTMLInputElement | null>;
+    handleDragStart: (e: React.DragEvent) => void;
+    handleDragEnd: () => void;
+    handleDragOver: (e: React.DragEvent) => void;
+    handleDragEnter: (e: React.DragEvent) => void;
+    handleDragLeave: () => void;
+    handleDrop: (e: React.DragEvent) => void;
+    startRenaming: () => void;
+    confirmRename: () => void;
+};
+export {};

package/dist/files/project/components/use-drive-row-interactions.js

@@ -0,0 +1,121 @@
+'use client';
+import { useCallback, useRef, useState } from 'react';
+import { DRAG_MIME } from '../../tree/components/file-tree-item.js';
+import { droppedEntries } from '../drop-tree.js';
+import { rowDragIntent } from '../upload-batch.js';
+import { decodeDragPaths, encodeDragPaths, useDriveSelection } from './drive-selection.js';
+import { useRequestRename } from './drive-rename-dialog.js';
+export function useDriveRowInteractions({ node, onRename, onDropMove, onDropUpload, selectRenameInput, }) {
+    const isDir = node.type === 'directory';
+    const selection = useDriveSelection();
+    const requestRename = useRequestRename();
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isRenaming, setIsRenaming] = useState(false);
+    const [renameName, setRenameName] = useState('');
+    const renameInputRef = useRef(null);
+    const dragCounterRef = useRef(0);
+    const handleDragStart = useCallback((e) => {
+        // A selected item drags the whole selection with it.
+        const paths = selection?.dragPaths(node) ?? [node.path];
+        e.dataTransfer.setData(DRAG_MIME, encodeDragPaths(paths));
+        e.dataTransfer.setData('text/plain', paths.length === 1 ? node.name : `${paths.length} items`);
+        e.dataTransfer.effectAllowed = 'move';
+        setIsDragging(true);
+    }, [node, selection]);
+    const handleDragEnd = useCallback(() => setIsDragging(false), []);
+    /** `move` (internal drag), `upload` (external files), or null (ignore). */
+    const intentOf = useCallback((e) => rowDragIntent(Array.from(e.dataTransfer.types), {
+        isDirectory: isDir,
+        canMove: Boolean(onDropMove),
+        canUpload: Boolean(onDropUpload),
+        moveMime: DRAG_MIME,
+    }), [isDir, onDropMove, onDropUpload]);
+    const handleDragOver = useCallback((e) => {
+        const intent = intentOf(e);
+        if (!intent)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = intent === 'upload' ? 'copy' : 'move';
+    }, [intentOf]);
+    const handleDragEnter = useCallback((e) => {
+        if (!intentOf(e))
+            return;
+        e.preventDefault();
+        dragCounterRef.current++;
+        setIsDragOver(true);
+    }, [intentOf]);
+    const handleDragLeave = useCallback(() => {
+        if (!isDir)
+            return;
+        dragCounterRef.current--;
+        if (dragCounterRef.current <= 0) {
+            dragCounterRef.current = 0;
+            setIsDragOver(false);
+        }
+    }, [isDir]);
+    const handleDrop = useCallback((e) => {
+        const intent = intentOf(e);
+        if (!intent)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        setIsDragOver(false);
+        if (intent === 'upload') {
+            // Always notify, even for an empty transfer: this drop is stopped
+            // before the page handler, which owns the drop overlay's reset.
+            onDropUpload?.(Array.from(e.dataTransfer.files ?? []), node.path, droppedEntries(e.dataTransfer));
+            return;
+        }
+        // Never into itself or into a folder inside it.
+        for (const sourcePath of decodeDragPaths(e.dataTransfer.getData(DRAG_MIME))) {
+            if (sourcePath === node.path || node.path.startsWith(sourcePath + '/'))
+                continue;
+            onDropMove?.(sourcePath, node.path);
+        }
+    }, [intentOf, node.path, onDropMove, onDropUpload]);
+    // Enter commits, and so does the blur when the input then goes away: one
+    // rename per edit, not two (the second answered "not found").
+    const renameCommittedRef = useRef(false);
+    const startRenaming = useCallback(() => {
+        // The explorer renames in its modal; inline editing is the fallback for
+        // a host without one.
+        if (requestRename) {
+            requestRename(node);
+            return;
+        }
+        renameCommittedRef.current = false;
+        setRenameName(node.name);
+        setIsRenaming(true);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                const el = renameInputRef.current;
+                if (el)
+                    selectRenameInput(el);
+            });
+        });
+    }, [node, requestRename, selectRenameInput]);
+    // Closing the editor any other way (Escape) is a cancel: the blur that
+    // follows must not commit the half-typed name.
+    const setRenaming = useCallback((renaming) => {
+        if (!renaming)
+            renameCommittedRef.current = true;
+        setIsRenaming(renaming);
+    }, []);
+    const confirmRename = useCallback(() => {
+        if (renameCommittedRef.current)
+            return;
+        renameCommittedRef.current = true;
+        const trimmed = renameName.trim();
+        if (trimmed && trimmed !== node.name) {
+            onRename?.(node, trimmed);
+        }
+        setIsRenaming(false);
+    }, [renameName, node, onRename]);
+    return {
+        isDragOver, isDragging, isRenaming, setIsRenaming: setRenaming, renameName, setRenameName,
+        renameInputRef, handleDragStart, handleDragEnd, handleDragOver, handleDragEnter,
+        handleDragLeave, handleDrop, startRenaming, confirmRename,
+    };
+}

package/dist/files/project/components/version-selector.d.ts

@@ -0,0 +1 @@
+export declare function VersionSelector(): import("react").JSX.Element;

package/dist/files/project/components/version-selector.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { FadedScrollArea } from '../../../primitives/faded-scroll-area.js';
+import { Label } from '../../../primitives/label.js';
+import Loading from '../../../primitives/loading.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../primitives/popover.js';
+import { cn } from '../../../lib/utils.js';
+import { ArrowDownLeftIcon as ArrowDownLeft, ArrowUpRightIcon as ArrowUpRight, CheckIcon as Check, CaretUpDownIcon as ChevronsUpDown, StackIcon as Layers, MagnifyingGlassIcon as Search, } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useMemo, useState } from 'react';
+import { useProjectContext } from '../context.js';
+import { useBranches } from '../hooks/use-branches.js';
+import { useVersionStore } from '../store/version-store.js';
+/** Shared formatter, hoisted so each row render does not rebuild the Intl
+ *  machinery. Same options as the old `toLocaleDateString` call — identical output. */
+const commitDateFormatter = new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+});
+export function VersionSelector() {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const ctx = useProjectContext();
+    const projectId = ctx?.projectId ?? '';
+    const activeRef = ctx?.ref ?? '';
+    const setVersion = useVersionStore((s) => s.setVersion);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const { data, isLoading, error } = useBranches({ enabled: open || activeRef !== '' });
+    const defaultBranch = data?.default_branch ?? activeRef;
+    const isOnMain = activeRef === defaultBranch;
+    const filtered = useMemo(() => {
+        const branches = data?.branches ?? [];
+        const trimmed = query.trim().toLowerCase();
+        if (!trimmed)
+            return branches;
+        return branches.filter((b) => b.name.toLowerCase().includes(trimmed) || b.subject.toLowerCase().includes(trimmed));
+    }, [data?.branches, query]);
+    const { primary, others } = useMemo(() => {
+        const primary = [];
+        const others = [];
+        for (const b of filtered) {
+            if (b.is_default)
+                primary.push(b);
+            else
+                others.push(b);
+        }
+        return { primary, others };
+    }, [filtered]);
+    const handleSelect = (branchName) => {
+        setVersion(projectId, branchName === defaultBranch ? null : branchName);
+        setOpen(false);
+        setQuery('');
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: (v) => {
+            setOpen(v);
+            if (!v)
+                setQuery('');
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline-ghost", type: "button", size: "sm", className: cn('w-30 max-w-[300px] min-w-0 shrink-0 justify-between'), title: tHardcodedUi.raw('featuresProjectFilesComponentsVersionSelector.line88JsxAttrTitleSwitchVersion'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Layers, { className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: activeRef || 'Version' })] }), _jsx(ChevronsUpDown, { className: "text-muted-foreground size-3 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "flex w-[340px] flex-col overflow-hidden p-0", children: [_jsxs("div", { className: "border-border flex shrink-0 items-center gap-1.5 border-b px-3 py-2", children: [_jsx(Search, { className: "text-muted-foreground/60 h-3.5 w-3.5 shrink-0" }), _jsx("input", { type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: tHardcodedUi.raw('featuresProjectFilesComponentsVersionSelector.line112JsxAttrPlaceholderFindAVersion'), className: "text-foreground placeholder:text-muted-foreground/50 h-7 min-w-0 flex-1 border-0 bg-transparent px-0 text-sm outline-none", autoFocus: true })] }), _jsx("div", { className: "h-[520px] max-h-[calc(100vh-8rem)] min-h-0 shrink", children: _jsxs(FadedScrollArea, { fadeColor: "from-popover", className: "h-full overscroll-contain", children: [isLoading && (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-8 text-xs", children: [_jsx(Loading, { className: "size-3.5" }), tHardcodedUi.raw('featuresProjectFilesComponentsVersionSelector.line122JsxTextLoadingVersions')] })), error && !isLoading && (_jsx("div", { className: "text-muted-foreground px-4 py-8 text-center text-xs", children: tHardcodedUi.raw('featuresProjectFilesComponentsVersionSelector.line128JsxTextFailedToLoadVersions') })), !isLoading && !error && filtered.length === 0 && (_jsxs("div", { className: "text-muted-foreground px-4 py-8 text-center text-xs", children: [tHardcodedUi.raw('featuresProjectFilesComponentsVersionSelector.line134JsxTextNoVersionsMatch'), ' ', query ? `“${query}”` : ''] })), primary.length > 0 && (_jsxs("div", { className: cn('space-y-3 p-3', others.length > 0 ? 'pb-0' : 'pb-3'), children: [_jsx(Label, { children: tHardcodedUi.raw('featuresProjectFilesComponentsVersionSelector.line140JsxTextMainVersion') }), primary.map((b) => (_jsx(VersionRow, { branch: b, isActive: activeRef === b.name, onClick: () => handleSelect(b.name) }, b.name)))] })), others.length > 0 && (_jsxs("div", { className: "space-y-3 p-3 pb-3", children: [_jsx(Label, { children: tHardcodedUi.raw('featuresProjectFilesComponentsVersionSelector.line154JsxTextOtherVersions') }), others.map((b) => (_jsx(VersionRow, { branch: b, isActive: activeRef === b.name, onClick: () => handleSelect(b.name) }, b.name)))] }))] }) })] })] }));
+}
+function VersionRow({ branch, isActive, onClick, }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const date = branch.committed_at ? commitDateFormatter.format(new Date(branch.committed_at)) : '';
+    return (_jsxs("button", { type: "button", onClick: onClick, className: cn('border-border bg-popover hover:bg-foreground/4 flex w-full cursor-pointer items-start gap-2.5 rounded-md px-3 py-2 text-left', isActive && 'bg-primary/5'), children: [_jsx("div", { className: "mt-0.5 flex size-4 shrink-0 items-center justify-center", children: isActive ? (_jsx(Check, { className: "text-primary size-3.5" })) : (_jsx(Layers, { className: "text-muted-foreground size-3.5" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: branch.name }), branch.is_default && (_jsx(Badge, { variant: "kortix", size: "xs", children: tHardcodedUi.raw('i18nComplete.texteb814be3ca3b') }))] }), _jsxs("div", { className: "text-muted-foreground/80 mt-0.5 flex items-center gap-1.5 text-xs", children: [date && (_jsxs("span", { children: [tHardcodedUi.raw('i18nComplete.text3a5ecca188c0'), " ", date] })), !branch.is_default && branch.ahead != null && branch.behind != null && (_jsxs(_Fragment, { children: [date && _jsx("span", { className: "text-muted-foreground/40", children: "\u00B7" }), _jsxs("span", { className: "inline-flex items-center gap-1 tabular-nums", title: tHardcodedUi.raw('featuresProjectFilesComponentsVersionSelector.line234JsxAttrTitleAheadBehindMainVersion'), children: [_jsxs("span", { className: "text-kortix-green inline-flex items-center gap-0.5", children: [_jsx(ArrowUpRight, { className: "h-2.5 w-2.5" }), branch.ahead] }), _jsxs("span", { className: "text-kortix-red inline-flex items-center gap-0.5", children: [_jsx(ArrowDownLeft, { className: "h-2.5 w-2.5" }), branch.behind] })] })] }))] }), branch.subject && (_jsx("div", { className: "text-muted-foreground/70 mt-0.5 truncate text-xs", children: branch.subject }))] })] }));
+}

package/dist/files/project/context.d.ts

@@ -0,0 +1,32 @@
+/**
+ * ProjectFilesContext — gives every hook in this feature access to the
+ * current project's id and git ref. The route-level shell sets this once
+ * (see `apps/web/src/app/projects/[id]/files/page.tsx`).
+ *
+ * Hooks read context, then pass `projectId` / `ref` into the plain API
+ * functions in `./api/runtime-files.ts`. The API functions themselves
+ * stay pure — no React, no implicit ambient state.
+ */
+import { type ReactNode } from 'react';
+export interface ProjectFilesContextValue {
+    projectId: string;
+    /** Git ref (branch / tag / sha) — usually the project's default_branch */
+    ref: string;
+    /** Project default branch (so CR controls know when `ref` is a non-default version). */
+    defaultBranch?: string;
+}
+declare const ProjectFilesContext: import("react").Context<ProjectFilesContextValue | null>;
+export declare function ProjectFilesProvider({ value, children, }: {
+    value: ProjectFilesContextValue;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Read the active project context. Returns `null` outside a provider —
+ * callers should handle that gracefully (e.g. by short-circuiting their
+ * React Query `enabled` flag).
+ */
+export declare function useProjectContext(): ProjectFilesContextValue | null;
+/** Strict variant: throws if no provider above. Use in hot paths that
+ *  cannot meaningfully render without project context. */
+export declare function useProjectContextStrict(): ProjectFilesContextValue;
+export { ProjectFilesContext };

package/dist/files/project/context.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ProjectFilesContext — gives every hook in this feature access to the
+ * current project's id and git ref. The route-level shell sets this once
+ * (see `apps/web/src/app/projects/[id]/files/page.tsx`).
+ *
+ * Hooks read context, then pass `projectId` / `ref` into the plain API
+ * functions in `./api/runtime-files.ts`. The API functions themselves
+ * stay pure — no React, no implicit ambient state.
+ */
+import { createContext, useContext, useMemo } from 'react';
+const ProjectFilesContext = createContext(null);
+export function ProjectFilesProvider({ value, children, }) {
+    // Callers pass an inline object; keying on its primitives keeps consumers
+    // from re-rendering every time the parent does.
+    const { projectId, ref, defaultBranch } = value;
+    const stable = useMemo(() => ({ projectId, ref, defaultBranch }), [projectId, ref, defaultBranch]);
+    return _jsx(ProjectFilesContext.Provider, { value: stable, children: children });
+}
+/**
+ * Read the active project context. Returns `null` outside a provider —
+ * callers should handle that gracefully (e.g. by short-circuiting their
+ * React Query `enabled` flag).
+ */
+export function useProjectContext() {
+    return useContext(ProjectFilesContext);
+}
+/** Strict variant: throws if no provider above. Use in hot paths that
+ *  cannot meaningfully render without project context. */
+export function useProjectContextStrict() {
+    const ctx = useContext(ProjectFilesContext);
+    if (!ctx) {
+        throw new Error('useProjectContextStrict: <ProjectFilesProvider> is missing in the tree');
+    }
+    return ctx;
+}
+export { ProjectFilesContext };