@iris-ui-kit/vue 0.1.0

package/dist/admin.cjs

@@ -0,0 +1,1869 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@iris-ui-kit/core');
+var icons = require('@iris-ui-kit/icons');
+var theme = require('@iris-ui-kit/theme');
+var dom = require('@floating-ui/dom');
+
+// src/admin/AdminLayout.ts
+var IrisSidebarLayout = vue.defineComponent({
+  name: "IrisSidebarLayout",
+  inheritAttrs: false,
+  props: {
+    collapsed: { type: Boolean, default: void 0 },
+    defaultCollapsed: { type: Boolean, default: false },
+    /** Sidebar width when expanded (px or CSS length). */
+    width: { type: [Number, String], default: 240 },
+    /** Sidebar width when collapsed. */
+    collapsedWidth: { type: [Number, String], default: 60 },
+    /** Sidebar position. */
+    side: { type: String, default: "left" }
+  },
+  emits: {
+    "update:collapsed": (_value) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const isControlled = vue.computed(() => props.collapsed !== void 0);
+    const internalCollapsed = vue.ref(props.defaultCollapsed);
+    const collapsed = vue.computed(
+      () => isControlled.value ? Boolean(props.collapsed) : internalCollapsed.value
+    );
+    vue.watch(
+      () => props.collapsed,
+      (value) => {
+        if (value !== void 0) internalCollapsed.value = value;
+      }
+    );
+    const setCollapsed = (value) => {
+      if (!isControlled.value) internalCollapsed.value = value;
+      emit("update:collapsed", value);
+    };
+    const asLen = (v) => typeof v === "number" ? `${v}px` : v;
+    return () => {
+      const sidebarStyle = {
+        width: collapsed.value ? asLen(props.collapsedWidth) : asLen(props.width),
+        flexShrink: "0",
+        background: "var(--iris-surface)",
+        borderRight: props.side === "left" ? "1px solid var(--iris-border)" : "none",
+        borderLeft: props.side === "right" ? "1px solid var(--iris-border)" : "none",
+        transition: "width 180ms ease",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column"
+      };
+      const mainStyle = {
+        flex: "1",
+        minWidth: "0",
+        overflow: "auto",
+        background: "var(--iris-background)"
+      };
+      const direction = props.side === "right" ? "row-reverse" : "row";
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          "data-iris-sidebar-layout": "",
+          "data-collapsed": collapsed.value ? "" : void 0,
+          "data-side": props.side,
+          style: {
+            display: "flex",
+            flexDirection: direction,
+            width: "100%",
+            height: "100%",
+            minHeight: "0",
+            color: "var(--iris-foreground)",
+            ...attrs.style ?? {}
+          }
+        },
+        [
+          vue.h(
+            "aside",
+            {
+              role: "complementary",
+              "data-iris-sidebar": "",
+              "data-collapsed": collapsed.value ? "" : void 0,
+              style: sidebarStyle
+            },
+            slots.sidebar?.({ collapsed: collapsed.value, setCollapsed })
+          ),
+          vue.h("div", { "data-iris-sidebar-main": "", style: mainStyle }, slots.default?.())
+        ]
+      );
+    };
+  }
+});
+var IrisHeaderLayout = vue.defineComponent({
+  name: "IrisHeaderLayout",
+  inheritAttrs: false,
+  props: {
+    /** Header height (px or CSS length). Default `'auto'`. */
+    headerHeight: { type: [Number, String], default: "auto" },
+    /** Footer height (px or CSS length). Default `'auto'`. */
+    footerHeight: { type: [Number, String], default: "auto" },
+    /** When true, header sticks via `position: sticky` instead of static. */
+    sticky: { type: Boolean, default: true }
+  },
+  setup(props, { slots, attrs }) {
+    const asLen = (v) => typeof v === "number" ? `${v}px` : v;
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-header-layout": "",
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          minHeight: "0",
+          background: "var(--iris-background)",
+          color: "var(--iris-foreground)",
+          ...attrs.style ?? {}
+        }
+      },
+      [
+        slots.header ? vue.h(
+          "header",
+          {
+            role: "banner",
+            "data-iris-header": "",
+            style: {
+              flexShrink: "0",
+              height: asLen(props.headerHeight),
+              borderBottom: "1px solid var(--iris-border)",
+              background: "var(--iris-surface)",
+              position: props.sticky ? "sticky" : "static",
+              top: "0",
+              zIndex: "50"
+            }
+          },
+          slots.header()
+        ) : null,
+        vue.h(
+          "main",
+          {
+            role: "main",
+            "data-iris-header-main": "",
+            style: { flex: "1", minHeight: "0", overflow: "auto" }
+          },
+          slots.default?.()
+        ),
+        slots.footer ? vue.h(
+          "footer",
+          {
+            role: "contentinfo",
+            "data-iris-footer": "",
+            style: {
+              flexShrink: "0",
+              height: asLen(props.footerHeight),
+              borderTop: "1px solid var(--iris-border)",
+              background: "var(--iris-surface)"
+            }
+          },
+          slots.footer()
+        ) : null
+      ]
+    );
+  }
+});
+var IrisThemeKey = /* @__PURE__ */ Symbol("IrisTheme");
+vue.defineComponent({
+  name: "IrisThemeProvider",
+  props: {
+    store: {
+      type: Object,
+      required: true
+    },
+    target: {
+      type: Object,
+      default: null
+    },
+    /** Writing direction; sets `dir` on the target for RTL. Default `'ltr'`. */
+    dir: {
+      type: String,
+      default: "ltr"
+    },
+    /** CSP nonce for injected inline stylesheets. */
+    cspNonce: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const current = vue.ref(props.store.store.getState());
+    const unsubscribe = props.store.store.subscribe((next) => {
+      current.value = next;
+    });
+    let applied = null;
+    let dirApplied = null;
+    const targetEl = () => props.target ?? document.documentElement;
+    const applyCurrent = () => {
+      applied?.revert();
+      applied = theme.applyTheme(current.value, targetEl());
+    };
+    const applyDir = () => {
+      dirApplied?.revert();
+      dirApplied = theme.applyDirection(props.dir, targetEl());
+    };
+    vue.onMounted(() => {
+      theme.injectGlobalStyles(props.cspNonce);
+      applyCurrent();
+      applyDir();
+    });
+    vue.watch(current, () => {
+      if (applied) applyCurrent();
+    });
+    vue.watch(
+      () => props.dir,
+      () => {
+        if (dirApplied) applyDir();
+      }
+    );
+    vue.onBeforeUnmount(() => {
+      unsubscribe();
+      applied?.revert();
+      applied = null;
+      dirApplied?.revert();
+      dirApplied = null;
+    });
+    vue.provide(IrisThemeKey, { store: props.store, current, dir: vue.computed(() => props.dir) });
+    return () => slots.default?.();
+  }
+});
+
+// src/primitives/icon/Icon.ts
+var IrisIcon = vue.defineComponent({
+  name: "IrisIcon",
+  inheritAttrs: false,
+  props: {
+    /** Semantic icon name resolved via the registry (e.g. 'check'). */
+    name: { type: String, required: true },
+    /** Width & height (number → px). */
+    size: { type: [Number, String], default: 24 },
+    /** Stroke width for line icons. */
+    strokeWidth: { type: Number, default: 2 },
+    /** Render as a filled glyph instead of a stroked line icon. */
+    fill: { type: Boolean, default: false },
+    /** Accessible title; sets role="img" + aria-label. Omit for decorative icons. */
+    title: { type: String, default: void 0 },
+    /** Registry to resolve `name` against. Defaults to the built-in set. */
+    registry: { type: Object, default: () => icons.defaultIconRegistry }
+  },
+  setup(props, { attrs }) {
+    const themeCtx = vue.inject(IrisThemeKey, void 0);
+    return () => {
+      const icon = icons.resolveThemedIcon(props.registry, props.name, themeCtx?.current.value);
+      if (!icon) return null;
+      const paint = props.fill ? { fill: "currentColor" } : {
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": props.strokeWidth,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      };
+      const children = icon.nodes.map((node, i) => vue.h(node.tag, { key: i, ...node.attrs }));
+      if (props.title) children.unshift(vue.h("title", props.title));
+      return vue.h(
+        "svg",
+        {
+          ...attrs,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: icon.viewBox ?? "0 0 24 24",
+          width: props.size,
+          height: props.size,
+          ...paint,
+          role: props.title ? "img" : void 0,
+          "aria-label": props.title || void 0,
+          "aria-hidden": props.title ? void 0 : "true",
+          "data-iris-icon": props.name,
+          style: {
+            display: "inline-block",
+            verticalAlign: "middle",
+            flexShrink: 0,
+            ...attrs.style ?? {}
+          }
+        },
+        children
+      );
+    };
+  }
+});
+
+// src/i18n/context.ts
+var I18nInjectionKey = /* @__PURE__ */ Symbol("IrisI18n");
+var fallbackI18n = null;
+function getFallback() {
+  if (fallbackI18n === null) fallbackI18n = core.createI18n();
+  return fallbackI18n;
+}
+function useI18n() {
+  const i18n = vue.inject(I18nInjectionKey, null) ?? getFallback();
+  const state = vue.ref(i18n.getState());
+  const unsubscribe = i18n.subscribe((next) => {
+    state.value = next;
+  });
+  vue.onBeforeUnmount(unsubscribe);
+  return {
+    locale: vue.computed(() => state.value.locale),
+    t: (key, params) => {
+      void state.value.locale;
+      return i18n.t(key, params);
+    },
+    formatDate: (value, options) => {
+      void state.value.locale;
+      return i18n.formatDate(value, options);
+    },
+    formatNumber: (value, options) => {
+      void state.value.locale;
+      return i18n.formatNumber(value, options);
+    },
+    formatRelativeTime: (value, unit, options) => {
+      void state.value.locale;
+      return i18n.formatRelativeTime(value, unit, options);
+    },
+    setLocale: i18n.setLocale,
+    setMessages: i18n.setMessages
+  };
+}
+
+// src/admin/NavMenu.ts
+var IrisNavMenu = vue.defineComponent({
+  name: "IrisNavMenu",
+  inheritAttrs: false,
+  props: {
+    /** Normalized nav tree. */
+    items: { type: Array, required: true },
+    /** Key of the active leaf. */
+    activeKey: { type: String, default: void 0 },
+    /** Controlled expanded branch keys (v-model:expandedKeys). */
+    expandedKeys: { type: Array, default: void 0 },
+    /** Initial expanded keys when uncontrolled (else the active trail expands). */
+    defaultExpandedKeys: { type: Array, default: void 0 },
+    /** Icon-only rail (top-level items only). */
+    collapsed: { type: Boolean, default: false },
+    ariaLabel: { type: String, default: void 0 }
+  },
+  emits: {
+    select: (_key, _node) => true,
+    "update:expandedKeys": (_keys) => true
+  },
+  setup(props, { emit, attrs }) {
+    const { t } = useI18n();
+    const tree = vue.computed(() => core.visibleNav(props.items));
+    const activePath = vue.computed(
+      () => props.activeKey ? core.findNavPath(props.items, props.activeKey).map((n) => n.key) : []
+    );
+    const isControlled = vue.computed(() => props.expandedKeys !== void 0);
+    const model = core.createExpansion({
+      mode: "multiple",
+      defaultExpanded: props.defaultExpandedKeys ?? (props.activeKey ? core.branchTrail(props.items, props.activeKey) : [])
+    });
+    const internalExpanded = vue.shallowRef(model.get());
+    vue.onBeforeUnmount(
+      model.store.subscribe((keys) => {
+        internalExpanded.value = keys;
+      })
+    );
+    const expanded = vue.computed(
+      () => isControlled.value ? props.expandedKeys : internalExpanded.value
+    );
+    vue.watch(
+      () => props.activeKey,
+      (key) => {
+        if (!isControlled.value) model.merge(key ? core.branchTrail(props.items, key) : []);
+      }
+    );
+    const toggle = (key) => {
+      if (isControlled.value) {
+        const cur = props.expandedKeys;
+        emit(
+          "update:expandedKeys",
+          cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key]
+        );
+      } else {
+        model.toggle(key);
+        emit("update:expandedKeys", model.get());
+      }
+    };
+    const select = (node) => {
+      if (node.disabled) return;
+      emit("select", node.key, node);
+    };
+    const hovered = vue.ref(null);
+    const itemStyle = (opts) => {
+      const bg = opts.active ? "var(--iris-primary)" : hovered.value && !opts.disabled ? "var(--iris-surface)" : "transparent";
+      return {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        width: "100%",
+        boxSizing: "border-box",
+        border: "none",
+        borderRadius: "var(--iris-radius-md, 6px)",
+        background: bg,
+        color: opts.active ? "var(--iris-primary-foreground, #fff)" : opts.trail ? "var(--iris-primary)" : "var(--iris-foreground)",
+        font: "inherit",
+        fontSize: "14px",
+        fontWeight: opts.active || opts.trail ? "600" : "400",
+        textAlign: "start",
+        cursor: opts.disabled ? "not-allowed" : "pointer",
+        opacity: opts.disabled ? "0.5" : "1",
+        padding: props.collapsed ? "10px" : `8px 10px 8px ${12 + opts.depth * 16}px`,
+        justifyContent: props.collapsed ? "center" : "flex-start"
+      };
+    };
+    const hoverHandlers = (key) => ({
+      onMouseenter: () => hovered.value = key,
+      onMouseleave: () => {
+        if (hovered.value === key) hovered.value = null;
+      }
+    });
+    const iconNode = (node, size = 18) => node.icon ? vue.h(IrisIcon, { name: node.icon, size }) : null;
+    const badgeNode = (node) => node.badge !== void 0 && node.badge !== "" && !props.collapsed ? vue.h(
+      "span",
+      {
+        "data-iris-nav-badge": "",
+        style: {
+          marginInlineStart: "auto",
+          fontSize: "11px",
+          lineHeight: "1",
+          padding: "2px 6px",
+          borderRadius: "999px",
+          background: "var(--iris-danger, #e5484d)",
+          color: "#fff"
+        }
+      },
+      String(node.badge)
+    ) : null;
+    const renderCollapsed = () => tree.value.map((node) => {
+      const branch = core.isBranch(node);
+      const active = branch ? activePath.value.includes(node.key) : node.key === props.activeKey;
+      return vue.h(
+        "button",
+        {
+          key: node.key,
+          type: "button",
+          "data-iris-nav-item": "",
+          "data-key": node.key,
+          "data-active": active ? "true" : void 0,
+          "data-branch": branch ? "true" : void 0,
+          disabled: node.disabled,
+          title: node.title,
+          "aria-label": branch ? `${node.title} (section)` : node.title,
+          "aria-current": active && !branch ? "page" : void 0,
+          style: itemStyle({ depth: 0, active, trail: false, disabled: !!node.disabled }),
+          ...hoverHandlers(node.key),
+          onClick: () => select(branch ? core.firstLeaf(node) : node)
+        },
+        [iconNode(node, 20) ?? vue.h("span", { style: { fontWeight: "700" } }, node.title.charAt(0))]
+      );
+    });
+    const renderItem = (node, depth) => {
+      const branch = core.isBranch(node);
+      const open = expanded.value.includes(node.key);
+      const active = node.key === props.activeKey;
+      const trail = branch && activePath.value.includes(node.key);
+      const row = vue.h(
+        "button",
+        {
+          type: "button",
+          "data-iris-nav-item": "",
+          "data-key": node.key,
+          "data-branch": branch ? "true" : void 0,
+          "data-active": active ? "true" : void 0,
+          "data-open": branch && open ? "true" : void 0,
+          "data-depth": String(depth),
+          disabled: node.disabled,
+          "aria-expanded": branch ? open ? "true" : "false" : void 0,
+          "aria-current": active ? "page" : void 0,
+          style: itemStyle({ depth, active, trail, disabled: !!node.disabled }),
+          ...hoverHandlers(node.key),
+          onClick: () => branch ? toggle(node.key) : select(node)
+        },
+        [
+          iconNode(node),
+          vue.h(
+            "span",
+            {
+              style: {
+                flex: branch ? "1" : "0 1 auto",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }
+            },
+            node.title
+          ),
+          badgeNode(node),
+          branch ? vue.h(IrisIcon, {
+            name: open ? "chevron-down" : "chevron-right",
+            size: 16,
+            style: { marginInlineStart: badgeNode(node) ? "6px" : "auto", opacity: "0.6" }
+          }) : null
+        ]
+      );
+      if (!branch || !open)
+        return vue.h("div", { key: node.key, "data-iris-nav-group": branch ? "" : void 0 }, [row]);
+      return vue.h("div", { key: node.key, "data-iris-nav-group": "", "data-open": "true" }, [
+        row,
+        vue.h(
+          "div",
+          { "data-iris-nav-children": "", role: "group" },
+          (node.children ?? []).map((child) => renderItem(child, depth + 1))
+        )
+      ]);
+    };
+    const onKeydown = (e) => {
+      const root = e.currentTarget;
+      const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]"));
+      if (buttons.length === 0) return;
+      const idx = buttons.indexOf(document.activeElement);
+      const focusAt = (i) => buttons[(i + buttons.length) % buttons.length]?.focus();
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          focusAt(idx < 0 ? 0 : idx + 1);
+          return;
+        case "ArrowUp":
+          e.preventDefault();
+          focusAt(idx < 0 ? buttons.length - 1 : idx - 1);
+          return;
+        case "Home":
+          e.preventDefault();
+          buttons[0]?.focus();
+          return;
+        case "End":
+          e.preventDefault();
+          buttons[buttons.length - 1]?.focus();
+          return;
+      }
+      if (props.collapsed || idx < 0) return;
+      const key = buttons[idx]?.getAttribute("data-key");
+      if (!key) return;
+      const node = core.findNavNode(props.items, key);
+      if (e.key === "ArrowRight" && node && core.isBranch(node)) {
+        e.preventDefault();
+        if (!expanded.value.includes(key)) toggle(key);
+        else focusAt(idx + 1);
+      } else if (e.key === "ArrowLeft") {
+        if (node && core.isBranch(node) && expanded.value.includes(key)) {
+          e.preventDefault();
+          toggle(key);
+        } else {
+          const parentKey = core.findNavPath(props.items, key).at(-2)?.key;
+          if (parentKey) {
+            e.preventDefault();
+            buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
+          }
+        }
+      }
+    };
+    return () => vue.h(
+      "nav",
+      {
+        ...attrs,
+        "data-iris-nav-menu": "",
+        "data-collapsed": props.collapsed ? "true" : void 0,
+        "aria-label": props.ariaLabel ?? t("admin.nav"),
+        onKeydown,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "2px",
+          ...attrs.style ?? {}
+        }
+      },
+      props.collapsed ? renderCollapsed() : tree.value.map((node) => renderItem(node, 0))
+    );
+  }
+});
+var IrisBreadcrumb = vue.defineComponent({
+  name: "IrisBreadcrumb",
+  inheritAttrs: false,
+  props: {
+    /** String separator. Ignored if the `separator` slot is provided. */
+    separator: { type: String, default: "/" }
+  },
+  setup(props, { slots, attrs }) {
+    const { t } = useI18n();
+    return () => {
+      const children = slots.default?.() ?? [];
+      const flat = [];
+      const walk = (nodes) => {
+        if (!nodes) return;
+        nodes.forEach((n) => {
+          if (n.type === vue.Fragment) walk(n.children);
+          else flat.push(n);
+        });
+      };
+      walk(children);
+      const total = flat.length;
+      const slotsSep = slots.separator;
+      const sep = (key) => vue.h(
+        "li",
+        {
+          key: `sep-${key}`,
+          "data-iris-breadcrumb-separator": "",
+          "aria-hidden": "true",
+          style: { color: "var(--iris-muted)", display: "inline-flex", alignItems: "center" }
+        },
+        slotsSep ? slotsSep() : props.separator
+      );
+      const items = [];
+      flat.forEach((child, i) => {
+        const isLast = i === total - 1;
+        const wrapped = vue.h(
+          "li",
+          {
+            key: `item-${i}`,
+            "data-iris-breadcrumb-item": "",
+            "data-iris-breadcrumb-last": isLast ? "true" : void 0,
+            style: { display: "inline-flex", alignItems: "center" }
+          },
+          // Pass isCurrent=true to the last child so it self-marks aria-current.
+          vue.h(
+            child.type,
+            { ...child.props ?? {}, isCurrent: isLast },
+            child.children
+          )
+        );
+        items.push(wrapped);
+        if (!isLast) items.push(sep(i));
+      });
+      return vue.h(
+        "nav",
+        {
+          ...attrs,
+          "aria-label": t("breadcrumb.label"),
+          "data-iris-breadcrumb": ""
+        },
+        vue.h(
+          "ol",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "6px",
+              margin: "0",
+              padding: "0",
+              listStyle: "none",
+              fontSize: "14px"
+            }
+          },
+          items
+        )
+      );
+    };
+  }
+});
+var IrisBreadcrumbItem = vue.defineComponent({
+  name: "IrisBreadcrumbItem",
+  inheritAttrs: false,
+  props: {
+    href: { type: String, default: "" },
+    /** Internal: set by parent IrisBreadcrumb when this is the last item. */
+    isCurrent: { type: Boolean, default: false }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const last = props.isCurrent;
+      const baseStyle = {
+        color: last ? "var(--iris-muted)" : "var(--iris-primary)",
+        textDecoration: "none",
+        cursor: last ? "default" : props.href ? "pointer" : "default"
+      };
+      const baseAttrs = {
+        ...attrs,
+        "aria-current": last ? "page" : void 0,
+        "data-iris-breadcrumb-crumb": "",
+        style: { ...baseStyle, ...attrs.style ?? {} }
+      };
+      if (props.href && !last) {
+        return vue.h("a", { ...baseAttrs, href: props.href }, slots.default?.());
+      }
+      return vue.h("span", baseAttrs, slots.default?.());
+    };
+  }
+});
+
+// src/admin/AdminBreadcrumb.ts
+var IrisAdminBreadcrumb = vue.defineComponent({
+  name: "IrisAdminBreadcrumb",
+  inheritAttrs: false,
+  props: {
+    /** Root→current ancestor chain. */
+    trail: { type: Array, required: true },
+    /** Show each node's icon before its title. */
+    showIcon: { type: Boolean, default: true },
+    /** Hide the breadcrumb when the trail has a single crumb. */
+    hideSingle: { type: Boolean, default: false },
+    separator: { type: String, default: "/" }
+  },
+  emits: {
+    select: (_key, _node) => true
+  },
+  setup(props, { emit, attrs }) {
+    return () => {
+      const trail = props.trail;
+      if (trail.length === 0 || props.hideSingle && trail.length === 1) return null;
+      return vue.h(
+        IrisBreadcrumb,
+        { ...attrs, separator: props.separator },
+        {
+          default: () => trail.map((node, i) => {
+            const last = i === trail.length - 1;
+            const content = [];
+            if (props.showIcon && node.icon) {
+              content.push(
+                vue.h(IrisIcon, { name: node.icon, size: 14, style: { marginInlineEnd: "4px" } })
+              );
+            }
+            content.push(vue.h("span", node.title));
+            return vue.h(
+              IrisBreadcrumbItem,
+              {
+                key: node.key,
+                "data-iris-admin-crumb": "",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  cursor: last ? "default" : "pointer"
+                },
+                onClick: last ? void 0 : () => emit("select", node.key, node)
+              },
+              { default: () => content }
+            );
+          })
+        }
+      );
+    };
+  }
+});
+function useTabsNav(nav) {
+  const state = vue.ref(nav.getState());
+  const unsubscribe = nav.subscribe((next) => {
+    state.value = next;
+  });
+  vue.onBeforeUnmount(unsubscribe);
+  return {
+    tabs: vue.computed(() => state.value.tabs),
+    activeKey: vue.computed(() => state.value.activeKey),
+    cacheKeys: vue.computed(() => state.value.tabs.map((t) => nav.cacheKey(t.key))),
+    open: nav.open,
+    activate: nav.activate,
+    close: nav.close,
+    closeOthers: nav.closeOthers,
+    closeAll: nav.closeAll,
+    closeLeft: nav.closeLeft,
+    closeRight: nav.closeRight,
+    refresh: nav.refresh,
+    setPinned: nav.setPinned,
+    cacheKey: nav.cacheKey
+  };
+}
+function useMachine(machine) {
+  const state = vue.ref(machine.store.getState());
+  const unsubscribe = machine.store.subscribe((next) => {
+    state.value = next;
+  });
+  vue.onBeforeUnmount(() => {
+    unsubscribe();
+  });
+  return { state, send: machine.send };
+}
+
+// src/primitives/dropdown/context.ts
+var DropdownContextKey = /* @__PURE__ */ Symbol("IrisDropdown");
+
+// src/primitives/dropdown/Dropdown.ts
+var IrisDropdown = vue.defineComponent({
+  name: "IrisDropdown",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    placement: { type: String, default: "bottom-start" },
+    offset: { type: Number, default: 6 }
+  },
+  emits: {
+    "update:open": (_value) => true
+  },
+  setup(props, { slots, emit }) {
+    const isControlled = vue.computed(() => props.open !== void 0);
+    const machine = core.createFloatingMachine(props.defaultOpen ? "open" : "closed");
+    const { state, send } = useMachine(machine);
+    vue.watch(
+      () => props.open,
+      (value) => {
+        if (value === void 0) return;
+        const currentlyOpen = state.value.value === "open";
+        if (value && !currentlyOpen) send({ type: "OPEN" });
+        if (!value && currentlyOpen) send({ type: "CLOSE" });
+      },
+      { immediate: true }
+    );
+    const open = vue.computed(
+      () => isControlled.value ? Boolean(props.open) : state.value.value === "open"
+    );
+    const setOpen = (value) => {
+      if (!isControlled.value) send({ type: value ? "OPEN" : "CLOSE" });
+      emit("update:open", value);
+    };
+    vue.provide(DropdownContextKey, {
+      open,
+      setOpen,
+      triggerRef: vue.ref(null),
+      contentRef: vue.ref(null),
+      contentId: vue.useId(),
+      placement: props.placement,
+      offset: props.offset
+    });
+    return () => slots.default?.();
+  }
+});
+function isEventListenerKey(key) {
+  return key.startsWith("on") && key.length > 2 && /[A-Z]/.test(key.charAt(2));
+}
+function composeRefs(...refs) {
+  return (el) => {
+    for (const r of refs) {
+      if (r == null) continue;
+      if (typeof r === "function") {
+        r(el);
+      } else if (typeof r === "object" && "value" in r) {
+        r.value = el;
+      }
+    }
+  };
+}
+function mergeSlotProps(parent, child) {
+  const out = { ...child };
+  for (const key in parent) {
+    const parentVal = parent[key];
+    const childVal = child[key];
+    if (isEventListenerKey(key)) {
+      if (typeof parentVal === "function" && typeof childVal === "function") {
+        out[key] = core.composeEventHandlers(
+          parentVal,
+          childVal
+        );
+      } else if (typeof parentVal === "function" && childVal == null) {
+        out[key] = parentVal;
+      }
+    } else if (key === "ref") {
+      if (parentVal != null && childVal != null) {
+        out[key] = composeRefs(parentVal, childVal);
+      } else if (parentVal != null) {
+        out[key] = parentVal;
+      }
+    } else if (key === "class") {
+      const merged = [parentVal, childVal].filter(Boolean).join(" ").trim();
+      if (merged) out[key] = merged;
+    } else if (key === "style") {
+      if (parentVal || childVal) {
+        out[key] = { ...parentVal, ...childVal };
+      }
+    } else if (!(key in child)) {
+      out[key] = parentVal;
+    }
+  }
+  return out;
+}
+vue.defineComponent({
+  name: "IrisSlot",
+  inheritAttrs: false,
+  setup(_, { slots, attrs }) {
+    return () => {
+      const children = slots.default?.();
+      const root = findFirstElement(children);
+      if (!root) {
+        if (typeof process === "undefined" || process.env?.NODE_ENV !== "production") {
+          console.warn("[iris-ui] IrisSlot expected exactly one child element; got none.");
+        }
+        return null;
+      }
+      const merged = mergeSlotProps(
+        attrs,
+        root.props ?? {}
+      );
+      return vue.h(root.type, merged, root.children);
+    };
+  }
+});
+function findFirstElement(children) {
+  if (!children || children.length === 0) return null;
+  let found = null;
+  let extraCount = 0;
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      if (node.type === vue.Fragment) {
+        const fragChildren = Array.isArray(node.children) ? node.children : [];
+        walk(fragChildren);
+        continue;
+      }
+      if (typeof node.type === "string" || typeof node.type === "object" || typeof node.type === "function") {
+        if (found) {
+          extraCount += 1;
+        } else {
+          found = node;
+        }
+      }
+    }
+  };
+  walk(children);
+  if (extraCount > 0 && (typeof process === "undefined" || process.env?.NODE_ENV !== "production")) {
+    console.warn(`[iris-ui] IrisSlot got ${extraCount + 1} root elements; only the first is used.`);
+  }
+  return found;
+}
+
+// src/primitives/dropdown/DropdownTrigger.ts
+var IrisDropdownTrigger = vue.defineComponent({
+  name: "IrisDropdownTrigger",
+  inheritAttrs: false,
+  props: {
+    asChild: { type: Boolean, default: false }
+  },
+  setup(props, { slots, attrs }) {
+    const ctx = vue.inject(DropdownContextKey);
+    if (!ctx) {
+      throw new Error("[iris-ui] IrisDropdownTrigger must be a descendant of IrisDropdown");
+    }
+    const onClick = (event) => {
+      if (event.defaultPrevented) return;
+      ctx.setOpen(!ctx.open.value);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        ctx.setOpen(true);
+      }
+    };
+    const captureRef = (el) => {
+      ctx.triggerRef.value = el ?? null;
+    };
+    return () => {
+      const triggerProps = {
+        "aria-haspopup": "menu",
+        "aria-expanded": ctx.open.value ? "true" : "false",
+        "aria-controls": ctx.contentId,
+        "data-state": ctx.open.value ? "open" : "closed",
+        onClick,
+        onKeydown: onKeyDown,
+        ref: captureRef
+      };
+      if (props.asChild) {
+        const root = findFirstElement(slots.default?.());
+        if (!root) {
+          if (typeof process === "undefined" || process.env?.NODE_ENV !== "production") {
+            console.warn("[iris-ui] IrisDropdownTrigger: as-child requires a single child element");
+          }
+          return null;
+        }
+        const merged = mergeSlotProps(
+          { ...triggerProps, ...attrs },
+          root.props ?? {}
+        );
+        return vue.h(root.type, merged, root.children);
+      }
+      return vue.h("button", { type: "button", ...attrs, ...triggerProps }, slots.default?.());
+    };
+  }
+});
+function useFloating(options) {
+  const x = vue.ref(0);
+  const y = vue.ref(0);
+  const strategy = vue.ref(options.strategy ?? "absolute");
+  const finalPlacement = vue.ref(options.placement ?? "bottom");
+  const arrowX = vue.ref();
+  const arrowY = vue.ref();
+  const middleware = vue.shallowRef([]);
+  rebuildMiddleware();
+  function rebuildMiddleware() {
+    const mw = [];
+    if (options.offset !== void 0) mw.push(dom.offset(options.offset));
+    if (options.flip !== false) mw.push(dom.flip());
+    if (options.shift !== false) mw.push(dom.shift({ padding: 8 }));
+    if (options.size) {
+      const padding = typeof options.size === "number" ? options.size : 8;
+      mw.push(
+        dom.size({
+          padding,
+          apply({ availableWidth, availableHeight, elements }) {
+            Object.assign(elements.floating.style, {
+              maxWidth: `${Math.max(0, Math.floor(availableWidth))}px`,
+              maxHeight: `${Math.max(0, Math.floor(availableHeight))}px`
+            });
+          }
+        })
+      );
+    }
+    if (options.arrow?.value) mw.push(dom.arrow({ element: options.arrow.value }));
+    if (options.middleware) mw.push(...options.middleware);
+    middleware.value = mw;
+  }
+  let cleanupAutoUpdate = null;
+  let epoch = 0;
+  async function update() {
+    const a = options.anchor.value;
+    const f = options.floating.value;
+    if (!a || !f) return;
+    rebuildMiddleware();
+    const token = ++epoch;
+    const result = await dom.computePosition(a, f, {
+      placement: options.placement ?? "bottom",
+      strategy: strategy.value,
+      middleware: middleware.value
+    });
+    if (token !== epoch) return;
+    x.value = result.x;
+    y.value = result.y;
+    finalPlacement.value = result.placement;
+    const arrowData = result.middlewareData.arrow;
+    arrowX.value = arrowData?.x;
+    arrowY.value = arrowData?.y;
+  }
+  vue.watch(
+    [options.open, options.anchor, options.floating],
+    ([isOpen, anchorEl, floatingEl]) => {
+      cleanupAutoUpdate?.();
+      cleanupAutoUpdate = null;
+      epoch++;
+      if (isOpen && anchorEl && floatingEl) {
+        cleanupAutoUpdate = dom.autoUpdate(anchorEl, floatingEl, () => {
+          void update();
+        });
+      }
+    },
+    { flush: "post", immediate: true }
+  );
+  vue.onScopeDispose(() => {
+    cleanupAutoUpdate?.();
+    cleanupAutoUpdate = null;
+    epoch++;
+  });
+  const OPPOSITE = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  };
+  const arrowSide = vue.computed(
+    () => OPPOSITE[finalPlacement.value.split("-")[0]]
+  );
+  const floatingStyles = vue.computed(() => ({
+    position: strategy.value,
+    top: "0",
+    left: "0",
+    transform: `translate3d(${Math.round(x.value)}px, ${Math.round(y.value)}px, 0)`,
+    width: "max-content"
+  }));
+  return { x, y, strategy, finalPlacement, floatingStyles, update, arrowX, arrowY, arrowSide };
+}
+function useDismiss(options) {
+  const escape = options.escape !== false;
+  const outsidePointerDown = options.outsidePointerDown !== false;
+  const isExcluded = (target) => {
+    if (!target || !(target instanceof Node)) return false;
+    for (const r of options.exclude) {
+      const el = r.value;
+      if (!el) continue;
+      if (el === target || el.contains(target)) return true;
+    }
+    return false;
+  };
+  const onPointerDown = (event) => {
+    if (!options.enabled.value) return;
+    if (isExcluded(event.target)) return;
+    options.onDismiss();
+  };
+  const onKeyDown = (event) => {
+    if (!options.enabled.value) return;
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      options.onDismiss();
+    }
+  };
+  const attach = () => {
+    if (typeof document === "undefined") return;
+    if (outsidePointerDown) {
+      document.addEventListener("pointerdown", onPointerDown, true);
+    }
+    if (escape) {
+      document.addEventListener("keydown", onKeyDown);
+    }
+  };
+  const detach = () => {
+    if (typeof document === "undefined") return;
+    document.removeEventListener("pointerdown", onPointerDown, true);
+    document.removeEventListener("keydown", onKeyDown);
+  };
+  vue.watch(
+    options.enabled,
+    (enabled) => {
+      detach();
+      if (enabled) attach();
+    },
+    { immediate: true, flush: "post" }
+  );
+  vue.onScopeDispose(detach);
+}
+
+// src/primitives/dropdown/DropdownMenu.ts
+var IrisDropdownMenu = vue.defineComponent({
+  name: "IrisDropdownMenu",
+  inheritAttrs: false,
+  props: {
+    teleport: {
+      type: [String, Object, Boolean],
+      default: "body"
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const ctx = vue.inject(DropdownContextKey);
+    if (!ctx) {
+      throw new Error("[iris-ui] IrisDropdownMenu must be a descendant of IrisDropdown");
+    }
+    const innerRef = vue.ref(null);
+    vue.watch(innerRef, (el) => {
+      ctx.contentRef.value = el;
+    });
+    const { floatingStyles } = useFloating({
+      anchor: ctx.triggerRef,
+      floating: innerRef,
+      open: ctx.open,
+      placement: ctx.placement,
+      offset: ctx.offset
+    });
+    useDismiss({
+      enabled: ctx.open,
+      exclude: [ctx.triggerRef, innerRef],
+      onDismiss: () => ctx.setOpen(false)
+    });
+    vue.watch(ctx.open, async (open) => {
+      if (open) {
+        await vue.nextTick();
+        const items = innerRef.value?.querySelectorAll('[role="menuitem"]');
+        items?.[0]?.focus();
+      } else {
+        ctx.triggerRef.value?.focus?.();
+      }
+    });
+    const typeahead = {
+      buffer: "",
+      timer: null
+    };
+    const onKeyDown = (event) => {
+      if (!ctx.open.value) return;
+      const items = Array.from(
+        innerRef.value?.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        ) ?? []
+      );
+      if (items.length === 0) return;
+      const current = document.activeElement;
+      const index = current ? items.indexOf(current) : -1;
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          items[core.nextEnabledIndex(index, 1, items.length)]?.focus();
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          items[core.nextEnabledIndex(index, -1, items.length)]?.focus();
+          break;
+        }
+        case "Home":
+          event.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          event.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+        case "Tab":
+          ctx.setOpen(false);
+          break;
+        default: {
+          if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+            typeahead.buffer += event.key;
+            if (typeahead.timer) clearTimeout(typeahead.timer);
+            typeahead.timer = setTimeout(() => {
+              typeahead.buffer = "";
+            }, 500);
+            const match = core.matchTypeahead(
+              items.map((it) => it.textContent ?? ""),
+              typeahead.buffer,
+              index
+            );
+            if (match >= 0) {
+              event.preventDefault();
+              items[match]?.focus();
+            }
+          }
+        }
+      }
+    };
+    return () => {
+      if (!ctx.open.value) return null;
+      const menuNode = vue.h(
+        "div",
+        {
+          ...attrs,
+          ref: (el) => {
+            innerRef.value = el ?? null;
+          },
+          id: ctx.contentId,
+          role: "menu",
+          tabindex: -1,
+          "data-iris-dropdown-menu": "",
+          "data-state": "open",
+          onKeydown: onKeyDown,
+          style: {
+            ...floatingStyles.value,
+            background: "var(--iris-surface)",
+            color: "var(--iris-foreground)",
+            border: "1px solid var(--iris-border)",
+            borderRadius: "var(--iris-radius-md)",
+            padding: "var(--iris-padding-sm)",
+            boxShadow: "0 8px 24px -8px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.08)",
+            minWidth: "160px",
+            outline: "none",
+            zIndex: "1000",
+            ...attrs.style ?? {}
+          }
+        },
+        slots.default?.()
+      );
+      if (props.teleport === false) return menuNode;
+      return vue.h(vue.Teleport, { to: props.teleport }, [menuNode]);
+    };
+  }
+});
+var IrisDropdownItem = vue.defineComponent({
+  name: "IrisDropdownItem",
+  inheritAttrs: false,
+  props: {
+    disabled: { type: Boolean, default: false },
+    /** When true, selecting does NOT close the dropdown. Useful for sub-actions. */
+    keepOpen: { type: Boolean, default: false }
+  },
+  emits: {
+    select: (_event) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const ctx = vue.inject(DropdownContextKey);
+    if (!ctx) {
+      throw new Error("[iris-ui] IrisDropdownItem must be a descendant of IrisDropdownMenu");
+    }
+    const hovered = vue.ref(false);
+    const fire = (event) => {
+      if (props.disabled) return;
+      emit("select", event);
+      if (!props.keepOpen) ctx.setOpen(false);
+    };
+    const onClick = (event) => {
+      if (event.defaultPrevented) return;
+      fire(event);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        fire(event);
+      }
+    };
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        role: "menuitem",
+        tabindex: props.disabled ? -1 : 0,
+        "aria-disabled": props.disabled ? "true" : void 0,
+        "data-iris-dropdown-item": "",
+        "data-disabled": props.disabled ? "" : void 0,
+        onClick,
+        onKeydown: onKeyDown,
+        onPointerenter: () => hovered.value = true,
+        onPointerleave: () => hovered.value = false,
+        onFocus: () => hovered.value = true,
+        onBlur: () => hovered.value = false,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--iris-gap-sm)",
+          padding: "6px var(--iris-padding-md)",
+          borderRadius: "var(--iris-radius-sm)",
+          cursor: props.disabled ? "not-allowed" : "pointer",
+          opacity: props.disabled ? "0.5" : "1",
+          background: hovered.value && !props.disabled ? "var(--iris-surface-hover)" : "transparent",
+          color: "inherit",
+          outline: "none",
+          fontSize: "14px",
+          transition: "background-color 80ms ease",
+          ...attrs.style ?? {}
+        }
+      },
+      slots.default?.()
+    );
+  }
+});
+var IrisDropdownSeparator = vue.defineComponent({
+  name: "IrisDropdownSeparator",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    return () => vue.h("div", {
+      ...attrs,
+      role: "separator",
+      "data-iris-dropdown-separator": "",
+      style: {
+        height: "1px",
+        background: "var(--iris-border)",
+        margin: "4px 0",
+        ...attrs.style ?? {}
+      }
+    });
+  }
+});
+
+// src/admin/AdminTabs.ts
+var IrisAdminTabs = vue.defineComponent({
+  name: "IrisAdminTabs",
+  inheritAttrs: false,
+  props: {
+    /** Shared tabs store (from `createTabsNav`). */
+    nav: { type: Object, required: true }
+  },
+  emits: {
+    change: (_key) => true,
+    close: (_key) => true,
+    refresh: (_key) => true
+  },
+  setup(props, { emit, attrs }) {
+    const { t: tr } = useI18n();
+    const t = useTabsNav(props.nav);
+    const activate = (key) => {
+      props.nav.activate(key);
+      emit("change", key);
+    };
+    const close = (key) => {
+      props.nav.close(key);
+      emit("close", key);
+    };
+    const refresh = (key) => {
+      props.nav.refresh(key);
+      emit("refresh", key);
+    };
+    const focusTab = (root, key) => {
+      if (!root || !key) return;
+      const labels = root.querySelectorAll("[data-iris-tab-label]");
+      labels.forEach((el) => {
+        if (el.getAttribute("data-key") === key) el.focus();
+      });
+    };
+    const onTablistKeydown = (e) => {
+      const root = e.currentTarget;
+      const tabs = t.tabs.value;
+      const idx = tabs.findIndex((x) => x.key === t.activeKey.value);
+      if (idx < 0 || tabs.length === 0) return;
+      if (e.key === "Delete" || e.key === "Backspace") {
+        const cur = tabs[idx];
+        if (cur && core.isClosable(cur)) {
+          e.preventDefault();
+          close(cur.key);
+          void vue.nextTick(() => focusTab(root, props.nav.getState().activeKey));
+        }
+        return;
+      }
+      let target = -1;
+      if (e.key === "ArrowRight") target = (idx + 1) % tabs.length;
+      else if (e.key === "ArrowLeft") target = (idx - 1 + tabs.length) % tabs.length;
+      else if (e.key === "Home") target = 0;
+      else if (e.key === "End") target = tabs.length - 1;
+      else return;
+      e.preventDefault();
+      const key = tabs[target]?.key;
+      if (!key) return;
+      activate(key);
+      void vue.nextTick(() => focusTab(root, key));
+    };
+    const chip = (tab) => {
+      const active = tab.key === t.activeKey.value;
+      const closable = core.isClosable(tab);
+      const labelChildren = [];
+      if (tab.icon) labelChildren.push(vue.h(IrisIcon, { name: tab.icon, size: 14 }));
+      labelChildren.push(vue.h("span", { style: { whiteSpace: "nowrap" } }, tab.title));
+      const label = vue.h(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "data-iris-tab-label": "",
+          "data-key": tab.key,
+          "aria-selected": active ? "true" : "false",
+          "aria-current": active ? "page" : void 0,
+          tabindex: active ? 0 : -1,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "6px",
+            border: "none",
+            background: "transparent",
+            color: "inherit",
+            font: "inherit",
+            fontSize: "13px",
+            cursor: "pointer",
+            padding: "0"
+          },
+          onClick: () => activate(tab.key)
+        },
+        labelChildren
+      );
+      const closeBtn = closable ? vue.h(
+        "button",
+        {
+          type: "button",
+          tabindex: -1,
+          "data-iris-tab-close": "",
+          "aria-label": tr("admin.closeTab", { title: tab.title }),
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "16px",
+            height: "16px",
+            border: "none",
+            borderRadius: "4px",
+            background: "transparent",
+            color: "inherit",
+            cursor: "pointer",
+            padding: "0",
+            opacity: "0.6"
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            close(tab.key);
+          }
+        },
+        [vue.h(IrisIcon, { name: "x", size: 12 })]
+      ) : tab.pinned ? vue.h(IrisIcon, { name: "check-circle", size: 12, style: { opacity: "0.5" } }) : null;
+      return vue.h(
+        "div",
+        {
+          key: tab.key,
+          "data-iris-tab": "",
+          "data-active": active ? "true" : void 0,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "4px",
+            padding: "5px 8px 5px 10px",
+            borderRadius: "var(--iris-radius-md, 6px)",
+            border: `1px solid ${active ? "var(--iris-primary)" : "var(--iris-border)"}`,
+            background: active ? "var(--iris-primary)" : "var(--iris-surface)",
+            color: active ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
+            flex: "0 0 auto"
+          }
+        },
+        [label, closeBtn]
+      );
+    };
+    const action = (label, run, disabled = false) => vue.h(IrisDropdownItem, { disabled, onSelect: run }, { default: () => label });
+    const actionsMenu = () => vue.h(IrisDropdown, null, {
+      default: () => [
+        vue.h(
+          IrisDropdownTrigger,
+          { "aria-label": tr("admin.tabActions") },
+          {
+            default: () => vue.h(
+              "span",
+              {
+                "data-iris-tab-actions": "",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "28px",
+                  height: "28px",
+                  borderRadius: "var(--iris-radius-md, 6px)",
+                  border: "1px solid var(--iris-border)",
+                  background: "var(--iris-surface)",
+                  color: "var(--iris-foreground)",
+                  cursor: "pointer"
+                }
+              },
+              [vue.h(IrisIcon, { name: "more-horizontal", size: 16 })]
+            )
+          }
+        ),
+        vue.h(IrisDropdownMenu, null, {
+          default: () => {
+            const key = t.activeKey.value;
+            if (!key) return [action("No active tab", () => {
+            }, true)];
+            return [
+              action(tr("admin.refresh"), () => refresh(key)),
+              action(tr("admin.close"), () => close(key)),
+              vue.h(IrisDropdownSeparator),
+              action(tr("admin.closeOthers"), () => props.nav.closeOthers(key)),
+              action(tr("admin.closeAll"), () => props.nav.closeAll())
+            ];
+          }
+        })
+      ]
+    });
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-admin-tabs": "",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "6px 10px",
+          borderBottom: "1px solid var(--iris-border)",
+          background: "var(--iris-background)",
+          ...attrs.style ?? {}
+        }
+      },
+      [
+        vue.h(
+          "div",
+          {
+            "data-iris-tabs-scroll": "",
+            role: "tablist",
+            "aria-label": tr("admin.openPages"),
+            onKeydown: onTablistKeydown,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              overflowX: "auto",
+              flex: "1"
+            }
+          },
+          t.tabs.value.map((tab) => chip(tab))
+        ),
+        actionsMenu()
+      ]
+    );
+  }
+});
+function useStore(store) {
+  const state = vue.shallowRef(store.getState());
+  vue.onScopeDispose(store.subscribe((next) => state.value = next));
+  return state;
+}
+
+// src/admin/useAdminShell.ts
+function useAdminShell(config) {
+  const { defaultActiveKey, onActiveKeyChange, onSelect, tabs } = config;
+  const menus = () => vue.toValue(config.menus);
+  const activeKeyProp = () => vue.toValue(config.activeKey);
+  const activeControlled = () => activeKeyProp() !== void 0;
+  const shell = core.createAdminShell({
+    menus: menus(),
+    defaultActiveKey: activeKeyProp() ?? defaultActiveKey,
+    tabs,
+    onActiveChange: (key, node) => {
+      onActiveKeyChange?.(key);
+      if (node) onSelect?.(key, node);
+    }
+  });
+  const state = useStore(shell.store);
+  vue.watch(menus, (next) => shell.setMenus(next), { flush: "sync" });
+  vue.watchEffect(() => {
+    const prop = activeKeyProp();
+    if (prop !== void 0 && shell.getActiveKey() !== prop) {
+      shell.store.setState({ activeKey: prop });
+    }
+  });
+  const activeKey = vue.computed(
+    () => activeControlled() ? activeKeyProp() ?? "" : state.value.activeKey ?? ""
+  );
+  return {
+    activeKey,
+    navigate: shell.navigate,
+    syncFromTab: shell.syncFromTab,
+    breadcrumb: vue.computed(() => activeKey.value ? core.findNavPath(menus(), activeKey.value) : [])
+  };
+}
+
+// src/admin/AdminLayout.ts
+var IrisAdminLayout = vue.defineComponent({
+  name: "IrisAdminLayout",
+  inheritAttrs: false,
+  props: {
+    /** Normalized nav tree driving menu + breadcrumb. */
+    menus: { type: Array, required: true },
+    /** Active page key (v-model:activeKey). */
+    activeKey: { type: String, default: void 0 },
+    /** Sidebar collapsed (v-model:collapsed); undefined = uncontrolled. */
+    collapsed: { type: Boolean, default: void 0 },
+    defaultCollapsed: { type: Boolean, default: false },
+    mode: { type: String, default: "sidebar" },
+    /** Brand text shown next to the logo when expanded. */
+    appTitle: { type: String, default: "Iris Admin" },
+    /** Optional shared tabs store; when present the tab bar is rendered. */
+    tabs: { type: Object, default: void 0 },
+    showBreadcrumb: { type: Boolean, default: true },
+    sidebarWidth: { type: [Number, String], default: 240 },
+    collapsedWidth: { type: [Number, String], default: 64 }
+  },
+  emits: {
+    "update:activeKey": (_key) => true,
+    "update:collapsed": (_value) => true,
+    select: (_key, _node) => true
+  },
+  setup(props, { emit, slots, attrs }) {
+    const { t } = useI18n();
+    const {
+      activeKey,
+      navigate,
+      syncFromTab,
+      breadcrumb: trail
+    } = useAdminShell({
+      menus: () => props.menus,
+      activeKey: () => props.activeKey,
+      tabs: props.tabs,
+      onActiveKeyChange: (key) => emit("update:activeKey", key),
+      onSelect: (key, node) => emit("select", key, node)
+    });
+    const collapseControlled = vue.computed(() => props.collapsed !== void 0);
+    const internalCollapsed = vue.ref(props.defaultCollapsed);
+    const collapsed = vue.computed(
+      () => collapseControlled.value ? props.collapsed : internalCollapsed.value
+    );
+    const setCollapsed = (value) => {
+      if (!collapseControlled.value) internalCollapsed.value = value;
+      emit("update:collapsed", value);
+    };
+    const onSelect = (_key, node) => navigate(node);
+    if (props.tabs) {
+      const tabsActive = vue.ref(props.tabs.getState().activeKey);
+      const unsubscribe = props.tabs.subscribe((s) => {
+        tabsActive.value = s.activeKey;
+      });
+      vue.onBeforeUnmount(unsubscribe);
+      vue.watch(tabsActive, (key) => {
+        if (key) syncFromTab(key);
+      });
+    }
+    const renderLogo = (state) => {
+      if (slots.logo) return slots.logo(state);
+      return vue.h(
+        "div",
+        {
+          "data-iris-admin-logo": "",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            height: "52px",
+            padding: "0 16px",
+            color: "var(--iris-foreground)",
+            fontWeight: "700",
+            fontSize: "16px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            flexShrink: 0
+          }
+        },
+        [
+          vue.h(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "28px",
+                height: "28px",
+                borderRadius: "var(--iris-radius-md, 6px)",
+                background: "var(--iris-primary)",
+                color: "var(--iris-primary-foreground, #fff)",
+                flexShrink: 0
+              }
+            },
+            [vue.h(IrisIcon, { name: "menu", size: 18 })]
+          ),
+          state.collapsed ? null : vue.h("span", props.appTitle)
+        ]
+      );
+    };
+    const collapseToggle = () => vue.h(
+      "button",
+      {
+        type: "button",
+        "data-iris-admin-collapse": "",
+        "aria-label": collapsed.value ? t("admin.expandSidebar") : t("admin.collapseSidebar"),
+        "aria-pressed": collapsed.value ? "true" : "false",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "32px",
+          height: "32px",
+          border: "none",
+          borderRadius: "var(--iris-radius-md, 6px)",
+          background: "transparent",
+          color: "var(--iris-foreground)",
+          cursor: "pointer",
+          flexShrink: 0
+        },
+        onClick: () => setCollapsed(!collapsed.value)
+      },
+      [vue.h(IrisIcon, { name: collapsed.value ? "chevron-right" : "menu", size: 18 })]
+    );
+    const renderHeaderBar = () => vue.h(
+      "div",
+      {
+        "data-iris-admin-headerbar": "",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          height: "52px",
+          padding: "0 16px",
+          borderBottom: "1px solid var(--iris-border)",
+          background: "var(--iris-background)"
+        }
+      },
+      [
+        collapseToggle(),
+        props.showBreadcrumb ? vue.h(IrisAdminBreadcrumb, { trail: trail.value, hideSingle: false, onSelect }) : null,
+        vue.h("div", { style: { flex: "1" } }),
+        slots.toolbar ? vue.h(
+          "div",
+          {
+            "data-iris-admin-toolbar": "",
+            style: { display: "flex", alignItems: "center", gap: "8px" }
+          },
+          slots.toolbar()
+        ) : null
+      ]
+    );
+    const renderContent = () => vue.h(
+      "div",
+      { "data-iris-admin-content": "", style: { padding: "16px" } },
+      slots.default?.({ activeKey: activeKey.value }) ?? []
+    );
+    return () => {
+      if (props.mode === "full-content") {
+        return vue.h(
+          "div",
+          {
+            ...attrs,
+            "data-iris-admin-layout": "",
+            "data-mode": "full-content",
+            style: {
+              height: "100%",
+              ...attrs.style ?? {}
+            }
+          },
+          slots.default?.({ activeKey: activeKey.value }) ?? []
+        );
+      }
+      return vue.h(
+        IrisSidebarLayout,
+        {
+          ...attrs,
+          collapsed: collapsed.value,
+          width: props.sidebarWidth,
+          collapsedWidth: props.collapsedWidth,
+          "onUpdate:collapsed": setCollapsed,
+          "data-iris-admin-layout": "",
+          "data-mode": "sidebar",
+          style: {
+            height: "100vh",
+            ...attrs.style ?? {}
+          }
+        },
+        {
+          sidebar: (state) => vue.h(
+            "div",
+            {
+              "data-iris-admin-sidebar": "",
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                height: "100%",
+                borderInlineEnd: "1px solid var(--iris-border)",
+                background: "var(--iris-surface)"
+              }
+            },
+            [
+              renderLogo(state),
+              vue.h(
+                "div",
+                { style: { flex: "1", overflowY: "auto", overflowX: "hidden", padding: "8px" } },
+                [
+                  vue.h(IrisNavMenu, {
+                    items: props.menus,
+                    activeKey: activeKey.value,
+                    collapsed: state.collapsed,
+                    onSelect
+                  })
+                ]
+              )
+            ]
+          ),
+          default: () => vue.h(
+            IrisHeaderLayout,
+            { sticky: true },
+            {
+              header: () => vue.h("div", { "data-iris-admin-header": "" }, [
+                renderHeaderBar(),
+                props.tabs ? vue.h(IrisAdminTabs, { nav: props.tabs }) : null
+              ]),
+              default: () => renderContent(),
+              ...slots.footer ? { footer: () => slots.footer() } : {}
+            }
+          )
+        }
+      );
+    };
+  }
+});
+
+Object.defineProperty(exports, "createTabsNav", {
+  enumerable: true,
+  get: function () { return core.createTabsNav; }
+});
+Object.defineProperty(exports, "findNavNode", {
+  enumerable: true,
+  get: function () { return core.findNavNode; }
+});
+Object.defineProperty(exports, "findNavPath", {
+  enumerable: true,
+  get: function () { return core.findNavPath; }
+});
+Object.defineProperty(exports, "firstLeaf", {
+  enumerable: true,
+  get: function () { return core.firstLeaf; }
+});
+Object.defineProperty(exports, "flattenNav", {
+  enumerable: true,
+  get: function () { return core.flattenNav; }
+});
+Object.defineProperty(exports, "isBranch", {
+  enumerable: true,
+  get: function () { return core.isBranch; }
+});
+Object.defineProperty(exports, "isClosable", {
+  enumerable: true,
+  get: function () { return core.isClosable; }
+});
+Object.defineProperty(exports, "visibleNav", {
+  enumerable: true,
+  get: function () { return core.visibleNav; }
+});
+exports.IrisAdminBreadcrumb = IrisAdminBreadcrumb;
+exports.IrisAdminLayout = IrisAdminLayout;
+exports.IrisAdminTabs = IrisAdminTabs;
+exports.IrisNavMenu = IrisNavMenu;
+exports.useAdminShell = useAdminShell;
+exports.useTabsNav = useTabsNav;
+//# sourceMappingURL=admin.cjs.map
+//# sourceMappingURL=admin.cjs.map