@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/shared/ModelInput.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect, useMemo, type CSSProperties } from 'react';
+import { ChevronDown, Loader2 } from 'lucide-react';
+import { Input } from '@/components/settings/Primitives';
+import { type ProviderId, PROVIDER_PRESETS } from '@/lib/agent/providers';
+
+export interface ModelInputProps {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+  provider: ProviderId;
+  apiKey: string;
+  envKey?: boolean;
+  baseUrl?: string;
+  supportsListModels: boolean;
+  allowNoKey?: boolean;
+  browseLabel?: string;
+  noModelsLabel?: string;
+}
+
+export default function ModelInput({
+  value, onChange, placeholder, provider, apiKey, envKey, baseUrl,
+  supportsListModels, allowNoKey,
+  browseLabel = 'Browse',
+  noModelsLabel = 'No models found',
+}: ModelInputProps) {
+  const [models, setModels] = useState<string[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState('');
+  const [focused, setFocused] = useState(false);
+  const [highlightIdx, setHighlightIdx] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRowRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [dropdownStyle, setDropdownStyle] = useState<CSSProperties>({});
+  const fetchedRef = useRef(false);
+  const fetchVersionRef = useRef(0);
+  const loadingRef = useRef(false);
+
+  const hasKey = allowNoKey || !!apiKey || !!envKey || !!PROVIDER_PRESETS[provider]?.apiKeyFallback;
+
+  useEffect(() => {
+    fetchedRef.current = false;
+    fetchVersionRef.current++;
+    setModels(null);
+  }, [provider, apiKey, baseUrl]);
+
+  const fetchModels = useCallback(async (silent = false) => {
+    if (loadingRef.current) return;
+    loadingRef.current = true;
+    setLoading(true);
+    if (!silent) setError('');
+    const version = fetchVersionRef.current;
+    try {
+      const body: Record<string, string> = { provider };
+      if (apiKey) body.apiKey = apiKey;
+      if (baseUrl) body.baseUrl = baseUrl;
+
+      const res = await fetch('/api/settings/list-models', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (version !== fetchVersionRef.current) return;
+      const json = await res.json();
+      if (version !== fetchVersionRef.current) return;
+      if (json.ok && Array.isArray(json.models)) {
+        setModels(json.models);
+        fetchedRef.current = true;
+        if (!silent) setOpen(true);
+      } else if (!silent) {
+        setError(json.error || 'Failed to fetch models');
+      }
+    } catch {
+      if (version !== fetchVersionRef.current) return;
+      if (!silent) setError('Network error');
+    } finally {
+      loadingRef.current = false;
+      setLoading(false);
+    }
+  }, [provider, apiKey, baseUrl]);
+
+  const handleFocus = useCallback(() => {
+    setFocused(true);
+    if (!fetchedRef.current && supportsListModels && hasKey && !loadingRef.current) {
+      fetchModels(true);
+    }
+  }, [supportsListModels, hasKey, fetchModels]);
+
+  const filtered = useMemo(() => {
+    if (!models) return [];
+    if (!value.trim()) return models;
+    const q = value.toLowerCase();
+    return [...models].sort((a, b) => {
+      const al = a.toLowerCase(), bl = b.toLowerCase();
+      const aMatch = al.includes(q), bMatch = bl.includes(q);
+      if (aMatch !== bMatch) return aMatch ? -1 : 1;
+      if (aMatch && bMatch) {
+        const aPrefix = al.startsWith(q), bPrefix = bl.startsWith(q);
+        if (aPrefix !== bPrefix) return aPrefix ? -1 : 1;
+        const aExact = al === q, bExact = bl === q;
+        if (aExact !== bExact) return aExact ? -1 : 1;
+      }
+      return a.localeCompare(b);
+    });
+  }, [models, value]);
+
+  const showDropdown = open || (focused && models !== null && value.trim().length > 0 && filtered.length > 0);
+
+  // Compute fixed position for dropdown so it escapes overflow:auto ancestors
+  useEffect(() => {
+    if (!showDropdown || !inputRowRef.current) return;
+    const rect = inputRowRef.current.getBoundingClientRect();
+    setDropdownStyle({
+      position: 'fixed',
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+    });
+  }, [showDropdown]);
+
+  useEffect(() => { setHighlightIdx(-1); }, [filtered]);
+
+  useEffect(() => {
+    if (highlightIdx < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll('[data-model-item]');
+    items[highlightIdx]?.scrollIntoView({ block: 'nearest' });
+  }, [highlightIdx]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const items = showDropdown ? filtered : [];
+    if (!items.length) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHighlightIdx(i => (i + 1) % items.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightIdx(i => (i - 1 + items.length) % items.length);
+    } else if (e.key === 'Enter' && highlightIdx >= 0 && highlightIdx < items.length) {
+      e.preventDefault();
+      onChange(items[highlightIdx]);
+      setOpen(false);
+      setFocused(false);
+    } else if (e.key === 'Escape') {
+      setOpen(false);
+      setFocused(false);
+    }
+  }, [showDropdown, filtered, highlightIdx, onChange]);
+
+  useEffect(() => {
+    if (!showDropdown) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setFocused(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showDropdown]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <div ref={inputRowRef} className="flex gap-1.5">
+        <Input
+          value={value}
+          onChange={e => { onChange(e.target.value); if (!open) setFocused(true); }}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="flex-1"
+          autoComplete="off"
+        />
+        {supportsListModels && (
+          <button
+            type="button"
+            disabled={!hasKey || loading}
+            onClick={() => fetchModels(false)}
+            title={browseLabel}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+          >
+            {loading ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
+            {browseLabel}
+          </button>
+        )}
+      </div>
+      {error && <p className="text-xs text-error mt-1">{error}</p>}
+      {showDropdown && filtered.length > 0 && (
+        <div ref={listRef} style={dropdownStyle} className="fixed z-50 max-h-48 overflow-y-auto rounded-lg border border-border bg-popover shadow-lg">
+          {filtered.map((m, i) => {
+            const isMatch = !value.trim() || m.toLowerCase().includes(value.toLowerCase());
+            return (
+              <button
+                key={m}
+                type="button"
+                data-model-item
+                className={`w-full text-left px-3 py-1.5 text-sm transition-colors ${
+                  m === value ? 'bg-accent/60 font-medium'
+                  : i === highlightIdx ? 'bg-accent'
+                  : 'hover:bg-accent'
+                } ${!isMatch ? 'opacity-50' : ''}`}
+                onClick={() => { onChange(m); setOpen(false); setFocused(false); }}
+              >
+                {m}
+              </button>
+            );
+          })}
+        </div>
+      )}
+      {open && filtered.length === 0 && (
+        <div style={dropdownStyle} className="fixed z-50 rounded-lg border border-border bg-popover shadow-lg px-3 py-2 text-xs text-muted-foreground">
+          {noModelsLabel}
+        </div>
+      )}
+    </div>
+  );
+}

package/_standalone/components/shared/ProviderSelect.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import { useState } from 'react';
+import { CheckCircle2, ChevronDown, SkipForward, Plus } from 'lucide-react';
+import { type ProviderId, PROVIDER_PRESETS, groupedProviders, ALL_PROVIDER_IDS } from '@/lib/agent/providers';
+import { type Provider } from '@/lib/custom-endpoints';
+import { useLocale } from '@/lib/stores/locale-store';
+
+interface ProviderSelectProps {
+  value: string | 'skip';
+  onChange: (id: string | 'skip') => void;
+  showSkip?: boolean;
+  compact?: boolean;
+  /** @deprecated Use customProviders (unified Provider[]) instead */
+  configuredProviders?: Set<ProviderId>;
+  customProviders?: Provider[];
+  onAdd?: () => void;
+}
+
+export default function ProviderSelect({
+  value, onChange, showSkip = false, compact = false, configuredProviders,
+  customProviders, onAdd,
+}: ProviderSelectProps) {
+  const { locale } = useLocale();
+  const [showMore, setShowMore] = useState(false);
+  const groups = groupedProviders();
+
+  const hasConfigured = configuredProviders && configuredProviders.size > 0;
+  const hasCustom = customProviders && customProviders.length > 0;
+
+  // In compact settings mode: show provider list + Add button
+  // New model: customProviders IS the full list (unified Provider[])
+  // Legacy model: configuredProviders set + separate customProviders array
+  const useConfiguredMode = compact && (hasConfigured || hasCustom) && !showSkip;
+
+  // Legacy: Sorted configured provider IDs (for backward compat with old callers)
+  const configuredIds = hasConfigured
+    ? ALL_PROVIDER_IDS.filter(id => configuredProviders!.has(id))
+    : [];
+
+  // Add panel shows ALL providers as protocol templates (can add multiple of the same type)
+  const { primary: primaryItems, local: localItems, more: moreItems } = groups;
+  const secondaryItems = [...localItems, ...moreItems];
+
+  /* ── Compact tab button (for legacy builtin-only mode) ── */
+  const renderCompactTab = (id: ProviderId) => {
+    const preset = PROVIDER_PRESETS[id];
+    const displayName = locale === 'zh' ? preset.nameZh : preset.name;
+    const isSelected = value === id;
+    const isConfigured = configuredProviders?.has(id);
+
+    return (
+      <button
+        key={id}
+        type="button"
+        onClick={() => onChange(id)}
+        className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-left transition-all text-sm ${
+          isSelected
+            ? 'border-[var(--amber)] bg-[var(--amber-subtle)] shadow-sm'
+            : 'border-border/50 hover:border-border hover:bg-muted/30'
+        }`}
+      >
+        <span className={`font-medium ${isSelected ? 'text-foreground' : 'text-muted-foreground'}`}>
+          {displayName}
+        </span>
+        {isConfigured && !isSelected && (
+          <CheckCircle2 size={12} className="text-success ml-auto shrink-0" />
+        )}
+        {isSelected && (
+          <CheckCircle2 size={14} className="ml-auto shrink-0" style={{ color: 'var(--amber)' }} />
+        )}
+      </button>
+    );
+  };
+
+  /* ── Full card button (used in setup wizard / non-compact) ── */
+  const renderCard = (id: ProviderId) => {
+    const preset = PROVIDER_PRESETS[id];
+    const displayName = locale === 'zh' ? preset.nameZh : preset.name;
+    const description = locale === 'zh' ? preset.descriptionZh : preset.description;
+    const isSelected = value === id;
+    const isConfigured = configuredProviders?.has(id);
+
+    return (
+      <button
+        key={id}
+        type="button"
+        onClick={() => onChange(id)}
+        className="flex items-start gap-3 p-4 rounded-xl border text-left transition-all duration-150"
+        style={{
+          background: isSelected ? 'var(--amber-dim)' : 'var(--card)',
+          borderColor: isSelected ? 'var(--amber)' : 'var(--border)',
+        }}
+      >
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium" style={{ color: 'var(--foreground)' }}>{displayName}</p>
+          {description && (
+            <p className="text-xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>{description}</p>
+          )}
+          <p className={`text-xs ${description ? 'mt-1' : 'mt-0.5'}`} style={{ color: 'var(--muted-foreground)' }}>
+            {preset.defaultModel}
+          </p>
+        </div>
+        {isConfigured && !isSelected && (
+          <CheckCircle2 size={14} className="text-success shrink-0 mt-0.5" />
+        )}
+        {isSelected && (
+          <CheckCircle2 size={16} className="shrink-0 mt-0.5" style={{ color: 'var(--amber)' }} />
+        )}
+      </button>
+    );
+  };
+
+  /* ════════════════════════════════════════════
+   *  MODE 1: Provider list + Add button
+   *  (compact settings, has providers)
+   * ════════════════════════════════════════════ */
+  if (useConfiguredMode) {
+    return (
+      <div className="space-y-2">
+        {/* Providers row */}
+        <div className="flex flex-wrap gap-2">
+          {/* Legacy: built-in configured providers */}
+          {configuredIds.map(id => renderCompactTab(id))}
+
+          {/* Unified provider list (or legacy custom providers) */}
+          {customProviders?.map(cp => {
+            const isSelected = value === cp.id;
+            return (
+              <button
+                key={cp.id}
+                type="button"
+                onClick={() => onChange(cp.id)}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-left transition-all text-sm ${
+                  isSelected
+                    ? 'border-[var(--amber)] bg-[var(--amber-subtle)] shadow-sm'
+                    : 'border-border/50 hover:border-border hover:bg-muted/30'
+                }`}
+              >
+                <span className={`font-medium ${isSelected ? 'text-foreground' : 'text-muted-foreground'}`}>
+                  {cp.name}
+                </span>
+                {isSelected && (
+                  <CheckCircle2 size={14} className="ml-auto shrink-0" style={{ color: 'var(--amber)' }} />
+                )}
+              </button>
+            );
+          })}
+
+          {/* Add button — opens form directly */}
+          {onAdd && (
+            <button
+              type="button"
+              onClick={onAdd}
+              className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-dashed border-border/50 text-sm text-muted-foreground hover:border-border hover:text-foreground transition-all"
+            >
+              <Plus size={14} />
+              <span>{locale === 'zh' ? '添加' : 'Add'}</span>
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  /* ════════════════════════════════════════════
+   *  MODE 2: Full list (setup wizard / no configured providers)
+   *  Original behavior preserved
+   * ════════════════════════════════════════════ */
+
+  return (
+    <div className="space-y-2">
+      {/* Primary providers */}
+      <div className={compact ? 'flex flex-wrap gap-2' : 'grid grid-cols-1 gap-2'}>
+        {primaryItems.map(id => compact ? renderCompactTab(id) : renderCard(id))}
+      </div>
+
+      {/* More toggle */}
+      {secondaryItems.length > 0 && (
+        <>
+          <button
+            type="button"
+            onClick={() => setShowMore(!showMore)}
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors py-1"
+          >
+            <ChevronDown size={12} className={`transition-transform ${showMore ? 'rotate-180' : ''}`} />
+            {showMore
+              ? (locale === 'zh' ? '收起' : 'Show less')
+              : (locale === 'zh'
+                  ? `更多 (${secondaryItems.length})`
+                  : `More (${secondaryItems.length})`)}
+          </button>
+
+          {showMore && (
+            <div className={compact ? 'flex flex-wrap gap-2' : 'grid grid-cols-1 gap-2'}>
+              {secondaryItems.map(id => compact ? renderCompactTab(id) : renderCard(id))}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Skip option — only in onboarding */}
+      {showSkip && (
+        <button
+          type="button"
+          onClick={() => onChange('skip')}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg border text-left transition-all text-sm w-full mt-1"
+          style={{
+            background: value === 'skip' ? 'var(--amber-dim)' : 'var(--card)',
+            borderColor: value === 'skip' ? 'var(--amber)' : 'var(--border)',
+          }}
+        >
+          <SkipForward size={14} className="shrink-0" style={{ color: value === 'skip' ? 'var(--amber)' : 'var(--muted-foreground)' }} />
+          <span className={`font-medium ${value === 'skip' ? 'text-foreground' : 'text-muted-foreground'}`}>
+            {locale === 'zh' ? '暂时跳过' : 'Skip for now'}
+          </span>
+          {value === 'skip' && (
+            <CheckCircle2 size={14} className="ml-auto shrink-0" style={{ color: 'var(--amber)' }} />
+          )}
+        </button>
+      )}
+
+    </div>
+  );
+}

package/_standalone/components/ui/button.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/_standalone/components/ui/dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 overlay-backdrop duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/_standalone/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }