@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/ui/Popover.tsx

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import { cx } from "./Button.tsx";
+
+/** Open/close state plus the dismiss rules every popover shares: Esc, click outside, route change. */
+export function usePopover() {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const toggle = useCallback(() => setOpen((o) => !o), []);
+  const close = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  }, []);
+  return { open, setOpen, toggle, close, triggerRef };
+}
+
+const isNarrow = () => typeof window !== "undefined" && window.matchMedia("(max-width: 639px)").matches;
+export type PopoverDismissReason = "escape" | "outside" | "backdrop";
+
+/**
+ * A floating panel anchored to its trigger. On phones it becomes a bottom sheet so long
+ * lists stay reachable with the thumb and never run off-screen.
+ */
+export function Popover({
+  open,
+  onClose,
+  anchor,
+  children,
+  align = "start",
+  width,
+  label,
+  testId,
+  sheetOnMobile = true,
+  topmostOnly = false,
+}: {
+  open: boolean;
+  onClose: (reason?: PopoverDismissReason) => void;
+  anchor: RefObject<HTMLElement | null>;
+  children: ReactNode;
+  align?: "start" | "end";
+  /** CSS width on desktop; defaults to the trigger width (min 12rem). */
+  width?: number | "trigger";
+  label?: string;
+  testId?: string;
+  sheetOnMobile?: boolean;
+  /** Menus yield Escape to a dialog opened above them. Other popovers keep their existing behavior. */
+  topmostOnly?: boolean;
+}) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number; width: number; maxHeight: number; above: boolean } | null>(null);
+  const sheet = sheetOnMobile && isNarrow();
+
+  useLayoutEffect(() => {
+    if (!open || sheet) return;
+    const place = () => {
+      const a = anchor.current?.getBoundingClientRect();
+      if (!a) return;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const wanted = width === "trigger" || width === undefined ? Math.max(a.width, 192) : width;
+      const w = Math.max(0, Math.min(wanted, vw - 24));
+      const below = vh - a.bottom - 12;
+      const aboveSpace = a.top - 12;
+      const above = below < 240 && aboveSpace > below;
+      let left = align === "end" ? a.right - w : a.left;
+      left = Math.max(12, Math.min(left, vw - w - 12));
+      setPos({ top: above ? a.top - 4 : a.bottom + 4, left, width: w, maxHeight: Math.max(0, Math.min(420, (above ? aboveSpace : below) - 4)), above });
+    };
+    place();
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open, anchor, align, width, sheet]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        if (topmostOnly) {
+          const layers = document.querySelectorAll('[role="dialog"]');
+          if (layers[layers.length - 1] !== panelRef.current?.closest('[role="dialog"]')) return;
+          e.preventDefault();
+        }
+        e.stopPropagation();
+        onClose("escape");
+      }
+    };
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as Node;
+      if (panelRef.current?.contains(t) || anchor.current?.contains(t)) return;
+      const backdrop = e.target instanceof Element && !!e.target.closest("[data-popover-backdrop]");
+      // A menu sheet closes during pointerdown. Do not let the removed backdrop's
+      // default pointer focus immediately blur the restored trigger afterwards.
+      if (topmostOnly && backdrop) e.preventDefault();
+      onClose(backdrop ? "backdrop" : "outside");
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onDown, true);
+    };
+  }, [open, onClose, anchor, topmostOnly]);
+
+  if (!open) return null;
+  if (sheet) {
+    return createPortal(
+      <div className="safe-overlay fixed inset-0 z-50 flex items-end" role="dialog" aria-label={label}>
+        <div data-popover-backdrop className="absolute inset-0 bg-black/25" onClick={() => onClose("backdrop")} />
+        <div
+          ref={panelRef}
+          data-testid={testId}
+          className="safe-sheet-panel relative w-full overflow-y-auto overscroll-contain rounded-2xl border border-border bg-surface pb-2 shadow-2xl"
+        >
+          <div className="sticky top-0 flex justify-center bg-surface pb-1 pt-2">
+            <span className="h-1 w-10 rounded-full bg-border" aria-hidden />
+          </div>
+          {children}
+        </div>
+      </div>,
+      document.body,
+    );
+  }
+  if (!pos) return null;
+  return createPortal(
+    <div
+      ref={panelRef}
+      role="dialog"
+      aria-label={label}
+      data-testid={testId}
+      style={{
+        top: pos.top,
+        left: `clamp(max(12px, env(safe-area-inset-left)), ${pos.left}px, calc(100vw - ${pos.width}px - max(12px, env(safe-area-inset-right))))`,
+        width: `min(${pos.width}px, calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))))`,
+        maxHeight: pos.maxHeight,
+        transform: pos.above ? "translateY(-100%)" : undefined,
+      }}
+      className={cx("fixed z-50 overflow-y-auto overscroll-contain rounded-lg border border-border bg-surface py-1 shadow-lg ring-1 ring-black/5")}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+}

package/web/src/ui/ResizablePane.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+
+/** A desktop split pane; the caller keeps control of the mobile layout. */
+export function ResizablePane({ storageKey, label, defaultWidth, minWidth = 180, maxWidth = 640, remainingWidth = 240, className = "", children }: {
+  storageKey: string;
+  label: string;
+  defaultWidth: number;
+  minWidth?: number;
+  maxWidth?: number;
+  remainingWidth?: number;
+  className?: string;
+  children: ReactNode;
+}) {
+  const pane = useRef<HTMLElement>(null);
+  const [width, setWidth] = useState(() => {
+    try {
+      const saved = Number(localStorage.getItem(storageKey));
+      if (Number.isFinite(saved) && saved >= minWidth) return Math.min(saved, maxWidth);
+    } catch { /* Storage can be unavailable. */ }
+    return defaultWidth;
+  });
+  const [limit, setLimit] = useState(maxWidth);
+  const [dragging, setDragging] = useState(false);
+  const drag = useRef<{ pointerId: number; startX: number; startWidth: number; width: number; restore: () => void } | null>(null);
+  const clamp = (value: number) => Math.round(Math.max(minWidth, Math.min(value, maxWidth, (pane.current?.parentElement?.clientWidth ?? Infinity) - remainingWidth)));
+  const save = (value: number) => {
+    try { localStorage.setItem(storageKey, String(value)); } catch { /* Keep the in-memory preference. */ }
+  };
+  const finish = () => {
+    const current = drag.current;
+    if (!current) return;
+    drag.current = null;
+    current.restore();
+    save(current.width);
+    setDragging(false);
+  };
+
+  useEffect(() => {
+    const parent = pane.current?.parentElement;
+    if (!parent) return;
+    const observer = new ResizeObserver(() => {
+      setLimit(Math.max(minWidth, Math.min(maxWidth, parent.clientWidth - remainingWidth)));
+    });
+    observer.observe(parent);
+    const desktop = matchMedia("(min-width: 768px)");
+    const changed = () => { if (!desktop.matches) finish(); };
+    desktop.addEventListener("change", changed);
+    return () => {
+      observer.disconnect();
+      desktop.removeEventListener("change", changed);
+      drag.current?.restore();
+      drag.current = null;
+    };
+  }, [minWidth, maxWidth, remainingWidth, storageKey]);
+
+  return (
+    <aside
+      ref={pane}
+      className={`desktop-resizable-pane relative min-w-0 md:shrink-0 ${className}`}
+      style={{ "--pane-width": `${width}px`, "--pane-min": `${minWidth}px`, "--pane-max": `${maxWidth}px`, "--pane-remaining": `${remainingWidth}px` } as CSSProperties}
+    >
+      {children}
+      <div
+        role="separator"
+        aria-label={label}
+        aria-orientation="vertical"
+        aria-valuemin={minWidth}
+        aria-valuemax={limit}
+        aria-valuenow={Math.min(width, limit)}
+        tabIndex={0}
+        title="拖动调整宽度，双击恢复默认"
+        className={`group absolute inset-y-0 -right-1 z-20 hidden w-2 touch-none cursor-col-resize outline-none md:block ${dragging ? "is-resizing" : ""}`}
+        onPointerDown={(event) => {
+          if (!event.isPrimary || event.button !== 0 || !pane.current) return;
+          event.preventDefault();
+          event.currentTarget.focus();
+          event.currentTarget.setPointerCapture(event.pointerId);
+          const { cursor, userSelect } = document.body.style;
+          drag.current = {
+            pointerId: event.pointerId, startX: event.clientX, startWidth: pane.current.getBoundingClientRect().width,
+            width: pane.current.getBoundingClientRect().width,
+            restore: () => { document.body.style.cursor = cursor; document.body.style.userSelect = userSelect; },
+          };
+          document.body.style.cursor = "col-resize";
+          document.body.style.userSelect = "none";
+          setDragging(true);
+        }}
+        onPointerMove={(event) => {
+          const current = drag.current;
+          if (!current || current.pointerId !== event.pointerId) return;
+          current.width = clamp(current.startWidth + event.clientX - current.startX);
+          setWidth(current.width);
+        }}
+        onPointerUp={finish}
+        onPointerCancel={finish}
+        onLostPointerCapture={finish}
+        onDoubleClick={() => { setWidth(defaultWidth); save(defaultWidth); }}
+        onKeyDown={(event) => {
+          if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+          event.preventDefault();
+          const value = clamp(event.key === "Home" ? minWidth : event.key === "End" ? limit : (pane.current?.getBoundingClientRect().width ?? width) + (event.key === "ArrowLeft" ? -1 : 1) * (event.shiftKey ? 40 : 10));
+          setWidth(value);
+          save(value);
+        }}
+      >
+        <span className="absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 bg-accent opacity-0 transition-opacity group-hover:opacity-60 group-focus-visible:opacity-100 group-[.is-resizing]:opacity-100" />
+      </div>
+    </aside>
+  );
+}

package/web/src/ui/Select.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import { CONTROL, cx, type ButtonSize } from "./Button.tsx";
+import { Popover, usePopover } from "./Popover.tsx";
+import { CheckIcon, ChevronDownIcon } from "./icons.tsx";
+
+export type SelectOption<V extends string = string> = { value: V; label: ReactNode; hint?: ReactNode; text?: string };
+
+/** A styled single-select. The trigger carries data-value for tests and aria-label for screen readers. */
+export function Select<V extends string = string>({
+  id,
+  value,
+  options,
+  onChange,
+  label,
+  placeholder = "请选择",
+  triggerLabel,
+  emptyText = "暂无选项",
+  size = "md",
+  className,
+  menuWidth,
+  icon,
+  disabled,
+  testId,
+}: {
+  id?: string;
+  value: V | "";
+  options: SelectOption<V>[];
+  onChange: (v: V) => void;
+  label: string;
+  placeholder?: string;
+  triggerLabel?: ReactNode;
+  emptyText?: ReactNode;
+  size?: ButtonSize;
+  className?: string;
+  menuWidth?: number;
+  icon?: ReactNode;
+  disabled?: boolean;
+  testId?: string;
+}) {
+  const pop = usePopover();
+  const listId = useId();
+  const current = options.find((o) => o.value === value);
+  const [active, setActive] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (pop.open) setActive(Math.max(0, options.findIndex((o) => o.value === value)));
+  }, [pop.open, options, value]);
+  useEffect(() => {
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [active, pop.open]);
+
+  function choose(o: SelectOption<V>) {
+    onChange(o.value);
+    pop.close();
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (!pop.open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        pop.setOpen(true);
+      }
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (options.length === 0) return;
+      const d = e.key === "ArrowDown" ? 1 : -1;
+      setActive((i) => (i + d + options.length) % options.length);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const o = options[active];
+      if (o) choose(o);
+    } else if (e.key === "Tab") {
+      pop.setOpen(false);
+    } else if (e.key.length === 1) {
+      const i = options.findIndex((o) => (o.text ?? String(o.label)).toLowerCase().startsWith(e.key.toLowerCase()));
+      if (i >= 0) setActive(i);
+    }
+  }
+
+  return (
+    <>
+      <button
+        id={id}
+        ref={pop.triggerRef}
+        type="button"
+        disabled={disabled}
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={pop.open}
+        aria-controls={pop.open ? listId : undefined}
+        data-value={value}
+        data-testid={testId}
+        onClick={pop.toggle}
+        onKeyDown={onKey}
+        className={cx(
+          "inline-flex min-w-0 items-center justify-between rounded-md border border-border bg-surface text-left text-text transition-colors",
+          "hover:border-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:opacity-45",
+          pop.open && "border-accent/60 ring-2 ring-accent/20",
+          CONTROL[size],
+          className,
+        )}
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-1.5">
+          {icon}
+          <span className={cx("truncate", !current && "text-muted")}>{triggerLabel ?? (current ? (current.text ?? current.label) : placeholder)}</span>
+        </span>
+        <ChevronDownIcon className={cx("shrink-0 text-muted transition-transform", pop.open && "rotate-180")} />
+      </button>
+      <Popover open={pop.open} onClose={pop.close} anchor={pop.triggerRef} width={menuWidth ?? "trigger"} label={label}>
+        <div ref={listRef} id={listId} role="listbox" aria-label={label} onKeyDown={onKey}>
+          <div className="px-3 pb-1 pt-1.5 text-xs font-medium text-muted sm:hidden">{label}</div>
+          {options.length === 0 && (
+            <div role="status" className="px-4 py-4 text-center text-sm text-muted">
+              {emptyText}
+            </div>
+          )}
+          {options.map((o, i) => {
+            const selected = o.value === value;
+            return (
+              <button
+                key={o.value}
+                type="button"
+                role="option"
+                aria-selected={selected}
+                data-index={i}
+                data-value={o.value}
+                onMouseEnter={() => setActive(i)}
+                onClick={() => choose(o)}
+                className={cx(
+                  "flex w-full items-start gap-2 px-3 py-2.5 text-left text-sm sm:py-1.5",
+                  i === active && "bg-surface-2",
+                  selected && "font-medium",
+                )}
+              >
+                <span className="mt-0.5 w-4 shrink-0 text-accent">{selected && <CheckIcon />}</span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{o.label}</span>
+                  {o.hint && <span className="block text-xs font-normal text-muted">{o.hint}</span>}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </Popover>
+    </>
+  );
+}

package/web/src/ui/icons.tsx

@@ -0,0 +1,270 @@
+import type { SVGProps } from "react";
+
+/** One stroke icon style for the whole app (1.75px, rounded). */
+function Svg({ size = 16, ...props }: SVGProps<SVGSVGElement> & { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...props}
+    />
+  );
+}
+
+type P = SVGProps<SVGSVGElement> & { size?: number };
+
+export const MicIcon = (p: P) => (
+  <Svg {...p}>
+    <rect x="9" y="3" width="6" height="12" rx="3" />
+    <path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8" />
+  </Svg>
+);
+export const VolumeOffIcon = (p: P) => (
+  <Svg {...p}>
+    <path d="M11 5 6 9H3v6h3l5 4V5ZM17 9l5 6M22 9l-5 6" />
+  </Svg>
+);
+
+export const ChevronDownIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M6 9l6 6 6-6" />
+  </Svg>
+);
+export const CheckIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M5 12.5l4.5 4.5L19 7.5" />
+  </Svg>
+);
+export const XIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M6 6l12 12M18 6L6 18" />
+  </Svg>
+);
+export const MoreIcon = (p: P) => (
+  <Svg {...p}>
+    <circle cx="5.5" cy="12" r="1.6" fill="currentColor" stroke="none" />
+    <circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none" />
+    <circle cx="18.5" cy="12" r="1.6" fill="currentColor" stroke="none" />
+  </Svg>
+);
+export const GripIcon = (p: P) => <Svg size={14} {...p}><path d="M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01" strokeWidth={3} /></Svg>;
+export const DownloadIcon = (p: P) => <Svg {...p}><path d="M12 3v12m-4-4 4 4 4-4M4 16v5h16v-5" /></Svg>;
+export const UploadIcon = (p: P) => <Svg {...p}><path d="M12 16V4m-4 4 4-4 4 4M4 16v5h16v-5" /></Svg>;
+export const TargetIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <circle cx="12" cy="12" r="8" />
+    <circle cx="12" cy="12" r="3.5" />
+  </Svg>
+);
+export const HelpIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M9.5 9a2.5 2.5 0 1 1 4.2 1.8c-1 .7-1.7 1-1.7 2.2M12 16.5h.01" />
+  </Svg>
+);
+export const QuestionIcon = (p: P) => (
+  <Svg size={14} strokeWidth={3} {...p}>
+    <path d="M8 7.5a4 4 0 1 1 6.7 3c-1.5 1-2.7 1.6-2.7 3.5M12 18h.01" />
+  </Svg>
+);
+export const ClockIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M12 7.5V12l3 2" />
+  </Svg>
+);
+export const TerminalIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M5 8l4 4-4 4M12 16h7" />
+  </Svg>
+);
+export const ListIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01" />
+  </Svg>
+);
+export const SparkIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6" />
+  </Svg>
+);
+export const BrainIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M9 4a3 3 0 0 0-3 3v.5A3 3 0 0 0 4 10.5 3 3 0 0 0 5 13a3 3 0 0 0 1 5 3 3 0 0 0 3 2V4zM15 4a3 3 0 0 1 3 3v.5a3 3 0 0 1 2 3 3 3 0 0 1-1 2.5 3 3 0 0 1-1 5 3 3 0 0 1-3 2V4z" />
+  </Svg>
+);
+export const PlanIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M8 4h8l3 3v13H5V4h3z" />
+    <path d="M9 11h6M9 15h4" />
+  </Svg>
+);
+export const FolderIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M3.5 7.5A1.5 1.5 0 0 1 5 6h4l2 2h8a1.5 1.5 0 0 1 1.5 1.5v8A1.5 1.5 0 0 1 19 19H5a1.5 1.5 0 0 1-1.5-1.5z" />
+  </Svg>
+);
+export const BranchIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <circle cx="6" cy="6" r="2" />
+    <circle cx="6" cy="18" r="2" />
+    <circle cx="18" cy="8" r="2" />
+    <path d="M6 8v8M18 10c0 4-6 3-11 6" />
+  </Svg>
+);
+export const PinIcon = (p: P) => (
+  <Svg size={13} {...p}>
+    <path d="M9 4h6l-1 5 3 3v2H7v-2l3-3zM12 14v6" />
+  </Svg>
+);
+export const SearchIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <circle cx="11" cy="11" r="6.5" />
+    <path d="M20 20l-4-4" />
+  </Svg>
+);
+export const PlusIcon = (p: P) => (
+  <Svg {...p}>
+    <path d="M12 5v14M5 12h14" />
+  </Svg>
+);
+
+// ---------- settings, files, changes ----------
+
+export const PlusSmIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M12 5v14M5 12h14" />
+  </Svg>
+);
+export const FileIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M7 3.5h7l4.5 4.5v12.5H7z" />
+    <path d="M14 3.5V8h4.5" />
+  </Svg>
+);
+export const RefreshIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3" />
+    <path d="M19.5 4.5v4h-4" />
+  </Svg>
+);
+export const TrashIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5" />
+  </Svg>
+);
+export const PencilIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M4.5 19.5l1-4L16 5a2 2 0 0 1 3 3L8.5 18.5z" />
+  </Svg>
+);
+export const ArrowLeftIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M19 12H5M11 6l-6 6 6 6" />
+  </Svg>
+);
+export const ChevronRightIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M9 6l6 6-6 6" />
+  </Svg>
+);
+export const CopyIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <rect x="8.5" y="8.5" width="11" height="11" rx="1.5" />
+    <path d="M15.5 8.5V5.5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3" />
+  </Svg>
+);
+export const ExternalIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M14 4.5h5.5V10M19.5 4.5L11 13M17 14v5.5H4.5V7H10" />
+  </Svg>
+);
+export const BellIcon = (p: P) => (
+  <Svg {...p}>
+    <path d="M6 9a6 6 0 1 1 12 0c0 5 2 6.5 2 6.5H4S6 14 6 9Z" />
+    <path d="M10 19a2 2 0 0 0 4 0" />
+  </Svg>
+);
+export const GearIcon = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="3" />
+    <path d="M12 3.5v2M12 18.5v2M3.5 12h2M18.5 12h2M6 6l1.4 1.4M16.6 16.6L18 18M6 18l1.4-1.4M16.6 7.4L18 6" />
+  </Svg>
+);
+export const ShieldIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M12 3.5l7 2.5v5.5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z" />
+  </Svg>
+);
+export const ServerIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <rect x="4" y="4.5" width="16" height="6" rx="1.5" />
+    <rect x="4" y="13.5" width="16" height="6" rx="1.5" />
+    <path d="M7.5 7.5h.01M7.5 16.5h.01" />
+  </Svg>
+);
+export const PuzzleIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M5 8h3.5a2 2 0 1 1 4 0H16v3.5a2 2 0 1 1 0 4V19H5v-3.5a2 2 0 1 0 0-4z" />
+  </Svg>
+);
+export const HookIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M12 3.5v10a4 4 0 1 1-8 0v-1.5M12 3.5l-2 2M12 3.5l2 2" />
+    <circle cx="17" cy="15" r="2.5" />
+  </Svg>
+);
+export const BotIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <rect x="5" y="8" width="14" height="11" rx="2" />
+    <path d="M12 4.5V8M9.5 13h.01M14.5 13h.01M3 13v2M21 13v2" />
+  </Svg>
+);
+export const SlidersIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M5 7h9M18 7h1M5 17h1M10 17h9" />
+    <circle cx="16" cy="7" r="2" />
+    <circle cx="8" cy="17" r="2" />
+  </Svg>
+);
+export const UserIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <circle cx="12" cy="8.5" r="3.5" />
+    <path d="M5 19.5c1-3.5 3.8-5 7-5s6 1.5 7 5" />
+  </Svg>
+);
+export const DiffIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M8 4.5v7M4.5 8h7M4.5 17.5h7M16 4.5v15M13 16.5l3 3 3-3" />
+  </Svg>
+);
+export const ChatIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M5 5.5h14v10H10l-4 3.5v-3.5H5z" />
+  </Svg>
+);
+export const LinkIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3" />
+  </Svg>
+);
+export const AlertIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <path d="M12 4l8.5 15h-17z" />
+    <path d="M12 10v4M12 17h.01" />
+  </Svg>
+);
+export const ImageFileIcon = (p: P) => (
+  <Svg size={14} {...p}>
+    <rect x="4" y="5" width="16" height="14" rx="1.5" />
+    <circle cx="9" cy="10" r="1.5" />
+    <path d="M20 16l-4.5-4.5L8 19" />
+  </Svg>
+);