@wow-two-beta/ui-vue 0.0.4 → 0.0.6

package/dist/chunks/SwipeActionsLayout.vue_vue_type_script_setup_true_lang-Dc0UJfs9.js

@@ -0,0 +1,2388 @@
+import { defineComponent, useAttrs, useTemplateRef, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, normalizeStyle, createElementBlock, createElementVNode, createTextVNode, toDisplayString, normalizeClass, ref, watch, onScopeDispose, provide, inject, onUnmounted, unref, onMounted, onBeforeUnmount, createVNode, createCommentVNode, useSlots, Fragment, Comment, Text } from "vue";
+import { c as cn } from "./Cn-CzDCF-Ah.js";
+import { a as _sfc_main$y } from "./StackLayout.vue_vue_type_script_setup_true_lang-BTht83c-.js";
+import { tv } from "tailwind-variants";
+import { O as Orientation } from "./Orientation-u-sYunuG.js";
+import { A as Align } from "./Align-DqFtCY3a.js";
+import { R as Radius } from "./StyleTokens-Bkz7Dm5L.js";
+import { S as Side } from "./Side-Kw61CDou.js";
+import { c as composeEventHandlers } from "./ComposeEventHandlers-rgxao5aD.js";
+import { u as useControlled } from "./UseControlled-BQneb7BW.js";
+import { _ as _sfc_main$z } from "./Spinner.vue_vue_type_script_setup_true_lang-jgKrZLIK.js";
+import { _ as _sfc_main$A, P as Politeness } from "./Announce.vue_vue_type_script_setup_true_lang-QM4vCs2n.js";
+import { _ as _sfc_main$B, a as _sfc_main$C } from "./DrawerContent.vue_vue_type_script_setup_true_lang-dLwafPAj.js";
+import { a as useMediaQuery, u as useReducedMotion } from "./UseReducedMotion-NZ5fg-Xb.js";
+import { C as CssExtensions } from "./CssExtensions-ctGVlfYU.js";
+import { T as TransitionExtensions } from "./TransitionExtensions-HyBfcJnn.js";
+import { P as Presence } from "./Presence-BwBquQOQ.js";
+import { P as Primitive } from "./Primitive-Bt_MgDir.js";
+import { s as surfaceVariants } from "./SurfaceStyles-BYLzCbuJ.js";
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  ...{ name: "BoxLayout", inheritAttrs: false },
+  __name: "BoxLayout",
+  props: {
+    as: { default: "div" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn(attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(props.as), mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...{ name: "HStackLayout", inheritAttrs: false },
+  __name: "HStackLayout",
+  setup(__props, { expose: __expose }) {
+    const inner = useTemplateRef("inner");
+    const el = computed(() => inner.value?.el ?? null);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$y, mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        direction: "row"
+      }, _ctx.$attrs), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  ...{ name: "VStackLayout", inheritAttrs: false },
+  __name: "VStackLayout",
+  setup(__props, { expose: __expose }) {
+    const inner = useTemplateRef("inner");
+    const el = computed(() => inner.value?.el ?? null);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$y, mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        direction: "column"
+      }, _ctx.$attrs), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const gridVariants = tv({
+  base: "grid",
+  variants: {
+    columns: {
+      "1": "grid-cols-1",
+      "2": "grid-cols-2",
+      "3": "grid-cols-3",
+      "4": "grid-cols-4",
+      "5": "grid-cols-5",
+      "6": "grid-cols-6",
+      "8": "grid-cols-8",
+      "12": "grid-cols-12"
+    },
+    gap: {
+      "0": "gap-0",
+      "1": "gap-1",
+      "2": "gap-2",
+      "3": "gap-3",
+      "4": "gap-4",
+      "5": "gap-5",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12"
+    }
+  },
+  defaultVariants: {
+    columns: "2",
+    gap: "4"
+  }
+});
+const GridBreakpoint = {
+  /** Refers to the unprefixed (mobile-first) breakpoint. */
+  Base: "base",
+  /** Refers to the `sm:` breakpoint. */
+  Sm: "sm",
+  /** Refers to the `md:` breakpoint. */
+  Md: "md",
+  /** Refers to the `lg:` breakpoint. */
+  Lg: "lg",
+  /** Refers to the `xl:` breakpoint. */
+  Xl: "xl"
+};
+const ColumnClasses = {
+  base: {
+    "1": "grid-cols-1",
+    "2": "grid-cols-2",
+    "3": "grid-cols-3",
+    "4": "grid-cols-4",
+    "5": "grid-cols-5",
+    "6": "grid-cols-6",
+    "8": "grid-cols-8",
+    "12": "grid-cols-12"
+  },
+  sm: {
+    "1": "sm:grid-cols-1",
+    "2": "sm:grid-cols-2",
+    "3": "sm:grid-cols-3",
+    "4": "sm:grid-cols-4",
+    "5": "sm:grid-cols-5",
+    "6": "sm:grid-cols-6",
+    "8": "sm:grid-cols-8",
+    "12": "sm:grid-cols-12"
+  },
+  md: {
+    "1": "md:grid-cols-1",
+    "2": "md:grid-cols-2",
+    "3": "md:grid-cols-3",
+    "4": "md:grid-cols-4",
+    "5": "md:grid-cols-5",
+    "6": "md:grid-cols-6",
+    "8": "md:grid-cols-8",
+    "12": "md:grid-cols-12"
+  },
+  lg: {
+    "1": "lg:grid-cols-1",
+    "2": "lg:grid-cols-2",
+    "3": "lg:grid-cols-3",
+    "4": "lg:grid-cols-4",
+    "5": "lg:grid-cols-5",
+    "6": "lg:grid-cols-6",
+    "8": "lg:grid-cols-8",
+    "12": "lg:grid-cols-12"
+  },
+  xl: {
+    "1": "xl:grid-cols-1",
+    "2": "xl:grid-cols-2",
+    "3": "xl:grid-cols-3",
+    "4": "xl:grid-cols-4",
+    "5": "xl:grid-cols-5",
+    "6": "xl:grid-cols-6",
+    "8": "xl:grid-cols-8",
+    "12": "xl:grid-cols-12"
+  }
+};
+const GapClasses = {
+  base: {
+    "0": "gap-0",
+    "1": "gap-1",
+    "2": "gap-2",
+    "3": "gap-3",
+    "4": "gap-4",
+    "5": "gap-5",
+    "6": "gap-6",
+    "8": "gap-8",
+    "10": "gap-10",
+    "12": "gap-12"
+  },
+  sm: {
+    "0": "sm:gap-0",
+    "1": "sm:gap-1",
+    "2": "sm:gap-2",
+    "3": "sm:gap-3",
+    "4": "sm:gap-4",
+    "5": "sm:gap-5",
+    "6": "sm:gap-6",
+    "8": "sm:gap-8",
+    "10": "sm:gap-10",
+    "12": "sm:gap-12"
+  },
+  md: {
+    "0": "md:gap-0",
+    "1": "md:gap-1",
+    "2": "md:gap-2",
+    "3": "md:gap-3",
+    "4": "md:gap-4",
+    "5": "md:gap-5",
+    "6": "md:gap-6",
+    "8": "md:gap-8",
+    "10": "md:gap-10",
+    "12": "md:gap-12"
+  },
+  lg: {
+    "0": "lg:gap-0",
+    "1": "lg:gap-1",
+    "2": "lg:gap-2",
+    "3": "lg:gap-3",
+    "4": "lg:gap-4",
+    "5": "lg:gap-5",
+    "6": "lg:gap-6",
+    "8": "lg:gap-8",
+    "10": "lg:gap-10",
+    "12": "lg:gap-12"
+  },
+  xl: {
+    "0": "xl:gap-0",
+    "1": "xl:gap-1",
+    "2": "xl:gap-2",
+    "3": "xl:gap-3",
+    "4": "xl:gap-4",
+    "5": "xl:gap-5",
+    "6": "xl:gap-6",
+    "8": "xl:gap-8",
+    "10": "xl:gap-10",
+    "12": "xl:gap-12"
+  }
+};
+const BreakpointOrder = ["base", "sm", "md", "lg", "xl"];
+function resolveGridColumns(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return ColumnClasses.base[value];
+  return BreakpointOrder.map((bp) => {
+    const v = value[bp];
+    return v === void 0 ? void 0 : ColumnClasses[bp][v];
+  }).filter((c) => Boolean(c)).join(" ");
+}
+function resolveGridGap(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return GapClasses.base[value];
+  return BreakpointOrder.map((bp) => {
+    const v = value[bp];
+    return v === void 0 ? void 0 : GapClasses[bp][v];
+  }).filter((c) => Boolean(c)).join(" ");
+}
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...{ name: "Grid", inheritAttrs: false },
+  __name: "Grid",
+  props: {
+    as: { default: "div" },
+    columns: { default: "2" },
+    gap: { default: "4" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn("grid", resolveGridColumns(props.columns), resolveGridGap(props.gap), attrs.class)
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(props.as), mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const ContainerLayoutSize = {
+  /** Refers to the small screen max-width. */
+  Sm: "sm",
+  /** Refers to the medium screen max-width. */
+  Md: "md",
+  /** Refers to the large screen max-width. */
+  Lg: "lg",
+  /** Refers to the extra-large screen max-width. */
+  Xl: "xl",
+  /** Refers to the 2x extra-large screen max-width. */
+  Xxl: "2xl",
+  /** Refers to an unconstrained (full) max-width. */
+  Full: "full"
+};
+const containerVariants = tv({
+  base: "mx-auto w-full px-4",
+  variants: {
+    size: {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      "2xl": "max-w-screen-2xl",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...{ name: "ContainerLayout", inheritAttrs: false },
+  __name: "ContainerLayout",
+  props: {
+    as: { default: "div" },
+    size: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn(containerVariants({ size: props.size }), attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(props.as), mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...{ name: "FlexLayout", inheritAttrs: false },
+  __name: "FlexLayout",
+  props: {
+    as: { default: "div" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn("flex", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(props.as), mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...{ name: "AspectRatioLayout", inheritAttrs: false },
+  __name: "AspectRatioLayout",
+  props: {
+    ratio: { default: 1 }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn("relative w-full", attrs.class));
+    const styles = computed(() => normalizeStyle([{ aspectRatio: `${props.ratio}` }, attrs.style]));
+    const rest = computed(() => {
+      const { class: _class, style: _style, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, {
+        class: classes.value,
+        style: styles.value
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...{ name: "SpacerLayout", inheritAttrs: false },
+  __name: "SpacerLayout",
+  props: {
+    size: {},
+    axis: { default: Orientation.Horizontal }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const fixed = computed(() => {
+      if (props.size === void 0) return void 0;
+      const length = typeof props.size === "number" ? `${props.size}px` : props.size;
+      return props.axis === Orientation.Horizontal ? { width: length, flexShrink: 0 } : { height: length, flexShrink: 0 };
+    });
+    const classes = computed(() => cn(props.size === void 0 && "flex-1", attrs.class));
+    const styles = computed(() => normalizeStyle([fixed.value, attrs.style]));
+    const rest = computed(() => {
+      const { class: _class, style: _style, ...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,
+        style: styles.value
+      }), null, 16);
+    };
+  }
+});
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...{ name: "CenterLayout", inheritAttrs: false },
+  __name: "CenterLayout",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn("flex items-center justify-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
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const dividerVariants = tv({
+  base: "border-border",
+  variants: {
+    orientation: {
+      horizontal: "w-full border-t",
+      vertical: "self-stretch border-l"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+const _hoisted_1$8 = { class: "text-sm text-muted-foreground" };
+const _hoisted_2$2 = ["aria-orientation"];
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{ name: "DividerLayout", inheritAttrs: false },
+  __name: "DividerLayout",
+  props: {
+    orientation: {},
+    label: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const isLabelled = computed(() => props.label != null);
+    const labelledClasses = computed(() => cn("flex w-full items-center gap-3", attrs.class));
+    const plainClasses = computed(
+      () => cn(dividerVariants({ orientation: props.orientation }), attrs.class)
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return isLabelled.value ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        ref_key: "el",
+        ref: el,
+        role: "separator",
+        "aria-orientation": "horizontal"
+      }, rest.value, { class: labelledClasses.value }), [
+        _cache[0] || (_cache[0] = createElementVNode("span", { class: "h-px flex-1 bg-border" }, null, -1)),
+        createElementVNode("span", _hoisted_1$8, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(props.label), 1)
+          ])
+        ]),
+        _cache[1] || (_cache[1] = createElementVNode("span", { class: "h-px flex-1 bg-border" }, null, -1))
+      ], 16)) : (openBlock(), createElementBlock("div", mergeProps({
+        key: 1,
+        ref_key: "el",
+        ref: el,
+        role: "separator",
+        "aria-orientation": props.orientation
+      }, rest.value, { class: plainClasses.value }), null, 16, _hoisted_2$2));
+    };
+  }
+});
+const ScrollAxis = {
+  /** Refers to vertical scrolling only. */
+  Vertical: "vertical",
+  /** Refers to horizontal scrolling only. */
+  Horizontal: "horizontal",
+  /** Refers to scrolling on both axes. */
+  Both: "both"
+};
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...{ name: "ScrollArea", inheritAttrs: false },
+  __name: "ScrollArea",
+  props: {
+    axis: { default: ScrollAxis.Vertical }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        "relative",
+        props.axis === ScrollAxis.Vertical && "overflow-y-auto overflow-x-hidden",
+        props.axis === ScrollAxis.Horizontal && "overflow-x-auto overflow-y-hidden",
+        props.axis === ScrollAxis.Both && "overflow-auto",
+        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 }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const GapClass$1 = {
+  "2": "gap-2",
+  "3": "gap-3",
+  "4": "gap-4",
+  "6": "gap-6",
+  "8": "gap-8"
+};
+const JustifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...{ name: "ClusterLayout", inheritAttrs: false },
+  __name: "ClusterLayout",
+  props: {
+    gap: { default: "4" },
+    justify: { default: Align.Center }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        "flex flex-wrap items-center",
+        GapClass$1[props.gap],
+        JustifyClass[props.justify],
+        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 }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const FrameLayoutSurface = {
+  /** Refers to a raised card surface. */
+  Card: "card",
+  /** Refers to a recessed muted surface. */
+  Muted: "muted",
+  /** Refers to no surface fill (transparent). */
+  Transparent: "transparent"
+};
+const PaddingClass = {
+  "0": "",
+  "2": "p-2",
+  "3": "p-3",
+  "4": "p-4",
+  "6": "p-6",
+  "8": "p-8"
+};
+const RadiusClass = {
+  none: "",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  full: "rounded-full"
+};
+const SurfaceClass = {
+  card: "bg-card text-card-foreground",
+  muted: "bg-muted text-foreground",
+  transparent: ""
+};
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...{ name: "FrameLayout", inheritAttrs: false },
+  __name: "FrameLayout",
+  props: {
+    padding: { default: "4" },
+    radius: { default: Radius.Md },
+    surface: { default: FrameLayoutSurface.Card },
+    isBordered: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        SurfaceClass[props.surface],
+        PaddingClass[props.padding],
+        RadiusClass[props.radius],
+        props.isBordered && "border border-border",
+        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 }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$7 = { class: "min-w-0 flex-1" };
+const GapClass = {
+  "0": "gap-0",
+  "4": "gap-4",
+  "6": "gap-6",
+  "8": "gap-8",
+  "10": "gap-10"
+};
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...{ name: "TwoColumnLayout", inheritAttrs: false },
+  __name: "TwoColumnLayout",
+  props: {
+    asideWidth: { default: "w-64" },
+    asideSide: { default: Side.Left },
+    gap: { default: "6" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        "flex w-full",
+        props.asideSide === Side.Right && "flex-row-reverse",
+        GapClass[props.gap],
+        attrs.class
+      )
+    );
+    const asideClasses = computed(() => cn("shrink-0", props.asideWidth));
+    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("aside", {
+          class: normalizeClass(asideClasses.value)
+        }, [
+          renderSlot(_ctx.$slots, "aside")
+        ], 2),
+        createElementVNode("main", _hoisted_1$7, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$6 = ["data-orientation"];
+const resizableContextKey = Symbol("wow-two.resizablePanels");
+function useResizableContext() {
+  const context = inject(resizableContextKey, null);
+  if (!context) throw new Error("ResizablePanelsLayout.* must be used inside <ResizablePanelsLayout>");
+  return context;
+}
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...{ name: "ResizablePanelsLayout", inheritAttrs: false },
+  __name: "ResizablePanelsLayout",
+  props: {
+    orientation: { default: Orientation.Horizontal },
+    defaultSizes: { default: void 0 },
+    sizes: { default: void 0 }
+  },
+  emits: ["update:sizes"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const panelEntries = ref([]);
+    const separatorTokens = ref([]);
+    const panelCount = computed(() => panelEntries.value.length);
+    const controlled = useControlled({
+      controlled: () => props.sizes,
+      default: props.defaultSizes ?? [],
+      onChange: (next) => emit("update:sizes", next)
+    });
+    watch(
+      panelCount,
+      (count) => {
+        if (controlled.value.value.length === count) return;
+        if (props.defaultSizes && props.defaultSizes.length === count) {
+          controlled.setValue(props.defaultSizes);
+          return;
+        }
+        controlled.setValue(Array(count).fill(100 / Math.max(count, 1)));
+      },
+      { immediate: true }
+    );
+    function findPanel(index) {
+      return panelEntries.value[index]?.info;
+    }
+    function applyDelta(separatorIndex, deltaPct) {
+      const a = separatorIndex;
+      const b = separatorIndex + 1;
+      const aInfo = findPanel(a);
+      const bInfo = findPanel(b);
+      if (!aInfo || !bInfo) return;
+      const next = controlled.value.value.slice();
+      let nextA = next[a] + deltaPct;
+      let nextB = next[b] - deltaPct;
+      if (nextA < aInfo.minSize) {
+        const adj = aInfo.minSize - nextA;
+        nextA += adj;
+        nextB -= adj;
+      }
+      if (nextB < bInfo.minSize) {
+        const adj = bInfo.minSize - nextB;
+        nextB += adj;
+        nextA -= adj;
+      }
+      if (nextA > aInfo.maxSize) {
+        const adj = nextA - aInfo.maxSize;
+        nextA -= adj;
+        nextB += adj;
+      }
+      if (nextB > bInfo.maxSize) {
+        const adj = nextB - bInfo.maxSize;
+        nextB -= adj;
+        nextA += adj;
+      }
+      next[a] = nextA;
+      next[b] = nextB;
+      controlled.setValue(next);
+    }
+    let dragCleanup = null;
+    onScopeDispose(() => dragCleanup?.());
+    function beginDrag(separatorIndex, event) {
+      const container = el.value;
+      if (!container) return;
+      const startX = event.clientX;
+      const startY = event.clientY;
+      const rect = container.getBoundingClientRect();
+      const total = props.orientation === Orientation.Horizontal ? rect.width : rect.height;
+      if (total === 0) return;
+      const startSizes = controlled.value.value.slice();
+      const onMove = (e) => {
+        const deltaPx = props.orientation === Orientation.Horizontal ? e.clientX - startX : e.clientY - startY;
+        const deltaPct = deltaPx / total * 100;
+        const a = separatorIndex;
+        const b = separatorIndex + 1;
+        const aInfo = findPanel(a);
+        const bInfo = findPanel(b);
+        if (!aInfo || !bInfo) return;
+        let nextA = startSizes[a] + deltaPct;
+        let nextB = startSizes[b] - deltaPct;
+        nextA = Math.max(aInfo.minSize, Math.min(aInfo.maxSize, nextA));
+        nextB = Math.max(bInfo.minSize, Math.min(bInfo.maxSize, nextB));
+        const sum = nextA + nextB;
+        const startSum = startSizes[a] + startSizes[b];
+        if (sum !== startSum) {
+          const diff = startSum - sum;
+          if (nextA + diff <= aInfo.maxSize && nextA + diff >= aInfo.minSize) {
+            nextA = nextA + diff;
+          } else {
+            nextB = nextB + diff;
+          }
+        }
+        const next = startSizes.slice();
+        next[a] = nextA;
+        next[b] = nextB;
+        controlled.setValue(next);
+      };
+      const onUp = () => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        dragCleanup = null;
+      };
+      document.body.style.cursor = props.orientation === Orientation.Horizontal ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+      dragCleanup = onUp;
+    }
+    function resetPair(separatorIndex) {
+      const a = separatorIndex;
+      const b = separatorIndex + 1;
+      const aInfo = findPanel(a);
+      const bInfo = findPanel(b);
+      if (!aInfo || !bInfo) return;
+      const next = controlled.value.value.slice();
+      const total = next[a] + next[b];
+      next[a] = total * aInfo.defaultSize / (aInfo.defaultSize + bInfo.defaultSize);
+      next[b] = total - next[a];
+      controlled.setValue(next);
+    }
+    provide(resizableContextKey, {
+      get orientation() {
+        return props.orientation;
+      },
+      get sizes() {
+        return controlled.value.value;
+      },
+      get panels() {
+        return panelEntries.value.map((entry) => entry.info);
+      },
+      registerPanel: (token, info) => {
+        panelEntries.value = [...panelEntries.value, { token, info }];
+      },
+      updatePanel: (token, info) => {
+        panelEntries.value = panelEntries.value.map((entry) => entry.token === token ? { token, info } : entry);
+      },
+      unregisterPanel: (token) => {
+        panelEntries.value = panelEntries.value.filter((entry) => entry.token !== token);
+      },
+      panelIndex: (token) => panelEntries.value.findIndex((entry) => entry.token === token),
+      registerSeparator: (token) => {
+        separatorTokens.value = [...separatorTokens.value, token];
+      },
+      unregisterSeparator: (token) => {
+        separatorTokens.value = separatorTokens.value.filter((existing) => existing !== token);
+      },
+      separatorIndex: (token) => separatorTokens.value.indexOf(token),
+      beginDrag,
+      nudge: applyDelta,
+      resetPair
+    });
+    const classes = computed(
+      () => cn(
+        "flex h-full w-full",
+        props.orientation === Orientation.Horizontal ? "flex-row" : "flex-col",
+        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,
+        "data-orientation": __props.orientation
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$6);
+    };
+  }
+});
+const _hoisted_1$5 = ["data-panel-index"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...{ name: "ResizablePanel", inheritAttrs: false },
+  __name: "ResizablePanel",
+  props: {
+    defaultSize: { default: 100 },
+    minSize: { default: 0 },
+    maxSize: { default: 100 }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const context = useResizableContext();
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const token = Symbol("wow-two.resizablePanel");
+    context.registerPanel(token, {
+      defaultSize: props.defaultSize,
+      minSize: props.minSize,
+      maxSize: props.maxSize
+    });
+    watch(
+      () => [props.defaultSize, props.minSize, props.maxSize],
+      ([defaultSize, minSize, maxSize]) => {
+        context.updatePanel(token, { defaultSize, minSize, maxSize });
+      }
+    );
+    onUnmounted(() => context.unregisterPanel(token));
+    const index = computed(() => context.panelIndex(token));
+    const size = computed(() => context.sizes[index.value] ?? props.defaultSize);
+    const styles = computed(
+      () => context.orientation === Orientation.Horizontal ? { width: `${size.value}%`, height: "100%" } : { height: `${size.value}%`, width: "100%" }
+    );
+    const classes = computed(() => cn("overflow-auto", 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,
+        "data-panel-index": index.value
+      }, rest.value, {
+        class: classes.value,
+        style: styles.value
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$5);
+    };
+  }
+});
+const _hoisted_1$4 = ["aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-disabled", "tabindex", "data-dragging"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...{ name: "ResizableSeparator", inheritAttrs: false },
+  __name: "ResizableSeparator",
+  props: {
+    isDisabled: { type: Boolean, default: false }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const context = useResizableContext();
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const token = Symbol("wow-two.resizableSeparator");
+    context.registerSeparator(token);
+    onUnmounted(() => context.unregisterSeparator(token));
+    const index = computed(() => context.separatorIndex(token));
+    const dragging = ref(false);
+    function handleMouseDown(e) {
+      if (props.isDisabled) return;
+      if (e.button !== 0) return;
+      e.preventDefault();
+      dragging.value = true;
+      context.beginDrag(index.value, e);
+      const onUp = () => {
+        dragging.value = false;
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mouseup", onUp);
+    }
+    function handleKeydown(e) {
+      if (props.isDisabled) return;
+      const step = e.shiftKey ? 10 : 1;
+      if (context.orientation === Orientation.Horizontal) {
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          context.nudge(index.value, -step);
+        } else if (e.key === "ArrowRight") {
+          e.preventDefault();
+          context.nudge(index.value, step);
+        }
+      } else {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          context.nudge(index.value, -step);
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          context.nudge(index.value, step);
+        }
+      }
+    }
+    function handleDblclick() {
+      if (props.isDisabled) return;
+      context.resetPair(index.value);
+    }
+    function asHandler(value) {
+      if (typeof value === "function") return value;
+      if (Array.isArray(value)) {
+        return (event) => {
+          for (const fn of value) if (typeof fn === "function") fn(event);
+        };
+      }
+      return void 0;
+    }
+    const onKeydown = computed(() => composeEventHandlers(asHandler(attrs.onKeydown), handleKeydown));
+    const onDblclick = computed(() => composeEventHandlers(asHandler(attrs.onDblclick), handleDblclick));
+    const ariaValueNow = computed(() => Math.round(context.sizes[index.value] ?? 50));
+    const panelBefore = computed(() => context.panels[index.value]);
+    const classes = computed(
+      () => cn(
+        "flex shrink-0 items-center justify-center bg-border transition-colors",
+        context.orientation === Orientation.Horizontal ? "w-1 cursor-col-resize hover:bg-border-strong data-[dragging]:bg-primary" : "h-1 cursor-row-resize hover:bg-border-strong data-[dragging]:bg-primary",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        props.isDisabled && "cursor-default opacity-50 hover:bg-border",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, onKeydown: _keydown, onDblclick: _dblclick, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "separator",
+        "aria-orientation": unref(context).orientation === unref(Orientation).Horizontal ? "vertical" : "horizontal",
+        "aria-valuenow": ariaValueNow.value,
+        "aria-valuemin": panelBefore.value?.minSize ?? 0,
+        "aria-valuemax": panelBefore.value?.maxSize ?? 100,
+        "aria-disabled": __props.isDisabled || void 0,
+        tabindex: __props.isDisabled ? -1 : 0,
+        "data-dragging": dragging.value || void 0
+      }, rest.value, {
+        class: classes.value,
+        onMousedown: handleMouseDown,
+        onKeydown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => onKeydown.value && onKeydown.value(...args)),
+        onDblclick: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => onDblclick.value && onDblclick.value(...args))
+      }), null, 16, _hoisted_1$4);
+    };
+  }
+});
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...{ name: "PullToRefreshLayout", inheritAttrs: false },
+  __name: "PullToRefreshLayout",
+  props: {
+    onRefresh: {},
+    threshold: { default: 60 },
+    maxPull: { default: 120 },
+    isDisabled: { type: Boolean, default: false }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const startY = ref(null);
+    const pull = ref(0);
+    const refreshing = ref(false);
+    const reached = computed(() => pull.value >= props.threshold);
+    function onPointerDown(e) {
+      if (props.isDisabled || refreshing.value) return;
+      const node = el.value;
+      if (!node || node.scrollTop > 0) return;
+      startY.value = e.clientY;
+    }
+    function onPointerMove(e) {
+      if (startY.value == null) return;
+      if (e.buttons === 0) {
+        startY.value = null;
+        pull.value = 0;
+        return;
+      }
+      const dy = e.clientY - startY.value;
+      if (dy < 0) {
+        pull.value = 0;
+        return;
+      }
+      const eased = dy < props.threshold ? dy : props.threshold + (dy - props.threshold) * 0.4;
+      pull.value = Math.min(props.maxPull, eased);
+    }
+    async function onPointerUp() {
+      if (startY.value == null) return;
+      const didReach = pull.value >= props.threshold;
+      startY.value = null;
+      if (didReach) {
+        refreshing.value = true;
+        pull.value = props.threshold;
+        try {
+          await props.onRefresh();
+        } finally {
+          refreshing.value = false;
+          pull.value = 0;
+        }
+      } else {
+        pull.value = 0;
+      }
+    }
+    function onTouchMove(e) {
+      const node = el.value;
+      if (!node || startY.value == null || !e.cancelable) return;
+      if (node.scrollTop > 0) return;
+      const touch = e.touches[0];
+      if (!touch) return;
+      if (touch.clientY - startY.value > 0) e.preventDefault();
+    }
+    onMounted(() => {
+      el.value?.addEventListener("touchmove", onTouchMove, { passive: false });
+    });
+    onBeforeUnmount(() => {
+      el.value?.removeEventListener("touchmove", onTouchMove);
+    });
+    watch(pull, (value, _previous, onCleanup) => {
+      if (value === 0) return;
+      const finish = () => {
+        void onPointerUp();
+      };
+      window.addEventListener("pointerup", finish);
+      window.addEventListener("pointercancel", finish);
+      onCleanup(() => {
+        window.removeEventListener("pointerup", finish);
+        window.removeEventListener("pointercancel", finish);
+      });
+    });
+    const classes = computed(() => cn("relative h-full overflow-y-auto", attrs.class));
+    const indicatorStyle = computed(() => ({
+      height: `${pull.value}px`,
+      transition: startY.value == null ? "height 200ms ease-out" : "none"
+    }));
+    const contentStyle = computed(() => ({
+      transform: `translateY(${pull.value}px)`,
+      transition: startY.value == null ? "transform 200ms ease-out" : "none"
+    }));
+    const spinnerScaleStyle = computed(() => ({
+      transform: `scale(${Math.min(1, pull.value / props.threshold)})`
+    }));
+    const spinnerWrapClasses = computed(
+      () => cn("transition-opacity", refreshing.value || reached.value ? "opacity-100" : "opacity-60")
+    );
+    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,
+        onPointerdown: onPointerDown,
+        onPointermove: onPointerMove,
+        onPointerup: onPointerUp,
+        onPointercancel: onPointerUp
+      }), [
+        createElementVNode("div", {
+          "aria-hidden": "true",
+          class: "pointer-events-none absolute inset-x-0 top-0 z-raised flex items-center justify-center",
+          style: normalizeStyle(indicatorStyle.value)
+        }, [
+          pull.value > 8 ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(spinnerWrapClasses.value),
+            style: normalizeStyle(spinnerScaleStyle.value)
+          }, [
+            createVNode(_sfc_main$z, {
+              size: "md",
+              tone: reached.value ? "brand" : "default"
+            }, null, 8, ["tone"])
+          ], 6)) : createCommentVNode("", true)
+        ], 4),
+        createElementVNode("div", {
+          style: normalizeStyle(contentStyle.value)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 4),
+        createVNode(unref(_sfc_main$A), {
+          politeness: unref(Politeness).Polite
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(refreshing.value ? "Refreshing" : ""), 1)
+          ]),
+          _: 1
+        }, 8, ["politeness"])
+      ], 16);
+    };
+  }
+});
+const Breakpoint = {
+  /** Refers to the `sm` (640px) breakpoint. */
+  Sm: "sm",
+  /** Refers to the `md` (768px) breakpoint. */
+  Md: "md",
+  /** Refers to the `lg` (1024px) breakpoint. */
+  Lg: "lg",
+  /** Refers to the `xl` (1280px) breakpoint. */
+  Xl: "xl",
+  /** Refers to the `2xl` (1536px) breakpoint. */
+  Xxl: "2xl"
+};
+const BreakpointPx = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+const appShellContextKey = Symbol("wow-two.appShell");
+function useAppShellContext() {
+  const context = inject(appShellContextKey, null);
+  if (!context) throw new Error("AppShell.* must be used inside <AppShell>");
+  return context;
+}
+function useAppShell() {
+  return useAppShellContext();
+}
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...{ name: "AppShell", inheritAttrs: false },
+  __name: "AppShell",
+  props: {
+    sidebarWidth: { default: "240px" },
+    asideWidth: { default: "280px" },
+    sidebarBreakpoint: { default: "lg" },
+    asideBreakpoint: { default: "xl" },
+    sidebarOpen: { type: Boolean, default: void 0 },
+    defaultSidebarOpen: { type: Boolean, default: false }
+  },
+  emits: ["update:sidebarOpen"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const controlled = useControlled({
+      controlled: () => props.sidebarOpen,
+      default: () => props.defaultSidebarOpen,
+      onChange: (value) => {
+        emit("update:sidebarOpen", value);
+      }
+    });
+    const isSidebarWide = useMediaQuery(() => `(min-width: ${BreakpointPx[props.sidebarBreakpoint]}px)`);
+    const isAsideWide = useMediaQuery(() => `(min-width: ${BreakpointPx[props.asideBreakpoint]}px)`);
+    const isSidebarCollapsed = computed(() => !isSidebarWide.value);
+    const isAsideHidden = computed(() => !isAsideWide.value);
+    provide(appShellContextKey, {
+      sidebarWidth: computed(() => props.sidebarWidth),
+      asideWidth: computed(() => props.asideWidth),
+      sidebarBreakpoint: computed(() => props.sidebarBreakpoint),
+      isSidebarOpen: controlled.value,
+      setSidebarOpen: controlled.setValue,
+      isSidebarCollapsed,
+      isAsideHidden
+    });
+    const gridTemplate = computed(
+      () => isSidebarCollapsed.value ? `'header header' auto 'main main' 1fr 'footer footer' auto / 1fr` : `'header header' auto 'sidebar main' 1fr 'sidebar footer' auto / ${props.sidebarWidth} 1fr`
+    );
+    const classes = computed(() => cn("grid min-h-svh bg-background text-foreground", attrs.class));
+    const rootStyle = computed(() => normalizeStyle([{ gridTemplate: gridTemplate.value }, attrs.style]));
+    const rest = computed(() => {
+      const { class: _class, style: _style, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, {
+        style: rootStyle.value,
+        class: classes.value
+      }), [
+        _cache[0] || (_cache[0] = createElementVNode("a", {
+          href: "#app-shell-main",
+          class: "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-modal focus:rounded-md focus:bg-card focus:px-3 focus:py-2 focus:shadow"
+        }, " Skip to content ", -1)),
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...{ name: "AppShellHeader", inheritAttrs: false },
+  __name: "AppShellHeader",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        "sticky top-0 z-sticky flex h-14 items-center gap-3 border-b border-border bg-card px-4 [grid-area:header]",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("header", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "banner"
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$3 = { class: "flex h-full w-full flex-col p-3" };
+const SidebarStaticClasses = {
+  sm: "hidden sm:flex",
+  md: "hidden md:flex",
+  lg: "hidden lg:flex",
+  xl: "hidden xl:flex",
+  "2xl": "hidden 2xl:flex"
+};
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...{ name: "AppShellSidebar", inheritAttrs: false },
+  __name: "AppShellSidebar",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const context = useAppShellContext();
+    const isCollapsed = context.isSidebarCollapsed;
+    const isSidebarOpen = context.isSidebarOpen;
+    const asideClasses = computed(
+      () => cn(
+        "sticky top-14 h-[calc(100svh-3.5rem)] overflow-y-auto border-r border-border bg-card [grid-area:sidebar]",
+        SidebarStaticClasses[context.sidebarBreakpoint.value],
+        attrs.class
+      )
+    );
+    const navClasses = computed(() => cn("flex h-full flex-col", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return unref(isCollapsed) ? (openBlock(), createBlock(_sfc_main$B, {
+        key: 0,
+        open: unref(isSidebarOpen),
+        side: "left",
+        "onUpdate:open": unref(context).setSidebarOpen
+      }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$C, { class: "w-72 max-w-[80%]" }, {
+            default: withCtx(() => [
+              createElementVNode("nav", {
+                class: normalizeClass(navClasses.value)
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2)
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["open", "onUpdate:open"])) : (openBlock(), createElementBlock("aside", mergeProps({
+        key: 1,
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: asideClasses.value }), [
+        createElementVNode("nav", _hoisted_1$3, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 16));
+    };
+  }
+});
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...{ name: "AppShellMain", inheritAttrs: false },
+  __name: "AppShellMain",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn("flex flex-col [grid-area:main] focus:outline-hidden", attrs.class)
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("main", mergeProps({
+        ref_key: "el",
+        ref: el,
+        id: "app-shell-main",
+        tabindex: "-1"
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...{ name: "AppShellContent", inheritAttrs: false },
+  __name: "AppShellContent",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn("flex-1 overflow-y-auto p-6", 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 }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...{ name: "AppShellAside", inheritAttrs: false },
+  __name: "AppShellAside",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const context = useAppShellContext();
+    const isHidden = context.isAsideHidden;
+    const classes = computed(
+      () => cn(
+        "sticky top-14 h-[calc(100svh-3.5rem)] shrink-0 overflow-y-auto border-l border-border bg-card p-4",
+        attrs.class
+      )
+    );
+    const asideStyle = computed(() => normalizeStyle([{ width: context.asideWidth.value }, attrs.style]));
+    const rest = computed(() => {
+      const { class: _class, style: _style, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return !unref(isHidden) ? (openBlock(), createElementBlock("aside", mergeProps({
+        key: 0,
+        ref_key: "el",
+        ref: el
+      }, rest.value, {
+        style: asideStyle.value,
+        class: classes.value
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{ name: "AppShellFooter", inheritAttrs: false },
+  __name: "AppShellFooter",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        "border-t border-border bg-card px-4 py-3 text-sm text-muted-foreground [grid-area:footer]",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("footer", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "contentinfo"
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const AnchorLayoutVisibilityMode = {
+  /** Refers to an always-visible overlay. */
+  Always: "always",
+  /** Refers to reveal-on-hover (or focus-within) gating. */
+  Hover: "hover",
+  /** Refers to reveal-on-focus-within gating. */
+  FocusWithin: "focus-within",
+  /** Refers to mount/unmount gating driven by presence data-state. */
+  Presence: "presence"
+};
+const AnchorLayoutTransition = {
+  /** Refers to no transition. */
+  None: "none",
+  /** Refers to an opacity fade. */
+  Fade: "fade",
+  /** Refers to a fade combined with a scale. */
+  FadeScale: "fade-scale",
+  /** Refers to a fade combined with an upward slide. */
+  FadeSlideUp: "fade-slide-up",
+  /** Refers to a fade combined with a downward slide. */
+  FadeSlideDown: "fade-slide-down",
+  /** Refers to a fade combined with a leftward slide. */
+  FadeSlideLeft: "fade-slide-left",
+  /** Refers to a fade combined with a rightward slide. */
+  FadeSlideRight: "fade-slide-right"
+};
+const overlayVariants = tv({
+  base: "absolute",
+  variants: {
+    position: {
+      "top-right": "top-[var(--ui-overlay-inset,0.5rem)] right-[var(--ui-overlay-inset,0.5rem)]",
+      "top-left": "top-[var(--ui-overlay-inset,0.5rem)] left-[var(--ui-overlay-inset,0.5rem)]",
+      "bottom-right": "bottom-[var(--ui-overlay-inset,0.5rem)] right-[var(--ui-overlay-inset,0.5rem)]",
+      "bottom-left": "bottom-[var(--ui-overlay-inset,0.5rem)] left-[var(--ui-overlay-inset,0.5rem)]",
+      top: "top-[var(--ui-overlay-inset,0.5rem)] left-1/2 -translate-x-1/2",
+      bottom: "bottom-[var(--ui-overlay-inset,0.5rem)] left-1/2 -translate-x-1/2",
+      left: "left-[var(--ui-overlay-inset,0.5rem)] top-1/2 -translate-y-1/2",
+      right: "right-[var(--ui-overlay-inset,0.5rem)] top-1/2 -translate-y-1/2",
+      center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+      custom: ""
+      // consumer passed inset object — positioning via inline style
+    },
+    visibilityMode: {
+      always: "",
+      hover: "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 group-hover:[transition-duration:var(--ui-overlay-enter,200ms)] group-focus-within:[transition-duration:var(--ui-overlay-enter,200ms)]",
+      "focus-within": "opacity-0 group-focus-within:opacity-100 group-focus-within:[transition-duration:var(--ui-overlay-enter,200ms)]",
+      presence: "data-[state=closed]:opacity-0 data-[state=open]:[transition-duration:var(--ui-overlay-enter,200ms)]"
+    },
+    transition: {
+      none: "",
+      fade: "transition-opacity duration-[var(--ui-overlay-exit,200ms)] ease-out",
+      "fade-scale": "transition-[opacity,transform] duration-[var(--ui-overlay-exit,200ms)] ease-out",
+      "fade-slide-up": "transition-[opacity,transform] duration-[var(--ui-overlay-exit,200ms)] ease-out",
+      "fade-slide-down": "transition-[opacity,transform] duration-[var(--ui-overlay-exit,200ms)] ease-out",
+      "fade-slide-left": "transition-[opacity,transform] duration-[var(--ui-overlay-exit,200ms)] ease-out",
+      "fade-slide-right": "transition-[opacity,transform] duration-[var(--ui-overlay-exit,200ms)] ease-out"
+    }
+  },
+  compoundVariants: [
+    // === HOVER mode + transform-bearing transitions ===
+    {
+      visibilityMode: "hover",
+      transition: "fade-scale",
+      class: "scale-95 group-hover:scale-100 group-focus-within:scale-100 motion-reduce:scale-100 motion-reduce:group-hover:scale-100 motion-reduce:group-focus-within:scale-100"
+    },
+    {
+      visibilityMode: "hover",
+      transition: "fade-slide-up",
+      class: "translate-y-1 group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:translate-y-0 motion-reduce:group-hover:translate-y-0 motion-reduce:group-focus-within:translate-y-0"
+    },
+    {
+      visibilityMode: "hover",
+      transition: "fade-slide-down",
+      class: "-translate-y-1 group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:translate-y-0 motion-reduce:group-hover:translate-y-0 motion-reduce:group-focus-within:translate-y-0"
+    },
+    {
+      visibilityMode: "hover",
+      transition: "fade-slide-left",
+      class: "translate-x-1 group-hover:translate-x-0 group-focus-within:translate-x-0 motion-reduce:translate-x-0 motion-reduce:group-hover:translate-x-0 motion-reduce:group-focus-within:translate-x-0"
+    },
+    {
+      visibilityMode: "hover",
+      transition: "fade-slide-right",
+      class: "-translate-x-1 group-hover:translate-x-0 group-focus-within:translate-x-0 motion-reduce:translate-x-0 motion-reduce:group-hover:translate-x-0 motion-reduce:group-focus-within:translate-x-0"
+    },
+    // === FOCUS-WITHIN mode + transform-bearing transitions ===
+    {
+      visibilityMode: "focus-within",
+      transition: "fade-scale",
+      class: "scale-95 group-focus-within:scale-100 motion-reduce:scale-100 motion-reduce:group-focus-within:scale-100"
+    },
+    {
+      visibilityMode: "focus-within",
+      transition: "fade-slide-up",
+      class: "translate-y-1 group-focus-within:translate-y-0 motion-reduce:translate-y-0 motion-reduce:group-focus-within:translate-y-0"
+    },
+    {
+      visibilityMode: "focus-within",
+      transition: "fade-slide-down",
+      class: "-translate-y-1 group-focus-within:translate-y-0 motion-reduce:translate-y-0 motion-reduce:group-focus-within:translate-y-0"
+    },
+    {
+      visibilityMode: "focus-within",
+      transition: "fade-slide-left",
+      class: "translate-x-1 group-focus-within:translate-x-0 motion-reduce:translate-x-0 motion-reduce:group-focus-within:translate-x-0"
+    },
+    {
+      visibilityMode: "focus-within",
+      transition: "fade-slide-right",
+      class: "-translate-x-1 group-focus-within:translate-x-0 motion-reduce:translate-x-0 motion-reduce:group-focus-within:translate-x-0"
+    },
+    // === PRESENCE mode (data-state-driven) + transform-bearing transitions ===
+    {
+      visibilityMode: "presence",
+      transition: "fade-scale",
+      class: "data-[state=closed]:scale-95 motion-reduce:data-[state=closed]:scale-100"
+    },
+    {
+      visibilityMode: "presence",
+      transition: "fade-slide-up",
+      class: "data-[state=closed]:translate-y-1 motion-reduce:data-[state=closed]:translate-y-0"
+    },
+    {
+      visibilityMode: "presence",
+      transition: "fade-slide-down",
+      class: "data-[state=closed]:-translate-y-1 motion-reduce:data-[state=closed]:translate-y-0"
+    },
+    {
+      visibilityMode: "presence",
+      transition: "fade-slide-left",
+      class: "data-[state=closed]:translate-x-1 motion-reduce:data-[state=closed]:translate-x-0"
+    },
+    {
+      visibilityMode: "presence",
+      transition: "fade-slide-right",
+      class: "data-[state=closed]:-translate-x-1 motion-reduce:data-[state=closed]:translate-x-0"
+    }
+  ],
+  defaultVariants: {
+    position: "top-right",
+    visibilityMode: "always",
+    transition: "none"
+  }
+});
+const AnchorLayoutAppearOn = {
+  /** Refers to an always-visible overlay. */
+  Always: "always",
+  /** Refers to reveal-on-hover (and focus-within). */
+  Hover: "hover",
+  /** Refers to reveal-on-focus-within. */
+  FocusWithin: "focus-within"
+};
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...{ name: "AnchorLayout", inheritAttrs: false },
+  __name: "AnchorLayout",
+  props: {
+    position: { default: "top-right" },
+    inset: { default: void 0 },
+    zIndex: { default: 10 },
+    appearOn: { default: AnchorLayoutAppearOn.Always },
+    isOpen: { type: Boolean, default: void 0 },
+    transition: { default: void 0 },
+    transitionDuration: { default: void 0 },
+    transitionEasing: { default: void 0 },
+    asChild: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const isPresenceMode = computed(() => props.isOpen !== void 0);
+    const isCustomPosition = computed(() => typeof props.position === "object" && props.position !== null);
+    const effectiveTransition = computed(
+      () => props.transition ?? (isPresenceMode.value || props.appearOn !== AnchorLayoutAppearOn.Always ? AnchorLayoutTransition.Fade : AnchorLayoutTransition.None)
+    );
+    const visibilityMode = computed(
+      () => isPresenceMode.value ? AnchorLayoutVisibilityMode.Presence : props.appearOn === AnchorLayoutAppearOn.Hover ? AnchorLayoutVisibilityMode.Hover : props.appearOn === AnchorLayoutAppearOn.FocusWithin ? AnchorLayoutVisibilityMode.FocusWithin : AnchorLayoutVisibilityMode.Always
+    );
+    const classes = computed(
+      () => cn(
+        overlayVariants({
+          position: isCustomPosition.value ? "custom" : props.position,
+          visibilityMode: visibilityMode.value,
+          transition: effectiveTransition.value
+        }),
+        attrs.class
+      )
+    );
+    const inlineStyle = computed(() => {
+      const { enter, exit } = TransitionExtensions.resolveDuration(props.transitionDuration);
+      const own = {
+        zIndex: props.zIndex,
+        // CSS vars consumed by tailwind variants — exit is the baseline
+        // transition-duration; enter overrides it on hover / focus-within / isOpen.
+        "--ui-overlay-enter": `${enter}ms`,
+        "--ui-overlay-exit": `${exit}ms`
+      };
+      if (props.inset !== void 0) {
+        own["--ui-overlay-inset"] = CssExtensions.toCss(props.inset);
+      }
+      if (props.transitionEasing) {
+        own.transitionTimingFunction = props.transitionEasing;
+      }
+      if (isCustomPosition.value) {
+        const p = props.position;
+        if (p.top !== void 0) own.top = CssExtensions.toCss(p.top);
+        if (p.right !== void 0) own.right = CssExtensions.toCss(p.right);
+        if (p.bottom !== void 0) own.bottom = CssExtensions.toCss(p.bottom);
+        if (p.left !== void 0) own.left = CssExtensions.toCss(p.left);
+      }
+      return normalizeStyle([attrs.style, own]);
+    });
+    return (_ctx, _cache) => {
+      return isPresenceMode.value ? (openBlock(), createBlock(unref(Presence), {
+        key: 0,
+        "is-present": props.isOpen === true
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Primitive), {
+            as: "div",
+            "as-child": props.asChild,
+            class: normalizeClass(classes.value),
+            style: normalizeStyle(inlineStyle.value)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["as-child", "class", "style"])
+        ]),
+        _: 3
+      }, 8, ["is-present"])) : (openBlock(), createBlock(unref(Primitive), {
+        key: 1,
+        as: "div",
+        "as-child": props.asChild,
+        class: normalizeClass(classes.value),
+        style: normalizeStyle(inlineStyle.value)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as-child", "class", "style"]));
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SurfaceLayout", inheritAttrs: false },
+  __name: "SurfaceLayout",
+  props: {
+    as: { default: "div" },
+    asChild: { type: Boolean, default: false },
+    variant: {},
+    tone: {},
+    radius: {},
+    padding: {},
+    elevation: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const inner = useTemplateRef("inner");
+    const classes = computed(
+      () => cn(
+        surfaceVariants({
+          variant: props.variant,
+          tone: props.tone,
+          radius: props.radius,
+          padding: props.padding,
+          elevation: props.elevation
+        }),
+        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(unref(Primitive), mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        as: props.as,
+        "as-child": props.asChild
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as", "as-child", "class"]);
+    };
+  }
+});
+const SectionPaddingY = {
+  /** Refers to no vertical padding. */
+  None: "none",
+  /** Refers to a small vertical rhythm. */
+  Sm: "sm",
+  /** Refers to a medium vertical rhythm. */
+  Md: "md",
+  /** Refers to a large vertical rhythm. */
+  Lg: "lg",
+  /** Refers to an extra-large vertical rhythm. */
+  Xl: "xl"
+};
+const sectionVariants = tv({
+  base: "w-full",
+  variants: {
+    /* Vertical padding — the band's top/bottom breathing room. */
+    py: {
+      none: "py-0",
+      sm: "py-6",
+      md: "py-10",
+      lg: "py-16",
+      xl: "py-24"
+    }
+  },
+  defaultVariants: {
+    py: "md"
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{ name: "Section", inheritAttrs: false },
+  __name: "Section",
+  props: {
+    tone: {},
+    containerSize: {},
+    py: {},
+    bleed: { type: Boolean, default: false }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        sectionVariants({ py: props.py }),
+        props.tone && surfaceVariants({ variant: "subtle", tone: props.tone, radius: "none" }),
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        props.bleed ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$t, {
+          key: 1,
+          size: props.containerSize
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["size"]))
+      ], 16);
+    };
+  }
+});
+const NavbarHeight = {
+  /** Refers to a compact bar. */
+  Sm: "sm",
+  /** Refers to the default bar height. */
+  Md: "md",
+  /** Refers to a tall bar. */
+  Lg: "lg"
+};
+const navbarVariants = tv({
+  base: "w-full",
+  variants: {
+    /* Sticks the band to the top of the scroll container when true. */
+    sticky: {
+      true: "sticky top-0 z-sticky",
+      false: ""
+    },
+    /* Band height — the bar's vertical size. */
+    height: {
+      sm: "h-12",
+      md: "h-14",
+      lg: "h-16"
+    }
+  },
+  defaultVariants: {
+    sticky: false,
+    height: "md"
+  }
+});
+const _hoisted_1$2 = {
+  key: 0,
+  class: "flex min-w-0 items-center gap-3"
+};
+const _hoisted_2$1 = {
+  key: 1,
+  class: "flex min-w-0 flex-1 items-center justify-center gap-3"
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{ name: "Navbar", inheritAttrs: false },
+  __name: "Navbar",
+  props: {
+    containerSize: {},
+    height: {},
+    sticky: { type: Boolean, default: false },
+    tone: {},
+    bordered: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        navbarVariants({ sticky: props.sticky, height: props.height }),
+        props.bordered && "border-b border-border",
+        props.tone ? surfaceVariants({ variant: "subtle", tone: props.tone, radius: "none" }) : "bg-card",
+        attrs.class
+      )
+    );
+    const endClasses = computed(() => cn("flex min-w-0 items-center gap-3", !slots.center && "ml-auto"));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("header", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        createVNode(_sfc_main$t, {
+          size: props.containerSize,
+          class: "flex h-full items-center gap-3"
+        }, {
+          default: withCtx(() => [
+            _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              _ctx.$slots.start ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+                renderSlot(_ctx.$slots, "start")
+              ])) : createCommentVNode("", true),
+              _ctx.$slots.center ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+                renderSlot(_ctx.$slots, "center")
+              ])) : createCommentVNode("", true),
+              _ctx.$slots.end ? (openBlock(), createElementBlock("div", {
+                key: 2,
+                class: normalizeClass(endClasses.value)
+              }, [
+                renderSlot(_ctx.$slots, "end")
+              ], 2)) : createCommentVNode("", true)
+            ], 64))
+          ]),
+          _: 3
+        }, 8, ["size"])
+      ], 16);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{ name: "InputAddonLayout", inheritAttrs: false },
+  __name: "InputAddonLayout",
+  props: {
+    leading: {},
+    trailing: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const hasLeading = computed(() => Boolean(props.leading) || Boolean(slots.leading));
+    const hasTrailing = computed(() => Boolean(props.trailing) || Boolean(slots.trailing));
+    const OwnedAttributes = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(
+        "inline-flex w-full items-stretch rounded-md [&>*]:rounded-none",
+        "[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md",
+        "[&>*:not(:first-child)]:-ml-px",
+        /* The group is the control, so the focus ring belongs to the group. Past the React
+           original, where the ring landed on the input segment alone and the addons read as
+           separate boxes hanging off a highlighted middle. The segment's own ring is
+           suppressed; it is raised instead so its border paints over its neighbours'. */
+        "[&:has(>*:focus-visible)]:ring-2 [&:has(>*:focus-visible)]:ring-ring",
+        "[&>*:focus-visible]:z-10 [&>*:focus-visible]:relative [&>*:focus-visible]:ring-0",
+        attrs.class
+      )
+    );
+    const AddonClass = "inline-flex shrink-0 items-center border border-input bg-muted px-3 text-sm text-muted-foreground";
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "root",
+        ref: root,
+        class: rootClass.value
+      }, passthroughAttrs.value), [
+        hasLeading.value ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: normalizeClass(AddonClass)
+        }, [
+          renderSlot(_ctx.$slots, "leading", {}, () => [
+            createTextVNode(toDisplayString(__props.leading), 1)
+          ])
+        ])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default"),
+        hasTrailing.value ? (openBlock(), createElementBlock("span", {
+          key: 1,
+          class: normalizeClass(AddonClass)
+        }, [
+          renderSlot(_ctx.$slots, "trailing", {}, () => [
+            createTextVNode(toDisplayString(__props.trailing), 1)
+          ])
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{ name: "InputGroup", inheritAttrs: false },
+  __name: "InputGroup",
+  props: {
+    orientation: { default: Orientation.Horizontal }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const isHorizontal = computed(() => props.orientation === Orientation.Horizontal);
+    const OwnedAttributes = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(
+      () => Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes.has(key)))
+    );
+    const rootClass = computed(
+      () => cn(
+        "inline-flex w-full rounded-md",
+        isHorizontal.value ? "flex-row" : "flex-col",
+        /* Same contract as `InputAddonLayout`: the joined row is one control, so the ring goes round
+           the whole group and the focused segment only rises above its neighbours' borders. */
+        "[&:has(>*:focus-visible)]:ring-2 [&:has(>*:focus-visible)]:ring-ring",
+        "[&>*:focus-visible]:z-10 [&>*:focus-visible]:relative [&>*:focus-visible]:ring-0",
+        isHorizontal.value ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px",
+        attrs.class
+      )
+    );
+    const root = useTemplateRef("root");
+    __expose({ el: root });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "root",
+        ref: root,
+        class: rootClass.value
+      }, passthroughAttrs.value), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$1 = ["role", "aria-orientation"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SeparatorLayout", inheritAttrs: false },
+  __name: "SeparatorLayout",
+  props: {
+    orientation: { default: Orientation.Horizontal },
+    isDecorative: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(
+      () => cn(
+        "bg-border",
+        props.orientation === Orientation.Horizontal ? "h-px w-full" : "w-px self-stretch",
+        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: props.isDecorative ? "none" : "separator",
+        "aria-orientation": props.isDecorative ? void 0 : props.orientation
+      }, rest.value, { class: classes.value }), null, 16, _hoisted_1$1);
+    };
+  }
+});
+const RestingTilt = { rotateX: 0, rotateY: 0, glareX: 50, glareY: 50, active: false };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "TiltLayout", inheritAttrs: false },
+  __name: "TiltLayout",
+  props: {
+    maxAngle: { default: 12 },
+    perspective: { default: 800 },
+    hasGlare: { type: Boolean, default: void 0 },
+    scale: { default: 1 },
+    as: { default: "div" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const reducedMotion = useReducedMotion();
+    const tilt = ref({ ...RestingTilt });
+    function handleMove(e) {
+      if (reducedMotion.value) return;
+      const node = el.value;
+      if (!node) return;
+      const rect = node.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      tilt.value = {
+        rotateX: (0.5 - y) * 2 * props.maxAngle,
+        rotateY: (x - 0.5) * 2 * props.maxAngle,
+        glareX: x * 100,
+        glareY: y * 100,
+        active: true
+      };
+    }
+    function handleLeave() {
+      tilt.value = { ...RestingTilt };
+    }
+    const classes = computed(() => cn("relative", attrs.class));
+    const styles = computed(
+      () => normalizeStyle([
+        {
+          perspective: `${props.perspective}px`,
+          transform: tilt.value.active && !reducedMotion.value ? `rotateX(${tilt.value.rotateX}deg) rotateY(${tilt.value.rotateY}deg) scale(${props.scale})` : "rotateX(0) rotateY(0) scale(1)",
+          transition: tilt.value.active ? "transform 80ms ease-out" : "transform 220ms ease-out",
+          transformStyle: "preserve-3d"
+        },
+        attrs.style
+      ])
+    );
+    const showGlare = computed(() => Boolean(props.hasGlare) && !reducedMotion.value && tilt.value.active);
+    const glareStyle = computed(() => ({
+      background: `radial-gradient(circle at ${tilt.value.glareX}% ${tilt.value.glareY}%, rgba(255,255,255,0.35) 0%, transparent 50%)`
+    }));
+    const rest = computed(() => {
+      const { class: _class, style: _style, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(props.as), mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, {
+        class: classes.value,
+        style: styles.value,
+        onPointermove: handleMove,
+        onPointerleave: handleLeave
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          showGlare.value ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            "aria-hidden": "true",
+            class: "pointer-events-none absolute inset-0 rounded-[inherit] mix-blend-overlay",
+            style: normalizeStyle(glareStyle.value)
+          }, null, 4)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["class", "style"]);
+    };
+  }
+});
+const _hoisted_1 = ["aria-hidden"];
+const _hoisted_2 = ["aria-hidden"];
+const ClickSuppressSlop = 6;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "SwipeActionsLayout", inheritAttrs: false },
+  __name: "SwipeActionsLayout",
+  props: {
+    threshold: { default: 60 },
+    actionWidth: { default: 72 },
+    isDisabled: { type: Boolean }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    function countNodes(nodes) {
+      if (!nodes) return 0;
+      let count = 0;
+      for (const node of nodes) {
+        if (node.type === Fragment) {
+          count += countNodes(Array.isArray(node.children) ? node.children : void 0);
+          continue;
+        }
+        if (node.type === Comment) continue;
+        if (node.type === Text && typeof node.children === "string" && !node.children.trim()) {
+          continue;
+        }
+        count += 1;
+      }
+      return count;
+    }
+    const leftMax = computed(() => countNodes(slots.left?.()) * props.actionWidth);
+    const rightMax = computed(() => countNodes(slots.right?.()) * props.actionWidth);
+    const startX = ref(null);
+    const offset = ref(0);
+    const openSide = ref(null);
+    let startOffset = 0;
+    let suppressClick = false;
+    function onPointerDown(e) {
+      if (props.isDisabled) return;
+      startX.value = e.clientX;
+      startOffset = offset.value;
+      suppressClick = false;
+      e.currentTarget.setPointerCapture(e.pointerId);
+    }
+    function onPointerMove(e) {
+      if (props.isDisabled || startX.value == null) return;
+      if (Math.abs(e.clientX - startX.value) > ClickSuppressSlop) {
+        suppressClick = true;
+      }
+      const dx = e.clientX - startX.value + startOffset;
+      offset.value = Math.max(-rightMax.value, Math.min(leftMax.value, dx));
+    }
+    function onPointerUp(e) {
+      if (startX.value == null) return;
+      startX.value = null;
+      e.currentTarget.releasePointerCapture?.(e.pointerId);
+      if (offset.value > props.threshold && leftMax.value > 0) {
+        offset.value = leftMax.value;
+        openSide.value = "left";
+      } else if (offset.value < -props.threshold && rightMax.value > 0) {
+        offset.value = -rightMax.value;
+        openSide.value = "right";
+      } else {
+        offset.value = 0;
+        openSide.value = null;
+      }
+    }
+    function close() {
+      offset.value = 0;
+      openSide.value = null;
+    }
+    function onClick() {
+      if (suppressClick) {
+        suppressClick = false;
+        return;
+      }
+      if (openSide.value) close();
+    }
+    const classes = computed(
+      () => cn("relative overflow-hidden bg-card text-card-foreground", attrs.class)
+    );
+    const leftStyle = computed(() => ({ width: `${leftMax.value}px` }));
+    const rightStyle = computed(() => ({ width: `${rightMax.value}px` }));
+    const contentStyle = computed(() => ({
+      transform: `translateX(${offset.value}px)`,
+      transition: startX.value == null ? "transform 200ms ease-out" : "none",
+      touchAction: "pan-y"
+    }));
+    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 }), [
+        _ctx.$slots.left ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "absolute inset-y-0 left-0 flex",
+          style: normalizeStyle(leftStyle.value),
+          "aria-hidden": openSide.value !== "left"
+        }, [
+          renderSlot(_ctx.$slots, "left")
+        ], 12, _hoisted_1)) : createCommentVNode("", true),
+        _ctx.$slots.right ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "absolute inset-y-0 right-0 flex",
+          style: normalizeStyle(rightStyle.value),
+          "aria-hidden": openSide.value !== "right"
+        }, [
+          renderSlot(_ctx.$slots, "right")
+        ], 12, _hoisted_2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: "relative bg-card",
+          style: normalizeStyle(contentStyle.value),
+          onPointerdown: onPointerDown,
+          onPointermove: onPointerMove,
+          onPointerup: onPointerUp,
+          onPointercancel: onPointerUp,
+          onClick
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 36)
+      ], 16);
+    };
+  }
+});
+export {
+  AnchorLayoutAppearOn as A,
+  Breakpoint as B,
+  ContainerLayoutSize as C,
+  _sfc_main$n as D,
+  _sfc_main$6 as E,
+  FrameLayoutSurface as F,
+  GridBreakpoint as G,
+  SectionPaddingY as H,
+  _sfc_main$2 as I,
+  _sfc_main$q as J,
+  _sfc_main$7 as K,
+  _sfc_main as L,
+  _sfc_main$1 as M,
+  NavbarHeight as N,
+  _sfc_main$k as O,
+  _sfc_main$v as P,
+  containerVariants as Q,
+  dividerVariants as R,
+  ScrollAxis as S,
+  gridVariants as T,
+  navbarVariants as U,
+  resolveGridColumns as V,
+  resolveGridGap as W,
+  sectionVariants as X,
+  useAppShell as Y,
+  useResizableContext as Z,
+  _sfc_main$8 as _,
+  AnchorLayoutTransition as a,
+  AnchorLayoutVisibilityMode as b,
+  _sfc_main$f as c,
+  _sfc_main$a as d,
+  _sfc_main$b as e,
+  _sfc_main$9 as f,
+  _sfc_main$e as g,
+  _sfc_main$c as h,
+  _sfc_main$d as i,
+  _sfc_main$r as j,
+  _sfc_main$x as k,
+  _sfc_main$p as l,
+  _sfc_main$m as m,
+  _sfc_main$t as n,
+  _sfc_main$o as o,
+  _sfc_main$s as p,
+  _sfc_main$l as q,
+  _sfc_main$u as r,
+  _sfc_main$w as s,
+  _sfc_main$4 as t,
+  _sfc_main$3 as u,
+  _sfc_main$5 as v,
+  _sfc_main$g as w,
+  _sfc_main$i as x,
+  _sfc_main$j as y,
+  _sfc_main$h as z
+};
+//# sourceMappingURL=SwipeActionsLayout.vue_vue_type_script_setup_true_lang-Dc0UJfs9.js.map