@pactor-app/ui 1.46.0 → 1.48.0

package/dist/{chunk-QB2RZXDD.js → chunk-PF2FHU2X.js}

@@ -1,8 +1,12 @@
 import {
+  DropdownMenu as DropdownMenu2,
   Icon,
   Menu,
-  Sidebar
-} from "./chunk-FU4P7CAM.js";
+  Sidebar,
+  Tooltip as Tooltip2,
+  renderDropdownItems,
+  triggerWrapper
+} from "./chunk-B2Y6JC36.js";
 import {
   Alert,
   AlertDescription,
@@ -51,14 +55,6 @@ import {
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
   Empty,
   EmptyContent,
   EmptyDescription,
@@ -138,7 +134,7 @@ import {
   Typography,
   navigationMenuTriggerStyle,
   toast
-} from "./chunk-XA7J5SGA.js";
+} from "./chunk-5FQ5SDIZ.js";
 import {
   Dialog,
   DialogContent,
@@ -161,6 +157,14 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
   Input,
   Popover,
   PopoverContent,
@@ -174,7 +178,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger
-} from "./chunk-7OBUSV5S.js";
+} from "./chunk-YHTRCBKF.js";
 import {
   Button,
   buttonVariants,
@@ -256,15 +260,7 @@ function Alert2({
 // src/components/components/AlertDialog/index.tsx
 import { useI18n, useRenderer as useRenderer2 } from "@pactor-app/runtime";
 import { useState } from "react";
-
-// src/components/components/trigger-render.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function triggerWrapper(slot) {
-  return /* @__PURE__ */ jsx4("span", { "data-slot": slot });
-}
-
-// src/components/components/AlertDialog/index.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function AlertDialog2({
   title,
   description,
@@ -292,7 +288,7 @@ function AlertDialog2({
         }
       },
       children: [
-        trigger ? /* @__PURE__ */ jsx5(
+        trigger ? /* @__PURE__ */ jsx4(
           AlertDialogTrigger,
           {
             nativeButton: false,
@@ -302,12 +298,12 @@ function AlertDialog2({
         ) : null,
         /* @__PURE__ */ jsxs3(AlertDialogContent, { className, style, children: [
           /* @__PURE__ */ jsxs3(AlertDialogHeader, { children: [
-            /* @__PURE__ */ jsx5(AlertDialogTitle, { children: title ?? "" }),
-            description ? /* @__PURE__ */ jsx5(AlertDialogDescription, { children: description }) : null
+            /* @__PURE__ */ jsx4(AlertDialogTitle, { children: title ?? "" }),
+            description ? /* @__PURE__ */ jsx4(AlertDialogDescription, { children: description }) : null
           ] }),
           /* @__PURE__ */ jsxs3(AlertDialogFooter, { children: [
-            /* @__PURE__ */ jsx5(AlertDialogCancel, { onClick: () => onCancel?.(), children: cancelText ?? t("pactor.alertDialog.cancel") }),
-            /* @__PURE__ */ jsx5(AlertDialogAction, { onClick: () => onConfirm?.(), children: confirmText ?? t("pactor.alertDialog.confirm") })
+            /* @__PURE__ */ jsx4(AlertDialogCancel, { onClick: () => onCancel?.(), children: cancelText ?? t("pactor.alertDialog.cancel") }),
+            /* @__PURE__ */ jsx4(AlertDialogAction, { onClick: () => onConfirm?.(), children: confirmText ?? t("pactor.alertDialog.confirm") })
           ] })
         ] })
       ]
@@ -317,7 +313,7 @@ function AlertDialog2({
 
 // src/components/components/Anchor/index.tsx
 import { useEffect, useRef, useState as useState2 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function flatten(items) {
   return items.flatMap((item) => [item, ...flatten(item.children ?? [])]);
 }
@@ -371,8 +367,8 @@ function Anchor({ items = [], activeKey, onChange, offsetTop = 0, className, sty
       onChangeRef.current?.(href);
     }
   };
-  const renderItems = (list, depth) => /* @__PURE__ */ jsx6("ul", { "data-slot": "anchor-list", className: cn(depth > 0 && "mt-1 flex flex-col gap-1"), children: list.map((item) => /* @__PURE__ */ jsxs4("li", { className: cn(depth > 0 && "pl-4"), children: [
-    /* @__PURE__ */ jsx6(
+  const renderItems = (list, depth) => /* @__PURE__ */ jsx5("ul", { "data-slot": "anchor-list", className: cn(depth > 0 && "mt-1 flex flex-col gap-1"), children: list.map((item) => /* @__PURE__ */ jsxs4("li", { className: cn(depth > 0 && "pl-4"), children: [
+    /* @__PURE__ */ jsx5(
       "a",
       {
         "data-slot": "anchor-link",
@@ -388,7 +384,7 @@ function Anchor({ items = [], activeKey, onChange, offsetTop = 0, className, sty
     ),
     item.children?.length ? renderItems(item.children, depth + 1) : null
   ] }, item.href)) });
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     "nav",
     {
       "data-slot": "anchor",
@@ -400,13 +396,13 @@ function Anchor({ items = [], activeKey, onChange, offsetTop = 0, className, sty
 }
 
 // src/components/components/AspectRatio/index.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function AspectRatio2({ ratio = 1, children, className, style }) {
-  return /* @__PURE__ */ jsx7(AspectRatio, { ratio, className, style, children });
+  return /* @__PURE__ */ jsx6(AspectRatio, { ratio, className, style, children });
 }
 
 // src/components/components/Audio/index.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Audio({
   src,
   controls = true,
@@ -416,7 +412,7 @@ function Audio({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "audio",
     {
       "data-slot": "audio",
@@ -432,18 +428,18 @@ function Audio({
 }
 
 // src/components/components/Avatar/index.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function Avatar2({ src, alt, fallback, className, style }) {
   return /* @__PURE__ */ jsxs5(Avatar, { className, style, children: [
-    src ? /* @__PURE__ */ jsx9(AvatarImage, { src, alt: alt ?? "" }) : null,
-    fallback ? /* @__PURE__ */ jsx9(AvatarFallback, { children: fallback }) : null
+    src ? /* @__PURE__ */ jsx8(AvatarImage, { src, alt: alt ?? "" }) : null,
+    fallback ? /* @__PURE__ */ jsx8(AvatarFallback, { children: fallback }) : null
   ] });
 }
 
 // src/components/components/BackTop/index.tsx
 import { useI18n as useI18n2 } from "@pactor-app/runtime";
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function BackTop({ visibilityHeight = 400, children, className, style }) {
   const [visible, setVisible] = useState3(false);
   const { t } = useI18n2();
@@ -454,7 +450,7 @@ function BackTop({ visibilityHeight = 400, children, className, style }) {
     return () => window.removeEventListener("scroll", update);
   }, [visibilityHeight]);
   if (!visible) return null;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
@@ -466,15 +462,15 @@ function BackTop({ visibilityHeight = 400, children, className, style }) {
       ),
       style,
       onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }),
-      children: children ?? /* @__PURE__ */ jsx10(Icon, { name: "arrow-up", size: "sm" })
+      children: children ?? /* @__PURE__ */ jsx9(Icon, { name: "arrow-up", size: "sm" })
     }
   );
 }
 
 // src/components/components/Badge/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Badge2({ text, variant = "default", className, style }) {
-  return /* @__PURE__ */ jsx11(Badge, { variant, className, style, children: text });
+  return /* @__PURE__ */ jsx10(Badge, { variant, className, style, children: text });
 }
 
 // src/components/components/Breadcrumb/index.tsx
@@ -496,14 +492,14 @@ function useSpaLinkClick() {
 }
 
 // src/components/components/Breadcrumb/index.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function Breadcrumb2({ items = [], className, style }) {
   const handleSpaClick = useSpaLinkClick();
-  return /* @__PURE__ */ jsx12(Breadcrumb, { className, style, children: /* @__PURE__ */ jsx12(BreadcrumbList, { children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx11(Breadcrumb, { className, style, children: /* @__PURE__ */ jsx11(BreadcrumbList, { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs6(Fragment, { children: [
-      index > 0 ? /* @__PURE__ */ jsx12(BreadcrumbSeparator, {}) : null,
-      /* @__PURE__ */ jsx12(BreadcrumbItem, { children: isLast || !item.href ? /* @__PURE__ */ jsx12(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx12(
+      index > 0 ? /* @__PURE__ */ jsx11(BreadcrumbSeparator, {}) : null,
+      /* @__PURE__ */ jsx11(BreadcrumbItem, { children: isLast || !item.href ? /* @__PURE__ */ jsx11(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx11(
         BreadcrumbLink,
         {
           href: item.href,
@@ -517,7 +513,7 @@ function Breadcrumb2({ items = [], className, style }) {
 
 // src/components/components/Button/index.tsx
 import { Loader2 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var variantMap2 = {
   default: "outline",
   primary: "default",
@@ -562,24 +558,24 @@ function Button2({
         className
       ),
       children: [
-        loading ? /* @__PURE__ */ jsx13(Loader2, { "aria-hidden": true, className: "animate-spin" }) : icon ? /* @__PURE__ */ jsx13(Icon, { name: icon, size: "sm" }) : null,
+        loading ? /* @__PURE__ */ jsx12(Loader2, { "aria-hidden": true, className: "animate-spin" }) : icon ? /* @__PURE__ */ jsx12(Icon, { name: icon, size: "sm" }) : null,
         text ?? children
       ]
     }
   );
   if (tooltip) {
     return /* @__PURE__ */ jsxs7(Tooltip, { children: [
-      /* @__PURE__ */ jsx13(TooltipTrigger, { render: button }),
-      /* @__PURE__ */ jsx13(TooltipContent, { children: tooltip })
+      /* @__PURE__ */ jsx12(TooltipTrigger, { render: button }),
+      /* @__PURE__ */ jsx12(TooltipContent, { children: tooltip })
     ] });
   }
   return button;
 }
 
 // src/components/components/ButtonGroup/index.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function ButtonGroup2({ className, style, children }) {
-  return /* @__PURE__ */ jsx14(ButtonGroup, { className, style, children });
+  return /* @__PURE__ */ jsx13(ButtonGroup, { className, style, children });
 }
 
 // src/components/components/Calendar/index.tsx
@@ -605,7 +601,7 @@ function formItemClass(layout) {
 }
 
 // src/components/components/Calendar/index.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function parseValue(value) {
   if (typeof value !== "string" || value === "") return void 0;
   const date = parseISO(value);
@@ -639,7 +635,7 @@ function Calendar2({
     }
     onChange?.(next);
   };
-  const calendar = /* @__PURE__ */ jsx15(
+  const calendar = /* @__PURE__ */ jsx14(
     Calendar,
     {
       mode,
@@ -659,9 +655,9 @@ function Calendar2({
         className: cn(formItemClass(form.layout), className),
         style,
         children: [
-          label ? /* @__PURE__ */ jsx15("label", { className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap", children: label }) : null,
+          label ? /* @__PURE__ */ jsx14("label", { className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap", children: label }) : null,
           calendar,
-          error ? /* @__PURE__ */ jsx15("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
+          error ? /* @__PURE__ */ jsx14("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
         ]
       }
     );
@@ -671,10 +667,10 @@ function Calendar2({
 
 // src/components/components/Card/index.tsx
 import { useRenderer as useRenderer4 } from "@pactor-app/runtime";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function ExtraSlot({ extra }) {
   const { renderChildren } = useRenderer4();
-  return /* @__PURE__ */ jsx16("div", { "data-slot": "card-action", className: "flex items-center justify-end gap-2", children: renderChildren(extra) });
+  return /* @__PURE__ */ jsx15("div", { "data-slot": "card-action", className: "flex items-center justify-end gap-2", children: renderChildren(extra) });
 }
 function Card2({
   title,
@@ -705,14 +701,14 @@ function Card2({
       onClick,
       children: [
         title || extra ? /* @__PURE__ */ jsxs9(CardHeader, { className: "px-4", children: [
-          title ? /* @__PURE__ */ jsx16(CardTitle, { children: title }) : null,
-          extra ? /* @__PURE__ */ jsx16(ExtraSlot, { extra }) : null
+          title ? /* @__PURE__ */ jsx15(CardTitle, { children: title }) : null,
+          extra ? /* @__PURE__ */ jsx15(ExtraSlot, { extra }) : null
         ] }) : null,
-        loading ? /* @__PURE__ */ jsx16(CardContent, { className: cn("px-4", contentClassName), children: /* @__PURE__ */ jsxs9("div", { "data-slot": "card-loading", className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-full" }),
-          /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-3/4" }),
-          /* @__PURE__ */ jsx16(Skeleton, { className: "h-24 w-full" })
-        ] }) }) : /* @__PURE__ */ jsx16(CardContent, { className: cn("px-4", contentClassName), children })
+        loading ? /* @__PURE__ */ jsx15(CardContent, { className: cn("px-4", contentClassName), children: /* @__PURE__ */ jsxs9("div", { "data-slot": "card-loading", className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx15(Skeleton, { className: "h-4 w-full" }),
+          /* @__PURE__ */ jsx15(Skeleton, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ jsx15(Skeleton, { className: "h-24 w-full" })
+        ] }) }) : /* @__PURE__ */ jsx15(CardContent, { className: cn("px-4", contentClassName), children })
       ]
     }
   );
@@ -721,7 +717,7 @@ function Card2({
 // src/components/components/Carousel/index.tsx
 import { useRenderer as useRenderer5 } from "@pactor-app/runtime";
 import { useEffect as useEffect4, useState as useState4 } from "react";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function isDslNode(item) {
   return typeof item.type === "string";
 }
@@ -754,7 +750,7 @@ function Carousel2({
       className,
       style,
       children: [
-        /* @__PURE__ */ jsx17(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx17(CarouselItem, { children: isDslNode(item) ? renderChildren([item]) : /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx16(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx16(CarouselItem, { children: isDslNode(item) ? renderChildren([item]) : /* @__PURE__ */ jsx16(
           "img",
           {
             src: item.src,
@@ -762,8 +758,8 @@ function Carousel2({
             className: "w-full rounded-md object-cover"
           }
         ) }, index)) }),
-        /* @__PURE__ */ jsx17(CarouselPrevious, {}),
-        /* @__PURE__ */ jsx17(CarouselNext, {})
+        /* @__PURE__ */ jsx16(CarouselPrevious, {}),
+        /* @__PURE__ */ jsx16(CarouselNext, {})
       ]
     }
   );
@@ -776,17 +772,18 @@ import { useEffect as useEffect5, useId, useState as useState5 } from "react";
 
 // src/components/clearable.tsx
 import { X } from "lucide-react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var CLEARABLE_GROUP = "group";
 var CLEARABLE_ICON_HIDE = "group-hover:hidden";
+var CLEARABLE_OVERLAY_HIDE = "pactor-clearable-ghost";
 function ClearHoverButton({ label, onClear, className }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       role: "button",
       "aria-label": label,
       className: cn(
-        "hidden shrink-0 cursor-pointer items-center justify-center text-muted-foreground group-hover:inline-flex hover:text-foreground",
+        "pactor-clearable shrink-0 cursor-pointer items-center justify-center text-muted-foreground hover:text-foreground",
         className
       ),
       onClick: (event) => {
@@ -798,7 +795,7 @@ function ClearHoverButton({ label, onClear, className }) {
         event.preventDefault();
         event.stopPropagation();
       },
-      children: /* @__PURE__ */ jsx18(X, { className: "size-4" })
+      children: /* @__PURE__ */ jsx17(X, { className: "size-4" })
     }
   );
 }
@@ -831,30 +828,138 @@ var CONTROL_SIZE_TRIGGER_TEXT = {
 };
 
 // src/components/components/Form/form-item.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useContext as useContext2 } from "react";
+
+// src/components/components/Field/index.tsx
+import { createContext as createContext2 } from "react";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var FieldNestContext = createContext2(false);
+function Field2({
+  label,
+  required,
+  labelHint,
+  description,
+  error,
+  children,
+  className,
+  style,
+  labelClassName,
+  labelStyle,
+  labelHintClassName,
+  labelHintStyle,
+  controlClassName,
+  controlStyle,
+  descriptionClassName,
+  descriptionStyle,
+  errorClassName,
+  errorStyle
+}) {
+  const form = useFormContext();
+  const inline = form?.layout === "inline";
+  return /* @__PURE__ */ jsx18(
+    Field,
+    {
+      className: cn(
+        form?.layout === "vertical" && "mb-2",
+        // inline Form：label 与控件同一行（覆盖默认 flex-col）
+        inline && "flex-row items-center",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsxs11(FieldNestContext.Provider, { value: true, children: [
+        label || labelHint ? /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: cn(
+              "flex min-h-3.5 items-center gap-2",
+              inline ? "shrink-0" : "w-full justify-between"
+            ),
+            children: [
+              label ? /* @__PURE__ */ jsxs11(FieldLabel, { className: labelClassName, style: labelStyle, children: [
+                required ? /* @__PURE__ */ jsxs11("span", { "aria-hidden": true, className: "text-destructive", children: [
+                  "*",
+                  " "
+                ] }) : null,
+                label
+              ] }) : /* @__PURE__ */ jsx18("span", {}),
+              labelHint ? /* @__PURE__ */ jsx18(
+                "span",
+                {
+                  "data-slot": "field-label-hint",
+                  className: cn(
+                    "shrink-0 text-xs leading-none text-muted-foreground",
+                    labelHintClassName
+                  ),
+                  style: labelHintStyle,
+                  children: labelHint
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx18(
+          "div",
+          {
+            "data-slot": "field-control",
+            className: cn("[&>button+button]:ml-2", controlClassName),
+            style: controlStyle,
+            children
+          }
+        ),
+        description ? /* @__PURE__ */ jsx18(
+          FieldDescription,
+          {
+            className: descriptionClassName,
+            style: descriptionStyle,
+            children: description
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx18(FieldError, { match: true, className: errorClassName, style: errorStyle, children: error }) : null
+      ] })
+    }
+  );
+}
+
+// src/components/components/Form/form-item.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function FieldShell({
   layout,
   label,
   htmlFor,
+  rules,
   error,
   className,
   style,
   children
 }) {
-  return /* @__PURE__ */ jsxs11(
-    "div",
+  const required = rules?.some((rule) => rule.required) === true;
+  const inField = useContext2(FieldNestContext);
+  return /* @__PURE__ */ jsxs12(
+    Field,
     {
       "data-slot": "form-item",
-      className: cn(formItemClass(layout), className),
+      className: cn(
+        // ShadcnField 基础为 flex-col：horizontal / inline 需显式回正为行向
+        layout !== "vertical" && "flex-row",
+        inField ? layout === "vertical" ? "flex flex-col gap-2" : "flex items-center gap-2" : formItemClass(layout),
+        className
+      ),
       style,
       children: [
-        label ? /* @__PURE__ */ jsx19(
-          "label",
-          {
-            htmlFor,
-            className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap",
-            children: label
-          }
+        label ? (
+          // 星号为 label 的同级 aria-hidden 兄弟（而非伪元素 / label 子节点）：
+          // 不占 label 文本内容与可访问名，视觉仍在 label 前
+          /* @__PURE__ */ jsxs12("span", { className: "flex items-center", children: [
+            required ? /* @__PURE__ */ jsx19("span", { "aria-hidden": true, className: "mr-0.5 text-sm leading-normal text-destructive", children: "*" }) : null,
+            /* @__PURE__ */ jsx19(
+              "label",
+              {
+                htmlFor,
+                className: "shrink-0 text-sm leading-normal font-medium whitespace-nowrap",
+                children: label
+              }
+            )
+          ] })
         ) : null,
         children,
         error ? /* @__PURE__ */ jsx19("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
@@ -864,7 +969,7 @@ function FieldShell({
 }
 
 // src/components/components/Cascader/index.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function resolvePath(options, path) {
   const nodes = [];
   let level = options;
@@ -947,8 +1052,8 @@ function Cascader({
     if ((node.children?.length ?? 0) > 0) columns.push(node.children ?? []);
     else break;
   }
-  const control = /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: openPanel, children: [
-    /* @__PURE__ */ jsxs12(
+  const control = /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: openPanel, children: [
+    /* @__PURE__ */ jsxs13(
       PopoverTrigger,
       {
         id: controlId,
@@ -986,7 +1091,7 @@ function Cascader({
         children: column.map((option) => {
           const hasChildren = (option.children?.length ?? 0) > 0;
           const active = activePath[depth] === option.value;
-          return /* @__PURE__ */ jsxs12(
+          return /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
@@ -1013,6 +1118,7 @@ function Cascader({
       {
         layout: form.layout,
         label,
+        rules,
         htmlFor: controlId,
         error: form.errors[name],
         className,
@@ -1026,7 +1132,7 @@ function Cascader({
 
 // src/components/components/Checkbox/index.tsx
 import { useEffect as useEffect6, useId as useId2 } from "react";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function Checkbox2({
   name,
   label,
@@ -1055,7 +1161,7 @@ function Checkbox2({
     }
     onChange?.(next);
   };
-  const control = /* @__PURE__ */ jsxs13(
+  const control = /* @__PURE__ */ jsxs14(
     "span",
     {
       className: cn("inline-flex items-center gap-2", !inForm && className),
@@ -1076,7 +1182,7 @@ function Checkbox2({
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       "div",
       {
         "data-slot": "form-item",
@@ -1093,9 +1199,9 @@ function Checkbox2({
 }
 
 // src/components/components/ChipNode/index.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function ChipNode({ text, selected, dot, onClick, className, style }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "button",
     {
       type: "button",
@@ -1168,7 +1274,7 @@ function ChipFilter({
 import { useI18n as useI18n4 } from "@pactor-app/runtime";
 import { useState as useState6 } from "react";
 import { CodeBlock as HighlightedCodeBlock, registerCodeLanguages } from "@pactor-app/markdown";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 registerCodeLanguages();
 function CodeBlock({ code = "", language = "text", copyable = true, className, style }) {
   const [copied, setCopied] = useState6(false);
@@ -1181,7 +1287,7 @@ function CodeBlock({ code = "", language = "text", copyable = true, className, s
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       "data-slot": "code-block",
@@ -1207,7 +1313,7 @@ function CodeBlock({ code = "", language = "text", copyable = true, className, s
 
 // src/components/components/Collapsible/index.tsx
 import { useState as useState7 } from "react";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function Collapsible2({
   title,
   open,
@@ -1217,7 +1323,7 @@ function Collapsible2({
 }) {
   const [innerOpen, setInnerOpen] = useState7(false);
   const controlled = open !== void 0;
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     Collapsible,
     {
       open: controlled ? open : innerOpen,
@@ -1244,7 +1350,7 @@ import {
   useRef as useRef2,
   useState as useState8
 } from "react";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 var HEX_RE = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
 function normalizeHex(value) {
   const trimmed = value.trim();
@@ -1473,8 +1579,8 @@ function ColorPicker({
     { key: "b", label: "B", text: String(channelB) },
     { key: "a", label: "A", text: String(hsva.a) }
   ];
-  const control = /* @__PURE__ */ jsxs17(Popover, { open, onOpenChange: openPanel, children: [
-    /* @__PURE__ */ jsxs17(
+  const control = /* @__PURE__ */ jsxs18(Popover, { open, onOpenChange: openPanel, children: [
+    /* @__PURE__ */ jsxs18(
       PopoverTrigger,
       {
         id: controlId,
@@ -1503,7 +1609,7 @@ function ColorPicker({
         ]
       }
     ),
-    /* @__PURE__ */ jsx26(PopoverContent, { className: "w-64", children: /* @__PURE__ */ jsxs17("div", { "data-slot": "colorpicker-panel", className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx26(PopoverContent, { className: "w-64", children: /* @__PURE__ */ jsxs18("div", { "data-slot": "colorpicker-panel", className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ jsx26(
         "div",
         {
@@ -1528,8 +1634,8 @@ function ColorPicker({
           )
         }
       ),
-      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
           /* @__PURE__ */ jsx26(
             "div",
             {
@@ -1591,7 +1697,7 @@ function ColorPicker({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ jsx26(
           Input,
           {
@@ -1608,7 +1714,7 @@ function ColorPicker({
             }
           }
         ),
-        /* @__PURE__ */ jsx26("div", { className: "flex items-start gap-1", children: channels.map((channel) => /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx26("div", { className: "flex items-start gap-1", children: channels.map((channel) => /* @__PURE__ */ jsxs18("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-0.5", children: [
           /* @__PURE__ */ jsx26(
             Input,
             {
@@ -1651,6 +1757,7 @@ function ColorPicker({
       {
         layout: form.layout,
         label,
+        rules,
         htmlFor: controlId,
         error: form.errors[name],
         className,
@@ -1665,7 +1772,7 @@ function ColorPicker({
 // src/components/components/Combobox/index.tsx
 import { useI18n as useI18n6 } from "@pactor-app/runtime";
 import { useEffect as useEffect8, useId as useId4, useState as useState9 } from "react";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function Combobox2({
   name,
   label,
@@ -1718,7 +1825,7 @@ function Combobox2({
     onChange?.(option.value);
     setOpen(false);
   };
-  const control = /* @__PURE__ */ jsxs18(Combobox, { open, onOpenChange: setOpen, children: [
+  const control = /* @__PURE__ */ jsxs19(Combobox, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx27(
       ComboboxTrigger,
       {
@@ -1737,9 +1844,9 @@ function Combobox2({
         children: selected ? selected.label : placeholder ?? ""
       }
     ),
-    /* @__PURE__ */ jsx27(ComboboxContent, { children: /* @__PURE__ */ jsxs18(Command, { children: [
+    /* @__PURE__ */ jsx27(ComboboxContent, { children: /* @__PURE__ */ jsxs19(Command, { children: [
       searchable ? /* @__PURE__ */ jsx27(CommandInput, { placeholder }) : null,
-      /* @__PURE__ */ jsxs18(CommandList, { children: [
+      /* @__PURE__ */ jsxs19(CommandList, { children: [
         /* @__PURE__ */ jsx27(CommandEmpty, { children: t("pactor.command.empty") }),
         /* @__PURE__ */ jsx27(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx27(
           CommandItem,
@@ -1758,7 +1865,7 @@ function Combobox2({
   ] });
   if (inForm && form && name) {
     const error = form.errors[name];
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         "data-slot": "form-item",
@@ -1784,7 +1891,7 @@ function Combobox2({
 
 // src/components/components/Command/index.tsx
 import { useI18n as useI18n7 } from "@pactor-app/runtime";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function Command2({
   groups = [],
   placeholder,
@@ -1794,11 +1901,11 @@ function Command2({
   style
 }) {
   const { t } = useI18n7();
-  return /* @__PURE__ */ jsxs19(Command, { className, style, children: [
+  return /* @__PURE__ */ jsxs20(Command, { className, style, children: [
     /* @__PURE__ */ jsx28(CommandInput, { placeholder }),
-    /* @__PURE__ */ jsxs19(CommandList, { children: [
+    /* @__PURE__ */ jsxs20(CommandList, { children: [
       /* @__PURE__ */ jsx28(CommandEmpty, { children: emptyText ?? t("pactor.command.empty") }),
-      groups.map((group, index) => /* @__PURE__ */ jsx28(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs19(
+      groups.map((group, index) => /* @__PURE__ */ jsx28(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs20(
         CommandItem,
         {
           value: item.value,
@@ -1825,7 +1932,7 @@ import {
   useRef as useRef3,
   useState as useState10
 } from "react";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 function useOptionalRenderer() {
   try {
     return useRenderer6();
@@ -1884,7 +1991,7 @@ function ChatInput({
   const handleComposition = (event) => {
     composingRef.current = event.type === "compositionstart";
   };
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       "data-slot": "chat-input",
@@ -1909,7 +2016,7 @@ function ChatInput({
             className: "min-h-[60px] resize-none border-0 px-4 pt-3 pb-1 shadow-none focus-visible:border-transparent focus-visible:ring-0"
           }
         ),
-        toolbarStart || toolbarEnd || !hideSend ? /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 px-2 pb-2", children: [
+        toolbarStart || toolbarEnd || !hideSend ? /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 px-2 pb-2", children: [
           toolbarStart ? renderSlot(toolbarStart) : null,
           /* @__PURE__ */ jsx29("span", { className: "flex-1" }),
           toolbarEnd ? renderSlot(toolbarEnd) : null,
@@ -1982,7 +2089,7 @@ function Content({ className, style, children }) {
 }
 
 // src/components/components/ContextMenu/index.tsx
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function ContextMenu2({
   items = [],
   onSelect,
@@ -1990,9 +2097,9 @@ function ContextMenu2({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsxs21(ContextMenu, { children: [
+  return /* @__PURE__ */ jsxs22(ContextMenu, { children: [
     /* @__PURE__ */ jsx32(ContextMenuTrigger, { children }),
-    /* @__PURE__ */ jsx32(ContextMenuContent, { className, style, children: items.map((item) => /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsx32(ContextMenuContent, { className, style, children: items.map((item) => /* @__PURE__ */ jsxs22(
       ContextMenuItem,
       {
         variant: item.danger ? "destructive" : "default",
@@ -2012,7 +2119,7 @@ function ContextMenu2({
 import { useI18n as useI18n9, useRenderer as useRenderer7 } from "@pactor-app/runtime";
 import { ArrowDown, ArrowUp as ArrowUp2, ArrowUpDown } from "lucide-react";
 import { useMemo, useState as useState11 } from "react";
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function renderCellValue(value) {
   if (value === void 0 || value === null) {
     return "";
@@ -2081,12 +2188,12 @@ function DataTable({
     setCurrent(page);
     onPageChange?.(page);
   };
-  return /* @__PURE__ */ jsxs22("div", { "data-slot": "data-table", className: cn("relative", className), style, children: [
-    /* @__PURE__ */ jsxs22(Table, { children: [
+  return /* @__PURE__ */ jsxs23("div", { "data-slot": "data-table", className: cn("relative", className), style, children: [
+    /* @__PURE__ */ jsxs23(Table, { children: [
       /* @__PURE__ */ jsx33(TableHeader, { children: /* @__PURE__ */ jsx33(TableRow, { className: "hover:bg-transparent", children: columns.map((column, index) => {
         const sorted = sortState?.key === column.key;
-        return /* @__PURE__ */ jsx33(TableHead, { children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
-          column.sortable ? /* @__PURE__ */ jsxs22(
+        return /* @__PURE__ */ jsx33(TableHead, { children: /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1", children: [
+          column.sortable ? /* @__PURE__ */ jsxs23(
             "button",
             {
               type: "button",
@@ -2177,7 +2284,7 @@ import {
 import { enUS, zhCN } from "date-fns/locale";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { useEffect as useEffect9, useId as useId5, useState as useState12 } from "react";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function toDateFnsLocale(locale) {
   switch (locale) {
     case "zh-CN":
@@ -2352,7 +2459,7 @@ function DatePicker(props) {
   const displayText = isRange ? typeof current === "object" && current !== null ? `${current.start} ~ ${current.end}` : "" : typeof current === "string" ? current : "";
   const showClear = allowClear !== false && disabled !== true && displayText !== "";
   const placeholderText = placeholder ?? t(isRange ? "pactor.datePicker.placeholderRange" : "pactor.datePicker.placeholder");
-  const calendar = isRange ? /* @__PURE__ */ jsxs23("div", { className: "flex", children: [
+  const calendar = isRange ? /* @__PURE__ */ jsxs24("div", { className: "flex", children: [
     /* @__PURE__ */ jsx34(
       "div",
       {
@@ -2395,8 +2502,8 @@ function DatePicker(props) {
       locale: dfLocale
     }
   );
-  const control = /* @__PURE__ */ jsxs23(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxs23(
+  const control = /* @__PURE__ */ jsxs24(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs24(
       PopoverTrigger,
       {
         id: controlId,
@@ -2429,7 +2536,7 @@ function DatePicker(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx34(PopoverContent, { className: "w-auto p-0", children: presetList.length > 0 ? /* @__PURE__ */ jsxs23("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx34(PopoverContent, { className: "w-auto p-0", children: presetList.length > 0 ? /* @__PURE__ */ jsxs24("div", { className: "flex", children: [
       /* @__PURE__ */ jsx34(
         "div",
         {
@@ -2455,7 +2562,7 @@ function DatePicker(props) {
   ] });
   if (inForm && form && name) {
     const error = form.errors[name];
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "div",
       {
         "data-slot": "form-item",
@@ -2480,7 +2587,7 @@ function DatePicker(props) {
 }
 
 // src/components/components/Descriptions/index.tsx
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function Descriptions({
   title,
   items = [],
@@ -2489,7 +2596,7 @@ function Descriptions({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsxs24("div", { "data-slot": "descriptions", className: cn("w-full", className), style, children: [
+  return /* @__PURE__ */ jsxs25("div", { "data-slot": "descriptions", className: cn("w-full", className), style, children: [
     title ? /* @__PURE__ */ jsx35("div", { "data-slot": "descriptions-title", className: "mb-3 text-base font-medium", children: title }) : null,
     /* @__PURE__ */ jsx35(
       "div",
@@ -2501,7 +2608,7 @@ function Descriptions({
         ),
         style: { gridTemplateColumns: `repeat(${column}, minmax(0, 1fr))` },
         children: items.map(
-          (item, index) => bordered ? /* @__PURE__ */ jsxs24(
+          (item, index) => bordered ? /* @__PURE__ */ jsxs25(
             "div",
             {
               "data-slot": "descriptions-item",
@@ -2519,7 +2626,7 @@ function Descriptions({
               ]
             },
             index
-          ) : /* @__PURE__ */ jsxs24("div", { "data-slot": "descriptions-item", className: "flex gap-2 text-sm", children: [
+          ) : /* @__PURE__ */ jsxs25("div", { "data-slot": "descriptions-item", className: "flex gap-2 text-sm", children: [
             /* @__PURE__ */ jsx35(
               "span",
               {
@@ -2539,7 +2646,7 @@ function Descriptions({
 // src/components/components/Dialog/index.tsx
 import { useRenderer as useRenderer8 } from "@pactor-app/runtime";
 import { useState as useState13 } from "react";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 function Dialog2({
   title,
   description,
@@ -2554,7 +2661,7 @@ function Dialog2({
   const [innerOpen, setInnerOpen] = useState13(false);
   const controlled = open !== void 0;
   const visible = controlled ? open : innerOpen;
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     Dialog,
     {
       open: visible,
@@ -2575,8 +2682,8 @@ function Dialog2({
             children: renderChildren([trigger])
           }
         ) : null,
-        /* @__PURE__ */ jsxs25(DialogContent, { className, style, children: [
-          title || description ? /* @__PURE__ */ jsxs25(DialogHeader, { children: [
+        /* @__PURE__ */ jsxs26(DialogContent, { className, style, children: [
+          title || description ? /* @__PURE__ */ jsxs26(DialogHeader, { children: [
             title ? /* @__PURE__ */ jsx36(DialogTitle, { children: title }) : null,
             description ? /* @__PURE__ */ jsx36(DialogDescription, { children: description }) : null
           ] }) : null,
@@ -2589,7 +2696,7 @@ function Dialog2({
 
 // src/components/components/DiffViewer/index.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 function diffLines(oldText, newText) {
   const a = oldText === "" ? [] : oldText.split("\n");
   const b = newText === "" ? [] : newText.split("\n");
@@ -2639,13 +2746,13 @@ var signClass = {
   del: "text-destructive"
 };
 function UnifiedView({ ops }) {
-  return /* @__PURE__ */ jsx37("div", { "data-slot": "diff-viewer-unified", children: ops.map((op, index) => /* @__PURE__ */ jsxs26("div", { "data-slot": "diff-row", "data-type": op.type, className: cn("flex", rowClass[op.type]), children: [
+  return /* @__PURE__ */ jsx37("div", { "data-slot": "diff-viewer-unified", children: ops.map((op, index) => /* @__PURE__ */ jsxs27("div", { "data-slot": "diff-row", "data-type": op.type, className: cn("flex", rowClass[op.type]), children: [
     /* @__PURE__ */ jsx37("span", { className: cn("w-6 shrink-0 text-center select-none", signClass[op.type]), children: signMap[op.type] }),
     /* @__PURE__ */ jsx37("span", { className: "flex-1 whitespace-pre-wrap break-all", children: op.text || " " })
   ] }, index)) });
 }
 function SplitView({ ops }) {
-  const rows = ops.map((op, index) => /* @__PURE__ */ jsxs26("div", { className: "flex", children: [
+  const rows = ops.map((op, index) => /* @__PURE__ */ jsxs27("div", { className: "flex", children: [
     /* @__PURE__ */ jsx37(
       "div",
       {
@@ -2677,14 +2784,14 @@ function SplitView({ ops }) {
 }
 function DiffViewer({ oldText = "", newText = "", split, oldTitle, newTitle, className, style }) {
   const ops = useMemo2(() => diffLines(oldText, newText), [oldText, newText]);
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       "data-slot": "diff-viewer",
       className: cn("w-full overflow-hidden rounded-md border border-border font-mono text-xs", className),
       style,
       children: [
-        split && (oldTitle || newTitle) ? /* @__PURE__ */ jsxs26("div", { "data-slot": "diff-viewer-header", className: "flex border-b border-border bg-muted font-sans", children: [
+        split && (oldTitle || newTitle) ? /* @__PURE__ */ jsxs27("div", { "data-slot": "diff-viewer-header", className: "flex border-b border-border bg-muted font-sans", children: [
           /* @__PURE__ */ jsx37("div", { className: "w-1/2 border-r border-border px-2 py-1.5 font-medium", children: oldTitle ?? "" }),
           /* @__PURE__ */ jsx37("div", { className: "w-1/2 px-2 py-1.5 font-medium", children: newTitle ?? "" })
         ] }) : null,
@@ -2697,7 +2804,7 @@ function DiffViewer({ oldText = "", newText = "", split, oldTitle, newTitle, cla
 // src/components/components/DocumentPreview/index.tsx
 import { useI18n as useI18n11 } from "@pactor-app/runtime";
 import { useState as useState14 } from "react";
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var MIN_SCALE = 0.5;
 var MAX_SCALE = 2;
 var toolButtonClass = "flex size-8 items-center justify-center rounded-md hover:bg-accent disabled:pointer-events-none disabled:opacity-50";
@@ -2717,14 +2824,14 @@ function DocumentPreview({ pages = [], currentPage, onChange, className, style }
       onChange?.(next);
     }
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       "data-slot": "document-preview",
       className: cn("flex w-full flex-col overflow-hidden rounded-md border border-border", className),
       style,
       children: [
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsxs28(
           "div",
           {
             "data-slot": "document-preview-toolbar",
@@ -2810,7 +2917,7 @@ function DocumentPreview({ pages = [], currentPage, onChange, className, style }
 import { useI18n as useI18n12, useRenderer as useRenderer9 } from "@pactor-app/runtime";
 import { XIcon } from "lucide-react";
 import { useEffect as useEffect10, useState as useState15 } from "react";
-import { Fragment as Fragment2, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function Drawer2({
   title,
   open,
@@ -2850,7 +2957,7 @@ function Drawer2({
           handleClose();
         }
       },
-      children: /* @__PURE__ */ jsxs28(
+      children: /* @__PURE__ */ jsxs29(
         DrawerContent,
         {
           className,
@@ -2870,7 +2977,7 @@ function Drawer2({
             ) : null,
             title ? /* @__PURE__ */ jsx39(DrawerHeader, { children: /* @__PURE__ */ jsx39(DrawerTitle, { children: title }) }) : null,
             /* @__PURE__ */ jsx39("div", { className: "flex-1 overflow-auto p-4", children }),
-            footer !== false ? /* @__PURE__ */ jsx39(DrawerFooter, { className: "shrink-0 flex-row justify-end gap-2 border-t border-border px-4 py-3", children: footer !== void 0 ? renderChildren([footer]) : /* @__PURE__ */ jsxs28(Fragment2, { children: [
+            footer !== false ? /* @__PURE__ */ jsx39(DrawerFooter, { className: "shrink-0 flex-row justify-end gap-2 border-t border-border px-4 py-3", children: footer !== void 0 ? renderChildren([footer]) : /* @__PURE__ */ jsxs29(Fragment2, { children: [
               /* @__PURE__ */ jsx39(Button, { type: "button", variant: "outline", onClick: handleClose, children: cancelText ?? t("pactor.alertDialog.cancel") }),
               /* @__PURE__ */ jsx39(Button, { type: "button", onClick: () => onOk?.(), children: okText ?? t("pactor.alertDialog.confirm") })
             ] }) }) : null
@@ -2881,167 +2988,21 @@ function Drawer2({
   );
 }
 
-// src/components/components/DropdownMenu/index.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
-function renderDropdownItems(items, onSelect) {
-  const checkable = items.some((i) => i.selected);
-  return items.map((item, index) => {
-    const key = item.value ?? `item-${index}`;
-    if (item.separator) {
-      return /* @__PURE__ */ jsx40(DropdownMenuSeparator, {}, `separator-${index}`);
-    }
-    const leading = item.selected ? /* @__PURE__ */ jsx40(Icon, { name: "check", size: "sm" }) : item.icon ? /* @__PURE__ */ jsx40(Icon, { name: item.icon, size: "sm" }) : checkable ? /* @__PURE__ */ jsx40("span", { className: "size-4 shrink-0" }) : null;
-    if (item.children && item.children.length > 0) {
-      return /* @__PURE__ */ jsxs29(DropdownMenuSub, { children: [
-        /* @__PURE__ */ jsxs29(DropdownMenuSubTrigger, { disabled: item.disabled, children: [
-          leading,
-          item.label,
-          item.trailing ? /* @__PURE__ */ jsx40("span", { className: "ml-auto pl-4 text-xs text-muted-foreground", children: item.trailing }) : null
-        ] }),
-        /* @__PURE__ */ jsx40(DropdownMenuSubContent, { children: renderDropdownItems(item.children, onSelect) })
-      ] }, key);
-    }
-    return /* @__PURE__ */ jsxs29(
-      DropdownMenuItem,
-      {
-        variant: item.danger ? "destructive" : "default",
-        disabled: item.disabled,
-        onClick: () => item.value !== void 0 && onSelect?.(item.value),
-        children: [
-          leading,
-          item.label,
-          item.trailing ? /* @__PURE__ */ jsx40("span", { className: "ml-auto pl-4 text-xs text-muted-foreground", children: item.trailing }) : null
-        ]
-      },
-      key
-    );
-  });
-}
-function DropdownMenu2({
-  items = [],
-  onSelect,
-  children,
-  side,
-  align,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx40(
-      DropdownMenuTrigger,
-      {
-        nativeButton: false,
-        render: triggerWrapper("dropdown-menu-trigger-wrap"),
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx40(DropdownMenuContent, { className, style, side, align, children: renderDropdownItems(items, onSelect) })
-  ] });
-}
-
 // src/components/components/Empty/index.tsx
-import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 function Empty2({ title, description, children, className, style }) {
   return /* @__PURE__ */ jsxs30(Empty, { className, style, children: [
     /* @__PURE__ */ jsxs30(EmptyHeader, { children: [
-      title ? /* @__PURE__ */ jsx41(EmptyTitle, { children: title }) : null,
-      description ? /* @__PURE__ */ jsx41(EmptyDescription, { children: description }) : null
+      title ? /* @__PURE__ */ jsx40(EmptyTitle, { children: title }) : null,
+      description ? /* @__PURE__ */ jsx40(EmptyDescription, { children: description }) : null
     ] }),
-    children ? /* @__PURE__ */ jsx41(EmptyContent, { children }) : null
+    children ? /* @__PURE__ */ jsx40(EmptyContent, { children }) : null
   ] });
 }
 
-// src/components/components/Field/index.tsx
-import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
-function Field2({
-  label,
-  required,
-  labelHint,
-  description,
-  error,
-  children,
-  className,
-  style,
-  labelClassName,
-  labelStyle,
-  labelHintClassName,
-  labelHintStyle,
-  controlClassName,
-  controlStyle,
-  descriptionClassName,
-  descriptionStyle,
-  errorClassName,
-  errorStyle
-}) {
-  const form = useFormContext();
-  const inline = form?.layout === "inline";
-  return /* @__PURE__ */ jsxs31(
-    Field,
-    {
-      className: cn(
-        form?.layout === "vertical" && "mb-2",
-        // inline Form：label 与控件同一行（覆盖默认 flex-col）
-        inline && "flex-row items-center",
-        className
-      ),
-      style,
-      children: [
-        label || labelHint ? /* @__PURE__ */ jsxs31(
-          "div",
-          {
-            className: cn(
-              "flex min-h-3.5 items-center gap-2",
-              inline ? "shrink-0" : "w-full justify-between"
-            ),
-            children: [
-              label ? /* @__PURE__ */ jsxs31(FieldLabel, { className: labelClassName, style: labelStyle, children: [
-                required ? /* @__PURE__ */ jsxs31("span", { "aria-hidden": true, className: "text-destructive", children: [
-                  "*",
-                  " "
-                ] }) : null,
-                label
-              ] }) : /* @__PURE__ */ jsx42("span", {}),
-              labelHint ? /* @__PURE__ */ jsx42(
-                "span",
-                {
-                  "data-slot": "field-label-hint",
-                  className: cn(
-                    "shrink-0 text-xs leading-none text-muted-foreground",
-                    labelHintClassName
-                  ),
-                  style: labelHintStyle,
-                  children: labelHint
-                }
-              ) : null
-            ]
-          }
-        ) : null,
-        /* @__PURE__ */ jsx42(
-          "div",
-          {
-            "data-slot": "field-control",
-            className: cn("[&>button+button]:ml-2", controlClassName),
-            style: controlStyle,
-            children
-          }
-        ),
-        description ? /* @__PURE__ */ jsx42(
-          FieldDescription,
-          {
-            className: descriptionClassName,
-            style: descriptionStyle,
-            children: description
-          }
-        ) : null,
-        error ? /* @__PURE__ */ jsx42(FieldError, { match: true, className: errorClassName, style: errorStyle, children: error }) : null
-      ]
-    }
-  );
-}
-
 // src/components/components/FilePreview/index.tsx
 import { useI18n as useI18n13 } from "@pactor-app/runtime";
-import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var kindIcon = {
   image: "image",
   text: "file-text",
@@ -3074,7 +3035,7 @@ function FilePreview({
 }) {
   const resolvedKind = kind ?? inferKind(name, fileType);
   const { t } = useI18n13();
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       "data-slot": "file-preview",
@@ -3082,19 +3043,19 @@ function FilePreview({
       className: cn("w-full overflow-hidden rounded-md border border-border", className),
       style,
       children: [
-        /* @__PURE__ */ jsxs32("div", { "data-slot": "file-preview-body", className: "bg-muted", children: [
-          resolvedKind === "image" && src ? /* @__PURE__ */ jsx43("img", { src, alt: name ?? "", className: "max-h-72 w-full object-contain" }) : null,
-          resolvedKind === "video" && src ? /* @__PURE__ */ jsx43("video", { src, controls: true, playsInline: true, className: "max-h-72 w-full" }) : null,
-          resolvedKind === "audio" && src ? /* @__PURE__ */ jsx43("div", { className: "p-3", children: /* @__PURE__ */ jsx43("audio", { src, controls: true, className: "w-full" }) }) : null,
-          resolvedKind === "text" ? /* @__PURE__ */ jsx43("pre", { className: "max-h-72 overflow-auto p-3 text-xs whitespace-pre-wrap", children: content ?? "" }) : null,
-          resolvedKind === "other" || resolvedKind !== "text" && !src ? /* @__PURE__ */ jsx43("div", { className: "flex items-center justify-center p-6 text-muted-foreground", children: /* @__PURE__ */ jsx43(Icon, { name: kindIcon[resolvedKind], size: "lg" }) }) : null
+        /* @__PURE__ */ jsxs31("div", { "data-slot": "file-preview-body", className: "bg-muted", children: [
+          resolvedKind === "image" && src ? /* @__PURE__ */ jsx41("img", { src, alt: name ?? "", className: "max-h-72 w-full object-contain" }) : null,
+          resolvedKind === "video" && src ? /* @__PURE__ */ jsx41("video", { src, controls: true, playsInline: true, className: "max-h-72 w-full" }) : null,
+          resolvedKind === "audio" && src ? /* @__PURE__ */ jsx41("div", { className: "p-3", children: /* @__PURE__ */ jsx41("audio", { src, controls: true, className: "w-full" }) }) : null,
+          resolvedKind === "text" ? /* @__PURE__ */ jsx41("pre", { className: "max-h-72 overflow-auto p-3 text-xs whitespace-pre-wrap", children: content ?? "" }) : null,
+          resolvedKind === "other" || resolvedKind !== "text" && !src ? /* @__PURE__ */ jsx41("div", { className: "flex items-center justify-center p-6 text-muted-foreground", children: /* @__PURE__ */ jsx41(Icon, { name: kindIcon[resolvedKind], size: "lg" }) }) : null
         ] }),
-        /* @__PURE__ */ jsxs32("div", { "data-slot": "file-preview-meta", className: "flex items-center gap-2 px-3 py-2 text-sm", children: [
-          /* @__PURE__ */ jsx43(Icon, { name: kindIcon[resolvedKind], size: "sm" }),
-          /* @__PURE__ */ jsx43("span", { className: "min-w-0 flex-1 truncate font-medium", children: name ?? t("pactor.filePreview.unnamed") }),
-          fileSize !== void 0 ? /* @__PURE__ */ jsx43("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize(fileSize) }) : null,
-          fileType ? /* @__PURE__ */ jsx43("span", { className: "shrink-0 text-xs text-muted-foreground", children: fileType }) : null,
-          src ? /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsxs31("div", { "data-slot": "file-preview-meta", className: "flex items-center gap-2 px-3 py-2 text-sm", children: [
+          /* @__PURE__ */ jsx41(Icon, { name: kindIcon[resolvedKind], size: "sm" }),
+          /* @__PURE__ */ jsx41("span", { className: "min-w-0 flex-1 truncate font-medium", children: name ?? t("pactor.filePreview.unnamed") }),
+          fileSize !== void 0 ? /* @__PURE__ */ jsx41("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize(fileSize) }) : null,
+          fileType ? /* @__PURE__ */ jsx41("span", { className: "shrink-0 text-xs text-muted-foreground", children: fileType }) : null,
+          src ? /* @__PURE__ */ jsx41(
             "a",
             {
               "data-slot": "file-preview-download",
@@ -3102,7 +3063,7 @@ function FilePreview({
               download: name ?? true,
               className: "shrink-0 text-primary hover:underline",
               "aria-label": t("pactor.filePreview.download"),
-              children: /* @__PURE__ */ jsx43(Icon, { name: "download", size: "sm" })
+              children: /* @__PURE__ */ jsx41(Icon, { name: "download", size: "sm" })
             }
           ) : null
         ] })
@@ -3112,7 +3073,7 @@ function FilePreview({
 }
 
 // src/components/components/Flex/index.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var gapClass = {
   small: "gap-(--flex-gap-sm)",
   middle: "gap-(--flex-gap-md)",
@@ -3142,7 +3103,7 @@ function Flex({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       "data-slot": "flex",
@@ -3162,9 +3123,9 @@ function Flex({
 }
 
 // src/components/components/Footer/index.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function Footer({ className, style, children }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx43(
     "footer",
     {
       "data-slot": "layout-footer",
@@ -3184,7 +3145,7 @@ import { useCallback as useCallback2, useState as useState17 } from "react";
 // src/components/components/ImageViewer/index.tsx
 import { useI18n as useI18n14 } from "@pactor-app/runtime";
 import { useCallback, useEffect as useEffect11, useState as useState16 } from "react";
-import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 var MIN_SCALE2 = 0.5;
 var MAX_SCALE2 = 4;
 var toolButtonClass2 = "flex size-9 items-center justify-center rounded-md text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-50";
@@ -3206,7 +3167,7 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
   useEffect11(() => {
     reset();
   }, [src, reset]);
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       "data-slot": "image-lightbox",
@@ -3215,7 +3176,7 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
       "aria-modal": "true",
       "aria-label": t("pactor.imageViewer.open"),
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx44(
           "button",
           {
             type: "button",
@@ -3224,7 +3185,7 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
             onClick: onClose
           }
         ),
-        count !== void 0 && count > 1 && index !== void 0 ? /* @__PURE__ */ jsxs33(
+        count !== void 0 && count > 1 && index !== void 0 ? /* @__PURE__ */ jsxs32(
           "div",
           {
             "data-slot": "image-lightbox-indicator",
@@ -3236,7 +3197,7 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx46("div", { className: "pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden", children: src ? /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx44("div", { className: "pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden", children: src ? /* @__PURE__ */ jsx44(
           "img",
           {
             "data-slot": "image-lightbox-img",
@@ -3246,7 +3207,7 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
             style: { transform: `scale(${scale}) rotate(${rotate}deg)` }
           }
         ) : null }),
-        onPrev ? /* @__PURE__ */ jsx46(
+        onPrev ? /* @__PURE__ */ jsx44(
           "button",
           {
             type: "button",
@@ -3254,10 +3215,10 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
             "aria-label": t("pactor.imageViewer.prev"),
             className: cn(toolButtonClass2, "absolute top-1/2 left-4 z-10 -translate-y-1/2 bg-background/80"),
             onClick: onPrev,
-            children: /* @__PURE__ */ jsx46(Icon, { name: "chevron-left" })
+            children: /* @__PURE__ */ jsx44(Icon, { name: "chevron-left" })
           }
         ) : null,
-        onNext ? /* @__PURE__ */ jsx46(
+        onNext ? /* @__PURE__ */ jsx44(
           "button",
           {
             type: "button",
@@ -3265,16 +3226,16 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
             "aria-label": t("pactor.imageViewer.next"),
             className: cn(toolButtonClass2, "absolute top-1/2 right-4 z-10 -translate-y-1/2 bg-background/80"),
             onClick: onNext,
-            children: /* @__PURE__ */ jsx46(Icon, { name: "chevron-right" })
+            children: /* @__PURE__ */ jsx44(Icon, { name: "chevron-right" })
           }
         ) : null,
-        /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsxs32(
           "div",
           {
             "data-slot": "image-lightbox-toolbar",
             className: "absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-1 rounded-md bg-background/80 p-1 shadow-md",
             children: [
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -3283,10 +3244,10 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
                   className: toolButtonClass2,
                   disabled: scale <= MIN_SCALE2,
                   onClick: () => setScale((value) => Math.max(MIN_SCALE2, value - 0.5)),
-                  children: /* @__PURE__ */ jsx46(Icon, { name: "zoom-out", size: "sm" })
+                  children: /* @__PURE__ */ jsx44(Icon, { name: "zoom-out", size: "sm" })
                 }
               ),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -3295,10 +3256,10 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
                   className: toolButtonClass2,
                   disabled: scale >= MAX_SCALE2,
                   onClick: () => setScale((value) => Math.min(MAX_SCALE2, value + 0.5)),
-                  children: /* @__PURE__ */ jsx46(Icon, { name: "zoom-in", size: "sm" })
+                  children: /* @__PURE__ */ jsx44(Icon, { name: "zoom-in", size: "sm" })
                 }
               ),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -3306,10 +3267,10 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
                   "aria-label": t("pactor.imageViewer.rotate"),
                   className: toolButtonClass2,
                   onClick: () => setRotate((value) => value - 90),
-                  children: /* @__PURE__ */ jsx46(Icon, { name: "rotate-ccw", size: "sm" })
+                  children: /* @__PURE__ */ jsx44(Icon, { name: "rotate-ccw", size: "sm" })
                 }
               ),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -3317,10 +3278,10 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
                   "aria-label": t("pactor.imageViewer.reset"),
                   className: toolButtonClass2,
                   onClick: reset,
-                  children: /* @__PURE__ */ jsx46(Icon, { name: "refresh-ccw", size: "sm" })
+                  children: /* @__PURE__ */ jsx44(Icon, { name: "refresh-ccw", size: "sm" })
                 }
               ),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -3328,7 +3289,7 @@ function ImageLightbox({ src, alt, index, count, onPrev, onNext, onClose }) {
                   "aria-label": t("pactor.imageViewer.close"),
                   className: toolButtonClass2,
                   onClick: onClose,
-                  children: /* @__PURE__ */ jsx46(Icon, { name: "x", size: "sm" })
+                  children: /* @__PURE__ */ jsx44(Icon, { name: "x", size: "sm" })
                 }
               )
             ]
@@ -3344,8 +3305,8 @@ function ImageViewer({ src, alt, preview = true, onClose, className, style }) {
     setOpen(false);
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsxs33("span", { "data-slot": "image-viewer", className: cn("inline-block", className), style, children: [
-    src ? /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs32("span", { "data-slot": "image-viewer", className: cn("inline-block", className), style, children: [
+    src ? /* @__PURE__ */ jsx44(
       "img",
       {
         "data-slot": "image-viewer-img",
@@ -3355,12 +3316,12 @@ function ImageViewer({ src, alt, preview = true, onClose, className, style }) {
         onClick: preview ? () => setOpen(true) : void 0
       }
     ) : null,
-    open && src ? /* @__PURE__ */ jsx46(ImageLightbox, { src, alt, onClose: close }) : null
+    open && src ? /* @__PURE__ */ jsx44(ImageLightbox, { src, alt, onClose: close }) : null
   ] });
 }
 
 // src/components/components/Gallery/index.tsx
-import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 var columnsClass = {
   2: "grid-cols-2",
   3: "grid-cols-3",
@@ -3373,9 +3334,9 @@ function Gallery({ items = [], columns = 3, onClose, className, style }) {
     onClose?.();
   }, [onClose]);
   const active = current !== null ? items[current] : void 0;
-  return /* @__PURE__ */ jsxs34("div", { "data-slot": "gallery", className: cn("w-full", className), style, children: [
-    /* @__PURE__ */ jsx47("div", { className: cn("grid gap-3", columnsClass[columns] ?? columnsClass[3]), children: items.map((item, index) => /* @__PURE__ */ jsxs34("figure", { "data-slot": "gallery-item", className: "m-0", children: [
-      /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs33("div", { "data-slot": "gallery", className: cn("w-full", className), style, children: [
+    /* @__PURE__ */ jsx45("div", { className: cn("grid gap-3", columnsClass[columns] ?? columnsClass[3]), children: items.map((item, index) => /* @__PURE__ */ jsxs33("figure", { "data-slot": "gallery-item", className: "m-0", children: [
+      /* @__PURE__ */ jsx45(
         "img",
         {
           src: item.src,
@@ -3384,9 +3345,9 @@ function Gallery({ items = [], columns = 3, onClose, className, style }) {
           onClick: () => setCurrent(index)
         }
       ),
-      item.caption ? /* @__PURE__ */ jsx47("figcaption", { className: "mt-1 truncate text-xs text-muted-foreground", children: item.caption }) : null
+      item.caption ? /* @__PURE__ */ jsx45("figcaption", { className: "mt-1 truncate text-xs text-muted-foreground", children: item.caption }) : null
     ] }, index)) }),
-    active ? /* @__PURE__ */ jsx47(
+    active ? /* @__PURE__ */ jsx45(
       ImageLightbox,
       {
         src: active.src,
@@ -3410,7 +3371,7 @@ import {
   useRef as useRef4,
   useState as useState18
 } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function isEmpty(value) {
   return value === void 0 || value === null || value === "";
 }
@@ -3495,7 +3456,7 @@ function Form({
     context.state.set("form", values);
     onSubmit?.(values);
   };
-  return /* @__PURE__ */ jsx48(FormContextProvider, { value: formContext, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx46(FormContextProvider, { value: formContext, children: /* @__PURE__ */ jsx46(
     "form",
     {
       ref: formElRef,
@@ -3511,7 +3472,7 @@ function Form({
 // src/components/components/For/index.tsx
 import { Fragment as Fragment3 } from "react";
 import { useRenderer as useRenderer11 } from "@pactor-app/runtime";
-import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
 function For({
   items,
   keyField,
@@ -3531,7 +3492,7 @@ function For({
   const renderRow = (item, index) => renderChildren(dslChildren, { row: item, rowIndex: index });
   if (columns !== void 0) {
     const cols = Math.max(1, columns);
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs34(
       "div",
       {
         "data-slot": "grid",
@@ -3543,21 +3504,21 @@ function For({
           ...style
         },
         children: [
-          before ? /* @__PURE__ */ jsx49("div", { "data-slot": "grid-item", children: renderChildren(before) }) : null,
-          rows.map((item, index) => /* @__PURE__ */ jsx49("div", { "data-slot": "grid-item", children: renderRow(item, index) }, keyOf(item, index)))
+          before ? /* @__PURE__ */ jsx47("div", { "data-slot": "grid-item", children: renderChildren(before) }) : null,
+          rows.map((item, index) => /* @__PURE__ */ jsx47("div", { "data-slot": "grid-item", children: renderRow(item, index) }, keyOf(item, index)))
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx49(Fragment4, { children: rows.map((item, index) => /* @__PURE__ */ jsx49(Fragment3, { children: renderRow(item, index) }, keyOf(item, index))) });
+  return /* @__PURE__ */ jsx47(Fragment4, { children: rows.map((item, index) => /* @__PURE__ */ jsx47(Fragment3, { children: renderRow(item, index) }, keyOf(item, index))) });
 }
 
 // src/components/components/Grid/index.tsx
 import { Children, isValidElement as isValidElement2 } from "react";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function Grid({ columns = 1, gap, className, style, children }) {
   const cols = Math.max(1, columns);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       "data-slot": "grid",
@@ -3571,18 +3532,18 @@ function Grid({ columns = 1, gap, className, style, children }) {
       children: Children.map(children, (child, index) => {
         const childStyle = isValidElement2(child) ? child.props.style : void 0;
         const spanStyle = childStyle && (childStyle.gridColumn !== void 0 || childStyle.gridRow !== void 0) ? { gridColumn: childStyle.gridColumn, gridRow: childStyle.gridRow } : void 0;
-        return /* @__PURE__ */ jsx50("div", { "data-slot": "grid-item", style: spanStyle, children: child }, index);
+        return /* @__PURE__ */ jsx48("div", { "data-slot": "grid-item", style: spanStyle, children: child }, index);
       })
     }
   );
 }
 
 // src/components/components/Row/index.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx51 } from "react/jsx-runtime";
-var RowContext = createContext2([0, 0]);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var RowContext = createContext3([0, 0]);
 function useRowGutter() {
-  return useContext2(RowContext);
+  return useContext3(RowContext);
 }
 var justifyMap = {
   start: "flex-start",
@@ -3608,7 +3569,7 @@ function Row({
   children
 }) {
   const [h, v] = Array.isArray(gutter) ? gutter : [gutter ?? 0, gutter ?? 0];
-  return /* @__PURE__ */ jsx51(RowContext.Provider, { value: [h, v], children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx49(RowContext.Provider, { value: [h, v], children: /* @__PURE__ */ jsx49(
     "div",
     {
       "data-slot": "row",
@@ -3626,7 +3587,7 @@ function Row({
 }
 
 // src/components/components/Col/index.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var BREAKPOINTS = {
   xs: "(max-width: 575.98px)",
   sm: "(min-width: 576px)",
@@ -3726,14 +3687,14 @@ function Col({
     ...responsiveClasses("xl", xl),
     ...responsiveClasses("xxl", xxl)
   ];
-  return /* @__PURE__ */ jsx52("div", { "data-slot": "col", className: cn("min-w-0", className, responsive), style: base, children });
+  return /* @__PURE__ */ jsx50("div", { "data-slot": "col", className: cn("min-w-0", className, responsive), style: base, children });
 }
 
 // src/components/components/Header/index.tsx
 import { useI18n as useI18n15 } from "@pactor-app/runtime";
 import { ChevronDownIcon } from "lucide-react";
 import { useState as useState19 } from "react";
-import { Fragment as Fragment5, jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs35 } 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,
@@ -3766,10 +3727,10 @@ function Header({
     className
   );
   if (!hasBrand && !dropdown && !hasMenu && !hasUser && !hasLocales && !themeToggle) {
-    return /* @__PURE__ */ jsx53("header", { "data-slot": "layout-header", className: rootClass, style, children });
+    return /* @__PURE__ */ jsx51("header", { "data-slot": "layout-header", className: rootClass, style, children });
   }
-  const brandNode = hasBrand && /* @__PURE__ */ jsxs36("div", { "data-slot": "header-brand", className: "flex items-center gap-2", children: [
-    logo !== void 0 && /* @__PURE__ */ jsx53(
+  const brandNode = hasBrand && /* @__PURE__ */ jsxs35("div", { "data-slot": "header-brand", className: "flex items-center gap-2", children: [
+    logo !== void 0 && /* @__PURE__ */ jsx51(
       "img",
       {
         "data-slot": "header-brand-logo",
@@ -3778,24 +3739,24 @@ function Header({
         className: "size-6 shrink-0 object-contain"
       }
     ),
-    title !== void 0 && /* @__PURE__ */ jsx53("span", { "data-slot": "header-brand-title", className: "text-base font-semibold", children: title })
+    title !== void 0 && /* @__PURE__ */ jsx51("span", { "data-slot": "header-brand-title", className: "text-base font-semibold", children: title })
   ] });
-  const dropdownNode = dropdown !== void 0 && /* @__PURE__ */ jsx53(HeaderDropdownArea, { dropdown, onSelect: onDropdownSelect });
+  const dropdownNode = dropdown !== void 0 && /* @__PURE__ */ jsx51(HeaderDropdownArea, { dropdown, onSelect: onDropdownSelect });
   const showLeft = brandLeft || dropdownLeft || hasMenu;
   const showRight = dropdownRight || brandRight || hasLocales || hasUser || themeToggle;
-  return /* @__PURE__ */ jsxs36("header", { "data-slot": "layout-header", className: rootClass, style, children: [
-    showLeft && /* @__PURE__ */ jsxs36("div", { "data-slot": "header-left", className: "flex items-center gap-4", children: [
+  return /* @__PURE__ */ jsxs35("header", { "data-slot": "layout-header", className: rootClass, style, children: [
+    showLeft && /* @__PURE__ */ jsxs35("div", { "data-slot": "header-left", className: "flex items-center gap-4", children: [
       brandLeft && brandNode,
       dropdownLeft && dropdownNode,
-      hasMenu && /* @__PURE__ */ jsx53(HeaderMenuArea, { items: menu, onSelect: onMenuSelect })
+      hasMenu && /* @__PURE__ */ jsx51(HeaderMenuArea, { items: menu, onSelect: onMenuSelect })
     ] }),
-    /* @__PURE__ */ jsx53("div", { "data-slot": "header-center", className: "flex flex-1 items-center gap-4", children }),
-    showRight && /* @__PURE__ */ jsxs36("div", { "data-slot": "header-right", className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx51("div", { "data-slot": "header-center", className: "flex flex-1 items-center gap-4", children }),
+    showRight && /* @__PURE__ */ jsxs35("div", { "data-slot": "header-right", className: "flex items-center gap-4", children: [
       dropdownRight && dropdownNode,
       brandRight && brandNode,
-      themeToggle && /* @__PURE__ */ jsx53(HeaderThemeToggle, { onSelect: onThemeChange }),
-      hasLocales && /* @__PURE__ */ jsx53(HeaderLocalesArea, { locales, onSelect: onLocaleChange }),
-      hasUser && /* @__PURE__ */ jsx53(HeaderUserArea, { user, onSelect: onUserSelect })
+      themeToggle && /* @__PURE__ */ jsx51(HeaderThemeToggle, { onSelect: onThemeChange }),
+      hasLocales && /* @__PURE__ */ jsx51(HeaderLocalesArea, { locales, onSelect: onLocaleChange }),
+      hasUser && /* @__PURE__ */ jsx51(HeaderUserArea, { user, onSelect: onUserSelect })
     ] })
   ] });
 }
@@ -3803,42 +3764,42 @@ function HeaderDropdownArea({
   dropdown,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs36(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs35(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs35(
       DropdownMenuTrigger,
       {
         "data-slot": "header-dropdown",
         className: cn(menuItemClass, "outline-hidden cursor-pointer"),
         children: [
           dropdown.label,
-          /* @__PURE__ */ jsx53(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
+          /* @__PURE__ */ jsx51(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx53(DropdownMenuContent, { children: renderDropdownItems(dropdown.items, onSelect) })
+    /* @__PURE__ */ jsx51(DropdownMenuContent, { children: renderDropdownItems(dropdown.items, onSelect) })
   ] });
 }
 function HeaderMenuArea({
   items,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx53("nav", { "data-slot": "header-menu", className: "flex items-center gap-1", children: items.map(
-    (item) => item.children !== void 0 && item.children.length > 0 ? /* @__PURE__ */ jsxs36(DropdownMenu, { children: [
-      /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsx51("nav", { "data-slot": "header-menu", className: "flex items-center gap-1", children: items.map(
+    (item) => item.children !== void 0 && item.children.length > 0 ? /* @__PURE__ */ jsxs35(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs35(
         DropdownMenuTrigger,
         {
           "data-slot": "header-menu-item",
           "data-key": item.key,
           className: cn(menuItemClass, "outline-hidden cursor-pointer"),
           children: [
-            item.icon ? /* @__PURE__ */ jsx53(Icon, { name: item.icon, size: "sm" }) : null,
+            item.icon ? /* @__PURE__ */ jsx51(Icon, { name: item.icon, size: "sm" }) : null,
             item.label,
-            /* @__PURE__ */ jsx53(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
+            /* @__PURE__ */ jsx51(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx53(DropdownMenuContent, { children: item.children.map((child) => /* @__PURE__ */ jsx53(HeaderMenuEntry, { item: child, onSelect }, child.key)) })
-    ] }, item.key) : /* @__PURE__ */ jsxs36(
+      /* @__PURE__ */ jsx51(DropdownMenuContent, { children: item.children.map((child) => /* @__PURE__ */ jsx51(HeaderMenuEntry, { item: child, onSelect }, child.key)) })
+    ] }, item.key) : /* @__PURE__ */ jsxs35(
       "button",
       {
         type: "button",
@@ -3847,7 +3808,7 @@ function HeaderMenuArea({
         className: menuItemClass,
         onClick: () => onSelect?.(item.key),
         children: [
-          item.icon ? /* @__PURE__ */ jsx53(Icon, { name: item.icon, size: "sm" }) : null,
+          item.icon ? /* @__PURE__ */ jsx51(Icon, { name: item.icon, size: "sm" }) : null,
           item.label
         ]
       },
@@ -3860,16 +3821,16 @@ function HeaderMenuEntry({
   onSelect
 }) {
   if (item.children !== void 0 && item.children.length > 0) {
-    return /* @__PURE__ */ jsxs36(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxs36(DropdownMenuSubTrigger, { "data-key": item.key, className: "cursor-pointer", children: [
-        item.icon ? /* @__PURE__ */ jsx53(Icon, { name: item.icon, size: "sm" }) : null,
+    return /* @__PURE__ */ jsxs35(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs35(DropdownMenuSubTrigger, { "data-key": item.key, className: "cursor-pointer", children: [
+        item.icon ? /* @__PURE__ */ jsx51(Icon, { name: item.icon, size: "sm" }) : null,
         item.label
       ] }),
-      /* @__PURE__ */ jsx53(DropdownMenuSubContent, { children: item.children.map((child) => /* @__PURE__ */ jsx53(HeaderMenuEntry, { item: child, onSelect }, child.key)) })
+      /* @__PURE__ */ jsx51(DropdownMenuSubContent, { children: item.children.map((child) => /* @__PURE__ */ jsx51(HeaderMenuEntry, { item: child, onSelect }, child.key)) })
     ] });
   }
-  return /* @__PURE__ */ jsxs36(DropdownMenuItem, { "data-key": item.key, onClick: () => onSelect?.(item.key), children: [
-    item.icon ? /* @__PURE__ */ jsx53(Icon, { name: item.icon, size: "sm" }) : null,
+  return /* @__PURE__ */ jsxs35(DropdownMenuItem, { "data-key": item.key, onClick: () => onSelect?.(item.key), children: [
+    item.icon ? /* @__PURE__ */ jsx51(Icon, { name: item.icon, size: "sm" }) : null,
     item.label
   ] });
 }
@@ -3877,18 +3838,18 @@ function HeaderUserArea({
   user,
   onSelect
 }) {
-  const identity = /* @__PURE__ */ jsxs36(Fragment5, { children: [
-    /* @__PURE__ */ jsxs36(Avatar, { className: "size-7", children: [
-      user.avatar !== void 0 && /* @__PURE__ */ jsx53(AvatarImage, { src: user.avatar, alt: user.name }),
-      /* @__PURE__ */ jsx53(AvatarFallback, { children: user.name.charAt(0) })
+  const identity = /* @__PURE__ */ jsxs35(Fragment5, { children: [
+    /* @__PURE__ */ jsxs35(Avatar, { className: "size-7", children: [
+      user.avatar !== void 0 && /* @__PURE__ */ jsx51(AvatarImage, { src: user.avatar, alt: user.name }),
+      /* @__PURE__ */ jsx51(AvatarFallback, { children: user.name.charAt(0) })
     ] }),
-    /* @__PURE__ */ jsx53("span", { className: "text-sm", children: user.name })
+    /* @__PURE__ */ jsx51("span", { className: "text-sm", children: user.name })
   ] });
   if (user.items === void 0 || user.items.length === 0) {
-    return /* @__PURE__ */ jsx53("div", { "data-slot": "header-user", className: "flex items-center gap-2", children: identity });
+    return /* @__PURE__ */ jsx51("div", { "data-slot": "header-user", className: "flex items-center gap-2", children: identity });
   }
-  return /* @__PURE__ */ jsxs36(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs35(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx51(
       DropdownMenuTrigger,
       {
         "data-slot": "header-user",
@@ -3896,7 +3857,7 @@ function HeaderUserArea({
         children: identity
       }
     ),
-    /* @__PURE__ */ jsx53(DropdownMenuContent, { align: "end", children: renderDropdownItems(user.items, onSelect) })
+    /* @__PURE__ */ jsx51(DropdownMenuContent, { align: "end", children: renderDropdownItems(user.items, onSelect) })
   ] });
 }
 function HeaderLocalesArea({
@@ -3905,19 +3866,19 @@ function HeaderLocalesArea({
 }) {
   const { locale } = useI18n15();
   const current = locales.find((option) => option.value === locale);
-  return /* @__PURE__ */ jsxs36(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs35(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs35(
       DropdownMenuTrigger,
       {
         "data-slot": "header-locales",
         className: cn(menuItemClass, "outline-hidden cursor-pointer"),
         children: [
           current?.label ?? locale,
-          /* @__PURE__ */ jsx53(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
+          /* @__PURE__ */ jsx51(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx53(DropdownMenuContent, { align: "end", children: locales.map((option) => /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx51(DropdownMenuContent, { align: "end", children: locales.map((option) => /* @__PURE__ */ jsx51(
       DropdownMenuItem,
       {
         onClick: () => onSelect?.(option.value),
@@ -3948,7 +3909,7 @@ function HeaderThemeToggle({
     setTheme(next);
     onSelect?.(next);
   };
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx51(
     "button",
     {
       type: "button",
@@ -3957,29 +3918,29 @@ function HeaderThemeToggle({
       title: theme === "dark" ? t("pactor.header.themeToLight") : t("pactor.header.themeToDark"),
       "aria-label": t("pactor.header.themeToggle"),
       onClick: handleToggle,
-      children: theme === "dark" ? /* @__PURE__ */ jsx53(Icon, { name: "sun", size: "sm" }) : /* @__PURE__ */ jsx53(Icon, { name: "moon", size: "sm" })
+      children: theme === "dark" ? /* @__PURE__ */ jsx51(Icon, { name: "sun", size: "sm" }) : /* @__PURE__ */ jsx51(Icon, { name: "moon", size: "sm" })
     }
   );
 }
 
 // src/components/components/HoverCard/index.tsx
 import { useRenderer as useRenderer12 } from "@pactor-app/runtime";
-import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs36 } 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 } = useRenderer12();
-  return /* @__PURE__ */ jsxs37(HoverCard, { children: [
-    /* @__PURE__ */ jsx54(HoverCardTrigger, { render: triggerWrapper("hover-card-trigger-wrap"), children }),
-    /* @__PURE__ */ jsx54(HoverCardContent, { className, style, children: isDslNode2(content) ? renderChildren([content]) : content })
+  return /* @__PURE__ */ jsxs36(HoverCard, { children: [
+    /* @__PURE__ */ jsx52(HoverCardTrigger, { render: triggerWrapper("hover-card-trigger-wrap"), children }),
+    /* @__PURE__ */ jsx52(HoverCardContent, { className, style, children: isDslNode2(content) ? renderChildren([content]) : content })
   ] });
 }
 
 // src/components/components/Image/index.tsx
 import { useI18n as useI18n16 } from "@pactor-app/runtime";
 import { useState as useState20 } from "react";
-import { Fragment as Fragment6, jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
 function Image({
   src,
   alt = "",
@@ -3999,7 +3960,7 @@ function Image({
     ...style
   };
   if (failed || !src) {
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx53(
       "div",
       {
         "data-slot": "image-fallback",
@@ -4008,12 +3969,12 @@ function Image({
           className
         ),
         style: sizeStyle,
-        children: fallback ?? /* @__PURE__ */ jsx55(Icon, { name: "image", size: "lg" })
+        children: fallback ?? /* @__PURE__ */ jsx53(Icon, { name: "image", size: "lg" })
       }
     );
   }
-  return /* @__PURE__ */ jsxs38(Fragment6, { children: [
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs37(Fragment6, { children: [
+    /* @__PURE__ */ jsx53(
       "img",
       {
         "data-slot": "image",
@@ -4027,9 +3988,9 @@ function Image({
         style: sizeStyle
       }
     ),
-    preview ? /* @__PURE__ */ jsx55(Dialog, { open: previewOpen, onOpenChange: setPreviewOpen, children: /* @__PURE__ */ jsxs38(DialogContent, { className: "sm:max-w-3xl", "aria-label": alt || t("pactor.image.preview"), children: [
-      /* @__PURE__ */ jsx55(DialogTitle, { className: "sr-only", children: alt || t("pactor.image.preview") }),
-      /* @__PURE__ */ jsx55(
+    preview ? /* @__PURE__ */ jsx53(Dialog, { open: previewOpen, onOpenChange: setPreviewOpen, children: /* @__PURE__ */ jsxs37(DialogContent, { className: "sm:max-w-3xl", "aria-label": alt || t("pactor.image.preview"), children: [
+      /* @__PURE__ */ jsx53(DialogTitle, { className: "sr-only", children: alt || t("pactor.image.preview") }),
+      /* @__PURE__ */ jsx53(
         "img",
         {
           "data-slot": "image-preview",
@@ -4045,7 +4006,7 @@ function Image({
 // src/components/components/Input/index.tsx
 import { useI18n as useI18n17 } from "@pactor-app/runtime";
 import { useEffect as useEffect13, useId as useId6 } from "react";
-import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
 function Input2({
   name,
   label,
@@ -4082,7 +4043,7 @@ function Input2({
     onChange?.("");
   };
   const inFormRoot = inForm === true;
-  const input = /* @__PURE__ */ jsx56(
+  const input = /* @__PURE__ */ jsx54(
     Input,
     {
       id: controlId,
@@ -4104,7 +4065,7 @@ function Input2({
       }
     }
   );
-  const clearButton = showClear ? /* @__PURE__ */ jsx56(
+  const clearButton = showClear ? /* @__PURE__ */ jsx54(
     ClearHoverButton,
     {
       label: t("pactor.input.clear"),
@@ -4112,7 +4073,7 @@ function Input2({
       onClear: handleClear
     }
   ) : null;
-  const control = allowClear !== false ? /* @__PURE__ */ jsxs39(
+  const control = allowClear !== false ? /* @__PURE__ */ jsxs38(
     "span",
     {
       className: cn("group relative flex items-center", !inFormRoot && className),
@@ -4124,25 +4085,17 @@ function Input2({
     }
   ) : input;
   if (inForm && form && name) {
-    const error = form.errors[name];
-    return /* @__PURE__ */ jsxs39(
-      "div",
+    return /* @__PURE__ */ jsx54(
+      FieldShell,
       {
-        "data-slot": "form-item",
-        className: cn(formItemClass(form.layout), className),
+        layout: form.layout,
+        label,
+        htmlFor: controlId,
+        rules,
+        error: form.errors[name],
+        className,
         style,
-        children: [
-          label ? /* @__PURE__ */ jsx56(
-            "label",
-            {
-              htmlFor: controlId,
-              className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap",
-              children: label
-            }
-          ) : null,
-          control,
-          error ? /* @__PURE__ */ jsx56("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
-        ]
+        children: control
       }
     );
   }
@@ -4150,14 +4103,14 @@ function Input2({
 }
 
 // src/components/components/InputGroup/index.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function InputGroup2({ className, style, children }) {
-  return /* @__PURE__ */ jsx57(InputGroup, { className, style, children });
+  return /* @__PURE__ */ jsx55(InputGroup, { className, style, children });
 }
 
 // src/components/components/InputOTP/index.tsx
 import { useEffect as useEffect14, useState as useState21 } from "react";
-import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function InputOTP2({
   name,
   label,
@@ -4195,38 +4148,38 @@ function InputOTP2({
       onComplete?.(next);
     }
   };
-  const control = /* @__PURE__ */ jsx58(
+  const control = /* @__PURE__ */ jsx56(
     InputOTP,
     {
       maxLength: length,
       value: current,
       onChange: handleChange,
       disabled,
-      children: /* @__PURE__ */ jsx58(InputOTPGroup, { children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx58(InputOTPSlot, { index }, index)) })
+      children: /* @__PURE__ */ jsx56(InputOTPGroup, { children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx56(InputOTPSlot, { index }, index)) })
     }
   );
   if (inForm && form && name) {
     const error = form.errors[name];
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs39(
       "div",
       {
         "data-slot": "form-item",
         className: cn(formItemClass(form.layout), className),
         style,
         children: [
-          label ? /* @__PURE__ */ jsx58("label", { className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap", children: label }) : null,
+          label ? /* @__PURE__ */ jsx56("label", { className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap", children: label }) : null,
           control,
-          error ? /* @__PURE__ */ jsx58("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
+          error ? /* @__PURE__ */ jsx56("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx58("div", { "data-slot": "input-otp-field", className: cn("inline-block", className), style, children: control });
+  return /* @__PURE__ */ jsx56("div", { "data-slot": "input-otp-field", className: cn("inline-block", className), style, children: control });
 }
 
 // src/components/components/Item/index.tsx
 import { useRenderer as useRenderer13 } from "@pactor-app/runtime";
-import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
 function Item2({
   title,
   description,
@@ -4237,20 +4190,20 @@ function Item2({
 }) {
   const { renderChildren } = useRenderer13();
   const mediaNodes = media === void 0 ? [] : Array.isArray(media) ? media : [media];
-  return /* @__PURE__ */ jsxs41(Item, { className, style, children: [
-    mediaNodes.length > 0 ? /* @__PURE__ */ jsx59(ItemMedia, { children: renderChildren(mediaNodes) }) : null,
-    /* @__PURE__ */ jsxs41(ItemContent, { children: [
-      title ? /* @__PURE__ */ jsx59(ItemTitle, { children: title }) : null,
-      description ? /* @__PURE__ */ jsx59(ItemDescription, { children: description }) : null
+  return /* @__PURE__ */ jsxs40(Item, { className, style, children: [
+    mediaNodes.length > 0 ? /* @__PURE__ */ jsx57(ItemMedia, { children: renderChildren(mediaNodes) }) : null,
+    /* @__PURE__ */ jsxs40(ItemContent, { children: [
+      title ? /* @__PURE__ */ jsx57(ItemTitle, { children: title }) : null,
+      description ? /* @__PURE__ */ jsx57(ItemDescription, { children: description }) : null
     ] }),
-    actions && actions.length > 0 ? /* @__PURE__ */ jsx59(ItemActions, { children: renderChildren(actions) }) : null
+    actions && actions.length > 0 ? /* @__PURE__ */ jsx57(ItemActions, { children: renderChildren(actions) }) : null
   ] });
 }
 
 // src/components/components/JSONViewer/index.tsx
 import { useI18n as useI18n18 } from "@pactor-app/runtime";
 import { useState as useState22 } from "react";
-import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
 function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -4264,39 +4217,39 @@ function summarize(value, t) {
 }
 function PrimitiveValue({ value }) {
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx60("span", { "data-slot": "json-value", "data-type": "null", className: "text-muted-foreground", children: "null" });
+    return /* @__PURE__ */ jsx58("span", { "data-slot": "json-value", "data-type": "null", className: "text-muted-foreground", children: "null" });
   }
   if (typeof value === "string") {
-    return /* @__PURE__ */ jsxs42("span", { "data-slot": "json-value", "data-type": "string", className: "text-success", children: [
+    return /* @__PURE__ */ jsxs41("span", { "data-slot": "json-value", "data-type": "string", className: "text-success", children: [
       '"',
       value,
       '"'
     ] });
   }
   if (typeof value === "number") {
-    return /* @__PURE__ */ jsx60("span", { "data-slot": "json-value", "data-type": "number", className: "text-info", children: String(value) });
+    return /* @__PURE__ */ jsx58("span", { "data-slot": "json-value", "data-type": "number", className: "text-info", children: String(value) });
   }
   if (typeof value === "boolean") {
-    return /* @__PURE__ */ jsx60("span", { "data-slot": "json-value", "data-type": "boolean", className: "text-warning", children: String(value) });
+    return /* @__PURE__ */ jsx58("span", { "data-slot": "json-value", "data-type": "boolean", className: "text-warning", children: String(value) });
   }
-  return /* @__PURE__ */ jsx60("span", { "data-slot": "json-value", children: String(value) });
+  return /* @__PURE__ */ jsx58("span", { "data-slot": "json-value", children: String(value) });
 }
 function JsonNode({ keyName, value, depth, expandedDepth }) {
   const [expanded, setExpanded] = useState22(depth < expandedDepth);
   const { t } = useI18n18();
   const composite = isObject(value) || Array.isArray(value);
   if (!composite) {
-    return /* @__PURE__ */ jsxs42("div", { "data-slot": "json-leaf", className: "flex gap-1.5", children: [
-      keyName !== void 0 ? /* @__PURE__ */ jsxs42("span", { className: "shrink-0 text-foreground", children: [
+    return /* @__PURE__ */ jsxs41("div", { "data-slot": "json-leaf", className: "flex gap-1.5", children: [
+      keyName !== void 0 ? /* @__PURE__ */ jsxs41("span", { className: "shrink-0 text-foreground", children: [
         keyName,
         ":"
       ] }) : null,
-      /* @__PURE__ */ jsx60(PrimitiveValue, { value })
+      /* @__PURE__ */ jsx58(PrimitiveValue, { value })
     ] });
   }
   const entries = Array.isArray(value) ? value.map((item, index) => [String(index), item]) : Object.entries(value);
-  return /* @__PURE__ */ jsxs42("div", { "data-slot": "json-node", children: [
-    /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41("div", { "data-slot": "json-node", children: [
+    /* @__PURE__ */ jsxs41(
       "button",
       {
         type: "button",
@@ -4305,17 +4258,17 @@ function JsonNode({ keyName, value, depth, expandedDepth }) {
         className: "flex items-center gap-1 text-left hover:bg-accent/50 rounded-sm",
         onClick: () => setExpanded((value_) => !value_),
         children: [
-          /* @__PURE__ */ jsx60(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: "sm" }),
-          keyName !== void 0 ? /* @__PURE__ */ jsxs42("span", { className: "text-foreground", children: [
+          /* @__PURE__ */ jsx58(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: "sm" }),
+          keyName !== void 0 ? /* @__PURE__ */ jsxs41("span", { className: "text-foreground", children: [
             keyName,
             ":"
           ] }) : null,
-          !expanded ? /* @__PURE__ */ jsx60("span", { className: "text-muted-foreground", children: summarize(value, t) }) : /* @__PURE__ */ jsx60("span", { className: "text-muted-foreground", children: Array.isArray(value) ? "[" : "{" })
+          !expanded ? /* @__PURE__ */ jsx58("span", { className: "text-muted-foreground", children: summarize(value, t) }) : /* @__PURE__ */ jsx58("span", { className: "text-muted-foreground", children: Array.isArray(value) ? "[" : "{" })
         ]
       }
     ),
-    expanded ? /* @__PURE__ */ jsx60("div", { className: "ml-4 border-l border-border pl-2", children: entries.map(([key, item]) => /* @__PURE__ */ jsx60(JsonNode, { keyName: key, value: item, depth: depth + 1, expandedDepth }, key)) }) : null,
-    expanded ? /* @__PURE__ */ jsx60("span", { className: "ml-1 text-muted-foreground", children: Array.isArray(value) ? "]" : "}" }) : null
+    expanded ? /* @__PURE__ */ jsx58("div", { className: "ml-4 border-l border-border pl-2", children: entries.map(([key, item]) => /* @__PURE__ */ jsx58(JsonNode, { keyName: key, value: item, depth: depth + 1, expandedDepth }, key)) }) : null,
+    expanded ? /* @__PURE__ */ jsx58("span", { className: "ml-1 text-muted-foreground", children: Array.isArray(value) ? "]" : "}" }) : null
   ] });
 }
 function JSONViewer({ data, expandedDepth = 1, copyable = true, className, style }) {
@@ -4329,14 +4282,14 @@ function JSONViewer({ data, expandedDepth = 1, copyable = true, className, style
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       "data-slot": "json-viewer",
       className: cn("relative w-full rounded-md border border-border bg-muted p-3 font-mono text-xs leading-5", className),
       style,
       children: [
-        copyable ? /* @__PURE__ */ jsx60(
+        copyable ? /* @__PURE__ */ jsx58(
           "button",
           {
             type: "button",
@@ -4344,38 +4297,38 @@ function JSONViewer({ data, expandedDepth = 1, copyable = true, className, style
             "aria-label": t("pactor.jsonViewer.copy"),
             className: "absolute top-2 right-2 flex size-7 items-center justify-center rounded-md bg-background/80 text-muted-foreground hover:text-foreground",
             onClick: handleCopy,
-            children: /* @__PURE__ */ jsx60(Icon, { name: copied ? "check" : "copy", size: "sm" })
+            children: /* @__PURE__ */ jsx58(Icon, { name: copied ? "check" : "copy", size: "sm" })
           }
         ) : null,
-        /* @__PURE__ */ jsx60(JsonNode, { value: data, depth: 0, expandedDepth })
+        /* @__PURE__ */ jsx58(JsonNode, { value: data, depth: 0, expandedDepth })
       ]
     }
   );
 }
 
 // src/components/components/Kbd/index.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function Kbd2({ text, className, style }) {
-  return /* @__PURE__ */ jsx61(Kbd, { className, style, children: text });
+  return /* @__PURE__ */ jsx59(Kbd, { className, style, children: text });
 }
 
 // src/components/components/Label/index.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 function Label2({ text, htmlFor, className, style }) {
-  return /* @__PURE__ */ jsx62(Label, { htmlFor, className, style, children: text });
+  return /* @__PURE__ */ jsx60(Label, { htmlFor, className, style, children: text });
 }
 
 // src/components/components/Layout/index.tsx
 import { isDslSourceRef } from "@pactor-app/core";
 import { useRenderer as useRenderer14 } from "@pactor-app/runtime";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 function Layout({ direction, className, style, dslChildren }) {
   const { renderChildren, context } = useRenderer14();
   const hasSider = Array.isArray(dslChildren) ? dslChildren.some(
     (child) => !isDslSourceRef(child) && resolveRootType(child, context) === "Sider"
   ) : false;
   const dir = direction ?? (hasSider ? "horizontal" : "vertical");
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       "data-slot": "layout",
@@ -4399,10 +4352,10 @@ function resolveRootType(node, context) {
 }
 
 // src/components/components/Link/index.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 function Link({ href, text, target, className, style, children }) {
   const handleSpaClick = useSpaLinkClick();
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx62(
     "a",
     {
       "data-slot": "link",
@@ -4419,7 +4372,7 @@ function Link({ href, text, target, className, style, children }) {
 
 // src/components/components/List/index.tsx
 import { useI18n as useI18n19 } from "@pactor-app/runtime";
-import { jsx as jsx65, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
 function isImageSrc(avatar) {
   return /^(https?:|data:|\/|\.)/.test(avatar);
 }
@@ -4432,17 +4385,17 @@ function List({
 }) {
   const { t } = useI18n19();
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx63(
       Empty,
       {
         "data-slot": "list",
         className: cn(bordered && "border border-border", className),
         style,
-        children: /* @__PURE__ */ jsx65(EmptyHeader, { children: /* @__PURE__ */ jsx65(EmptyTitle, { children: t("pactor.table.empty") }) })
+        children: /* @__PURE__ */ jsx63(EmptyHeader, { children: /* @__PURE__ */ jsx63(EmptyTitle, { children: t("pactor.table.empty") }) })
       }
     );
   }
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx63(
     "ul",
     {
       "data-slot": "list",
@@ -4453,13 +4406,13 @@ function List({
         className
       ),
       style,
-      children: items.map((item, index) => /* @__PURE__ */ jsxs43(
+      children: items.map((item, index) => /* @__PURE__ */ jsxs42(
         "li",
         {
           "data-slot": "list-item",
           className: "flex items-center gap-3 px-4 py-3",
           children: [
-            item.avatar ? isImageSrc(item.avatar) ? /* @__PURE__ */ jsx65(
+            item.avatar ? isImageSrc(item.avatar) ? /* @__PURE__ */ jsx63(
               "img",
               {
                 "data-slot": "list-item-avatar",
@@ -4467,7 +4420,7 @@ function List({
                 alt: "",
                 className: "size-9 shrink-0 rounded-full object-cover"
               }
-            ) : /* @__PURE__ */ jsx65(
+            ) : /* @__PURE__ */ jsx63(
               "span",
               {
                 "data-slot": "list-item-avatar",
@@ -4475,9 +4428,9 @@ function List({
                 children: item.avatar
               }
             ) : null,
-            /* @__PURE__ */ jsxs43("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx65("div", { "data-slot": "list-item-title", className: "truncate text-sm font-medium", children: item.title }),
-              item.description ? /* @__PURE__ */ jsx65(
+            /* @__PURE__ */ jsxs42("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx63("div", { "data-slot": "list-item-title", className: "truncate text-sm font-medium", children: item.title }),
+              item.description ? /* @__PURE__ */ jsx63(
                 "div",
                 {
                   "data-slot": "list-item-description",
@@ -4486,7 +4439,7 @@ function List({
                 }
               ) : null
             ] }),
-            item.extra ? /* @__PURE__ */ jsx65(
+            item.extra ? /* @__PURE__ */ jsx63(
               "div",
               {
                 "data-slot": "list-item-extra",
@@ -4503,7 +4456,7 @@ function List({
 }
 
 // src/components/components/LoadingOverlay/index.tsx
-import { jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
 function LoadingOverlay({
   loading = false,
   text,
@@ -4515,20 +4468,20 @@ function LoadingOverlay({
     if (!loading) {
       return null;
     }
-    return /* @__PURE__ */ jsxs44(
+    return /* @__PURE__ */ jsxs43(
       "div",
       {
         "data-slot": "loading-overlay",
         className: cn("inline-flex items-center gap-2", className),
         style,
         children: [
-          /* @__PURE__ */ jsx66(Spinner, { className: "size-4" }),
-          text ? /* @__PURE__ */ jsx66("span", { className: "text-sm text-muted-foreground", children: text }) : null
+          /* @__PURE__ */ jsx64(Spinner, { className: "size-4" }),
+          text ? /* @__PURE__ */ jsx64("span", { className: "text-sm text-muted-foreground", children: text }) : null
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       "data-slot": "loading-overlay",
@@ -4536,14 +4489,14 @@ function LoadingOverlay({
       style,
       children: [
         children,
-        loading ? /* @__PURE__ */ jsxs44(
+        loading ? /* @__PURE__ */ jsxs43(
           "div",
           {
             "data-slot": "loading-overlay-mask",
             className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-background/70",
             children: [
-              /* @__PURE__ */ jsx66(Spinner, { className: "size-6" }),
-              text ? /* @__PURE__ */ jsx66("div", { className: "text-sm text-muted-foreground", children: text }) : null
+              /* @__PURE__ */ jsx64(Spinner, { className: "size-6" }),
+              text ? /* @__PURE__ */ jsx64("div", { className: "text-sm text-muted-foreground", children: text }) : null
             ]
           }
         ) : null
@@ -4562,7 +4515,7 @@ import {
   useRef as useRef5,
   useState as useState23
 } from "react";
-import { jsx as jsx67, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
 function detectMention(text, caret, trigger) {
   const before = text.slice(0, caret);
   const start = before.lastIndexOf(trigger);
@@ -4652,13 +4605,13 @@ function Mentions({
       setMention(void 0);
     }
   };
-  const control = /* @__PURE__ */ jsxs45(
+  const control = /* @__PURE__ */ jsxs44(
     "div",
     {
       className: cn("relative", !inForm && className),
       style: inForm ? void 0 : style,
       children: [
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx65(
           Textarea,
           {
             ref: textareaRef,
@@ -4674,12 +4627,12 @@ function Mentions({
             onBlur: () => setMention(void 0)
           }
         ),
-        open ? /* @__PURE__ */ jsx67(
+        open ? /* @__PURE__ */ jsx65(
           "div",
           {
             "data-slot": "mentions-popup",
             className: "absolute z-50 mt-1 flex max-h-48 w-56 flex-col gap-0.5 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
-            children: filtered.map((option, index) => /* @__PURE__ */ jsx67(
+            children: filtered.map((option, index) => /* @__PURE__ */ jsx65(
               "button",
               {
                 type: "button",
@@ -4701,11 +4654,12 @@ function Mentions({
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx65(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         htmlFor: controlId,
         error: form.errors[name],
         className,
@@ -4718,17 +4672,17 @@ function Mentions({
 }
 
 // src/components/components/Menubar/index.tsx
-import { jsx as jsx68, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
 function Menubar2({ menus = [], onSelect, className, style }) {
-  return /* @__PURE__ */ jsx68(Menubar, { className, style, children: menus.map((menu) => /* @__PURE__ */ jsxs46(MenubarMenu, { children: [
-    /* @__PURE__ */ jsx68(MenubarTrigger, { children: menu.label }),
-    /* @__PURE__ */ jsx68(MenubarContent, { children: menu.items.map((item) => /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsx66(Menubar, { className, style, children: menus.map((menu) => /* @__PURE__ */ jsxs45(MenubarMenu, { children: [
+    /* @__PURE__ */ jsx66(MenubarTrigger, { children: menu.label }),
+    /* @__PURE__ */ jsx66(MenubarContent, { children: menu.items.map((item) => /* @__PURE__ */ jsxs45(
       MenubarItem,
       {
         disabled: item.disabled,
         onClick: () => onSelect?.(item.value),
         children: [
-          item.icon ? /* @__PURE__ */ jsx68(Icon, { name: item.icon, size: "sm" }) : null,
+          item.icon ? /* @__PURE__ */ jsx66(Icon, { name: item.icon, size: "sm" }) : null,
           item.label
         ]
       },
@@ -4739,44 +4693,44 @@ function Menubar2({ menus = [], onSelect, className, style }) {
 
 // src/components/components/Message/index.tsx
 import { useEffect as useEffect16 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function Message({ content, variant, duration, className, style }) {
   useEffect16(() => {
     if (typeof content === "string" && content !== "") {
       toast(content, { variant, duration });
     }
   }, [content]);
-  return /* @__PURE__ */ jsx69("div", { "data-slot": "message", hidden: true, className, style });
+  return /* @__PURE__ */ jsx67("div", { "data-slot": "message", hidden: true, className, style });
 }
 
 // src/components/components/NavigationMenu/index.tsx
-import { Fragment as Fragment7, jsx as jsx70, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx68, jsxs as jsxs46 } from "react/jsx-runtime";
 function NavigationMenu2({ items = [], className, style }) {
-  return /* @__PURE__ */ jsx70(NavigationMenu, { className, style, children: /* @__PURE__ */ jsx70(NavigationMenuList, { children: items.map((item, index) => /* @__PURE__ */ jsx70(NavigationMenuItem, { value: `item-${index}`, children: item.children && item.children.length > 0 ? /* @__PURE__ */ jsxs47(Fragment7, { children: [
-    /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsx68(NavigationMenu, { className, style, children: /* @__PURE__ */ jsx68(NavigationMenuList, { children: items.map((item, index) => /* @__PURE__ */ jsx68(NavigationMenuItem, { value: `item-${index}`, children: item.children && item.children.length > 0 ? /* @__PURE__ */ jsxs46(Fragment7, { children: [
+    /* @__PURE__ */ jsxs46(
       NavigationMenuTrigger,
       {
         className: item.icon !== void 0 ? "gap-2" : void 0,
         children: [
-          item.icon ? /* @__PURE__ */ jsx70(Icon, { name: item.icon, size: "sm" }) : null,
+          item.icon ? /* @__PURE__ */ jsx68(Icon, { name: item.icon, size: "sm" }) : null,
           item.label
         ]
       }
     ),
-    /* @__PURE__ */ jsx70(NavigationMenuContent, { children: /* @__PURE__ */ jsx70("ul", { className: "grid w-64 gap-1", children: item.children.map((child) => /* @__PURE__ */ jsx70("li", { children: /* @__PURE__ */ jsxs47(NavigationMenuLink, { href: child.href, children: [
-      /* @__PURE__ */ jsxs47(
+    /* @__PURE__ */ jsx68(NavigationMenuContent, { children: /* @__PURE__ */ jsx68("ul", { className: "grid w-64 gap-1", children: item.children.map((child) => /* @__PURE__ */ jsx68("li", { children: /* @__PURE__ */ jsxs46(NavigationMenuLink, { href: child.href, children: [
+      /* @__PURE__ */ jsxs46(
         "span",
         {
           className: child.icon !== void 0 ? "flex items-center gap-2 font-medium" : "font-medium",
           children: [
-            child.icon ? /* @__PURE__ */ jsx70(Icon, { name: child.icon, size: "sm" }) : null,
+            child.icon ? /* @__PURE__ */ jsx68(Icon, { name: child.icon, size: "sm" }) : null,
             child.label
           ]
         }
       ),
-      child.description ? /* @__PURE__ */ jsx70("span", { className: "text-muted-foreground", children: child.description }) : null
+      child.description ? /* @__PURE__ */ jsx68("span", { className: "text-muted-foreground", children: child.description }) : null
     ] }) }, child.href)) }) })
-  ] }) : /* @__PURE__ */ jsxs47(
+  ] }) : /* @__PURE__ */ jsxs46(
     NavigationMenuLink,
     {
       href: item.href,
@@ -4787,7 +4741,7 @@ function NavigationMenu2({ items = [], className, style }) {
         item.icon !== void 0 && "gap-2"
       ),
       children: [
-        item.icon ? /* @__PURE__ */ jsx70(Icon, { name: item.icon, size: "sm" }) : null,
+        item.icon ? /* @__PURE__ */ jsx68(Icon, { name: item.icon, size: "sm" }) : null,
         item.label
       ]
     }
@@ -4796,7 +4750,7 @@ function NavigationMenu2({ items = [], className, style }) {
 
 // src/components/components/Notification/index.tsx
 import { useEffect as useEffect17 } from "react";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 function Notification({
   title,
   description,
@@ -4810,14 +4764,14 @@ function Notification({
       toast(title, { description, variant, duration });
     }
   }, [title]);
-  return /* @__PURE__ */ jsx71("div", { "data-slot": "notification", hidden: true, className, style });
+  return /* @__PURE__ */ jsx69("div", { "data-slot": "notification", hidden: true, className, style });
 }
 
 // src/components/components/NumberInput/index.tsx
 import { useI18n as useI18n20 } from "@pactor-app/runtime";
 import { ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon } from "lucide-react";
 import { useEffect as useEffect18, useId as useId8, useState as useState24 } from "react";
-import { jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs47 } from "react/jsx-runtime";
 function clamp2(value, min, max) {
   let next = value;
   if (typeof min === "number" && next < min) next = min;
@@ -4900,14 +4854,14 @@ function NumberInput({
     setText("");
     commit(void 0);
   };
-  const control = /* @__PURE__ */ jsxs48(
+  const control = /* @__PURE__ */ jsxs47(
     "span",
     {
       "data-slot": "number-input",
       className: cn("group relative block", !inForm && className),
       style: !inForm ? style : void 0,
       children: [
-        /* @__PURE__ */ jsx72(
+        /* @__PURE__ */ jsx70(
           Input,
           {
             id: controlId,
@@ -4936,15 +4890,15 @@ function NumberInput({
             }
           }
         ),
-        /* @__PURE__ */ jsxs48(
+        /* @__PURE__ */ jsxs47(
           "span",
           {
             className: cn(
               "absolute inset-y-0 right-0 flex w-7 flex-col divide-y divide-input border-l border-input",
-              showClear && CLEARABLE_ICON_HIDE
+              showClear && CLEARABLE_OVERLAY_HIDE
             ),
             children: [
-              /* @__PURE__ */ jsx72(
+              /* @__PURE__ */ jsx70(
                 "button",
                 {
                   type: "button",
@@ -4953,10 +4907,10 @@ function NumberInput({
                   disabled: disabled === true || atMax,
                   className: stepperClass,
                   onClick: () => stepBy(1),
-                  children: /* @__PURE__ */ jsx72(ChevronUpIcon, { className: "size-3" })
+                  children: /* @__PURE__ */ jsx70(ChevronUpIcon, { className: "size-3" })
                 }
               ),
-              /* @__PURE__ */ jsx72(
+              /* @__PURE__ */ jsx70(
                 "button",
                 {
                   type: "button",
@@ -4965,13 +4919,13 @@ function NumberInput({
                   disabled: disabled === true || atMin,
                   className: stepperClass,
                   onClick: () => stepBy(-1),
-                  children: /* @__PURE__ */ jsx72(ChevronDownIcon2, { className: "size-3" })
+                  children: /* @__PURE__ */ jsx70(ChevronDownIcon2, { className: "size-3" })
                 }
               )
             ]
           }
         ),
-        showClear ? /* @__PURE__ */ jsx72(
+        showClear ? /* @__PURE__ */ jsx70(
           ClearHoverButton,
           {
             label: t("pactor.control.clear"),
@@ -4983,11 +4937,12 @@ function NumberInput({
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx72(
+    return /* @__PURE__ */ jsx70(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         htmlFor: controlId,
         error: form.errors[name],
         className,
@@ -5000,11 +4955,11 @@ function NumberInput({
 }
 
 // src/components/components/Page/index.tsx
-import { jsx as jsx73, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs48 } from "react/jsx-runtime";
 function Page({ title, className, style, children }) {
-  return /* @__PURE__ */ jsxs49("div", { "data-slot": "page", className: cn("p-6", className), style, children: [
-    title ? /* @__PURE__ */ jsx73("h2", { "data-slot": "page-title", className: "mb-5 text-xl font-semibold", children: title }) : null,
-    /* @__PURE__ */ jsx73("div", { "data-slot": "page-content", className: "space-y-5", children })
+  return /* @__PURE__ */ jsxs48("div", { "data-slot": "page", className: cn("p-6", className), style, children: [
+    title ? /* @__PURE__ */ jsx71("h2", { "data-slot": "page-title", className: "mb-5 text-xl font-semibold", children: title }) : null,
+    /* @__PURE__ */ jsx71("div", { "data-slot": "page-content", className: "space-y-5", children })
   ] });
 }
 
@@ -5012,7 +4967,7 @@ function Page({ title, className, style, children }) {
 import { useI18n as useI18n21 } from "@pactor-app/runtime";
 import { ChevronDownIcon as ChevronDownIcon3, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useState as useState25 } from "react";
-import { jsx as jsx74, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs49 } from "react/jsx-runtime";
 function pageItems(current, count) {
   if (count <= 7) {
     return Array.from({ length: count }, (_, i) => i + 1);
@@ -5065,7 +5020,7 @@ function Pagination2({
     onChange?.(1);
   };
   const sizes = (pageSizeOptions ?? []).map(Number).filter((n) => Number.isFinite(n) && n > 0);
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx72(
     Pagination,
     {
       className: cn(
@@ -5074,8 +5029,8 @@ function Pagination2({
         className
       ),
       style,
-      children: /* @__PURE__ */ jsxs50(PaginationContent, { children: [
-        showTotal && /* @__PURE__ */ jsx74(PaginationItem, { children: /* @__PURE__ */ jsx74(
+      children: /* @__PURE__ */ jsxs49(PaginationContent, { children: [
+        showTotal && /* @__PURE__ */ jsx72(PaginationItem, { children: /* @__PURE__ */ jsx72(
           "span",
           {
             "data-slot": "pagination-total",
@@ -5083,8 +5038,8 @@ function Pagination2({
             children: t("pactor.pagination.total", { count: total })
           }
         ) }),
-        sizes.length > 0 && /* @__PURE__ */ jsx74(PaginationItem, { children: /* @__PURE__ */ jsxs50(DropdownMenu, { children: [
-          /* @__PURE__ */ jsxs50(
+        sizes.length > 0 && /* @__PURE__ */ jsx72(PaginationItem, { children: /* @__PURE__ */ jsxs49(DropdownMenu, { children: [
+          /* @__PURE__ */ jsxs49(
             DropdownMenuTrigger,
             {
               "data-slot": "pagination-page-size",
@@ -5094,11 +5049,11 @@ function Pagination2({
               ),
               children: [
                 t("pactor.pagination.pageSize", { size: effectivePageSize }),
-                /* @__PURE__ */ jsx74(ChevronDownIcon3, { className: "size-3.5", "aria-hidden": "true" })
+                /* @__PURE__ */ jsx72(ChevronDownIcon3, { className: "size-3.5", "aria-hidden": "true" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx74(DropdownMenuContent, { align: "start", children: renderDropdownItems(
+          /* @__PURE__ */ jsx72(DropdownMenuContent, { align: "start", children: renderDropdownItems(
             sizes.map((s) => ({
               label: t("pactor.pagination.itemsPerPage", { size: s }),
               value: String(s),
@@ -5107,7 +5062,7 @@ function Pagination2({
             (v) => changePageSize(Number(v))
           ) })
         ] }) }),
-        /* @__PURE__ */ jsx74(PaginationItem, { children: /* @__PURE__ */ jsxs50(
+        /* @__PURE__ */ jsx72(PaginationItem, { children: /* @__PURE__ */ jsxs49(
           PaginationLink,
           {
             href: "#",
@@ -5119,12 +5074,12 @@ function Pagination2({
               goTo(current - 1);
             },
             children: [
-              /* @__PURE__ */ jsx74(ChevronLeftIcon, {}),
-              /* @__PURE__ */ jsx74("span", { className: "hidden sm:block", children: t("pactor.pagination.prev") })
+              /* @__PURE__ */ jsx72(ChevronLeftIcon, {}),
+              /* @__PURE__ */ jsx72("span", { className: "hidden sm:block", children: t("pactor.pagination.prev") })
             ]
           }
         ) }),
-        pageItems(current, pageCount).map((item, index) => /* @__PURE__ */ jsx74(PaginationItem, { children: item === "ellipsis" ? /* @__PURE__ */ jsx74(PaginationEllipsis, {}) : /* @__PURE__ */ jsx74(
+        pageItems(current, pageCount).map((item, index) => /* @__PURE__ */ jsx72(PaginationItem, { children: item === "ellipsis" ? /* @__PURE__ */ jsx72(PaginationEllipsis, {}) : /* @__PURE__ */ jsx72(
           PaginationLink,
           {
             href: "#",
@@ -5136,7 +5091,7 @@ function Pagination2({
             children: item
           }
         ) }, item === "ellipsis" ? `ellipsis-${index}` : item)),
-        /* @__PURE__ */ jsx74(PaginationItem, { children: /* @__PURE__ */ jsxs50(
+        /* @__PURE__ */ jsx72(PaginationItem, { children: /* @__PURE__ */ jsxs49(
           PaginationLink,
           {
             href: "#",
@@ -5148,8 +5103,8 @@ function Pagination2({
               goTo(current + 1);
             },
             children: [
-              /* @__PURE__ */ jsx74("span", { className: "hidden sm:block", children: t("pactor.pagination.next") }),
-              /* @__PURE__ */ jsx74(ChevronRightIcon, {})
+              /* @__PURE__ */ jsx72("span", { className: "hidden sm:block", children: t("pactor.pagination.next") }),
+              /* @__PURE__ */ jsx72(ChevronRightIcon, {})
             ]
           }
         ) })
@@ -5161,7 +5116,7 @@ function Pagination2({
 // src/components/components/Popconfirm/index.tsx
 import { useI18n as useI18n22 } from "@pactor-app/runtime";
 import { useState as useState26 } from "react";
-import { jsx as jsx75, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs50 } from "react/jsx-runtime";
 function Popconfirm({
   title,
   description,
@@ -5176,8 +5131,8 @@ function Popconfirm({
 }) {
   const { t } = useI18n22();
   const [open, setOpen] = useState26(false);
-  return /* @__PURE__ */ jsxs51(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsxs50(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx73(
       PopoverTrigger,
       {
         nativeButton: false,
@@ -5185,10 +5140,10 @@ function Popconfirm({
         children
       }
     ),
-    /* @__PURE__ */ jsx75(PopoverContent, { className, style, children: /* @__PURE__ */ jsxs51("div", { className: "grid gap-3", children: [
-      /* @__PURE__ */ jsxs51("div", { className: "grid gap-1", children: [
-        title ? /* @__PURE__ */ jsx75("div", { "data-slot": "popconfirm-title", className: "font-medium", children: title }) : null,
-        description ? /* @__PURE__ */ jsx75(
+    /* @__PURE__ */ jsx73(PopoverContent, { className, style, children: /* @__PURE__ */ jsxs50("div", { className: "grid gap-3", children: [
+      /* @__PURE__ */ jsxs50("div", { className: "grid gap-1", children: [
+        title ? /* @__PURE__ */ jsx73("div", { "data-slot": "popconfirm-title", className: "font-medium", children: title }) : null,
+        description ? /* @__PURE__ */ jsx73(
           "div",
           {
             "data-slot": "popconfirm-description",
@@ -5197,8 +5152,8 @@ function Popconfirm({
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsxs51("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ jsx75(
+      /* @__PURE__ */ jsxs50("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx73(
           Button,
           {
             variant: "outline",
@@ -5210,7 +5165,7 @@ function Popconfirm({
             children: cancelText ?? t("pactor.alertDialog.cancel")
           }
         ),
-        /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsx73(
           Button,
           {
             variant: danger ? "destructive" : "default",
@@ -5229,14 +5184,14 @@ function Popconfirm({
 
 // src/components/components/Popover/index.tsx
 import { useRenderer as useRenderer15 } from "@pactor-app/runtime";
-import { jsx as jsx76, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs51 } from "react/jsx-runtime";
 function isDslNode3(value) {
   return typeof value === "object" && value !== null && typeof value.type === "string";
 }
 function Popover2({ content, children, side, align, className, style }) {
   const { renderChildren } = useRenderer15();
-  return /* @__PURE__ */ jsxs52(Popover, { children: [
-    /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsxs51(Popover, { children: [
+    /* @__PURE__ */ jsx74(
       PopoverTrigger,
       {
         nativeButton: false,
@@ -5244,21 +5199,21 @@ function Popover2({ content, children, side, align, className, style }) {
         children
       }
     ),
-    /* @__PURE__ */ jsx76(PopoverContent, { className, style, side, align, children: isDslNode3(content) ? renderChildren([content]) : content })
+    /* @__PURE__ */ jsx74(PopoverContent, { className, style, side, align, children: isDslNode3(content) ? renderChildren([content]) : content })
   ] });
 }
 
 // src/components/components/Progress/index.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx75 } 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__ */ jsx77(Progress, { value: resolved, className, style, children: /* @__PURE__ */ jsx77(ProgressTrack, { children: /* @__PURE__ */ jsx77(ProgressIndicator, {}) }) });
+  return /* @__PURE__ */ jsx75(Progress, { value: resolved, className, style, children: /* @__PURE__ */ jsx75(ProgressTrack, { children: /* @__PURE__ */ jsx75(ProgressIndicator, {}) }) });
 }
 
 // src/components/components/QRCode/index.tsx
 import { toString } from "qrcode";
 import { useEffect as useEffect19, useState as useState27 } from "react";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var HEX_RE2 = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}(?:[0-9a-fA-F]{2})?)$/;
 function validHex(value) {
   return value && HEX_RE2.test(value.trim()) ? value.trim() : void 0;
@@ -5292,7 +5247,7 @@ function QRCode({
       cancelled = true;
     };
   }, [value, color, bgColor]);
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       "data-slot": "qrcode",
@@ -5302,7 +5257,7 @@ function QRCode({
         className
       ),
       style,
-      children: svg ? /* @__PURE__ */ jsx78(
+      children: svg ? /* @__PURE__ */ jsx76(
         "div",
         {
           "data-slot": "qrcode-svg",
@@ -5310,13 +5265,13 @@ function QRCode({
           style: { width: size, height: size },
           dangerouslySetInnerHTML: { __html: svg }
         }
-      ) : /* @__PURE__ */ jsx78(
+      ) : /* @__PURE__ */ jsx76(
         "div",
         {
           "data-slot": "qrcode-placeholder",
           className: "flex items-center justify-center rounded-md bg-muted text-muted-foreground",
           style: { width: size, height: size },
-          children: /* @__PURE__ */ jsx78(Icon, { name: "image", size: "lg" })
+          children: /* @__PURE__ */ jsx76(Icon, { name: "image", size: "lg" })
         }
       )
     }
@@ -5325,7 +5280,7 @@ function QRCode({
 
 // src/components/components/RadioGroup/index.tsx
 import { useEffect as useEffect20, useId as useId9 } from "react";
-import { jsx as jsx79, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs52 } from "react/jsx-runtime";
 function RadioGroup2({
   name,
   label,
@@ -5356,7 +5311,7 @@ function RadioGroup2({
     onChange?.(next);
   };
   const groupValue = current ?? "";
-  const group = /* @__PURE__ */ jsx79(
+  const group = /* @__PURE__ */ jsx77(
     RadioGroup,
     {
       value: groupValue,
@@ -5371,8 +5326,8 @@ function RadioGroup2({
       children: options.map((option, index) => {
         const textId = `${controlId}-${index}`;
         const optionDisabled = disabled === true || option.disabled === true;
-        return /* @__PURE__ */ jsxs53("span", { className: "inline-flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx79(
+        return /* @__PURE__ */ jsxs52("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx77(
             RadioGroupItem,
             {
               value: option.value,
@@ -5380,7 +5335,7 @@ function RadioGroup2({
               "aria-labelledby": textId
             }
           ),
-          /* @__PURE__ */ jsx79(
+          /* @__PURE__ */ jsx77(
             "span",
             {
               id: textId,
@@ -5401,11 +5356,12 @@ function RadioGroup2({
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsx77(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         error: form.errors[name],
         className,
         style,
@@ -5420,7 +5376,7 @@ function RadioGroup2({
 import { useI18n as useI18n23 } from "@pactor-app/runtime";
 import { Star } from "lucide-react";
 import { useEffect as useEffect21, useState as useState28 } from "react";
-import { Fragment as Fragment8, jsx as jsx80, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx78, jsxs as jsxs53 } from "react/jsx-runtime";
 function Rate({
   name,
   label,
@@ -5463,8 +5419,8 @@ function Rate({
     const full = rating >= i;
     const half = !full && rating >= i - 0.5;
     stars.push(
-      /* @__PURE__ */ jsxs54("span", { className: "relative inline-flex", "data-slot": "rate-star", children: [
-        /* @__PURE__ */ jsx80(
+      /* @__PURE__ */ jsxs53("span", { className: "relative inline-flex", "data-slot": "rate-star", children: [
+        /* @__PURE__ */ jsx78(
           Star,
           {
             className: cn(
@@ -5473,9 +5429,9 @@ function Rate({
             )
           }
         ),
-        half ? /* @__PURE__ */ jsx80("span", { className: "absolute inset-0 w-1/2 overflow-hidden", "aria-hidden": true, children: /* @__PURE__ */ jsx80(Star, { className: "size-5 fill-warning text-warning" }) }) : null,
-        allowHalf ? /* @__PURE__ */ jsxs54(Fragment8, { children: [
-          /* @__PURE__ */ jsx80(
+        half ? /* @__PURE__ */ jsx78("span", { className: "absolute inset-0 w-1/2 overflow-hidden", "aria-hidden": true, children: /* @__PURE__ */ jsx78(Star, { className: "size-5 fill-warning text-warning" }) }) : null,
+        allowHalf ? /* @__PURE__ */ jsxs53(Fragment8, { children: [
+          /* @__PURE__ */ jsx78(
             "button",
             {
               type: "button",
@@ -5485,7 +5441,7 @@ function Rate({
               onClick: () => handleSelect(i - 0.5)
             }
           ),
-          /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx78(
             "button",
             {
               type: "button",
@@ -5495,7 +5451,7 @@ function Rate({
               onClick: () => handleSelect(i)
             }
           )
-        ] }) : /* @__PURE__ */ jsx80(
+        ] }) : /* @__PURE__ */ jsx78(
           "button",
           {
             type: "button",
@@ -5508,7 +5464,7 @@ function Rate({
       ] }, i)
     );
   }
-  const control = /* @__PURE__ */ jsx80(
+  const control = /* @__PURE__ */ jsx78(
     "div",
     {
       "data-slot": "rate",
@@ -5523,11 +5479,12 @@ function Rate({
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx80(
+    return /* @__PURE__ */ jsx78(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         error: form.errors[name],
         className,
         style,
@@ -5541,7 +5498,7 @@ function Rate({
 // src/components/components/Resizable/index.tsx
 import { useRenderer as useRenderer16 } from "@pactor-app/runtime";
 import { Fragment as Fragment9 } from "react";
-import { jsx as jsx81, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs54 } from "react/jsx-runtime";
 function Resizable({
   panels = [],
   direction = "horizontal",
@@ -5549,9 +5506,9 @@ function Resizable({
   style
 }) {
   const { renderChildren } = useRenderer16();
-  return /* @__PURE__ */ jsx81(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ jsxs55(Fragment9, { children: [
-    index > 0 ? /* @__PURE__ */ jsx81(ResizableHandle, { withHandle: true }) : null,
-    /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx79(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ jsxs54(Fragment9, { children: [
+    index > 0 ? /* @__PURE__ */ jsx79(ResizableHandle, { withHandle: true }) : null,
+    /* @__PURE__ */ jsx79(
       Panel,
       {
         defaultSize: typeof panel.defaultSizePx === "number" ? `${panel.defaultSizePx}px` : typeof panel.defaultSize === "number" ? `${panel.defaultSize}%` : void 0,
@@ -5565,7 +5522,7 @@ function Resizable({
 
 // src/components/components/Result/index.tsx
 import { CircleCheck, CircleX, Info, TriangleAlert } from "lucide-react";
-import { jsx as jsx82, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs55 } from "react/jsx-runtime";
 var statusIcon = {
   success: { icon: CircleCheck, className: "text-success" },
   error: { icon: CircleX, className: "text-destructive" },
@@ -5582,7 +5539,7 @@ function Result({
 }) {
   const entry = statusIcon[status];
   const StatusIcon = entry?.icon;
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs55(
     "div",
     {
       "data-slot": "result",
@@ -5593,9 +5550,9 @@ function Result({
       ),
       style,
       children: [
-        /* @__PURE__ */ jsx82("div", { "data-slot": "result-icon", children: StatusIcon ? /* @__PURE__ */ jsx82(StatusIcon, { className: cn("size-12", entry.className) }) : /* @__PURE__ */ jsx82("span", { className: "text-5xl font-semibold text-muted-foreground", children: status }) }),
-        title ? /* @__PURE__ */ jsx82("div", { "data-slot": "result-title", className: "text-lg font-medium", children: title }) : null,
-        subTitle ? /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx80("div", { "data-slot": "result-icon", children: StatusIcon ? /* @__PURE__ */ jsx80(StatusIcon, { className: cn("size-12", entry.className) }) : /* @__PURE__ */ jsx80("span", { className: "text-5xl font-semibold text-muted-foreground", children: status }) }),
+        title ? /* @__PURE__ */ jsx80("div", { "data-slot": "result-title", className: "text-lg font-medium", children: title }) : null,
+        subTitle ? /* @__PURE__ */ jsx80(
           "div",
           {
             "data-slot": "result-subtitle",
@@ -5603,7 +5560,7 @@ function Result({
             children: subTitle
           }
         ) : null,
-        children ? /* @__PURE__ */ jsx82("div", { "data-slot": "result-extra", className: "mt-2", children }) : null
+        children ? /* @__PURE__ */ jsx80("div", { "data-slot": "result-extra", className: "mt-2", children }) : null
       ]
     }
   );
@@ -5612,10 +5569,10 @@ function Result({
 // src/components/components/RichText/index.tsx
 import DOMPurify from "dompurify";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 function RichText({ html, className, style }) {
   const sanitized = useMemo4(() => DOMPurify.sanitize(html ?? ""), [html]);
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx81(
     "div",
     {
       "data-slot": "rich-text",
@@ -5627,7 +5584,7 @@ function RichText({ html, className, style }) {
 }
 
 // src/components/components/ScrollArea/index.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 function ScrollArea2({
   maxHeight,
   maxWidth,
@@ -5635,7 +5592,7 @@ function ScrollArea2({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx82(
     ScrollArea,
     {
       className,
@@ -5647,7 +5604,7 @@ function ScrollArea2({
 
 // src/components/components/Segmented/index.tsx
 import { useEffect as useEffect22, useLayoutEffect, useRef as useRef6, useState as useState29 } from "react";
-import { jsx as jsx85, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs56 } from "react/jsx-runtime";
 function Segmented({
   name,
   label,
@@ -5691,7 +5648,7 @@ function Segmented({
     window.addEventListener("resize", measure);
     return () => window.removeEventListener("resize", measure);
   }, [activeIndex, options]);
-  const control = /* @__PURE__ */ jsxs57(
+  const control = /* @__PURE__ */ jsxs56(
     "div",
     {
       "data-slot": "segmented",
@@ -5703,7 +5660,7 @@ function Segmented({
       ),
       style: inForm ? void 0 : style,
       children: [
-        indicator ? /* @__PURE__ */ jsx85(
+        indicator ? /* @__PURE__ */ jsx83(
           "span",
           {
             "data-slot": "segmented-indicator",
@@ -5714,7 +5671,7 @@ function Segmented({
         ) : null,
         options.map((option, index) => {
           const active = current === option.value;
-          return /* @__PURE__ */ jsxs57(
+          return /* @__PURE__ */ jsxs56(
             "button",
             {
               ref: (el) => {
@@ -5733,7 +5690,7 @@ function Segmented({
                 "disabled:cursor-not-allowed disabled:opacity-50"
               ),
               children: [
-                option.icon ? /* @__PURE__ */ jsx85(Icon, { name: option.icon, size: "sm" }) : null,
+                option.icon ? /* @__PURE__ */ jsx83(Icon, { name: option.icon, size: "sm" }) : null,
                 option.label
               ]
             },
@@ -5744,11 +5701,12 @@ function Segmented({
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx85(
+    return /* @__PURE__ */ jsx83(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         error: form.errors[name],
         className,
         style,
@@ -5762,7 +5720,7 @@ function Segmented({
 // src/components/components/Select/index.tsx
 import { useI18n as useI18n24 } from "@pactor-app/runtime";
 import { useEffect as useEffect23, useId as useId10, useRef as useRef7, useState as useState30 } from "react";
-import { jsx as jsx86, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs57 } from "react/jsx-runtime";
 function Select2({
   name,
   label,
@@ -5805,7 +5763,7 @@ function Select2({
     onChange?.(next ?? void 0);
   };
   const inFormRoot = inForm === true;
-  const select = /* @__PURE__ */ jsx86(
+  const select = /* @__PURE__ */ jsx84(
     "span",
     {
       className: cn(
@@ -5815,7 +5773,7 @@ function Select2({
         controlClassName
       ),
       style: inFormRoot ? void 0 : style,
-      children: /* @__PURE__ */ jsxs58(
+      children: /* @__PURE__ */ jsxs57(
         Select,
         {
           items: options,
@@ -5831,7 +5789,7 @@ function Select2({
             }
           },
           children: [
-            /* @__PURE__ */ jsxs58(
+            /* @__PURE__ */ jsxs57(
               SelectTrigger,
               {
                 id: controlId,
@@ -5843,8 +5801,8 @@ function Select2({
                   CLEARABLE_GROUP
                 ),
                 children: [
-                  /* @__PURE__ */ jsx86(SelectValue, { placeholder }),
-                  showClear ? /* @__PURE__ */ jsx86(
+                  /* @__PURE__ */ jsx84(SelectValue, { placeholder }),
+                  showClear ? /* @__PURE__ */ jsx84(
                     ClearHoverButton,
                     {
                       label: t("pactor.select.clear"),
@@ -5854,13 +5812,13 @@ function Select2({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs58(SelectContent, { children: [
-              searchEnabled ? /* @__PURE__ */ jsx86(
+            /* @__PURE__ */ jsxs57(SelectContent, { children: [
+              searchEnabled ? /* @__PURE__ */ jsx84(
                 "div",
                 {
                   "data-slot": "select-search",
                   className: "sticky top-0 z-10 -mx-1 -mt-1 bg-popover px-1 pt-1 pb-1",
-                  children: /* @__PURE__ */ jsx86(
+                  children: /* @__PURE__ */ jsx84(
                     "input",
                     {
                       ref: searchInputRef,
@@ -5878,7 +5836,7 @@ function Select2({
                   )
                 }
               ) : null,
-              visibleOptions.map((option) => /* @__PURE__ */ jsx86(
+              visibleOptions.map((option) => /* @__PURE__ */ jsx84(
                 SelectItem,
                 {
                   value: option.value,
@@ -5887,7 +5845,7 @@ function Select2({
                 },
                 String(option.value)
               )),
-              visibleOptions.length === 0 ? /* @__PURE__ */ jsx86("div", { className: "px-2 py-3 text-center text-sm text-muted-foreground", children: t("pactor.command.empty") }) : null
+              visibleOptions.length === 0 ? /* @__PURE__ */ jsx84("div", { className: "px-2 py-3 text-center text-sm text-muted-foreground", children: t("pactor.command.empty") }) : null
             ] })
           ]
         }
@@ -5895,25 +5853,17 @@ function Select2({
     }
   );
   if (inForm && form && name) {
-    const error = form.errors[name];
-    return /* @__PURE__ */ jsxs58(
-      "div",
+    return /* @__PURE__ */ jsx84(
+      FieldShell,
       {
-        "data-slot": "form-item",
-        className: cn(formItemClass(form.layout), className),
+        layout: form.layout,
+        label,
+        htmlFor: controlId,
+        rules,
+        error: form.errors[name],
+        className,
         style,
-        children: [
-          label ? /* @__PURE__ */ jsx86(
-            "label",
-            {
-              htmlFor: controlId,
-              className: "shrink-0 text-sm leading-none font-medium whitespace-nowrap",
-              children: label
-            }
-          ) : null,
-          select,
-          error ? /* @__PURE__ */ jsx86("div", { "data-slot": "form-error", className: "text-sm text-destructive", children: error }) : null
-        ]
+        children: select
       }
     );
   }
@@ -5921,9 +5871,9 @@ function Select2({
 }
 
 // src/components/components/Separator/index.tsx
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 function Separator2({ orientation = "horizontal", className, style }) {
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx85(
     Separator,
     {
       orientation,
@@ -5937,7 +5887,7 @@ function Separator2({ orientation = "horizontal", className, style }) {
 }
 
 // src/components/components/Sheet/index.tsx
-import { jsx as jsx88, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs58 } from "react/jsx-runtime";
 function Sheet2({
   title,
   open,
@@ -5947,7 +5897,7 @@ function Sheet2({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx86(
     Sheet,
     {
       open: open ?? false,
@@ -5956,9 +5906,9 @@ function Sheet2({
           onClose?.();
         }
       },
-      children: /* @__PURE__ */ jsxs59(SheetContent, { side, className, style, children: [
-        title ? /* @__PURE__ */ jsx88(SheetHeader, { children: /* @__PURE__ */ jsx88(SheetTitle, { children: title }) }) : null,
-        /* @__PURE__ */ jsx88("div", { className: "flex-1 overflow-auto px-4", children })
+      children: /* @__PURE__ */ jsxs58(SheetContent, { side, className, style, children: [
+        title ? /* @__PURE__ */ jsx86(SheetHeader, { children: /* @__PURE__ */ jsx86(SheetTitle, { children: title }) }) : null,
+        /* @__PURE__ */ jsx86("div", { className: "flex-1 overflow-auto px-4", children })
       ] })
     }
   );
@@ -5966,7 +5916,7 @@ function Sheet2({
 
 // src/components/components/Sider/index.tsx
 import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
-import { jsx as jsx89, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs59 } from "react/jsx-runtime";
 function Sider({
   width = 200,
   collapsible,
@@ -5978,7 +5928,7 @@ function Sider({
   children
 }) {
   const current = collapsed ? collapsedWidth : width;
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs59(
     "aside",
     {
       "data-slot": "layout-sider",
@@ -5989,15 +5939,15 @@ function Sider({
       ),
       style: { width: current, ...style },
       children: [
-        /* @__PURE__ */ jsx89("div", { className: "min-h-0 flex-1 overflow-auto", children }),
-        collapsible ? /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsx87("div", { className: "min-h-0 flex-1 overflow-auto", children }),
+        collapsible ? /* @__PURE__ */ jsx87(
           "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__ */ jsx89(ChevronRight2, { "aria-hidden": true, className: "size-4" }) : /* @__PURE__ */ jsx89(ChevronLeft, { "aria-hidden": true, className: "size-4" })
+            children: collapsed ? /* @__PURE__ */ jsx87(ChevronRight2, { "aria-hidden": true, className: "size-4" }) : /* @__PURE__ */ jsx87(ChevronLeft, { "aria-hidden": true, className: "size-4" })
           }
         ) : null
       ]
@@ -6006,7 +5956,7 @@ function Sider({
 }
 
 // src/components/components/Skeleton/index.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var shapeDefaults = {
   line: { className: "h-4 w-full", style: {} },
   circle: { className: "rounded-full", style: { width: 40, height: 40 } },
@@ -6017,7 +5967,7 @@ function toSize(value) {
 }
 function Skeleton2({ shape = "line", width, height, className, style }) {
   const defaults = shapeDefaults[shape];
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx88(
     Skeleton,
     {
       className: cn(defaults.className, className),
@@ -6033,7 +5983,7 @@ function Skeleton2({ shape = "line", width, height, className, style }) {
 
 // src/components/components/Slider/index.tsx
 import { useEffect as useEffect24 } from "react";
-import { jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs60 } from "react/jsx-runtime";
 function Slider2({
   name,
   label,
@@ -6064,7 +6014,7 @@ function Slider2({
     }
     onChange?.(next);
   };
-  const slider = /* @__PURE__ */ jsx91(
+  const slider = /* @__PURE__ */ jsx89(
     Slider,
     {
       value: numberValue,
@@ -6076,18 +6026,19 @@ function Slider2({
       onValueChange: handleChange,
       className: inForm ? void 0 : className,
       style: inForm ? void 0 : style,
-      children: /* @__PURE__ */ jsxs61(SliderControl, { children: [
-        /* @__PURE__ */ jsx91(SliderTrack, { children: /* @__PURE__ */ jsx91(SliderIndicator, {}) }),
-        /* @__PURE__ */ jsx91(SliderThumb, {})
+      children: /* @__PURE__ */ jsxs60(SliderControl, { children: [
+        /* @__PURE__ */ jsx89(SliderTrack, { children: /* @__PURE__ */ jsx89(SliderIndicator, {}) }),
+        /* @__PURE__ */ jsx89(SliderThumb, {})
       ] })
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx91(
+    return /* @__PURE__ */ jsx89(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         error: form.errors[name],
         className,
         style,
@@ -6101,7 +6052,7 @@ function Slider2({
 // src/components/components/Sonner/index.tsx
 import { useRenderer as useRenderer17 } from "@pactor-app/runtime";
 import { useEffect as useEffect25 } from "react";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 function Sonner({ className, style }) {
   const { context } = useRenderer17();
   useEffect25(() => {
@@ -6118,11 +6069,11 @@ function Sonner({ className, style }) {
       return { ok: true };
     });
   }, [context]);
-  return /* @__PURE__ */ jsx92("div", { "data-slot": "sonner", className, style, children: /* @__PURE__ */ jsx92(Toaster, {}) });
+  return /* @__PURE__ */ jsx90("div", { "data-slot": "sonner", className, style, children: /* @__PURE__ */ jsx90(Toaster, {}) });
 }
 
 // src/components/components/Space/index.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var sizeClass2 = {
   small: "gap-2",
   middle: "gap-4",
@@ -6143,7 +6094,7 @@ function Space({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx91(
     "div",
     {
       "data-slot": "space",
@@ -6162,31 +6113,31 @@ function Space({
 }
 
 // src/components/components/Spinner/index.tsx
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var sizeClass3 = {
   sm: "size-3",
   default: "size-4",
   lg: "size-6"
 };
 function Spinner2({ size = "default", className, style }) {
-  return /* @__PURE__ */ jsx94(Spinner, { className: cn(sizeClass3[size], className), style });
+  return /* @__PURE__ */ jsx92(Spinner, { className: cn(sizeClass3[size], className), style });
 }
 
 // src/components/components/Statistic/index.tsx
-import { jsx as jsx95, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs61 } 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__ */ jsxs62("div", { "data-slot": "statistic", className: cn(className), style, children: [
-    title ? /* @__PURE__ */ jsx95("div", { "data-slot": "statistic-title", className: "text-sm text-muted-foreground", children: title }) : null,
-    /* @__PURE__ */ jsxs62("div", { "data-slot": "statistic-value", className: "text-2xl font-bold tabular-nums", children: [
+  return /* @__PURE__ */ jsxs61("div", { "data-slot": "statistic", className: cn(className), style, children: [
+    title ? /* @__PURE__ */ jsx93("div", { "data-slot": "statistic-title", className: "text-sm text-muted-foreground", children: title }) : null,
+    /* @__PURE__ */ jsxs61("div", { "data-slot": "statistic-value", className: "text-2xl font-bold tabular-nums", children: [
       display,
-      suffix ? /* @__PURE__ */ jsx95("span", { className: "ml-1 text-sm font-normal text-muted-foreground", children: suffix }) : null
+      suffix ? /* @__PURE__ */ jsx93("span", { className: "ml-1 text-sm font-normal text-muted-foreground", children: suffix }) : null
     ] })
   ] });
 }
 
 // src/components/components/Status/index.tsx
-import { jsx as jsx96, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs62 } from "react/jsx-runtime";
 var dotClass = {
   success: "bg-success",
   processing: "bg-info",
@@ -6195,7 +6146,7 @@ var dotClass = {
   default: "bg-muted-foreground"
 };
 function Status({ status = "default", text, className, style }) {
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs62(
     "span",
     {
       "data-slot": "status",
@@ -6203,8 +6154,8 @@ function Status({ status = "default", text, className, style }) {
       className: cn("inline-flex items-center gap-1.5 text-sm", className),
       style,
       children: [
-        /* @__PURE__ */ jsxs63("span", { "data-slot": "status-dot", className: "relative flex size-2", children: [
-          status === "processing" ? /* @__PURE__ */ jsx96(
+        /* @__PURE__ */ jsxs62("span", { "data-slot": "status-dot", className: "relative flex size-2", children: [
+          status === "processing" ? /* @__PURE__ */ jsx94(
             "span",
             {
               "aria-hidden": "true",
@@ -6214,9 +6165,9 @@ function Status({ status = "default", text, className, style }) {
               )
             }
           ) : null,
-          /* @__PURE__ */ jsx96("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[status]) })
+          /* @__PURE__ */ jsx94("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[status]) })
         ] }),
-        text ? /* @__PURE__ */ jsx96("span", { "data-slot": "status-text", children: text }) : null
+        text ? /* @__PURE__ */ jsx94("span", { "data-slot": "status-text", children: text }) : null
       ]
     }
   );
@@ -6224,7 +6175,7 @@ function Status({ status = "default", text, className, style }) {
 
 // src/components/components/Steps/index.tsx
 import { Fragment as Fragment10 } from "react";
-import { jsx as jsx97, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
 var iconBoxClass = {
   finish: "border-primary text-primary",
   process: "border-primary bg-primary text-primary-foreground",
@@ -6244,7 +6195,7 @@ function statusIcon2(status) {
 }
 function Steps({ items = [], current = 0, direction = "horizontal", className, style }) {
   const vertical = direction === "vertical";
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx95(
     "ol",
     {
       "data-slot": "steps",
@@ -6254,15 +6205,15 @@ function Steps({ items = [], current = 0, direction = "horizontal", className, s
         const status = item.status ?? (index < current ? "finish" : index === current ? "process" : "wait");
         const stateIcon = statusIcon2(status);
         const last = index === items.length - 1;
-        return /* @__PURE__ */ jsxs64(Fragment10, { children: [
-          /* @__PURE__ */ jsxs64(
+        return /* @__PURE__ */ jsxs63(Fragment10, { children: [
+          /* @__PURE__ */ jsxs63(
             "li",
             {
               "data-slot": "steps-item",
               "data-status": status,
               className: cn("flex gap-2", vertical ? "items-start" : "shrink-0 items-start"),
               children: [
-                /* @__PURE__ */ jsx97(
+                /* @__PURE__ */ jsx95(
                   "span",
                   {
                     "data-slot": "steps-icon",
@@ -6270,17 +6221,17 @@ function Steps({ items = [], current = 0, direction = "horizontal", className, s
                       "flex size-7 shrink-0 items-center justify-center rounded-full border text-sm",
                       iconBoxClass[status]
                     ),
-                    children: item.icon ? /* @__PURE__ */ jsx97(Icon, { name: item.icon, size: "sm" }) : stateIcon ? /* @__PURE__ */ jsx97(Icon, { name: stateIcon, size: "sm" }) : index + 1
+                    children: item.icon ? /* @__PURE__ */ jsx95(Icon, { name: item.icon, size: "sm" }) : stateIcon ? /* @__PURE__ */ jsx95(Icon, { name: stateIcon, size: "sm" }) : index + 1
                   }
                 ),
-                /* @__PURE__ */ jsxs64("div", { className: cn("min-w-0", !vertical && "pt-0.5"), children: [
-                  /* @__PURE__ */ jsx97("div", { "data-slot": "steps-title", className: cn("text-sm", titleClass[status]), children: item.title }),
-                  item.description ? /* @__PURE__ */ jsx97("div", { "data-slot": "steps-description", className: "mt-0.5 text-xs text-muted-foreground", children: item.description }) : null
+                /* @__PURE__ */ jsxs63("div", { className: cn("min-w-0", !vertical && "pt-0.5"), children: [
+                  /* @__PURE__ */ jsx95("div", { "data-slot": "steps-title", className: cn("text-sm", titleClass[status]), children: item.title }),
+                  item.description ? /* @__PURE__ */ jsx95("div", { "data-slot": "steps-description", className: "mt-0.5 text-xs text-muted-foreground", children: item.description }) : null
                 ] })
               ]
             }
           ),
-          !last ? /* @__PURE__ */ jsx97(
+          !last ? /* @__PURE__ */ jsx95(
             "li",
             {
               "aria-hidden": "true",
@@ -6299,7 +6250,7 @@ function Steps({ items = [], current = 0, direction = "horizontal", className, s
 
 // src/components/components/Switch/index.tsx
 import { useEffect as useEffect26, useId as useId11 } from "react";
-import { jsx as jsx98, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs64 } from "react/jsx-runtime";
 function Switch2({
   name,
   label,
@@ -6328,13 +6279,13 @@ function Switch2({
     }
     onChange?.(next);
   };
-  const control = /* @__PURE__ */ jsxs65(
+  const control = /* @__PURE__ */ jsxs64(
     "span",
     {
       className: cn("inline-flex items-center gap-2", !inForm && className),
       style: inForm ? void 0 : style,
       children: [
-        /* @__PURE__ */ jsx98(
+        /* @__PURE__ */ jsx96(
           Switch,
           {
             id: controlId,
@@ -6344,12 +6295,12 @@ function Switch2({
             onCheckedChange: handleChange
           }
         ),
-        label ? /* @__PURE__ */ jsx98("label", { htmlFor: controlId, className: "text-sm leading-none font-medium", children: label }) : null
+        label ? /* @__PURE__ */ jsx96("label", { htmlFor: controlId, className: "text-sm leading-none font-medium", children: label }) : null
       ]
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsxs65(
+    return /* @__PURE__ */ jsxs64(
       "div",
       {
         "data-slot": "form-item",
@@ -6357,7 +6308,7 @@ function Switch2({
         style,
         children: [
           control,
-          form.errors[name] ? /* @__PURE__ */ jsx98("div", { "data-slot": "form-error", className: "mt-1.5 text-sm text-destructive", children: form.errors[name] }) : null
+          form.errors[name] ? /* @__PURE__ */ jsx96("div", { "data-slot": "form-error", className: "mt-1.5 text-sm text-destructive", children: form.errors[name] }) : null
         ]
       }
     );
@@ -6498,7 +6449,7 @@ function moveRow(rows, dragKey, dropKey, position, options) {
 }
 
 // src/components/components/Table/index.tsx
-import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
 function renderCellValue2(value) {
   if (value === void 0 || value === null) {
     return "";
@@ -6745,7 +6696,7 @@ function Table2({
     1,
     columns.length + (rowSelection ? 1 : 0) + (rowDraggable ? 1 : 0)
   );
-  return /* @__PURE__ */ jsxs66(
+  return /* @__PURE__ */ jsxs65(
     "div",
     {
       ref: rootRef,
@@ -6753,22 +6704,22 @@ function Table2({
       className: cn("relative", className),
       style,
       children: [
-        loading ? /* @__PURE__ */ jsx99(
+        loading ? /* @__PURE__ */ jsx97(
           "div",
           {
             "data-slot": "table-loading",
             className: "absolute inset-0 z-40 flex items-center justify-center bg-card/60",
-            children: /* @__PURE__ */ jsx99(Spinner, { className: "size-6 text-muted-foreground" })
+            children: /* @__PURE__ */ jsx97(Spinner, { className: "size-6 text-muted-foreground" })
           }
         ) : null,
-        /* @__PURE__ */ jsxs66(
+        /* @__PURE__ */ jsxs65(
           Table,
           {
             containerClassName: stickyHeader ? "overflow-y-auto" : void 0,
             containerStyle: stickyHeader ? { maxHeight: scrollY } : void 0,
             children: [
-              /* @__PURE__ */ jsx99(TableHeader, { children: /* @__PURE__ */ jsxs66(TableRow, { className: "hover:bg-transparent", children: [
-                rowDraggable ? /* @__PURE__ */ jsx99(
+              /* @__PURE__ */ jsx97(TableHeader, { children: /* @__PURE__ */ jsxs65(TableRow, { className: "hover:bg-transparent", children: [
+                rowDraggable ? /* @__PURE__ */ jsx97(
                   TableHead,
                   {
                     "data-slot": "table-drag-head",
@@ -6776,13 +6727,13 @@ function Table2({
                     style: { width: 36, minWidth: 36 }
                   }
                 ) : null,
-                rowSelection ? /* @__PURE__ */ jsx99(
+                rowSelection ? /* @__PURE__ */ jsx97(
                   TableHead,
                   {
                     "data-slot": "table-selection-head",
                     className: stickyHeadClass(null, false),
                     style: { width: 36, minWidth: 36 },
-                    children: /* @__PURE__ */ jsx99(
+                    children: /* @__PURE__ */ jsx97(
                       Checkbox,
                       {
                         "aria-label": t("pactor.table.selectAll"),
@@ -6798,7 +6749,7 @@ function Table2({
                   const sortable = column.sorter === true && column.dataIndex !== void 0;
                   const isSortedColumn = sort !== null && column.dataIndex !== void 0 && sort.dataIndex === column.dataIndex;
                   const activeOrder = sortable && isSortedColumn ? sort.order : null;
-                  return /* @__PURE__ */ jsx99(
+                  return /* @__PURE__ */ jsx97(
                     TableHead,
                     {
                       className: cn(
@@ -6807,7 +6758,7 @@ function Table2({
                       ),
                       style: columnWidthStyle(column),
                       "aria-sort": activeOrder === "ascend" ? "ascending" : activeOrder === "descend" ? "descending" : void 0,
-                      children: sortable ? /* @__PURE__ */ jsxs66(
+                      children: sortable ? /* @__PURE__ */ jsxs65(
                         "button",
                         {
                           type: "button",
@@ -6816,7 +6767,7 @@ function Table2({
                           className: "inline-flex cursor-pointer items-center gap-1 font-medium",
                           children: [
                             column.title,
-                            /* @__PURE__ */ jsx99(
+                            /* @__PURE__ */ jsx97(
                               Icon,
                               {
                                 name: activeOrder === "ascend" ? "arrow-up" : activeOrder === "descend" ? "arrow-down" : "chevrons-up-down",
@@ -6832,29 +6783,29 @@ function Table2({
                   );
                 })
               ] }) }),
-              /* @__PURE__ */ jsx99(TableBody, { children: flatRows.length === 0 ? /* @__PURE__ */ jsx99(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx99(TableCell, { colSpan, children: /* @__PURE__ */ jsxs66(
+              /* @__PURE__ */ jsx97(TableBody, { children: flatRows.length === 0 ? /* @__PURE__ */ jsx97(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx97(TableCell, { colSpan, children: /* @__PURE__ */ jsxs65(
                 "div",
                 {
                   "data-slot": "table-empty",
                   className: "flex flex-col items-center gap-2 py-8 text-muted-foreground",
                   children: [
-                    /* @__PURE__ */ jsx99(Icon, { name: "inbox", size: "lg" }),
-                    /* @__PURE__ */ jsx99("div", { className: "text-sm", children: emptyText ?? t("pactor.table.empty") })
+                    /* @__PURE__ */ jsx97(Icon, { name: "inbox", size: "lg" }),
+                    /* @__PURE__ */ jsx97("div", { className: "text-sm", children: emptyText ?? t("pactor.table.empty") })
                   ]
                 }
-              ) }) }) : flatRows.map((flat, rowIndex) => /* @__PURE__ */ jsxs66(
+              ) }) }) : flatRows.map((flat, rowIndex) => /* @__PURE__ */ jsxs65(
                 TableRow,
                 {
                   className: cn(dragKey === flat.key ? "opacity-50" : void 0),
                   onDragOver: rowDraggable ? (event) => handleRowDragOver(flat, event) : void 0,
                   onDrop: rowDraggable ? (event) => handleRowDrop(flat, event) : void 0,
                   children: [
-                    rowDraggable ? /* @__PURE__ */ jsx99(
+                    rowDraggable ? /* @__PURE__ */ jsx97(
                       TableCell,
                       {
                         "data-slot": "table-drag-cell",
                         className: dropIndicatorClass(flat.key),
-                        children: /* @__PURE__ */ jsx99(
+                        children: /* @__PURE__ */ jsx97(
                           "button",
                           {
                             type: "button",
@@ -6864,17 +6815,17 @@ function Table2({
                             onDragStart: (event) => handleDragStart(flat, event),
                             onDragEnd: resetDrag,
                             className: "inline-flex size-4 cursor-move items-center justify-center text-muted-foreground hover:text-foreground",
-                            children: /* @__PURE__ */ jsx99(Icon, { name: "grip-vertical", size: "sm" })
+                            children: /* @__PURE__ */ jsx97(Icon, { name: "grip-vertical", size: "sm" })
                           }
                         )
                       }
                     ) : null,
-                    rowSelection ? /* @__PURE__ */ jsx99(
+                    rowSelection ? /* @__PURE__ */ jsx97(
                       TableCell,
                       {
                         "data-slot": "table-selection-cell",
                         className: dropIndicatorClass(flat.key),
-                        children: /* @__PURE__ */ jsx99(
+                        children: /* @__PURE__ */ jsx97(
                           Checkbox,
                           {
                             "aria-label": t("pactor.table.selectRow"),
@@ -6891,7 +6842,7 @@ function Table2({
                         column.dataIndex === void 0 ? void 0 : flat.row[column.dataIndex]
                       );
                       const withTree = hasTreeData && columnIndex === 0;
-                      return /* @__PURE__ */ jsx99(
+                      return /* @__PURE__ */ jsx97(
                         TableCell,
                         {
                           className: cn(
@@ -6903,13 +6854,13 @@ function Table2({
                             dropIndicatorClass(flat.key)
                           ),
                           style: columnWidthStyle(column),
-                          children: withTree ? /* @__PURE__ */ jsxs66(
+                          children: withTree ? /* @__PURE__ */ jsxs65(
                             "div",
                             {
                               className: "flex items-center gap-1",
                               style: { paddingLeft: flat.level * indentSize },
                               children: [
-                                flat.hasChildren ? /* @__PURE__ */ jsx99(
+                                flat.hasChildren ? /* @__PURE__ */ jsx97(
                                   "button",
                                   {
                                     type: "button",
@@ -6918,7 +6869,7 @@ function Table2({
                                     "aria-expanded": expandedKeys.has(flat.key),
                                     onClick: () => toggleExpand(flat.key),
                                     className: "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center text-muted-foreground hover:text-foreground",
-                                    children: /* @__PURE__ */ jsx99(
+                                    children: /* @__PURE__ */ jsx97(
                                       Icon,
                                       {
                                         name: "chevron-right",
@@ -6930,8 +6881,8 @@ function Table2({
                                       }
                                     )
                                   }
-                                ) : /* @__PURE__ */ jsx99("span", { className: "inline-block size-4 shrink-0" }),
-                                /* @__PURE__ */ jsx99("div", { className: "min-w-0", children: cellContent })
+                                ) : /* @__PURE__ */ jsx97("span", { className: "inline-block size-4 shrink-0" }),
+                                /* @__PURE__ */ jsx97("div", { className: "min-w-0", children: cellContent })
                               ]
                             }
                           ) : cellContent
@@ -6946,8 +6897,8 @@ function Table2({
             ]
           }
         ),
-        pageSize !== void 0 && pageSize > 0 ? /* @__PURE__ */ jsx99("div", { "data-slot": "table-pagination", className: "mt-3 flex justify-end gap-1", children: Array.from({ length: pageCount }, (_, index) => index + 1).map(
-          (page) => /* @__PURE__ */ jsx99(
+        pageSize !== void 0 && pageSize > 0 ? /* @__PURE__ */ jsx97("div", { "data-slot": "table-pagination", className: "mt-3 flex justify-end gap-1", children: Array.from({ length: pageCount }, (_, index) => index + 1).map(
+          (page) => /* @__PURE__ */ jsx97(
             Button,
             {
               type: "button",
@@ -6967,7 +6918,7 @@ function Table2({
 
 // src/components/components/Tabs/index.tsx
 import { useRenderer as useRenderer19 } from "@pactor-app/runtime";
-import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs66 } from "react/jsx-runtime";
 function Tabs2({
   items = [],
   activeKey,
@@ -6981,7 +6932,7 @@ function Tabs2({
 }) {
   const { renderChildren } = useRenderer19();
   const vertical = tabPosition === "left";
-  return /* @__PURE__ */ jsxs67(
+  return /* @__PURE__ */ jsxs66(
     Tabs,
     {
       value: activeKey,
@@ -6991,7 +6942,7 @@ function Tabs2({
       className: cn(vertical && "flex-row items-start gap-4", className),
       style,
       children: [
-        /* @__PURE__ */ jsx100(
+        /* @__PURE__ */ jsx98(
           TabsList,
           {
             variant,
@@ -6999,10 +6950,10 @@ function Tabs2({
               "h-auto w-auto shrink-0 flex-col items-stretch justify-start",
               variant === "line" && "gap-0 border-b-0 border-r pr-2"
             ) : void 0,
-            children: items.map((item) => /* @__PURE__ */ jsx100(TabsTrigger, { value: item.key, children: item.label }, item.key))
+            children: items.map((item) => /* @__PURE__ */ jsx98(TabsTrigger, { value: item.key, children: item.label }, item.key))
           }
         ),
-        items.map((item) => /* @__PURE__ */ jsx100(
+        items.map((item) => /* @__PURE__ */ jsx98(
           TabsContent,
           {
             value: item.key,
@@ -7021,7 +6972,7 @@ function Tabs2({
 import { X as X2 } from "lucide-react";
 import { useI18n as useI18n26 } from "@pactor-app/runtime";
 import { useState as useState32 } from "react";
-import { jsx as jsx101, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs67 } from "react/jsx-runtime";
 var colorClass = {
   default: "border-border bg-muted text-foreground",
   success: "border-success/50 bg-success/10 text-success",
@@ -7042,7 +6993,7 @@ function Tag({
   const [hidden, setHidden] = useState32(false);
   const { t } = useI18n26();
   if (hidden) return null;
-  return /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsxs67(
     "span",
     {
       "data-slot": "tag",
@@ -7055,9 +7006,9 @@ function Tag({
       ),
       style,
       children: [
-        icon ? /* @__PURE__ */ jsx101(Icon, { name: icon, size: "sm" }) : null,
+        icon ? /* @__PURE__ */ jsx99(Icon, { name: icon, size: "sm" }) : null,
         text,
-        closable ? /* @__PURE__ */ jsx101(
+        closable ? /* @__PURE__ */ jsx99(
           "button",
           {
             type: "button",
@@ -7068,7 +7019,7 @@ function Tag({
               onClose?.();
               setHidden(true);
             },
-            children: /* @__PURE__ */ jsx101(X2, { className: "size-3" })
+            children: /* @__PURE__ */ jsx99(X2, { className: "size-3" })
           }
         ) : null
       ]
@@ -7077,7 +7028,7 @@ function Tag({
 }
 
 // src/components/components/Text/index.tsx
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var typeClassMap = {
   default: "",
   secondary: "text-muted-foreground",
@@ -7102,7 +7053,7 @@ function Text({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx100(
     "span",
     {
       "data-slot": "text",
@@ -7124,7 +7075,7 @@ function Text({
 
 // src/components/components/Textarea/index.tsx
 import { useEffect as useEffect28, useId as useId12 } from "react";
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 function Textarea2({
   name,
   label,
@@ -7150,16 +7101,17 @@ function Textarea2({
   });
   if (inForm && form && name) {
     const fieldValue = form.values[name];
-    return /* @__PURE__ */ jsx103(
+    return /* @__PURE__ */ jsx101(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         htmlFor: controlId,
         error: form.errors[name],
         className,
         style,
-        children: /* @__PURE__ */ jsx103(
+        children: /* @__PURE__ */ jsx101(
           Textarea,
           {
             id: controlId,
@@ -7177,7 +7129,7 @@ function Textarea2({
       }
     );
   }
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx101(
     Textarea,
     {
       value: value ?? "",
@@ -7195,7 +7147,7 @@ function Textarea2({
 import { useI18n as useI18n27 } from "@pactor-app/runtime";
 import { Clock } from "lucide-react";
 import { useEffect as useEffect29, useId as useId13, useState as useState33 } from "react";
-import { jsx as jsx104, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs68 } from "react/jsx-runtime";
 function pad(n) {
   return String(n).padStart(2, "0");
 }
@@ -7271,12 +7223,12 @@ function TimePicker({
     }
     onChange?.(next);
   };
-  const renderColumn = (slot, max, active, onPick) => /* @__PURE__ */ jsx104(
+  const renderColumn = (slot, max, active, onPick) => /* @__PURE__ */ jsx102(
     "div",
     {
       "data-slot": slot,
       className: "max-h-40 w-14 overflow-y-auto rounded-md border border-border",
-      children: Array.from({ length: max + 1 }, (_, n) => /* @__PURE__ */ jsx104(
+      children: Array.from({ length: max + 1 }, (_, n) => /* @__PURE__ */ jsx102(
         "button",
         {
           type: "button",
@@ -7291,8 +7243,8 @@ function TimePicker({
       ))
     }
   );
-  const control = /* @__PURE__ */ jsxs69(Popover, { open, onOpenChange: openPanel, children: [
-    /* @__PURE__ */ jsxs69(
+  const control = /* @__PURE__ */ jsxs68(Popover, { open, onOpenChange: openPanel, children: [
+    /* @__PURE__ */ jsxs68(
       PopoverTrigger,
       {
         id: controlId,
@@ -7308,9 +7260,9 @@ function TimePicker({
         ),
         style: inForm ? void 0 : style,
         children: [
-          /* @__PURE__ */ jsx104("span", { className: "min-w-0 flex-1 truncate text-left", children: displayText === "" ? placeholder ?? t("pactor.timePicker.placeholder") : displayText }),
-          showClear ? /* @__PURE__ */ jsx104(ClearHoverButton, { label: t("pactor.control.clear"), onClear: handleClear }) : null,
-          /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsx102("span", { className: "min-w-0 flex-1 truncate text-left", children: displayText === "" ? placeholder ?? t("pactor.timePicker.placeholder") : displayText }),
+          showClear ? /* @__PURE__ */ jsx102(ClearHoverButton, { label: t("pactor.control.clear"), onClear: handleClear }) : null,
+          /* @__PURE__ */ jsx102(
             Clock,
             {
               className: cn("size-4 shrink-0 opacity-50", showClear && CLEARABLE_ICON_HIDE)
@@ -7319,8 +7271,8 @@ function TimePicker({
         ]
       }
     ),
-    /* @__PURE__ */ jsx104(PopoverContent, { className: "w-auto p-3", children: /* @__PURE__ */ jsxs69("div", { "data-slot": "timepicker-panel", className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs69("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx102(PopoverContent, { className: "w-auto p-3", children: /* @__PURE__ */ jsxs68("div", { "data-slot": "timepicker-panel", className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs68("div", { className: "flex items-start gap-2", children: [
         renderColumn(
           "timepicker-hour-column",
           23,
@@ -7340,8 +7292,8 @@ function TimePicker({
           (n) => setPending((prev) => ({ ...prev, second: n }))
         ) : null
       ] }),
-      /* @__PURE__ */ jsxs69("div", { className: "flex items-center justify-between gap-2 border-t border-border pt-2", children: [
-        /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsxs68("div", { className: "flex items-center justify-between gap-2 border-t border-border pt-2", children: [
+        /* @__PURE__ */ jsx102(
           "button",
           {
             type: "button",
@@ -7350,7 +7302,7 @@ function TimePicker({
             children: t("pactor.timePicker.now")
           }
         ),
-        /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsx102(
           "button",
           {
             type: "button",
@@ -7366,11 +7318,12 @@ function TimePicker({
     ] }) })
   ] });
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx104(
+    return /* @__PURE__ */ jsx102(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         htmlFor: controlId,
         error: form.errors[name],
         className,
@@ -7384,27 +7337,27 @@ function TimePicker({
 
 // src/components/components/Timeline/index.tsx
 import { useI18n as useI18n28 } from "@pactor-app/runtime";
-import { jsx as jsx105, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
 function Timeline({ items = [], pending, className, style }) {
   const nodes = [...items];
   const { t } = useI18n28();
   if (pending) {
     nodes.push({ content: typeof pending === "string" ? pending : t("pactor.timeline.inProgress") });
   }
-  return /* @__PURE__ */ jsx105("ul", { "data-slot": "timeline", className: cn("w-full", className), style, children: nodes.map((item, index) => /* @__PURE__ */ jsxs70("li", { "data-slot": "timeline-item", className: "relative flex gap-3 pb-6 last:pb-0", children: [
-    index < nodes.length - 1 ? /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx103("ul", { "data-slot": "timeline", className: cn("w-full", className), style, children: nodes.map((item, index) => /* @__PURE__ */ jsxs69("li", { "data-slot": "timeline-item", className: "relative flex gap-3 pb-6 last:pb-0", children: [
+    index < nodes.length - 1 ? /* @__PURE__ */ jsx103(
       "span",
       {
         "aria-hidden": "true",
         className: "absolute top-5 left-[7px] h-[calc(100%-20px)] w-px bg-border"
       }
     ) : null,
-    /* @__PURE__ */ jsx105(
+    /* @__PURE__ */ jsx103(
       "span",
       {
         "data-slot": "timeline-dot",
         className: "relative mt-1 flex size-4 shrink-0 items-center justify-center",
-        children: item.icon ? /* @__PURE__ */ jsx105(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsx105(
+        children: item.icon ? /* @__PURE__ */ jsx103(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsx103(
           "span",
           {
             className: "size-2 rounded-full bg-primary",
@@ -7413,15 +7366,15 @@ function Timeline({ items = [], pending, className, style }) {
         )
       }
     ),
-    /* @__PURE__ */ jsxs70("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx105("div", { "data-slot": "timeline-content", className: "text-sm", children: item.content }),
-      item.time ? /* @__PURE__ */ jsx105("div", { "data-slot": "timeline-time", className: "mt-0.5 text-xs text-muted-foreground", children: item.time }) : null
+    /* @__PURE__ */ jsxs69("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx103("div", { "data-slot": "timeline-content", className: "text-sm", children: item.content }),
+      item.time ? /* @__PURE__ */ jsx103("div", { "data-slot": "timeline-time", className: "mt-0.5 text-xs text-muted-foreground", children: item.time }) : null
     ] })
   ] }, index)) });
 }
 
 // src/components/components/Toggle/index.tsx
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 function Toggle2({
   text,
   pressed,
@@ -7432,7 +7385,7 @@ function Toggle2({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx104(
     Toggle,
     {
       pressed,
@@ -7448,7 +7401,7 @@ function Toggle2({
 }
 
 // src/components/components/ToggleGroup/index.tsx
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 function ToggleGroup2({
   options = [],
   value,
@@ -7468,7 +7421,7 @@ function ToggleGroup2({
       onChange?.(added ?? void 0);
     }
   };
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx105(
     ToggleGroup,
     {
       value: groupValue,
@@ -7477,7 +7430,7 @@ function ToggleGroup2({
       onValueChange: (next) => handleChange(next),
       className,
       style,
-      children: options.map((option) => /* @__PURE__ */ jsx107(
+      children: options.map((option) => /* @__PURE__ */ jsx105(
         ToggleGroupItem,
         {
           value: option.value,
@@ -7490,15 +7443,6 @@ function ToggleGroup2({
   );
 }
 
-// src/components/components/Tooltip/index.tsx
-import { jsx as jsx108, jsxs as jsxs71 } from "react/jsx-runtime";
-function Tooltip2({ content, side, children, className, style }) {
-  return /* @__PURE__ */ jsxs71(Tooltip, { children: [
-    /* @__PURE__ */ jsx108(TooltipTrigger, { render: triggerWrapper("tooltip-trigger-wrap"), children }),
-    /* @__PURE__ */ jsx108(TooltipContent, { side, className, style, children: content })
-  ] });
-}
-
 // src/components/components/Tour/index.tsx
 import { useI18n as useI18n29 } from "@pactor-app/runtime";
 import { XIcon as XIcon2 } from "lucide-react";
@@ -7508,7 +7452,7 @@ import {
   useState as useState34
 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment11, jsx as jsx109, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx106, jsxs as jsxs70 } from "react/jsx-runtime";
 function Tour({
   open = false,
   steps = [],
@@ -7557,9 +7501,9 @@ function Tour({
   };
   const positionStyle = anchor ? { top: anchor.top, left: anchor.left } : { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
   return createPortal(
-    /* @__PURE__ */ jsxs72(Fragment11, { children: [
-      /* @__PURE__ */ jsx109("div", { "data-slot": "tour-mask", className: "fixed inset-0 z-[90] bg-(--overlay-background)" }),
-      /* @__PURE__ */ jsxs72(
+    /* @__PURE__ */ jsxs70(Fragment11, { children: [
+      /* @__PURE__ */ jsx106("div", { "data-slot": "tour-mask", className: "fixed inset-0 z-[90] bg-(--overlay-background)" }),
+      /* @__PURE__ */ jsxs70(
         "div",
         {
           "data-slot": "tour-card",
@@ -7569,9 +7513,9 @@ function Tour({
           ),
           style: { ...positionStyle, ...style },
           children: [
-            /* @__PURE__ */ jsxs72("div", { className: "flex items-start justify-between gap-2", children: [
-              step.title ? /* @__PURE__ */ jsx109("div", { "data-slot": "tour-title", className: "font-medium", children: step.title }) : /* @__PURE__ */ jsx109("span", {}),
-              /* @__PURE__ */ jsx109(
+            /* @__PURE__ */ jsxs70("div", { className: "flex items-start justify-between gap-2", children: [
+              step.title ? /* @__PURE__ */ jsx106("div", { "data-slot": "tour-title", className: "font-medium", children: step.title }) : /* @__PURE__ */ jsx106("span", {}),
+              /* @__PURE__ */ jsx106(
                 "button",
                 {
                   type: "button",
@@ -7579,19 +7523,19 @@ function Tour({
                   "aria-label": "Close",
                   className: "cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 [&_svg]:size-3.5",
                   onClick: () => onClose?.(),
-                  children: /* @__PURE__ */ jsx109(XIcon2, {})
+                  children: /* @__PURE__ */ jsx106(XIcon2, {})
                 }
               )
             ] }),
-            step.content ? /* @__PURE__ */ jsx109("div", { "data-slot": "tour-content", className: "text-muted-foreground", children: step.content }) : null,
-            /* @__PURE__ */ jsxs72("div", { className: "mt-1 flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsxs72("span", { className: "text-xs text-muted-foreground", children: [
+            step.content ? /* @__PURE__ */ jsx106("div", { "data-slot": "tour-content", className: "text-muted-foreground", children: step.content }) : null,
+            /* @__PURE__ */ jsxs70("div", { className: "mt-1 flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs70("span", { className: "text-xs text-muted-foreground", children: [
                 safeIndex + 1,
                 " / ",
                 steps.length
               ] }),
-              /* @__PURE__ */ jsxs72("div", { className: "flex gap-2", children: [
-                safeIndex > 0 ? /* @__PURE__ */ jsx109(
+              /* @__PURE__ */ jsxs70("div", { className: "flex gap-2", children: [
+                safeIndex > 0 ? /* @__PURE__ */ jsx106(
                   Button,
                   {
                     variant: "outline",
@@ -7600,7 +7544,7 @@ function Tour({
                     children: t("pactor.tour.prev")
                   }
                 ) : null,
-                /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsx106(
                   Button,
                   {
                     size: "sm",
@@ -7628,7 +7572,7 @@ function Tour({
 import { useI18n as useI18n30 } from "@pactor-app/runtime";
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3 } from "lucide-react";
 import { useEffect as useEffect31, useState as useState35 } from "react";
-import { jsx as jsx110, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs71 } from "react/jsx-runtime";
 function Transfer({
   name,
   label,
@@ -7696,14 +7640,14 @@ function Transfer({
   const renderPanel = (side, title, items, checked) => {
     const enabledItems = items.filter((option) => !option.disabled);
     const allChecked = enabledItems.length > 0 && enabledItems.every((option) => checked.has(option.value));
-    return /* @__PURE__ */ jsxs73(
+    return /* @__PURE__ */ jsxs71(
       "div",
       {
         "data-slot": `transfer-${side}-panel`,
         className: "flex w-48 flex-col rounded-md border border-border",
         children: [
-          /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
-            /* @__PURE__ */ jsx110(
+          /* @__PURE__ */ jsxs71("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsx107(
               "input",
               {
                 type: "checkbox",
@@ -7721,10 +7665,10 @@ function Transfer({
                 }
               }
             ),
-            /* @__PURE__ */ jsx110("span", { className: "text-sm font-medium", children: title }),
-            /* @__PURE__ */ jsx110("span", { className: "ml-auto text-xs text-muted-foreground", children: t("pactor.transfer.itemCount", { count: items.length }) })
+            /* @__PURE__ */ jsx107("span", { className: "text-sm font-medium", children: title }),
+            /* @__PURE__ */ jsx107("span", { className: "ml-auto text-xs text-muted-foreground", children: t("pactor.transfer.itemCount", { count: items.length }) })
           ] }),
-          /* @__PURE__ */ jsx110("div", { className: "flex max-h-48 flex-col overflow-y-auto p-1", children: items.map((option) => /* @__PURE__ */ jsxs73(
+          /* @__PURE__ */ jsx107("div", { className: "flex max-h-48 flex-col overflow-y-auto p-1", children: items.map((option) => /* @__PURE__ */ jsxs71(
             "label",
             {
               className: cn(
@@ -7732,7 +7676,7 @@ function Transfer({
                 (disabled || option.disabled) && "cursor-not-allowed opacity-50"
               ),
               children: [
-                /* @__PURE__ */ jsx110(
+                /* @__PURE__ */ jsx107(
                   "input",
                   {
                     type: "checkbox",
@@ -7741,7 +7685,7 @@ function Transfer({
                     onChange: (event) => toggleChecked(side, option.value, event.target.checked)
                   }
                 ),
-                /* @__PURE__ */ jsx110("span", { className: "min-w-0 flex-1 truncate", children: option.label })
+                /* @__PURE__ */ jsx107("span", { className: "min-w-0 flex-1 truncate", children: option.label })
               ]
             },
             String(option.value)
@@ -7750,7 +7694,7 @@ function Transfer({
       }
     );
   };
-  const control = /* @__PURE__ */ jsxs73(
+  const control = /* @__PURE__ */ jsxs71(
     "div",
     {
       "data-slot": "transfer",
@@ -7758,8 +7702,8 @@ function Transfer({
       style: inForm ? void 0 : style,
       children: [
         renderPanel("left", resolvedTitles[0], leftOptions, leftChecked),
-        /* @__PURE__ */ jsxs73("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx110(
+        /* @__PURE__ */ jsxs71("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx107(
             "button",
             {
               type: "button",
@@ -7767,10 +7711,10 @@ function Transfer({
               disabled: disabled || leftChecked.size === 0,
               className: "flex size-8 cursor-pointer items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
               onClick: moveRight,
-              children: /* @__PURE__ */ jsx110(ChevronRight3, { className: "size-4" })
+              children: /* @__PURE__ */ jsx107(ChevronRight3, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ jsx110(
+          /* @__PURE__ */ jsx107(
             "button",
             {
               type: "button",
@@ -7778,7 +7722,7 @@ function Transfer({
               disabled: disabled || rightChecked.size === 0,
               className: "flex size-8 cursor-pointer items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
               onClick: moveLeft,
-              children: /* @__PURE__ */ jsx110(ChevronLeft2, { className: "size-4" })
+              children: /* @__PURE__ */ jsx107(ChevronLeft2, { className: "size-4" })
             }
           )
         ] }),
@@ -7787,11 +7731,12 @@ function Transfer({
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx110(
+    return /* @__PURE__ */ jsx107(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         error: form.errors[name],
         className,
         style,
@@ -7901,7 +7846,7 @@ function moveTreeNode(nodes, dragKey, dropKey, position) {
 }
 
 // src/components/components/Tree/index.tsx
-import { jsx as jsx111, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs72 } from "react/jsx-runtime";
 function someDescendantChecked(node, checked) {
   return (node.children ?? []).some(
     (child) => checked.has(child.key) || someDescendantChecked(child, checked)
@@ -8060,30 +8005,30 @@ function Tree({
     const actions = node.actions ?? nodeActions;
     if (!actions || actions.length === 0) return null;
     if (nodeActionDisplay === "dropdown") {
-      return /* @__PURE__ */ jsx111(
+      return /* @__PURE__ */ jsx108(
         "span",
         {
           "data-slot": "tree-node-actions",
           className: "flex shrink-0 items-center opacity-0 transition-opacity group-hover:opacity-100",
-          children: /* @__PURE__ */ jsxs74(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx111(
+          children: /* @__PURE__ */ jsxs72(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx108(
               DropdownMenuTrigger,
               {
                 "aria-label": t("pactor.tree.nodeActions"),
                 className: "flex size-5 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-foreground",
-                children: /* @__PURE__ */ jsx111(Icon, { name: "ellipsis", size: "sm" })
+                children: /* @__PURE__ */ jsx108(Icon, { name: "ellipsis", size: "sm" })
               }
             ),
-            /* @__PURE__ */ jsx111(DropdownMenuContent, { align: "end", children: actions.map((action) => /* @__PURE__ */ jsxs74(Fragment12, { children: [
-              action.separatorBefore ? /* @__PURE__ */ jsx111(DropdownMenuSeparator, {}) : null,
-              /* @__PURE__ */ jsxs74(
+            /* @__PURE__ */ jsx108(DropdownMenuContent, { align: "end", children: actions.map((action) => /* @__PURE__ */ jsxs72(Fragment12, { children: [
+              action.separatorBefore ? /* @__PURE__ */ jsx108(DropdownMenuSeparator, {}) : null,
+              /* @__PURE__ */ jsxs72(
                 DropdownMenuItem,
                 {
                   disabled: isActionDisabled(action),
                   variant: action.danger ? "destructive" : "default",
                   onClick: () => handleNodeAction(node, action),
                   children: [
-                    action.icon ? /* @__PURE__ */ jsx111(Icon, { name: action.icon, size: "sm" }) : null,
+                    action.icon ? /* @__PURE__ */ jsx108(Icon, { name: action.icon, size: "sm" }) : null,
                     action.label ?? action.value
                   ]
                 }
@@ -8093,12 +8038,12 @@ function Tree({
         }
       );
     }
-    return /* @__PURE__ */ jsx111(
+    return /* @__PURE__ */ jsx108(
       "span",
       {
         "data-slot": "tree-node-actions",
         className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100",
-        children: actions.map((action) => /* @__PURE__ */ jsx111(
+        children: actions.map((action) => /* @__PURE__ */ jsx108(
           "button",
           {
             type: "button",
@@ -8112,7 +8057,7 @@ function Tree({
               event.stopPropagation();
               handleNodeAction(node, action);
             },
-            children: action.icon ? /* @__PURE__ */ jsx111(Icon, { name: action.icon, size: "sm" }) : action.label
+            children: action.icon ? /* @__PURE__ */ jsx108(Icon, { name: action.icon, size: "sm" }) : action.label
           },
           action.value
         ))
@@ -8127,7 +8072,7 @@ function Tree({
     const canDrag = draggable === true && !isDisabled;
     const dropPosition = dropTarget?.key === node.key ? dropTarget.position : null;
     const indeterminate = checkable === true && hasChildren && !checkedSet.has(node.key) && someDescendantChecked(node, checkedSet);
-    return /* @__PURE__ */ jsxs74(
+    return /* @__PURE__ */ jsxs72(
       "div",
       {
         "data-slot": "tree-node",
@@ -8136,7 +8081,7 @@ function Tree({
         "aria-expanded": hasChildren ? isExpanded : void 0,
         "aria-selected": selected.includes(node.key),
         children: [
-          /* @__PURE__ */ jsxs74(
+          /* @__PURE__ */ jsxs72(
             "div",
             {
               className: cn(
@@ -8157,7 +8102,7 @@ function Tree({
               onDragOver: draggable ? (event) => handleDragOver(event, node) : void 0,
               onDrop: draggable ? (event) => handleDrop(event, node) : void 0,
               children: [
-                canDrag ? /* @__PURE__ */ jsx111(
+                canDrag ? /* @__PURE__ */ jsx108(
                   "span",
                   {
                     "data-slot": "tree-drag-handle",
@@ -8172,10 +8117,10 @@ function Tree({
                     },
                     onDragEnd: clearDrag,
                     className: "flex size-4 shrink-0 cursor-move items-center justify-center text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
-                    children: /* @__PURE__ */ jsx111(Icon, { name: "grip-vertical", size: "sm" })
+                    children: /* @__PURE__ */ jsx108(Icon, { name: "grip-vertical", size: "sm" })
                   }
                 ) : null,
-                hasChildren ? /* @__PURE__ */ jsx111(
+                hasChildren ? /* @__PURE__ */ jsx108(
                   "button",
                   {
                     type: "button",
@@ -8184,7 +8129,7 @@ function Tree({
                     disabled: isDisabled,
                     onClick: () => toggleExpand(node.key),
                     className: "flex size-5 shrink-0 items-center justify-center",
-                    children: /* @__PURE__ */ jsx111(
+                    children: /* @__PURE__ */ jsx108(
                       Icon,
                       {
                         name: "chevron-right",
@@ -8196,8 +8141,8 @@ function Tree({
                       }
                     )
                   }
-                ) : /* @__PURE__ */ jsx111("span", { className: "size-5 shrink-0" }),
-                checkable ? /* @__PURE__ */ jsx111(
+                ) : /* @__PURE__ */ jsx108("span", { className: "size-5 shrink-0" }),
+                checkable ? /* @__PURE__ */ jsx108(
                   Checkbox,
                   {
                     checked: checkedSet.has(node.key),
@@ -8206,7 +8151,7 @@ function Tree({
                     onCheckedChange: (next) => handleCheck(node, next === true)
                   }
                 ) : null,
-                /* @__PURE__ */ jsx111(
+                /* @__PURE__ */ jsx108(
                   "span",
                   {
                     "data-slot": "tree-node-title",
@@ -8225,7 +8170,7 @@ function Tree({
       node.key
     );
   });
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx108(
     "div",
     {
       "data-slot": "tree",
@@ -8241,7 +8186,7 @@ function Tree({
 import { useI18n as useI18n32 } from "@pactor-app/runtime";
 import { ChevronRight as ChevronRight4 } from "lucide-react";
 import { useEffect as useEffect33, useId as useId14, useState as useState37 } from "react";
-import { jsx as jsx112, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs73 } from "react/jsx-runtime";
 function findPath(options, target, trail = []) {
   for (const option of options) {
     const path = [...trail, option.value];
@@ -8330,21 +8275,21 @@ function TreeSelect({
     if (searching && !matchQuery(option, query.trim())) return null;
     const hasChildren = (option.children?.length ?? 0) > 0;
     const isExpanded = searching || expanded.has(option.value);
-    return /* @__PURE__ */ jsxs75("div", { "data-slot": "treeselect-node", children: [
-      /* @__PURE__ */ jsxs75(
+    return /* @__PURE__ */ jsxs73("div", { "data-slot": "treeselect-node", children: [
+      /* @__PURE__ */ jsxs73(
         "div",
         {
           className: "flex items-center gap-1",
           style: { paddingLeft: depth * 16 },
           children: [
-            hasChildren ? /* @__PURE__ */ jsx112(
+            hasChildren ? /* @__PURE__ */ jsx109(
               "button",
               {
                 type: "button",
                 "aria-label": `${isExpanded ? t("pactor.tree.collapse") : t("pactor.tree.expand")} ${option.label}`,
                 className: "flex size-5 shrink-0 cursor-pointer items-center justify-center text-muted-foreground hover:text-foreground",
                 onClick: () => toggleExpanded(option.value),
-                children: /* @__PURE__ */ jsx112(
+                children: /* @__PURE__ */ jsx109(
                   ChevronRight4,
                   {
                     className: cn(
@@ -8354,8 +8299,8 @@ function TreeSelect({
                   }
                 )
               }
-            ) : /* @__PURE__ */ jsx112("span", { className: "size-5 shrink-0" }),
-            /* @__PURE__ */ jsx112(
+            ) : /* @__PURE__ */ jsx109("span", { className: "size-5 shrink-0" }),
+            /* @__PURE__ */ jsx109(
               "button",
               {
                 type: "button",
@@ -8373,8 +8318,8 @@ function TreeSelect({
       hasChildren && isExpanded ? renderNodes(option.children ?? [], depth + 1) : null
     ] }, String(option.value));
   });
-  const control = /* @__PURE__ */ jsxs75(Popover, { open, onOpenChange: openPanel, children: [
-    /* @__PURE__ */ jsxs75(
+  const control = /* @__PURE__ */ jsxs73(Popover, { open, onOpenChange: openPanel, children: [
+    /* @__PURE__ */ jsxs73(
       PopoverTrigger,
       {
         id: controlId,
@@ -8390,9 +8335,9 @@ function TreeSelect({
         ),
         style: inForm ? void 0 : style,
         children: [
-          /* @__PURE__ */ jsx112("span", { className: "min-w-0 flex-1 truncate text-left", children: selected ? selected.node.label : placeholder ?? t("pactor.select.placeholder") }),
-          showClear ? /* @__PURE__ */ jsx112(ClearHoverButton, { label: t("pactor.control.clear"), onClear: handleClear }) : null,
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx109("span", { className: "min-w-0 flex-1 truncate text-left", children: selected ? selected.node.label : placeholder ?? t("pactor.select.placeholder") }),
+          showClear ? /* @__PURE__ */ jsx109(ClearHoverButton, { label: t("pactor.control.clear"), onClear: handleClear }) : null,
+          /* @__PURE__ */ jsx109(
             ChevronRight4,
             {
               className: cn(
@@ -8404,8 +8349,8 @@ function TreeSelect({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs75(PopoverContent, { className: "w-64 p-2", children: [
-      searchable ? /* @__PURE__ */ jsx112("div", { className: "pb-2", children: /* @__PURE__ */ jsx112(
+    /* @__PURE__ */ jsxs73(PopoverContent, { className: "w-64 p-2", children: [
+      searchable ? /* @__PURE__ */ jsx109("div", { className: "pb-2", children: /* @__PURE__ */ jsx109(
         Input,
         {
           "aria-label": t("pactor.select.search"),
@@ -8415,7 +8360,7 @@ function TreeSelect({
           onChange: (event) => setQuery(event.target.value)
         }
       ) }) : null,
-      /* @__PURE__ */ jsx112(
+      /* @__PURE__ */ jsx109(
         "div",
         {
           "data-slot": "treeselect-tree",
@@ -8426,11 +8371,12 @@ function TreeSelect({
     ] })
   ] });
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx112(
+    return /* @__PURE__ */ jsx109(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         htmlFor: controlId,
         error: form.errors[name],
         className,
@@ -8443,21 +8389,21 @@ function TreeSelect({
 }
 
 // src/components/components/Typography/index.tsx
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
 function Typography2({
   variant = "p",
   text,
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx113(Typography, { variant, className, style, children: text });
+  return /* @__PURE__ */ jsx110(Typography, { variant, className, style, children: text });
 }
 
 // src/components/components/Upload/index.tsx
 import { useI18n as useI18n33 } from "@pactor-app/runtime";
 import { Upload as UploadIcon, X as X3 } from "lucide-react";
 import { useEffect as useEffect34, useId as useId15, useRef as useRef10, useState as useState38 } from "react";
-import { jsx as jsx114, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs74 } from "react/jsx-runtime";
 function matchAccept(file, accept) {
   const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "");
   if (tokens.length === 0) return true;
@@ -8545,7 +8491,7 @@ function Upload({
   const handleRemove = (index) => {
     commit(files.filter((_, i) => i !== index));
   };
-  const fileInput = /* @__PURE__ */ jsx114(
+  const fileInput = /* @__PURE__ */ jsx111(
     "input",
     {
       ref: inputRef,
@@ -8562,7 +8508,7 @@ function Upload({
       }
     }
   );
-  const picker = drag ? /* @__PURE__ */ jsxs76(
+  const picker = drag ? /* @__PURE__ */ jsxs74(
     "div",
     {
       "data-slot": "upload-dragger",
@@ -8588,11 +8534,11 @@ function Upload({
         handleFiles(Array.from(event.dataTransfer.files));
       },
       children: [
-        /* @__PURE__ */ jsx114(UploadIcon, { className: "size-6" }),
-        /* @__PURE__ */ jsx114("span", { children: t("pactor.upload.dragText") })
+        /* @__PURE__ */ jsx111(UploadIcon, { className: "size-6" }),
+        /* @__PURE__ */ jsx111("span", { children: t("pactor.upload.dragText") })
       ]
     }
-  ) : /* @__PURE__ */ jsxs76(
+  ) : /* @__PURE__ */ jsxs74(
     "button",
     {
       type: "button",
@@ -8601,12 +8547,12 @@ function Upload({
       className: "inline-flex h-9 cursor-pointer items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
       onClick: () => inputRef.current?.click(),
       children: [
-        /* @__PURE__ */ jsx114(UploadIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx111(UploadIcon, { className: "size-4" }),
         t("pactor.upload.selectFile")
       ]
     }
   );
-  const control = /* @__PURE__ */ jsxs76(
+  const control = /* @__PURE__ */ jsxs74(
     "div",
     {
       "data-slot": "upload",
@@ -8615,16 +8561,16 @@ function Upload({
       children: [
         picker,
         fileInput,
-        tip ? /* @__PURE__ */ jsx114("div", { "data-slot": "upload-tip", className: "text-xs text-muted-foreground", children: tip }) : null,
-        rejected > 0 ? /* @__PURE__ */ jsx114("div", { "data-slot": "upload-rejected", className: "text-xs text-destructive", children: t("pactor.upload.rejected", { count: rejected }) }) : null,
-        files.length > 0 ? /* @__PURE__ */ jsx114("ul", { "data-slot": "upload-list", className: "flex flex-col gap-1", children: files.map((file, index) => /* @__PURE__ */ jsxs76(
+        tip ? /* @__PURE__ */ jsx111("div", { "data-slot": "upload-tip", className: "text-xs text-muted-foreground", children: tip }) : null,
+        rejected > 0 ? /* @__PURE__ */ jsx111("div", { "data-slot": "upload-rejected", className: "text-xs text-destructive", children: t("pactor.upload.rejected", { count: rejected }) }) : null,
+        files.length > 0 ? /* @__PURE__ */ jsx111("ul", { "data-slot": "upload-list", className: "flex flex-col gap-1", children: files.map((file, index) => /* @__PURE__ */ jsxs74(
           "li",
           {
             className: "flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm",
             children: [
-              /* @__PURE__ */ jsx114("span", { className: "min-w-0 flex-1 truncate", children: file.name }),
-              /* @__PURE__ */ jsx114("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize2(file.size) }),
-              /* @__PURE__ */ jsx114(
+              /* @__PURE__ */ jsx111("span", { className: "min-w-0 flex-1 truncate", children: file.name }),
+              /* @__PURE__ */ jsx111("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize2(file.size) }),
+              /* @__PURE__ */ jsx111(
                 "button",
                 {
                   type: "button",
@@ -8632,7 +8578,7 @@ function Upload({
                   disabled,
                   className: "shrink-0 cursor-pointer text-muted-foreground hover:text-foreground disabled:cursor-not-allowed",
                   onClick: () => handleRemove(index),
-                  children: /* @__PURE__ */ jsx114(X3, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx111(X3, { className: "size-4" })
                 }
               )
             ]
@@ -8643,11 +8589,12 @@ function Upload({
     }
   );
   if (inForm && form && name) {
-    return /* @__PURE__ */ jsx114(
+    return /* @__PURE__ */ jsx111(
       FieldShell,
       {
         layout: form.layout,
         label,
+        rules,
         error: form.errors[name],
         className,
         style,
@@ -8659,7 +8606,7 @@ function Upload({
 }
 
 // src/components/components/Video/index.tsx
-import { jsx as jsx115 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 function Video({
   src,
   poster,
@@ -8670,7 +8617,7 @@ function Video({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx112(
     "video",
     {
       "data-slot": "video",
@@ -8688,7 +8635,7 @@ function Video({
 }
 
 // src/components/components/Watermark/index.tsx
-import { jsx as jsx116, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs75 } from "react/jsx-runtime";
 function escapeXml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
@@ -8713,7 +8660,7 @@ function Watermark({
   style
 }) {
   const lines = (Array.isArray(content) ? content : content !== void 0 ? [content] : []).filter((line) => typeof line === "string" && line !== "");
-  return /* @__PURE__ */ jsxs77(
+  return /* @__PURE__ */ jsxs75(
     "div",
     {
       "data-slot": "watermark",
@@ -8721,7 +8668,7 @@ function Watermark({
       style,
       children: [
         children,
-        lines.length > 0 ? /* @__PURE__ */ jsx116(
+        lines.length > 0 ? /* @__PURE__ */ jsx113(
           "div",
           {
             "data-slot": "watermark-layer",
@@ -8904,6 +8851,7 @@ export {
   CONTROL_SIZE_AREA,
   CONTROL_SIZE_SELECT_ATTR,
   CONTROL_SIZE_TRIGGER_TEXT,
+  Field2 as Field,
   Cascader,
   Checkbox2 as Checkbox,
   ChipNode,
@@ -8926,9 +8874,7 @@ export {
   DiffViewer,
   DocumentPreview,
   Drawer2 as Drawer,
-  DropdownMenu2 as DropdownMenu,
   Empty2 as Empty,
-  Field2 as Field,
   inferKind,
   FilePreview,
   Flex,
@@ -8997,7 +8943,6 @@ export {
   Timeline,
   Toggle2 as Toggle,
   ToggleGroup2 as ToggleGroup,
-  Tooltip2 as Tooltip,
   Tour,
   Transfer,
   Tree,