@annondeveloper/ui-kit 0.2.0 → 0.2.1

package/dist/form.js

@@ -131,8 +131,7 @@ function RHFToggleSwitch({
             {
               enabled: !!field.value,
               onChange: field.onChange,
-              disabled,
-              label
+              disabled
             }
           ),
           label && /* @__PURE__ */ jsx("span", { className: "text-sm text-[hsl(var(--text-primary))]", children: label })

package/dist/form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/form-integration.tsx"],"names":[],"mappings":"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","file":"form.js","sourcesContent":["'use client'\n\nimport type React from 'react'\nimport { Controller, type Control, type FieldValues, type Path, type RegisterOptions } from 'react-hook-form'\nimport { FormInput, INPUT_CLS } from './components/form-input'\nimport { Select, type SelectOption } from './components/select'\nimport { Checkbox } from './components/checkbox'\nimport { ToggleSwitch } from './components/toggle-switch'\nimport { cn } from './utils'\n\n// ── Shared error display ──────────────────────────────────────────────────\n\nfunction FieldError({ message }: { message?: string }) {\n  if (!message) return null\n  return (\n    <p className=\"mt-1 text-xs text-[hsl(var(--status-critical))]\">{message}</p>\n  )\n}\n\n// ── RHFFormInput ──────────────────────────────────────────────────────────\n\nexport interface RHFFormInputProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label: string\n  type?: string\n  placeholder?: string\n  required?: boolean\n  disabled?: boolean\n  hint?: string\n  className?: string\n  autoComplete?: string\n}\n\n/**\n * FormInput wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFFormInput<T extends FieldValues>({\n  control, name, rules, label, type = 'text',\n  placeholder, required, disabled, hint, className, autoComplete,\n}: RHFFormInputProps<T>): React.JSX.Element {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1.5', className)}>\n          <FormInput\n            label={label}\n            value={field.value ?? ''}\n            onChange={field.onChange}\n            type={type}\n            placeholder={placeholder}\n            required={required}\n            disabled={disabled}\n            hint={fieldState.error ? undefined : hint}\n            autoComplete={autoComplete}\n          />\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFSelect ─────────────────────────────────────────────────────────────\n\nexport interface RHFSelectProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  options: SelectOption[]\n  placeholder?: string\n  disabled?: boolean\n  className?: string\n  label?: string\n}\n\n/**\n * Select wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFSelect<T extends FieldValues>({\n  control, name, rules, options, placeholder, disabled, className, label,\n}: RHFSelectProps<T>): React.JSX.Element {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1.5', className)}>\n          {label && (\n            <label className=\"mb-1.5 block text-xs font-medium uppercase tracking-wider text-[hsl(var(--text-secondary))]\">\n              {label}\n            </label>\n          )}\n          <Select\n            value={field.value ?? ''}\n            onValueChange={field.onChange}\n            options={options}\n            placeholder={placeholder}\n            disabled={disabled}\n            className={fieldState.error ? 'border-[hsl(var(--status-critical))]' : undefined}\n          />\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFCheckbox ───────────────────────────────────────────────────────────\n\nexport interface RHFCheckboxProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label?: string\n  disabled?: boolean\n  className?: string\n}\n\n/**\n * Checkbox wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFCheckbox<T extends FieldValues>({\n  control, name, rules, label, disabled, className,\n}: RHFCheckboxProps<T>): React.JSX.Element {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1', className)}>\n          <div className=\"flex items-center gap-2\">\n            <Checkbox\n              checked={!!field.value}\n              onChange={(e) => field.onChange(e.target.checked)}\n              disabled={disabled}\n            />\n            {label && (\n              <span className=\"text-sm text-[hsl(var(--text-primary))]\">{label}</span>\n            )}\n          </div>\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFToggleSwitch ───────────────────────────────────────────────────────\n\nexport interface RHFToggleSwitchProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label?: string\n  disabled?: boolean\n  className?: string\n}\n\n/**\n * ToggleSwitch wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFToggleSwitch<T extends FieldValues>({\n  control, name, rules, label, disabled, className,\n}: RHFToggleSwitchProps<T>): React.JSX.Element {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1', className)}>\n          <div className=\"flex items-center gap-2\">\n            <ToggleSwitch\n              enabled={!!field.value}\n              onChange={field.onChange}\n              disabled={disabled}\n              label={label}\n            />\n            {label && (\n              <span className=\"text-sm text-[hsl(var(--text-primary))]\">{label}</span>\n            )}\n          </div>\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n"]}
+{"version":3,"sources":["../src/form-integration.tsx"],"names":[],"mappings":"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","file":"form.js","sourcesContent":["'use client'\n\nimport type React from 'react'\nimport { Controller, type Control, type FieldValues, type Path, type RegisterOptions } from 'react-hook-form'\nimport { FormInput, INPUT_CLS } from './components/form-input'\nimport { Select, type SelectOption } from './components/select'\nimport { Checkbox } from './components/checkbox'\nimport { ToggleSwitch } from './components/toggle-switch'\nimport { cn } from './utils'\n\n// ── Shared error display ──────────────────────────────────────────────────\n\nfunction FieldError({ message }: { message?: string }) {\n  if (!message) return null\n  return (\n    <p className=\"mt-1 text-xs text-[hsl(var(--status-critical))]\">{message}</p>\n  )\n}\n\n// ── RHFFormInput ──────────────────────────────────────────────────────────\n\nexport interface RHFFormInputProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label: string\n  type?: string\n  placeholder?: string\n  required?: boolean\n  disabled?: boolean\n  hint?: string\n  className?: string\n  autoComplete?: string\n}\n\n/**\n * FormInput wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFFormInput<T extends FieldValues>({\n  control, name, rules, label, type = 'text',\n  placeholder, required, disabled, hint, className, autoComplete,\n}: RHFFormInputProps<T>): React.JSX.Element {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1.5', className)}>\n          <FormInput\n            label={label}\n            value={field.value ?? ''}\n            onChange={field.onChange}\n            type={type}\n            placeholder={placeholder}\n            required={required}\n            disabled={disabled}\n            hint={fieldState.error ? undefined : hint}\n            autoComplete={autoComplete}\n          />\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFSelect ─────────────────────────────────────────────────────────────\n\nexport interface RHFSelectProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  options: SelectOption[]\n  placeholder?: string\n  disabled?: boolean\n  className?: string\n  label?: string\n}\n\n/**\n * Select wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFSelect<T extends FieldValues>({\n  control, name, rules, options, placeholder, disabled, className, label,\n}: RHFSelectProps<T>): React.JSX.Element {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1.5', className)}>\n          {label && (\n            <label className=\"mb-1.5 block text-xs font-medium uppercase tracking-wider text-[hsl(var(--text-secondary))]\">\n              {label}\n            </label>\n          )}\n          <Select\n            value={field.value ?? ''}\n            onValueChange={field.onChange}\n            options={options}\n            placeholder={placeholder}\n            disabled={disabled}\n            className={fieldState.error ? 'border-[hsl(var(--status-critical))]' : undefined}\n          />\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFCheckbox ───────────────────────────────────────────────────────────\n\nexport interface RHFCheckboxProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label?: string\n  disabled?: boolean\n  className?: string\n}\n\n/**\n * Checkbox wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFCheckbox<T extends FieldValues>({\n  control, name, rules, label, disabled, className,\n}: RHFCheckboxProps<T>): React.JSX.Element {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1', className)}>\n          <div className=\"flex items-center gap-2\">\n            <Checkbox\n              checked={!!field.value}\n              onChange={(e) => field.onChange(e.target.checked)}\n              disabled={disabled}\n            />\n            {label && (\n              <span className=\"text-sm text-[hsl(var(--text-primary))]\">{label}</span>\n            )}\n          </div>\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFToggleSwitch ───────────────────────────────────────────────────────\n\nexport interface RHFToggleSwitchProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label?: string\n  disabled?: boolean\n  className?: string\n}\n\n/**\n * ToggleSwitch wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFToggleSwitch<T extends FieldValues>({\n  control, name, rules, label, disabled, className,\n}: RHFToggleSwitchProps<T>): React.JSX.Element {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1', className)}>\n          <div className=\"flex items-center gap-2\">\n            <ToggleSwitch\n              enabled={!!field.value}\n              onChange={field.onChange}\n              disabled={disabled}\n            />\n            {label && (\n              <span className=\"text-sm text-[hsl(var(--text-primary))]\">{label}</span>\n            )}\n          </div>\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n"]}

package/dist/index.d.ts

@@ -1300,6 +1300,8 @@ interface InfiniteScrollProps<T> {
     itemHeight?: number;
     /** Content to display when items array is empty. */
     emptyState?: React.ReactNode;
+    /** Function to derive a stable key for each item. Falls back to index. */
+    getItemKey?: (item: T, index: number) => string | number;
     /** Additional class name for the scroll container. */
     className?: string;
 }
@@ -1308,7 +1310,7 @@ interface InfiniteScrollProps<T> {
  * Supports optional height-based virtualization, loading indicators, scroll-to-top,
  * empty states, and skeleton placeholders. No scroll event listeners used.
  */
-declare function InfiniteScroll<T>({ items, renderItem, loadMore, hasMore, isLoading, threshold, itemHeight, emptyState, className, }: InfiniteScrollProps<T>): React.JSX.Element;
+declare function InfiniteScroll<T>({ items, renderItem, loadMore, hasMore, isLoading, threshold, itemHeight, getItemKey, emptyState, className, }: InfiniteScrollProps<T>): React.JSX.Element;
 
 /** Props for the ColorInput component. */
 interface ColorInputProps {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { cn, clamp } from './chunk-2DWZVHZS.js';
+import { cn, Select, clamp } from './chunk-2DWZVHZS.js';
 export { Checkbox, FormInput, INPUT_CLS, LABEL_CLS, Select, TEXTAREA_CLS, ToggleSwitch, clamp, cn, defaultUtilColorMap, fmtBps, fmtBytes, fmtCompact, fmtDuration, fmtPct, fmtRelative, fmtSpeed, fmtUptime, fmtUtil, stripCidr, utilColor } from './chunk-2DWZVHZS.js';
 import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { Loader2, Check, Copy, AlertTriangle, Search, X, Filter, List, AlignJustify, LayoutList, Columns3, Download, ChevronUp, ChevronDown, ChevronsUpDown, TrendingUp, TrendingDown, ArrowDown, ChevronRight, Play, Pause, XCircle, CheckCircle2, Info, Plus, Sparkles, Hash, Regex, ArrowUp, Minus, WifiOff, Clock, CornerDownLeft, GripVertical, ChevronLeft, Eye, EyeOff } from 'lucide-react';
@@ -328,10 +328,14 @@ function AnimatedCounter({
   const prevRef = useRef(value);
   const rafRef = useRef(null);
   const [displayed, setDisplayed] = useState(value);
+  const decimalPlacesRef = useRef(
+    Number.isInteger(value) ? 0 : value.toString().split(".")[1]?.length ?? 1
+  );
   useEffect(() => {
     const from = prevRef.current;
     const to = value;
     prevRef.current = value;
+    decimalPlacesRef.current = Number.isInteger(to) ? 0 : to.toString().split(".")[1]?.length ?? 1;
     if (reduced || from === to) {
       setDisplayed(to);
       return;
@@ -356,9 +360,7 @@ function AnimatedCounter({
       }
     };
   }, [value, duration, reduced]);
-  const formatted = format ? format(displayed) : Number.isInteger(value) ? Math.round(displayed).toString() : displayed.toFixed(
-    value.toString().split(".")[1]?.length ?? 1
-  );
+  const formatted = format ? format(displayed) : decimalPlacesRef.current === 0 ? Math.round(displayed).toString() : displayed.toFixed(decimalPlacesRef.current);
   return /* @__PURE__ */ jsx("span", { className: cn("tabular-nums", className), children: formatted });
 }
 function SuccessCheckmark({ size = 20, className }) {
@@ -1012,15 +1014,12 @@ function DataTable({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
-          "select",
+          Select,
           {
-            value: pageSize,
-            onChange: (e) => table.setPageSize(Number(e.target.value)),
-            className: "rounded-md border border-[hsl(var(--border-subtle))]\n                bg-[hsl(var(--bg-surface))] px-2 py-1 text-[12px]\n                text-[hsl(var(--text-secondary))] outline-none\n                focus:border-[hsl(var(--brand-primary))] transition-colors",
-            children: PAGE_SIZES.map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
-              size,
-              " / page"
-            ] }, size))
+            value: String(pageSize),
+            onValueChange: (v) => table.setPageSize(Number(v)),
+            options: PAGE_SIZES.map((size) => ({ value: String(size), label: `${size} / page` })),
+            className: "w-[110px] text-[12px]"
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -2484,6 +2483,8 @@ function LogViewer({
         onScroll: checkAtBottom,
         className: "overflow-y-auto",
         style: { maxHeight },
+        "aria-live": "polite",
+        "aria-atomic": "false",
         children: filtered.map((entry, i) => /* @__PURE__ */ jsxs(
           "div",
           {
@@ -2850,6 +2851,10 @@ function StreamingText({
   const containerRef = useRef(null);
   const prevStreamingRef = useRef(isStreaming);
   const [copied, setCopied] = useState(false);
+  const copyTimerRef = useRef(null);
+  useEffect(() => () => {
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+  }, []);
   useEffect(() => {
     if (prevStreamingRef.current && !isStreaming) {
       onComplete?.();
@@ -2865,7 +2870,8 @@ function StreamingText({
   const handleCopy = useCallback(() => {
     void navigator.clipboard.writeText(text).then(() => {
       setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
     });
   }, [text]);
   const formatted = formatSegments(text);
@@ -2883,7 +2889,8 @@ function StreamingText({
               className: "inline-block w-[2px] h-[1.1em] align-text-bottom ml-0.5 bg-[hsl(var(--brand-primary))]",
               style: reduced ? { opacity: 1 } : {
                 animation: `streaming-cursor-blink ${speed}ms step-end infinite`
-              }
+              },
+              "aria-hidden": "true"
             }
           ),
           /* @__PURE__ */ jsx(AnimatePresence, { children: showCursor && !isStreaming && text.length > 0 && /* @__PURE__ */ jsx(
@@ -2916,13 +2923,7 @@ function StreamingText({
         "aria-label": copied ? "Copied" : "Copy to clipboard",
         children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
       }
-    ) }),
-    showCursor && isStreaming && !reduced && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes streaming-cursor-blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0; }
-          }
-        ` })
+    ) })
   ] });
 }
 var DOT_SIZES = { sm: "size-1.5", md: "size-2" };
@@ -3191,6 +3192,8 @@ function LiveFeed({
         ref: scrollRef,
         onScroll: handleScroll,
         className: "flex-1 overflow-y-auto",
+        "aria-live": "polite",
+        "aria-atomic": "false",
         children: visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12 text-sm text-[hsl(var(--text-tertiary))]", children: emptyMessage }) : /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: visibleItems.map((item) => /* @__PURE__ */ jsx(
           motion.div,
           {
@@ -3257,7 +3260,25 @@ function LiveFeed({
     ) })
   ] });
 }
+var MAX_LINES = 2e3;
 function computeDiff(oldLines, newLines) {
+  if (oldLines.length > MAX_LINES || newLines.length > MAX_LINES) {
+    const result2 = oldLines.map((l, i2) => ({
+      type: l === (newLines[i2] ?? "") ? "unchanged" : "removed",
+      content: l,
+      oldLineNo: i2 + 1,
+      newLineNo: i2 + 1
+    }));
+    for (let i2 = oldLines.length; i2 < newLines.length; i2++) {
+      result2.push({
+        type: "added",
+        content: newLines[i2],
+        oldLineNo: void 0,
+        newLineNo: i2 + 1
+      });
+    }
+    return result2;
+  }
   const m = oldLines.length;
   const n = newLines.length;
   const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
@@ -3499,8 +3520,13 @@ function toDateKey(d) {
   return d.toISOString().slice(0, 10);
 }
 function parseDate(s) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) {
+    return /* @__PURE__ */ new Date();
+  }
   const [y, m, d] = s.split("-").map(Number);
-  return new Date(y, m - 1, d);
+  const date = new Date(y, m - 1, d);
+  if (isNaN(date.getTime())) return /* @__PURE__ */ new Date();
+  return date;
 }
 function HeatmapCalendar({
   data,
@@ -3629,6 +3655,12 @@ var TYPE_ICON_COLOR = {
   warning: "text-[hsl(var(--status-warning))]",
   error: "text-[hsl(var(--status-critical))]"
 };
+var TYPE_PROGRESS_BG = {
+  info: "bg-[hsl(var(--brand-secondary))]",
+  success: "bg-[hsl(var(--status-ok))]",
+  warning: "bg-[hsl(var(--status-warning))]",
+  error: "bg-[hsl(var(--status-critical))]"
+};
 var POSITION_CLASSES = {
   "top-right": "top-4 right-4",
   "top-left": "top-4 left-4",
@@ -3768,7 +3800,7 @@ function NotificationCard({
         duration > 0 && /* @__PURE__ */ jsx("div", { className: "h-0.5 bg-[hsl(var(--bg-overlay))]", children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn("h-full transition-[width] duration-100", TYPE_COLOR[type].replace("border-l-", "bg-")),
+            className: cn("h-full transition-[width] duration-100", TYPE_PROGRESS_BG[type]),
             style: { width: `${progress}%` }
           }
         ) })
@@ -4416,7 +4448,8 @@ function CommandBar({
   const [recentIds, setRecentIds] = useState(() => {
     if (typeof window === "undefined") return [];
     try {
-      return JSON.parse(localStorage.getItem(recentKey) ?? "[]");
+      const raw = JSON.parse(localStorage.getItem(recentKey) ?? "[]");
+      return Array.isArray(raw) ? raw.filter((x) => typeof x === "string" && x.length < 256).slice(0, maxRecent) : [];
     } catch {
       return [];
     }
@@ -4667,12 +4700,16 @@ function SortableList({
   const containerRef = useRef(null);
   const startPos = useRef({ x: 0, y: 0 });
   const dragItemId = useRef(null);
+  const dragIdxRef = useRef(null);
+  const overIdxRef = useRef(null);
   const handlePointerDown = useCallback(
     (index) => (e) => {
       e.preventDefault();
       if (e.button !== 0) return;
       setDragIdx(index);
       setOverIdx(index);
+      dragIdxRef.current = index;
+      overIdxRef.current = index;
       dragItemId.current = items[index]?.id ?? null;
       startPos.current = { x: e.clientX, y: e.clientY };
       const handlePointerMove = (ev) => {
@@ -4685,6 +4722,7 @@ function SortableList({
           const midY = rect.top + rect.height / 2;
           const isOver = direction === "vertical" ? ev.clientY < midY + rect.height / 2 && ev.clientY > midY - rect.height / 2 : ev.clientX < midX + rect.width / 2 && ev.clientX > midX - rect.width / 2;
           if (isOver) {
+            overIdxRef.current = i;
             setOverIdx(i);
             break;
           }
@@ -4693,18 +4731,18 @@ function SortableList({
       const handlePointerUp = () => {
         document.removeEventListener("pointermove", handlePointerMove);
         document.removeEventListener("pointerup", handlePointerUp);
-        setDragIdx((prev) => {
-          setOverIdx((over) => {
-            if (prev !== null && over !== null && prev !== over) {
-              const newItems = [...items];
-              const [moved] = newItems.splice(prev, 1);
-              if (moved) newItems.splice(over, 0, moved);
-              setTimeout(() => onReorder(newItems), 0);
-            }
-            return null;
-          });
-          return null;
-        });
+        const prev = dragIdxRef.current;
+        const over = overIdxRef.current;
+        if (prev !== null && over !== null && prev !== over) {
+          const newItems = [...items];
+          const [moved] = newItems.splice(prev, 1);
+          if (moved) newItems.splice(over, 0, moved);
+          onReorder(newItems);
+        }
+        dragIdxRef.current = null;
+        overIdxRef.current = null;
+        setDragIdx(null);
+        setOverIdx(null);
       };
       document.addEventListener("pointermove", handlePointerMove);
       document.addEventListener("pointerup", handlePointerUp);
@@ -4840,6 +4878,7 @@ function InfiniteScroll({
   isLoading = false,
   threshold = 200,
   itemHeight,
+  getItemKey,
   emptyState,
   className
 }) {
@@ -4848,6 +4887,10 @@ function InfiniteScroll({
   const sentinelRef = useRef(null);
   const [showScrollTop, setShowScrollTop] = useState(false);
   const loadingRef = useRef(false);
+  const loadMoreRef = useRef(loadMore);
+  useEffect(() => {
+    loadMoreRef.current = loadMore;
+  }, [loadMore]);
   useEffect(() => {
     const sentinel = sentinelRef.current;
     if (!sentinel) return;
@@ -4856,7 +4899,7 @@ function InfiniteScroll({
         const entry = entries[0];
         if (entry?.isIntersecting && hasMore && !isLoading && !loadingRef.current) {
           loadingRef.current = true;
-          const result = loadMore();
+          const result = loadMoreRef.current();
           if (result && typeof result.then === "function") {
             result.then(() => {
               loadingRef.current = false;
@@ -4875,7 +4918,7 @@ function InfiniteScroll({
     );
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [hasMore, isLoading, loadMore, threshold]);
+  }, [hasMore, isLoading, threshold]);
   useEffect(() => {
     if (!isLoading) loadingRef.current = false;
   }, [isLoading]);
@@ -4934,7 +4977,7 @@ function InfiniteScroll({
       children: [
         virtualizedContent ? /* @__PURE__ */ jsx("div", { style: { height: virtualizedContent.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: virtualizedContent.offsetTop, left: 0, right: 0 }, children: virtualizedContent.visibleItems.map((item, i) => /* @__PURE__ */ jsx("div", { style: { height: itemHeight }, children: renderItem(item, virtualizedContent.startIdx + i) }, virtualizedContent.startIdx + i)) }) }) : (
           /* Non-virtualized rendering */
-          items.map((item, index) => /* @__PURE__ */ jsx("div", { children: renderItem(item, index) }, index))
+          items.map((item, index) => /* @__PURE__ */ jsx("div", { children: renderItem(item, index) }, getItemKey ? getItemKey(item, index) : index))
         ),
         isLoading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-6 gap-2", children: [
           /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 text-[hsl(var(--brand-primary))] animate-spin" }),
@@ -5025,6 +5068,9 @@ function formatColor(hex, fmt) {
   const { h, s, l } = rgbToHsl(r, g, b);
   return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
 }
+function isSafeColor(c) {
+  return /^#[0-9a-f]{3,8}$/i.test(c) || /^rgba?\(\s*[\d.]+/.test(c) || /^hsla?\(\s*[\d.]+/.test(c);
+}
 var RECENT_COLORS_KEY = "ui-kit-recent-colors";
 var MAX_RECENT = 8;
 function ColorInput({
@@ -5037,16 +5083,23 @@ function ColorInput({
   className
 }) {
   const prefersReducedMotion = useReducedMotion();
+  const isValidHex = /^#[0-9a-f]{3,8}$/i.test(value);
+  const safeValue = isValidHex ? value : "#000000";
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [textInput, setTextInput] = useState("");
   const [alpha, setAlpha] = useState(1);
   const panelRef = useRef(null);
   const satAreaRef = useRef(null);
+  const copyTimerRef = useRef(null);
+  useEffect(() => () => {
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+  }, []);
   const [recentColors, setRecentColors] = useState(() => {
     if (typeof window === "undefined") return [];
     try {
-      return JSON.parse(localStorage.getItem(RECENT_COLORS_KEY) ?? "[]");
+      const raw = JSON.parse(localStorage.getItem(RECENT_COLORS_KEY) ?? "[]");
+      return Array.isArray(raw) ? raw.filter((x) => typeof x === "string" && x.length < 256).slice(0, MAX_RECENT) : [];
     } catch {
       return [];
     }
@@ -5061,11 +5114,11 @@ function ColorInput({
       return updated;
     });
   }, []);
-  const { r, g, b } = useMemo(() => hexToRgb(value), [value]);
+  const { r, g, b } = useMemo(() => hexToRgb(safeValue), [safeValue]);
   const hsl = useMemo(() => rgbToHsl(r, g, b), [r, g, b]);
   useEffect(() => {
-    setTextInput(formatColor(value, format));
-  }, [value, format]);
+    setTextInput(formatColor(safeValue, format));
+  }, [safeValue, format]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -5131,16 +5184,17 @@ function ColorInput({
       onChange(rgbToHex(rgb.r, rgb.g, rgb.b));
       return;
     }
-    setTextInput(formatColor(value, format));
-  }, [textInput, value, format, onChange]);
+    setTextInput(formatColor(safeValue, format));
+  }, [textInput, safeValue, format, onChange]);
   const handleCopy = useCallback(async () => {
     try {
-      await navigator.clipboard.writeText(formatColor(value, format));
+      await navigator.clipboard.writeText(formatColor(safeValue, format));
       setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 1500);
     } catch {
     }
-  }, [value, format]);
+  }, [safeValue, format]);
   const markerX = hsl.s * 100;
   const markerY = (1 - (hsl.l - 0.05) / 0.9) * 100;
   return /* @__PURE__ */ jsxs("div", { ref: panelRef, className: cn("relative inline-block", className), children: [
@@ -5160,7 +5214,7 @@ function ColorInput({
             "span",
             {
               className: "h-5 w-5 rounded-md border border-[hsl(var(--border-subtle))]",
-              style: { backgroundColor: value }
+              style: { backgroundColor: isSafeColor(safeValue) ? safeValue : void 0 }
             }
           ),
           /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-[hsl(var(--text-primary))]", children: formatColor(value, format) })
@@ -5198,7 +5252,7 @@ function ColorInput({
                   style: {
                     left: `${markerX}%`,
                     top: `${Math.max(0, Math.min(100, markerY))}%`,
-                    backgroundColor: value
+                    backgroundColor: isSafeColor(safeValue) ? safeValue : void 0
                   }
                 }
               )
@@ -5228,7 +5282,7 @@ function ColorInput({
               onChange: (e) => setAlpha(Number(e.target.value) / 100),
               className: "w-full h-3 rounded-full appearance-none cursor-pointer",
               style: {
-                background: `linear-gradient(to right, transparent, ${value})`
+                background: `linear-gradient(to right, transparent, ${isSafeColor(safeValue) ? safeValue : "#000"})`
               }
             }
           ) }),
@@ -5278,7 +5332,7 @@ function ColorInput({
                   "h-6 w-6 rounded-md border transition-all",
                   value === color ? "border-[hsl(var(--brand-primary))] ring-2 ring-[hsl(var(--brand-primary)/0.3)] scale-110" : "border-[hsl(var(--border-subtle))] hover:scale-110"
                 ),
-                style: { backgroundColor: color },
+                style: { backgroundColor: isSafeColor(color) ? color : void 0 },
                 title: color
               },
               color
@@ -5294,7 +5348,7 @@ function ColorInput({
                   "h-6 w-6 rounded-md border border-[hsl(var(--border-subtle))]",
                   "hover:scale-110 transition-transform"
                 ),
-                style: { backgroundColor: color },
+                style: { backgroundColor: isSafeColor(color) ? color : void 0 },
                 title: color
               },
               color
@@ -5345,6 +5399,8 @@ function StepWizard({
   const [direction, setDirection] = useState(1);
   const [isComplete, setIsComplete] = useState(false);
   const contentRef = useRef(null);
+  const wizardRef = useRef(null);
+  const validatingRef = useRef(false);
   useEffect(() => {
     try {
       sessionStorage.setItem(sessionKey, JSON.stringify({
@@ -5362,20 +5418,25 @@ function StepWizard({
     onStepChange?.(idx);
   }, [currentStep, onStepChange]);
   const handleNext = useCallback(async () => {
+    if (validatingRef.current) return;
     const step = steps[currentStep];
     if (step?.validate) {
+      validatingRef.current = true;
       setIsValidating(true);
       try {
         const valid = await step.validate();
         if (!valid) {
           setIsValidating(false);
+          validatingRef.current = false;
           return;
         }
       } catch {
         setIsValidating(false);
+        validatingRef.current = false;
         return;
       }
       setIsValidating(false);
+      validatingRef.current = false;
     }
     setCompleted((prev) => new Set(prev).add(currentStep));
     if (currentStep < totalSteps - 1) {
@@ -5403,6 +5464,7 @@ function StepWizard({
   }, [completed, allowSkip, currentStep, goToStep]);
   useEffect(() => {
     const handler = (e) => {
+      if (!wizardRef.current?.contains(e.target)) return;
       if (e.key === "Enter" && !e.shiftKey && !(e.target instanceof HTMLTextAreaElement)) {
         handleNext();
       }
@@ -5422,7 +5484,7 @@ function StepWizard({
     })
   };
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref: wizardRef, className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ jsx("div", { className: cn(
       "mb-6",
       isHorizontal ? "flex items-center" : "flex flex-col gap-1"
@@ -5588,6 +5650,10 @@ function CopyBlock({
   const [isCollapsed, setIsCollapsed] = useState(true);
   const [needsCollapse, setNeedsCollapse] = useState(false);
   const contentRef = useRef(null);
+  const copyTimerRef = useRef(null);
+  useEffect(() => () => {
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+  }, []);
   useEffect(() => {
     if (!maxHeight || !contentRef.current) return;
     setNeedsCollapse(contentRef.current.scrollHeight > maxHeight);
@@ -5597,18 +5663,10 @@ function CopyBlock({
     try {
       await navigator.clipboard.writeText(content);
       setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
     } catch {
-      const textarea = document.createElement("textarea");
-      textarea.value = content;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
+      console.warn("Clipboard API not available");
     }
   }, [content]);
   const shouldCollapse = maxHeight && needsCollapse && isCollapsed;