@wow-two-beta/ui-vue 0.0.2

package/dist/chunks/NotificationItem.vue_vue_type_script_setup_true_lang-gi0uHIuK.js

@@ -0,0 +1,2727 @@
+import { defineComponent, useAttrs, useTemplateRef, computed, openBlock, createElementBlock, mergeProps, renderSlot, createElementVNode, normalizeStyle, normalizeClass, useSlots, getCurrentInstance, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, createVNode, unref, Fragment, renderList, shallowRef, ref, onMounted, watch, onUnmounted, createSlots, normalizeProps, guardReactiveProps, provide, withDirectives, vShow, inject } from "vue";
+import { tv } from "tailwind-variants";
+import { c as cn } from "./cn-CzDCF-Ah.js";
+import { P as ProgressTone } from "./ProgressTone-BpLPUptx.js";
+import { X, Check, Minus, TrendingDown, TrendingUp, ChevronDown, Bell } from "lucide-vue-next";
+import { _ as _sfc_main$s } from "./Icon.vue_vue_type_script_setup_true_lang-DgwdLCRR.js";
+import { S as Severity } from "./Severity-D0C5oAt-.js";
+import { _ as _sfc_main$t, S as SpinnerTone } from "./Spinner.vue_vue_type_script_setup_true_lang-C4lNiUOm.js";
+import { S as Size } from "./StyleTokens-Bkz7Dm5L.js";
+import { O as Orientation } from "./Orientation-u-sYunuG.js";
+import { S as StatusTone } from "./StatusTone-BoPK1s09.js";
+import { f as feedbackBus } from "./FeedbackBus-BRbyOMCn.js";
+import { s as surfaceVariants } from "./SurfaceStyles-ChdpGRBO.js";
+import { O as OverlayPosition } from "./OverlayPosition-BNybkMGG.js";
+import { _ as _sfc_main$u } from "./Portal.vue_vue_type_script_setup_true_lang-CF3R0VCZ.js";
+import { P as Presence } from "./Presence-C7IJvh_P.js";
+import { _ as _sfc_main$v } from "./Announce.vue_vue_type_script_setup_true_lang-CDTltiIl.js";
+import { _ as _sfc_main$w } from "./Backdrop.vue_vue_type_script_setup_true_lang-DZUhGY9p.js";
+import { u as useControlled } from "./useControlled-B6M4kTLn.js";
+import { u as useId } from "./useId-CtgAhGrn.js";
+import { u as useReducedMotion } from "./useReducedMotion-B9LqQ3UT.js";
+import { K as Key } from "./KeyboardExtensions-CQlkK53D.js";
+import { r as renderableChildren } from "./Slot-D2lIitvV.js";
+const SkeletonShape = {
+  /** Refers to a rounded rectangle block. */
+  Rect: "rect",
+  /** Refers to a text line (fixed height, small radius). */
+  Text: "text",
+  /** Refers to a circle (avatar / icon placeholder). */
+  Circle: "circle"
+};
+const skeletonVariants = tv({
+  base: "animate-pulse bg-muted",
+  variants: {
+    shape: {
+      rect: "rounded-md",
+      text: "h-4 rounded-sm",
+      circle: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    shape: "rect"
+  }
+});
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...{ name: "Skeleton", inheritAttrs: false },
+  __name: "Skeleton",
+  props: {
+    shape: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(skeletonVariants({ shape: props.shape }), attrs.class)
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        "aria-hidden": "true"
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const progressTrackVariants = tv({
+  base: "h-2 w-full overflow-hidden rounded-full bg-muted",
+  variants: {
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const progressFillVariants = tv({
+  base: "h-full rounded-full transition-[width] duration-300",
+  variants: {
+    tone: {
+      brand: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      danger: "bg-destructive",
+      neutral: "bg-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    tone: "brand"
+  }
+});
+const _hoisted_1$l = ["aria-label", "aria-valuemax", "aria-valuenow"];
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...{ name: "ProgressBar", inheritAttrs: false },
+  __name: "ProgressBar",
+  props: {
+    size: {},
+    tone: {},
+    value: {},
+    max: { default: 100 },
+    label: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const determinate = computed(() => typeof props.value === "number");
+    const pct = computed(
+      () => determinate.value ? Math.min(100, Math.max(0, (props.value ?? 0) / props.max * 100)) : void 0
+    );
+    const classes = computed(
+      () => cn(
+        progressTrackVariants({
+          /* `size` is the 5-member `Size`; the track defines only sm/md/lg.
+             Cast to the tv key type — an out-of-range value falls through to
+             the tv default. */
+          size: props.size
+        }),
+        attrs.class
+      )
+    );
+    const fillClasses = computed(
+      () => cn(
+        progressFillVariants({ tone: props.tone }),
+        !determinate.value && "w-1/3 animate-[indeterminate_1.4s_ease-in-out_infinite]"
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "progressbar",
+        "aria-label": props.label,
+        "aria-valuemin": 0,
+        "aria-valuemax": props.max,
+        "aria-valuenow": determinate.value ? props.value : void 0
+      }, rest.value, { class: classes.value }), [
+        createElementVNode("div", {
+          class: normalizeClass(fillClasses.value),
+          style: normalizeStyle(determinate.value ? { width: `${pct.value}%` } : void 0)
+        }, null, 6)
+      ], 16, _hoisted_1$l);
+    };
+  }
+});
+const _hoisted_1$k = ["aria-label", "aria-valuemax", "aria-valuenow"];
+const _hoisted_2$e = ["width", "height", "viewBox"];
+const _hoisted_3$b = ["cx", "cy", "r", "stroke-width"];
+const _hoisted_4$9 = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...{ name: "ProgressCircle", inheritAttrs: false },
+  __name: "ProgressCircle",
+  props: {
+    value: {},
+    max: { default: 100 },
+    size: { default: 40 },
+    thickness: { default: 4 },
+    tone: { default: ProgressTone.Brand },
+    label: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const TONE_CLASS = {
+      brand: "text-primary",
+      success: "text-success",
+      warning: "text-warning",
+      danger: "text-destructive",
+      neutral: "text-muted-foreground"
+    };
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const determinate = computed(() => typeof props.value === "number");
+    const radius = computed(() => (props.size - props.thickness) / 2);
+    const circumference = computed(() => 2 * Math.PI * radius.value);
+    const pct = computed(
+      () => determinate.value ? Math.min(100, Math.max(0, (props.value ?? 0) / props.max * 100)) : 25
+    );
+    const offset = computed(() => circumference.value - pct.value / 100 * circumference.value);
+    const classes = computed(
+      () => cn(
+        "inline-block",
+        !determinate.value && "animate-spin",
+        TONE_CLASS[props.tone],
+        attrs.class
+      )
+    );
+    const boxStyle = computed(() => ({ width: `${props.size}px`, height: `${props.size}px` }));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "progressbar",
+        "aria-label": props.label,
+        "aria-valuemin": 0,
+        "aria-valuemax": props.max,
+        "aria-valuenow": determinate.value ? props.value : void 0,
+        style: boxStyle.value
+      }, rest.value, { class: classes.value }), [
+        (openBlock(), createElementBlock("svg", {
+          width: props.size,
+          height: props.size,
+          viewBox: `0 0 ${props.size} ${props.size}`
+        }, [
+          createElementVNode("circle", {
+            cx: props.size / 2,
+            cy: props.size / 2,
+            r: radius.value,
+            stroke: "currentColor",
+            "stroke-width": props.thickness,
+            fill: "none",
+            opacity: 0.2
+          }, null, 8, _hoisted_3$b),
+          createElementVNode("circle", {
+            cx: props.size / 2,
+            cy: props.size / 2,
+            r: radius.value,
+            stroke: "currentColor",
+            "stroke-width": props.thickness,
+            "stroke-linecap": "round",
+            fill: "none",
+            "stroke-dasharray": circumference.value,
+            "stroke-dashoffset": offset.value,
+            transform: `rotate(-90 ${props.size / 2} ${props.size / 2})`,
+            style: { transition: "stroke-dashoffset 300ms ease" }
+          }, null, 8, _hoisted_4$9)
+        ], 8, _hoisted_2$e))
+      ], 16, _hoisted_1$k);
+    };
+  }
+});
+const alertSimpleVariants = tv({
+  base: "rounded-md border px-4 py-3 text-sm",
+  variants: {
+    severity: {
+      info: "border-info-soft bg-info-soft text-info-soft-foreground",
+      success: "border-success-soft bg-success-soft text-success-soft-foreground",
+      warning: "border-warning-soft bg-warning-soft text-warning-soft-foreground",
+      danger: "border-destructive-soft bg-destructive-soft text-destructive-soft-foreground",
+      neutral: "border-border bg-muted text-foreground"
+    }
+  },
+  defaultVariants: {
+    severity: "info"
+  }
+});
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{ name: "AlertSimple", inheritAttrs: false },
+  __name: "AlertSimple",
+  props: {
+    severity: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(alertSimpleVariants({ severity: props.severity }), attrs.class)
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "status"
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const bannerSimpleVariants = tv({
+  base: "w-full px-6 py-3 text-sm",
+  variants: {
+    severity: {
+      info: "bg-info text-info-foreground",
+      success: "bg-success text-success-foreground",
+      warning: "bg-warning text-warning-foreground",
+      danger: "bg-destructive text-destructive-foreground",
+      neutral: "bg-inverse text-inverse-foreground"
+    }
+  },
+  defaultVariants: {
+    severity: "info"
+  }
+});
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...{ name: "BannerSimple", inheritAttrs: false },
+  __name: "BannerSimple",
+  props: {
+    severity: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(bannerSimpleVariants({ severity: props.severity }), attrs.class)
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "status"
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...{ name: "ToastSimple", inheritAttrs: false },
+  __name: "ToastSimple",
+  props: {
+    severity: { default: "neutral" }
+  },
+  setup(__props, { expose: __expose }) {
+    const SEVERITY_TO_TONE = {
+      info: "info",
+      success: "success",
+      warning: "warning",
+      danger: "danger",
+      neutral: "neutral"
+    };
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        "pointer-events-auto text-sm",
+        surfaceVariants({
+          variant: "surface",
+          tone: SEVERITY_TO_TONE[props.severity],
+          radius: "md",
+          padding: "md",
+          elevation: 3
+        }),
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "status",
+        "aria-live": "polite"
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const toastSimpleVariants = tv({
+  base: "pointer-events-auto rounded-md border bg-popover text-popover-foreground shadow-lg px-4 py-3 text-sm",
+  variants: {
+    severity: {
+      info: "border-info-soft",
+      success: "border-success-soft",
+      warning: "border-warning-soft",
+      danger: "border-destructive-soft",
+      neutral: "border-border"
+    }
+  },
+  defaultVariants: {
+    severity: "neutral"
+  }
+});
+const _hoisted_1$j = {
+  key: 0,
+  class: "mt-0.5 shrink-0"
+};
+const _hoisted_2$d = { class: "min-w-0 flex-1" };
+const _hoisted_3$a = {
+  key: 0,
+  class: "font-medium"
+};
+const _hoisted_4$8 = {
+  key: 2,
+  class: "mt-2 flex flex-wrap items-center gap-2"
+};
+const _hoisted_5$6 = ["aria-label"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...{ name: "Alert", inheritAttrs: false },
+  __name: "Alert",
+  props: {
+    severity: {},
+    icon: {},
+    title: {},
+    description: {},
+    actions: {},
+    closeLabel: { default: "Dismiss" }
+  },
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const CloseIcon = X;
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const instance = getCurrentInstance();
+    const inner = useTemplateRef("inner");
+    const hasClose = () => Boolean(instance?.vnode.props?.onClose);
+    const hasIcon = computed(() => Boolean(props.icon) || Boolean(slots.icon));
+    const hasTitle = computed(() => Boolean(props.title) || Boolean(slots.title));
+    const hasDescription = computed(() => Boolean(props.description) || Boolean(slots.description));
+    const hasActions = computed(() => Boolean(props.actions) || Boolean(slots.actions));
+    const classes = computed(() => cn("flex items-start gap-3", attrs.class));
+    const descriptionClasses = computed(
+      () => cn("text-sm", hasTitle.value && "mt-0.5 opacity-90")
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    const el = computed(() => inner.value?.el ?? null);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$o, mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        severity: props.severity
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          hasIcon.value ? (openBlock(), createElementBlock("span", _hoisted_1$j, [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              createTextVNode(toDisplayString(props.icon), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2$d, [
+            hasTitle.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(props.title), 1)
+              ])
+            ])) : createCommentVNode("", true),
+            hasDescription.value ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(descriptionClasses.value)
+            }, [
+              renderSlot(_ctx.$slots, "description", {}, () => [
+                createTextVNode(toDisplayString(props.description), 1)
+              ])
+            ], 2)) : createCommentVNode("", true),
+            hasActions.value ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
+              renderSlot(_ctx.$slots, "actions", {}, () => [
+                createTextVNode(toDisplayString(props.actions), 1)
+              ])
+            ])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          hasClose() ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            type: "button",
+            "aria-label": props.closeLabel,
+            class: "-mr-1 grid h-6 w-6 shrink-0 place-items-center rounded text-current opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current",
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+          }, [
+            createVNode(unref(_sfc_main$s), {
+              icon: unref(CloseIcon),
+              size: 14
+            }, null, 8, ["icon"])
+          ], 8, _hoisted_5$6)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["severity", "class"]);
+    };
+  }
+});
+const _hoisted_1$i = {
+  key: 0,
+  class: "shrink-0"
+};
+const _hoisted_2$c = { class: "flex min-w-0 flex-1 items-baseline gap-3" };
+const _hoisted_3$9 = {
+  key: 0,
+  class: "font-medium"
+};
+const _hoisted_4$7 = {
+  key: 1,
+  class: "opacity-90"
+};
+const _hoisted_5$5 = {
+  key: 1,
+  class: "flex shrink-0 items-center gap-2"
+};
+const _hoisted_6$4 = ["aria-label"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...{ name: "Banner", inheritAttrs: false },
+  __name: "Banner",
+  props: {
+    severity: {},
+    icon: {},
+    title: {},
+    description: {},
+    actions: {},
+    closeLabel: { default: "Dismiss" }
+  },
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const CloseIcon = X;
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const instance = getCurrentInstance();
+    const inner = useTemplateRef("inner");
+    const hasClose = () => Boolean(instance?.vnode.props?.onClose);
+    const hasIcon = computed(() => Boolean(props.icon) || Boolean(slots.icon));
+    const hasTitle = computed(() => Boolean(props.title) || Boolean(slots.title));
+    const hasDescription = computed(() => Boolean(props.description) || Boolean(slots.description));
+    const hasActions = computed(() => Boolean(props.actions) || Boolean(slots.actions));
+    const classes = computed(() => cn("flex items-center gap-4", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    const el = computed(() => inner.value?.el ?? null);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$n, mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        severity: props.severity
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          hasIcon.value ? (openBlock(), createElementBlock("span", _hoisted_1$i, [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              createTextVNode(toDisplayString(props.icon), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2$c, [
+            hasTitle.value ? (openBlock(), createElementBlock("span", _hoisted_3$9, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(props.title), 1)
+              ])
+            ])) : createCommentVNode("", true),
+            hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_4$7, [
+              renderSlot(_ctx.$slots, "description", {}, () => [
+                createTextVNode(toDisplayString(props.description), 1)
+              ])
+            ])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          hasActions.value ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
+            renderSlot(_ctx.$slots, "actions", {}, () => [
+              createTextVNode(toDisplayString(props.actions), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          hasClose() ? (openBlock(), createElementBlock("button", {
+            key: 2,
+            type: "button",
+            "aria-label": props.closeLabel,
+            class: "-mr-2 grid h-7 w-7 shrink-0 place-items-center rounded text-current opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current",
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+          }, [
+            createVNode(unref(_sfc_main$s), {
+              icon: unref(CloseIcon),
+              size: 16
+            }, null, 8, ["icon"])
+          ], 8, _hoisted_6$4)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["severity", "class"]);
+    };
+  }
+});
+const _hoisted_1$h = {
+  key: 0,
+  class: "mt-0.5 shrink-0"
+};
+const _hoisted_2$b = { class: "min-w-0 flex-1" };
+const _hoisted_3$8 = {
+  key: 0,
+  class: "font-medium"
+};
+const _hoisted_4$6 = {
+  key: 2,
+  class: "mt-2 flex flex-wrap items-center gap-2"
+};
+const _hoisted_5$4 = ["aria-label"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...{ name: "Toast", inheritAttrs: false },
+  __name: "Toast",
+  props: {
+    severity: {},
+    icon: {},
+    title: {},
+    description: {},
+    actions: {},
+    closeLabel: { default: "Dismiss" }
+  },
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const CloseIcon = X;
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const instance = getCurrentInstance();
+    const inner = useTemplateRef("inner");
+    const hasClose = () => Boolean(instance?.vnode.props?.onClose);
+    const hasIcon = computed(() => Boolean(props.icon) || Boolean(slots.icon));
+    const hasTitle = computed(() => Boolean(props.title) || Boolean(slots.title));
+    const hasDescription = computed(() => Boolean(props.description) || Boolean(slots.description));
+    const hasActions = computed(() => Boolean(props.actions) || Boolean(slots.actions));
+    const classes = computed(() => cn("flex items-start gap-3", attrs.class));
+    const descriptionClasses = computed(
+      () => cn("text-sm", hasTitle.value && "mt-0.5 text-muted-foreground")
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    const el = computed(() => inner.value?.el ?? null);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$m, mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        severity: props.severity
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          hasIcon.value ? (openBlock(), createElementBlock("span", _hoisted_1$h, [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              createTextVNode(toDisplayString(props.icon), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2$b, [
+            hasTitle.value ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(props.title), 1)
+              ])
+            ])) : createCommentVNode("", true),
+            hasDescription.value ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(descriptionClasses.value)
+            }, [
+              renderSlot(_ctx.$slots, "description", {}, () => [
+                createTextVNode(toDisplayString(props.description), 1)
+              ])
+            ], 2)) : createCommentVNode("", true),
+            hasActions.value ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
+              renderSlot(_ctx.$slots, "actions", {}, () => [
+                createTextVNode(toDisplayString(props.actions), 1)
+              ])
+            ])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          hasClose() ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            type: "button",
+            "aria-label": props.closeLabel,
+            class: "-mr-1 grid h-6 w-6 shrink-0 place-items-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+          }, [
+            createVNode(unref(_sfc_main$s), {
+              icon: unref(CloseIcon),
+              size: 14
+            }, null, 8, ["icon"])
+          ], 8, _hoisted_5$4)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["severity", "class"]);
+    };
+  }
+});
+const _hoisted_1$g = {
+  key: 0,
+  class: "mt-0.5 shrink-0"
+};
+const _hoisted_2$a = { class: "min-w-0 flex-1" };
+const _hoisted_3$7 = {
+  key: 0,
+  class: "mb-0.5 font-medium"
+};
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...{ name: "Callout", inheritAttrs: false },
+  __name: "Callout",
+  props: {
+    severity: { default: Severity.Info },
+    icon: {},
+    title: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const SEVERITY = {
+      info: "border-l-info text-foreground",
+      success: "border-l-success text-foreground",
+      warning: "border-l-warning text-foreground",
+      danger: "border-l-destructive text-foreground",
+      neutral: "border-l-border text-foreground"
+    };
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const hasIcon = computed(() => Boolean(props.icon) || Boolean(slots.icon));
+    const hasTitle = computed(() => Boolean(props.title) || Boolean(slots.title));
+    const classes = computed(
+      () => cn(
+        "flex items-start gap-3 rounded-md border-l-4 bg-card px-4 py-3 text-sm",
+        SEVERITY[props.severity],
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        hasIcon.value ? (openBlock(), createElementBlock("span", _hoisted_1$g, [
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            createTextVNode(toDisplayString(props.icon), 1)
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$a, [
+          hasTitle.value ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createTextVNode(toDisplayString(props.title), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 16);
+    };
+  }
+});
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...{ name: "InlineSpinner", inheritAttrs: false },
+  __name: "InlineSpinner",
+  props: {
+    size: { default: "sm" },
+    tone: { default: "default" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        "inline-flex items-center gap-2 text-sm text-muted-foreground",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        createVNode(_sfc_main$t, {
+          size: props.size,
+          tone: props.tone
+        }, null, 8, ["size", "tone"]),
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          _cache[0] || (_cache[0] = createTextVNode("Loading…", -1))
+        ])
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$f = {
+  key: 0,
+  class: "text-sm font-medium text-foreground"
+};
+const _hoisted_2$9 = {
+  key: 1,
+  class: "text-sm text-muted-foreground"
+};
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...{ name: "LoadingState", inheritAttrs: false },
+  __name: "LoadingState",
+  props: {
+    title: { default: "Loading…" },
+    description: {},
+    size: { default: Size.Lg }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const hasTitle = computed(() => Boolean(props.title) || Boolean(slots.title));
+    const hasDescription = computed(() => Boolean(props.description) || Boolean(slots.description));
+    const classes = computed(
+      () => cn(
+        "flex flex-col items-center justify-center gap-3 py-12 text-center",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "status"
+      }, rest.value, { class: classes.value }), [
+        createVNode(_sfc_main$t, {
+          size: props.size,
+          tone: "brand"
+        }, null, 8, ["size"]),
+        hasTitle.value ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+          renderSlot(_ctx.$slots, "title", {}, () => [
+            createTextVNode(toDisplayString(props.title), 1)
+          ])
+        ])) : createCommentVNode("", true),
+        hasDescription.value ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
+          renderSlot(_ctx.$slots, "description", {}, () => [
+            createTextVNode(toDisplayString(props.description), 1)
+          ])
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$e = ["aria-current"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...{ name: "ProgressSteps", inheritAttrs: false },
+  __name: "ProgressSteps",
+  props: {
+    steps: {},
+    current: {},
+    orientation: { default: Orientation.Horizontal }
+  },
+  setup(__props, { expose: __expose }) {
+    const CheckIcon = Check;
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const isHorizontal = computed(() => props.orientation === Orientation.Horizontal);
+    const classes = computed(
+      () => cn(
+        "flex",
+        isHorizontal.value ? "flex-row items-center gap-2" : "flex-col gap-3",
+        attrs.class
+      )
+    );
+    const statusAt = (i) => i < props.current ? "complete" : i === props.current ? "current" : "upcoming";
+    const itemClasses = (i) => cn("flex items-center gap-2", isHorizontal.value && i < props.steps.length - 1 && "flex-1");
+    const markerClasses = (i) => {
+      const status = statusAt(i);
+      return cn(
+        "grid h-7 w-7 place-items-center rounded-full text-xs font-medium",
+        status === "complete" && "bg-primary text-primary-foreground",
+        status === "current" && "border-2 border-primary text-primary",
+        status === "upcoming" && "border border-border text-muted-foreground"
+      );
+    };
+    const labelClasses = (i) => cn("text-sm", statusAt(i) === "upcoming" ? "text-muted-foreground" : "text-foreground");
+    const connectorClasses = (i) => cn("h-px flex-1", i < props.current ? "bg-primary" : "bg-border");
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ol", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(props.steps, (label, i) => {
+          return openBlock(), createElementBlock("li", {
+            key: i,
+            class: normalizeClass(itemClasses(i))
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(markerClasses(i)),
+              "aria-current": statusAt(i) === "current" ? "step" : void 0
+            }, [
+              statusAt(i) === "complete" ? (openBlock(), createBlock(unref(_sfc_main$s), {
+                key: 0,
+                icon: unref(CheckIcon),
+                size: 14
+              }, null, 8, ["icon"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(i + 1), 1)
+              ], 64))
+            ], 10, _hoisted_1$e),
+            createElementVNode("span", {
+              class: normalizeClass(labelClasses(i))
+            }, toDisplayString(label), 3),
+            isHorizontal.value && i < props.steps.length - 1 ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(connectorClasses(i)),
+              "aria-hidden": "true"
+            }, null, 2)) : createCommentVNode("", true)
+          ], 2);
+        }), 128))
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$d = { class: "relative mt-1 inline-flex" };
+const _hoisted_2$8 = { class: "min-w-0 flex-1" };
+const _hoisted_3$6 = { class: "text-sm font-medium text-foreground" };
+const _hoisted_4$5 = {
+  key: 0,
+  class: "text-xs text-muted-foreground"
+};
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...{ name: "StatusIndicator", inheritAttrs: false },
+  __name: "StatusIndicator",
+  props: {
+    tone: { default: StatusTone.Success },
+    label: {},
+    description: {},
+    hasPulse: { type: Boolean }
+  },
+  setup(__props, { expose: __expose }) {
+    const TONE = {
+      success: "bg-success",
+      warning: "bg-warning",
+      destructive: "bg-destructive",
+      info: "bg-info",
+      neutral: "bg-muted-foreground"
+    };
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const hasDescription = computed(() => Boolean(props.description) || Boolean(slots.description));
+    const dotClasses = computed(() => cn("inline-block h-2.5 w-2.5 rounded-full", TONE[props.tone]));
+    const pulseClasses = computed(
+      () => cn("absolute inset-0 inline-block rounded-full opacity-75 animate-ping", TONE[props.tone])
+    );
+    const classes = computed(
+      () => cn("flex items-start gap-3", attrs.class)
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        createElementVNode("span", _hoisted_1$d, [
+          createElementVNode("span", {
+            class: normalizeClass(dotClasses.value)
+          }, null, 2),
+          props.hasPulse ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass(pulseClasses.value)
+          }, null, 2)) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_2$8, [
+          createElementVNode("div", _hoisted_3$6, [
+            renderSlot(_ctx.$slots, "label", {}, () => [
+              createTextVNode(toDisplayString(props.label), 1)
+            ])
+          ]),
+          hasDescription.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(props.description), 1)
+            ])
+          ])) : createCommentVNode("", true)
+        ])
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$c = ["aria-label", "aria-valuemax", "aria-valuenow"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...{ name: "MeterBar", inheritAttrs: false },
+  __name: "MeterBar",
+  props: {
+    value: {},
+    max: { default: 100 },
+    thresholds: {},
+    size: { default: Size.Md },
+    label: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const SIZE = {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    };
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const tone = computed(() => {
+      const [good, warn] = props.thresholds ?? [props.max * 0.7, props.max * 0.9];
+      return props.value <= good ? "bg-success" : props.value <= warn ? "bg-warning" : "bg-destructive";
+    });
+    const pct = computed(() => Math.min(100, Math.max(0, props.value / props.max * 100)));
+    const classes = computed(
+      () => cn(
+        "w-full overflow-hidden rounded-full bg-muted",
+        SIZE[props.size] ?? SIZE.md,
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "meter",
+        "aria-label": props.label,
+        "aria-valuemin": 0,
+        "aria-valuemax": props.max,
+        "aria-valuenow": props.value
+      }, rest.value, { class: classes.value }), [
+        createElementVNode("div", {
+          class: normalizeClass(unref(cn)("h-full rounded-full transition-[width] duration-300", tone.value)),
+          style: normalizeStyle({ width: `${pct.value}%` })
+        }, null, 6)
+      ], 16, _hoisted_1$c);
+    };
+  }
+});
+const _hoisted_1$b = {
+  key: 0,
+  class: "text-muted-foreground"
+};
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...{ name: "TrendIndicator", inheritAttrs: false },
+  __name: "TrendIndicator",
+  props: {
+    value: {},
+    format: {},
+    isInverse: { type: Boolean },
+    label: {},
+    size: { default: Size.Sm }
+  },
+  setup(__props, { expose: __expose }) {
+    const SIZE_TEXT = {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base"
+    };
+    const SIZE_ICON = {
+      xs: 12,
+      sm: 14,
+      md: 16
+    };
+    const ARROW = {
+      up: TrendingUp,
+      down: TrendingDown,
+      flat: Minus
+    };
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const direction = computed(
+      () => props.value > 0 ? "up" : props.value < 0 ? "down" : "flat"
+    );
+    const positive = computed(
+      () => direction.value === "flat" ? false : direction.value === "up" !== Boolean(props.isInverse)
+    );
+    const tone = computed(
+      () => direction.value === "flat" ? "text-muted-foreground" : positive.value ? "text-success" : "text-destructive"
+    );
+    const arrow = computed(() => ARROW[direction.value]);
+    const display = computed(
+      () => props.format ? props.format(props.value) : `${props.value > 0 ? "+" : ""}${props.value}%`
+    );
+    const iconSize = computed(() => SIZE_ICON[props.size] ?? SIZE_ICON.md);
+    const hasLabel = computed(() => Boolean(props.label) || Boolean(slots.label));
+    const classes = computed(
+      () => cn(
+        "inline-flex items-center gap-1 font-medium",
+        SIZE_TEXT[props.size] ?? SIZE_TEXT.md,
+        tone.value,
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        createVNode(unref(_sfc_main$s), {
+          icon: arrow.value,
+          size: iconSize.value
+        }, null, 8, ["icon", "size"]),
+        renderSlot(_ctx.$slots, "value", {
+          value: props.value,
+          display: display.value
+        }, () => [
+          createTextVNode(toDisplayString(display.value), 1)
+        ]),
+        hasLabel.value ? (openBlock(), createElementBlock("span", _hoisted_1$b, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(props.label), 1)
+          ])
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$a = ["onVnodeUnmounted"];
+function normalizeContent(content) {
+  return typeof content === "string" ? { title: content } : content;
+}
+class ToasterStore {
+  items = [];
+  listeners = /* @__PURE__ */ new Set();
+  idSeq = 0;
+  toast(opts) {
+    if (opts.key !== void 0) {
+      const existing = this.items.find((t) => t.key === opts.key);
+      if (existing) {
+        this.update(existing.id, opts);
+        return existing.id;
+      }
+    }
+    const id = `t_${++this.idSeq}`;
+    this.items = [...this.items, { id, ...opts, nonce: 0 }];
+    this.emit();
+    return id;
+  }
+  /** Merges a patch into an existing toast (content + severity + duration), refreshing its timer. */
+  update(id, patch) {
+    this.items = this.items.map((t) => t.id === id ? { ...t, ...patch, nonce: t.nonce + 1 } : t);
+    this.emit();
+  }
+  /** Shows a sticky loading toast, then updates it in place to success / error when `promise` settles. Returns `promise`. */
+  promise(promise, opts) {
+    const id = this.toast({ ...normalizeContent(opts.loading), severity: "info", duration: Infinity });
+    const settle = (content, severity) => this.update(id, { ...normalizeContent(content), severity, duration: opts.duration });
+    promise.then(
+      (value) => settle(typeof opts.success === "function" ? opts.success(value) : opts.success, "success"),
+      (err) => settle(typeof opts.error === "function" ? opts.error(err) : opts.error, "danger")
+    );
+    return promise;
+  }
+  dismiss(id) {
+    const entry = this.items.find((t) => t.id === id);
+    this.items = this.items.filter((t) => t.id !== id);
+    entry?.onDismiss?.();
+    this.emit();
+  }
+  dismissAll() {
+    const gone = this.items;
+    this.items = [];
+    for (const t of gone) t.onDismiss?.();
+    this.emit();
+  }
+  subscribe(fn) {
+    this.listeners.add(fn);
+    fn(this.items);
+    return () => {
+      this.listeners.delete(fn);
+    };
+  }
+  emit() {
+    for (const fn of this.listeners) fn(this.items);
+  }
+}
+const toaster = new ToasterStore();
+function useToaster() {
+  return {
+    toast: (opts) => toaster.toast(opts),
+    update: (id, patch) => toaster.update(id, patch),
+    promise: (promise, opts) => toaster.promise(promise, opts),
+    dismiss: (id) => toaster.dismiss(id),
+    dismissAll: () => toaster.dismissAll()
+  };
+}
+const POSITION_CLASSES = {
+  "top-right": "top-4 right-4 items-end",
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
+};
+const MOTION_CLASSES = {
+  "top-right": "motion-safe:data-[state=open]:animate-(--animate-slide-in-right) motion-safe:data-[state=closed]:animate-(--animate-slide-out-right) motion-reduce:animate-none",
+  "top-left": "motion-safe:data-[state=open]:animate-(--animate-slide-in-left) motion-safe:data-[state=closed]:animate-(--animate-slide-out-left) motion-reduce:animate-none",
+  "top-center": "motion-safe:data-[state=open]:animate-(--animate-slide-in-top) motion-safe:data-[state=closed]:animate-(--animate-slide-out-top) motion-reduce:animate-none",
+  "bottom-right": "motion-safe:data-[state=open]:animate-(--animate-slide-in-right) motion-safe:data-[state=closed]:animate-(--animate-slide-out-right) motion-reduce:animate-none",
+  "bottom-left": "motion-safe:data-[state=open]:animate-(--animate-slide-in-left) motion-safe:data-[state=closed]:animate-(--animate-slide-out-left) motion-reduce:animate-none",
+  "bottom-center": "motion-safe:data-[state=open]:animate-(--animate-slide-in-bottom) motion-safe:data-[state=closed]:animate-(--animate-slide-out-bottom) motion-reduce:animate-none"
+};
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...{ name: "Toaster", inheritAttrs: false },
+  __name: "Toaster",
+  props: {
+    position: { default: OverlayPosition.BottomRight },
+    max: { default: 5 },
+    defaultDuration: { default: 5e3 },
+    canPauseOnHover: { type: Boolean, default: true },
+    gap: { default: 8 }
+  },
+  setup(__props) {
+    const ToastNodeView = defineComponent({
+      name: "ToastNodeView",
+      props: { node: { type: [String, Object], required: true } },
+      setup: (nodeProps) => () => nodeProps.node
+    });
+    const props = __props;
+    const attrs = useAttrs();
+    const items = shallowRef([]);
+    const paused = ref(false);
+    const timers = /* @__PURE__ */ new Map();
+    const remaining = /* @__PURE__ */ new Map();
+    const startedAt = /* @__PURE__ */ new Map();
+    const nonces = /* @__PURE__ */ new Map();
+    let unsubscribe;
+    onMounted(() => {
+      unsubscribe = toaster.subscribe((next) => {
+        items.value = next;
+      });
+    });
+    const visible = computed(
+      () => items.value.slice(0, props.max).map((t) => ({
+        ...t,
+        resolvedDuration: t.duration ?? props.defaultDuration
+      }))
+    );
+    const visibleIds = computed(() => new Set(visible.value.map((v) => v.id)));
+    const exiting = shallowRef([]);
+    let prevVisible = [];
+    watch(
+      visibleIds,
+      (ids) => {
+        const gone = prevVisible.filter((p) => !ids.has(p.id));
+        prevVisible = visible.value;
+        const current = exiting.value;
+        const known = new Set(current.map((e) => e.id));
+        const merged = [...current, ...gone.filter((g) => !known.has(g.id))].filter(
+          (e) => !ids.has(e.id)
+        );
+        if (merged.length !== current.length || !merged.every((e, i) => e.id === current[i]?.id)) {
+          exiting.value = merged;
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    const removeExiting = (id) => {
+      exiting.value = exiting.value.filter((e) => e.id !== id);
+    };
+    const rendered = computed(() => [
+      ...visible.value.map((v) => ({ ...v, present: true })),
+      ...exiting.value.map((e) => ({ ...e, present: false }))
+    ]);
+    const latestTitle = computed(() => {
+      const last = visible.value[visible.value.length - 1];
+      if (typeof last?.title === "string") return last.title;
+      if (typeof last?.description === "string") return last.description;
+      return "";
+    });
+    watch(
+      [items, () => props.max, () => props.defaultDuration, paused],
+      () => {
+        const ids = visibleIds.value;
+        for (const [id, handle] of timers) {
+          if (!ids.has(id)) {
+            window.clearTimeout(handle);
+            timers.delete(id);
+            remaining.delete(id);
+            startedAt.delete(id);
+          }
+        }
+        for (const id of nonces.keys()) {
+          if (!ids.has(id)) nonces.delete(id);
+        }
+        if (paused.value) return;
+        for (const v of visible.value) {
+          const seen = nonces.get(v.id);
+          if (seen !== void 0 && seen !== v.nonce) {
+            const handle = timers.get(v.id);
+            if (handle !== void 0) window.clearTimeout(handle);
+            timers.delete(v.id);
+            remaining.delete(v.id);
+            startedAt.delete(v.id);
+          }
+          nonces.set(v.id, v.nonce);
+        }
+        for (const v of visible.value) {
+          if (v.resolvedDuration === Infinity) continue;
+          if (timers.has(v.id)) continue;
+          const left = remaining.get(v.id) ?? v.resolvedDuration;
+          const handle = window.setTimeout(() => {
+            toaster.dismiss(v.id);
+          }, left);
+          timers.set(v.id, handle);
+          startedAt.set(v.id, Date.now());
+          remaining.set(v.id, left);
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    onUnmounted(() => {
+      unsubscribe?.();
+      for (const handle of timers.values()) window.clearTimeout(handle);
+      timers.clear();
+    });
+    const handlePause = () => {
+      if (!props.canPauseOnHover || paused.value) return;
+      paused.value = true;
+      for (const [id, handle] of timers) {
+        window.clearTimeout(handle);
+        const start = startedAt.get(id) ?? Date.now();
+        const previous = remaining.get(id) ?? 0;
+        const elapsed = Date.now() - start;
+        remaining.set(id, Math.max(0, previous - elapsed));
+      }
+      timers.clear();
+    };
+    const handleResume = () => {
+      if (!props.canPauseOnHover || !paused.value) return;
+      paused.value = false;
+    };
+    const stackClasses = computed(
+      () => cn(
+        "pointer-events-none fixed z-toast flex flex-col",
+        POSITION_CLASSES[props.position],
+        attrs.class
+      )
+    );
+    const itemClasses = computed(() => cn("pointer-events-auto w-80", MOTION_CLASSES[props.position]));
+    const stackStyle = computed(() => ({ gap: `${props.gap}px` }));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$u), null, {
+        default: withCtx(() => [
+          rendered.value.length > 0 ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            "aria-label": "Notifications",
+            style: normalizeStyle(stackStyle.value),
+            class: normalizeClass(stackClasses.value),
+            onMouseenter: handlePause,
+            onMouseleave: handleResume,
+            onFocus: handlePause,
+            onBlur: handleResume
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(rendered.value, (t) => {
+              return openBlock(), createBlock(unref(Presence), {
+                key: t.id,
+                "is-present": t.present
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", {
+                    class: normalizeClass(itemClasses.value),
+                    onVnodeUnmounted: ($event) => t.present ? void 0 : removeExiting(t.id)
+                  }, [
+                    t.content ? (openBlock(), createBlock(unref(ToastNodeView), {
+                      key: 0,
+                      node: t.content
+                    }, null, 8, ["node"])) : (openBlock(), createBlock(_sfc_main$j, {
+                      key: 1,
+                      severity: t.severity,
+                      onClose: ($event) => unref(toaster).dismiss(t.id)
+                    }, createSlots({ _: 2 }, [
+                      t.icon ? {
+                        name: "icon",
+                        fn: withCtx(() => [
+                          createVNode(unref(ToastNodeView), {
+                            node: t.icon
+                          }, null, 8, ["node"])
+                        ]),
+                        key: "0"
+                      } : void 0,
+                      t.title ? {
+                        name: "title",
+                        fn: withCtx(() => [
+                          createVNode(unref(ToastNodeView), {
+                            node: t.title
+                          }, null, 8, ["node"])
+                        ]),
+                        key: "1"
+                      } : void 0,
+                      t.description ? {
+                        name: "description",
+                        fn: withCtx(() => [
+                          createVNode(unref(ToastNodeView), {
+                            node: t.description
+                          }, null, 8, ["node"])
+                        ]),
+                        key: "2"
+                      } : void 0,
+                      t.action ? {
+                        name: "actions",
+                        fn: withCtx(() => [
+                          createVNode(unref(ToastNodeView), {
+                            node: t.action
+                          }, null, 8, ["node"])
+                        ]),
+                        key: "3"
+                      } : void 0
+                    ]), 1032, ["severity", "onClose"]))
+                  ], 10, _hoisted_1$a)
+                ]),
+                _: 2
+              }, 1032, ["is-present"]);
+            }), 128))
+          ], 38)) : createCommentVNode("", true),
+          createVNode(unref(_sfc_main$v), { politeness: "polite" }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(latestTitle.value), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+function toToastOptions(notice) {
+  return {
+    title: notice.title,
+    description: notice.description,
+    severity: notice.tone,
+    duration: notice.durationMs,
+    action: notice.action
+  };
+}
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...{ name: "FeedbackToasts", inheritAttrs: false },
+  __name: "FeedbackToasts",
+  props: {
+    bus: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const bus = computed(() => props.bus ?? feedbackBus);
+    watch(
+      bus,
+      (current, _previous, onCleanup) => {
+        if (typeof document === "undefined") return;
+        onCleanup(
+          current.subscribe((notice) => {
+            toaster.toast(toToastOptions(notice));
+          })
+        );
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$b, normalizeProps(guardReactiveProps(unref(attrs))), null, 16);
+    };
+  }
+});
+const _hoisted_1$9 = {
+  key: 0,
+  class: "text-sm text-foreground"
+};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{ name: "LoadingOverlay", inheritAttrs: false },
+  __name: "LoadingOverlay",
+  props: {
+    isOpen: { type: Boolean, default: true },
+    label: { default: "Loading…" },
+    isInline: { type: Boolean, default: false },
+    hasBlur: { type: Boolean, default: false },
+    spinnerSize: { default: Size.Lg },
+    spinnerTone: { default: SpinnerTone.Brand }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const hasLabel = computed(() => Boolean(props.label) || Boolean(slots.label));
+    const spinnerLabel = computed(() => props.label || "Loading");
+    const classes = computed(
+      () => cn(
+        "flex flex-col items-center justify-center gap-3",
+        "motion-safe:data-[state=open]:animate-(--animate-fade-in)",
+        "motion-safe:data-[state=closed]:animate-(--animate-fade-out)",
+        "motion-reduce:animate-none",
+        props.isInline ? ["absolute inset-0 z-banner bg-background/70", props.hasBlur && "backdrop-blur-sm"] : "fixed inset-0 z-modal pointer-events-none",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        !props.isInline ? (openBlock(), createBlock(_sfc_main$w, {
+          key: 0,
+          "is-open": props.isOpen,
+          "is-blurred": props.hasBlur,
+          class: "bg-background/70"
+        }, null, 8, ["is-open", "is-blurred"])) : createCommentVNode("", true),
+        createVNode(unref(Presence), {
+          "is-present": props.isOpen
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", mergeProps({
+              ref_key: "el",
+              ref: el,
+              role: "status"
+            }, rest.value, { class: classes.value }), [
+              createVNode(_sfc_main$t, {
+                size: props.spinnerSize,
+                tone: props.spinnerTone,
+                label: spinnerLabel.value
+              }, null, 8, ["size", "tone", "label"]),
+              hasLabel.value ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+                renderSlot(_ctx.$slots, "label", {}, () => [
+                  createTextVNode(toDisplayString(props.label), 1)
+                ])
+              ])) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "default")
+            ], 16)
+          ]),
+          _: 3
+        }, 8, ["is-present"])
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$8 = { class: "flex-1" };
+const _hoisted_2$7 = {
+  key: 1,
+  class: "absolute bottom-0 left-0 h-0.5 w-full bg-border"
+};
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...{ name: "UndoBar", inheritAttrs: false },
+  __name: "UndoBar",
+  props: {
+    isOpen: { type: Boolean },
+    message: {},
+    undoLabel: { default: "Undo" },
+    duration: { default: 5e3 },
+    canPauseOnHover: { type: Boolean, default: true },
+    position: { default: OverlayPosition.BottomCenter },
+    hasCountdown: { type: Boolean, default: false }
+  },
+  emits: ["open-change", "undo"],
+  setup(__props, { emit: __emit }) {
+    const POSITION = {
+      "top-right": "top-4 right-4",
+      "top-left": "top-4 left-4",
+      "top-center": "top-4 left-1/2 -translate-x-1/2",
+      "bottom-right": "bottom-4 right-4",
+      "bottom-left": "bottom-4 left-4",
+      "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+    };
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const instance = getCurrentInstance();
+    const hasUndo = () => Boolean(instance?.vnode.props?.onUndo);
+    const progress = ref(1);
+    const paused = ref(false);
+    let start = 0;
+    let remaining = props.duration;
+    let raf = null;
+    watch(
+      [() => props.isOpen, () => props.duration, paused, () => props.hasCountdown],
+      ([isOpen, duration, isPaused, hasCountdown], _previous, onCleanup) => {
+        if (!isOpen) {
+          remaining = duration;
+          progress.value = 1;
+          return;
+        }
+        if (duration === Infinity) {
+          progress.value = 1;
+          return;
+        }
+        if (isPaused) return;
+        if (typeof window === "undefined" || typeof requestAnimationFrame === "undefined") return;
+        start = performance.now();
+        if (!hasCountdown) {
+          const handle = window.setTimeout(() => {
+            emit("open-change", false);
+          }, remaining);
+          onCleanup(() => {
+            window.clearTimeout(handle);
+            const elapsed = performance.now() - start;
+            remaining = Math.max(0, remaining - elapsed);
+          });
+          return;
+        }
+        const tick = (now) => {
+          const elapsed = now - start;
+          const left = Math.max(0, remaining - elapsed);
+          progress.value = left / duration;
+          if (left <= 0) {
+            emit("open-change", false);
+            return;
+          }
+          raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        onCleanup(() => {
+          if (raf != null) cancelAnimationFrame(raf);
+          const elapsed = performance.now() - start;
+          remaining = Math.max(0, remaining - elapsed);
+        });
+      },
+      { immediate: true, flush: "post" }
+    );
+    onUnmounted(() => {
+      if (raf != null) cancelAnimationFrame(raf);
+    });
+    const setPaused = (value) => {
+      if (props.canPauseOnHover) paused.value = value;
+    };
+    const onUndoClick = () => {
+      emit("undo");
+      emit("open-change", false);
+    };
+    const wrapperClasses = computed(() => cn("fixed z-toast", POSITION[props.position]));
+    const panelClasses = computed(
+      () => cn(
+        "relative flex items-center gap-3 overflow-hidden text-sm",
+        surfaceVariants({ variant: "surface", radius: "md", padding: "sm", elevation: 3 }),
+        "px-4 py-2.5",
+        "motion-safe:data-[state=open]:animate-(--animate-slide-in-bottom)",
+        "motion-safe:data-[state=closed]:animate-(--animate-slide-out-bottom)",
+        "motion-reduce:animate-none",
+        attrs.class
+      )
+    );
+    const showCountdown = computed(() => props.hasCountdown && props.duration !== Infinity);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$u), null, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(wrapperClasses.value)
+          }, [
+            createVNode(unref(Presence), {
+              "is-present": props.isOpen
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  role: "status",
+                  "aria-live": "polite",
+                  class: normalizeClass(panelClasses.value),
+                  onMouseenter: _cache[0] || (_cache[0] = ($event) => setPaused(true)),
+                  onMouseleave: _cache[1] || (_cache[1] = ($event) => setPaused(false)),
+                  onFocus: _cache[2] || (_cache[2] = ($event) => setPaused(true)),
+                  onBlur: _cache[3] || (_cache[3] = ($event) => setPaused(false))
+                }, [
+                  createElementVNode("span", _hoisted_1$8, [
+                    renderSlot(_ctx.$slots, "message", {}, () => [
+                      createTextVNode(toDisplayString(props.message), 1)
+                    ])
+                  ]),
+                  hasUndo() ? (openBlock(), createElementBlock("button", {
+                    key: 0,
+                    type: "button",
+                    class: "font-medium text-primary transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1",
+                    onClick: onUndoClick
+                  }, toDisplayString(props.undoLabel), 1)) : createCommentVNode("", true),
+                  showCountdown.value ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
+                    createElementVNode("div", {
+                      class: "h-full bg-primary transition-[width] duration-100 ease-linear",
+                      style: normalizeStyle({ width: `${progress.value * 100}%` })
+                    }, null, 4)
+                  ])) : createCommentVNode("", true)
+                ], 34)
+              ]),
+              _: 3
+            }, 8, ["is-present"])
+          ], 2)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _hoisted_1$7 = ["aria-expanded"];
+const _hoisted_2$6 = { class: "flex-1" };
+const _hoisted_3$5 = { class: "text-sm font-medium text-foreground" };
+const _hoisted_4$4 = { class: "mt-1 text-xs text-muted-foreground" };
+const _hoisted_5$3 = { class: "mt-2 h-1.5 overflow-hidden rounded-full bg-border" };
+const _hoisted_6$3 = {
+  role: "list",
+  class: "border-t border-border"
+};
+const onboardingContextKey = Symbol("wow-two.onboardingChecklist");
+const onboardingRegistryKey = Symbol(
+  "wow-two.onboardingChecklist.registry"
+);
+function useOnboardingChecklist() {
+  const context = inject(onboardingContextKey, null);
+  if (!context) throw new Error("useOnboardingChecklist must be used inside <OnboardingChecklist>");
+  return context;
+}
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{ name: "OnboardingChecklist", inheritAttrs: false },
+  __name: "OnboardingChecklist",
+  props: {
+    title: { default: "Get started" },
+    defaultOpen: { type: Boolean, default: true },
+    canDismissOnComplete: { type: Boolean, default: false },
+    dismissDelay: { default: 2e3 }
+  },
+  emits: ["dismiss"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ChevronDownIcon = ChevronDown;
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const open = ref(props.defaultOpen);
+    const dismissed = ref(false);
+    const tasks = shallowRef([]);
+    provide(onboardingRegistryKey, {
+      register: (task) => {
+        if (!tasks.value.includes(task)) tasks.value = [...tasks.value, task];
+      },
+      unregister: (task) => {
+        tasks.value = tasks.value.filter((existing) => existing !== task);
+      }
+    });
+    provide(onboardingContextKey, {
+      get open() {
+        return open.value;
+      },
+      setOpen: (value) => {
+        open.value = value;
+      }
+    });
+    const total = computed(() => tasks.value.length);
+    const done = computed(() => tasks.value.filter((task) => task.isDone).length);
+    const complete = computed(() => total.value > 0 && done.value === total.value);
+    watch(
+      [complete, () => props.canDismissOnComplete, () => props.dismissDelay, dismissed],
+      ([isComplete, canDismiss, delay, isDismissed], _previous, onCleanup) => {
+        if (!canDismiss || !isComplete || isDismissed) return;
+        const handle = window.setTimeout(() => {
+          dismissed.value = true;
+          emit("dismiss");
+        }, delay);
+        onCleanup(() => window.clearTimeout(handle));
+      },
+      { immediate: true, flush: "post" }
+    );
+    const classes = computed(
+      () => cn(
+        "overflow-hidden rounded-lg border border-border bg-card shadow-sm",
+        attrs.class
+      )
+    );
+    const fillClasses = computed(
+      () => cn("h-full bg-primary transition-[width] duration-300", complete.value && "bg-success")
+    );
+    const fillStyle = computed(() => ({
+      width: total.value ? `${done.value / total.value * 100}%` : "0%"
+    }));
+    const chevronClasses = computed(
+      () => cn("text-muted-foreground transition-transform", open.value && "rotate-180")
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return !dismissed.value ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        createElementVNode("button", {
+          type: "button",
+          "aria-expanded": open.value,
+          class: "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+        }, [
+          createElementVNode("div", _hoisted_2$6, [
+            createElementVNode("div", _hoisted_3$5, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(props.title), 1)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_4$4, toDisplayString(done.value) + " of " + toDisplayString(total.value) + " tasks complete", 1),
+            createElementVNode("div", _hoisted_5$3, [
+              createElementVNode("div", {
+                class: normalizeClass(fillClasses.value),
+                style: normalizeStyle(fillStyle.value)
+              }, null, 6)
+            ])
+          ]),
+          createVNode(unref(_sfc_main$s), {
+            icon: unref(ChevronDownIcon),
+            size: 16,
+            class: normalizeClass(chevronClasses.value)
+          }, null, 8, ["icon", "class"])
+        ], 8, _hoisted_1$7),
+        withDirectives(createElementVNode("ul", _hoisted_6$3, [
+          renderSlot(_ctx.$slots, "default")
+        ], 512), [
+          [vShow, open.value]
+        ])
+      ], 16)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$6 = ["data-done"];
+const _hoisted_2$5 = { class: "min-w-0 flex-1" };
+const _hoisted_3$4 = {
+  key: 0,
+  class: "mt-0.5 text-xs text-muted-foreground"
+};
+const _hoisted_4$3 = {
+  key: 0,
+  class: "shrink-0"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{ name: "OnboardingChecklistTask", inheritAttrs: false },
+  __name: "OnboardingChecklistTask",
+  props: {
+    label: {},
+    description: {},
+    isDone: { type: Boolean, default: false },
+    action: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const CheckIcon = Check;
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const record = {
+      get isDone() {
+        return props.isDone;
+      }
+    };
+    const registry = inject(onboardingRegistryKey, null);
+    onMounted(() => registry?.register(record));
+    onUnmounted(() => registry?.unregister(record));
+    const hasDescription = computed(() => Boolean(props.description) || Boolean(slots.description));
+    const hasAction = computed(() => Boolean(props.action) || Boolean(slots.action));
+    const classes = computed(
+      () => cn(
+        "flex items-start gap-3 px-4 py-3 transition-colors",
+        props.isDone && "opacity-60",
+        attrs.class
+      )
+    );
+    const markerClasses = computed(
+      () => cn(
+        "mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full border",
+        props.isDone ? "border-success bg-success text-success-foreground" : "border-border"
+      )
+    );
+    const labelClasses = computed(
+      () => cn("text-sm font-medium text-foreground", props.isDone && "line-through")
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", mergeProps({
+        ref_key: "el",
+        ref: el,
+        "data-done": props.isDone || void 0
+      }, rest.value, { class: classes.value }), [
+        createElementVNode("span", {
+          "aria-hidden": "true",
+          class: normalizeClass(markerClasses.value)
+        }, [
+          props.isDone ? (openBlock(), createBlock(unref(_sfc_main$s), {
+            key: 0,
+            icon: unref(CheckIcon),
+            size: 12
+          }, null, 8, ["icon"])) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", _hoisted_2$5, [
+          createElementVNode("div", {
+            class: normalizeClass(labelClasses.value)
+          }, [
+            renderSlot(_ctx.$slots, "label", {}, () => [
+              createTextVNode(toDisplayString(props.label), 1)
+            ])
+          ], 2),
+          hasDescription.value ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(props.description), 1)
+            ])
+          ])) : createCommentVNode("", true)
+        ]),
+        hasAction.value && !props.isDone ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+          renderSlot(_ctx.$slots, "action", {}, () => [
+            createTextVNode(toDisplayString(props.action), 1)
+          ])
+        ])) : createCommentVNode("", true)
+      ], 16, _hoisted_1$6);
+    };
+  }
+});
+const _hoisted_1$5 = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "pointer-events-auto fixed inset-0 z-modal h-full w-full",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2$4 = ["id"];
+const _hoisted_3$3 = ["x", "y", "width", "height"];
+const _hoisted_4$2 = ["mask"];
+const _hoisted_5$2 = ["aria-labelledby", "aria-describedby"];
+const _hoisted_6$2 = ["id"];
+const _hoisted_7$2 = ["id"];
+const _hoisted_8$1 = { class: "mt-3 flex items-center justify-between gap-3" };
+const _hoisted_9 = { class: "text-xs text-muted-foreground" };
+const _hoisted_10 = { class: "flex items-center gap-2" };
+const Placement = {
+  /** Refers to placement above the target. */
+  Top: "top",
+  /** Refers to placement to the right of the target. */
+  Right: "right",
+  /** Refers to placement below the target. */
+  Bottom: "bottom",
+  /** Refers to placement to the left of the target. */
+  Left: "left"
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{ name: "Tour", inheritAttrs: false },
+  __name: "Tour",
+  props: {
+    isOpen: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    steps: {},
+    currentStep: {},
+    defaultCurrentStep: { default: 0 },
+    padding: { default: 8 }
+  },
+  emits: ["open-change", "step-change", "complete", "skip"],
+  setup(__props, { emit: __emit }) {
+    function rectFromTarget(target) {
+      const el = typeof target === "string" ? document.querySelector(target) : target.value;
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      return { top: r.top, left: r.left, width: r.width, height: r.height };
+    }
+    function placementCoords(rect2, placement2, gap = 12) {
+      switch (placement2) {
+        case Placement.Top:
+          return { top: rect2.top - gap, left: rect2.left + rect2.width / 2, transform: "translate(-50%, -100%)" };
+        case Placement.Right:
+          return { top: rect2.top + rect2.height / 2, left: rect2.left + rect2.width + gap, transform: "translate(0, -50%)" };
+        case Placement.Bottom:
+          return { top: rect2.top + rect2.height + gap, left: rect2.left + rect2.width / 2, transform: "translate(-50%, 0)" };
+        case Placement.Left:
+          return { top: rect2.top + rect2.height / 2, left: rect2.left - gap, transform: "translate(-100%, -50%)" };
+      }
+    }
+    const props = __props;
+    const emit = __emit;
+    const openCtl = useControlled({
+      controlled: () => props.isOpen,
+      default: () => props.defaultOpen,
+      onChange: (value) => emit("open-change", value)
+    });
+    const stepCtl = useControlled({
+      controlled: () => props.currentStep,
+      default: () => props.defaultCurrentStep,
+      onChange: (value) => emit("step-change", value)
+    });
+    const open = computed(() => openCtl.value.value);
+    const stepIndex = computed(() => stepCtl.value.value);
+    const rect = shallowRef(null);
+    const titleId = useId("tour-title");
+    const descId = useId("tour-desc");
+    const maskId = useId("tour-mask");
+    const reducedMotion = useReducedMotion();
+    const step = computed(() => props.steps[stepIndex.value]);
+    const mounted = ref(open.value);
+    watch(
+      [open, reducedMotion],
+      ([isOpen, isReduced], _previous, onCleanup) => {
+        if (isOpen) {
+          mounted.value = true;
+          return;
+        }
+        if (!isReduced) return;
+        const raf = requestAnimationFrame(() => {
+          mounted.value = false;
+        });
+        onCleanup(() => cancelAnimationFrame(raf));
+      },
+      { immediate: true, flush: "post" }
+    );
+    watch(
+      [open, step],
+      ([isOpen, currentStepValue], _previous, onCleanup) => {
+        if (!isOpen || !currentStepValue) return;
+        if (typeof requestAnimationFrame === "undefined" || typeof window === "undefined") return;
+        const update = () => {
+          rect.value = rectFromTarget(currentStepValue.target);
+        };
+        const handle = requestAnimationFrame(update);
+        window.addEventListener("resize", update, { passive: true });
+        window.addEventListener("scroll", update, { passive: true, capture: true });
+        onCleanup(() => {
+          cancelAnimationFrame(handle);
+          window.removeEventListener("resize", update);
+          window.removeEventListener("scroll", update, true);
+        });
+      },
+      { immediate: true, flush: "post" }
+    );
+    watch(
+      open,
+      (isOpen, _previous, onCleanup) => {
+        if (!isOpen) return;
+        if (typeof document === "undefined") return;
+        const onKey = (event) => {
+          if (event.key === Key.Escape) {
+            event.preventDefault();
+            openCtl.setValue(false);
+            emit("skip");
+          }
+        };
+        document.addEventListener("keydown", onKey);
+        onCleanup(() => document.removeEventListener("keydown", onKey));
+      },
+      { immediate: true, flush: "post" }
+    );
+    const goNext = () => {
+      if (stepIndex.value >= props.steps.length - 1) {
+        openCtl.setValue(false);
+        emit("complete");
+      } else {
+        stepCtl.setValue(stepIndex.value + 1);
+      }
+    };
+    const goPrev = () => {
+      if (stepIndex.value > 0) stepCtl.setValue(stepIndex.value - 1);
+    };
+    const skip = () => {
+      openCtl.setValue(false);
+      emit("skip");
+    };
+    const placement = computed(() => step.value?.placement ?? Placement.Bottom);
+    const tooltipCoords = computed(
+      () => rect.value ? placementCoords(rect.value, placement.value) : null
+    );
+    const tooltipStyle = computed(() => {
+      const coords = tooltipCoords.value;
+      if (!coords) return void 0;
+      return {
+        position: "fixed",
+        top: `${coords.top}px`,
+        left: `${coords.left}px`,
+        transform: coords.transform
+      };
+    });
+    const announcement = computed(
+      () => step.value?.title ? `Step ${stepIndex.value + 1} of ${props.steps.length}: ${step.value.title}` : ""
+    );
+    const bodyClasses = computed(
+      () => cn("text-sm text-muted-foreground", step.value?.title && "mt-1.5")
+    );
+    const tooltipClasses = cn(
+      "z-popover w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
+      "motion-safe:data-[state=open]:animate-(--animate-pop-in)",
+      "motion-safe:data-[state=closed]:animate-(--animate-pop-out)",
+      "motion-reduce:animate-none"
+    );
+    const onTooltipAnimationEnd = () => {
+      if (!open.value) mounted.value = false;
+    };
+    return (_ctx, _cache) => {
+      return mounted.value && step.value ? (openBlock(), createBlock(unref(_sfc_main$u), { key: 0 }, {
+        default: withCtx(() => [
+          open.value && rect.value ? (openBlock(), createElementBlock("svg", _hoisted_1$5, [
+            createElementVNode("defs", null, [
+              createElementVNode("mask", { id: unref(maskId) }, [
+                _cache[0] || (_cache[0] = createElementVNode("rect", {
+                  width: "100%",
+                  height: "100%",
+                  fill: "white"
+                }, null, -1)),
+                createElementVNode("rect", {
+                  x: rect.value.left - props.padding,
+                  y: rect.value.top - props.padding,
+                  width: rect.value.width + props.padding * 2,
+                  height: rect.value.height + props.padding * 2,
+                  rx: 6,
+                  fill: "black"
+                }, null, 8, _hoisted_3$3)
+              ], 8, _hoisted_2$4)
+            ]),
+            createElementVNode("rect", {
+              width: "100%",
+              height: "100%",
+              fill: "rgba(0,0,0,0.55)",
+              mask: `url(#${unref(maskId)})`
+            }, null, 8, _hoisted_4$2)
+          ])) : createCommentVNode("", true),
+          tooltipCoords.value ? (openBlock(), createBlock(unref(Presence), {
+            key: 1,
+            "is-present": open.value
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": unref(titleId),
+                "aria-describedby": unref(descId),
+                style: normalizeStyle(tooltipStyle.value),
+                class: normalizeClass(unref(tooltipClasses)),
+                onAnimationend: onTooltipAnimationEnd
+              }, [
+                step.value.title ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  id: unref(titleId),
+                  class: "text-sm font-semibold"
+                }, toDisplayString(step.value.title), 9, _hoisted_6$2)) : createCommentVNode("", true),
+                step.value.body ? (openBlock(), createElementBlock("div", {
+                  key: 1,
+                  id: unref(descId),
+                  class: normalizeClass(bodyClasses.value)
+                }, toDisplayString(step.value.body), 11, _hoisted_7$2)) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_8$1, [
+                  createElementVNode("span", _hoisted_9, toDisplayString(stepIndex.value + 1) + " / " + toDisplayString(props.steps.length), 1),
+                  createElementVNode("div", _hoisted_10, [
+                    createElementVNode("button", {
+                      type: "button",
+                      class: "text-xs text-muted-foreground hover:text-foreground",
+                      onClick: skip
+                    }, " Skip "),
+                    stepIndex.value > 0 ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      type: "button",
+                      class: "inline-flex h-7 items-center rounded-md border border-border bg-background px-2.5 text-xs font-medium hover:bg-muted",
+                      onClick: goPrev
+                    }, " Back ")) : createCommentVNode("", true),
+                    createElementVNode("button", {
+                      type: "button",
+                      class: "inline-flex h-7 items-center rounded-md bg-primary px-2.5 text-xs font-medium text-primary-foreground hover:bg-primary/90",
+                      onClick: goNext
+                    }, toDisplayString(stepIndex.value >= props.steps.length - 1 ? "Done" : "Next"), 1)
+                  ])
+                ])
+              ], 46, _hoisted_5$2)
+            ]),
+            _: 1
+          }, 8, ["is-present"])) : createCommentVNode("", true),
+          createVNode(unref(_sfc_main$v), { politeness: "polite" }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(announcement.value), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$4 = ["aria-label"];
+const _hoisted_2$3 = {
+  key: 0,
+  class: "truncate"
+};
+const _hoisted_3$2 = {
+  class: "inline-flex items-end gap-1",
+  "aria-hidden": "true"
+};
+const TypingTone = {
+  /** Refers to the muted-foreground tone. */
+  Muted: "muted",
+  /** Refers to the primary / brand tone. */
+  Primary: "primary",
+  /** Refers to the full-emphasis foreground tone. */
+  Foreground: "foreground"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{ name: "TypingIndicator", inheritAttrs: false },
+  __name: "TypingIndicator",
+  props: {
+    who: {},
+    size: { default: Size.Md },
+    tone: { default: TypingTone.Muted },
+    isSubtle: { type: Boolean }
+  },
+  setup(__props, { expose: __expose }) {
+    const SIZE = {
+      sm: "h-1 w-1",
+      md: "h-1.5 w-1.5",
+      lg: "h-2 w-2"
+    };
+    const TONE = {
+      muted: "bg-muted-foreground",
+      primary: "bg-primary",
+      foreground: "bg-foreground"
+    };
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const hasWho = computed(() => Boolean(props.who) || Boolean(slots.who));
+    const dot = computed(
+      () => cn(
+        "inline-block rounded-full motion-safe:animate-bounce",
+        SIZE[props.size] ?? SIZE.md,
+        TONE[props.tone],
+        props.isSubtle && "motion-safe:opacity-60"
+      )
+    );
+    const ariaLabel = computed(() => props.who ? `${props.who} is typing` : "Typing");
+    const classes = computed(
+      () => cn("inline-flex items-center gap-2 text-xs text-muted-foreground", attrs.class)
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": ariaLabel.value
+      }, rest.value, { class: classes.value }), [
+        hasWho.value ? (openBlock(), createElementBlock("span", _hoisted_2$3, [
+          renderSlot(_ctx.$slots, "who", {}, () => [
+            createTextVNode(toDisplayString(props.who), 1)
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_3$2, [
+          createElementVNode("span", {
+            class: normalizeClass(dot.value),
+            style: { animationDelay: "0ms" }
+          }, null, 2),
+          createElementVNode("span", {
+            class: normalizeClass(dot.value),
+            style: { animationDelay: "150ms" }
+          }, null, 2),
+          createElementVNode("span", {
+            class: normalizeClass(dot.value),
+            style: { animationDelay: "300ms" }
+          }, null, 2)
+        ])
+      ], 16, _hoisted_1$4);
+    };
+  }
+});
+const _hoisted_1$3 = ["aria-label", "data-status"];
+const PresenceStatus = {
+  /** Refers to actively available. */
+  Online: "online",
+  /** Refers to present but inactive. */
+  Idle: "idle",
+  /** Refers to present but do-not-disturb. */
+  Busy: "busy",
+  /** Refers to not connected. */
+  Offline: "offline",
+  /** Refers to connected but appearing offline. */
+  Invisible: "invisible"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{ name: "PresenceIndicator", inheritAttrs: false },
+  __name: "PresenceIndicator",
+  props: {
+    status: { default: PresenceStatus.Online },
+    size: { default: Size.Sm },
+    hasPulse: { type: Boolean },
+    position: {},
+    label: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const STATUS_BG = {
+      online: "bg-success",
+      idle: "bg-warning",
+      busy: "bg-destructive",
+      offline: "bg-muted-foreground",
+      invisible: "bg-transparent border border-muted-foreground"
+    };
+    const SIZE = {
+      xs: "h-1.5 w-1.5",
+      sm: "h-2 w-2",
+      md: "h-2.5 w-2.5",
+      lg: "h-3 w-3"
+    };
+    const POS = {
+      "top-right": "absolute top-0 right-0",
+      "top-left": "absolute top-0 left-0",
+      "bottom-right": "absolute bottom-0 right-0",
+      "bottom-left": "absolute bottom-0 left-0"
+    };
+    const STATUS_LABEL = {
+      online: "Online",
+      idle: "Idle",
+      busy: "Busy",
+      offline: "Offline",
+      invisible: "Invisible"
+    };
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const showPulse = computed(() => Boolean(props.hasPulse) && props.status === PresenceStatus.Online);
+    const classes = computed(
+      () => cn(
+        "inline-flex rounded-full ring-2 ring-background",
+        STATUS_BG[props.status],
+        SIZE[props.size] ?? SIZE.sm,
+        props.position && POS[props.position],
+        "relative",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "status",
+        "aria-label": props.label ?? STATUS_LABEL[props.status],
+        "data-status": props.status
+      }, rest.value, { class: classes.value }), [
+        showPulse.value ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          "aria-hidden": "true",
+          class: normalizeClass(unref(cn)("absolute inset-0 rounded-full opacity-75 motion-safe:animate-ping", STATUS_BG.online))
+        }, null, 2)) : createCommentVNode("", true)
+      ], 16, _hoisted_1$3);
+    };
+  }
+});
+const _hoisted_1$2 = {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "drop-shadow-sm"
+};
+const _hoisted_2$2 = ["fill"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ name: "LiveCursor", inheritAttrs: false },
+  __name: "LiveCursor",
+  props: {
+    x: {},
+    y: {},
+    name: {},
+    color: { default: "var(--color-primary)" },
+    isSmooth: { type: Boolean, default: true },
+    labelOffset: {},
+    isPointerOnly: { type: Boolean }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const reducedMotion = useReducedMotion();
+    const useTransition = computed(() => props.isSmooth && !reducedMotion.value);
+    const lx = computed(() => props.labelOffset?.x ?? 12);
+    const ly = computed(() => props.labelOffset?.y ?? 16);
+    const hasName = computed(() => Boolean(props.name) || Boolean(slots.name));
+    const wrapperStyle = computed(() => ({
+      transform: `translate3d(${props.x}px, ${props.y}px, 0)`,
+      transition: useTransition.value ? "transform 80ms linear" : void 0
+    }));
+    const labelStyle = computed(() => ({
+      backgroundColor: props.color,
+      transform: `translate(${lx.value}px, ${ly.value}px)`
+    }));
+    const classes = computed(
+      () => cn(
+        "pointer-events-none absolute left-0 top-0 z-tooltip select-none",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, style: _style, ...others } = attrs;
+      return others;
+    });
+    const callerStyle = computed(() => attrs.style);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        "aria-hidden": "true"
+      }, rest.value, {
+        class: classes.value,
+        style: [wrapperStyle.value, callerStyle.value ?? {}]
+      }), [
+        (openBlock(), createElementBlock("svg", _hoisted_1$2, [
+          createElementVNode("path", {
+            d: "M5 3 L5 19 L9.5 14.5 L12.5 21 L15.5 19.5 L12.5 13 L19 13 Z",
+            fill: props.color,
+            stroke: "white",
+            "stroke-width": "1.25",
+            "stroke-linejoin": "round"
+          }, null, 8, _hoisted_2$2)
+        ])),
+        hasName.value && !props.isPointerOnly ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: "absolute whitespace-nowrap rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none text-white shadow-sm",
+          style: normalizeStyle(labelStyle.value)
+        }, [
+          renderSlot(_ctx.$slots, "name", {}, () => [
+            createTextVNode(toDisplayString(props.name), 1)
+          ])
+        ], 4)) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "flex items-center justify-between gap-2 border-b border-border px-3 py-2.5" };
+const _hoisted_2$1 = { class: "flex items-center gap-2" };
+const _hoisted_3$1 = { class: "text-sm font-semibold" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "inline-flex items-center justify-center rounded-full bg-primary px-1.5 text-[10px] font-semibold leading-5 text-primary-foreground"
+};
+const _hoisted_5$1 = { class: "max-h-96 overflow-y-auto py-1" };
+const _hoisted_6$1 = { class: "flex flex-col items-center gap-2 px-4 py-10 text-center text-muted-foreground" };
+const _hoisted_7$1 = {
+  key: 1,
+  class: "flex flex-col"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "border-t border-border px-3 py-2 text-center text-xs"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "NotificationCenter", inheritAttrs: false },
+  __name: "NotificationCenter",
+  props: {
+    title: { default: "Notifications" },
+    count: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const isEmpty = () => renderableChildren(slots.default?.()).length === 0;
+    const classes = computed(
+      () => cn(
+        "flex w-80 flex-col",
+        surfaceVariants({ variant: "surface", radius: "md" }),
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "region",
+        "aria-label": "Notifications"
+      }, rest.value, { class: classes.value }), [
+        createElementVNode("header", _hoisted_1$1, [
+          createElementVNode("div", _hoisted_2$1, [
+            createElementVNode("span", _hoisted_3$1, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(props.title), 1)
+              ])
+            ]),
+            props.count != null || _ctx.$slots.count ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
+              renderSlot(_ctx.$slots, "count", {}, () => [
+                createTextVNode(toDisplayString(props.count), 1)
+              ])
+            ])) : createCommentVNode("", true)
+          ]),
+          renderSlot(_ctx.$slots, "headerActions")
+        ]),
+        createElementVNode("div", _hoisted_5$1, [
+          isEmpty() ? renderSlot(_ctx.$slots, "emptyState", {}, () => [
+            createElementVNode("div", _hoisted_6$1, [
+              createVNode(unref(Bell), { class: "h-6 w-6" }),
+              _cache[0] || (_cache[0] = createElementVNode("p", { class: "text-sm" }, "You're all caught up.", -1))
+            ])
+          ], void 0, 0) : (openBlock(), createElementBlock("div", _hoisted_7$1, [
+            renderSlot(_ctx.$slots, "default")
+          ]))
+        ]),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          renderSlot(_ctx.$slots, "footer")
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const _hoisted_1 = ["role", "tabindex", "data-unread"];
+const _hoisted_2 = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "absolute left-1 top-3 inline-block h-2 w-2 rounded-full bg-primary"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "shrink-0 self-start pl-3"
+};
+const _hoisted_4 = { class: "flex items-baseline gap-2" };
+const _hoisted_5 = {
+  key: 0,
+  class: "ml-auto whitespace-nowrap text-xs text-muted-foreground"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "mt-0.5 line-clamp-2 text-xs text-muted-foreground"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "mt-1.5 flex items-center gap-2"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "NotificationItem", inheritAttrs: false },
+  __name: "NotificationItem",
+  props: {
+    icon: {},
+    title: {},
+    description: {},
+    timestamp: {},
+    isUnread: { type: Boolean },
+    actions: {}
+  },
+  emits: ["select", "dismiss"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const instance = getCurrentInstance();
+    const el = useTemplateRef("el");
+    const interactive = () => Boolean(instance?.vnode.props?.onSelect);
+    const hasDismiss = () => Boolean(instance?.vnode.props?.onDismiss);
+    const hasIcon = computed(() => Boolean(props.icon) || Boolean(slots.icon));
+    const hasTimestamp = computed(() => Boolean(props.timestamp) || Boolean(slots.timestamp));
+    const hasDescription = computed(() => Boolean(props.description) || Boolean(slots.description));
+    const hasActions = computed(() => Boolean(props.actions) || Boolean(slots.actions));
+    const classes = computed(
+      () => cn(
+        "group/notif relative flex gap-3 rounded-md px-3 py-2.5 text-sm",
+        interactive() && "cursor-pointer hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        props.isUnread && "bg-primary-soft/30",
+        attrs.class
+      )
+    );
+    const titleClasses = computed(
+      () => cn("truncate text-foreground", props.isUnread ? "font-semibold" : "font-medium")
+    );
+    const bodyClasses = computed(() => cn("min-w-0 flex-1", !hasIcon.value && "pl-3"));
+    const onKeyDown = (event) => {
+      if (!interactive()) return;
+      if (event.target !== event.currentTarget) return;
+      if (event.key === Key.Enter || event.key === Key.Space) {
+        event.preventDefault();
+        emit("select");
+      }
+    };
+    const onDismissClick = (event) => {
+      event.stopPropagation();
+      emit("dismiss");
+    };
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: interactive() ? "button" : void 0,
+        tabindex: interactive() ? 0 : void 0,
+        "data-unread": props.isUnread ? "" : void 0
+      }, rest.value, {
+        class: classes.value,
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("select")),
+        onKeydown: onKeyDown
+      }), [
+        props.isUnread ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
+        hasIcon.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            createTextVNode(toDisplayString(props.icon), 1)
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(bodyClasses.value)
+        }, [
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("span", {
+              class: normalizeClass(titleClasses.value)
+            }, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(props.title), 1)
+              ])
+            ], 2),
+            hasTimestamp.value ? (openBlock(), createElementBlock("span", _hoisted_5, [
+              renderSlot(_ctx.$slots, "timestamp", {}, () => [
+                createTextVNode(toDisplayString(props.timestamp), 1)
+              ])
+            ])) : createCommentVNode("", true)
+          ]),
+          hasDescription.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(props.description), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          hasActions.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            renderSlot(_ctx.$slots, "actions", {}, () => [
+              createTextVNode(toDisplayString(props.actions), 1)
+            ])
+          ])) : createCommentVNode("", true)
+        ], 2),
+        hasDismiss() ? (openBlock(), createElementBlock("button", {
+          key: 2,
+          type: "button",
+          "aria-label": "Dismiss notification",
+          class: normalizeClass(
+            unref(cn)(
+              "absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground opacity-0",
+              "group-hover/notif:opacity-100 group-focus-within/notif:opacity-100",
+              "hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            )
+          ),
+          onClick: onDismissClick
+        }, [
+          createVNode(unref(X), { class: "h-3.5 w-3.5" })
+        ], 2)) : createCommentVNode("", true)
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main$4 as A,
+  _sfc_main$8 as B,
+  alertSimpleVariants as C,
+  bannerSimpleVariants as D,
+  progressFillVariants as E,
+  progressTrackVariants as F,
+  skeletonVariants as G,
+  toastSimpleVariants as H,
+  toaster as I,
+  useOnboardingChecklist as J,
+  useToaster as K,
+  Placement as P,
+  SkeletonShape as S,
+  TypingTone as T,
+  _sfc_main$l as _,
+  _sfc_main$o as a,
+  _sfc_main$k as b,
+  _sfc_main$n as c,
+  _sfc_main$i as d,
+  _sfc_main$a as e,
+  _sfc_main$h as f,
+  _sfc_main$2 as g,
+  _sfc_main$9 as h,
+  _sfc_main$g as i,
+  _sfc_main$d as j,
+  _sfc_main$1 as k,
+  _sfc_main as l,
+  _sfc_main$7 as m,
+  _sfc_main$6 as n,
+  _sfc_main$3 as o,
+  PresenceStatus as p,
+  _sfc_main$q as q,
+  _sfc_main$p as r,
+  _sfc_main$f as s,
+  _sfc_main$r as t,
+  _sfc_main$e as u,
+  _sfc_main$j as v,
+  _sfc_main$m as w,
+  _sfc_main$b as x,
+  _sfc_main$5 as y,
+  _sfc_main$c as z
+};
+//# sourceMappingURL=NotificationItem.vue_vue_type_script_setup_true_lang-gi0uHIuK.js.map