v-uixy 1.8.0 → 1.9.0

package/commands/add.js

@@ -72,7 +72,25 @@ async function copyComponent(name) {
   console.log(chalk.green(`✔ Copied ${name} to app/components/ui/${name}`));
 }
 
-async function copyComposable(name) {
+async function resolveComposableDeps(src, seen) {
+  const content = await fs.readFile(src, "utf8");
+  const deps = new Set();
+
+  for (const match of content.matchAll(
+    /(?:import|export)[^"']*from\s+["']\.\/([A-Za-z0-9_-]+)["']/g
+  )) {
+    deps.add(match[1]);
+  }
+
+  for (const dep of deps) {
+    if (!seen.has(dep)) await copyComposable(dep, seen);
+  }
+}
+
+async function copyComposable(name, seen = new Set()) {
+  if (seen.has(name)) return;
+  seen.add(name);
+
   const src = path.join(templatesRoot, `composables/${name}.ts`);
   const { composablesDir } = await getProjectPaths();
   const dest = path.join(composablesDir, `${name}.ts`);
@@ -87,6 +105,8 @@ async function copyComposable(name) {
   console.log(chalk.green(`✔ Copied composable: ${name}.ts`));
 
   await updateComposablesIndex(name);
+
+  await resolveComposableDeps(src, seen);
 }
 
 async function getExistingIndexComponents() {
@@ -212,12 +232,32 @@ async function ensureTsconfig() {
   }
 }
 
+async function copyTypes() {
+  const typesSrcDir = path.join(templatesRoot, "types");
+  if (!(await fs.pathExists(typesSrcDir))) return;
+
+  const typesDestDir = path.join(projectRoot, "app/types");
+  await fs.ensureDir(typesDestDir);
+
+  const files = await fs.readdir(typesSrcDir);
+  for (const file of files) {
+    await fs.copy(
+      path.join(typesSrcDir, file),
+      path.join(typesDestDir, file),
+      { overwrite: true }
+    );
+  }
+
+  console.log(chalk.green("✔ Synced type definitions to app/types"));
+}
+
 export default async function add(componentName) {
   const registry = await loadRegistry();
   let componentsToAdd = new Set();
 
   await ensureTypeScriptInstalled();
   await ensureTsconfig();
+  await copyTypes();
 
   if (componentName.toLowerCase() === "all") {
     componentsToAdd = new Set(registry.map((c) => c.name));
@@ -226,6 +266,7 @@ export default async function add(componentName) {
   }
 
   const copied = [];
+  const copiedComposables = new Set();
 
   for (const name of componentsToAdd) {
     await copyComponent(name);
@@ -233,7 +274,7 @@ export default async function add(componentName) {
 
     const def = registry.find((c) => c.name === name);
     for (const composable of def?.composables || []) {
-      await copyComposable(composable);
+      await copyComposable(composable, copiedComposables);
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "private": false,
   "author": {
     "name": "Alan Haber",
@@ -24,7 +24,7 @@
     "tailwindcss"
   ],
   "engines": {
-    "node": ">=20"
+    "node": ">=22.13.0"
   },
   "files": [
     "bin/",
@@ -39,10 +39,10 @@
     "url": "git+https://github.com/haberalan/v-uixy.git"
   },
   "dependencies": {
-    "chalk": "^5.4.1",
-    "commander": "^14.0.0",
-    "execa": "^9.5.3",
-    "fs-extra": "^11.3.0",
-    "inquirer": "^12.6.3"
+    "chalk": "^6.0.0",
+    "commander": "^15.0.0",
+    "execa": "^10.0.1",
+    "fs-extra": "^11.4.0",
+    "inquirer": "^14.2.1"
   }
 }

package/templates/components/Button/Button.component.vue

@@ -1,40 +1,41 @@
 <template>
   <uixy-link
     v-if="props.link"
-    :class="linkStyles({ disabled: !!props.disabled }, $attrs.class as string)"
+    :class="[
+      buttonStyles({ variant, size, rounded: !!props.rounded }, $attrs.class as string),
+      linkStyles({ disabled: !!props.disabled }),
+    ]"
     :tabindex="props.disabled ? -1 : 0"
     v-bind="{ ...props.link, ...filteredAttrs }"
   >
-    <div :class="buttonStyles({ variant, size, rounded: !!props.rounded })">
-      <animate-presence :initial="false">
-        <motion.div
-          v-if="props.loading"
-          class="absolute top-1/2 flex size-6 -translate-y-1/2 items-center justify-center"
-          :initial="{ opacity: 0 }"
-          :animate="{ opacity: 1 }"
-          :exit="{ opacity: 0 }"
-          :transition="{ ease: 'easeInOut', duration: 0.15 }"
-        >
-          <uixy-loader size="sm" />
-        </motion.div>
-      </animate-presence>
+    <animate-presence :initial="false">
+      <motion.div
+        v-if="props.loading"
+        class="absolute top-1/2 flex size-6 -translate-y-1/2 items-center justify-center"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1 }"
+        :exit="{ opacity: 0 }"
+        :transition="{ ease: 'easeInOut', duration: 0.15 }"
+      >
+        <uixy-loader size="sm" />
+      </motion.div>
+    </animate-presence>
 
-      <animate-presence :initial="false">
-        <motion.div
-          class="flex items-center justify-center gap-1"
-          :initial="{ opacity: 0 }"
-          :animate="{ opacity: props.loading ? 0 : 1 }"
-          :transition="{ ease: 'easeInOut', duration: 0.15 }"
-        >
-          <uixy-icon
-            v-if="props.icon && !props.loading"
-            :name="props.icon"
-            :class="iconStyles({ position: props.iconPosition ?? 'left' })"
-          />
-          <slot />
-        </motion.div>
-      </animate-presence>
-    </div>
+    <animate-presence :initial="false">
+      <motion.div
+        class="flex items-center justify-center gap-1"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: props.loading ? 0 : 1 }"
+        :transition="{ ease: 'easeInOut', duration: 0.15 }"
+      >
+        <uixy-icon
+          v-if="props.icon && !props.loading"
+          :name="props.icon"
+          :class="iconStyles({ position: props.iconPosition ?? 'left' })"
+        />
+        <slot />
+      </motion.div>
+    </animate-presence>
   </uixy-link>
 
   <button

package/templates/components/Button/Button.styles.ts

@@ -32,7 +32,7 @@ export const iconStyles = styles("h-5 w-5 shrink-0", {
   },
 });
 
-export const linkStyles = styles("rounded-1", {
+export const linkStyles = styles("", {
   disabled: {
     true: "pointer-events-none",
     false: "",

package/templates/components/DatePicker/DatePicker.component.vue

@@ -61,6 +61,7 @@
       <animate-presence>
         <motion.div
           v-if="active"
+          data-uixy-overlay
           :initial="{ opacity: 0 }"
           :animate="{ opacity: 1 }"
           :exit="{ opacity: 0 }"

package/templates/components/DateRangePicker/DateRangePicker.component.vue

@@ -64,6 +64,7 @@
       <animate-presence>
         <motion.div
           v-if="active"
+          data-uixy-overlay
           :initial="{ opacity: 0 }"
           :animate="{ opacity: 1 }"
           :exit="{ opacity: 0 }"

package/templates/components/Modal/Modal.component.vue

@@ -4,19 +4,24 @@
       <animate-presence>
         <motion.div
           v-if="open"
+          ref="rootRef"
           :initial="{ opacity: 0 }"
           :animate="{ opacity: 1 }"
           :exit="{ opacity: 0 }"
           :transition="{ duration: 0.15, ease: 'easeInOut' }"
           :class="modalStyles($attrs.class as string)"
-          data-modal
+          :style="{ zIndex }"
+          :[modalAttr]="''"
+          data-uixy-overlay
           @click.self="handleClick"
         >
           <motion.div
+            class="flex w-full justify-center"
             :initial="{ scale: 0.8 }"
             :animate="{ scale: 1 }"
             :exit="{ scale: 0.8 }"
             :transition="{ duration: 0.15, ease: 'easeInOut' }"
+            @click.self="handleClick"
           >
             <slot />
           </motion.div>
@@ -30,6 +35,7 @@
   import type { UixyModalProps } from "./Modal.types";
   import { modalStyles } from "./Modal.styles";
   import { AnimatePresence, motion } from "motion-v";
+  import { useModalLayer, MODAL_ATTR, getTopModalEl } from "~/composables";
 
   const props = defineProps<UixyModalProps>();
 
@@ -39,13 +45,26 @@
 
   const open = defineModel<boolean>();
 
+  const rootRef = ref<HTMLElement>();
+
+  const {
+    zIndex,
+    isTopModal,
+    open: openLayer,
+    close: closeLayer,
+  } = useModalLayer();
+
+  const modalAttr = computed(() => (open.value ? MODAL_ATTR : null));
+
   const handleClick = () => {
-    if (props.persistent) return;
+    if (props.persistent || props.loading) return;
 
     open.value = false;
   };
 
   const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isTopModal.value) return;
+
     if (e.key === "Escape") {
       handleClick();
       return;
@@ -53,39 +72,21 @@
     if (e.key === "Enter") {
       const target = e.target as HTMLElement;
       if (target.tagName === "TEXTAREA" || target.tagName === "BUTTON") return;
-      const modalEl = document.querySelector("[data-modal]");
-      const form = modalEl?.querySelector("form");
+      const form =
+        rootRef.value?.querySelector("form") ??
+        getTopModalEl()?.querySelector("form");
       form?.requestSubmit();
     }
   };
 
-  const toggleSiblingsInert = (enable?: boolean) => {
-    if (typeof document === "undefined") return;
-
-    const modalEl = document.querySelector(
-      "[data-modal]",
-    ) as HTMLElement | null;
-
-    Array.from(document.body.children).forEach((el) => {
-      if (modalEl && (el === modalEl || el.contains(modalEl))) return;
-
-      if (enable) {
-        el.setAttribute("inert", "");
-        el.setAttribute("aria-hidden", "true");
-      } else {
-        el.removeAttribute("inert");
-        el.removeAttribute("aria-hidden");
-      }
-    });
-  };
-
   watch(
     open,
     (isOpen) => {
-      toggleSiblingsInert(isOpen);
       if (isOpen) {
+        openLayer();
         window.addEventListener("keydown", handleKeyDown);
       } else {
+        closeLayer();
         window.removeEventListener("keydown", handleKeyDown);
       }
     },
@@ -94,5 +95,6 @@
 
   onUnmounted(() => {
     window.removeEventListener("keydown", handleKeyDown);
+    closeLayer();
   });
 </script>

package/templates/components/Modal/Modal.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 const modalStyles = styles(
-  "fixed left-0 top-0 z-20 flex size-full items-center justify-center bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+  "fixed left-0 top-0 flex size-full items-center justify-center bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
 );
 
 export { modalStyles };

package/templates/components/Modal/Modal.types.ts

@@ -1,3 +1,4 @@
 export interface UixyModalProps {
   persistent?: boolean;
+  loading?: boolean;
 }

package/templates/components/Popover/Popover.component.vue

@@ -4,6 +4,7 @@
     <animate-presence>
       <motion.div
         v-if="active"
+        data-uixy-overlay
         :initial="{ opacity: 0 }"
         :animate="{ opacity: 1 }"
         :exit="{ opacity: 0 }"
@@ -39,6 +40,7 @@
 
   const { active, handleOpen, handleLeave, styles, refElement } = usePosition({
     direction: props.direction ?? "bottom",
+    align: props.align ?? "center",
   });
 
   const handleClickOutside = (e: MouseEvent) => {

package/templates/components/Popover/Popover.types.ts

@@ -1,5 +1,6 @@
 export interface UixyPopoverProps {
   direction?: "top" | "bottom";
+  align?: "center" | "start";
   closeOnClick?: boolean;
   group?: string;
 }

package/templates/components/SegmentedControl/SegmentedControl.component.vue

@@ -14,6 +14,7 @@
       type="button"
       role="tab"
       :aria-selected="model === option.value"
+      :aria-label="option.ariaLabel"
       :disabled="props.disabled || option.disabled"
       :class="
         segmentStyles({

package/templates/components/SegmentedControl/SegmentedControl.types.ts

@@ -5,6 +5,7 @@ export interface UixySegmentedOption {
   value: string | number;
   icon?: IconName;
   disabled?: boolean;
+  ariaLabel?: string;
 }
 
 export interface UixySegmentedControlProps {

package/templates/components/Select/Select.component.vue

@@ -47,8 +47,9 @@
         <animate-presence>
           <motion.div
             v-if="open && !props.disabled"
+            data-uixy-overlay
             :class="dropdownPanelStyles({ size })"
-            :style="dropdownStyles"
+            :style="[dropdownStyles, { zIndex: dropdownZIndex }]"
             :initial="{ opacity: 0, y: -4, scale: 0.98 }"
             :animate="{ opacity: 1, y: 0, scale: 1 }"
             :exit="{ opacity: 0, scale: 0.98 }"
@@ -203,6 +204,7 @@
   import { UixyInput } from "../Input";
   import { motion, AnimatePresence } from "motion-v";
   import { useSelect } from "./composables";
+  import { useOverlayLayer } from "~/composables";
   import SelectTreeItem from "./SelectTreeItem.vue";
 
   const props = defineProps<UixySelectProps>();
@@ -234,6 +236,12 @@
     width: "0px",
   });
 
+  const {
+    zIndex: dropdownZIndex,
+    acquire: acquireLayer,
+    release: releaseLayer,
+  } = useOverlayLayer();
+
   const {
     refOptions,
     open,
@@ -332,6 +340,8 @@
 
       if (!isOpen) return;
 
+      acquireLayer();
+
       void updateDropdownPosition();
 
       if (props.search) {
@@ -351,6 +361,7 @@
       }
 
       onWatcherCleanup(() => {
+        releaseLayer();
         window.removeEventListener("resize", onResize);
         window.removeEventListener("scroll", onAnyScroll, true);
         dropdownResizeObserver?.disconnect();
@@ -359,6 +370,7 @@
   );
 
   onUnmounted(() => {
+    releaseLayer();
     dropdownResizeObserver?.disconnect();
   });
 

package/templates/components/Select/Select.styles.ts

@@ -88,7 +88,7 @@ export const listItemPaddingStyles = styles("", {
 });
 
 export const dropdownPanelStyles = styles(
-  "scrollbar z-50 max-h-60 overflow-y-auto rounded-1 border border-gray-300 bg-white p-1 shadow-sm dark:border-gray-900 dark:bg-gray-1000",
+  "scrollbar max-h-60 overflow-y-auto rounded-1 border border-gray-300 bg-white p-1 shadow-sm dark:border-gray-900 dark:bg-gray-1000",
   {
     size: {
       sm: "text-xs",

package/templates/components/Sheet/Sheet.component.vue

@@ -8,8 +8,10 @@
             :animate="{ opacity: 1 }"
             :exit="{ opacity: 0 }"
             :transition="{ ease: 'easeInOut', duration: 0.15 }"
+            :style="{ zIndex }"
+            data-uixy-overlay
             @click.self="handleClick"
-            class="fixed left-0 top-0 z-20 size-full bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+            class="fixed left-0 top-0 size-full bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
           />
           <motion.div
             initial="initial"
@@ -17,6 +19,8 @@
             exit="exit"
             :variants="ANIMATIONS[props.direction ?? 'right']"
             :transition="{ ease: 'easeInOut', duration: 0.3 }"
+            :style="{ zIndex }"
+            data-uixy-overlay
             :class="
             sheetStyles({ direction: props.direction ?? 'right' }, $attrs.class as string)
           "
@@ -33,6 +37,7 @@
 <script setup lang="ts">
   import { AnimatePresence, motion } from "motion-v";
   import { useScale } from "../Scale";
+  import { useOverlayLayer } from "~/composables";
   import type { UixySheetProps } from "./Sheet.types";
   import { sheetStyles } from "./Sheet.styles";
 
@@ -65,6 +70,8 @@
 
   const { setScale } = useScale();
 
+  const { zIndex, acquire, release } = useOverlayLayer();
+
   const open = defineModel<boolean>();
 
   const handleClick = () => {
@@ -74,13 +81,19 @@
   watch(
     () => open.value,
     (v) => {
-      if (v) return setScale(0.98);
+      if (v) {
+        acquire();
+        return setScale(0.98);
+      }
 
+      release();
       setScale(1);
     }
   );
 
   onUnmounted(async () => {
+    release();
+
     await nextTick();
 
     setScale(1);

package/templates/components/Sheet/Sheet.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const sheetStyles = styles(
-  "fixed top-0 z-50 h-full w-full max-w-[320px] border-gray-300 bg-gray-100 shadow-xl dark:border-gray-900 dark:bg-black",
+  "fixed top-0 h-full w-full max-w-[320px] border-gray-300 bg-gray-100 shadow-xl dark:border-gray-900 dark:bg-black",
   {
     direction: {
       left: "left-0 border-r",

package/templates/components/Tooltip/Tooltip.component.vue

@@ -10,6 +10,7 @@
       <animate-presence>
         <motion.div
           v-if="active"
+          data-uixy-overlay
           class="max-w-[100vw]"
           :initial="{ opacity: 0 }"
           :animate="{ opacity: 1 }"

package/templates/components.json

@@ -76,13 +76,13 @@
       "name": "DatePicker",
       "related-components": ["Icon", "Button", "Calendar"],
       "packages": ["motion-v"],
-      "composables": ["usePosition"]
+      "composables": ["usePosition", "useOverlayLayer"]
     },
     {
       "name": "DateRangePicker",
       "related-components": ["Icon", "Button", "Calendar", "DatePicker"],
       "packages": ["motion-v"],
-      "composables": ["usePosition"]
+      "composables": ["usePosition", "useOverlayLayer"]
     },
     {
       "name": "FileUpload",
@@ -130,7 +130,7 @@
       "name": "Modal",
       "related-components": [],
       "packages": ["motion-v"],
-      "composables": []
+      "composables": ["useOverlayLayer"]
     },
     {
       "name": "PieChart",
@@ -142,7 +142,7 @@
       "name": "Popover",
       "related-components": [],
       "packages": ["motion-v", "uuid"],
-      "composables": ["usePosition"]
+      "composables": ["usePosition", "useOverlayLayer"]
     },
     {
       "name": "Radio",
@@ -166,7 +166,7 @@
       "name": "Select",
       "related-components": ["Badge", "Icon", "Input"],
       "packages": ["motion-v"],
-      "composables": ["useInputValidation"]
+      "composables": ["useInputValidation", "useOverlayLayer"]
     },
     {
       "name": "Separator",
@@ -178,7 +178,7 @@
       "name": "Sheet",
       "related-components": ["Scale"],
       "packages": ["motion-v"],
-      "composables": []
+      "composables": ["useOverlayLayer"]
     },
     {
       "name": "Skeleton",
@@ -250,7 +250,7 @@
       "name": "Tooltip",
       "related-components": [],
       "packages": ["motion-v"],
-      "composables": ["usePosition"]
+      "composables": ["usePosition", "useOverlayLayer"]
     }
   ]
 }

package/templates/composables/useOverlayLayer.ts

@@ -0,0 +1,124 @@
+import { computed, nextTick, onScopeDispose, ref, type ComputedRef } from "vue";
+
+const BASE_Z = 60;
+const STEP_Z = 10;
+
+let seq = 0;
+
+const layers = ref<number[]>([]);
+
+export interface UseOverlayLayerReturn {
+  id: number;
+  zIndex: ComputedRef<number>;
+  isTop: ComputedRef<boolean>;
+  isActive: ComputedRef<boolean>;
+  acquire: () => void;
+  release: () => void;
+}
+
+export function useOverlayLayer(): UseOverlayLayerReturn {
+  const id = ++seq;
+
+  const index = computed(() => layers.value.indexOf(id));
+  const isActive = computed(() => index.value !== -1);
+
+  const zIndex = computed(() =>
+    isActive.value ? BASE_Z + (index.value + 1) * STEP_Z : BASE_Z + STEP_Z,
+  );
+
+  const isTop = computed(
+    () => isActive.value && index.value === layers.value.length - 1,
+  );
+
+  const acquire = () => {
+    if (!layers.value.includes(id)) layers.value = [...layers.value, id];
+  };
+
+  const release = () => {
+    if (layers.value.includes(id))
+      layers.value = layers.value.filter((x) => x !== id);
+  };
+
+  onScopeDispose(release);
+
+  return { id, zIndex, isTop, isActive, acquire, release };
+}
+
+const MANAGED_ATTR = "data-uixy-inert-managed";
+const OVERLAY_ATTR = "data-uixy-overlay";
+export const MODAL_ATTR = "data-uixy-modal";
+
+const modalStack = ref<number[]>([]);
+
+const zOf = (el: Element): number => {
+  const raw = window.getComputedStyle(el).zIndex;
+  const parsed = Number.parseInt(raw ?? "", 10);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+export const getTopModalEl = (): HTMLElement | null => {
+  if (typeof document === "undefined") return null;
+  const els = Array.from(
+    document.querySelectorAll<HTMLElement>(`[${MODAL_ATTR}]`),
+  );
+  if (els.length === 0) return null;
+  return els.reduce((a, b) => (zOf(b) >= zOf(a) ? b : a));
+};
+
+function reconcileInert() {
+  if (typeof document === "undefined") return;
+
+  document.querySelectorAll(`[${MANAGED_ATTR}]`).forEach((el) => {
+    el.removeAttribute("inert");
+    el.removeAttribute("aria-hidden");
+    el.removeAttribute(MANAGED_ATTR);
+  });
+
+  const topEl = getTopModalEl();
+  if (!topEl) return;
+
+  const topZ = zOf(topEl);
+
+  Array.from(document.body.children).forEach((el) => {
+    if (!(el instanceof HTMLElement)) return;
+    if (el === topEl || el.contains(topEl)) return;
+
+    if (el.hasAttribute(OVERLAY_ATTR) && zOf(el) > topZ) return;
+
+    el.setAttribute("inert", "");
+    el.setAttribute("aria-hidden", "true");
+    el.setAttribute(MANAGED_ATTR, "");
+  });
+}
+
+export interface UseModalLayerReturn {
+  zIndex: ComputedRef<number>;
+  isTopModal: ComputedRef<boolean>;
+  open: () => void;
+  close: () => void;
+}
+
+export function useModalLayer(): UseModalLayerReturn {
+  const layer = useOverlayLayer();
+
+  const isTopModal = computed(
+    () => modalStack.value[modalStack.value.length - 1] === layer.id,
+  );
+
+  const open = () => {
+    layer.acquire();
+    if (!modalStack.value.includes(layer.id))
+      modalStack.value = [...modalStack.value, layer.id];
+    nextTick(reconcileInert);
+  };
+
+  const close = () => {
+    layer.release();
+    modalStack.value = modalStack.value.filter((x) => x !== layer.id);
+    nextTick(reconcileInert);
+  };
+
+  onScopeDispose(close);
+
+  return { zIndex: layer.zIndex, isTopModal, open, close };
+}

package/templates/composables/usePosition.ts

@@ -1,9 +1,12 @@
 import { ref, computed, watch, onBeforeUnmount, nextTick, type Ref } from "vue";
+import { useOverlayLayer } from "./useOverlayLayer";
 
 type Direction = "top" | "bottom";
+type Align = "center" | "start";
 
 interface UsePositionOptions {
   direction?: Direction;
+  align?: Align;
 }
 
 const GAP = 6;
@@ -17,16 +20,21 @@ function hasFixedParent(el: HTMLElement | null): boolean {
   return false;
 }
 
-export function usePosition({ direction = "bottom" }: UsePositionOptions) {
+export function usePosition({
+  direction = "bottom",
+  align = "center",
+}: UsePositionOptions) {
   const refElement = ref<HTMLElement>();
 
   const active = ref(false);
   const target = ref<HTMLElement | null>(null);
 
+  const { zIndex: layerZIndex, acquire, release } = useOverlayLayer();
+
   const baseStyles = computed(() => ({
     position: hasFixedParent(target.value) ? "fixed" : "absolute",
     width: "max-content",
-    zIndex: 20,
+    zIndex: layerZIndex.value,
   }));
 
   const styles = ref<Record<string, string | number>>({
@@ -65,7 +73,10 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
         ? targetRect.top - tooltipRect.height - GAP + scrollY
         : targetRect.bottom + GAP + scrollY;
 
-    let left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
+    let left =
+      align === "start"
+        ? targetRect.left
+        : targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
     const newStyles: Record<string, string | number> = {
       ...baseStyles.value,
       top,
@@ -87,20 +98,46 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
     };
   };
 
+  let resizeObserver: ResizeObserver | null = null;
+
+  const observeResize = () => {
+    if (typeof ResizeObserver === "undefined") return;
+    resizeObserver = new ResizeObserver(() => {
+      void updatePosition();
+    });
+    if (target.value) resizeObserver.observe(target.value);
+    if (refElement.value) resizeObserver.observe(refElement.value);
+  };
+
+  const unobserveResize = () => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+  };
+
   watch(
-    [active, () => direction],
+    [active, () => direction, () => align],
     ([isActive]) => {
       if (isActive) {
+        acquire();
         updatePosition();
+        observeResize();
         window.addEventListener("resize", updatePosition);
       } else {
+        release();
+        unobserveResize();
         window.removeEventListener("resize", updatePosition);
       }
     },
     { flush: "post" },
   );
 
+  watch(layerZIndex, (z) => {
+    styles.value = { ...styles.value, zIndex: z };
+  });
+
   onBeforeUnmount(() => {
+    release();
+    unobserveResize();
     window.removeEventListener("resize", updatePosition);
   });