@iris-ui-kit/vue 0.2.28 → 0.2.29

package/dist/index.cjs

@@ -55,7 +55,7 @@ function useDisposableScope() {
   });
   return scope;
 }
-var IrisThemeKey = /* @__PURE__ */ Symbol("IrisTheme");
+var IrisThemeKey = Symbol("IrisTheme");
 var ThemeProvider = vue.defineComponent({
   name: "IrisThemeProvider",
   props: {
@@ -164,7 +164,7 @@ function useColorScheme() {
   vue.onBeforeUnmount(stop);
   return scheme;
 }
-var IrisSkinKey = /* @__PURE__ */ Symbol("IrisSkin");
+var IrisSkinKey = Symbol("IrisSkin");
 var SkinProvider = vue.defineComponent({
   name: "IrisSkinProvider",
   props: {
@@ -243,7 +243,7 @@ function useMachine(machine, options = {}) {
   );
   return { state, send: machine.send };
 }
-var FormInjectionKey = /* @__PURE__ */ Symbol("IrisForm");
+var FormInjectionKey = Symbol("IrisForm");
 function useFormContext() {
   const form = vue.inject(FormInjectionKey, null);
   if (!form) {
@@ -367,7 +367,7 @@ function useFieldArray(name) {
 }
 
 // src/i18n/context.ts
-var I18nInjectionKey = /* @__PURE__ */ Symbol("IrisI18n");
+var I18nInjectionKey = Symbol("IrisI18n");
 
 // src/i18n/I18nProvider.ts
 var IrisI18nProvider = vue.defineComponent({
@@ -2013,7 +2013,7 @@ function useTabsNav(nav) {
 }
 
 // src/primitives/dropdown/context.ts
-var DropdownContextKey = /* @__PURE__ */ Symbol("IrisDropdown");
+var DropdownContextKey = Symbol("IrisDropdown");
 
 // src/primitives/dropdown/Dropdown.ts
 var IrisDropdown = vue.defineComponent({
@@ -3430,7 +3430,7 @@ function useUndoStack(options) {
 }
 
 // src/provider/context.ts
-var PluginStoreContextKey = /* @__PURE__ */ Symbol("IrisPluginStore");
+var PluginStoreContextKey = Symbol("IrisPluginStore");
 
 // src/provider/IrisProvider.ts
 var DEFAULT_LOCALE = "en-US";
@@ -3691,15 +3691,18 @@ function installButtonStyles() {
 var SIZE_STYLES = {
   sm: {
     padding: "var(--iris-padding-sm) var(--iris-padding-md)",
-    fontSize: "var(--iris-font-size-xs, 12px)"
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    minHeight: "var(--iris-control-height-sm, 28px)"
   },
   md: {
     padding: "var(--iris-padding-sm) var(--iris-padding-lg)",
-    fontSize: "var(--iris-font-size-md, 14px)"
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: "var(--iris-control-height-md, 34px)"
   },
   lg: {
     padding: "var(--iris-padding-md) var(--iris-padding-lg)",
-    fontSize: "var(--iris-font-size-lg, 16px)"
+    fontSize: "var(--iris-font-size-lg, 16px)",
+    minHeight: "var(--iris-control-height-lg, 40px)"
   }
 };
 var VARIANT_STYLES = {
@@ -3734,6 +3737,7 @@ function buildInlineStyle(variant, size) {
   const base = { ...SIZE_STYLES[size], ...VARIANT_STYLES[variant] };
   if (variant === "link") {
     base.padding = "0";
+    delete base.minHeight;
   }
   return base;
 }
@@ -3835,7 +3839,7 @@ var IrisButton = vue.defineComponent({
 });
 
 // src/primitives/popover/context.ts
-var PopoverContextKey = /* @__PURE__ */ Symbol("IrisPopover");
+var PopoverContextKey = Symbol("IrisPopover");
 
 // src/primitives/popover/Popover.ts
 var IrisPopover = vue.defineComponent({
@@ -3956,42 +3960,18 @@ var ANIM_DIALOG = "var(--iris-anim-dialog)";
 var ANIM_POPOVER = "var(--iris-anim-popover)";
 var ANIM_TOAST = "var(--iris-anim-toast)";
 var ANIM_TOOLTIP = "var(--iris-anim-tooltip)";
-function installFloatingAnimations() {
-  if (installed4 || typeof document === "undefined") return;
-  installed4 = true;
-  if (document.getElementById(STYLE_ID2)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID2;
-  style.textContent = `
+var ANIMATION_CSS = `
 :root {
   --iris-anim-dialog: iris-dialog-in 150ms ease-out;
   --iris-anim-popover: iris-popover-in 150ms ease-out;
   --iris-anim-toast: iris-toast-in 200ms ease-out;
   --iris-anim-tooltip: iris-tooltip-in 120ms ease-out;
 }
-/*
- * NOTE: these keyframes animate OPACITY ONLY. The floating layers are
- * positioned via inline transform: translate3d(...) (Floating UI), and any
- * transform in the keyframes would override it for the animation duration \u2014
- * flashing the panel at the viewport origin (0,0) before it jumps into place.
- * Fade-only keeps the entrance motion without touching positioning.
- */
-@keyframes iris-dialog-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes iris-popover-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes iris-toast-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes iris-tooltip-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
+/* Fade-only keyframes preserve Floating UI's inline translate3d position. */
+@keyframes iris-dialog-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes iris-popover-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes iris-toast-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes iris-tooltip-in { from { opacity: 0; } to { opacity: 1; } }
 @media (prefers-reduced-motion: reduce) {
   :root {
     --iris-anim-dialog: none;
@@ -4000,7 +3980,6 @@ function installFloatingAnimations() {
     --iris-anim-tooltip: none;
   }
 }
-/* P4: global focus-visible ring for interactive controls */
 [data-iris-tabs-trigger]:focus-visible,
 [data-iris-switch]:focus-visible,
 [data-iris-checkbox]:focus-visible,
@@ -4012,6 +3991,13 @@ function installFloatingAnimations() {
   outline-offset: 2px;
 }
 `;
+function installFloatingAnimations() {
+  if (installed4 || typeof document === "undefined") return;
+  installed4 = true;
+  if (document.getElementById(STYLE_ID2)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = ANIMATION_CSS;
   document.head.appendChild(style);
 }
 
@@ -4184,12 +4170,12 @@ var IrisTooltip = vue.defineComponent({
     const triggerListeners = {
       onPointerenter: handleEnter,
       onPointerleave: handleLeave,
-      onFocus: (() => {
+      onFocus: () => {
         if (!props.disabled) hi.open();
-      }),
-      onBlur: (() => {
+      },
+      onBlur: () => {
         if (!props.disabled) hi.close();
-      })
+      }
     };
     const captureTriggerRef = (el) => {
       triggerRef.value = el ?? null;
@@ -4258,7 +4244,7 @@ var IrisTooltip = vue.defineComponent({
 });
 
 // src/primitives/dialog/context.ts
-var DialogContextKey = /* @__PURE__ */ Symbol("IrisDialog");
+var DialogContextKey = Symbol("IrisDialog");
 
 // src/primitives/dialog/Dialog.ts
 var IrisDialog = vue.defineComponent({
@@ -4384,9 +4370,8 @@ function getFocusable(root) {
     (el) => !el.hasAttribute("disabled") && el.tabIndex !== -1
   );
 }
-function useFocusTrap(options) {
-  let previouslyFocused = null;
-  const onKeyDown = (event) => {
+function createFocusTrapKeyHandler(options) {
+  return (event) => {
     if (!options.active.value || event.key !== "Tab") return;
     const root = options.container.value;
     if (!root) return;
@@ -4404,13 +4389,15 @@ function useFocusTrap(options) {
         event.preventDefault();
         last.focus();
       }
-    } else {
-      if (active === last || !root.contains(active)) {
-        event.preventDefault();
-        first.focus();
-      }
+    } else if (active === last || !root.contains(active)) {
+      event.preventDefault();
+      first.focus();
     }
   };
+}
+function useFocusTrap(options) {
+  let previouslyFocused = null;
+  const onKeyDown = createFocusTrapKeyHandler(options);
   const activate = () => {
     if (typeof document === "undefined") return;
     previouslyFocused = document.activeElement ?? null;
@@ -4715,7 +4702,7 @@ var IrisDialogClose = vue.defineComponent({
 });
 
 // src/primitives/drawer/context.ts
-var DrawerContextKey = /* @__PURE__ */ Symbol("IrisDrawer");
+var DrawerContextKey = Symbol("IrisDrawer");
 
 // src/primitives/drawer/Drawer.ts
 var IrisDrawer = vue.defineComponent({
@@ -5099,11 +5086,11 @@ var IrisInput = vue.defineComponent({
         display: "inline-flex",
         alignItems: "center",
         gap: "var(--iris-gap-sm)",
-        background: "var(--iris-background)",
+        background: props.readonly ? "var(--iris-surface)" : "var(--iris-background)",
         color: "var(--iris-foreground)",
         border: `1px solid ${borderColor}`,
         borderRadius: "var(--iris-radius-md)",
-        cursor: props.disabled ? "not-allowed" : "text",
+        cursor: props.disabled ? "not-allowed" : props.readonly ? "default" : "text",
         opacity: props.disabled ? "0.6" : "1",
         transition: "border-color 120ms ease, box-shadow 120ms ease",
         boxShadow,
@@ -5143,7 +5130,7 @@ var IrisInput = vue.defineComponent({
           ...attrs,
           "data-iris-input": "",
           "data-iris-input-size": props.size,
-          "data-state": props.invalid ? "invalid" : focused.value ? "focused" : "idle",
+          "data-state": props.invalid ? "invalid" : focused.value ? "focused" : props.readonly ? "readonly" : "idle",
           style: {
             ...wrapperStyle.value,
             ...attrs.style ?? {}
@@ -6725,7 +6712,7 @@ var IrisCheckbox = vue.defineComponent({
     );
   }
 });
-var RadioGroupKey = /* @__PURE__ */ Symbol("IrisRadioGroup");
+var RadioGroupKey = Symbol("IrisRadioGroup");
 var IrisRadioGroup = vue.defineComponent({
   name: "IrisRadioGroup",
   props: {
@@ -7099,6 +7086,152 @@ var IrisList = vue.defineComponent({
     );
   }
 });
+function renderVirtualSelectListbox({
+  items,
+  translate,
+  listboxRef,
+  onListKeyDown,
+  virtualizer,
+  state,
+  activeIndex,
+  multiple,
+  selectedValues,
+  currentValue,
+  onSelect,
+  rowHeight
+}) {
+  const optionStyle = (selected, active, disabled) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--iris-gap-sm)",
+    padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md)",
+    borderRadius: "var(--iris-radius-sm)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? "0.5" : "1",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    background: selected ? "var(--iris-surface-selected, rgba(99, 102, 241, 0.12))" : active ? "var(--iris-surface-hover)" : "transparent",
+    color: "var(--iris-foreground)",
+    fontWeight: selected ? "600" : "400",
+    outline: "none"
+  });
+  const check = () => vue.h(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "var(--iris-primary)",
+      "stroke-width": "2.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    },
+    [vue.h("path", { d: "M20 6 9 17l-5-5" })]
+  );
+  return vue.h(
+    "ul",
+    {
+      role: "listbox",
+      "aria-label": translate("select.options"),
+      "data-iris-list": "",
+      ref: (el) => {
+        listboxRef.value = el ?? null;
+      },
+      onKeydown: onListKeyDown,
+      onScroll: (event) => {
+        virtualizer?.setScroll(event.currentTarget.scrollTop);
+      },
+      style: {
+        listStyle: "none",
+        margin: "0",
+        padding: "var(--iris-padding-sm)",
+        display: "flex",
+        flexDirection: "column",
+        outline: "none",
+        maxHeight: "240px",
+        overflowY: "auto"
+      }
+    },
+    items.length === 0 ? [
+      vue.h(
+        "li",
+        {
+          role: "presentation",
+          "data-iris-list-state": "empty",
+          "aria-live": "polite",
+          style: {
+            listStyle: "none",
+            padding: "12px",
+            textAlign: "center",
+            color: "var(--iris-muted)",
+            fontSize: "var(--iris-font-size-md, 14px)"
+          }
+        },
+        translate("list.empty")
+      )
+    ] : [
+      vue.h("li", {
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-iris-select-spacer": "",
+        "data-iris-select-spacer-type": "top",
+        style: { height: `${state.value.offsetBefore}px` }
+      }),
+      ...state.value.items.map((item) => {
+        const option = items[item.index];
+        if (!option) return null;
+        const active = item.index === activeIndex.value;
+        const selected = multiple ? selectedValues.value.includes(option.value) : option.value === currentValue.value;
+        return vue.h(
+          "li",
+          {
+            key: String(option.value ?? item.index),
+            role: "option",
+            tabindex: active ? 0 : -1,
+            "aria-selected": selected ? "true" : "false",
+            "aria-disabled": option.disabled ? "true" : void 0,
+            "aria-setsize": items.length,
+            "aria-posinset": item.index + 1,
+            "data-iris-list-index": item.index,
+            "data-iris-list-item": "",
+            "data-state": selected ? "selected" : active ? "active" : "idle",
+            onClick: option.disabled ? void 0 : () => {
+              activeIndex.value = item.index;
+              onSelect(option);
+            },
+            onFocus: () => {
+              activeIndex.value = item.index;
+            },
+            onMouseenter: () => {
+              activeIndex.value = item.index;
+            },
+            style: optionStyle(selected, active, !!option.disabled)
+          },
+          [
+            vue.h(
+              "span",
+              { style: { flex: "1", minWidth: "0" } },
+              option.label ?? String(option.value)
+            ),
+            selected ? check() : null
+          ]
+        );
+      }),
+      vue.h("li", {
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-iris-select-spacer": "",
+        "data-iris-select-spacer-type": "bottom",
+        style: {
+          height: `${state.value.totalSize - state.value.offsetBefore - state.value.items.length * rowHeight}px`
+        }
+      })
+    ]
+  );
+}
+
+// src/primitives/select/Select.ts
 var IrisSelect = vue.defineComponent({
   name: "IrisSelect",
   inheritAttrs: false,
@@ -7336,138 +7469,6 @@ var IrisSelect = vue.defineComponent({
         })
       ]
     );
-    const renderVirtualListbox = () => {
-      const list = props.items;
-      const optionStyle = (selected, active, disabled) => ({
-        display: "flex",
-        alignItems: "center",
-        gap: "var(--iris-gap-sm)",
-        padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md)",
-        borderRadius: "var(--iris-radius-sm)",
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? "0.5" : "1",
-        fontSize: "var(--iris-font-size-md, 14px)",
-        background: selected ? "var(--iris-surface-selected, rgba(99, 102, 241, 0.12))" : active ? "var(--iris-surface-hover)" : "transparent",
-        color: "var(--iris-foreground)",
-        fontWeight: selected ? "600" : "400",
-        outline: "none"
-      });
-      const check = () => vue.h(
-        "svg",
-        {
-          "aria-hidden": "true",
-          width: "14",
-          height: "14",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "var(--iris-primary)",
-          "stroke-width": "2.5",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round"
-        },
-        [vue.h("path", { d: "M20 6 9 17l-5-5" })]
-      );
-      return vue.h(
-        "ul",
-        {
-          role: "listbox",
-          "aria-label": t("select.options"),
-          "data-iris-list": "",
-          ref: (el) => {
-            listboxRef.value = el ?? null;
-          },
-          onKeydown: onListKeyDown,
-          onScroll: (e) => {
-            v?.setScroll(e.currentTarget.scrollTop);
-          },
-          style: {
-            listStyle: "none",
-            margin: "0",
-            padding: "var(--iris-padding-sm)",
-            display: "flex",
-            flexDirection: "column",
-            outline: "none",
-            maxHeight: "240px",
-            overflowY: "auto"
-          }
-        },
-        list.length === 0 ? [
-          vue.h(
-            "li",
-            {
-              role: "presentation",
-              "data-iris-list-state": "empty",
-              "aria-live": "polite",
-              style: {
-                listStyle: "none",
-                padding: "12px",
-                textAlign: "center",
-                color: "var(--iris-muted)",
-                fontSize: "var(--iris-font-size-md, 14px)"
-              }
-            },
-            t("list.empty")
-          )
-        ] : [
-          vue.h("li", {
-            role: "presentation",
-            "aria-hidden": "true",
-            "data-iris-select-spacer": "",
-            "data-iris-select-spacer-type": "top",
-            style: { height: `${vstate.value.offsetBefore}px` }
-          }),
-          ...vstate.value.items.map((item) => {
-            const opt = list[item.index];
-            if (!opt) return null;
-            const active = item.index === activeIndex.value;
-            const selected = props.multiple ? selectedValues.value.includes(opt.value) : opt.value === currentValue.value;
-            return vue.h(
-              "li",
-              {
-                key: String(opt.value ?? item.index),
-                role: "option",
-                tabindex: active ? 0 : -1,
-                "aria-selected": selected ? "true" : "false",
-                "aria-disabled": opt.disabled ? "true" : void 0,
-                "aria-setsize": list.length,
-                "aria-posinset": item.index + 1,
-                "data-iris-list-index": item.index,
-                "data-iris-list-item": "",
-                "data-state": selected ? "selected" : active ? "active" : "idle",
-                onClick: opt.disabled ? void 0 : () => {
-                  activeIndex.value = item.index;
-                  onSelect(opt);
-                },
-                onFocus: () => {
-                  activeIndex.value = item.index;
-                },
-                onMouseenter: () => {
-                  activeIndex.value = item.index;
-                },
-                style: optionStyle(selected, active, !!opt.disabled)
-              },
-              [
-                vue.h(
-                  "span",
-                  { style: { flex: "1", minWidth: "0" } },
-                  opt.label ?? String(opt.value)
-                ),
-                selected ? check() : null
-              ]
-            );
-          }),
-          vue.h("li", {
-            role: "presentation",
-            "aria-hidden": "true",
-            "data-iris-select-spacer": "",
-            "data-iris-select-spacer-type": "bottom",
-            style: {
-              height: `${vstate.value.totalSize - vstate.value.offsetBefore - vstate.value.items.length * ROW_HEIGHT3}px`
-            }
-          })
-        ]
-      );
-    };
     return () => vue.h(
       IrisPopover,
       {
@@ -7514,7 +7515,20 @@ var IrisSelect = vue.defineComponent({
               style: { padding: "var(--iris-padding-sm)", minWidth: "180px" },
               ...props.teleport !== void 0 ? { teleport: props.teleport } : {}
             },
-            () => props.virtual ? renderVirtualListbox() : vue.h(IrisList, {
+            () => props.virtual ? renderVirtualSelectListbox({
+              items: props.items,
+              translate: t,
+              listboxRef,
+              onListKeyDown,
+              virtualizer: v,
+              state: vstate,
+              activeIndex,
+              multiple: props.multiple,
+              selectedValues,
+              currentValue,
+              onSelect,
+              rowHeight: ROW_HEIGHT3
+            }) : vue.h(IrisList, {
               items: props.items,
               modelValue: currentValue.value,
               onSelect,
@@ -7976,8 +7990,8 @@ var IrisSkeleton = vue.defineComponent({
     vue.onMounted(installSkeletonStyles);
     const style = vue.computed(() => {
       const w = props.width !== void 0 ? toCss(props.width) : defaultWidth(props.shape);
-      const h124 = props.height !== void 0 ? toCss(props.height) : defaultHeight(props.shape, props.width);
-      return { width: w, height: h124 };
+      const h136 = props.height !== void 0 ? toCss(props.height) : defaultHeight(props.shape, props.width);
+      return { width: w, height: h136 };
     });
     return () => vue.h("div", {
       ...attrs,
@@ -9088,7 +9102,7 @@ var IrisChip = vue.defineComponent({
 });
 
 // src/primitives/accordion/context.ts
-var AccordionContextKey = /* @__PURE__ */ Symbol("IrisAccordion");
+var AccordionContextKey = Symbol("IrisAccordion");
 
 // src/primitives/accordion/Accordion.ts
 var IrisAccordion = vue.defineComponent({
@@ -9326,7 +9340,7 @@ var IrisAccordionItem = vue.defineComponent({
 });
 
 // src/primitives/stepper/context.ts
-var StepperContextKey = /* @__PURE__ */ Symbol("IrisStepper");
+var StepperContextKey = Symbol("IrisStepper");
 
 // src/primitives/stepper/Stepper.ts
 var IrisStepper = vue.defineComponent({
@@ -9574,7 +9588,7 @@ var IrisStepperStep = vue.defineComponent({
 });
 
 // src/primitives/toggle-group/context.ts
-var ToggleGroupContextKey = /* @__PURE__ */ Symbol("IrisToggleGroup");
+var ToggleGroupContextKey = Symbol("IrisToggleGroup");
 var SIZE_PADDING = {
   sm: "4px 10px",
   md: "6px 14px",
@@ -10504,35 +10518,287 @@ var tableControlProps = {
     default: void 0
   }
 };
+
+// src/primitives/table/props.ts
+var tableProps = {
+  columns: {
+    type: Array,
+    required: true
+  },
+  data: {
+    type: Array,
+    required: false,
+    default: void 0
+  },
+  rowKey: { type: String, default: "id" },
+  ...tableControlProps,
+  /** Multi-column sort (vxe sort-config.multiple parity). */
+  multiSort: { type: Boolean, default: false },
+  multiSortState: {
+    type: Array,
+    default: void 0
+  },
+  defaultMultiSort: {
+    type: Array,
+    default: void 0
+  },
+  striped: { type: Boolean, default: false },
+  editConfig: {
+    type: Object,
+    default: void 0
+  },
+  bordered: { type: Boolean, default: true },
+  /** Row-density preset; invalid runtime values fail closed to comfortable. */
+  density: {
+    type: String,
+    default: "comfortable"
+  },
+  /** Show the local density cycle button in the table toolbar. */
+  densityToggle: { type: Boolean, default: false },
+  /** Show a live formatter preview while an editor is open. */
+  editPreview: { type: Boolean, default: false },
+  /** Highlight committed cells matching the active inline draft. */
+  pattern: { type: Boolean, default: false },
+  /** Alias for pattern feedback. */
+  patternFill: { type: Boolean, default: false },
+  /** Named snapshots available in the table toolbar. */
+  views: { type: Object, default: void 0 },
+  /** Controlled active named view notification. */
+  onActiveViewChange: {
+    type: Function,
+    default: void 0
+  },
+  /** Optional tab strip; tab clicks apply listed view names in order. */
+  tableTabs: { type: Array, default: void 0 },
+  /** Show a draggable boundary for the leading left-pinned columns. */
+  pinnedDrag: { type: Boolean, default: false },
+  /** Called for each column whose pin side changes. */
+  onColumnPinnedChange: {
+    type: Function,
+    default: void 0
+  },
+  /** Called once after a pinned-boundary commit. */
+  onPinnedCountChange: { type: Function, default: void 0 },
+  /** Infer leaf-column value kinds from the first non-empty data arrival and
+   * fill only missing alignment defaults. Disabled by default. */
+  autoDetectTypes: { type: Boolean, default: false },
+  /** Below 480px, greedily hide the lowest-priority top-level columns until
+   * the natural width fits; pinned columns survive. */
+  responsive: { type: Boolean, default: false },
+  /** Extra bare row sets appended as named CSV segments by the imperative handle. */
+  exportNames: {
+    type: Array,
+    default: void 0
+  },
+  resizableColumns: { type: Boolean, default: false },
+  columnWidths: {
+    type: Object,
+    default: void 0
+  },
+  virtualScroll: {
+    type: Object,
+    default: void 0
+  },
+  loading: { type: Boolean, default: false },
+  error: { type: Boolean, default: false },
+  /** Print-friendly mode: marks the root so toolbar/form chrome is hidden by print CSS. */
+  printable: { type: Boolean, default: false },
+  /** Show a confirmation preview before the toolbar CSV import callback. */
+  importPreview: { type: Boolean, default: false },
+  onRetry: { type: Function, default: void 0 },
+  columnVirtualization: { type: Boolean, default: false },
+  keyboardNavigation: { type: Boolean, default: false },
+  cellRange: { type: Boolean, default: false },
+  /** Range clipboard copy; copyWithFormat uses column formatter output. */
+  clipConfig: { type: Object, default: void 0 },
+  renderDetail: {
+    type: Function,
+    default: void 0
+  },
+  rowExpandable: {
+    type: Function,
+    default: void 0
+  },
+  defaultExpandedRowKeys: {
+    type: Array,
+    default: void 0
+  },
+  getSubRows: {
+    type: Function,
+    default: void 0
+  },
+  treeSelectionCascade: { type: Boolean, default: false },
+  proxyConfig: {
+    type: Object,
+    default: void 0
+  },
+  formConfig: {
+    type: Object,
+    default: void 0
+  },
+  toolbar: {
+    type: Object,
+    default: void 0
+  },
+  columnVisibility: {
+    type: Object,
+    default: void 0
+  },
+  filters: {
+    type: Object,
+    default: void 0
+  },
+  filterValues: {
+    type: Object,
+    default: void 0
+  },
+  onFilterValuesChange: {
+    type: Function,
+    default: void 0
+  },
+  contextMenu: {
+    type: Object,
+    default: void 0
+  },
+  lazyLoad: {
+    type: Function,
+    default: void 0
+  },
+  seq: { type: Boolean, default: false },
+  seqStartIndex: { type: Number, default: 1 },
+  spanMethod: {
+    type: Function,
+    default: void 0
+  },
+  columnDrag: {
+    type: Object,
+    default: void 0
+  },
+  rowDrag: {
+    type: Object,
+    default: void 0
+  },
+  onDataChange: {
+    type: Function,
+    default: void 0
+  }
+};
+var SELECTION_COL_WIDTH = 40;
+var EXPAND_COL_WIDTH = 40;
+var SEQ_COL_WIDTH = 40;
+var DRAG_COL_WIDTH = 40;
+var DEFAULT_COL_WIDTH = 140;
+var DEFAULT_MIN_WIDTH = 60;
+var RESIZE_STEP = 16;
 function getCellValue(row, column) {
   const key = column.dataIndex ?? column.key;
   return row[key];
 }
-
-// src/primitives/table/useTableSort.ts
-function useTableSort(data, options) {
-  const sortProp = vue.computed(() => options.sort === void 0 ? void 0 : vue.toValue(options.sort));
-  const internalSortValue = vue.ref(options.defaultSort ?? null);
-  const sortState = vue.computed({
+function resolveSpan(occupied, rowIndex, columnIndex, method) {
+  if (!method) return { rowspan: 1, colspan: 1 };
+  const key = `${rowIndex}:${columnIndex}`;
+  if (occupied.has(key)) return null;
+  const span = method({ rowIndex, columnIndex });
+  const rowspan = span?.rowspan ?? 1;
+  const colspan = span?.colspan ?? 1;
+  if (rowspan > 1) {
+    for (let row = 1; row < rowspan; row += 1) occupied.add(`${rowIndex + row}:${columnIndex}`);
+  }
+  if (colspan > 1) {
+    for (let column = 1; column < colspan; column += 1) {
+      occupied.add(`${rowIndex}:${columnIndex + column}`);
+    }
+  }
+  return { rowspan, colspan };
+}
+function resolveInitialWidth(col) {
+  if (typeof col.width === "number") return col.width;
+  if (typeof col.width === "string") {
+    const match = col.width.match(/^(\d+(?:\.\d+)?)px$/);
+    if (match) return Number(match[1]);
+  }
+  return DEFAULT_COL_WIDTH;
+}
+function computeVisibleColSet(enabled, columns, scrollLeft, viewportWidth, widths) {
+  if (!enabled) return null;
+  const range = core.computeVirtualRange({
+    itemCount: columns.length,
+    scrollTop: scrollLeft,
+    viewportSize: viewportWidth,
+    itemSize: (index) => widths[columns[index].key] ?? resolveInitialWidth(columns[index]),
+    buffer: 2
+  });
+  const visible = /* @__PURE__ */ new Set();
+  for (let index = range.startIndex; index <= range.endIndex; index += 1) visible.add(index);
+  columns.forEach((column, index) => {
+    if (column.pinned) visible.add(index);
+  });
+  return visible;
+}
+function cellId(rowIdent, columnKey) {
+  return `${rowIdent}::${columnKey}`;
+}
+
+// src/primitives/table/useTableSort.ts
+function buildSorter(col) {
+  if (col.sorter) return col.sorter;
+  return (a, b) => core.compareValues(getCellValue(a, col), getCellValue(b, col));
+}
+function buildMultiSortComparator(leafColumns, state) {
+  if (state.length === 0) return null;
+  const colMap = new Map(leafColumns.map((c) => [c.key, c]));
+  const chain = [];
+  for (const s of state) {
+    const col = colMap.get(s.key);
+    if (!col) continue;
+    chain.push({ dir: s.direction === "asc" ? 1 : -1, sorter: buildSorter(col) });
+  }
+  if (chain.length === 0) return null;
+  return (a, b) => {
+    for (const step of chain) {
+      const cmp = step.sorter(a, b);
+      if (cmp !== 0) return cmp * step.dir;
+    }
+    return 0;
+  };
+}
+function useTableSort(data, options) {
+  const sortProp = vue.computed(() => options.sort === void 0 ? void 0 : vue.toValue(options.sort));
+  const internalSortValue = vue.ref(options.defaultSort ?? null);
+  const sortState = vue.computed({
     get: () => sortProp.value === void 0 ? internalSortValue.value : sortProp.value ?? null,
     set: (val) => {
       if (sortProp.value === void 0) internalSortValue.value = val;
       options.onSortChange?.(val);
     }
   });
+  const multiEnabled = vue.computed(() => vue.toValue(options.multiSort) === true);
+  const multiSortProp = vue.computed(
+    () => options.multiSortState === void 0 ? void 0 : vue.toValue(options.multiSortState)
+  );
+  const internalMultiSort = vue.ref(options.defaultMultiSort ?? []);
+  const multiSortState = vue.computed({
+    get: () => multiSortProp.value === void 0 ? internalMultiSort.value : multiSortProp.value,
+    set: (val) => {
+      if (multiSortProp.value === void 0) internalMultiSort.value = val;
+      options.onMultiSortChange?.(val);
+    }
+  });
   const sortComparator = vue.computed(() => {
     const s = sortState.value;
     if (!s) return null;
     const col = vue.toValue(options.leafColumns).find((c) => c.key === s.key);
     if (!col) return null;
     const dir = s.direction === "asc" ? 1 : -1;
-    const sorter = col.sorter ?? ((a, b) => core.compareValues(getCellValue(a, col), getCellValue(b, col)));
-    return (a, b) => sorter(a, b) * dir;
+    return (a, b) => buildSorter(col)(a, b) * dir;
   });
+  const multiSortComparator = vue.computed(
+    () => buildMultiSortComparator(vue.toValue(options.leafColumns), multiSortState.value)
+  );
   const sortedData = vue.computed(() => {
-    const compare = sortComparator.value;
-    if (!compare) return data.value;
-    return [...data.value].sort(compare);
+    const comparator = multiEnabled.value ? multiSortComparator.value : sortComparator.value;
+    if (!comparator) return data.value;
+    return [...data.value].sort(comparator);
   });
   function setSort(next) {
     if (sortProp.value === void 0) internalSortValue.value = next;
@@ -10549,172 +10815,1991 @@ function useTableSort(data, options) {
       setSort({ key: col.key, direction: "desc" });
       return;
     }
-    setSort(null);
+    setSort(null);
+  }
+  function setMultiSort(next) {
+    if (multiSortProp.value === void 0) internalMultiSort.value = next;
+    options.onMultiSortChange?.(next);
+  }
+  function cycleMultiSort(col) {
+    if (!col.sortable) return;
+    const idx = multiSortState.value.findIndex((s) => s.key === col.key);
+    if (idx < 0) {
+      setMultiSort([...multiSortState.value, { key: col.key, direction: "asc" }]);
+      return;
+    }
+    const next = [...multiSortState.value];
+    if (next[idx].direction === "asc") {
+      next[idx] = { key: col.key, direction: "desc" };
+      setMultiSort(next);
+      return;
+    }
+    next.splice(idx, 1);
+    setMultiSort(next);
+  }
+  return {
+    sortState,
+    cycleSort,
+    setSort,
+    sortComparator,
+    sortedData,
+    multiSortState,
+    cycleMultiSort,
+    setMultiSort,
+    multiSortComparator
+  };
+}
+function mergeFilterValues(filters, filterValues) {
+  const next = { ...filters };
+  for (const [key, values] of Object.entries(filterValues)) {
+    if (values.length > 0) next[key] = values.join(",");
+  }
+  return next;
+}
+function useTableProxy(options) {
+  const cfg = vue.computed(() => vue.toValue(options.proxyConfig));
+  const queryRef = vue.ref(void 0);
+  vue.watch(
+    () => cfg.value?.query,
+    (query) => {
+      queryRef.value = query;
+    },
+    { immediate: true }
+  );
+  const proxy = vue.shallowRef(null);
+  const state = vue.shallowRef({
+    data: [],
+    total: 0,
+    loading: false,
+    error: null,
+    params: { page: 1, pageSize: 10, sort: null, filters: {} }
+  });
+  let unsubscribe = null;
+  let mounted = false;
+  const attach = (ctrl) => {
+    unsubscribe?.();
+    proxy.value = ctrl;
+    state.value = ctrl.getState();
+    unsubscribe = ctrl.subscribe((snapshot) => {
+      state.value = snapshot;
+    });
+  };
+  const detach = () => {
+    unsubscribe?.();
+    unsubscribe = null;
+    proxy.value?.destroy();
+    proxy.value = null;
+    state.value = {
+      data: [],
+      total: 0,
+      loading: false,
+      error: null,
+      params: { page: 1, pageSize: 10, sort: null, filters: {} }
+    };
+  };
+  vue.watch(
+    () => cfg.value === void 0,
+    (absent) => {
+      if (absent) {
+        detach();
+        return;
+      }
+      if (proxy.value) return;
+      const config = cfg.value;
+      const remoteSort = vue.toValue(options.remoteSort) === true;
+      const remoteFilter = vue.toValue(options.remoteFilter) === true;
+      const multiSort = vue.toValue(options.multiSort) === true;
+      const ctrl = core.createRemoteTableSource({
+        query: (params) => queryRef.value(params),
+        autoLoad: false,
+        initialParams: {
+          page: config.defaultPage ?? 1,
+          pageSize: config.pageSize ?? 10,
+          sort: remoteSort ? vue.toValue(options.sort) ?? options.defaultSort ?? null : null,
+          sorts: remoteSort && multiSort ? vue.toValue(options.multiSortState) ?? options.defaultMultiSort ?? [] : void 0,
+          filters: remoteFilter ? mergeFilterValues(vue.toValue(options.filters) ?? {}, vue.toValue(options.filterValues) ?? {}) : {}
+        }
+      });
+      attach(ctrl);
+      if (mounted && config.autoLoad !== false) void ctrl.request();
+    },
+    { immediate: true }
+  );
+  vue.onScopeDispose(detach);
+  vue.onMounted(() => {
+    mounted = true;
+    const config = cfg.value;
+    if (config && proxy.value && config.autoLoad !== false) void proxy.value.request();
+  });
+  const liveData = vue.shallowRef([]);
+  vue.watch(
+    state,
+    (snapshot) => {
+      liveData.value = snapshot.data;
+    },
+    { immediate: true }
+  );
+  return {
+    proxy: vue.computed(() => proxy.value),
+    state: vue.computed(() => state.value),
+    liveData,
+    setParams: (partial) => proxy.value ? proxy.value.setParams(partial) : false,
+    refetch: () => proxy.value ? proxy.value.refetch() : Promise.resolve()
+  };
+}
+function exportCsv(rows, columns) {
+  return core.toCsv(
+    rows,
+    columns.map((column) => ({
+      key: column.key,
+      title: column.title,
+      dataIndex: typeof column.dataIndex === "string" ? column.dataIndex : void 0
+    }))
+  );
+}
+async function downloadCsv(filename, csv) {
+  const BOM = String.fromCharCode(65279);
+  await core.downloadFile({
+    filename,
+    content: BOM + csv,
+    mimeType: "text/csv;charset=utf-8;"
+  });
+}
+function renderFormSection(ctx) {
+  const fc = ctx.formConfig;
+  if (!fc) return null;
+  return vue.h(
+    "form",
+    {
+      "data-iris-table-form": "",
+      onSubmit: (e) => {
+        e.preventDefault();
+        ctx.handleFormSubmit();
+      },
+      onReset: (e) => {
+        e.preventDefault();
+        ctx.handleFormReset();
+      },
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "flex-end",
+        gap: "var(--iris-space-sm, 12px)",
+        padding: "var(--iris-space-sm, 12px)",
+        border: "1px solid var(--iris-border)",
+        borderBottom: "none",
+        background: "var(--iris-surface)",
+        fontSize: "var(--iris-font-size-sm, 13px)"
+      }
+    },
+    [
+      ...fc.fields.map(
+        (field) => vue.h(
+          "div",
+          {
+            key: field.key,
+            "data-iris-table-form-field": field.key,
+            style: { minWidth: 180 }
+          },
+          [
+            vue.h(
+              IrisFormField,
+              { label: field.label, size: "sm" },
+              {
+                default: () => field.type === "select" ? vue.h(IrisSelect, {
+                  items: (field.options ?? []).map((o) => ({
+                    value: o.value,
+                    label: o.label
+                  })),
+                  modelValue: ctx.formDraft.value[field.key] ?? "",
+                  placeholder: field.placeholder ?? ctx.t("select.placeholder"),
+                  size: "sm",
+                  "onUpdate:modelValue": (v) => ctx.setFormValue(field.key, String(v ?? ""))
+                }) : vue.h(IrisInput, {
+                  modelValue: ctx.formDraft.value[field.key] ?? "",
+                  placeholder: field.placeholder,
+                  size: "sm",
+                  "onUpdate:modelValue": (v) => ctx.setFormValue(field.key, String(v ?? ""))
+                })
+              }
+            )
+          ]
+        )
+      ),
+      vue.h("div", { style: { display: "flex", gap: "var(--iris-space-xs, 8px)" } }, [
+        vue.h(
+          IrisButton,
+          { type: "submit", size: "sm", "data-iris-table-form-submit": "" },
+          { default: () => fc.submitText ?? ctx.t("table.formSubmit") }
+        ),
+        vue.h(
+          IrisButton,
+          {
+            type: "reset",
+            variant: "outline",
+            size: "sm",
+            "data-iris-table-form-reset": ""
+          },
+          { default: () => fc.resetText ?? ctx.t("table.formReset") }
+        )
+      ])
+    ]
+  );
+}
+var toolbarBtnStyle = {
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  color: "var(--iris-muted)",
+  fontSize: "var(--iris-font-size-md, 14px)"
+};
+function renderToolbarSection(ctx) {
+  const tb = ctx.toolbar;
+  if (!tb && !ctx.densityToggle) return null;
+  const toolChildren = [];
+  if (tb?.title) {
+    toolChildren.push(
+      vue.h("span", { style: { fontWeight: 600, color: "var(--iris-foreground)" } }, tb.title)
+    );
+  }
+  toolChildren.push(vue.h("div", { style: { flex: "1" } }));
+  if (tb?.onRefresh) {
+    toolChildren.push(
+      vue.h(
+        "button",
+        {
+          type: "button",
+          "data-iris-table-toolbar-refresh": "",
+          "aria-label": ctx.t("table.refresh"),
+          title: ctx.t("table.refresh"),
+          onClick: () => {
+            tb.onRefresh?.();
+            void ctx.proxyCtrl.refetch();
+          },
+          style: toolbarBtnStyle
+        },
+        "\u21BB"
+      )
+    );
+  }
+  if (tb?.onExport) {
+    toolChildren.push(
+      vue.h(
+        "button",
+        {
+          type: "button",
+          "data-iris-table-toolbar-export": "",
+          "aria-label": ctx.t("table.export"),
+          title: ctx.t("table.export"),
+          onClick: () => tb?.onExport?.(),
+          style: toolbarBtnStyle
+        },
+        "\u21E9"
+      )
+    );
+  }
+  if (tb?.onImport) {
+    toolChildren.push(
+      vue.h("input", {
+        ref: (el) => {
+          ctx.importFileInput.value = el ?? null;
+        },
+        type: "file",
+        accept: ".csv,text/csv",
+        "data-iris-table-import-input": "",
+        onChange: ctx.onImportFile,
+        style: { display: "none" }
+      }),
+      vue.h(
+        "button",
+        {
+          type: "button",
+          "data-iris-table-toolbar-import": "",
+          "aria-label": ctx.t("table.import"),
+          title: ctx.t("table.import"),
+          onClick: () => ctx.importFileInput.value?.click(),
+          style: toolbarBtnStyle
+        },
+        "\u21EA"
+      )
+    );
+  }
+  if (tb?.batch && ctx.selectable === "multi" && ctx.displaySelection.value.length > 0) {
+    toolChildren.push(
+      vue.h(
+        "button",
+        {
+          type: "button",
+          "data-iris-table-toolbar-batch": "",
+          "aria-label": tb.batch.label,
+          title: tb.batch.label,
+          onClick: () => tb.batch.onClick([...ctx.displaySelection.value]),
+          style: {
+            border: "none",
+            cursor: "pointer",
+            background: "var(--iris-primary)",
+            color: "var(--iris-primary-foreground)",
+            fontSize: "var(--iris-font-size-md, 14px)",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "var(--iris-space-xxs, 4px)",
+            padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+            borderRadius: "var(--iris-radius-sm, 4px)"
+          }
+        },
+        [
+          tb.batch.icon ? vue.h(
+            "span",
+            { "aria-hidden": "true", style: { fontSize: "var(--iris-font-size-sm, 13px)" } },
+            tb.batch.icon
+          ) : null,
+          tb.batch.label
+        ]
+      )
+    );
+  }
+  if (tb?.buttons && tb.buttons.length > 0) {
+    for (const btn of tb.buttons) {
+      toolChildren.push(
+        vue.h(
+          "button",
+          {
+            key: btn.key,
+            type: "button",
+            "data-iris-table-toolbar-button": btn.key,
+            [`data-iris-table-toolbar-button-${btn.key}`]: "",
+            "aria-label": btn.label,
+            title: btn.label,
+            onClick: btn.onClick,
+            style: {
+              ...toolbarBtnStyle,
+              color: "var(--iris-foreground)",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "var(--iris-space-xxs, 4px)",
+              padding: "0 var(--iris-space-xxs, 4px)"
+            }
+          },
+          [
+            btn.icon ? vue.h(
+              "span",
+              { "aria-hidden": "true", style: { fontSize: "var(--iris-font-size-sm, 13px)" } },
+              btn.icon
+            ) : null,
+            btn.label
+          ]
+        )
+      );
+    }
+  }
+  if (ctx.densityToggle) {
+    toolChildren.push(
+      vue.h(
+        "button",
+        {
+          type: "button",
+          "data-iris-density-toggle": "",
+          "data-iris-density": ctx.effectiveDensity,
+          "aria-label": `${ctx.t("table.density")}: ${ctx.t(`table.density.${ctx.effectiveDensity}`)}`,
+          title: `${ctx.t("table.density")}: ${ctx.t(`table.density.${ctx.effectiveDensity}`)}`,
+          onClick: ctx.onDensityToggle,
+          style: toolbarBtnStyle
+        },
+        ctx.t(`table.density.${ctx.effectiveDensity}`)
+      )
+    );
+  }
+  return vue.h(
+    "div",
+    {
+      "data-iris-table-toolbar": "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--iris-space-sm, 12px)",
+        padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+        border: "1px solid var(--iris-border)",
+        borderBottom: "none",
+        borderTopLeftRadius: "var(--iris-radius-md, 6px)",
+        borderTopRightRadius: "var(--iris-radius-md, 6px)",
+        background: "var(--iris-surface)",
+        fontSize: "var(--iris-font-size-sm, 13px)"
+      }
+    },
+    toolChildren
+  );
+}
+function renderPagerSection(ctx) {
+  if (!ctx.proxyCtrl.proxy.value) return null;
+  const st = ctx.proxyCtrl.state.value;
+  return vue.h(
+    "div",
+    {
+      "data-iris-table-pager": "",
+      style: {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+        borderTop: "1px solid var(--iris-border)",
+        background: "var(--iris-surface)"
+      }
+    },
+    [
+      vue.h(IrisPagination, {
+        modelValue: st.params.page,
+        total: st.total,
+        pageSize: st.params.pageSize,
+        size: "sm",
+        "onUpdate:modelValue": (page) => {
+          ctx.proxyCtrl.setParams({ page });
+          ctx.proxyConfig?.onPageChange?.(page, ctx.proxyCtrl.state.value.params.pageSize);
+        }
+      })
+    ]
+  );
+}
+function renderContextMenuSection(ctx) {
+  const st = ctx.state.value;
+  if (!st || !st.open) return null;
+  const node = vue.h(
+    "div",
+    {
+      ref: (el) => {
+        ctx.menuRef.value = el ?? null;
+      },
+      role: "menu",
+      "data-iris-table-context-menu": "",
+      style: {
+        ...ctx.styles.value,
+        zIndex: "var(--iris-z-popover, 1000)",
+        background: "var(--iris-surface-floating, var(--iris-surface))",
+        color: "var(--iris-foreground)",
+        border: "1px solid var(--iris-border)",
+        borderRadius: "var(--iris-radius-md, 6px)",
+        boxShadow: "var(--iris-shadow-lg)",
+        padding: "var(--iris-space-xxs, 4px)",
+        minWidth: "160px",
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    st.items.map(
+      (item) => vue.h(
+        "button",
+        {
+          key: item.key,
+          type: "button",
+          role: "menuitem",
+          "data-iris-table-context-menu-item": item.key,
+          disabled: item.disabled,
+          "aria-disabled": item.disabled ? "true" : void 0,
+          onClick: () => {
+            ctx.contextMenu.onSelect(item.key, st.params);
+            ctx.close();
+          },
+          style: {
+            border: "none",
+            background: "transparent",
+            cursor: item.disabled ? "default" : "pointer",
+            color: item.disabled ? "var(--iris-muted)" : "var(--iris-foreground)",
+            font: "inherit",
+            textAlign: "start",
+            padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+            borderRadius: "var(--iris-radius-sm, 4px)"
+          }
+        },
+        item.label
+      )
+    )
+  );
+  return vue.h(vue.Teleport, { to: "body" }, [node]);
+}
+function renderFilterPanelSection(ctx) {
+  const st = ctx.state.value;
+  if (!st || !st.open) return null;
+  const col = ctx.columns.find((c) => c.key === st.colKey);
+  if (!col || !col.filterable) return null;
+  const options = col.filterOptions ?? [];
+  const node = vue.h(
+    "div",
+    {
+      ref: (el) => {
+        ctx.panelRef.value = el ?? null;
+      },
+      role: "dialog",
+      "aria-label": ctx.t("table.filter"),
+      "data-iris-table-filter-panel": "",
+      "data-iris-table-filter-column": st.colKey,
+      style: {
+        ...ctx.styles.value,
+        zIndex: "var(--iris-z-popover, 1000)",
+        background: "var(--iris-surface-floating, var(--iris-surface))",
+        color: "var(--iris-foreground)",
+        border: "1px solid var(--iris-border)",
+        borderRadius: "var(--iris-radius-md, 6px)",
+        boxShadow: "var(--iris-shadow-lg)",
+        padding: "var(--iris-space-sm, 12px)",
+        minWidth: "180px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--iris-space-xxs, 4px)"
+      }
+    },
+    [
+      ...options.map(
+        (opt) => vue.h(
+          "div",
+          {
+            key: opt.value,
+            "data-iris-filter-option": opt.value,
+            style: { display: "flex", alignItems: "center" }
+          },
+          [
+            vue.h(
+              IrisCheckbox,
+              {
+                modelValue: ctx.filterDraft.value.includes(opt.value),
+                size: "sm",
+                "onUpdate:modelValue": () => ctx.toggle(opt.value)
+              },
+              { default: () => opt.label }
+            )
+          ]
+        )
+      ),
+      vue.h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: "var(--iris-space-xs, 8px)",
+            marginTop: "var(--iris-space-xs, 8px)"
+          }
+        },
+        [
+          vue.h(
+            "button",
+            {
+              type: "button",
+              "data-iris-filter-clear": "",
+              onClick: () => {
+                ctx.clear(st.colKey);
+                ctx.close();
+              },
+              style: {
+                border: "1px solid var(--iris-border)",
+                background: "transparent",
+                color: "var(--iris-foreground)",
+                cursor: "pointer",
+                font: "inherit",
+                fontSize: "var(--iris-font-size-sm, 13px)",
+                padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+                borderRadius: "var(--iris-radius-sm, 4px)"
+              }
+            },
+            ctx.t("table.filterClear")
+          ),
+          vue.h(
+            "button",
+            {
+              type: "button",
+              "data-iris-filter-confirm": "",
+              onClick: () => {
+                ctx.apply(st.colKey, ctx.filterDraft.value);
+                ctx.close();
+              },
+              style: {
+                border: "1px solid var(--iris-primary)",
+                background: "var(--iris-primary)",
+                color: "var(--iris-primary-foreground, #fff)",
+                cursor: "pointer",
+                font: "inherit",
+                fontSize: "var(--iris-font-size-sm, 13px)",
+                padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+                borderRadius: "var(--iris-radius-sm, 4px)"
+              }
+            },
+            ctx.t("table.filterConfirm")
+          )
+        ]
+      )
+    ]
+  );
+  return vue.h(vue.Teleport, { to: "body" }, [node]);
+}
+function renderImportPreviewSection(ctx) {
+  if (!ctx.rows) return null;
+  const columns = core.previewColumnsFromRows(ctx.rows);
+  const cellStyle = {
+    border: "1px solid var(--iris-border)",
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+    whiteSpace: "nowrap"
+  };
+  const table = columns.length ? vue.h(
+    "table",
+    {
+      "data-iris-import-preview-table": "",
+      style: { borderCollapse: "collapse", fontSize: "var(--iris-font-size-sm, 13px)" }
+    },
+    [
+      vue.h("thead", [
+        vue.h(
+          "tr",
+          columns.map(
+            (column) => vue.h(
+              "th",
+              {
+                key: column,
+                "data-iris-import-preview-header": column,
+                style: {
+                  ...cellStyle,
+                  background: "var(--iris-surface)",
+                  color: "var(--iris-foreground)",
+                  textAlign: "start",
+                  fontWeight: 600
+                }
+              },
+              column
+            )
+          )
+        )
+      ]),
+      vue.h(
+        "tbody",
+        ctx.rows.slice(0, 5).map(
+          (row, rowIndex) => vue.h(
+            "tr",
+            { key: rowIndex },
+            columns.map(
+              (column) => vue.h(
+                "td",
+                {
+                  key: column,
+                  "data-iris-import-preview-cell": `${rowIndex}:${column}`,
+                  style: { ...cellStyle, color: "var(--iris-foreground)" }
+                },
+                String(row[column] ?? "")
+              )
+            )
+          )
+        )
+      )
+    ]
+  ) : null;
+  const node = vue.h(
+    "div",
+    {
+      "data-iris-import-preview-backdrop": "",
+      onPointerdown: (event) => {
+        if (event.target === event.currentTarget) ctx.onCancel();
+      },
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "var(--iris-backdrop, rgba(0, 0, 0, 0.5))",
+        zIndex: "var(--iris-z-modal, 1200)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "var(--iris-space-lg, 24px)"
+      }
+    },
+    [
+      vue.h(
+        "div",
+        {
+          "data-iris-import-preview": "",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": ctx.t("table.importPreview.title"),
+          style: {
+            background: "var(--iris-surface-floating, var(--iris-surface))",
+            color: "var(--iris-foreground)",
+            border: "1px solid var(--iris-border)",
+            borderRadius: "var(--iris-radius-lg, 8px)",
+            boxShadow: "var(--iris-shadow-xl)",
+            padding: "var(--iris-space-lg, 24px)",
+            maxWidth: "90vw",
+            maxHeight: "85vh",
+            overflow: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "var(--iris-space-sm, 12px)",
+            fontSize: "var(--iris-font-size-md, 14px)"
+          }
+        },
+        [
+          vue.h("div", { style: { fontWeight: 600 } }, ctx.t("table.importPreview.title")),
+          table,
+          ctx.rows.length > 5 ? vue.h(
+            "div",
+            {
+              "data-iris-import-preview-total": "",
+              style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-xs, 12px)" }
+            },
+            ctx.t("table.total", { total: ctx.rows.length })
+          ) : null,
+          vue.h(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: "var(--iris-space-xs, 8px)"
+              }
+            },
+            [
+              vue.h(
+                "button",
+                {
+                  type: "button",
+                  "data-iris-import-preview-cancel": "",
+                  onClick: ctx.onCancel,
+                  style: {
+                    border: "1px solid var(--iris-border)",
+                    cursor: "pointer",
+                    background: "var(--iris-surface)",
+                    color: "var(--iris-foreground)",
+                    fontSize: "var(--iris-font-size-sm, 13px)",
+                    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+                    borderRadius: "var(--iris-radius-sm, 4px)"
+                  }
+                },
+                ctx.t("table.importPreview.cancel")
+              ),
+              vue.h(
+                "button",
+                {
+                  type: "button",
+                  "data-iris-import-preview-confirm": "",
+                  onClick: ctx.onConfirm,
+                  style: {
+                    border: "none",
+                    cursor: "pointer",
+                    background: "var(--iris-primary)",
+                    color: "var(--iris-primary-foreground)",
+                    fontSize: "var(--iris-font-size-sm, 13px)",
+                    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+                    borderRadius: "var(--iris-radius-sm, 4px)"
+                  }
+                },
+                ctx.t("table.importPreview.confirm")
+              )
+            ]
+          )
+        ]
+      )
+    ]
+  );
+  return vue.h(vue.Teleport, { to: "body" }, [node]);
+}
+function renderTableSummaryRow(ctx) {
+  if (ctx.bodyData.length === 0 || !ctx.leafColumns.some((column) => column.summary)) return null;
+  const summaryCells = [...ctx.leadingCells];
+  for (let columnIndex = 0; columnIndex < ctx.leafColumns.length; columnIndex += 1) {
+    const column = ctx.leafColumns[columnIndex];
+    if (ctx.visibleColSet && !ctx.visibleColSet.has(columnIndex)) continue;
+    const align = column.align ?? "left";
+    const operation = column.summary;
+    const value = operation ? core.aggregate(ctx.bodyData, (row) => ctx.getCellValue(row, column), operation) : null;
+    const content = operation != null && value != null ? column.renderSummary ? column.renderSummary(value, ctx.bodyData) : String(value) : "";
+    summaryCells.push(
+      vue.h(
+        "div",
+        {
+          key: column.key,
+          role: "cell",
+          "data-iris-table-cell": column.key,
+          "data-iris-table-summary-cell": operation ? "" : void 0,
+          "data-iris-table-pinned": column.pinned,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start",
+            padding: "var(--iris-space-xs, 8px) var(--iris-padding-md)",
+            fontSize: "var(--iris-font-size-md, 14px)",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            ...ctx.visibleColSet ? { gridColumnStart: String(ctx.colTrack(columnIndex)) } : {},
+            ...ctx.pinnedStyle(column.key)
+          }
+        },
+        content
+      )
+    );
+  }
+  return vue.h(
+    "div",
+    {
+      role: "row",
+      "data-iris-table-row": "summary",
+      style: {
+        display: "grid",
+        gridTemplateColumns: ctx.gridTemplate,
+        fontWeight: "600",
+        borderTop: "2px solid var(--iris-border)",
+        background: "var(--iris-surface)"
+      }
+    },
+    summaryCells
+  );
+}
+function renderTableStateRow(ctx) {
+  if (ctx.error) {
+    return vue.h("div", { role: "row", "data-iris-table-row": "error", style: ctx.stateRowStyle }, [
+      vue.h(
+        "span",
+        { style: { marginInlineEnd: ctx.onRetry ? "var(--iris-space-sm, 12px)" : "0px" } },
+        ctx.errorContent ?? ""
+      ),
+      ctx.retry ? vue.h(
+        "button",
+        {
+          type: "button",
+          "data-iris-table-retry": "",
+          onClick: ctx.retry,
+          style: {
+            border: "1px solid var(--iris-border)",
+            background: "var(--iris-surface)",
+            color: "var(--iris-foreground)",
+            borderRadius: "var(--iris-radius-sm, 4px)",
+            padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+            fontSize: "var(--iris-font-size-sm, 13px)",
+            cursor: "pointer"
+          }
+        },
+        ctx.retryLabel
+      ) : null
+    ]);
+  }
+  if (ctx.loading) {
+    return vue.h(
+      "div",
+      {
+        role: "row",
+        "aria-busy": "true",
+        "data-iris-table-row": "loading",
+        style: ctx.stateRowStyle
+      },
+      ctx.loadingContent ?? ""
+    );
+  }
+  if (ctx.rowCount === 0) {
+    return vue.h(
+      "div",
+      { role: "row", "data-iris-table-row": "empty", style: ctx.stateRowStyle },
+      ctx.emptyContent ?? ""
+    );
+  }
+  return null;
+}
+function createTableKeyboard(options) {
+  const gridKeys = /* @__PURE__ */ new Set([
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown"
+  ]);
+  const handleGridKey = (event) => {
+    if (!options.keyboardNavigation() || !gridKeys.has(event.key)) return;
+    const target = event.target;
+    if (target.dataset.gridRow === void 0) return;
+    event.preventDefault();
+    const next = core.nextGridCell(
+      options.focused.value ?? { row: 0, col: 0 },
+      event.key,
+      { rowCount: options.rows().length, colCount: options.columns().length, pageSize: 10 }
+    );
+    options.focused.value = next;
+    options.root()?.querySelector(`[data-grid-row="${next.row}"][data-grid-col="${next.col}"]`)?.focus();
+  };
+  const handleCellRangeKey = (event) => {
+    if (!options.cellRange()) return;
+    if (event.key === "Escape") {
+      options.range.clearRange();
+      return;
+    }
+    const arrows = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+    if (!event.shiftKey || !arrows.has(event.key)) return;
+    const target = event.target;
+    const row = target.dataset.irisCellRow;
+    const col = target.dataset.irisCellCol;
+    if (row === void 0 || col === void 0) return;
+    event.preventDefault();
+    const current = options.range.getState().active ?? { row: Number(row), col: Number(col) };
+    const nextRow = event.key === "ArrowUp" ? Math.max(0, current.row - 1) : event.key === "ArrowDown" ? Math.min(options.rows().length - 1, current.row + 1) : current.row;
+    const nextCol = event.key === "ArrowLeft" ? Math.max(0, current.col - 1) : event.key === "ArrowRight" ? Math.min(options.columns().length - 1, current.col + 1) : current.col;
+    options.range.extendRange(nextRow, nextCol);
+  };
+  const isInRange = (row, col) => {
+    const { anchor, active } = options.rangeState.value;
+    return Boolean(
+      anchor && active && row >= Math.min(anchor.row, active.row) && row <= Math.max(anchor.row, active.row) && col >= Math.min(anchor.col, active.col) && col <= Math.max(anchor.col, active.col)
+    );
+  };
+  const activeCellRange = () => {
+    const { anchor, active } = options.rangeState.value;
+    if (!anchor || !active) return null;
+    return {
+      start: { row: Math.min(anchor.row, active.row), col: Math.min(anchor.col, active.col) },
+      end: { row: Math.max(anchor.row, active.row), col: Math.max(anchor.col, active.col) }
+    };
+  };
+  const copyActiveRange = () => {
+    const range = activeCellRange();
+    const clip = options.clipConfig();
+    if (!range || clip?.copy === false) return;
+    void core.writeClipboardText(
+      core.serializeTableRange(
+        options.rows(),
+        options.columns(),
+        range,
+        clip?.copyFormat,
+        clip?.copyWithFormat === true
+      )
+    );
+  };
+  const handleClipboardKey = (event) => {
+    const clip = options.clipConfig();
+    if (!options.cellRange() || !clip || event.defaultPrevented) return;
+    if (event.key.toLowerCase() !== "c" || !event.ctrlKey && !event.metaKey) return;
+    if (clip.copy === false || !activeCellRange()) return;
+    event.preventDefault();
+    copyActiveRange();
+  };
+  return {
+    handleRootKeyDown: (event) => {
+      handleGridKey(event);
+      handleCellRangeKey(event);
+      handleClipboardKey(event);
+    },
+    isInRange,
+    activeCellRange,
+    copyActiveRange
+  };
+}
+function computeResponsiveTableColumns(columns, containerWidth, leadingWidth, widthOf) {
+  if (containerWidth <= 0 || containerWidth >= core.RESPONSIVE_NARROW_WIDTH) {
+    return { columns, overflow: false };
+  }
+  const isPinned = (column) => column.children && column.children.length > 0 ? column.children.some(isPinned) : column.pinned !== void 0;
+  const fitted = core.computeResponsiveColumns(columns, Math.max(1, containerWidth - leadingWidth), {
+    widthOf: (column) => widthOf(column),
+    isPinned: (column) => isPinned(column),
+    narrowWidth: core.RESPONSIVE_NARROW_WIDTH - leadingWidth
+  });
+  const natural = fitted.reduce(
+    (sum, column) => sum + (column.children && column.children.length > 0 ? core.flattenLeafColumns([column]).reduce((nested, leaf) => nested + widthOf(leaf), 0) : widthOf(column)),
+    leadingWidth
+  );
+  return { columns: fitted, overflow: natural > containerWidth };
+}
+
+// src/primitives/table/table-styles.ts
+var TABLE_STYLE_ID = "iris-table-row-styles";
+var TABLE_STYLES = `
+[data-iris-table] [role="row"]:hover {
+  --iris-cell-bg: var(--iris-surface-hover);
+}
+[data-iris-table-row-selected="true"] {
+  --iris-cell-bg: var(--iris-surface-selected);
+}
+@media print { [data-iris-table-tabs], [data-iris-table-toolbar], [data-iris-table-form], [data-iris-scroll-hint] { display: none !important; } [data-iris-table][data-printable="true"] { border: none !important; box-shadow: var(--iris-shadow-none, none) !important; } }
+[data-iris-table][data-density="compact"] [data-iris-table-cell],
+[data-iris-table][data-density="compact"] [data-iris-table-header],
+[data-iris-table][data-density="compact"] [data-iris-table-summary-cell],
+[data-iris-table][data-density="compact"] [data-iris-table-footer-cell] { padding-block: 6px !important; }
+[data-iris-table][data-density="cozy"] [data-iris-table-cell],
+[data-iris-table][data-density="cozy"] [data-iris-table-header],
+[data-iris-table][data-density="cozy"] [data-iris-table-summary-cell],
+[data-iris-table][data-density="cozy"] [data-iris-table-footer-cell] { padding-block: 4px !important; }
+[data-iris-row-target="true"] {
+  --iris-cell-bg: color-mix(in srgb, var(--iris-primary) 18%, var(--iris-background));
+  background: color-mix(in srgb, var(--iris-primary) 18%, var(--iris-background));
+}
+`;
+function ensureTableStyles() {
+  if (typeof document === "undefined" || document.getElementById(TABLE_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = TABLE_STYLE_ID;
+  style.textContent = TABLE_STYLES;
+  document.head.appendChild(style);
+}
+
+// src/primitives/table/table-columns.ts
+function applyDetectedTableTypes(columns, detectedTypes) {
+  const apply = (column) => {
+    const kind = detectedTypes[column.key];
+    const next = kind ? {
+      ...column,
+      ...kind === "number" ? column.align === void 0 ? { align: "right" } : null : column.align === void 0 ? { align: "left" } : null
+    } : column;
+    return next.children && next.children.length > 0 ? { ...next, children: next.children.map(apply) } : next;
+  };
+  return columns.map(apply);
+}
+function renderTableFilterTrigger(options) {
+  const { column, leaf, active, open, label, onOpen } = options;
+  if (!leaf || !column.filterable) return null;
+  return vue.h(
+    "button",
+    {
+      type: "button",
+      "data-iris-filter-trigger": column.key,
+      "aria-label": label,
+      "aria-haspopup": "true",
+      "aria-expanded": open ? "true" : void 0,
+      "data-iris-filter-active": active ? "true" : void 0,
+      onClick: (event) => onOpen(event, column.key),
+      onKeydown: (event) => event.stopPropagation(),
+      style: {
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        padding: "0",
+        marginInlineStart: "var(--iris-space-xxs, 4px)",
+        fontSize: "var(--iris-font-size-xs, 12px)",
+        lineHeight: "1",
+        color: active ? "var(--iris-primary)" : "var(--iris-muted)"
+      }
+    },
+    "\u23F7"
+  );
+}
+function renderTableSortIndicator(column, options) {
+  if (!column.sortable) return null;
+  const state = options.multiSort ? options.multiSortState.find((item) => item.key === column.key) ?? null : options.sort;
+  const isActive = state?.key === column.key;
+  const direction = isActive ? state.direction : null;
+  const color = isActive ? "var(--iris-primary)" : "var(--iris-muted)";
+  return vue.h(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        marginInlineStart: "var(--iris-space-xxs, 4px)",
+        lineHeight: "0.6",
+        fontSize: "var(--iris-font-size-xs, 12px)",
+        color
+      }
+    },
+    [
+      vue.h("span", { style: { opacity: direction === "asc" ? "1" : "0.45" } }, "\u25B2"),
+      vue.h("span", { style: { opacity: direction === "desc" ? "1" : "0.45" } }, "\u25BC")
+    ]
+  );
+}
+
+// src/primitives/table/table-row-target.ts
+function createTableRowTarget(root) {
+  let timer = null;
+  const find = (key) => {
+    const element = root();
+    if (!element) return null;
+    const keyString = String(key);
+    return Array.from(element.querySelectorAll("[data-iris-table-row-key]")).find(
+      (node) => node.getAttribute("data-iris-table-row-key") === keyString
+    ) ?? null;
+  };
+  const scrollTo = (key) => {
+    find(key)?.scrollIntoView?.({ block: "nearest" });
+  };
+  const goTo = (key) => {
+    const row = find(key);
+    if (!row) return;
+    row.scrollIntoView?.({ block: "nearest" });
+    root()?.querySelector('[data-iris-row-target="true"]')?.removeAttribute("data-iris-row-target");
+    row.setAttribute("data-iris-row-target", "true");
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      row.removeAttribute("data-iris-row-target");
+    }, 2e3);
+  };
+  const dispose = () => {
+    if (timer !== null) clearTimeout(timer);
+    timer = null;
+  };
+  return { find, scrollTo, goTo, dispose };
+}
+function createTablePinnedDrag(options) {
+  const firstRightPinnedIndex = vue.computed(() => {
+    const index = options.columns().findIndex((column) => column.pinned === "right");
+    return index < 0 ? options.columns().length : index;
+  });
+  const pinnedBoundaryColumn = vue.computed(() => {
+    if (!options.enabled()) return null;
+    for (let index = firstRightPinnedIndex.value - 1; index >= 0; index -= 1) {
+      const column = options.columns()[index];
+      if (column?.pinned === "left") return column;
+    }
+    return null;
+  });
+  const handleRefs = /* @__PURE__ */ new Map();
+  const wiredKeys = /* @__PURE__ */ new Set();
+  const activeKey = vue.ref(null);
+  const dragDx = vue.ref(0);
+  const getHandleRef = (key) => {
+    let handle = handleRefs.get(key);
+    if (!handle) {
+      handle = vue.ref(null);
+      handleRefs.set(key, handle);
+    }
+    return handle;
+  };
+  const resolvePinnedCount = (dx) => {
+    const columns = options.columns();
+    const cap = firstRightPinnedIndex.value;
+    const current = core.leftPinnedCount(columns, cap);
+    let currentWidth = 0;
+    for (let index = 0; index < current; index += 1) {
+      const column = columns[index];
+      if (column) currentWidth += options.widthOf(column);
+    }
+    return core.pinnedCountFromBudget(
+      columns,
+      (column) => options.widthOf(column),
+      currentWidth + dx,
+      cap
+    );
+  };
+  const commitPinnedCount = (count) => {
+    if (!options.enabled()) return;
+    const columns = options.columns();
+    const cap = firstRightPinnedIndex.value;
+    const clamped = Math.max(0, Math.min(cap, count));
+    const current = core.leftPinnedCount(columns, cap);
+    if (clamped === current) return;
+    for (let index = 0; index < cap; index += 1) {
+      const column = columns[index];
+      if (!column) continue;
+      const target = index < clamped ? "left" : null;
+      if (column.pinned === target) continue;
+      options.onColumnPinnedChange?.(column.key, target);
+    }
+    options.onPinnedCountChange?.(clamped);
+  };
+  const wire = (key) => {
+    if (wiredKeys.has(key)) return;
+    wiredKeys.add(key);
+    const handle = getHandleRef(key);
+    useDrag({
+      handle,
+      disabled: vue.computed(() => !options.enabled()),
+      onStart: () => {
+        activeKey.value = key;
+        dragDx.value = 0;
+      },
+      onDrag: ({ dx }) => {
+        activeKey.value = key;
+        dragDx.value = dx;
+      },
+      onEnd: ({ dx }) => {
+        commitPinnedCount(resolvePinnedCount(dx));
+        activeKey.value = null;
+        dragDx.value = 0;
+      }
+    });
+  };
+  for (const column of options.columns()) wire(column.key);
+  return (column) => {
+    const boundary = pinnedBoundaryColumn.value;
+    if (!options.enabled() || !boundary || boundary.key !== column.key) return null;
+    const handle = getHandleRef(column.key);
+    return vue.h(
+      "span",
+      {
+        ref: (element) => {
+          handle.value = element ?? null;
+        },
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": `Adjust pinned column count at ${column.title}`,
+        tabindex: 0,
+        "data-iris-pinned-drag-handle": "",
+        "data-column-key": column.key,
+        "data-iris-pinned-drag-active": activeKey.value === column.key && dragDx.value !== 0 ? "true" : void 0,
+        onPointerdown: (event) => event.stopPropagation(),
+        onKeydown: (event) => {
+          if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+          event.preventDefault();
+          event.stopPropagation();
+          commitPinnedCount(resolvePinnedCount(0) + (event.key === "ArrowRight" ? 1 : -1));
+        },
+        style: {
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          width: "8px",
+          cursor: "col-resize",
+          touchAction: "none",
+          userSelect: "none",
+          zIndex: "2",
+          transform: activeKey.value === column.key && dragDx.value !== 0 ? `translateX(${dragDx.value}px)` : void 0
+        }
+      },
+      vue.h("span", {
+        "aria-hidden": "true",
+        "data-iris-pinned-drag-line": "",
+        style: {
+          position: "absolute",
+          top: "0",
+          bottom: "0",
+          insetInlineStart: "50%",
+          width: "2px",
+          background: "var(--iris-primary)",
+          transform: "translateX(-50%)"
+        }
+      })
+    );
+  };
+}
+function useTableImport(isPreviewEnabled, getOnImport) {
+  const importFileInput = vue.ref(null);
+  const importPreviewRows = vue.ref(null);
+  const handleImportFile = (event) => {
+    const input = event.target;
+    const file = input?.files?.[0];
+    if (!file || !getOnImport() || typeof FileReader === "undefined") return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const rows = core.rowsFromCsv(String(reader.result ?? ""));
+      if (rows.length === 0) return;
+      if (isPreviewEnabled()) importPreviewRows.value = rows;
+      else getOnImport()?.(rows);
+    };
+    reader.readAsText(file);
+    if (input) input.value = "";
+  };
+  const confirmImportPreview = () => {
+    if (!importPreviewRows.value) return;
+    getOnImport()?.(importPreviewRows.value);
+    importPreviewRows.value = null;
+  };
+  const cancelImportPreview = () => {
+    importPreviewRows.value = null;
+  };
+  vue.watch(importPreviewRows, (rows, _previous, onCleanup) => {
+    if (!rows || typeof window === "undefined") return;
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") cancelImportPreview();
+    };
+    window.addEventListener("keydown", closeOnEscape);
+    onCleanup(() => window.removeEventListener("keydown", closeOnEscape));
+  });
+  return {
+    importFileInput,
+    importPreviewRows,
+    handleImportFile,
+    confirmImportPreview,
+    cancelImportPreview
+  };
+}
+var editorInputStyle = (error) => ({
+  width: "100%",
+  border: `1px solid ${error ? "var(--iris-danger)" : "var(--iris-primary)"}`,
+  borderRadius: "var(--iris-radius-sm)",
+  padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)",
+  font: "inherit",
+  background: "var(--iris-background)",
+  color: "var(--iris-foreground)",
+  outline: "none",
+  boxShadow: "0 0 0 3px color-mix(in srgb, var(--iris-primary) 18%, transparent)"
+});
+function editorErrorVNode(editCellId, error) {
+  return vue.h(
+    "div",
+    {
+      id: `${editCellId}-error`,
+      role: "alert",
+      "data-iris-table-editor-error": "",
+      style: {
+        marginTop: "var(--iris-space-xxs, 4px)",
+        fontSize: "var(--iris-font-size-xs, 12px)",
+        color: "var(--iris-danger)"
+      }
+    },
+    error
+  );
+}
+var editPreviewStyle = {
+  flexBasis: "100%",
+  minWidth: "0",
+  marginTop: "var(--iris-space-xxs, 4px)",
+  fontSize: "var(--iris-font-size-xs, 12px)",
+  color: "var(--iris-muted)"
+};
+function previewVNode(ctx, row, col, draft) {
+  if (!ctx.editPreview || !col.formatter) return null;
+  return vue.h(
+    "div",
+    { "data-iris-edit-preview": "", style: editPreviewStyle },
+    ctx.previewValue(row, col, draft)
+  );
+}
+function renderRowSessionContent(ctx, row, col, index, key, editCellId, session) {
+  const error = session.error;
+  const input = vue.h("input", {
+    ref: (el) => {
+      ctx.rowEditorRefs.set(col.key, el ?? null);
+    },
+    type: col.editor === "number" ? "number" : "text",
+    value: session.draft,
+    "data-iris-table-editor": "",
+    "aria-invalid": error ? "true" : void 0,
+    "aria-describedby": error ? `${editCellId}-error` : void 0,
+    onInput: (e) => {
+      session.draft = e.target.value;
+    },
+    onKeydown: (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        ctx.commitRowSession(key, col, index, editCellId);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        ctx.cancelRowEdit();
+      }
+    },
+    onBlur: () => ctx.commitRowSession(key, col, index, editCellId),
+    onClick: (e) => e.stopPropagation(),
+    onDblclick: (e) => e.stopPropagation(),
+    style: editorInputStyle(error)
+  });
+  const preview = previewVNode(ctx, row, col, session.draft);
+  const children = [input, preview, error ? editorErrorVNode(editCellId, error) : null].filter(
+    (node) => node !== null
+  );
+  return children.length === 1 ? children[0] : children;
+}
+function renderCellEditContent(ctx, row, col, index, editCellId) {
+  const error = ctx.editError.value;
+  const input = vue.h("input", {
+    ref: (el) => {
+      ctx.editorInputRef.value = el ?? null;
+    },
+    type: col.editor === "number" ? "number" : "text",
+    value: ctx.editingDraft.value,
+    "data-iris-table-editor": "",
+    "aria-invalid": error ? "true" : void 0,
+    "aria-describedby": error ? `${editCellId}-error` : void 0,
+    onInput: (e) => {
+      ctx.editingDraft.value = e.target.value;
+    },
+    onKeydown: (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        ctx.commitEdit(row, col, index);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        ctx.cancelEdit();
+      }
+    },
+    onBlur: () => ctx.commitEdit(row, col, index),
+    onClick: (e) => e.stopPropagation(),
+    onDblclick: (e) => e.stopPropagation(),
+    style: editorInputStyle(error)
+  });
+  const preview = previewVNode(ctx, row, col, ctx.editingDraft.value);
+  const children = [input, preview, error ? editorErrorVNode(editCellId, error) : null].filter(
+    (node) => node !== null
+  );
+  return children.length === 1 ? children[0] : children;
+}
+function renderGroupedHeader(ctx, matrix) {
+  const lead = (ctx.showDrag ? 1 : 0) + (ctx.showSeq ? 1 : 0) + (ctx.showDetail ? 1 : 0) + (ctx.showSelection ? 1 : 0);
+  const cells = [];
+  if (ctx.showDrag) {
+    cells.push(
+      vue.h("div", {
+        key: "__drag__",
+        role: "columnheader",
+        "data-iris-table-header": "__drag",
+        style: { gridColumn: "1", gridRow: "1 / -1" }
+      })
+    );
+  }
+  if (ctx.showSeq) {
+    cells.push(
+      vue.h("div", {
+        key: "__seq__",
+        role: "columnheader",
+        "data-iris-table-header": "__seq",
+        style: { gridColumn: ctx.showDrag ? "2" : "1", gridRow: "1 / -1" }
+      })
+    );
+  }
+  if (ctx.showDetail) {
+    cells.push(
+      vue.h("div", {
+        key: "__expand__",
+        role: "columnheader",
+        style: {
+          gridColumn: `${(ctx.showDrag ? 1 : 0) + (ctx.showSeq ? 1 : 0) + 1}`,
+          gridRow: "1 / -1"
+        }
+      })
+    );
+  }
+  if (ctx.showSelection) {
+    cells.push(
+      vue.h(
+        "div",
+        {
+          key: "__select__",
+          role: "columnheader",
+          "data-iris-table-header": "",
+          style: {
+            gridColumn: `${(ctx.showDrag ? 1 : 0) + (ctx.showSeq ? 1 : 0) + (ctx.showDetail ? 1 : 0) + 1}`,
+            gridRow: "1 / -1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "8px 12px",
+            background: "var(--iris-surface)",
+            borderBottom: "1px solid var(--iris-border)"
+          }
+        },
+        ctx.selectable === "multi" ? [
+          [
+            vue.h(IrisCheckbox, {
+              modelValue: ctx.allSelected.value ? true : ctx.someSelected.value ? "indeterminate" : false,
+              size: "sm",
+              ariaLabel: ctx.t("table.selectAll"),
+              "onUpdate:modelValue": ctx.toggleAll
+            }),
+            ctx.selection && ctx.selection.length > 0 ? vue.h(
+              "span",
+              {
+                "data-iris-table-selected-count": "",
+                style: {
+                  marginInlineStart: "var(--iris-space-xs, 8px)",
+                  fontSize: "var(--iris-font-size-sm, 13px)",
+                  color: "var(--iris-muted)",
+                  whiteSpace: "nowrap"
+                }
+              },
+              ctx.t("table.selectedCount", { count: String(ctx.selection.length) })
+            ) : null
+          ]
+        ] : ""
+      )
+    );
+  }
+  for (const rowCells of matrix) {
+    for (const cell of rowCells) {
+      const col = cell.column;
+      const isLeaf = !col.children || col.children.length === 0;
+      const sortable = isLeaf && col.sortable;
+      const align = col.align ?? "left";
+      const headerSlot = ctx.slots[`header.${col.key}`];
+      const title = headerSlot?.({ column: col }) ?? col.title;
+      cells.push(
+        vue.h(
+          "div",
+          {
+            key: `${col.key}-${cell.level}`,
+            role: "columnheader",
+            "data-iris-table-header": col.key,
+            "data-iris-table-header-group": isLeaf ? void 0 : "",
+            "aria-colspan": cell.colSpan,
+            onClick: sortable ? () => ctx.onHeaderClick(col) : void 0,
+            "aria-sort": sortable ? ctx.ariaSortFor(col) : void 0,
+            style: {
+              gridColumn: `${lead + cell.colStart} / span ${cell.colSpan}`,
+              gridRow: `${cell.level + 1} / span ${cell.rowSpan}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: isLeaf ? align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start" : "center",
+              padding: "8px var(--iris-padding-md)",
+              cursor: sortable ? "pointer" : "default",
+              userSelect: sortable ? "none" : "auto",
+              background: "var(--iris-surface)",
+              borderBottom: "1px solid var(--iris-border)",
+              fontWeight: "600",
+              fontSize: "var(--iris-font-size-md, 14px)",
+              color: "var(--iris-foreground)",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+          },
+          [
+            title,
+            sortable ? ctx.sortIndicator(col) : null,
+            ctx.multiSortSeq(col),
+            ctx.renderFilterTrigger(col, isLeaf),
+            isLeaf ? ctx.pinnedDragHandle?.(col) ?? null : null
+          ]
+        )
+      );
+    }
   }
+  return vue.h(
+    "div",
+    {
+      role: "row",
+      "data-iris-table-row": "header",
+      "data-iris-table-header-row": "",
+      "data-iris-table-header-grouped": "",
+      style: {
+        display: "grid",
+        gridTemplateColumns: ctx.gridTemplate.value,
+        gridTemplateRows: `repeat(${matrix.length}, auto)`
+      }
+    },
+    cells
+  );
+}
+function createTableViewsController(options) {
+  const views = vue.ref(core.readTableViews(options.config()));
+  const internalActiveKey = vue.ref(null);
+  const activeKey = vue.computed(() => {
+    const config = options.config();
+    return config?.activeKey !== void 0 ? config.activeKey ?? null : internalActiveKey.value;
+  });
+  const saveOpen = vue.ref(false);
+  const draft = vue.ref("");
+  const activeTab = vue.ref(null);
+  const persist = (next) => {
+    views.value = next;
+    core.writeTableViews(options.config(), next);
+  };
+  const applySnapshot = (snapshot) => {
+    if (Object.prototype.hasOwnProperty.call(snapshot, "sort"))
+      options.setSort(snapshot.sort ?? null);
+  };
+  const select = (key) => {
+    const view = views.value.find((candidate) => candidate.name === key);
+    if (!view) return;
+    applySnapshot(view.snapshot);
+    internalActiveKey.value = key;
+    options.onActiveViewChange(key);
+  };
+  const save = (name) => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    const currentSort = options.sort.value;
+    const entry = {
+      name: trimmed,
+      snapshot: { sort: currentSort ? { ...currentSort } : null }
+    };
+    const index = views.value.findIndex((view) => view.name === trimmed);
+    persist(
+      index < 0 ? [...views.value, entry] : views.value.map((view, i) => i === index ? entry : view)
+    );
+    internalActiveKey.value = trimmed;
+    options.onActiveViewChange(trimmed);
+  };
+  const remove = (key) => {
+    persist(views.value.filter((view) => view.name !== key));
+    if (activeKey.value === key) {
+      internalActiveKey.value = null;
+      options.onActiveViewChange(null);
+    }
+  };
+  const applyTab = (tab) => {
+    activeTab.value = tab.key;
+    for (const name of tab.views ?? []) select(name);
+  };
   return {
-    sortState,
-    cycleSort,
-    setSort,
-    sortComparator,
-    sortedData
+    activeKey,
+    views,
+    saveOpen,
+    draft,
+    renderTabs: (tabs) => renderTableTabs(tabs, activeTab, applyTab),
+    renderViews: () => renderTableViews({
+      config: options.config(),
+      views,
+      activeKey,
+      saveOpen,
+      draft,
+      onSelect: select,
+      onSave: save,
+      onDelete: remove
+    })
   };
 }
-
-// src/primitives/table/Table.ts
-function getCellValue2(row, column) {
-  const key = column.dataIndex ?? column.key;
-  return row[key];
+function renderTableViews(ctx) {
+  if (!ctx.config) return null;
+  return vue.h(
+    "div",
+    {
+      "data-iris-table-views-bar": "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--iris-space-xxs, 4px)",
+        padding: "var(--iris-space-xxs, 4px) 0"
+      }
+    },
+    [
+      vue.h(
+        "select",
+        {
+          "data-iris-table-views": "",
+          value: ctx.saveOpen.value ? core.TABLE_VIEWS_SAVE_ITEM : ctx.activeKey.value ?? "",
+          "aria-label": "Table views",
+          onChange: (event) => {
+            const value = event.target.value;
+            if (value === core.TABLE_VIEWS_SAVE_ITEM) {
+              ctx.draft.value = "";
+              ctx.saveOpen.value = true;
+            } else if (value !== "") {
+              ctx.onSelect(value);
+            }
+          },
+          style: {
+            border: "1px solid var(--iris-border)",
+            borderRadius: "var(--iris-radius-sm, 4px)",
+            background: "var(--iris-surface)",
+            color: "var(--iris-foreground)",
+            font: "inherit",
+            fontSize: "var(--iris-font-size-sm, 13px)",
+            padding: "0 var(--iris-space-xxs, 4px)",
+            maxWidth: "180px"
+          }
+        },
+        [
+          ctx.activeKey.value === null && !ctx.saveOpen.value ? vue.h("option", { value: "", disabled: true }, "Select view") : null,
+          ...ctx.views.value.map(
+            (view) => vue.h(
+              "option",
+              { key: view.name, value: view.name },
+              ctx.config?.label?.(view.name) ?? view.name
+            )
+          ),
+          vue.h("option", { value: core.TABLE_VIEWS_SAVE_ITEM }, "\uFF0B Save view")
+        ]
+      ),
+      ctx.saveOpen.value ? vue.h("input", {
+        "data-iris-views-save": "",
+        type: "text",
+        value: ctx.draft.value,
+        placeholder: "View name",
+        "aria-label": "Save view",
+        onInput: (event) => {
+          ctx.draft.value = event.target.value;
+        },
+        onKeydown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            if (ctx.draft.value.trim()) ctx.onSave(ctx.draft.value);
+            ctx.saveOpen.value = false;
+          } else if (event.key === "Escape") {
+            ctx.saveOpen.value = false;
+          }
+        },
+        onBlur: () => {
+          ctx.saveOpen.value = false;
+        },
+        style: {
+          border: "1px solid var(--iris-border)",
+          borderRadius: "var(--iris-radius-sm, 4px)",
+          padding: "var(--iris-space-xxs, 4px)",
+          width: "120px",
+          font: "inherit"
+        }
+      }) : null,
+      ctx.activeKey.value !== null ? vue.h(
+        "button",
+        {
+          type: "button",
+          "data-iris-table-views-delete": "",
+          "aria-label": "Delete view",
+          onClick: () => ctx.onDelete(ctx.activeKey.value),
+          style: {
+            border: "none",
+            background: "transparent",
+            cursor: "pointer",
+            color: "var(--iris-muted)",
+            font: "inherit",
+            padding: "0 var(--iris-space-xxs, 4px)"
+          }
+        },
+        "\xD7"
+      ) : null
+    ]
+  );
 }
-var SELECTION_COL_WIDTH = 40;
-var EXPAND_COL_WIDTH = 40;
-var DEFAULT_COL_WIDTH = 140;
-var DEFAULT_MIN_WIDTH = 60;
-var RESIZE_STEP = 16;
-function resolveInitialWidth(col) {
-  if (typeof col.width === "number") return col.width;
-  if (typeof col.width === "string") {
-    const m = col.width.match(/^(\d+(?:\.\d+)?)px$/);
-    if (m) return Number(m[1]);
-  }
-  return DEFAULT_COL_WIDTH;
+function renderTableTabs(tabs, activeTab, onApply) {
+  const unique = core.uniqueTableTabs(tabs ?? []);
+  if (unique.length === 0) return null;
+  return vue.h(
+    "div",
+    {
+      role: "tablist",
+      "data-iris-table-tabs": "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--iris-space-xs, 8px)",
+        padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+        border: "1px solid var(--iris-border)",
+        borderBottom: "none",
+        borderTopLeftRadius: "var(--iris-radius-md, 6px)",
+        borderTopRightRadius: "var(--iris-radius-md, 6px)",
+        background: "var(--iris-surface)"
+      }
+    },
+    unique.map(
+      (tab) => vue.h(
+        "button",
+        {
+          key: tab.key,
+          type: "button",
+          role: "tab",
+          "data-iris-table-tab": tab.key,
+          "aria-selected": activeTab.value === tab.key ? "true" : "false",
+          onClick: () => onApply(tab),
+          style: {
+            border: "none",
+            background: "transparent",
+            color: activeTab.value === tab.key ? "var(--iris-primary)" : "var(--iris-foreground)",
+            cursor: "pointer",
+            font: "inherit",
+            fontWeight: activeTab.value === tab.key ? "600" : "400",
+            padding: "0 var(--iris-space-xxs, 4px)"
+          }
+        },
+        tab.label
+      )
+    )
+  );
 }
+
+// src/primitives/table/Table.ts
 var IrisTable = vue.defineComponent({
   name: "IrisTable",
   inheritAttrs: false,
-  props: {
-    columns: {
-      type: Array,
-      required: true
-    },
-    data: {
-      type: Array,
-      required: false,
-      default: void 0
-    },
-    rowKey: { type: String, default: "id" },
-    ...tableControlProps,
-    striped: { type: Boolean, default: false },
-    editConfig: {
-      type: Object,
-      default: void 0
-    },
-    bordered: { type: Boolean, default: true },
-    /** Enable per-column resize handles. Combine with `v-model:columnWidths` for persistence. */
-    resizableColumns: { type: Boolean, default: false },
-    /** Controlled column widths in px. */
-    columnWidths: {
-      type: Object,
-      default: void 0
-    },
-    /** Enable virtual scrolling for the body. */
-    virtualScroll: {
-      type: Object,
-      default: void 0
-    },
-    /** Show the loading state instead of rows. */
-    loading: { type: Boolean, default: false },
-    /** Show the error state instead of rows (takes precedence over loading). */
-    error: { type: Boolean, default: false },
-    onRetry: { type: Function, default: void 0 },
-    /** Render only the horizontally-visible columns (+ pinned + overscan) for wide tables. */
-    columnVirtualization: { type: Boolean, default: false },
-    /**
-     * Enable WAI-ARIA grid keyboard navigation: the table becomes `role="grid"`
-     * and Arrow / Home / End / Page Up·Down move a roving cell focus across the
-     * data cells. Off by default; opt-in and additive (no effect on mouse / Tab
-     * behavior). Pairs best without virtualization (the focused cell must be
-     * rendered) and does not hijack keystrokes while a cell is being edited.
-     */
-    keyboardNavigation: { type: Boolean, default: false },
-    /**
-     * Enable rectangular cell-range selection (Excel-style). Click starts a
-     * range; Shift+Click or Shift+Arrow extends it; Escape clears it.
-     * Cells within the range get `data-iris-cell-selected="true"`.
-     */
-    cellRange: { type: Boolean, default: false },
-    /**
-     * Render an expandable detail panel beneath a row. Providing this adds a
-     * leading expand-toggle column; clicking it reveals a full-width detail row.
-     * (Not applied in the virtual-scroll path.)
-     */
-    renderDetail: {
-      type: Function,
-      default: void 0
-    },
-    /** Which rows can expand a detail panel. Defaults to all rows when `renderDetail` is set. */
-    rowExpandable: {
-      type: Function,
-      default: void 0
-    },
-    /** Initially-expanded row keys (uncontrolled). */
-    defaultExpandedRowKeys: {
-      type: Array,
-      default: void 0
-    },
-    /**
-     * Read a row's child rows to render the table as a TREE. Providing this
-     * enables tree mode: `data` is treated as the root rows, each row's first
-     * cell gains a depth indent + an expand/collapse toggle (when it has
-     * children), and the expand state reuses `defaultExpandedRowKeys` /
-     * `expandedRowsChange`. Column sort reorders siblings hierarchically (each
-     * level sorted, structure kept), and tree rows virtualize like flat rows
-     * when `virtualScroll` is set (unless `renderDetail` is also used, since
-     * detail panels are variable-height).
-     */
-    getSubRows: {
-      type: Function,
-      default: void 0
-    },
-    /**
-     * Cascade multi-row selection through the complete tree supplied by
-     * `getSubRows`. Selecting a branch selects every descendant (including
-     * collapsed rows); partially selected branches render indeterminate.
-     * Ignored outside tree mode and for non-multi selection.
-     */
-    treeSelectionCascade: { type: Boolean, default: false }
-  },
+  props: tableProps,
   emits: {
     "update:selection": (_value) => true,
     "update:sort": (_value) => true,
+    "update:multiSortState": (_value) => true,
+    multiSortChange: (_value) => true,
     "update:columnWidths": (_value) => true,
+    /** Controlled columnVisibility channel (parent owns the map). */
+    "update:columnVisibility": (_value) => true,
     rowClick: (_row, _index) => true,
     rowDblclick: (_row, _index) => true,
     cellEdit: (_payload) => true,
     expandedRowsChange: (_keys) => true
   },
-  setup(props, { slots, attrs, emit }) {
-    if (typeof document !== "undefined" && !document.getElementById("iris-table-row-styles")) {
-      const style = document.createElement("style");
-      style.id = "iris-table-row-styles";
-      style.textContent = `
-[data-iris-table] [role="row"]:hover {
-  --iris-cell-bg: var(--iris-surface-hover);
-}
-[data-iris-table-row-selected="true"] {
-  --iris-cell-bg: var(--iris-surface-selected);
-}
-`;
-      document.head.appendChild(style);
-    }
+  setup(props, { slots, attrs, emit, expose }) {
+    ensureTableStyles();
     const { t } = useI18n();
-    const grouped = vue.computed(() => props.columns.some((c) => c.children && c.children.length > 0));
+    const densityState = vue.ref("comfortable");
+    const effectiveDensity = vue.computed(() => {
+      if (props.densityToggle) return densityState.value;
+      return props.density === "compact" || props.density === "cozy" ? props.density : "comfortable";
+    });
+    const cycleDensity = () => {
+      densityState.value = densityState.value === "comfortable" ? "compact" : densityState.value === "compact" ? "cozy" : "comfortable";
+    };
+    const importController = useTableImport(
+      () => props.importPreview,
+      () => props.toolbar?.onImport
+    );
+    const responsiveWidth = vue.ref(0);
+    const internalWidths = vue.ref({});
+    const effectiveWidths = vue.computed(() => {
+      if (props.columnWidths) return props.columnWidths;
+      return internalWidths.value;
+    });
+    const sourceDisplayColumns = vue.computed(() => {
+      const vis = props.columnVisibility;
+      if (!vis) return props.columns;
+      return props.columns.filter((c) => vis[c.key] !== false);
+    });
+    const detectedTypes = vue.ref({});
+    const detectTypesDone = vue.ref(false);
+    const detectedDisplayColumns = vue.computed(() => {
+      if (!props.autoDetectTypes || Object.keys(detectedTypes.value).length === 0) {
+        return sourceDisplayColumns.value;
+      }
+      return applyDetectedTableTypes(sourceDisplayColumns.value, detectedTypes.value);
+    });
+    const responsiveLeadingWidth = vue.computed(
+      () => (props.rowDrag ? DRAG_COL_WIDTH : 0) + (props.seq ? SEQ_COL_WIDTH : 0) + (props.renderDetail !== void 0 ? EXPAND_COL_WIDTH : 0) + (props.selectable !== "none" ? SELECTION_COL_WIDTH : 0)
+    );
+    const responsiveWidthOf = (column) => {
+      const width = effectiveWidths.value[column.key] ?? resolveInitialWidth(column);
+      return Number.isFinite(width) && width >= 0 ? width : resolveInitialWidth(column);
+    };
+    const responsiveResult = vue.computed(
+      () => props.responsive ? computeResponsiveTableColumns(
+        detectedDisplayColumns.value,
+        responsiveWidth.value,
+        responsiveLeadingWidth.value,
+        responsiveWidthOf
+      ) : { columns: detectedDisplayColumns.value, overflow: false }
+    );
+    const responsiveDisplayColumns = vue.computed(
+      () => responsiveResult.value.columns
+    );
+    const responsiveOverflow = vue.computed(() => responsiveResult.value.overflow);
+    const displayColumns = vue.computed(
+      () => responsiveDisplayColumns.value
+    );
+    const grouped = vue.computed(
+      () => displayColumns.value.some((c) => c.children && c.children.length > 0)
+    );
     const leafColumns = vue.computed(
-      () => grouped.value ? core.flattenLeafColumns(props.columns) : props.columns
+      () => grouped.value ? core.flattenLeafColumns(displayColumns.value) : displayColumns.value
+    );
+    const headerMatrix = vue.computed(
+      () => grouped.value ? core.buildHeaderMatrix(displayColumns.value) : null
+    );
+    const remoteSort = vue.computed(() => props.proxyConfig?.remoteSort === true);
+    const remoteFilter = vue.computed(() => props.proxyConfig?.remoteFilter === true);
+    const proxyCtrl = useTableProxy({
+      proxyConfig: () => props.proxyConfig,
+      remoteSort,
+      remoteFilter,
+      multiSort: () => props.multiSort,
+      sort: () => props.sort,
+      defaultSort: props.defaultSort,
+      multiSortState: () => props.multiSortState,
+      defaultMultiSort: props.defaultMultiSort,
+      filters: () => props.filters,
+      filterValues: () => props.filterValues
+    });
+    const tableLoading = vue.computed(
+      () => proxyCtrl.proxy.value ? proxyCtrl.state.value.loading : props.loading
+    );
+    const tableError = vue.computed(
+      () => proxyCtrl.proxy.value ? proxyCtrl.state.value.error !== null : props.error
+    );
+    const handleRetry = () => {
+      if (proxyCtrl.proxy.value) void proxyCtrl.proxy.value.refetch();
+      props.onRetry?.();
+    };
+    const retry = vue.computed(() => proxyCtrl.proxy.value ? handleRetry : props.onRetry);
+    const localRowsOverride = vue.ref(null);
+    vue.watch(
+      () => props.data,
+      () => {
+        if (localRowsOverride.value !== null) localRowsOverride.value = null;
+      }
+    );
+    const tableData = vue.computed(
+      () => proxyCtrl.proxy.value ? proxyCtrl.liveData.value : localRowsOverride.value ?? props.data ?? []
+    );
+    vue.watch(
+      [() => props.autoDetectTypes, tableData, () => props.columns],
+      () => {
+        if (!props.autoDetectTypes || detectTypesDone.value || tableData.value.length === 0) return;
+        detectTypesDone.value = true;
+        const next = {};
+        for (const column of core.flattenLeafColumns(props.columns)) {
+          const candidate = column;
+          if (candidate.formula) continue;
+          next[column.key] = core.detectColumnType(
+            tableData.value.map((row) => getCellValue(row, candidate))
+          );
+        }
+        detectedTypes.value = next;
+      },
+      { immediate: true }
     );
-    const headerMatrix = vue.computed(() => grouped.value ? core.buildHeaderMatrix(props.columns) : null);
     const {
       sortState: internalSort,
       cycleSort,
+      setSort,
       sortComparator,
-      sortedData: sortedRows
-    } = useTableSort(
-      vue.computed(() => props.data ?? []),
-      {
-        leafColumns,
-        sort: vue.computed(() => props.sort),
-        defaultSort: props.defaultSort,
-        onSortChange: (next) => emit("update:sort", next)
+      sortedData: sortedRows,
+      multiSortState,
+      cycleMultiSort
+    } = useTableSort(tableData, {
+      leafColumns,
+      sort: vue.computed(() => props.sort),
+      defaultSort: props.defaultSort,
+      onSortChange: (next) => {
+        emit("update:sort", next);
+        if (remoteSort.value) proxyCtrl.setParams({ sort: next });
+      },
+      multiSort: () => props.multiSort,
+      multiSortState: () => props.multiSortState,
+      defaultMultiSort: props.defaultMultiSort,
+      onMultiSortChange: (next) => {
+        emit("update:multiSortState", next);
+        emit("multiSortChange", next);
+        if (remoteSort.value) proxyCtrl.setParams({ sorts: next });
+      }
+    });
+    const tableViews = createTableViewsController({
+      config: () => props.views,
+      sort: internalSort,
+      setSort,
+      onActiveViewChange: (key) => props.onActiveViewChange?.(key)
+    });
+    const sortedData = vue.computed(() => remoteSort.value ? tableData.value : sortedRows.value);
+    vue.watch([internalSort, () => props.multiSort, remoteSort, () => proxyCtrl.proxy.value], () => {
+      if (!proxyCtrl.proxy.value || !remoteSort.value || props.multiSort) return;
+      proxyCtrl.setParams({ sort: internalSort.value });
+    });
+    vue.watch([multiSortState, () => props.multiSort, remoteSort, () => proxyCtrl.proxy.value], () => {
+      if (!proxyCtrl.proxy.value || !remoteSort.value || !props.multiSort) return;
+      proxyCtrl.setParams({ sorts: multiSortState.value });
+    });
+    const formDraft = vue.ref({});
+    const formApplied = vue.ref({});
+    const formFieldSignature = vue.computed(
+      () => (props.formConfig?.fields ?? []).map((f) => `${f.key}=${f.defaultValue ?? ""}`).join("\0")
+    );
+    vue.watch(
+      formFieldSignature,
+      () => {
+        formDraft.value = core.seedFormValues(props.formConfig?.fields);
+        formApplied.value = {};
+      },
+      { immediate: true }
+    );
+    const setFormValue = (key, value) => {
+      if (formDraft.value[key] === value) return;
+      formDraft.value = { ...formDraft.value, [key]: value };
+    };
+    const mergedProxyFilters = (form) => mergeFilterValues(core.mergeFormFilters(props.filters ?? {}, form), props.filterValues ?? {});
+    const handleFormSubmit = () => {
+      const values = core.buildFormValues(props.formConfig?.fields, formDraft.value);
+      props.formConfig?.onSearch?.(values);
+      formApplied.value = values;
+      if (proxyCtrl.proxy.value) {
+        proxyCtrl.setParams({ filters: mergedProxyFilters(values), page: 1 });
+      }
+    };
+    const handleFormReset = () => {
+      const defaults = core.seedFormValues(props.formConfig?.fields);
+      formDraft.value = defaults;
+      const values = core.buildFormValues(props.formConfig?.fields, defaults);
+      formApplied.value = values;
+      props.formConfig?.onReset?.(values);
+      if (proxyCtrl.proxy.value) {
+        if (!proxyCtrl.setParams({ filters: mergedProxyFilters(values), page: 1 })) {
+          void proxyCtrl.refetch();
+        }
       }
+    };
+    vue.watch(
+      [formApplied, () => props.filters, () => props.filterValues],
+      () => {
+        if (proxyCtrl.proxy.value && remoteFilter.value) {
+          proxyCtrl.setParams({
+            filters: mergedProxyFilters(formApplied.value)
+          });
+        }
+      },
+      { immediate: true }
     );
     const selControlled = vue.computed(() => props.selection !== void 0);
     const selectionModel = core.createSelectionModel({
@@ -10757,18 +12842,56 @@ var IrisTable = vue.defineComponent({
       if (typeof v === "string" || typeof v === "number") return v;
       return index;
     };
-    const treeMode = vue.computed(() => props.getSubRows !== void 0);
+    const treeMode = vue.computed(() => props.getSubRows !== void 0 || props.lazyLoad !== void 0);
+    const lazyChildren = vue.ref(/* @__PURE__ */ new Map());
+    const lazyLoading = vue.ref(/* @__PURE__ */ new Set());
+    let lazyEpoch = 0;
+    vue.watch(
+      () => proxyCtrl.proxy.value ? proxyCtrl.state.value.data : props.data,
+      () => {
+        lazyChildren.value = /* @__PURE__ */ new Map();
+        lazyLoading.value = /* @__PURE__ */ new Set();
+        lazyEpoch += 1;
+      }
+    );
+    const lazyChildrenOf = (row) => {
+      const key = String(row[props.rowKey]);
+      return lazyChildren.value.get(key) ?? props.getSubRows?.(row);
+    };
     const flatTree = vue.computed(
-      () => treeMode.value ? core.flattenTree(sortedRows.value, {
+      () => treeMode.value ? core.flattenTree(sortedData.value, {
         getKey: (r) => String(r[props.rowKey]),
         // With an active sort, sort each level's children by the same
-        // comparator so the whole tree reorders hierarchically.
-        getChildren: sortComparator.value ? core.withSortedChildren((r) => props.getSubRows(r), sortComparator.value) : (r) => props.getSubRows(r),
+        // comparator so the whole tree reorders hierarchically. Lazy-loaded
+        // children win over `getSubRows` and still participate.
+        getChildren: sortComparator.value ? core.withSortedChildren(lazyChildrenOf, sortComparator.value) : lazyChildrenOf,
         isExpanded: (k) => expandedKeys.value.includes(k)
       }) : null
     );
+    const filteredData = vue.computed(() => {
+      if (remoteFilter.value) return sortedData.value;
+      const merged = proxyCtrl.proxy.value ? props.filters ?? {} : core.mergeFormFilters(props.filters ?? {}, formApplied.value);
+      const active = Object.entries(merged).filter(([, v]) => v != null && v !== "");
+      const checkedEntries = Object.entries(props.filterValues ?? {}).filter(
+        ([, values]) => values.length > 0
+      );
+      if (active.length === 0 && checkedEntries.length === 0) return sortedData.value;
+      return sortedData.value.filter((row) => {
+        const textOk = active.every(([key, value]) => {
+          const col = displayColumns.value.find((c) => c.key === key);
+          if (!col) return true;
+          return String(getCellValue(row, col) ?? "").toLowerCase().includes(value.toLowerCase());
+        });
+        const setsOk = checkedEntries.every(([key, values]) => {
+          const col = displayColumns.value.find((c) => c.key === key);
+          if (!col) return true;
+          return values.includes(String(getCellValue(row, col) ?? ""));
+        });
+        return textOk && setsOk;
+      });
+    });
     const bodyData = vue.computed(
-      () => flatTree.value ? flatTree.value.map((t2) => t2.row) : sortedRows.value
+      () => flatTree.value ? flatTree.value.map((t2) => t2.row) : filteredData.value
     );
     const cascadingTreeSelection = vue.computed(
       () => props.treeSelectionCascade && props.selectable === "multi" && treeMode.value
@@ -10790,7 +12913,7 @@ var IrisTable = vue.defineComponent({
           if (children && children.length > 0) walk(children, key);
         }
       };
-      walk(sortedRows.value);
+      walk(sortedData.value);
       return nodes;
     });
     const compactTreeSelectionSeed = (keys) => {
@@ -10863,25 +12986,27 @@ var IrisTable = vue.defineComponent({
       selectionModel.set([...allRowIds.value]);
     };
     const editingCellId = vue.ref(null);
+    const editingColumnKey = vue.ref(null);
     const editingDraft = vue.ref("");
     const editError = vue.ref(null);
     const editorInputRef = vue.ref(null);
-    const cellId = (rowIdent, colKey) => `${rowIdent}::${colKey}`;
     const beginEdit = (row, column, rowIdent) => {
       if (!column.editable) return;
       editingCellId.value = cellId(rowIdent, column.key);
-      const current = getCellValue2(row, column);
+      editingColumnKey.value = column.key;
+      const current = getCellValue(row, column);
       editingDraft.value = current == null ? "" : String(current);
       editError.value = null;
       void vue.nextTick(() => editorInputRef.value?.focus());
     };
     const commitEdit = (row, column, rowIndex) => {
       if (editingCellId.value === null) return;
-      const oldValue = getCellValue2(row, column);
+      const oldValue = getCellValue(row, column);
       const draft = editingDraft.value;
       const newValue = column.editor === "number" ? draft === "" || Number.isNaN(Number(draft)) ? oldValue : Number(draft) : draft;
       if (column.editRules && column.editRules.length > 0) {
-        core.validateEditRulesAsync(column.editRules, draft, row).then((r) => {
+        const context = { rows: tableData.value, columnKey: column.key };
+        core.validateEditRulesAsync(column.editRules, draft, row, false, context).then((r) => {
           if (!r.valid) {
             editError.value = r.messages[0] ?? null;
             return;
@@ -10904,67 +13029,272 @@ var IrisTable = vue.defineComponent({
         emit("cellEdit", { row, column, oldValue, newValue, rowIndex });
       }
     };
+    const writeCellValue = (row, column, rowIndex, oldValue, newValue) => {
+      if (newValue === oldValue) return;
+      emit("cellEdit", { row, column, oldValue, newValue, rowIndex });
+      if (proxyCtrl.proxy.value) {
+        const id = rowId(row, rowIndex);
+        const idx = proxyCtrl.liveData.value.findIndex((r, i) => rowId(r, i) === id);
+        if (idx >= 0) {
+          const key = column.dataIndex ?? column.key;
+          const next = { ...proxyCtrl.liveData.value[idx], [key]: newValue };
+          proxyCtrl.liveData.value = [
+            ...proxyCtrl.liveData.value.slice(0, idx),
+            next,
+            ...proxyCtrl.liveData.value.slice(idx + 1)
+          ];
+        }
+      }
+    };
     const finishCommit = (row, column, rowIndex, oldValue, newValue) => {
       editError.value = null;
       editingCellId.value = null;
-      if (newValue !== oldValue) {
-        emit("cellEdit", { row, column, oldValue, newValue, rowIndex });
+      editingColumnKey.value = null;
+      writeCellValue(row, column, rowIndex, oldValue, newValue);
+    };
+    const cancelEdit = () => {
+      editError.value = null;
+      editingCellId.value = null;
+      editingColumnKey.value = null;
+    };
+    const rowMode = vue.computed(() => props.editConfig?.mode === "row");
+    const rowSessions = vue.ref(/* @__PURE__ */ new Map());
+    const rowEditing = vue.ref(null);
+    const rowEditorRefs = /* @__PURE__ */ new Map();
+    const currentRowFor = (k) => bodyData.value.find((r, i) => rowId(r, i) === k);
+    const beginRowEdit = (row, rowIndex, focusColKey) => {
+      const k = rowId(row, rowIndex);
+      const editableCols = leafColumns.value.filter((c) => c.editable);
+      if (editableCols.length === 0) return;
+      const sessions = /* @__PURE__ */ new Map();
+      for (const col of editableCols) {
+        const current = getCellValue(row, col);
+        sessions.set(cellId(k, col.key), {
+          draft: current == null ? "" : String(current),
+          error: null
+        });
+      }
+      rowSessions.value = sessions;
+      rowEditing.value = { k, idx: rowIndex };
+      const focusKey = focusColKey && editableCols.some((c) => c.key === focusColKey) ? focusColKey : editableCols[0].key;
+      void vue.nextTick(() => rowEditorRefs.get(focusKey)?.focus());
+    };
+    const commitRowSession = (k, column, rowIndex, id) => {
+      const session = rowSessions.value.get(id);
+      if (!session) return;
+      const row = currentRowFor(k);
+      if (!row) return;
+      const oldValue = getCellValue(row, column);
+      const draft = session.draft;
+      const newValue = column.editor === "number" ? draft === "" || Number.isNaN(Number(draft)) ? oldValue : Number(draft) : draft;
+      if (column.editRules && column.editRules.length > 0) {
+        const context = { rows: tableData.value, columnKey: column.key };
+        core.validateEditRulesAsync(column.editRules, draft, row, false, context).then((r) => {
+          if (!rowSessions.value.has(id)) return;
+          if (!r.valid) {
+            const s = rowSessions.value.get(id);
+            if (s) s.error = r.messages[0] ?? null;
+            return;
+          }
+          finishRowCommit(row, column, rowIndex, oldValue, newValue, id);
+        });
+        return;
+      }
+      if (column.validate) {
+        const error = column.validate(newValue, row);
+        if (error) {
+          const s = rowSessions.value.get(id);
+          if (s) s.error = error;
+          return;
+        }
+      }
+      finishRowCommit(row, column, rowIndex, oldValue, newValue, id);
+    };
+    const finishRowCommit = (row, column, rowIndex, oldValue, newValue, id) => {
+      rowSessions.value.delete(id);
+      if (rowSessions.value.size === 0) rowEditing.value = null;
+      writeCellValue(row, column, rowIndex, oldValue, newValue);
+    };
+    const cancelRowEdit = () => {
+      rowSessions.value = /* @__PURE__ */ new Map();
+      rowEditing.value = null;
+    };
+    const switchRowEdit = (row, rowIndex, focusColKey) => {
+      const editing = rowEditing.value;
+      if (editing !== null) {
+        for (const [id] of rowSessions.value) {
+          const colKey = id.slice(id.indexOf("::") + 2);
+          const col = leafColumns.value.find((c) => c.key === colKey);
+          if (!col) continue;
+          commitRowSession(editing.k, col, editing.idx, id);
+          if (rowSessions.value.get(id)?.error != null) return;
+        }
+      }
+      beginRowEdit(row, rowIndex, focusColKey);
+    };
+    const handleRowModeCellClick = (row, col, index, k) => {
+      if (rowEditing.value?.k === k) {
+        const id = cellId(k, col.key);
+        if (col.editable && !rowSessions.value.has(id)) {
+          const current = getCellValue(row, col);
+          rowSessions.value.set(id, {
+            draft: current == null ? "" : String(current),
+            error: null
+          });
+          void vue.nextTick(() => rowEditorRefs.get(col.key)?.focus());
+        }
+      } else {
+        switchRowEdit(row, index, col.key);
       }
     };
-    const cancelEdit = () => {
-      editError.value = null;
-      editingCellId.value = null;
+    const editorRenderContext = {
+      rowEditorRefs,
+      editorInputRef,
+      editingDraft,
+      editError,
+      commitEdit,
+      cancelEdit,
+      commitRowSession,
+      cancelRowEdit,
+      editPreview: props.editPreview,
+      previewValue: (row, col, draft) => {
+        const raw = col.editor === "number" ? draft === "" || Number.isNaN(Number(draft)) ? getCellValue(row, col) : Number(draft) : draft;
+        return col.formatter?.(core.applyTableMask(raw, col), row) ?? "";
+      }
     };
-    const internalWidths = vue.ref({});
+    const buildRowSessionContent = (row, col, index, k, editCellId, session) => renderRowSessionContent(editorRenderContext, row, col, index, k, editCellId, session);
+    const buildCellEditContent = (row, col, index, editCellId) => renderCellEditContent(editorRenderContext, row, col, index, editCellId);
+    const buildTreeIndent = (treeMeta, row) => vue.h(
+      "span",
+      {
+        "data-iris-table-tree-indent": "",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          flex: "none",
+          paddingLeft: `${treeMeta.depth * 16}px`
+        }
+      },
+      treeMeta.hasChildren || props.lazyLoad !== void 0 && !lazyChildren.value.has(treeMeta.key) ? [
+        vue.h(
+          "button",
+          {
+            type: "button",
+            "data-iris-table-tree-toggle": "",
+            "data-iris-tree-loading": lazyLoading.value.has(treeMeta.key) ? "" : void 0,
+            "aria-expanded": treeMeta.expanded ? "true" : "false",
+            "aria-label": t(treeMeta.expanded ? "treeSelect.collapse" : "treeSelect.expand"),
+            onClick: (e) => {
+              e.stopPropagation();
+              if (treeMeta.hasChildren) {
+                expansion.toggle(treeMeta.key);
+                return;
+              }
+              if (lazyLoading.value.has(treeMeta.key)) return;
+              lazyLoading.value = new Set(lazyLoading.value).add(treeMeta.key);
+              const clearLoading = () => {
+                const next = new Set(lazyLoading.value);
+                next.delete(treeMeta.key);
+                lazyLoading.value = next;
+              };
+              try {
+                const epoch = lazyEpoch;
+                props.lazyLoad(row, (children) => {
+                  if (epoch !== lazyEpoch) return;
+                  lazyChildren.value.set(treeMeta.key, children);
+                  if (children && children.length > 0) {
+                    expansion.toggle(treeMeta.key);
+                  }
+                  clearLoading();
+                });
+              } catch {
+                clearLoading();
+              }
+            },
+            style: {
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              padding: "0",
+              marginRight: "4px",
+              font: "inherit",
+              color: "var(--iris-foreground)",
+              transform: treeMeta.expanded ? "rotate(90deg)" : "none",
+              transition: "transform 150ms"
+            }
+          },
+          "\u25B6"
+        )
+      ] : [
+        vue.h("span", {
+          "aria-hidden": "true",
+          style: { display: "inline-block", width: "16px" }
+        })
+      ]
+    );
     vue.watch(
       () => leafColumns.value,
       (cols) => {
         const seeded = { ...internalWidths.value };
+        let changed = false;
         for (const col of cols) {
-          if (seeded[col.key] === void 0) seeded[col.key] = resolveInitialWidth(col);
+          if (seeded[col.key] === void 0) {
+            seeded[col.key] = resolveInitialWidth(col);
+            changed = true;
+          }
         }
-        internalWidths.value = seeded;
+        if (changed) internalWidths.value = seeded;
       },
       { immediate: true, deep: false }
     );
-    const effectiveWidths = vue.computed(() => {
-      if (props.columnWidths) return props.columnWidths;
-      return internalWidths.value;
-    });
     const setColumnWidths = (next) => {
       if (props.columnWidths === void 0) internalWidths.value = next;
       emit("update:columnWidths", next);
     };
     const onHeaderClick = (column) => {
-      cycleSort(column);
-    };
-    const sortIndicator = (col) => {
-      if (!col.sortable) return null;
-      const state = internalSort.value;
-      const isActive = state?.key === col.key;
-      const direction = isActive ? state.direction : null;
-      const color = isActive ? "var(--iris-primary)" : "var(--iris-muted)";
+      if (props.multiSort) cycleMultiSort(column);
+      else cycleSort(column);
+    };
+    const multiSortSeq = (col) => {
+      if (!props.multiSort) return null;
+      const idx = multiSortState.value.findIndex((s) => s.key === col.key);
+      if (idx <= 0) return null;
       return vue.h(
         "span",
         {
-          "aria-hidden": "true",
+          "data-iris-sort-seq": "",
           style: {
-            display: "inline-flex",
-            flexDirection: "column",
             marginInlineStart: "var(--iris-space-xxs, 4px)",
-            lineHeight: "0.6",
             fontSize: "var(--iris-font-size-xs, 12px)",
-            color
+            color: "var(--iris-muted)"
           }
         },
-        [
-          vue.h("span", { style: { opacity: direction === "asc" ? "1" : "0.45" } }, "\u25B2"),
-          vue.h("span", { style: { opacity: direction === "desc" ? "1" : "0.45" } }, "\u25BC")
-        ]
+        String(idx + 1)
       );
     };
+    const ariaSortFor = (col) => {
+      const state = props.multiSort ? multiSortState.value.find((s) => s.key === col.key) ?? null : internalSort.value;
+      if (state?.key === col.key) return state.direction === "asc" ? "ascending" : "descending";
+      return col.sortable ? "none" : void 0;
+    };
+    const sortIndicator = (col) => renderTableSortIndicator(col, {
+      multiSort: props.multiSort,
+      multiSortState: multiSortState.value,
+      sort: internalSort.value
+    });
+    const renderFilterTrigger = (col, leaf) => renderTableFilterTrigger({
+      column: col,
+      leaf,
+      active: (props.filterValues?.[col.key]?.length ?? 0) > 0,
+      open: filterPanelState.value?.open === true && filterPanelState.value.colKey === col.key,
+      label: t("table.filter"),
+      onOpen: openFilterPanel
+    });
+    const leadTrackCount = () => (props.rowDrag ? 1 : 0) + (props.seq ? 1 : 0) + (hasDetail.value ? 1 : 0) + (props.selectable !== "none" ? 1 : 0);
     const gridTemplate = vue.computed(() => {
       const parts = [];
+      if (props.rowDrag) parts.push(`${DRAG_COL_WIDTH}px`);
+      if (props.seq) parts.push(`${SEQ_COL_WIDTH}px`);
       if (hasDetail.value) parts.push(`${EXPAND_COL_WIDTH}px`);
       if (props.selectable !== "none") parts.push(`${SELECTION_COL_WIDTH}px`);
       for (const col of leafColumns.value) {
@@ -10979,70 +13309,45 @@ var IrisTable = vue.defineComponent({
         cellRangeState.value = s;
       })
     );
-    const isInRange = (row, col) => {
-      const { anchor, active } = cellRangeState.value;
-      if (!anchor || !active) return false;
-      const minRow = Math.min(anchor.row, active.row);
-      const maxRow = Math.max(anchor.row, active.row);
-      const minCol = Math.min(anchor.col, active.col);
-      const maxCol = Math.max(anchor.col, active.col);
-      return row >= minRow && row <= maxRow && col >= minCol && col <= maxCol;
-    };
     const rootRef = vue.ref(null);
+    let responsiveObserver = null;
+    const measureResponsiveWidth = () => {
+      responsiveWidth.value = props.responsive && rootRef.value ? rootRef.value.clientWidth : 0;
+    };
+    const updateResponsiveObserver = () => {
+      responsiveObserver?.disconnect();
+      responsiveObserver = null;
+      responsiveWidth.value = 0;
+      if (!props.responsive || !rootRef.value || typeof ResizeObserver === "undefined") return;
+      measureResponsiveWidth();
+      responsiveObserver = new ResizeObserver(measureResponsiveWidth);
+      responsiveObserver.observe(rootRef.value);
+    };
+    vue.onMounted(updateResponsiveObserver);
+    vue.watch(() => props.responsive, updateResponsiveObserver);
+    vue.onBeforeUnmount(() => {
+      responsiveObserver?.disconnect();
+      responsiveObserver = null;
+    });
+    const rowTarget = createTableRowTarget(() => rootRef.value);
+    const { scrollTo: scrollToRow, goTo: goToRow } = rowTarget;
+    vue.onBeforeUnmount(rowTarget.dispose);
     const focusedCell = vue.ref(null);
-    const GRID_NAV_KEYS = /* @__PURE__ */ new Set([
-      "ArrowUp",
-      "ArrowDown",
-      "ArrowLeft",
-      "ArrowRight",
-      "Home",
-      "End",
-      "PageUp",
-      "PageDown"
-    ]);
-    const handleGridKey = (e) => {
-      if (!props.keyboardNavigation || !GRID_NAV_KEYS.has(e.key)) return;
-      const target = e.target;
-      if (target.dataset.gridRow === void 0) return;
-      e.preventDefault();
-      const current = focusedCell.value ?? { row: 0, col: 0 };
-      const next = core.nextGridCell(current, e.key, {
-        rowCount: bodyData.value.length,
-        colCount: leafColumns.value.length,
-        pageSize: 10
-      });
-      focusedCell.value = next;
-      const cell = rootRef.value?.querySelector(
-        `[data-grid-row="${next.row}"][data-grid-col="${next.col}"]`
-      );
-      cell?.focus();
-    };
-    const CELL_RANGE_ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
-    const handleCellRangeKey = (e) => {
-      if (!props.cellRange) return;
-      if (e.key === "Escape") {
-        cellRangeCtrl.clearRange();
-        return;
-      }
-      if (!e.shiftKey || !CELL_RANGE_ARROW_KEYS.has(e.key)) return;
-      const target = e.target;
-      const rowAttr = target.dataset.irisCellRow;
-      const colAttr = target.dataset.irisCellCol;
-      if (rowAttr === void 0 || colAttr === void 0) return;
-      e.preventDefault();
-      const anchor = cellRangeCtrl.getState().anchor;
-      const active = anchor ? cellRangeCtrl.getState().active ?? { row: Number(rowAttr), col: Number(colAttr) } : { row: Number(rowAttr), col: Number(colAttr) };
-      let nextRow = active.row;
-      let nextCol = active.col;
-      if (e.key === "ArrowUp") nextRow = Math.max(0, nextRow - 1);
-      else if (e.key === "ArrowDown") nextRow = Math.min(bodyData.value.length - 1, nextRow + 1);
-      else if (e.key === "ArrowLeft") nextCol = Math.max(0, nextCol - 1);
-      else nextCol = Math.min(leafColumns.value.length - 1, nextCol + 1);
-      cellRangeCtrl.extendRange(nextRow, nextCol);
-    };
+    const keyboard = createTableKeyboard({
+      keyboardNavigation: () => props.keyboardNavigation,
+      cellRange: () => props.cellRange,
+      clipConfig: () => props.clipConfig,
+      rows: () => bodyData.value,
+      columns: () => leafColumns.value,
+      root: () => rootRef.value,
+      focused: focusedCell,
+      range: cellRangeCtrl,
+      rangeState: cellRangeState
+    });
+    const { handleRootKeyDown, isInRange, activeCellRange, copyActiveRange } = keyboard;
     const scrollLeft = vue.ref(0);
     const viewportWidth = vue.ref(0);
-    const colTrack = (i) => (hasDetail.value ? 1 : 0) + (props.selectable !== "none" ? 2 : 1) + i;
+    const colTrack = (i) => leadTrackCount() + 1 + i;
     if (typeof ResizeObserver !== "undefined") {
       let ro = null;
       vue.onMounted(() => {
@@ -11059,27 +13364,19 @@ var IrisTable = vue.defineComponent({
         ro = null;
       });
     }
-    const visibleColSet = vue.computed(() => {
-      if (!props.columnVirtualization) return null;
-      const cols = leafColumns.value;
-      const w = core.computeVirtualRange({
-        itemCount: cols.length,
-        scrollTop: scrollLeft.value,
-        viewportSize: viewportWidth.value,
-        itemSize: (i) => effectiveWidths.value[cols[i].key] ?? resolveInitialWidth(cols[i]),
-        buffer: 2
-      });
-      const set = /* @__PURE__ */ new Set();
-      for (let i = w.startIndex; i <= w.endIndex; i += 1) set.add(i);
-      cols.forEach((col, i) => {
-        if (col.pinned) set.add(i);
-      });
-      return set;
-    });
+    const visibleColSet = vue.computed(
+      () => computeVisibleColSet(
+        props.columnVirtualization,
+        leafColumns.value,
+        scrollLeft.value,
+        viewportWidth.value,
+        effectiveWidths.value
+      )
+    );
     const pinnedOffsets = vue.computed(() => {
       const map = {};
       const widthOf = (col) => effectiveWidths.value[col.key] ?? resolveInitialWidth(col);
-      let left = (hasDetail.value ? EXPAND_COL_WIDTH : 0) + (props.selectable !== "none" ? SELECTION_COL_WIDTH : 0);
+      let left = (props.rowDrag ? DRAG_COL_WIDTH : 0) + (props.seq ? SEQ_COL_WIDTH : 0) + (hasDetail.value ? EXPAND_COL_WIDTH : 0) + (props.selectable !== "none" ? SELECTION_COL_WIDTH : 0);
       for (const col of leafColumns.value) {
         if (col.pinned === "left") {
           map[col.key] = { side: "left", offset: left };
@@ -11135,126 +13432,449 @@ var IrisTable = vue.defineComponent({
         }
       });
     };
+    const pinnedDragHandle = createTablePinnedDrag({
+      enabled: () => props.pinnedDrag === true,
+      columns: () => leafColumns.value,
+      widthOf: (column) => effectiveWidths.value[column.key] ?? resolveInitialWidth(column),
+      onColumnPinnedChange: props.onColumnPinnedChange,
+      onPinnedCountChange: props.onPinnedCountChange
+    });
+    const rowDragCtrl = core.createSortable();
+    const rowDragState = vue.shallowRef(rowDragCtrl.getState());
+    vue.onBeforeUnmount(
+      rowDragCtrl.subscribe((s) => {
+        rowDragState.value = s;
+      })
+    );
+    const colDragCtrl = core.createSortable();
+    const colDragState = vue.shallowRef(colDragCtrl.getState());
+    vue.onBeforeUnmount(
+      colDragCtrl.subscribe((s) => {
+        colDragState.value = s;
+      })
+    );
+    const rowRectsRef = vue.ref([]);
+    const colRectsRef = vue.ref([]);
+    const handleRowDragPointerDown = (e, rowId2) => {
+      if (!props.rowDrag || e.button !== 0) return;
+      e.preventDefault();
+      rowDragCtrl.press(rowId2, e.clientX, e.clientY);
+    };
+    const handleRowDragPointerMove = (e) => {
+      if (!props.rowDrag) return;
+      if (rowDragCtrl.isPending()) {
+        const started = rowDragCtrl.tryStart(e.clientX, e.clientY);
+        if (started) {
+          const rects = [];
+          rootRef.value?.querySelectorAll("[data-iris-row-drag-handle]").forEach((el) => {
+            const r = el.getBoundingClientRect();
+            const id = el.getAttribute("data-iris-row-drag-handle");
+            if (id) rects.push({ id, left: r.left, top: r.top, width: r.width, height: r.height });
+          });
+          rowRectsRef.value = rects;
+        }
+      }
+      if (rowDragCtrl.getState().activeId !== null) {
+        rowDragCtrl.moveOver({ x: e.clientX, y: e.clientY }, rowRectsRef.value);
+      }
+    };
+    const handleRowDragPointerUp = () => {
+      if (!props.rowDrag) return;
+      if (rowDragCtrl.isPending()) {
+        rowDragCtrl.cancel();
+        return;
+      }
+      const { activeId, overId } = rowDragCtrl.end();
+      if (activeId !== null && overId !== null && activeId !== overId) {
+        const rows = [...bodyData.value];
+        const from = rows.findIndex((r, i) => String(rowId(r, i)) === activeId);
+        const to = rows.findIndex((r, i) => String(rowId(r, i)) === overId);
+        if (from >= 0 && to >= 0 && from !== to) {
+          const [moved] = rows.splice(from, 1);
+          rows.splice(to, 0, moved);
+          if (proxyCtrl.proxy.value) proxyCtrl.liveData.value = rows;
+          else localRowsOverride.value = rows;
+          props.onDataChange?.(rows);
+          props.rowDrag.onReorder(rows);
+        }
+      }
+      rowRectsRef.value = [];
+    };
+    const handleRowDragPointerLeave = () => {
+      if (props.rowDrag && rowDragCtrl.getState().activeId !== null) {
+        rowDragCtrl.cancel();
+      }
+    };
+    const handleColDragPointerDown = (e, colKey) => {
+      if (!props.columnDrag || e.button !== 0) return;
+      e.preventDefault();
+      e.stopPropagation();
+      colDragCtrl.press(colKey, e.clientX, e.clientY);
+    };
+    const handleColDragPointerMove = (e) => {
+      if (!props.columnDrag) return;
+      if (colDragCtrl.isPending()) {
+        const started = colDragCtrl.tryStart(e.clientX, e.clientY);
+        if (started) {
+          const rects = [];
+          rootRef.value?.querySelectorAll("[data-iris-table-header]").forEach((el) => {
+            const r = el.getBoundingClientRect();
+            const id = el.getAttribute("data-iris-table-header");
+            if (id) rects.push({ id, left: r.left, top: r.top, width: r.width, height: r.height });
+          });
+          colRectsRef.value = rects;
+        }
+      }
+      if (colDragCtrl.getState().activeId !== null) {
+        colDragCtrl.moveOver({ x: e.clientX, y: e.clientY }, colRectsRef.value);
+      }
+    };
+    const handleColDragPointerUp = () => {
+      if (!props.columnDrag) return;
+      if (colDragCtrl.isPending()) {
+        colDragCtrl.cancel();
+        return;
+      }
+      const { activeId, overId } = colDragCtrl.end();
+      if (activeId !== null && overId !== null && activeId !== overId) {
+        const next = [...leafColumns.value];
+        const from = next.findIndex((c) => c.key === activeId);
+        const to = next.findIndex((c) => c.key === overId);
+        if (from >= 0 && to >= 0 && from !== to) {
+          const [moved] = next.splice(from, 1);
+          next.splice(to, 0, moved);
+          props.columnDrag.onReorder(next);
+        }
+      }
+      colRectsRef.value = [];
+    };
+    const spanOccupy = /* @__PURE__ */ new Set();
+    const tableExpose = {
+      loadData: (rows) => {
+        if (proxyCtrl.proxy.value) proxyCtrl.liveData.value = rows;
+        else localRowsOverride.value = rows;
+        props.onDataChange?.(rows);
+      },
+      reloadData: () => {
+        void proxyCtrl.refetch();
+      },
+      commitProxy: (overrides) => {
+        proxyCtrl.setParams(overrides);
+      },
+      getProxyInfo: () => {
+        if (!proxyCtrl.proxy.value) return null;
+        const s = proxyCtrl.state.value;
+        return { page: s.params.page, pageSize: s.params.pageSize, total: s.total };
+      },
+      removeRows: (keys) => {
+        const { rows, removedKeys } = core.removeRowsFromList(tableData.value, props.rowKey, keys);
+        if (removedKeys.size === 0) return;
+        if (proxyCtrl.proxy.value) proxyCtrl.liveData.value = rows;
+        else localRowsOverride.value = rows;
+        const selected = displaySelection.value;
+        const nextSelection = selected.filter((key) => !removedKeys.has(key));
+        if (nextSelection.length !== selected.length) {
+          rebaseToProp();
+          selectionModel.set(nextSelection);
+        }
+        props.onDataChange?.(rows);
+      },
+      getFilteredData: () => [...bodyData.value],
+      exportCurrentViewCsv: () => exportCsv(bodyData.value, leafColumns.value),
+      exportMultiCsv: () => {
+        const current = exportCsv(bodyData.value, leafColumns.value);
+        const names = props.exportNames;
+        if (!names || names.length === 0) return current;
+        const segments = [`# current${current ? `
+${current}` : ""}`];
+        for (const entry of names) {
+          if (!entry.key) continue;
+          const refCsv = core.toCsvRows(entry.ref());
+          segments.push(`# ${entry.key}${refCsv ? `
+${refCsv}` : ""}`);
+        }
+        return segments.join("\n\n");
+      },
+      compareStates: core.compareStates,
+      scrollToRow,
+      goToRow
+    };
+    expose(tableExpose);
+    const buildFormSection = () => renderFormSection({
+      formConfig: props.formConfig,
+      t,
+      formDraft,
+      setFormValue,
+      handleFormSubmit,
+      handleFormReset
+    });
+    const buildToolbarSection = () => renderToolbarSection({
+      toolbar: props.toolbar,
+      selectable: props.selectable,
+      displaySelection,
+      proxyCtrl,
+      t,
+      importFileInput: importController.importFileInput,
+      onImportFile: importController.handleImportFile,
+      densityToggle: props.densityToggle,
+      effectiveDensity: effectiveDensity.value,
+      onDensityToggle: cycleDensity
+    });
+    const buildPagerSection = () => renderPagerSection({ proxyCtrl, proxyConfig: props.proxyConfig });
+    const contextMenuState = vue.ref(null);
+    const contextAnchorRef = vue.ref(null);
+    const contextMenuRef = vue.ref(null);
+    const closeContextMenu = () => {
+      if (contextMenuState.value) contextMenuState.value.open = false;
+    };
+    const handleContextMenu = (e, row, col, idx, ci) => {
+      if (!props.contextMenu) return;
+      e.preventDefault();
+      contextAnchorRef.value = {
+        getBoundingClientRect: () => ({
+          left: e.clientX,
+          top: e.clientY,
+          right: e.clientX,
+          bottom: e.clientY,
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          toJSON() {
+          }
+        })
+      };
+      const params = {
+        row,
+        column: col,
+        rowIndex: idx,
+        columnIndex: ci
+      };
+      contextMenuState.value = { open: true, items: props.contextMenu.items(params), params };
+    };
+    const contextMenuOpen = vue.computed(() => contextMenuState.value?.open === true);
+    const { floatingStyles: contextMenuStyles } = useFloating({
+      anchor: contextAnchorRef,
+      floating: contextMenuRef,
+      open: contextMenuOpen,
+      placement: "bottom-start",
+      // Cursor-anchored menu, vxe parity: with a zero-size anchor at the
+      // viewport edge, flip/shift would clamp the coordinates away from the
+      // cursor (React parity — deliberately disabled).
+      flip: false,
+      shift: false
+    });
+    useDismiss({
+      enabled: contextMenuOpen,
+      exclude: [contextMenuRef],
+      onDismiss: closeContextMenu
+    });
+    vue.watch(contextMenuOpen, (open) => {
+      if (typeof document === "undefined") return;
+      if (open) document.addEventListener("scroll", closeContextMenu, true);
+      else document.removeEventListener("scroll", closeContextMenu, true);
+    });
+    vue.onScopeDispose(() => {
+      if (typeof document === "undefined") return;
+      document.removeEventListener("scroll", closeContextMenu, true);
+    });
+    const buildContextMenuSection = () => renderContextMenuSection({
+      state: contextMenuState,
+      styles: contextMenuStyles,
+      menuRef: contextMenuRef,
+      close: closeContextMenu,
+      contextMenu: props.contextMenu
+    });
+    const filterPanelState = vue.ref(null);
+    const filterAnchorRef = vue.ref(null);
+    const filterPanelRef = vue.ref(null);
+    const filterDraft = vue.ref([]);
+    const closeFilterPanel = () => {
+      if (filterPanelState.value) filterPanelState.value.open = false;
+    };
+    const openFilterPanel = (e, colKey) => {
+      e.stopPropagation();
+      filterAnchorRef.value = e.currentTarget;
+      filterDraft.value = [...props.filterValues?.[colKey] ?? []];
+      filterPanelState.value = { open: true, colKey };
+    };
+    const filterPanelOpen = vue.computed(() => filterPanelState.value?.open === true);
+    const { floatingStyles: filterPanelStyles } = useFloating({
+      anchor: filterAnchorRef,
+      floating: filterPanelRef,
+      open: filterPanelOpen,
+      placement: "bottom-start"
+    });
+    useDismiss({
+      enabled: filterPanelOpen,
+      exclude: [filterPanelRef, filterAnchorRef],
+      onDismiss: closeFilterPanel
+    });
+    vue.watch(filterPanelOpen, (open) => {
+      if (typeof document === "undefined") return;
+      if (open) document.addEventListener("scroll", closeFilterPanel, true);
+      else document.removeEventListener("scroll", closeFilterPanel, true);
+    });
+    vue.onScopeDispose(() => {
+      if (typeof document === "undefined") return;
+      document.removeEventListener("scroll", closeFilterPanel, true);
+    });
+    const applyFilterValues = (colKey, values) => {
+      props.onFilterValuesChange?.({ ...props.filterValues ?? {}, [colKey]: values });
+    };
+    const clearFilterValues = (colKey) => {
+      const next = { ...props.filterValues ?? {} };
+      delete next[colKey];
+      props.onFilterValuesChange?.(next);
+    };
+    const toggleFilterDraft = (value) => {
+      filterDraft.value = filterDraft.value.includes(value) ? filterDraft.value.filter((v) => v !== value) : [...filterDraft.value, value];
+    };
+    const buildFilterPanelSection = () => renderFilterPanelSection({
+      state: filterPanelState,
+      styles: filterPanelStyles,
+      panelRef: filterPanelRef,
+      filterDraft,
+      columns: displayColumns.value,
+      filterValues: props.filterValues,
+      t,
+      close: closeFilterPanel,
+      toggle: toggleFilterDraft,
+      apply: applyFilterValues,
+      clear: clearFilterValues
+    });
     return () => {
       const showSelection = props.selectable !== "none";
       const showDetail = hasDetail.value;
-      const buildGroupedHeader = (matrix) => {
-        const lead = (showDetail ? 1 : 0) + (showSelection ? 1 : 0);
+      const showDrag = props.rowDrag !== void 0;
+      const showSeq = props.seq === true;
+      spanOccupy.clear();
+      const leadFlatHeaderCells = () => {
         const cells = [];
-        if (showDetail) {
+        if (showDrag) {
           cells.push(
             vue.h("div", {
-              key: "__expand__",
               role: "columnheader",
-              style: { gridColumn: "1", gridRow: "1 / -1" }
+              key: "__drag__",
+              "data-iris-table-header": "__drag",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "8px",
+                background: "var(--iris-surface)",
+                borderBottom: "1px solid var(--iris-border)"
+              }
             })
           );
         }
-        if (showSelection) {
+        if (showSeq) {
           cells.push(
-            vue.h(
-              "div",
-              {
-                key: "__select__",
-                role: "columnheader",
-                "data-iris-table-header": "",
-                style: {
-                  gridColumn: showDetail ? "2" : "1",
-                  gridRow: "1 / -1",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  padding: "8px 12px",
-                  background: "var(--iris-surface)",
-                  borderBottom: "1px solid var(--iris-border)"
-                }
-              },
-              props.selectable === "multi" ? [
-                [
-                  vue.h(IrisCheckbox, {
-                    modelValue: allSelected.value ? true : someSelected.value ? "indeterminate" : false,
-                    size: "sm",
-                    ariaLabel: t("table.selectAll"),
-                    "onUpdate:modelValue": toggleAll
-                  }),
-                  props.selection && props.selection.length > 0 ? vue.h(
-                    "span",
-                    {
-                      "data-iris-table-selected-count": "",
-                      style: {
-                        marginInlineStart: "var(--iris-space-xs, 8px)",
-                        fontSize: "var(--iris-font-size-sm, 13px)",
-                        color: "var(--iris-muted)",
-                        whiteSpace: "nowrap"
-                      }
-                    },
-                    t("table.selectedCount", { count: String(props.selection.length) })
-                  ) : null
-                ]
-              ] : ""
-            )
+            vue.h("div", {
+              role: "columnheader",
+              key: "__seq__",
+              "data-iris-table-header": "__seq",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "8px",
+                background: "var(--iris-surface)",
+                borderBottom: "1px solid var(--iris-border)"
+              }
+            })
           );
         }
-        for (const rowCells of matrix) {
-          for (const cell of rowCells) {
-            const col = cell.column;
-            const isLeaf = !col.children || col.children.length === 0;
-            const sortable = isLeaf && col.sortable;
-            const align = col.align ?? "left";
-            const headerSlot = slots[`header.${col.key}`];
-            const title = headerSlot?.({ column: col }) ?? col.title;
-            cells.push(
-              vue.h(
-                "div",
-                {
-                  key: `${col.key}-${cell.level}`,
-                  role: "columnheader",
-                  "data-iris-table-header": col.key,
-                  "data-iris-table-header-group": isLeaf ? void 0 : "",
-                  "aria-colspan": cell.colSpan,
-                  onClick: sortable ? () => onHeaderClick(col) : void 0,
-                  "aria-sort": sortable ? internalSort.value?.key === col.key ? internalSort.value.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
-                  style: {
-                    gridColumn: `${lead + cell.colStart} / span ${cell.colSpan}`,
-                    gridRow: `${cell.level + 1} / span ${cell.rowSpan}`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: isLeaf ? align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start" : "center",
-                    padding: "8px var(--iris-padding-md)",
-                    cursor: sortable ? "pointer" : "default",
-                    userSelect: sortable ? "none" : "auto",
-                    background: "var(--iris-surface)",
-                    borderBottom: "1px solid var(--iris-border)",
-                    fontWeight: "600",
-                    fontSize: "var(--iris-font-size-md, 14px)",
-                    color: "var(--iris-foreground)",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  }
-                },
-                [title, sortable ? sortIndicator(col) : null]
-              )
-            );
-          }
+        return cells;
+      };
+      const leadSummaryCells = () => {
+        const cells = [];
+        if (showDrag) {
+          cells.push(
+            vue.h("div", {
+              key: "__drag",
+              role: "cell",
+              "data-iris-table-cell": "__drag",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "8px 12px"
+              }
+            })
+          );
         }
-        return vue.h(
-          "div",
-          {
-            role: "row",
-            "data-iris-table-row": "header",
-            "data-iris-table-header-row": "",
-            "data-iris-table-header-grouped": "",
-            style: {
-              display: "grid",
-              gridTemplateColumns: gridTemplate.value,
-              gridTemplateRows: `repeat(${matrix.length}, auto)`
-            }
-          },
-          cells
-        );
+        if (showSeq) {
+          cells.push(
+            vue.h("div", {
+              key: "__seq",
+              role: "cell",
+              "data-iris-table-cell": "__seq",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "8px 12px"
+              }
+            })
+          );
+        }
+        if (showDetail) {
+          cells.push(
+            vue.h("div", {
+              key: "__expand",
+              role: "cell",
+              "data-iris-table-cell": "__expand",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "8px 12px"
+              }
+            })
+          );
+        }
+        if (showSelection) {
+          cells.push(
+            vue.h("div", {
+              key: "__selection",
+              role: "cell",
+              "data-iris-table-cell": "__selection",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "8px 12px"
+              }
+            })
+          );
+        }
+        return cells;
       };
-      const headerCells = [];
+      const buildGroupedHeader = (matrix) => renderGroupedHeader(
+        {
+          showDrag,
+          showSeq,
+          showDetail,
+          showSelection,
+          selectable: props.selectable,
+          selection: props.selection,
+          allSelected,
+          someSelected,
+          toggleAll,
+          t,
+          slots,
+          onHeaderClick,
+          ariaSortFor,
+          sortIndicator,
+          multiSortSeq,
+          renderFilterTrigger,
+          pinnedDragHandle,
+          gridTemplate
+        },
+        matrix
+      );
+      const headerCells = leadFlatHeaderCells();
       if (showDetail) {
         headerCells.push(
           vue.h("div", {
@@ -11299,14 +13919,15 @@ var IrisTable = vue.defineComponent({
           )
         );
       }
-      for (let ci = 0; ci < props.columns.length; ci += 1) {
-        const col = props.columns[ci];
+      for (let ci = 0; ci < leafColumns.value.length; ci += 1) {
+        const col = leafColumns.value[ci];
         if (visibleColSet.value && !visibleColSet.value.has(ci)) continue;
         const align = col.align ?? "left";
         const headerSlot = slots[`header.${col.key}`];
         const title = headerSlot?.({ column: col }) ?? col.title;
         wireResize(col);
-        const handle = props.resizableColumns ? vue.h("span", {
+        const pinnedHandle = pinnedDragHandle(col);
+        const handle = props.resizableColumns && !pinnedHandle ? vue.h("span", {
           ref: (el) => {
             getHandleRef(col.key).value = el ?? null;
           },
@@ -11350,6 +13971,13 @@ var IrisTable = vue.defineComponent({
               role: "columnheader",
               "data-iris-table-header": col.key,
               "data-iris-table-pinned": col.pinned,
+              // Column drag-sort (vxe columnDragConfig parity, batch Y): the
+              // header cell is the press target; grouped headers are NOT
+              // supported (documented simplification — the reorder maps leaf
+              // columns back to the parent, which a group column cannot do).
+              "data-iris-col-drag-active": props.columnDrag && colDragState.value.activeId === col.key ? "true" : void 0,
+              "data-iris-col-drag-over": props.columnDrag && colDragState.value.overId === col.key ? "true" : void 0,
+              onPointerdown: props.columnDrag && !grouped.value ? (e) => handleColDragPointerDown(e, col.key) : void 0,
               onClick: () => onHeaderClick(col),
               style: {
                 position: "relative",
@@ -11370,9 +13998,16 @@ var IrisTable = vue.defineComponent({
                 ...visibleColSet.value ? { gridColumnStart: String(colTrack(ci)) } : {},
                 ...col.pinned ? { ...pinnedStyle(col.key), background: "var(--iris-surface)" } : {}
               },
-              "aria-sort": internalSort.value?.key === col.key ? internalSort.value.direction === "asc" ? "ascending" : "descending" : col.sortable ? "none" : void 0
+              "aria-sort": ariaSortFor(col)
             },
-            [title, sortIndicator(col), handle]
+            [
+              title,
+              sortIndicator(col),
+              multiSortSeq(col),
+              renderFilterTrigger(col, true),
+              pinnedHandle,
+              handle
+            ]
           )
         );
       }
@@ -11392,6 +14027,69 @@ var IrisTable = vue.defineComponent({
         const id = rowId(row, index);
         const selected = isSelected(id);
         const cells = [];
+        if (showDrag) {
+          const rowDragActive = rowDragState.value.activeId === String(id);
+          const rowDragOver = rowDragState.value.overId === String(id);
+          cells.push(
+            vue.h(
+              "div",
+              {
+                key: "__drag",
+                role: "cell",
+                "data-iris-table-cell": "__drag",
+                // The drag handle carries the row's id as its attribute VALUE
+                // (rect collection for closestCenter reads it back).
+                "data-iris-row-drag-handle": String(id),
+                "data-iris-row-drag-active": rowDragActive ? "true" : void 0,
+                "data-iris-row-drag-over": rowDragOver ? "true" : void 0,
+                onPointerdown: (e) => handleRowDragPointerDown(e, String(id)),
+                onClick: (e) => e.stopPropagation(),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "8px 12px",
+                  borderBottom: "1px solid var(--iris-border)",
+                  cursor: "grab",
+                  color: "var(--iris-muted)",
+                  background: rowDragActive ? "var(--iris-surface-hover)" : rowDragOver ? "var(--iris-surface-selected, rgba(99,102,241,0.12))" : "transparent"
+                }
+              },
+              [
+                vue.h(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: { fontSize: "var(--iris-font-size-sm, 13px)" }
+                  },
+                  "\u283F"
+                )
+              ]
+            )
+          );
+        }
+        if (showSeq) {
+          cells.push(
+            vue.h(
+              "div",
+              {
+                key: "__seq",
+                role: "cell",
+                "data-iris-table-cell": "__seq",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "8px 12px",
+                  borderBottom: "1px solid var(--iris-border)",
+                  color: "var(--iris-muted)",
+                  userSelect: "none"
+                }
+              },
+              String(index + props.seqStartIndex)
+            )
+          );
+        }
         if (showDetail) {
           const rowExpandable = isRowExpandable(row, index);
           const isExpanded = expandedKeys.value.includes(String(id));
@@ -11468,115 +14166,30 @@ var IrisTable = vue.defineComponent({
         for (let ci = 0; ci < leafColumns.value.length; ci += 1) {
           const col = leafColumns.value[ci];
           if (visibleColSet.value && !visibleColSet.value.has(ci)) continue;
+          const span = resolveSpan(spanOccupy, index, ci, props.spanMethod);
+          if (span === null) continue;
+          const rowspan = span.rowspan;
+          const colspan = span.colspan;
           const align = col.align ?? "left";
           const cellSlot = slots[`cell.${col.key}`];
-          const isEditing = editingCellId.value === cellId(id, col.key);
+          const isRowEditing = rowMode.value && rowEditing.value !== null && rowEditing.value.k === id && rowSessions.value.has(cellId(id, col.key));
+          const isEditing = isRowEditing || editingCellId.value === cellId(id, col.key);
+          const patternHint = (props.pattern || props.patternFill) && !rowMode.value && editingColumnKey.value === col.key && !isEditing && editingDraft.value !== "" && String(getCellValue(row, col) ?? "") === editingDraft.value;
           let content;
           if (isEditing) {
             const editCellId = cellId(id, col.key);
-            const error = editError.value;
-            const input = vue.h("input", {
-              ref: (el) => {
-                editorInputRef.value = el ?? null;
-              },
-              type: col.editor === "number" ? "number" : "text",
-              value: editingDraft.value,
-              "data-iris-table-editor": "",
-              "aria-invalid": error ? "true" : void 0,
-              "aria-describedby": error ? `${editCellId}-error` : void 0,
-              onInput: (e) => {
-                editingDraft.value = e.target.value;
-              },
-              onKeydown: (e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  commitEdit(row, col, index);
-                } else if (e.key === "Escape") {
-                  e.preventDefault();
-                  cancelEdit();
-                }
-              },
-              onBlur: () => commitEdit(row, col, index),
-              onClick: (e) => e.stopPropagation(),
-              onDblclick: (e) => e.stopPropagation(),
-              style: {
-                width: "100%",
-                border: `1px solid ${error ? "var(--iris-danger)" : "var(--iris-primary)"}`,
-                borderRadius: "var(--iris-radius-sm)",
-                padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)",
-                font: "inherit",
-                background: "var(--iris-background)",
-                color: "var(--iris-foreground)",
-                outline: "none",
-                boxShadow: "0 0 0 3px color-mix(in srgb, var(--iris-primary) 18%, transparent)"
-              }
-            });
-            content = error ? [
-              input,
-              vue.h(
-                "div",
-                {
-                  id: `${editCellId}-error`,
-                  role: "alert",
-                  "data-iris-table-editor-error": "",
-                  style: {
-                    marginTop: "var(--iris-space-xxs, 4px)",
-                    fontSize: "var(--iris-font-size-xs, 12px)",
-                    color: "var(--iris-danger)"
-                  }
-                },
-                error
-              )
-            ] : input;
+            content = isRowEditing ? buildRowSessionContent(
+              row,
+              col,
+              index,
+              id,
+              editCellId,
+              rowSessions.value.get(editCellId)
+            ) : buildCellEditContent(row, col, index, editCellId);
           } else {
-            content = cellSlot?.({ row, index, value: getCellValue2(row, col) }) ?? String(getCellValue2(row, col) ?? "");
+            content = cellSlot?.({ row, index, value: getCellValue(row, col) }) ?? core.tableDisplayText(row, col);
           }
-          const treeIndent = treeMeta && ci === 0 ? vue.h(
-            "span",
-            {
-              "data-iris-table-tree-indent": "",
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                flex: "none",
-                paddingLeft: `${treeMeta.depth * 16}px`
-              }
-            },
-            treeMeta.hasChildren ? [
-              vue.h(
-                "button",
-                {
-                  type: "button",
-                  "data-iris-table-tree-toggle": "",
-                  "aria-expanded": treeMeta.expanded ? "true" : "false",
-                  "aria-label": t(
-                    treeMeta.expanded ? "treeSelect.collapse" : "treeSelect.expand"
-                  ),
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    expansion.toggle(treeMeta.key);
-                  },
-                  style: {
-                    border: "none",
-                    background: "transparent",
-                    cursor: "pointer",
-                    padding: "0",
-                    marginRight: "4px",
-                    font: "inherit",
-                    color: "var(--iris-foreground)",
-                    transform: treeMeta.expanded ? "rotate(90deg)" : "none",
-                    transition: "transform 150ms"
-                  }
-                },
-                "\u25B6"
-              )
-            ] : [
-              vue.h("span", {
-                "aria-hidden": "true",
-                style: { display: "inline-block", width: "16px" }
-              })
-            ]
-          ) : null;
+          const treeIndent = treeMeta && ci === 0 ? buildTreeIndent(treeMeta, row) : null;
           const cellChildren = treeIndent ? [treeIndent, ...Array.isArray(content) ? content : [content]] : content;
           cells.push(
             vue.h(
@@ -11588,6 +14201,7 @@ var IrisTable = vue.defineComponent({
                 "data-iris-table-pinned": col.pinned,
                 "data-editable": col.editable ? "" : void 0,
                 "data-editing": isEditing ? "" : void 0,
+                "data-iris-input-hint": patternHint ? "true" : void 0,
                 // Grid keyboard navigation (opt-in): grid coords + roving tabindex
                 // (exactly one cell is 0) + an onFocus that syncs the focused cell.
                 ...props.keyboardNavigation ? {
@@ -11611,14 +14225,19 @@ var IrisTable = vue.defineComponent({
                     }
                   }
                 } : {},
-                onDblclick: col.editable ? () => beginEdit(row, col, id) : void 0,
-                onClick: col.editable && props.editConfig?.trigger === "click" ? () => beginEdit(row, col, id) : void 0,
+                onDblclick: rowMode.value ? () => switchRowEdit(row, index, col.key) : col.editable ? () => beginEdit(row, col, id) : void 0,
+                onClick: rowMode.value ? () => handleRowModeCellClick(row, col, index, id) : props.cellRange ? (e) => {
+                  if (e.shiftKey) cellRangeCtrl.extendRange(index, ci);
+                  else cellRangeCtrl.startRange(index, ci);
+                } : col.editable && props.editConfig?.trigger === "click" ? () => beginEdit(row, col, id) : void 0,
+                onContextmenu: props.contextMenu ? (e) => handleContextMenu(e, row, col, index, ci) : void 0,
                 style: {
                   display: "flex",
                   alignItems: "center",
                   justifyContent: align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start",
                   background: "var(--iris-cell-bg, transparent)",
                   padding: isEditing ? "var(--iris-space-xxs, 4px)" : "var(--iris-space-xs, 8px) var(--iris-padding-md)",
+                  ...isEditing ? { flexWrap: "wrap" } : {},
                   borderBottom: "1px solid var(--iris-border)",
                   fontSize: "var(--iris-font-size-md, 14px)",
                   whiteSpace: "nowrap",
@@ -11627,6 +14246,11 @@ var IrisTable = vue.defineComponent({
                   cursor: col.editable ? "cell" : "default",
                   ...props.cellRange && isInRange(index, ci) ? { background: "var(--iris-surface-selected, rgba(99,102,241,0.12))" } : {},
                   ...visibleColSet.value ? { gridColumnStart: String(colTrack(ci)) } : {},
+                  ...colspan > 1 ? { gridColumnEnd: `span ${colspan}` } : {},
+                  ...rowspan > 1 ? { gridRowEnd: `span ${rowspan}` } : {},
+                  ...patternHint ? {
+                    backgroundImage: "linear-gradient(var(--iris-input-hint, rgba(251, 191, 36, 0.16)), var(--iris-input-hint, rgba(251, 191, 36, 0.16)))"
+                  } : {},
                   ...pinnedStyle(col.key)
                 }
               },
@@ -11648,6 +14272,8 @@ var IrisTable = vue.defineComponent({
             "aria-setsize": treeMeta ? treeMeta.setSize : void 0,
             "aria-posinset": treeMeta ? treeMeta.posInset : void 0,
             "data-iris-table-row": "",
+            "data-iris-table-row-key": String(id),
+            "data-iris-row-editing": rowMode.value && rowEditing.value?.k === id ? "true" : void 0,
             "data-state": selected ? "selected" : void 0,
             onClick: () => emit("rowClick", row, index),
             onDblclick: () => emit("rowDblclick", row, index),
@@ -11668,50 +14294,21 @@ var IrisTable = vue.defineComponent({
         textAlign: "center",
         color: "var(--iris-muted)"
       };
+      const stateNode = renderTableStateRow({
+        error: tableError.value,
+        loading: tableLoading.value,
+        rowCount: bodyData.value.length,
+        stateRowStyle,
+        errorContent: slots.error ? slots.error() : t("table.error"),
+        loadingContent: slots.loading ? slots.loading() : t("table.loading"),
+        emptyContent: slots.empty ? slots.empty() : t("table.empty"),
+        retry: retry.value,
+        onRetry: props.onRetry,
+        retryLabel: t("table.retry")
+      });
       let bodyNode;
-      if (props.error) {
-        bodyNode = vue.h("div", { role: "row", "data-iris-table-row": "error", style: stateRowStyle }, [
-          vue.h(
-            "span",
-            { style: { marginInlineEnd: props.onRetry ? "var(--iris-space-sm, 12px)" : "0px" } },
-            slots.error ? slots.error() : t("table.error")
-          ),
-          props.onRetry ? vue.h(
-            "button",
-            {
-              type: "button",
-              "data-iris-table-retry": "",
-              onClick: props.onRetry,
-              style: {
-                border: "1px solid var(--iris-border)",
-                background: "var(--iris-surface)",
-                color: "var(--iris-foreground)",
-                borderRadius: "var(--iris-radius-sm, 4px)",
-                padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
-                fontSize: "var(--iris-font-size-sm, 13px)",
-                cursor: "pointer"
-              }
-            },
-            t("table.retry")
-          ) : null
-        ]);
-      } else if (props.loading) {
-        bodyNode = vue.h(
-          "div",
-          {
-            role: "row",
-            "aria-busy": "true",
-            "data-iris-table-row": "loading",
-            style: stateRowStyle
-          },
-          slots.loading ? slots.loading() : t("table.loading")
-        );
-      } else if (bodyData.value.length === 0) {
-        bodyNode = vue.h(
-          "div",
-          { role: "row", "data-iris-table-row": "empty", style: stateRowStyle },
-          slots.empty ? slots.empty() : t("table.empty")
-        );
+      if (stateNode) {
+        bodyNode = stateNode;
       } else if (props.virtualScroll && (!treeMode.value || !hasDetail.value)) {
         bodyNode = vue.h(
           IrisVirtualScroll,
@@ -11775,127 +14372,105 @@ var IrisTable = vue.defineComponent({
           bodyChildren
         );
       }
-      let summaryRow = null;
-      if (!props.error && !props.loading && bodyData.value.length > 0 && leafColumns.value.some((c) => c.summary)) {
-        const summaryCells = [];
-        if (showSelection) {
-          summaryCells.push(
-            vue.h("div", {
-              key: "__selection",
-              role: "cell",
-              "data-iris-table-cell": "__selection",
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: "8px 12px"
-              }
-            })
-          );
-        }
-        for (let ci = 0; ci < leafColumns.value.length; ci += 1) {
-          const col = leafColumns.value[ci];
-          if (visibleColSet.value && !visibleColSet.value.has(ci)) continue;
-          const align = col.align ?? "left";
-          const op = col.summary;
-          const value = op ? core.aggregate(bodyData.value, (r) => getCellValue2(r, col), op) : null;
-          const summaryContent = op != null && value != null ? col.renderSummary ? col.renderSummary(value, bodyData.value) : String(value) : "";
-          summaryCells.push(
-            vue.h(
-              "div",
-              {
-                key: col.key,
-                role: "cell",
-                "data-iris-table-cell": col.key,
-                "data-iris-table-summary-cell": op ? "" : void 0,
-                "data-iris-table-pinned": col.pinned,
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start",
-                  padding: "var(--iris-space-xs, 8px) var(--iris-padding-md)",
-                  fontSize: "var(--iris-font-size-md, 14px)",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  ...visibleColSet.value ? { gridColumnStart: String(colTrack(ci)) } : {},
-                  ...pinnedStyle(col.key)
-                }
-              },
-              summaryContent
-            )
-          );
-        }
-        summaryRow = vue.h(
+      const summaryRow = !tableError.value && !tableLoading.value ? renderTableSummaryRow({
+        bodyData: bodyData.value,
+        leafColumns: leafColumns.value,
+        visibleColSet: visibleColSet.value,
+        gridTemplate: gridTemplate.value,
+        leadingCells: leadSummaryCells(),
+        colTrack,
+        getCellValue,
+        pinnedStyle
+      }) : null;
+      const rootNodes = [
+        tableViews.renderTabs(props.tableTabs),
+        tableViews.renderViews(),
+        buildFormSection(),
+        buildToolbarSection(),
+        props.clipConfig && props.clipConfig.copy !== false && activeCellRange() ? vue.h(
+          "button",
+          { type: "button", "data-iris-table-range-copy": "", onClick: copyActiveRange },
+          t("table.range.copy")
+        ) : null,
+        renderImportPreviewSection({
+          rows: importController.importPreviewRows.value,
+          t,
+          onConfirm: importController.confirmImportPreview,
+          onCancel: importController.cancelImportPreview
+        }),
+        vue.h(
           "div",
           {
-            role: "row",
-            "data-iris-table-row": "summary",
+            ...attrs,
+            ref: (el) => {
+              rootRef.value = el ?? null;
+            },
+            // A keyboard-navigable hierarchical table is a `treegrid`; otherwise the
+            // grid/table role as before (treegrid implies managed cell focus).
+            role: props.keyboardNavigation ? treeMode.value ? "treegrid" : "grid" : "table",
+            "data-iris-table": "",
+            "data-density": effectiveDensity.value,
+            "data-printable": props.printable ? "true" : void 0,
+            "data-virtual": props.virtualScroll ? "" : void 0,
+            "data-column-virtualized": props.columnVirtualization ? "true" : void 0,
+            onKeydown: props.keyboardNavigation || props.cellRange || props.clipConfig ? (e) => handleRootKeyDown(e) : void 0,
+            onScroll: props.columnVirtualization ? (e) => {
+              scrollLeft.value = e.currentTarget.scrollLeft;
+            } : void 0,
+            // Row/column drag-sort (batch Y): container-level pointer handling
+            // for both reorders (React parity) — press happens on the row
+            // handle / header cell, move/up resolve at the container.
+            onPointermove: props.rowDrag || props.columnDrag ? (e) => {
+              handleRowDragPointerMove(e);
+              handleColDragPointerMove(e);
+            } : void 0,
+            onPointerup: props.rowDrag || props.columnDrag ? () => {
+              handleRowDragPointerUp();
+              handleColDragPointerUp();
+            } : void 0,
+            onPointerleave: props.rowDrag ? handleRowDragPointerLeave : void 0,
             style: {
-              display: "grid",
-              gridTemplateColumns: gridTemplate.value,
-              fontWeight: "600",
-              borderTop: "2px solid var(--iris-border)",
-              background: "var(--iris-surface)"
+              background: "var(--iris-background)",
+              color: "var(--iris-foreground)",
+              fontSize: "var(--iris-font-size-md, 14px)",
+              border: props.bordered ? "1px solid var(--iris-border)" : "none",
+              borderRadius: "var(--iris-radius-md)",
+              // Column virtualization and responsive overflow turn the table
+              // into a horizontal scroll container.
+              overflow: props.columnVirtualization || responsiveOverflow.value ? "auto" : "hidden",
+              ...responsiveOverflow.value ? { overflowX: "auto" } : {},
+              ...attrs.style ?? {}
             }
           },
-          summaryCells
-        );
-      }
-      return vue.h(
-        "div",
-        {
-          ...attrs,
-          ref: (el) => {
-            rootRef.value = el ?? null;
+          [headerRow, bodyNode, summaryRow, buildPagerSection()]
+        ),
+        props.responsive && responsiveOverflow.value && !props.printable ? vue.h(
+          "div",
+          {
+            "data-iris-scroll-hint": "",
+            role: "status",
+            "aria-live": "polite",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "var(--iris-space-xxs, 4px)",
+              padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+              color: "var(--iris-muted)",
+              background: "var(--iris-surface)",
+              borderInline: "1px solid var(--iris-border)",
+              borderBottom: "1px solid var(--iris-border)",
+              fontSize: "var(--iris-font-size-sm, 13px)"
+            }
           },
-          // A keyboard-navigable hierarchical table is a `treegrid`; otherwise the
-          // grid/table role as before (treegrid implies managed cell focus).
-          role: props.keyboardNavigation ? treeMode.value ? "treegrid" : "grid" : "table",
-          "data-iris-table": "",
-          "data-virtual": props.virtualScroll ? "" : void 0,
-          "data-column-virtualized": props.columnVirtualization ? "true" : void 0,
-          onKeydown: props.keyboardNavigation || props.cellRange ? (e) => {
-            if (props.keyboardNavigation) handleGridKey(e);
-            if (props.cellRange) handleCellRangeKey(e);
-          } : void 0,
-          onScroll: props.columnVirtualization ? (e) => {
-            scrollLeft.value = e.currentTarget.scrollLeft;
-          } : void 0,
-          style: {
-            background: "var(--iris-background)",
-            color: "var(--iris-foreground)",
-            fontSize: "var(--iris-font-size-md, 14px)",
-            border: props.bordered ? "1px solid var(--iris-border)" : "none",
-            borderRadius: "var(--iris-radius-md)",
-            // Column virtualization turns the table into a horizontal scroll container.
-            overflow: props.columnVirtualization ? "auto" : "hidden",
-            ...attrs.style ?? {}
-          }
-        },
-        [headerRow, bodyNode, summaryRow]
-      );
+          [vue.h("span", { "aria-hidden": "true" }, "\u21C6"), vue.h("span", t("table.scrollHint"))]
+        ) : null,
+        buildContextMenuSection(),
+        buildFilterPanelSection()
+      ].filter((n) => n !== null);
+      return rootNodes.length === 1 ? rootNodes[0] : rootNodes;
     };
   }
 });
-function exportCsv(rows, columns) {
-  return core.toCsv(
-    rows,
-    columns.map((column) => ({
-      key: column.key,
-      title: column.title,
-      dataIndex: typeof column.dataIndex === "string" ? column.dataIndex : void 0
-    }))
-  );
-}
-async function downloadCsv(filename, csv) {
-  const BOM = String.fromCharCode(65279);
-  await core.downloadFile({
-    filename,
-    content: BOM + csv,
-    mimeType: "text/csv;charset=utf-8;"
-  });
-}
 function exportExcel(rows, columns, options) {
   return core.toSpreadsheetXml(
     rows,
@@ -11916,7 +14491,7 @@ async function downloadExcel(filename, xml) {
 }
 
 // src/primitives/tabs/context.ts
-var TabsContextKey = /* @__PURE__ */ Symbol("IrisTabs");
+var TabsContextKey = Symbol("IrisTabs");
 
 // src/primitives/tabs/Tabs.ts
 var IrisTabs = vue.defineComponent({
@@ -12216,7 +14791,7 @@ var IrisTabsContent = vue.defineComponent({
 });
 
 // src/primitives/menu/context.ts
-var MenuContextKey = /* @__PURE__ */ Symbol("IrisMenu");
+var MenuContextKey = Symbol("IrisMenu");
 
 // src/primitives/menu/Menu.ts
 var IrisMenu = vue.defineComponent({
@@ -13063,6 +15638,29 @@ var TREE_STATE_STYLE = {
   color: "var(--iris-muted)",
   fontSize: "var(--iris-font-size-md, 14px)"
 };
+function renderTreeState({
+  state,
+  stateKey,
+  stateProps,
+  slots,
+  translate
+}) {
+  const content = state === "error" ? slots.error ? slots.error() : translate("tree.error") : state === "loading" ? slots.loading ? slots.loading() : translate("tree.loading") : slots.empty ? slots.empty() : translate("tree.empty");
+  return vue.h(
+    "div",
+    {
+      key: stateKey,
+      role: "presentation",
+      "data-iris-tree-state": state,
+      "aria-live": "polite",
+      ...stateProps,
+      style: TREE_STATE_STYLE
+    },
+    content
+  );
+}
+
+// src/primitives/tree/Tree.ts
 var IrisTree = vue.defineComponent({
   name: "IrisTree",
   inheritAttrs: false,
@@ -13292,21 +15890,6 @@ var IrisTree = vue.defineComponent({
           break;
       }
     }
-    const renderStateNode = () => {
-      const content = state.value === "error" ? slots.error ? slots.error() : t("tree.error") : state.value === "loading" ? slots.loading ? slots.loading() : t("tree.loading") : slots.empty ? slots.empty() : t("tree.empty");
-      return vue.h(
-        "div",
-        {
-          key: stateKey.value,
-          role: "presentation",
-          "data-iris-tree-state": state.value,
-          "aria-live": "polite",
-          ...stateProps.value,
-          style: TREE_STATE_STYLE
-        },
-        content
-      );
-    };
     const renderItems = () => {
       void checkedKeys.value;
       return flat.value.map((entry) => {
@@ -13439,7 +16022,15 @@ var IrisTree = vue.defineComponent({
           ...attrs.style ?? {}
         }
       },
-      isContent.value ? renderItems() : [renderStateNode()]
+      isContent.value ? renderItems() : [
+        renderTreeState({
+          state: state.value,
+          stateKey: stateKey.value,
+          stateProps: stateProps.value,
+          slots,
+          translate: t
+        })
+      ]
     );
   }
 });
@@ -18672,12 +21263,12 @@ function defaultFilter(query, item) {
   if (!q) return 0;
   const haystacks = [item.label, ...item.keywords ?? []].map((s) => s.toLowerCase());
   let best = null;
-  for (const h124 of haystacks) {
+  for (const h136 of haystacks) {
     let qi = 0;
     let lastIdx = -1;
     let score = 0;
-    for (let i = 0; i < h124.length && qi < q.length; i += 1) {
-      if (h124[i] === q[qi]) {
+    for (let i = 0; i < h136.length && qi < q.length; i += 1) {
+      if (h136[i] === q[qi]) {
         score += lastIdx === -1 ? i : i - lastIdx - 1;
         lastIdx = i;
         qi += 1;
@@ -19043,8 +21634,8 @@ var IrisTimePicker = vue.defineComponent({
       if (props.format === "24h") {
         return { h: value.value.hours, m: value.value.minutes };
       }
-      const h124 = value.value.hours % 12 === 0 ? 12 : value.value.hours % 12;
-      return { h: h124, m: value.value.minutes };
+      const h1210 = value.value.hours % 12 === 0 ? 12 : value.value.hours % 12;
+      return { h: h1210, m: value.value.minutes };
     });
     const emitNew = (next) => {
       emit("update:modelValue", next);
@@ -19060,16 +21651,16 @@ var IrisTimePicker = vue.defineComponent({
     };
     const toggleMeridiem = () => {
       const isPM = meridiem.value === "PM";
-      const h124 = value.value.hours % 12;
-      const newH24 = isPM ? h124 : h124 + 12;
+      const h1210 = value.value.hours % 12;
+      const newH24 = isPM ? h1210 : h1210 + 12;
       emitNew({ hours: newH24, minutes: value.value.minutes });
     };
     const onHoursInput = (e) => {
       const v = parseInt(e.target.value || "0", 10);
       if (Number.isNaN(v)) return;
       if (props.format === "12h") {
-        const h124 = clamp5(v, 1, 12);
-        const wrap = h124 === 12 ? 0 : h124;
+        const h1210 = clamp5(v, 1, 12);
+        const wrap = h1210 === 12 ? 0 : h1210;
         const newH24 = meridiem.value === "PM" ? wrap + 12 : wrap;
         setHours24(newH24);
       } else {
@@ -20590,6 +23181,10 @@ Object.defineProperty(exports, "nodeAllowsRoles", {
   enumerable: true,
   get: function () { return core.nodeAllowsRoles; }
 });
+Object.defineProperty(exports, "parseCsv", {
+  enumerable: true,
+  get: function () { return core.parseCsv; }
+});
 Object.defineProperty(exports, "rgbToHex", {
   enumerable: true,
   get: function () { return core.rgbToHex; }