@pactor-app/ui 1.2.0 → 1.7.0

package/dist/{chunk-LMEJ242M.js → chunk-PMYLC26E.js}

@@ -2,7 +2,7 @@ import {
   Icon,
   Menu,
   Sidebar
-} from "./chunk-HJPHJKVA.js";
+} from "./chunk-ZM3WJZZ7.js";
 import {
   Alert,
   AlertDescription,
@@ -71,7 +71,6 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-  Input,
   InputGroup,
   InputOTP,
   InputOTPGroup,
@@ -116,12 +115,6 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Separator,
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  Skeleton,
   Slider,
   SliderControl,
   SliderIndicator,
@@ -148,9 +141,8 @@ import {
   chartColor,
   navigationMenuTriggerStyle,
   toast
-} from "./chunk-Q5NUGUJG.js";
+} from "./chunk-E2TD6JD2.js";
 import {
-  Button,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -161,7 +153,7 @@ import {
   DrawerContent,
   DrawerHeader,
   DrawerTitle
-} from "./chunk-F3H23KYG.js";
+} from "./chunk-F42SGQNW.js";
 import {
   Accordion,
   AccordionContent,
@@ -171,16 +163,24 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Input,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Separator,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  Skeleton,
   Tooltip,
   TooltipContent,
   TooltipTrigger
-} from "./chunk-2LYMCWEJ.js";
+} from "./chunk-L4Z7MNYY.js";
 import {
+  Button,
   cn
-} from "./chunk-RQHJBTEU.js";
+} from "./chunk-WKJUCGV4.js";
 
 // src/components/register.ts
 import { Registry } from "@pactor-app/core";
@@ -930,7 +930,7 @@ function ChatInput({
     {
       "data-slot": "chat-input",
       className: cn(
-        "rounded-xl border border-border bg-background transition-shadow focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
+        "rounded-xl border border-border bg-card transition-shadow focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
         className
       ),
       style,
@@ -1164,10 +1164,312 @@ function DataTable({
   ] });
 }
 
+// src/components/components/DatePicker/index.tsx
+import { useI18n as useI18n4 } from "@pactor-app/runtime";
+import {
+  addMonths,
+  endOfMonth,
+  endOfWeek,
+  format as format2,
+  isBefore,
+  isValid as isValid2,
+  parseISO as parseISO2,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+  subDays,
+  subMonths
+} from "date-fns";
+import { enUS, zhCN } from "date-fns/locale";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { useEffect as useEffect5, useId as useId3, useState as useState7 } from "react";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+function toDateFnsLocale(locale) {
+  switch (locale) {
+    case "zh-CN":
+      return zhCN;
+    case "en-US":
+      return enUS;
+    default:
+      return enUS;
+  }
+}
+function parseDate(value) {
+  if (typeof value !== "string" || value === "") return void 0;
+  const date = parseISO2(value);
+  return isValid2(date) ? date : void 0;
+}
+function parseRange(value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const { start, end } = value;
+  const from = parseDate(start);
+  const to = parseDate(end);
+  return from && to ? { from, to } : void 0;
+}
+var RANGE_ENDPOINT_CLASSES = "[&>button]:bg-(--calendar-selected-background) [&>button]:text-(--calendar-selected-foreground) [&>button]:hover:bg-(--calendar-selected-background) [&>button]:hover:text-(--calendar-selected-foreground)";
+var IN_RANGE_CLASSES = "[&>button]:bg-(--calendar-range-background) [&>button]:text-(--calendar-range-foreground) [&>button]:rounded-none";
+function DatePicker(props) {
+  const {
+    name,
+    label,
+    rules,
+    placeholder,
+    disabled,
+    presets,
+    className,
+    style
+  } = props;
+  const mode = props.mode ?? "single";
+  const isRange = mode === "range";
+  const value = props.value;
+  const onChange = props.onChange;
+  const form = useFormContext();
+  const { locale, t } = useI18n4();
+  const dfLocale = toDateFnsLocale(locale);
+  const controlId = useId3();
+  const inForm = form?.inForm === true && typeof name === "string" && name !== "";
+  const [open, setOpen] = useState7(false);
+  useEffect5(() => {
+    if (inForm && form && name) {
+      form.registerField(name, rules, value);
+      return () => form.unregisterField(name);
+    }
+    return void 0;
+  });
+  const [innerValue, setInnerValue] = useState7(value);
+  useEffect5(() => {
+    if (!inForm) setInnerValue(value);
+  }, [inForm, value]);
+  const [pendingStart, setPendingStart] = useState7();
+  const [startMonth, setStartMonth] = useState7(
+    () => startOfMonth(/* @__PURE__ */ new Date())
+  );
+  const [endMonth, setEndMonth] = useState7(
+    () => startOfMonth(addMonths(/* @__PURE__ */ new Date(), 1))
+  );
+  const current = inForm && form && name ? form.values[name] : innerValue;
+  const setPanelMonths = (start, end) => {
+    const s = startOfMonth(start);
+    const e = startOfMonth(end);
+    setStartMonth(s);
+    setEndMonth(isBefore(e, addMonths(s, 1)) ? addMonths(s, 1) : e);
+  };
+  const handleStartMonthChange = (month) => {
+    const s = startOfMonth(month);
+    setStartMonth(s);
+    setEndMonth((prev) => isBefore(s, prev) ? prev : addMonths(s, 1));
+  };
+  const handleEndMonthChange = (month) => {
+    const e = startOfMonth(month);
+    setEndMonth(e);
+    setStartMonth((prev) => isBefore(prev, e) ? prev : subMonths(e, 1));
+  };
+  useEffect5(() => {
+    if (!isRange) return;
+    const parsed = parseRange(current);
+    setPendingStart(void 0);
+    setPanelMonths(
+      parsed?.from ?? /* @__PURE__ */ new Date(),
+      parsed?.to ?? addMonths(/* @__PURE__ */ new Date(), 1)
+    );
+  }, [isRange, current]);
+  const commit = (next) => {
+    if (inForm && form && name) {
+      form.setValue(name, next);
+    } else {
+      setInnerValue(next);
+    }
+    onChange?.(next);
+  };
+  const commitRange = (from, to) => {
+    commit({ start: format2(from, "yyyy-MM-dd"), end: format2(to, "yyyy-MM-dd") });
+  };
+  const handleSingleSelect = (date) => {
+    commit(date ? format2(date, "yyyy-MM-dd") : void 0);
+  };
+  const parsedRange = isRange ? parseRange(current) : void 0;
+  const rangeStart = pendingStart ?? parsedRange?.from;
+  const rangeEnd = pendingStart !== void 0 ? void 0 : parsedRange?.to;
+  const handleRangeDaySelect = (date) => {
+    if (!date) return;
+    const day = startOfDay(date);
+    if (pendingStart) {
+      if (isBefore(day, pendingStart)) {
+        setPendingStart(day);
+      } else {
+        commitRange(pendingStart, day);
+      }
+    } else {
+      setPendingStart(day);
+    }
+  };
+  const presetList = presets === false ? [] : presets ?? (isRange ? [{ key: "today" }, { key: "thisWeek" }, { key: "thisMonth" }] : []);
+  const resolvePreset = (preset) => {
+    const now = /* @__PURE__ */ new Date();
+    if ("key" in preset) {
+      const key = preset.key;
+      const label2 = preset.label ?? t(`pactor.datePicker.${key}`);
+      if (key === "today") return { label: label2, from: now, to: now };
+      if (key === "thisWeek") {
+        return {
+          label: label2,
+          from: startOfWeek(now, { locale: dfLocale }),
+          to: endOfWeek(now, { locale: dfLocale })
+        };
+      }
+      return { label: label2, from: startOfMonth(now), to: endOfMonth(now) };
+    }
+    if ("days" in preset) {
+      return { label: preset.label, from: subDays(now, preset.days - 1), to: now };
+    }
+    return {
+      label: preset.label,
+      from: parseDate(preset.range.start) ?? now,
+      to: parseDate(preset.range.end) ?? now
+    };
+  };
+  const handlePresetClick = (preset, from, to) => {
+    if ("key" in preset && preset.key === "today") {
+      const today = startOfDay(/* @__PURE__ */ new Date());
+      if (isRange) {
+        setPendingStart(today);
+        setPanelMonths(today, addMonths(today, 1));
+      } else {
+        commit(format2(today, "yyyy-MM-dd"));
+      }
+      return;
+    }
+    commitRange(from, to);
+  };
+  const singleDate = isRange ? void 0 : parseDate(current);
+  const hasInnerRange = isRange && rangeStart !== void 0 && rangeEnd !== void 0 && isBefore(startOfDay(rangeStart), startOfDay(rangeEnd));
+  const rangeModifiers = isRange ? {
+    ...rangeStart ? { rangeStart } : {},
+    ...rangeEnd ? { rangeEnd } : {},
+    ...hasInnerRange ? { inRange: { after: rangeStart, before: rangeEnd } } : {}
+  } : void 0;
+  const rangeModifierClassNames = rangeModifiers ? {
+    ...rangeStart ? { rangeStart: RANGE_ENDPOINT_CLASSES } : {},
+    ...rangeEnd ? { rangeEnd: RANGE_ENDPOINT_CLASSES } : {},
+    ...hasInnerRange ? { inRange: IN_RANGE_CLASSES } : {}
+  } : void 0;
+  const displayText = isRange ? typeof current === "object" && current !== null ? `${current.start} ~ ${current.end}` : "" : typeof current === "string" ? current : "";
+  const placeholderText = placeholder ?? t(isRange ? "pactor.datePicker.placeholderRange" : "pactor.datePicker.placeholder");
+  const calendar = isRange ? /* @__PURE__ */ jsxs18("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx23(
+      "div",
+      {
+        "data-slot": "datepicker-start-panel",
+        className: "border-r border-border",
+        children: /* @__PURE__ */ jsx23(
+          Calendar,
+          {
+            mode: "single",
+            month: startMonth,
+            onMonthChange: handleStartMonthChange,
+            onSelect: handleRangeDaySelect,
+            modifiers: rangeModifiers,
+            modifiersClassNames: rangeModifierClassNames,
+            locale: dfLocale
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx23("div", { "data-slot": "datepicker-end-panel", children: /* @__PURE__ */ jsx23(
+      Calendar,
+      {
+        mode: "single",
+        month: endMonth,
+        onMonthChange: handleEndMonthChange,
+        onSelect: handleRangeDaySelect,
+        modifiers: rangeModifiers,
+        modifiersClassNames: rangeModifierClassNames,
+        locale: dfLocale
+      }
+    ) })
+  ] }) : /* @__PURE__ */ jsx23(
+    Calendar,
+    {
+      mode: "single",
+      selected: singleDate,
+      onSelect: handleSingleSelect,
+      locale: dfLocale
+    }
+  );
+  const control = /* @__PURE__ */ jsxs18(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs18(
+      PopoverTrigger,
+      {
+        id: controlId,
+        type: "button",
+        disabled,
+        "data-slot": "datepicker-trigger",
+        className: cn(
+          "flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
+          displayText === "" && "text-muted-foreground",
+          !inForm && className
+        ),
+        style: inForm ? void 0 : style,
+        children: [
+          /* @__PURE__ */ jsx23("span", { className: "min-w-0 flex-1 truncate text-left", children: displayText === "" ? placeholderText : displayText }),
+          /* @__PURE__ */ jsx23(CalendarIcon, { className: "size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx23(PopoverContent, { className: "w-auto p-0", children: presetList.length > 0 ? /* @__PURE__ */ jsxs18("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx23(
+        "div",
+        {
+          "data-slot": "datepicker-presets",
+          className: "flex flex-col gap-1 border-r border-border p-3",
+          children: presetList.map((preset, index) => {
+            const resolved = resolvePreset(preset);
+            return /* @__PURE__ */ jsx23(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer rounded-md px-3 py-1.5 text-left text-sm whitespace-nowrap hover:bg-accent hover:text-accent-foreground",
+                onClick: () => handlePresetClick(preset, resolved.from, resolved.to),
+                children: resolved.label
+              },
+              `${resolved.label}-${index}`
+            );
+          })
+        }
+      ),
+      calendar
+    ] }) : calendar })
+  ] });
+  if (inForm && form && name) {
+    const error = form.errors[name];
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        "data-slot": "form-item",
+        className: cn(formItemClass(form.layout), className),
+        style,
+        children: [
+          label ? /* @__PURE__ */ jsx23(
+            "label",
+            {
+              htmlFor: controlId,
+              className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap",
+              children: label
+            }
+          ) : null,
+          control,
+          error ? /* @__PURE__ */ jsx23("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
+        ]
+      }
+    );
+  }
+  return control;
+}
+
 // src/components/components/Dialog/index.tsx
 import { useRenderer as useRenderer6 } from "@pactor-app/runtime";
-import { useState as useState7 } from "react";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 function Dialog2({
   title,
   description,
@@ -1179,10 +1481,10 @@ function Dialog2({
   style
 }) {
   const { renderChildren } = useRenderer6();
-  const [innerOpen, setInnerOpen] = useState7(false);
+  const [innerOpen, setInnerOpen] = useState8(false);
   const controlled = open !== void 0;
   const visible = controlled ? open : innerOpen;
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Dialog,
     {
       open: visible,
@@ -1195,7 +1497,7 @@ function Dialog2({
         }
       },
       children: [
-        trigger ? /* @__PURE__ */ jsx23(
+        trigger ? /* @__PURE__ */ jsx24(
           DialogTrigger,
           {
             nativeButton: false,
@@ -1203,10 +1505,10 @@ function Dialog2({
             children: renderChildren([trigger])
           }
         ) : null,
-        /* @__PURE__ */ jsxs18(DialogContent, { className, style, children: [
-          title || description ? /* @__PURE__ */ jsxs18(DialogHeader, { children: [
-            title ? /* @__PURE__ */ jsx23(DialogTitle, { children: title }) : null,
-            description ? /* @__PURE__ */ jsx23(DialogDescription, { children: description }) : null
+        /* @__PURE__ */ jsxs19(DialogContent, { className, style, children: [
+          title || description ? /* @__PURE__ */ jsxs19(DialogHeader, { children: [
+            title ? /* @__PURE__ */ jsx24(DialogTitle, { children: title }) : null,
+            description ? /* @__PURE__ */ jsx24(DialogDescription, { children: description }) : null
           ] }) : null,
           children
         ] })
@@ -1216,7 +1518,7 @@ function Dialog2({
 }
 
 // src/components/components/Drawer/index.tsx
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 function Drawer2({
   title,
   open,
@@ -1226,7 +1528,7 @@ function Drawer2({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Drawer,
     {
       direction: placement,
@@ -1236,16 +1538,16 @@ function Drawer2({
           onClose?.();
         }
       },
-      children: /* @__PURE__ */ jsxs19(DrawerContent, { className, style, children: [
-        title ? /* @__PURE__ */ jsx24(DrawerHeader, { children: /* @__PURE__ */ jsx24(DrawerTitle, { children: title }) }) : null,
-        /* @__PURE__ */ jsx24("div", { className: "flex-1 overflow-auto p-4", children })
+      children: /* @__PURE__ */ jsxs20(DrawerContent, { className, style, children: [
+        title ? /* @__PURE__ */ jsx25(DrawerHeader, { children: /* @__PURE__ */ jsx25(DrawerTitle, { children: title }) }) : null,
+        /* @__PURE__ */ jsx25("div", { className: "flex-1 overflow-auto p-4", children })
       ] })
     }
   );
 }
 
 // src/components/components/DropdownMenu/index.tsx
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function DropdownMenu2({
   items = [],
   onSelect,
@@ -1253,8 +1555,8 @@ function DropdownMenu2({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsxs20(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs21(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx26(
       DropdownMenuTrigger,
       {
         nativeButton: false,
@@ -1262,14 +1564,14 @@ function DropdownMenu2({
         children
       }
     ),
-    /* @__PURE__ */ jsx25(DropdownMenuContent, { className, style, children: items.map((item) => /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsx26(DropdownMenuContent, { className, style, children: items.map((item) => /* @__PURE__ */ jsxs21(
       DropdownMenuItem,
       {
         variant: item.danger ? "destructive" : "default",
         disabled: item.disabled,
         onClick: () => onSelect?.(item.value),
         children: [
-          item.icon ? /* @__PURE__ */ jsx25(Icon, { name: item.icon, size: "sm" }) : null,
+          item.icon ? /* @__PURE__ */ jsx26(Icon, { name: item.icon, size: "sm" }) : null,
           item.label
         ]
       },
@@ -1279,34 +1581,34 @@ function DropdownMenu2({
 }
 
 // src/components/components/Empty/index.tsx
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function Empty2({ title, description, children, className, style }) {
-  return /* @__PURE__ */ jsxs21(Empty, { className, style, children: [
-    /* @__PURE__ */ jsxs21(EmptyHeader, { children: [
-      title ? /* @__PURE__ */ jsx26(EmptyTitle, { children: title }) : null,
-      description ? /* @__PURE__ */ jsx26(EmptyDescription, { children: description }) : null
+  return /* @__PURE__ */ jsxs22(Empty, { className, style, children: [
+    /* @__PURE__ */ jsxs22(EmptyHeader, { children: [
+      title ? /* @__PURE__ */ jsx27(EmptyTitle, { children: title }) : null,
+      description ? /* @__PURE__ */ jsx27(EmptyDescription, { children: description }) : null
     ] }),
-    children ? /* @__PURE__ */ jsx26(EmptyContent, { children }) : null
+    children ? /* @__PURE__ */ jsx27(EmptyContent, { children }) : null
   ] });
 }
 
 // src/components/components/Field/index.tsx
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function Field2({ label, description, error, children, className, style }) {
-  return /* @__PURE__ */ jsxs22(Field, { className, style, children: [
-    label ? /* @__PURE__ */ jsx27(FieldLabel, { children: label }) : null,
+  return /* @__PURE__ */ jsxs23(Field, { className, style, children: [
+    label ? /* @__PURE__ */ jsx28(FieldLabel, { children: label }) : null,
     children,
-    description ? /* @__PURE__ */ jsx27(FieldDescription, { children: description }) : null,
-    error ? /* @__PURE__ */ jsx27(FieldError, { match: true, children: error }) : null
+    description ? /* @__PURE__ */ jsx28(FieldDescription, { children: description }) : null,
+    error ? /* @__PURE__ */ jsx28(FieldError, { match: true, children: error }) : null
   ] });
 }
 
 // src/components/components/Flex/index.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var gapClass = {
-  small: "gap-2",
-  middle: "gap-4",
-  large: "gap-6"
+  small: "gap-(--flex-gap-sm)",
+  middle: "gap-(--flex-gap-md)",
+  large: "gap-(--flex-gap-lg)"
 };
 var justifyClass = {
   start: "justify-start",
@@ -1332,13 +1634,14 @@ function Flex({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       "data-slot": "flex",
       className: cn(
         "flex",
         direction === "vertical" && "flex-col",
+        gap === void 0 && "gap-(--flex-gap)",
         typeof gap === "string" && gapClass[gap],
         justify && justifyClass[justify],
         align && alignClass[align],
@@ -1351,9 +1654,9 @@ function Flex({
 }
 
 // src/components/components/Footer/index.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Footer({ className, style, children }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "footer",
     {
       "data-slot": "layout-footer",
@@ -1371,12 +1674,12 @@ function Footer({ className, style, children }) {
 import { useRenderer as useRenderer7 } from "@pactor-app/runtime";
 import {
   useCallback,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useMemo as useMemo2,
   useRef as useRef2,
-  useState as useState8
+  useState as useState9
 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function isEmpty(value) {
   return value === void 0 || value === null || value === "";
 }
@@ -1391,16 +1694,16 @@ function Form({
   onValuesChange
 }) {
   const { context } = useRenderer7();
-  const [values, setValues] = useState8(() => ({
+  const [values, setValues] = useState9(() => ({
     ...initialValues
   }));
-  const [errors, setErrors] = useState8({});
+  const [errors, setErrors] = useState9({});
   const fieldRulesRef = useRef2(/* @__PURE__ */ new Map());
   const mergedInitialFieldsRef = useRef2(/* @__PURE__ */ new Set());
   const setValuesBatch = useCallback((partial) => {
     setValues((prev) => ({ ...prev, ...partial }));
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     context.forms.register(name, { setValues: setValuesBatch });
     return () => {
       context.forms.unregister(name);
@@ -1457,7 +1760,7 @@ function Form({
     context.state.set("form", values);
     onSubmit?.(values);
   };
-  return /* @__PURE__ */ jsx30(FormContextProvider, { value: formContext, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(FormContextProvider, { value: formContext, children: /* @__PURE__ */ jsx31(
     "form",
     {
       "data-slot": "form",
@@ -1471,29 +1774,29 @@ function Form({
 
 // src/components/components/Grid/index.tsx
 import { Children } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Grid({ columns = 1, gap, className, style, children }) {
   const cols = Math.max(1, columns);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       "data-slot": "grid",
       "data-columns": cols,
-      className: cn("grid", className),
+      className: cn("grid", gap === void 0 && "gap-(--grid-gap)", className),
       style: {
         gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
         ...gap !== void 0 ? { gap } : {},
         ...style
       },
-      children: Children.map(children, (child, index) => /* @__PURE__ */ jsx31("div", { "data-slot": "grid-item", children: child }, index))
+      children: Children.map(children, (child, index) => /* @__PURE__ */ jsx32("div", { "data-slot": "grid-item", children: child }, index))
     }
   );
 }
 
 // src/components/components/Header/index.tsx
-import { useI18n as useI18n4 } from "@pactor-app/runtime";
+import { useI18n as useI18n5 } from "@pactor-app/runtime";
 import { ChevronDownIcon } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 var menuItemClass = "flex items-center gap-1 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:bg-accent/50 hover:text-foreground";
 function Header({
   logo,
@@ -1520,14 +1823,14 @@ function Header({
   const hasLocales = locales !== void 0 && locales.length > 0;
   const hasUser = user !== void 0;
   const rootClass = cn(
-    "flex h-14 shrink-0 items-center gap-4 border-b bg-background px-4",
+    "flex h-14 shrink-0 items-center gap-4 border-b bg-card px-4",
     className
   );
   if (!hasBrand && !dropdown && !hasMenu && !hasUser && !hasLocales) {
-    return /* @__PURE__ */ jsx32("header", { "data-slot": "layout-header", className: rootClass, style, children });
+    return /* @__PURE__ */ jsx33("header", { "data-slot": "layout-header", className: rootClass, style, children });
   }
-  const brandNode = hasBrand && /* @__PURE__ */ jsxs23("div", { "data-slot": "header-brand", className: "flex items-center gap-2", children: [
-    logo !== void 0 && /* @__PURE__ */ jsx32(
+  const brandNode = hasBrand && /* @__PURE__ */ jsxs24("div", { "data-slot": "header-brand", className: "flex items-center gap-2", children: [
+    logo !== void 0 && /* @__PURE__ */ jsx33(
       "img",
       {
         "data-slot": "header-brand-logo",
@@ -1536,23 +1839,23 @@ function Header({
         className: "h-8 w-8 shrink-0 object-contain"
       }
     ),
-    title !== void 0 && /* @__PURE__ */ jsx32("span", { "data-slot": "header-brand-title", className: "text-base font-semibold", children: title })
+    title !== void 0 && /* @__PURE__ */ jsx33("span", { "data-slot": "header-brand-title", className: "text-base font-semibold", children: title })
   ] });
-  const dropdownNode = dropdown !== void 0 && /* @__PURE__ */ jsx32(HeaderDropdownArea, { dropdown, onSelect: onDropdownSelect });
+  const dropdownNode = dropdown !== void 0 && /* @__PURE__ */ jsx33(HeaderDropdownArea, { dropdown, onSelect: onDropdownSelect });
   const showLeft = brandLeft || dropdownLeft || hasMenu;
   const showRight = dropdownRight || brandRight || hasLocales || hasUser;
-  return /* @__PURE__ */ jsxs23("header", { "data-slot": "layout-header", className: rootClass, style, children: [
-    showLeft && /* @__PURE__ */ jsxs23("div", { "data-slot": "header-left", className: "flex items-center gap-4", children: [
+  return /* @__PURE__ */ jsxs24("header", { "data-slot": "layout-header", className: rootClass, style, children: [
+    showLeft && /* @__PURE__ */ jsxs24("div", { "data-slot": "header-left", className: "flex items-center gap-4", children: [
       brandLeft && brandNode,
       dropdownLeft && dropdownNode,
-      hasMenu && /* @__PURE__ */ jsx32(HeaderMenuArea, { items: menu, onSelect: onMenuSelect })
+      hasMenu && /* @__PURE__ */ jsx33(HeaderMenuArea, { items: menu, onSelect: onMenuSelect })
     ] }),
-    /* @__PURE__ */ jsx32("div", { "data-slot": "header-center", className: "flex flex-1 items-center gap-4", children }),
-    showRight && /* @__PURE__ */ jsxs23("div", { "data-slot": "header-right", className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx33("div", { "data-slot": "header-center", className: "flex flex-1 items-center gap-4", children }),
+    showRight && /* @__PURE__ */ jsxs24("div", { "data-slot": "header-right", className: "flex items-center gap-4", children: [
       dropdownRight && dropdownNode,
       brandRight && brandNode,
-      hasLocales && /* @__PURE__ */ jsx32(HeaderLocalesArea, { locales, onSelect: onLocaleChange }),
-      hasUser && /* @__PURE__ */ jsx32(HeaderUserArea, { user, onSelect: onUserSelect })
+      hasLocales && /* @__PURE__ */ jsx33(HeaderLocalesArea, { locales, onSelect: onLocaleChange }),
+      hasUser && /* @__PURE__ */ jsx33(HeaderUserArea, { user, onSelect: onUserSelect })
     ] })
   ] });
 }
@@ -1560,25 +1863,25 @@ function HeaderDropdownArea({
   dropdown,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs23(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs24(
       DropdownMenuTrigger,
       {
         "data-slot": "header-dropdown",
-        className: cn(menuItemClass, "outline-hidden"),
+        className: cn(menuItemClass, "outline-hidden cursor-pointer"),
         children: [
           dropdown.label,
-          /* @__PURE__ */ jsx32(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
+          /* @__PURE__ */ jsx33(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx32(DropdownMenuContent, { children: dropdown.items.map((item) => /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsx33(DropdownMenuContent, { children: dropdown.items.map((item) => /* @__PURE__ */ jsxs24(
       DropdownMenuItem,
       {
         disabled: item.disabled,
         onClick: () => onSelect?.(item.value),
         children: [
-          item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: "sm" }) : null,
+          item.icon ? /* @__PURE__ */ jsx33(Icon, { name: item.icon, size: "sm" }) : null,
           item.label
         ]
       },
@@ -1590,23 +1893,23 @@ function HeaderMenuArea({
   items,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx32("nav", { "data-slot": "header-menu", className: "flex items-center gap-1", children: items.map(
-    (item) => item.children !== void 0 && item.children.length > 0 ? /* @__PURE__ */ jsxs23(DropdownMenu, { children: [
-      /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx33("nav", { "data-slot": "header-menu", className: "flex items-center gap-1", children: items.map(
+    (item) => item.children !== void 0 && item.children.length > 0 ? /* @__PURE__ */ jsxs24(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs24(
         DropdownMenuTrigger,
         {
           "data-slot": "header-menu-item",
           "data-key": item.key,
-          className: cn(menuItemClass, "outline-hidden"),
+          className: cn(menuItemClass, "outline-hidden cursor-pointer"),
           children: [
-            item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: "sm" }) : null,
+            item.icon ? /* @__PURE__ */ jsx33(Icon, { name: item.icon, size: "sm" }) : null,
             item.label,
-            /* @__PURE__ */ jsx32(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
+            /* @__PURE__ */ jsx33(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx32(DropdownMenuContent, { children: item.children.map((child) => /* @__PURE__ */ jsx32(HeaderMenuEntry, { item: child, onSelect }, child.key)) })
-    ] }, item.key) : /* @__PURE__ */ jsxs23(
+      /* @__PURE__ */ jsx33(DropdownMenuContent, { children: item.children.map((child) => /* @__PURE__ */ jsx33(HeaderMenuEntry, { item: child, onSelect }, child.key)) })
+    ] }, item.key) : /* @__PURE__ */ jsxs24(
       "button",
       {
         type: "button",
@@ -1615,7 +1918,7 @@ function HeaderMenuArea({
         className: menuItemClass,
         onClick: () => onSelect?.(item.key),
         children: [
-          item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: "sm" }) : null,
+          item.icon ? /* @__PURE__ */ jsx33(Icon, { name: item.icon, size: "sm" }) : null,
           item.label
         ]
       },
@@ -1628,16 +1931,16 @@ function HeaderMenuEntry({
   onSelect
 }) {
   if (item.children !== void 0 && item.children.length > 0) {
-    return /* @__PURE__ */ jsxs23(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxs23(DropdownMenuSubTrigger, { "data-key": item.key, children: [
-        item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: "sm" }) : null,
+    return /* @__PURE__ */ jsxs24(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs24(DropdownMenuSubTrigger, { "data-key": item.key, className: "cursor-pointer", children: [
+        item.icon ? /* @__PURE__ */ jsx33(Icon, { name: item.icon, size: "sm" }) : null,
         item.label
       ] }),
-      /* @__PURE__ */ jsx32(DropdownMenuSubContent, { children: item.children.map((child) => /* @__PURE__ */ jsx32(HeaderMenuEntry, { item: child, onSelect }, child.key)) })
+      /* @__PURE__ */ jsx33(DropdownMenuSubContent, { children: item.children.map((child) => /* @__PURE__ */ jsx33(HeaderMenuEntry, { item: child, onSelect }, child.key)) })
     ] });
   }
-  return /* @__PURE__ */ jsxs23(DropdownMenuItem, { "data-key": item.key, onClick: () => onSelect?.(item.key), children: [
-    item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: "sm" }) : null,
+  return /* @__PURE__ */ jsxs24(DropdownMenuItem, { "data-key": item.key, onClick: () => onSelect?.(item.key), children: [
+    item.icon ? /* @__PURE__ */ jsx33(Icon, { name: item.icon, size: "sm" }) : null,
     item.label
   ] });
 }
@@ -1645,27 +1948,27 @@ function HeaderUserArea({
   user,
   onSelect
 }) {
-  const identity = /* @__PURE__ */ jsxs23(Fragment2, { children: [
-    /* @__PURE__ */ jsxs23(Avatar, { className: "size-7", children: [
-      user.avatar !== void 0 && /* @__PURE__ */ jsx32(AvatarImage, { src: user.avatar, alt: user.name }),
-      /* @__PURE__ */ jsx32(AvatarFallback, { children: user.name.charAt(0) })
+  const identity = /* @__PURE__ */ jsxs24(Fragment2, { children: [
+    /* @__PURE__ */ jsxs24(Avatar, { className: "size-7", children: [
+      user.avatar !== void 0 && /* @__PURE__ */ jsx33(AvatarImage, { src: user.avatar, alt: user.name }),
+      /* @__PURE__ */ jsx33(AvatarFallback, { children: user.name.charAt(0) })
     ] }),
-    /* @__PURE__ */ jsx32("span", { className: "text-sm", children: user.name })
+    /* @__PURE__ */ jsx33("span", { className: "text-sm", children: user.name })
   ] });
   if (user.items === void 0 || user.items.length === 0) {
-    return /* @__PURE__ */ jsx32("div", { "data-slot": "header-user", className: "flex items-center gap-2", children: identity });
+    return /* @__PURE__ */ jsx33("div", { "data-slot": "header-user", className: "flex items-center gap-2", children: identity });
   }
-  return /* @__PURE__ */ jsxs23(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs24(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx33(
       DropdownMenuTrigger,
       {
         "data-slot": "header-user",
-        className: "flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors outline-hidden hover:bg-accent/50",
+        className: "flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors outline-hidden hover:bg-accent/50 cursor-pointer",
         children: identity
       }
     ),
-    /* @__PURE__ */ jsx32(DropdownMenuContent, { align: "end", children: user.items.map((item) => /* @__PURE__ */ jsxs23(DropdownMenuItem, { onClick: () => onSelect?.(item.value), children: [
-      item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: "sm" }) : null,
+    /* @__PURE__ */ jsx33(DropdownMenuContent, { align: "end", children: user.items.map((item) => /* @__PURE__ */ jsxs24(DropdownMenuItem, { onClick: () => onSelect?.(item.value), children: [
+      item.icon ? /* @__PURE__ */ jsx33(Icon, { name: item.icon, size: "sm" }) : null,
       item.label
     ] }, item.value)) })
   ] });
@@ -1674,21 +1977,21 @@ function HeaderLocalesArea({
   locales,
   onSelect
 }) {
-  const { locale } = useI18n4();
+  const { locale } = useI18n5();
   const current = locales.find((option) => option.value === locale);
-  return /* @__PURE__ */ jsxs23(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs24(
       DropdownMenuTrigger,
       {
         "data-slot": "header-locales",
-        className: cn(menuItemClass, "outline-hidden"),
+        className: cn(menuItemClass, "outline-hidden cursor-pointer"),
         children: [
           current?.label ?? locale,
-          /* @__PURE__ */ jsx32(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
+          /* @__PURE__ */ jsx33(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx32(DropdownMenuContent, { align: "end", children: locales.map((option) => /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(DropdownMenuContent, { align: "end", children: locales.map((option) => /* @__PURE__ */ jsx33(
       DropdownMenuItem,
       {
         onClick: () => onSelect?.(option.value),
@@ -1701,21 +2004,21 @@ function HeaderLocalesArea({
 
 // src/components/components/HoverCard/index.tsx
 import { useRenderer as useRenderer8 } from "@pactor-app/runtime";
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function isDslNode2(value) {
   return typeof value === "object" && value !== null && typeof value.type === "string";
 }
 function HoverCard2({ content, children, className, style }) {
   const { renderChildren } = useRenderer8();
-  return /* @__PURE__ */ jsxs24(HoverCard, { children: [
-    /* @__PURE__ */ jsx33(HoverCardTrigger, { render: triggerWrapper("hover-card-trigger-wrap"), children }),
-    /* @__PURE__ */ jsx33(HoverCardContent, { className, style, children: isDslNode2(content) ? renderChildren([content]) : content })
+  return /* @__PURE__ */ jsxs25(HoverCard, { children: [
+    /* @__PURE__ */ jsx34(HoverCardTrigger, { render: triggerWrapper("hover-card-trigger-wrap"), children }),
+    /* @__PURE__ */ jsx34(HoverCardContent, { className, style, children: isDslNode2(content) ? renderChildren([content]) : content })
   ] });
 }
 
 // src/components/components/Input/index.tsx
-import { useEffect as useEffect6, useId as useId3 } from "react";
-import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useId as useId4 } from "react";
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 function Input2({
   name,
   label,
@@ -1729,9 +2032,9 @@ function Input2({
   style
 }) {
   const form = useFormContext();
-  const controlId = useId3();
+  const controlId = useId4();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  useEffect6(() => {
+  useEffect7(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -1741,14 +2044,14 @@ function Input2({
   if (inForm && form && name) {
     const fieldValue = form.values[name];
     const error = form.errors[name];
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(
       "div",
       {
         "data-slot": "form-item",
         className: cn(formItemClass(form.layout), className),
         style,
         children: [
-          label ? /* @__PURE__ */ jsx34(
+          label ? /* @__PURE__ */ jsx35(
             "label",
             {
               htmlFor: controlId,
@@ -1756,7 +2059,7 @@ function Input2({
               children: label
             }
           ) : null,
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Input,
             {
               id: controlId,
@@ -1770,12 +2073,12 @@ function Input2({
               }
             }
           ),
-          error ? /* @__PURE__ */ jsx34("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
+          error ? /* @__PURE__ */ jsx35("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     Input,
     {
       type,
@@ -1790,14 +2093,14 @@ function Input2({
 }
 
 // src/components/components/InputGroup/index.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function InputGroup2({ className, style, children }) {
-  return /* @__PURE__ */ jsx35(InputGroup, { className, style, children });
+  return /* @__PURE__ */ jsx36(InputGroup, { className, style, children });
 }
 
 // src/components/components/InputOTP/index.tsx
-import { useEffect as useEffect7, useState as useState9 } from "react";
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState10 } from "react";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 function InputOTP2({
   name,
   label,
@@ -1812,15 +2115,15 @@ function InputOTP2({
 }) {
   const form = useFormContext();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  useEffect7(() => {
+  useEffect8(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
     }
     return void 0;
   });
-  const [innerValue, setInnerValue] = useState9(typeof value === "string" ? value : "");
-  useEffect7(() => {
+  const [innerValue, setInnerValue] = useState10(typeof value === "string" ? value : "");
+  useEffect8(() => {
     if (!inForm) setInnerValue(typeof value === "string" ? value : "");
   }, [inForm, value]);
   const current = inForm && form && name ? typeof form.values[name] === "string" ? form.values[name] : "" : innerValue;
@@ -1835,38 +2138,38 @@ function InputOTP2({
       onComplete?.(next);
     }
   };
-  const control = /* @__PURE__ */ jsx36(
+  const control = /* @__PURE__ */ jsx37(
     InputOTP,
     {
       maxLength: length,
       value: current,
       onChange: handleChange,
       disabled,
-      children: /* @__PURE__ */ jsx36(InputOTPGroup, { children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx36(InputOTPSlot, { index }, index)) })
+      children: /* @__PURE__ */ jsx37(InputOTPGroup, { children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx37(InputOTPSlot, { index }, index)) })
     }
   );
   if (inForm && form && name) {
     const error = form.errors[name];
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs27(
       "div",
       {
         "data-slot": "form-item",
         className: cn(formItemClass(form.layout), className),
         style,
         children: [
-          label ? /* @__PURE__ */ jsx36("label", { className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap", children: label }) : null,
+          label ? /* @__PURE__ */ jsx37("label", { className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap", children: label }) : null,
           control,
-          error ? /* @__PURE__ */ jsx36("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
+          error ? /* @__PURE__ */ jsx37("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx36("div", { "data-slot": "input-otp-field", className: cn("inline-block", className), style, children: control });
+  return /* @__PURE__ */ jsx37("div", { "data-slot": "input-otp-field", className: cn("inline-block", className), style, children: control });
 }
 
 // src/components/components/Item/index.tsx
 import { useRenderer as useRenderer9 } from "@pactor-app/runtime";
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function Item2({
   title,
   description,
@@ -1877,39 +2180,39 @@ function Item2({
 }) {
   const { renderChildren } = useRenderer9();
   const mediaNodes = media === void 0 ? [] : Array.isArray(media) ? media : [media];
-  return /* @__PURE__ */ jsxs27(Item, { className, style, children: [
-    mediaNodes.length > 0 ? /* @__PURE__ */ jsx37(ItemMedia, { children: renderChildren(mediaNodes) }) : null,
-    /* @__PURE__ */ jsxs27(ItemContent, { children: [
-      title ? /* @__PURE__ */ jsx37(ItemTitle, { children: title }) : null,
-      description ? /* @__PURE__ */ jsx37(ItemDescription, { children: description }) : null
+  return /* @__PURE__ */ jsxs28(Item, { className, style, children: [
+    mediaNodes.length > 0 ? /* @__PURE__ */ jsx38(ItemMedia, { children: renderChildren(mediaNodes) }) : null,
+    /* @__PURE__ */ jsxs28(ItemContent, { children: [
+      title ? /* @__PURE__ */ jsx38(ItemTitle, { children: title }) : null,
+      description ? /* @__PURE__ */ jsx38(ItemDescription, { children: description }) : null
     ] }),
-    actions && actions.length > 0 ? /* @__PURE__ */ jsx37(ItemActions, { children: renderChildren(actions) }) : null
+    actions && actions.length > 0 ? /* @__PURE__ */ jsx38(ItemActions, { children: renderChildren(actions) }) : null
   ] });
 }
 
 // src/components/components/Kbd/index.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Kbd2({ text, className, style }) {
-  return /* @__PURE__ */ jsx38(Kbd, { className, style, children: text });
+  return /* @__PURE__ */ jsx39(Kbd, { className, style, children: text });
 }
 
 // src/components/components/Label/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Label2({ text, htmlFor, className, style }) {
-  return /* @__PURE__ */ jsx39(Label, { htmlFor, className, style, children: text });
+  return /* @__PURE__ */ jsx40(Label, { htmlFor, className, style, children: text });
 }
 
 // src/components/components/Layout/index.tsx
 import { isDslSourceRef } from "@pactor-app/core";
 import { useRenderer as useRenderer10 } from "@pactor-app/runtime";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Layout({ direction, className, style, dslChildren }) {
   const { renderChildren, context } = useRenderer10();
   const hasSider = Array.isArray(dslChildren) ? dslChildren.some(
     (child) => !isDslSourceRef(child) && resolveRootType(child, context) === "Sider"
   ) : false;
   const dir = direction ?? (hasSider ? "horizontal" : "vertical");
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       "data-slot": "layout",
@@ -1933,9 +2236,9 @@ function resolveRootType(node, context) {
 }
 
 // src/components/components/Link/index.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function Link({ href, text, target, className, style, children }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "a",
     {
       "data-slot": "link",
@@ -1950,17 +2253,17 @@ function Link({ href, text, target, className, style, children }) {
 }
 
 // src/components/components/Menubar/index.tsx
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 function Menubar2({ menus = [], onSelect, className, style }) {
-  return /* @__PURE__ */ jsx42(Menubar, { className, style, children: menus.map((menu) => /* @__PURE__ */ jsxs28(MenubarMenu, { children: [
-    /* @__PURE__ */ jsx42(MenubarTrigger, { children: menu.label }),
-    /* @__PURE__ */ jsx42(MenubarContent, { children: menu.items.map((item) => /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx43(Menubar, { className, style, children: menus.map((menu) => /* @__PURE__ */ jsxs29(MenubarMenu, { children: [
+    /* @__PURE__ */ jsx43(MenubarTrigger, { children: menu.label }),
+    /* @__PURE__ */ jsx43(MenubarContent, { children: menu.items.map((item) => /* @__PURE__ */ jsxs29(
       MenubarItem,
       {
         disabled: item.disabled,
         onClick: () => onSelect?.(item.value),
         children: [
-          item.icon ? /* @__PURE__ */ jsx42(Icon, { name: item.icon, size: "sm" }) : null,
+          item.icon ? /* @__PURE__ */ jsx43(Icon, { name: item.icon, size: "sm" }) : null,
           item.label
         ]
       },
@@ -1970,33 +2273,33 @@ function Menubar2({ menus = [], onSelect, className, style }) {
 }
 
 // src/components/components/NavigationMenu/index.tsx
-import { Fragment as Fragment3, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 function NavigationMenu2({ items = [], className, style }) {
-  return /* @__PURE__ */ jsx43(NavigationMenu, { className, style, children: /* @__PURE__ */ jsx43(NavigationMenuList, { children: items.map((item, index) => /* @__PURE__ */ jsx43(NavigationMenuItem, { value: `item-${index}`, children: item.children && item.children.length > 0 ? /* @__PURE__ */ jsxs29(Fragment3, { children: [
-    /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsx44(NavigationMenu, { className, style, children: /* @__PURE__ */ jsx44(NavigationMenuList, { children: items.map((item, index) => /* @__PURE__ */ jsx44(NavigationMenuItem, { value: `item-${index}`, children: item.children && item.children.length > 0 ? /* @__PURE__ */ jsxs30(Fragment3, { children: [
+    /* @__PURE__ */ jsxs30(
       NavigationMenuTrigger,
       {
         className: item.icon !== void 0 ? "gap-2" : void 0,
         children: [
-          item.icon ? /* @__PURE__ */ jsx43(Icon, { name: item.icon, size: "sm" }) : null,
+          item.icon ? /* @__PURE__ */ jsx44(Icon, { name: item.icon, size: "sm" }) : null,
           item.label
         ]
       }
     ),
-    /* @__PURE__ */ jsx43(NavigationMenuContent, { children: /* @__PURE__ */ jsx43("ul", { className: "grid w-64 gap-1", children: item.children.map((child) => /* @__PURE__ */ jsx43("li", { children: /* @__PURE__ */ jsxs29(NavigationMenuLink, { href: child.href, children: [
-      /* @__PURE__ */ jsxs29(
+    /* @__PURE__ */ jsx44(NavigationMenuContent, { children: /* @__PURE__ */ jsx44("ul", { className: "grid w-64 gap-1", children: item.children.map((child) => /* @__PURE__ */ jsx44("li", { children: /* @__PURE__ */ jsxs30(NavigationMenuLink, { href: child.href, children: [
+      /* @__PURE__ */ jsxs30(
         "span",
         {
           className: child.icon !== void 0 ? "flex items-center gap-2 font-medium" : "font-medium",
           children: [
-            child.icon ? /* @__PURE__ */ jsx43(Icon, { name: child.icon, size: "sm" }) : null,
+            child.icon ? /* @__PURE__ */ jsx44(Icon, { name: child.icon, size: "sm" }) : null,
             child.label
           ]
         }
       ),
-      child.description ? /* @__PURE__ */ jsx43("span", { className: "text-muted-foreground", children: child.description }) : null
+      child.description ? /* @__PURE__ */ jsx44("span", { className: "text-muted-foreground", children: child.description }) : null
     ] }) }, child.href)) }) })
-  ] }) : /* @__PURE__ */ jsxs29(
+  ] }) : /* @__PURE__ */ jsxs30(
     NavigationMenuLink,
     {
       href: item.href,
@@ -2005,7 +2308,7 @@ function NavigationMenu2({ items = [], className, style }) {
         item.icon !== void 0 && "gap-2"
       ),
       children: [
-        item.icon ? /* @__PURE__ */ jsx43(Icon, { name: item.icon, size: "sm" }) : null,
+        item.icon ? /* @__PURE__ */ jsx44(Icon, { name: item.icon, size: "sm" }) : null,
         item.label
       ]
     }
@@ -2013,17 +2316,17 @@ function NavigationMenu2({ items = [], className, style }) {
 }
 
 // src/components/components/Page/index.tsx
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function Page({ title, className, style, children }) {
-  return /* @__PURE__ */ jsxs30("div", { "data-slot": "page", className: cn("p-6", className), style, children: [
-    title ? /* @__PURE__ */ jsx44("h2", { "data-slot": "page-title", className: "mb-5 text-xl font-semibold", children: title }) : null,
-    /* @__PURE__ */ jsx44("div", { "data-slot": "page-content", className: "space-y-5", children })
+  return /* @__PURE__ */ jsxs31("div", { "data-slot": "page", className: cn("p-6", className), style, children: [
+    title ? /* @__PURE__ */ jsx45("h2", { "data-slot": "page-title", className: "mb-5 text-xl font-semibold", children: title }) : null,
+    /* @__PURE__ */ jsx45("div", { "data-slot": "page-content", className: "space-y-5", children })
   ] });
 }
 
 // src/components/components/Pagination/index.tsx
-import { useState as useState10 } from "react";
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 function pageItems(current, count) {
   if (count <= 7) {
     return Array.from({ length: count }, (_, i) => i + 1);
@@ -2044,7 +2347,7 @@ function Pagination2({
   className,
   style
 }) {
-  const [innerPage, setInnerPage] = useState10(1);
+  const [innerPage, setInnerPage] = useState11(1);
   const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   const current = Math.min(Math.max(1, page ?? innerPage), pageCount);
   const goTo = (next) => {
@@ -2057,8 +2360,8 @@ function Pagination2({
     }
     onChange?.(target);
   };
-  return /* @__PURE__ */ jsx45(Pagination, { className, style, children: /* @__PURE__ */ jsxs31(PaginationContent, { children: [
-    /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(Pagination, { className, style, children: /* @__PURE__ */ jsxs32(PaginationContent, { children: [
+    /* @__PURE__ */ jsx46(PaginationItem, { children: /* @__PURE__ */ jsx46(
       PaginationPrevious,
       {
         href: "#",
@@ -2069,7 +2372,7 @@ function Pagination2({
         }
       }
     ) }),
-    pageItems(current, pageCount).map((item, index) => /* @__PURE__ */ jsx45(PaginationItem, { children: item === "ellipsis" ? /* @__PURE__ */ jsx45(PaginationEllipsis, {}) : /* @__PURE__ */ jsx45(
+    pageItems(current, pageCount).map((item, index) => /* @__PURE__ */ jsx46(PaginationItem, { children: item === "ellipsis" ? /* @__PURE__ */ jsx46(PaginationEllipsis, {}) : /* @__PURE__ */ jsx46(
       PaginationLink,
       {
         href: "#",
@@ -2081,7 +2384,7 @@ function Pagination2({
         children: item
       }
     ) }, item === "ellipsis" ? `ellipsis-${index}` : item)),
-    /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(PaginationItem, { children: /* @__PURE__ */ jsx46(
       PaginationNext,
       {
         href: "#",
@@ -2097,14 +2400,14 @@ function Pagination2({
 
 // src/components/components/Popover/index.tsx
 import { useRenderer as useRenderer11 } from "@pactor-app/runtime";
-import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
 function isDslNode3(value) {
   return typeof value === "object" && value !== null && typeof value.type === "string";
 }
 function Popover2({ content, children, className, style }) {
   const { renderChildren } = useRenderer11();
-  return /* @__PURE__ */ jsxs32(Popover, { children: [
-    /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs33(Popover, { children: [
+    /* @__PURE__ */ jsx47(
       PopoverTrigger,
       {
         nativeButton: false,
@@ -2112,22 +2415,22 @@ function Popover2({ content, children, className, style }) {
         children
       }
     ),
-    /* @__PURE__ */ jsx46(PopoverContent, { className, style, children: isDslNode3(content) ? renderChildren([content]) : content })
+    /* @__PURE__ */ jsx47(PopoverContent, { className, style, children: isDslNode3(content) ? renderChildren([content]) : content })
   ] });
 }
 
 // src/components/components/Progress/index.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function Progress2({ value, className, style }) {
   const resolved = typeof value === "number" && Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : null;
-  return /* @__PURE__ */ jsx47(Progress, { value: resolved, className, style, children: /* @__PURE__ */ jsx47(ProgressTrack, { children: /* @__PURE__ */ jsx47(ProgressIndicator, {}) }) });
+  return /* @__PURE__ */ jsx48(Progress, { value: resolved, className, style, children: /* @__PURE__ */ jsx48(ProgressTrack, { children: /* @__PURE__ */ jsx48(ProgressIndicator, {}) }) });
 }
 
 // src/components/components/RadioGroup/index.tsx
-import { useEffect as useEffect8, useId as useId4 } from "react";
+import { useEffect as useEffect9, useId as useId5 } from "react";
 
 // src/components/components/Form/form-item.tsx
-import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
 function FieldShell({
   layout,
   label,
@@ -2137,14 +2440,14 @@ function FieldShell({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       "data-slot": "form-item",
       className: cn(formItemClass(layout), className),
       style,
       children: [
-        label ? /* @__PURE__ */ jsx48(
+        label ? /* @__PURE__ */ jsx49(
           "label",
           {
             htmlFor,
@@ -2153,14 +2456,14 @@ function FieldShell({
           }
         ) : null,
         children,
-        error ? /* @__PURE__ */ jsx48("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
+        error ? /* @__PURE__ */ jsx49("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
       ]
     }
   );
 }
 
 // src/components/components/RadioGroup/index.tsx
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
 function RadioGroup2({
   name,
   label,
@@ -2173,9 +2476,9 @@ function RadioGroup2({
   style
 }) {
   const form = useFormContext();
-  const controlId = useId4();
+  const controlId = useId5();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  useEffect8(() => {
+  useEffect9(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -2190,7 +2493,7 @@ function RadioGroup2({
     onChange?.(next);
   };
   const groupValue = current ?? "";
-  const group = /* @__PURE__ */ jsx49(
+  const group = /* @__PURE__ */ jsx50(
     RadioGroup,
     {
       value: groupValue,
@@ -2201,8 +2504,8 @@ function RadioGroup2({
       style: inForm ? void 0 : style,
       children: options.map((option, index) => {
         const optionId = `${controlId}-${index}`;
-        return /* @__PURE__ */ jsxs34("span", { className: "inline-flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx49(
+        return /* @__PURE__ */ jsxs35("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx50(
             RadioGroupItem,
             {
               id: optionId,
@@ -2210,13 +2513,13 @@ function RadioGroup2({
               disabled: option.disabled
             }
           ),
-          /* @__PURE__ */ jsx49("label", { htmlFor: optionId, className: "text-sm leading-none font-medium", children: option.label })
+          /* @__PURE__ */ jsx50("label", { htmlFor: optionId, className: "text-sm leading-none font-medium", children: option.label })
         ] }, String(option.value));
       })
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       FieldShell,
       {
         layout: form.layout,
@@ -2234,7 +2537,7 @@ function RadioGroup2({
 // src/components/components/Resizable/index.tsx
 import { useRenderer as useRenderer12 } from "@pactor-app/runtime";
 import { Fragment as Fragment4 } from "react";
-import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
 function Resizable({
   panels = [],
   direction = "horizontal",
@@ -2242,12 +2545,14 @@ function Resizable({
   style
 }) {
   const { renderChildren } = useRenderer12();
-  return /* @__PURE__ */ jsx50(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ jsxs35(Fragment4, { children: [
-    index > 0 ? /* @__PURE__ */ jsx50(ResizableHandle, { withHandle: true }) : null,
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ jsxs36(Fragment4, { children: [
+    index > 0 ? /* @__PURE__ */ jsx51(ResizableHandle, { withHandle: true }) : null,
+    /* @__PURE__ */ jsx51(
       Panel,
       {
-        defaultSize: typeof panel.defaultSize === "number" ? `${panel.defaultSize}%` : void 0,
+        defaultSize: typeof panel.defaultSizePx === "number" ? `${panel.defaultSizePx}px` : typeof panel.defaultSize === "number" ? `${panel.defaultSize}%` : void 0,
+        minSize: typeof panel.minSizePx === "number" ? `${panel.minSizePx}px` : void 0,
+        maxSize: typeof panel.maxSizePx === "number" ? `${panel.maxSizePx}px` : void 0,
         children: renderChildren(panel.children)
       }
     )
@@ -2255,7 +2560,7 @@ function Resizable({
 }
 
 // src/components/components/ScrollArea/index.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function ScrollArea2({
   maxHeight,
   maxWidth,
@@ -2263,7 +2568,7 @@ function ScrollArea2({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     ScrollArea,
     {
       className,
@@ -2274,9 +2579,9 @@ function ScrollArea2({
 }
 
 // src/components/components/Select/index.tsx
-import { useI18n as useI18n5 } from "@pactor-app/runtime";
-import { useEffect as useEffect9, useId as useId5 } from "react";
-import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useI18n as useI18n6 } from "@pactor-app/runtime";
+import { useEffect as useEffect10, useId as useId6 } from "react";
+import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
 function Select2({
   name,
   label,
@@ -2291,10 +2596,10 @@ function Select2({
   style
 }) {
   const form = useFormContext();
-  const { t } = useI18n5();
-  const controlId = useId5();
+  const { t } = useI18n6();
+  const controlId = useId6();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  useEffect9(() => {
+  useEffect10(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -2310,13 +2615,13 @@ function Select2({
     onChange?.(next ?? void 0);
   };
   const inFormRoot = inForm === true;
-  const select = /* @__PURE__ */ jsxs36(
+  const select = /* @__PURE__ */ jsxs37(
     "span",
     {
       className: cn("inline-flex items-center gap-1", !inFormRoot && className),
       style: inFormRoot ? void 0 : style,
       children: [
-        /* @__PURE__ */ jsxs36(
+        /* @__PURE__ */ jsxs37(
           Select,
           {
             items: options,
@@ -2325,8 +2630,8 @@ function Select2({
             disabled,
             name: inForm ? name : void 0,
             children: [
-              /* @__PURE__ */ jsx52(SelectTrigger, { id: controlId, children: /* @__PURE__ */ jsx52(SelectValue, { placeholder }) }),
-              /* @__PURE__ */ jsx52(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx52(
+              /* @__PURE__ */ jsx53(SelectTrigger, { id: controlId, children: /* @__PURE__ */ jsx53(SelectValue, { placeholder }) }),
+              /* @__PURE__ */ jsx53(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx53(
                 SelectItem,
                 {
                   value: option.value,
@@ -2338,7 +2643,7 @@ function Select2({
             ]
           }
         ),
-        allowClear && selectedValue !== null && !disabled ? /* @__PURE__ */ jsx52(
+        allowClear && selectedValue !== null && !disabled ? /* @__PURE__ */ jsx53(
           "button",
           {
             type: "button",
@@ -2358,14 +2663,14 @@ function Select2({
   );
   if (inForm && form && name) {
     const error = form.errors[name];
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs37(
       "div",
       {
         "data-slot": "form-item",
         className: cn(formItemClass(form.layout), className),
         style,
         children: [
-          label ? /* @__PURE__ */ jsx52(
+          label ? /* @__PURE__ */ jsx53(
             "label",
             {
               htmlFor: controlId,
@@ -2374,7 +2679,7 @@ function Select2({
             }
           ) : null,
           select,
-          error ? /* @__PURE__ */ jsx52("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
+          error ? /* @__PURE__ */ jsx53("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
         ]
       }
     );
@@ -2383,13 +2688,13 @@ function Select2({
 }
 
 // src/components/components/Separator/index.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function Separator2({ orientation = "horizontal", className, style }) {
-  return /* @__PURE__ */ jsx53(Separator, { orientation, className, style });
+  return /* @__PURE__ */ jsx54(Separator, { orientation, className, style });
 }
 
 // src/components/components/Sheet/index.tsx
-import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function Sheet2({
   title,
   open,
@@ -2399,7 +2704,7 @@ function Sheet2({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     Sheet,
     {
       open: open ?? false,
@@ -2408,9 +2713,9 @@ function Sheet2({
           onClose?.();
         }
       },
-      children: /* @__PURE__ */ jsxs37(SheetContent, { side, className, style, children: [
-        title ? /* @__PURE__ */ jsx54(SheetHeader, { children: /* @__PURE__ */ jsx54(SheetTitle, { children: title }) }) : null,
-        /* @__PURE__ */ jsx54("div", { className: "flex-1 overflow-auto px-4", children })
+      children: /* @__PURE__ */ jsxs38(SheetContent, { side, className, style, children: [
+        title ? /* @__PURE__ */ jsx55(SheetHeader, { children: /* @__PURE__ */ jsx55(SheetTitle, { children: title }) }) : null,
+        /* @__PURE__ */ jsx55("div", { className: "flex-1 overflow-auto px-4", children })
       ] })
     }
   );
@@ -2418,7 +2723,7 @@ function Sheet2({
 
 // src/components/components/Sider/index.tsx
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function Sider({
   width = 200,
   collapsible,
@@ -2430,26 +2735,26 @@ function Sider({
   children
 }) {
   const current = collapsed ? collapsedWidth : width;
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "aside",
     {
       "data-slot": "layout-sider",
       "data-collapsed": collapsed || void 0,
       className: cn(
-        "flex min-h-0 shrink-0 flex-col border-r bg-background transition-[width]",
+        "flex min-h-0 shrink-0 flex-col border-r bg-sidebar transition-[width]",
         className
       ),
       style: { width: current, ...style },
       children: [
-        /* @__PURE__ */ jsx55("div", { className: "min-h-0 flex-1 overflow-auto", children }),
-        collapsible ? /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx56("div", { className: "min-h-0 flex-1 overflow-auto", children }),
+        collapsible ? /* @__PURE__ */ jsx56(
           "button",
           {
             type: "button",
             "aria-label": collapsed ? "expand sider" : "collapse sider",
             className: "flex h-10 shrink-0 items-center justify-center border-t text-muted-foreground hover:text-foreground",
             onClick: () => onCollapse?.(!collapsed),
-            children: collapsed ? /* @__PURE__ */ jsx55(ChevronRight, { "aria-hidden": true, className: "size-4" }) : /* @__PURE__ */ jsx55(ChevronLeft, { "aria-hidden": true, className: "size-4" })
+            children: collapsed ? /* @__PURE__ */ jsx56(ChevronRight, { "aria-hidden": true, className: "size-4" }) : /* @__PURE__ */ jsx56(ChevronLeft, { "aria-hidden": true, className: "size-4" })
           }
         ) : null
       ]
@@ -2458,7 +2763,7 @@ function Sider({
 }
 
 // src/components/components/Skeleton/index.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var shapeDefaults = {
   line: { className: "h-4 w-full", style: {} },
   circle: { className: "rounded-full", style: { width: 40, height: 40 } },
@@ -2469,7 +2774,7 @@ function toSize(value) {
 }
 function Skeleton2({ shape = "line", width, height, className, style }) {
   const defaults = shapeDefaults[shape];
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Skeleton,
     {
       className: cn(defaults.className, className),
@@ -2484,8 +2789,8 @@ function Skeleton2({ shape = "line", width, height, className, style }) {
 }
 
 // src/components/components/Slider/index.tsx
-import { useEffect as useEffect10 } from "react";
-import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useEffect as useEffect11 } from "react";
+import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
 function Slider2({
   name,
   label,
@@ -2501,7 +2806,7 @@ function Slider2({
 }) {
   const form = useFormContext();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  useEffect10(() => {
+  useEffect11(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -2516,7 +2821,7 @@ function Slider2({
     }
     onChange?.(next);
   };
-  const slider = /* @__PURE__ */ jsx57(
+  const slider = /* @__PURE__ */ jsx58(
     Slider,
     {
       value: numberValue,
@@ -2528,14 +2833,14 @@ function Slider2({
       onValueChange: handleChange,
       className: inForm ? void 0 : className,
       style: inForm ? void 0 : style,
-      children: /* @__PURE__ */ jsx57(SliderControl, { children: /* @__PURE__ */ jsxs39(SliderTrack, { children: [
-        /* @__PURE__ */ jsx57(SliderIndicator, {}),
-        /* @__PURE__ */ jsx57(SliderThumb, {})
-      ] }) })
+      children: /* @__PURE__ */ jsxs40(SliderControl, { children: [
+        /* @__PURE__ */ jsx58(SliderTrack, { children: /* @__PURE__ */ jsx58(SliderIndicator, {}) }),
+        /* @__PURE__ */ jsx58(SliderThumb, {})
+      ] })
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsx58(
       FieldShell,
       {
         layout: form.layout,
@@ -2552,11 +2857,11 @@ function Slider2({
 
 // src/components/components/Sonner/index.tsx
 import { useRenderer as useRenderer13 } from "@pactor-app/runtime";
-import { useEffect as useEffect11 } from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { useEffect as useEffect12 } from "react";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function Sonner({ className, style }) {
   const { context } = useRenderer13();
-  useEffect11(() => {
+  useEffect12(() => {
     const { actions } = context;
     if (actions.has("toast")) {
       return;
@@ -2570,36 +2875,36 @@ function Sonner({ className, style }) {
       return { ok: true };
     });
   }, [context]);
-  return /* @__PURE__ */ jsx58("div", { "data-slot": "sonner", className, style, children: /* @__PURE__ */ jsx58(Toaster, {}) });
+  return /* @__PURE__ */ jsx59("div", { "data-slot": "sonner", className, style, children: /* @__PURE__ */ jsx59(Toaster, {}) });
 }
 
 // src/components/components/Spinner/index.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var sizeClass = {
   sm: "size-3",
   default: "size-4",
   lg: "size-6"
 };
 function Spinner2({ size = "default", className, style }) {
-  return /* @__PURE__ */ jsx59(Spinner, { className: cn(sizeClass[size], className), style });
+  return /* @__PURE__ */ jsx60(Spinner, { className: cn(sizeClass[size], className), style });
 }
 
 // src/components/components/Statistic/index.tsx
-import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs41 } from "react/jsx-runtime";
 function Statistic({ title, value, precision, suffix, className, style }) {
   const display = typeof value === "number" && precision !== void 0 ? value.toFixed(precision) : value;
-  return /* @__PURE__ */ jsxs40("div", { "data-slot": "statistic", className: cn(className), style, children: [
-    title ? /* @__PURE__ */ jsx60("div", { "data-slot": "statistic-title", className: "text-sm text-muted-foreground", children: title }) : null,
-    /* @__PURE__ */ jsxs40("div", { "data-slot": "statistic-value", className: "text-2xl font-bold tabular-nums", children: [
+  return /* @__PURE__ */ jsxs41("div", { "data-slot": "statistic", className: cn(className), style, children: [
+    title ? /* @__PURE__ */ jsx61("div", { "data-slot": "statistic-title", className: "text-sm text-muted-foreground", children: title }) : null,
+    /* @__PURE__ */ jsxs41("div", { "data-slot": "statistic-value", className: "text-2xl font-bold tabular-nums", children: [
       display,
-      suffix ? /* @__PURE__ */ jsx60("span", { className: "ml-1 text-sm font-normal text-muted-foreground", children: suffix }) : null
+      suffix ? /* @__PURE__ */ jsx61("span", { className: "ml-1 text-sm font-normal text-muted-foreground", children: suffix }) : null
     ] })
   ] });
 }
 
 // src/components/components/Switch/index.tsx
-import { useEffect as useEffect12, useId as useId6 } from "react";
-import { jsx as jsx61, jsxs as jsxs41 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useId as useId7 } from "react";
+import { jsx as jsx62, jsxs as jsxs42 } from "react/jsx-runtime";
 function Switch2({
   name,
   label,
@@ -2611,9 +2916,9 @@ function Switch2({
   style
 }) {
   const form = useFormContext();
-  const controlId = useId6();
+  const controlId = useId7();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  useEffect12(() => {
+  useEffect13(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -2628,13 +2933,13 @@ function Switch2({
     }
     onChange?.(next);
   };
-  const control = /* @__PURE__ */ jsxs41(
+  const control = /* @__PURE__ */ jsxs42(
     "span",
     {
       className: cn("inline-flex items-center gap-2", !inForm && className),
       style: inForm ? void 0 : style,
       children: [
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx62(
           Switch,
           {
             id: controlId,
@@ -2644,12 +2949,12 @@ function Switch2({
             onCheckedChange: handleChange
           }
         ),
-        label ? /* @__PURE__ */ jsx61("label", { htmlFor: controlId, className: "text-sm leading-none font-medium", children: label }) : null
+        label ? /* @__PURE__ */ jsx62("label", { htmlFor: controlId, className: "text-sm leading-none font-medium", children: label }) : null
       ]
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsxs42(
       "div",
       {
         "data-slot": "form-item",
@@ -2657,7 +2962,7 @@ function Switch2({
         style,
         children: [
           control,
-          form.errors[name] ? /* @__PURE__ */ jsx61("div", { "data-slot": "form-error", className: "mt-1.5 text-sm text-destructive", children: form.errors[name] }) : null
+          form.errors[name] ? /* @__PURE__ */ jsx62("div", { "data-slot": "form-error", className: "mt-1.5 text-sm text-destructive", children: form.errors[name] }) : null
         ]
       }
     );
@@ -2666,9 +2971,9 @@ function Switch2({
 }
 
 // src/components/components/Table/index.tsx
-import { useI18n as useI18n6, useRenderer as useRenderer14 } from "@pactor-app/runtime";
-import { useState as useState11 } from "react";
-import { jsx as jsx62, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useI18n as useI18n7, useRenderer as useRenderer14 } from "@pactor-app/runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
 function renderCellValue2(value) {
   if (value === void 0 || value === null) {
     return "";
@@ -2689,8 +2994,8 @@ function Table2({
   style
 }) {
   const { renderChildren } = useRenderer14();
-  const { t } = useI18n6();
-  const [current, setCurrent] = useState11(1);
+  const { t } = useI18n7();
+  const [current, setCurrent] = useState12(1);
   const pageSize = pagination === false ? void 0 : pagination?.pageSize;
   const total = dataSource.length;
   const pageCount = pageSize !== void 0 && pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : 1;
@@ -2699,17 +3004,17 @@ function Table2({
     setCurrent(page);
     onChange?.({ current: page, pageSize, total });
   };
-  return /* @__PURE__ */ jsxs42("div", { "data-slot": "dsl-table", className: cn("relative", className), style, children: [
-    loading ? /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs43("div", { "data-slot": "dsl-table", className: cn("relative", className), style, children: [
+    loading ? /* @__PURE__ */ jsx63(
       "div",
       {
         "data-slot": "table-loading",
-        className: "absolute inset-0 z-10 flex items-center justify-center bg-background/60 text-sm text-muted-foreground",
+        className: "absolute inset-0 z-10 flex items-center justify-center bg-card/60 text-sm text-muted-foreground",
         children: t("pactor.table.loading")
       }
     ) : null,
-    /* @__PURE__ */ jsxs42(Table, { children: [
-      /* @__PURE__ */ jsx62(TableHeader, { children: /* @__PURE__ */ jsx62(TableRow, { className: "hover:bg-transparent", children: columns.map((column, index) => /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsxs43(Table, { children: [
+      /* @__PURE__ */ jsx63(TableHeader, { children: /* @__PURE__ */ jsx63(TableRow, { className: "hover:bg-transparent", children: columns.map((column, index) => /* @__PURE__ */ jsx63(
         TableHead,
         {
           style: column.width !== void 0 ? { width: column.width } : void 0,
@@ -2717,7 +3022,7 @@ function Table2({
         },
         column.dataIndex ?? String(index)
       )) }) }),
-      /* @__PURE__ */ jsx62(TableBody, { children: pageRows.length === 0 ? /* @__PURE__ */ jsx62(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx62(TableCell, { colSpan: Math.max(1, columns.length), children: /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx63(TableBody, { children: pageRows.length === 0 ? /* @__PURE__ */ jsx63(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx63(TableCell, { colSpan: Math.max(1, columns.length), children: /* @__PURE__ */ jsx63(
         "div",
         {
           "data-slot": "table-empty",
@@ -2726,10 +3031,10 @@ function Table2({
         }
       ) }) }) : pageRows.map((row, rowIndex) => {
         const key = row[rowKey];
-        return /* @__PURE__ */ jsx62(
+        return /* @__PURE__ */ jsx63(
           TableRow,
           {
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx62(TableCell, { children: column.cell ? renderChildren([column.cell], { row, rowIndex }) : renderCellValue2(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx63(TableCell, { children: column.cell ? renderChildren([column.cell], { row, rowIndex }) : renderCellValue2(
               column.dataIndex === void 0 ? void 0 : row[column.dataIndex]
             ) }, column.dataIndex ?? String(columnIndex)))
           },
@@ -2737,8 +3042,8 @@ function Table2({
         );
       }) })
     ] }),
-    pageSize !== void 0 && pageSize > 0 ? /* @__PURE__ */ jsx62("div", { "data-slot": "table-pagination", className: "mt-3 flex justify-end gap-1", children: Array.from({ length: pageCount }, (_, index) => index + 1).map(
-      (page) => /* @__PURE__ */ jsx62(
+    pageSize !== void 0 && pageSize > 0 ? /* @__PURE__ */ jsx63("div", { "data-slot": "table-pagination", className: "mt-3 flex justify-end gap-1", children: Array.from({ length: pageCount }, (_, index) => index + 1).map(
+      (page) => /* @__PURE__ */ jsx63(
         Button,
         {
           type: "button",
@@ -2756,10 +3061,10 @@ function Table2({
 
 // src/components/components/Tabs/index.tsx
 import { useRenderer as useRenderer15 } from "@pactor-app/runtime";
-import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs44 } from "react/jsx-runtime";
 function Tabs2({ items = [], activeKey, onChange, className, style }) {
   const { renderChildren } = useRenderer15();
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     Tabs,
     {
       value: activeKey,
@@ -2768,20 +3073,20 @@ function Tabs2({ items = [], activeKey, onChange, className, style }) {
       className,
       style,
       children: [
-        /* @__PURE__ */ jsx63(TabsList, { children: items.map((item) => /* @__PURE__ */ jsx63(TabsTrigger, { value: item.key, children: item.label }, item.key)) }),
-        items.map((item) => /* @__PURE__ */ jsx63(TabsContent, { value: item.key, children: renderChildren(item.children) }, item.key))
+        /* @__PURE__ */ jsx64(TabsList, { children: items.map((item) => /* @__PURE__ */ jsx64(TabsTrigger, { value: item.key, children: item.label }, item.key)) }),
+        items.map((item) => /* @__PURE__ */ jsx64(TabsContent, { value: item.key, children: renderChildren(item.children) }, item.key))
       ]
     }
   );
 }
 
 // src/components/components/Text/index.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var typeClassMap = {
   default: "",
   secondary: "text-muted-foreground",
-  success: "text-green-600 dark:text-green-400",
-  warning: "text-amber-600 dark:text-amber-400",
+  success: "text-success",
+  warning: "text-warning",
   danger: "text-destructive"
 };
 function Text({
@@ -2795,7 +3100,7 @@ function Text({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     "span",
     {
       "data-slot": "text",
@@ -2815,8 +3120,8 @@ function Text({
 }
 
 // src/components/components/Textarea/index.tsx
-import { useEffect as useEffect13, useId as useId7 } from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useId as useId8 } from "react";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function Textarea2({
   name,
   label,
@@ -2830,9 +3135,9 @@ function Textarea2({
   style
 }) {
   const form = useFormContext();
-  const controlId = useId7();
+  const controlId = useId8();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  useEffect13(() => {
+  useEffect14(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -2841,7 +3146,7 @@ function Textarea2({
   });
   if (inForm && form && name) {
     const fieldValue = form.values[name];
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66(
       FieldShell,
       {
         layout: form.layout,
@@ -2850,7 +3155,7 @@ function Textarea2({
         error: form.errors[name],
         className,
         style,
-        children: /* @__PURE__ */ jsx65(
+        children: /* @__PURE__ */ jsx66(
           Textarea,
           {
             id: controlId,
@@ -2867,7 +3172,7 @@ function Textarea2({
       }
     );
   }
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     Textarea,
     {
       value: value ?? "",
@@ -2882,7 +3187,7 @@ function Textarea2({
 }
 
 // src/components/components/Toggle/index.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function Toggle2({
   text,
   pressed,
@@ -2893,7 +3198,7 @@ function Toggle2({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     Toggle,
     {
       pressed,
@@ -2909,7 +3214,7 @@ function Toggle2({
 }
 
 // src/components/components/ToggleGroup/index.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function ToggleGroup2({
   options = [],
   value,
@@ -2929,7 +3234,7 @@ function ToggleGroup2({
       onChange?.(added ?? void 0);
     }
   };
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     ToggleGroup,
     {
       value: groupValue,
@@ -2938,7 +3243,7 @@ function ToggleGroup2({
       onValueChange: (next) => handleChange(next),
       className,
       style,
-      children: options.map((option) => /* @__PURE__ */ jsx67(
+      children: options.map((option) => /* @__PURE__ */ jsx68(
         ToggleGroupItem,
         {
           value: option.value,
@@ -2952,23 +3257,23 @@ function ToggleGroup2({
 }
 
 // src/components/components/Tooltip/index.tsx
-import { jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
 function Tooltip3({ content, children, className, style }) {
-  return /* @__PURE__ */ jsxs44(Tooltip, { children: [
-    /* @__PURE__ */ jsx68(TooltipTrigger, { render: triggerWrapper("tooltip-trigger-wrap"), children }),
-    /* @__PURE__ */ jsx68(TooltipContent, { className, style, children: content })
+  return /* @__PURE__ */ jsxs45(Tooltip, { children: [
+    /* @__PURE__ */ jsx69(TooltipTrigger, { render: triggerWrapper("tooltip-trigger-wrap"), children }),
+    /* @__PURE__ */ jsx69(TooltipContent, { className, style, children: content })
   ] });
 }
 
 // src/components/components/Typography/index.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 function Typography2({
   variant = "p",
   text,
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx69(Typography, { variant, className, style, children: text });
+  return /* @__PURE__ */ jsx70(Typography, { variant, className, style, children: text });
 }
 
 // src/components/register.ts
@@ -3033,6 +3338,7 @@ var builtinComponents = {
   HoverCard: HoverCard2,
   // 复合类扩展组件（第三批）
   Calendar: Calendar2,
+  DatePicker,
   InputOTP: InputOTP2,
   Combobox: Combobox2,
   Carousel: Carousel2,
@@ -3082,9 +3388,11 @@ export {
   Combobox2 as Combobox,
   Command2 as Command,
   Chart,
+  ChatInput,
   Content,
   ContextMenu2 as ContextMenu,
   DataTable,
+  DatePicker,
   Dialog2 as Dialog,
   Drawer2 as Drawer,
   DropdownMenu2 as DropdownMenu,