@iris-ui-kit/vue 0.1.0

package/dist/chunk-FJBYAIL4.js

@@ -0,0 +1,1318 @@
+import { useFloating, useDismiss } from './chunk-3FJUCHCC.js';
+import { useMachine } from './chunk-TQB5LVOH.js';
+import { findFirstElement, mergeSlotProps } from './chunk-F77KIPOH.js';
+import { IrisSidebarLayout, IrisHeaderLayout } from './chunk-I6D5VXQK.js';
+import { IrisThemeKey } from './chunk-72PZMU6R.js';
+import { useStore } from './chunk-75GSYEJS.js';
+import { useI18n } from './chunk-TCAXRWT6.js';
+import { defineComponent, inject, h, computed, shallowRef, onBeforeUnmount, watch, ref, provide, useId, nextTick, Teleport, Fragment, watchEffect, toValue } from 'vue';
+import { visibleNav, findNavPath, createExpansion, branchTrail, createFloatingMachine, findNavNode, isBranch, firstLeaf, matchTypeahead, nextEnabledIndex, isClosable, createAdminShell } from '@iris-ui-kit/core';
+export { createTabsNav, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, visibleNav } from '@iris-ui-kit/core';
+import { defaultIconRegistry, resolveThemedIcon } from '@iris-ui-kit/icons';
+
+var IrisIcon = 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: () => defaultIconRegistry }
+  },
+  setup(props, { attrs }) {
+    const themeCtx = inject(IrisThemeKey, void 0);
+    return () => {
+      const icon = 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) => h(node.tag, { key: i, ...node.attrs }));
+      if (props.title) children.unshift(h("title", props.title));
+      return 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/admin/NavMenu.ts
+var IrisNavMenu = 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 = computed(() => visibleNav(props.items));
+    const activePath = computed(
+      () => props.activeKey ? findNavPath(props.items, props.activeKey).map((n) => n.key) : []
+    );
+    const isControlled = computed(() => props.expandedKeys !== void 0);
+    const model = createExpansion({
+      mode: "multiple",
+      defaultExpanded: props.defaultExpandedKeys ?? (props.activeKey ? branchTrail(props.items, props.activeKey) : [])
+    });
+    const internalExpanded = shallowRef(model.get());
+    onBeforeUnmount(
+      model.store.subscribe((keys) => {
+        internalExpanded.value = keys;
+      })
+    );
+    const expanded = computed(
+      () => isControlled.value ? props.expandedKeys : internalExpanded.value
+    );
+    watch(
+      () => props.activeKey,
+      (key) => {
+        if (!isControlled.value) model.merge(key ? 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 = 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 ? h(IrisIcon, { name: node.icon, size }) : null;
+    const badgeNode = (node) => node.badge !== void 0 && node.badge !== "" && !props.collapsed ? 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 = isBranch(node);
+      const active = branch ? activePath.value.includes(node.key) : node.key === props.activeKey;
+      return 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 ? firstLeaf(node) : node)
+        },
+        [iconNode(node, 20) ?? h("span", { style: { fontWeight: "700" } }, node.title.charAt(0))]
+      );
+    });
+    const renderItem = (node, depth) => {
+      const branch = 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 = 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),
+          h(
+            "span",
+            {
+              style: {
+                flex: branch ? "1" : "0 1 auto",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }
+            },
+            node.title
+          ),
+          badgeNode(node),
+          branch ? h(IrisIcon, {
+            name: open ? "chevron-down" : "chevron-right",
+            size: 16,
+            style: { marginInlineStart: badgeNode(node) ? "6px" : "auto", opacity: "0.6" }
+          }) : null
+        ]
+      );
+      if (!branch || !open)
+        return h("div", { key: node.key, "data-iris-nav-group": branch ? "" : void 0 }, [row]);
+      return h("div", { key: node.key, "data-iris-nav-group": "", "data-open": "true" }, [
+        row,
+        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 = findNavNode(props.items, key);
+      if (e.key === "ArrowRight" && node && isBranch(node)) {
+        e.preventDefault();
+        if (!expanded.value.includes(key)) toggle(key);
+        else focusAt(idx + 1);
+      } else if (e.key === "ArrowLeft") {
+        if (node && isBranch(node) && expanded.value.includes(key)) {
+          e.preventDefault();
+          toggle(key);
+        } else {
+          const parentKey = findNavPath(props.items, key).at(-2)?.key;
+          if (parentKey) {
+            e.preventDefault();
+            buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
+          }
+        }
+      }
+    };
+    return () => 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 = 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 === Fragment) walk(n.children);
+          else flat.push(n);
+        });
+      };
+      walk(children);
+      const total = flat.length;
+      const slotsSep = slots.separator;
+      const sep = (key) => 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 = 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.
+          h(
+            child.type,
+            { ...child.props ?? {}, isCurrent: isLast },
+            child.children
+          )
+        );
+        items.push(wrapped);
+        if (!isLast) items.push(sep(i));
+      });
+      return h(
+        "nav",
+        {
+          ...attrs,
+          "aria-label": t("breadcrumb.label"),
+          "data-iris-breadcrumb": ""
+        },
+        h(
+          "ol",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "6px",
+              margin: "0",
+              padding: "0",
+              listStyle: "none",
+              fontSize: "14px"
+            }
+          },
+          items
+        )
+      );
+    };
+  }
+});
+var IrisBreadcrumbItem = 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 h("a", { ...baseAttrs, href: props.href }, slots.default?.());
+      }
+      return h("span", baseAttrs, slots.default?.());
+    };
+  }
+});
+
+// src/admin/AdminBreadcrumb.ts
+var IrisAdminBreadcrumb = 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 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(
+                h(IrisIcon, { name: node.icon, size: 14, style: { marginInlineEnd: "4px" } })
+              );
+            }
+            content.push(h("span", node.title));
+            return 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 = ref(nav.getState());
+  const unsubscribe = nav.subscribe((next) => {
+    state.value = next;
+  });
+  onBeforeUnmount(unsubscribe);
+  return {
+    tabs: computed(() => state.value.tabs),
+    activeKey: computed(() => state.value.activeKey),
+    cacheKeys: 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
+  };
+}
+
+// src/primitives/dropdown/context.ts
+var DropdownContextKey = /* @__PURE__ */ Symbol("IrisDropdown");
+
+// src/primitives/dropdown/Dropdown.ts
+var IrisDropdown = 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 = computed(() => props.open !== void 0);
+    const machine = createFloatingMachine(props.defaultOpen ? "open" : "closed");
+    const { state, send } = useMachine(machine);
+    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 = 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);
+    };
+    provide(DropdownContextKey, {
+      open,
+      setOpen,
+      triggerRef: ref(null),
+      contentRef: ref(null),
+      contentId: useId(),
+      placement: props.placement,
+      offset: props.offset
+    });
+    return () => slots.default?.();
+  }
+});
+var IrisDropdownTrigger = defineComponent({
+  name: "IrisDropdownTrigger",
+  inheritAttrs: false,
+  props: {
+    asChild: { type: Boolean, default: false }
+  },
+  setup(props, { slots, attrs }) {
+    const ctx = 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 h(root.type, merged, root.children);
+      }
+      return h("button", { type: "button", ...attrs, ...triggerProps }, slots.default?.());
+    };
+  }
+});
+var IrisDropdownMenu = defineComponent({
+  name: "IrisDropdownMenu",
+  inheritAttrs: false,
+  props: {
+    teleport: {
+      type: [String, Object, Boolean],
+      default: "body"
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const ctx = inject(DropdownContextKey);
+    if (!ctx) {
+      throw new Error("[iris-ui] IrisDropdownMenu must be a descendant of IrisDropdown");
+    }
+    const innerRef = ref(null);
+    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)
+    });
+    watch(ctx.open, async (open) => {
+      if (open) {
+        await 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[nextEnabledIndex(index, 1, items.length)]?.focus();
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          items[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 = 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 = 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 h(Teleport, { to: props.teleport }, [menuNode]);
+    };
+  }
+});
+var IrisDropdownItem = 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 = inject(DropdownContextKey);
+    if (!ctx) {
+      throw new Error("[iris-ui] IrisDropdownItem must be a descendant of IrisDropdownMenu");
+    }
+    const hovered = 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 () => 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 = defineComponent({
+  name: "IrisDropdownSeparator",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    return () => 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 = 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 && isClosable(cur)) {
+          e.preventDefault();
+          close(cur.key);
+          void 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 nextTick(() => focusTab(root, key));
+    };
+    const chip = (tab) => {
+      const active = tab.key === t.activeKey.value;
+      const closable = isClosable(tab);
+      const labelChildren = [];
+      if (tab.icon) labelChildren.push(h(IrisIcon, { name: tab.icon, size: 14 }));
+      labelChildren.push(h("span", { style: { whiteSpace: "nowrap" } }, tab.title));
+      const label = 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 ? 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);
+          }
+        },
+        [h(IrisIcon, { name: "x", size: 12 })]
+      ) : tab.pinned ? h(IrisIcon, { name: "check-circle", size: 12, style: { opacity: "0.5" } }) : null;
+      return 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) => h(IrisDropdownItem, { disabled, onSelect: run }, { default: () => label });
+    const actionsMenu = () => h(IrisDropdown, null, {
+      default: () => [
+        h(
+          IrisDropdownTrigger,
+          { "aria-label": tr("admin.tabActions") },
+          {
+            default: () => 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"
+                }
+              },
+              [h(IrisIcon, { name: "more-horizontal", size: 16 })]
+            )
+          }
+        ),
+        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)),
+              h(IrisDropdownSeparator),
+              action(tr("admin.closeOthers"), () => props.nav.closeOthers(key)),
+              action(tr("admin.closeAll"), () => props.nav.closeAll())
+            ];
+          }
+        })
+      ]
+    });
+    return () => 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 ?? {}
+        }
+      },
+      [
+        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 useAdminShell(config) {
+  const { defaultActiveKey, onActiveKeyChange, onSelect, tabs } = config;
+  const menus = () => toValue(config.menus);
+  const activeKeyProp = () => toValue(config.activeKey);
+  const activeControlled = () => activeKeyProp() !== void 0;
+  const shell = createAdminShell({
+    menus: menus(),
+    defaultActiveKey: activeKeyProp() ?? defaultActiveKey,
+    tabs,
+    onActiveChange: (key, node) => {
+      onActiveKeyChange?.(key);
+      if (node) onSelect?.(key, node);
+    }
+  });
+  const state = useStore(shell.store);
+  watch(menus, (next) => shell.setMenus(next), { flush: "sync" });
+  watchEffect(() => {
+    const prop = activeKeyProp();
+    if (prop !== void 0 && shell.getActiveKey() !== prop) {
+      shell.store.setState({ activeKey: prop });
+    }
+  });
+  const activeKey = computed(
+    () => activeControlled() ? activeKeyProp() ?? "" : state.value.activeKey ?? ""
+  );
+  return {
+    activeKey,
+    navigate: shell.navigate,
+    syncFromTab: shell.syncFromTab,
+    breadcrumb: computed(() => activeKey.value ? findNavPath(menus(), activeKey.value) : [])
+  };
+}
+
+// src/admin/AdminLayout.ts
+var IrisAdminLayout = 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 = computed(() => props.collapsed !== void 0);
+    const internalCollapsed = ref(props.defaultCollapsed);
+    const collapsed = 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 = ref(props.tabs.getState().activeKey);
+      const unsubscribe = props.tabs.subscribe((s) => {
+        tabsActive.value = s.activeKey;
+      });
+      onBeforeUnmount(unsubscribe);
+      watch(tabsActive, (key) => {
+        if (key) syncFromTab(key);
+      });
+    }
+    const renderLogo = (state) => {
+      if (slots.logo) return slots.logo(state);
+      return 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
+          }
+        },
+        [
+          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
+              }
+            },
+            [h(IrisIcon, { name: "menu", size: 18 })]
+          ),
+          state.collapsed ? null : h("span", props.appTitle)
+        ]
+      );
+    };
+    const collapseToggle = () => 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)
+      },
+      [h(IrisIcon, { name: collapsed.value ? "chevron-right" : "menu", size: 18 })]
+    );
+    const renderHeaderBar = () => 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 ? h(IrisAdminBreadcrumb, { trail: trail.value, hideSingle: false, onSelect }) : null,
+        h("div", { style: { flex: "1" } }),
+        slots.toolbar ? h(
+          "div",
+          {
+            "data-iris-admin-toolbar": "",
+            style: { display: "flex", alignItems: "center", gap: "8px" }
+          },
+          slots.toolbar()
+        ) : null
+      ]
+    );
+    const renderContent = () => h(
+      "div",
+      { "data-iris-admin-content": "", style: { padding: "16px" } },
+      slots.default?.({ activeKey: activeKey.value }) ?? []
+    );
+    return () => {
+      if (props.mode === "full-content") {
+        return h(
+          "div",
+          {
+            ...attrs,
+            "data-iris-admin-layout": "",
+            "data-mode": "full-content",
+            style: {
+              height: "100%",
+              ...attrs.style ?? {}
+            }
+          },
+          slots.default?.({ activeKey: activeKey.value }) ?? []
+        );
+      }
+      return 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) => 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),
+              h(
+                "div",
+                { style: { flex: "1", overflowY: "auto", overflowX: "hidden", padding: "8px" } },
+                [
+                  h(IrisNavMenu, {
+                    items: props.menus,
+                    activeKey: activeKey.value,
+                    collapsed: state.collapsed,
+                    onSelect
+                  })
+                ]
+              )
+            ]
+          ),
+          default: () => h(
+            IrisHeaderLayout,
+            { sticky: true },
+            {
+              header: () => h("div", { "data-iris-admin-header": "" }, [
+                renderHeaderBar(),
+                props.tabs ? h(IrisAdminTabs, { nav: props.tabs }) : null
+              ]),
+              default: () => renderContent(),
+              ...slots.footer ? { footer: () => slots.footer() } : {}
+            }
+          )
+        }
+      );
+    };
+  }
+});
+
+export { DropdownContextKey, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, useAdminShell, useTabsNav };
+//# sourceMappingURL=chunk-FJBYAIL4.js.map
+//# sourceMappingURL=chunk-FJBYAIL4.js.map