pxd 0.0.64 → 0.1.3

package/dist/styles/tw.css

@@ -1,4 +1,10 @@
 @custom-variant dark (&:is(.dark *));
+@custom-variant sibling (& + &);
+@custom-variant within-group (&:is([data-group] *));
+
+@source '../constants';
+@source '../components';
+@source '../composables';
 
 :root {
   --background-100-value: 0, 0%, 100%;
@@ -104,6 +110,7 @@
   --color-pink-1000-value: 333, 74%, 15%;
 
   --primary: var(--color-gray-1000-value);
+  --primary-foreground: var(--color-gray-100-value);
   --primary-hover: hsla(var(--primary), 70%);
   --primary-active: hsla(var(--primary), 90%);
 
@@ -113,7 +120,7 @@
   --ring: var(--primary);
 
   --shadow-background-border: 0 0 0 1px hsl(var(--background-200-value));
-  --shadow-border-value: 0 0 0 1px #00000014;
+  --shadow-border-value: 0 0 0 1px hsl(var(--color-gray-300-value));
   --shadow-small-value: 0px 2px 2px #0000000a;
   --shadow-medium-value: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
   --shadow-large-value: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
@@ -262,7 +269,6 @@
   --color-pink-900-value: 341, 90%, 67%;
   --color-pink-1000-value: 333, 90%, 96%;
 
-  --shadow-border-value: 0 0 0 1px #ffffff25;
   --shadow-small-value: 0px 1px 2px #00000029;
   --shadow-medium-value: 0px 2px 2px #00000052, 0px 8px 8px -8px #00000029;
   --shadow-large-value: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
@@ -287,12 +293,16 @@
 
 @theme inline {
   --font-sans:
-    'Inter', 'Inter Fallback', 'Geist', Arial, ui-sans-serif, system-ui, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Inter Variable', 'Inter', 'Inter Fallback', 'Geist', Arial, ui-sans-serif, system-ui,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    'MonoLisa', 'Geist Mono', 'JetBrains Mono', 'Input Mono', ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 
   --color-primary: hsl(var(--primary));
   --color-primary-hover: var(--primary-hover);
   --color-primary-active: var(--primary-active);
+  --color-primary-foreground: hsl(var(--primary-foreground));
 
   --color-border: var(--color-gray-alpha-300-value);
   --color-border-hover: hsl(var(--color-gray-500-value));
@@ -426,7 +436,7 @@
   --shadow-modal: var(--shadow-modal-value);
   --shadow-fullscreen: var(--shadow-fullscreen-value);
 
-  --shadow-border-base: var(--shadow-border-value);
+  --shadow-border-base: inset var(--shadow-border-value);
   --shadow-border-small:
     var(--shadow-border-value), var(--shadow-small-value), var(--shadow-background-border);
   --shadow-border-medium:
@@ -442,6 +452,7 @@
   --shadow-border-fullscreen:
     var(--shadow-border-value), var(--shadow-fullscreen-value), var(--shadow-background-border);
 
+  --text-11: 11px;
   --text-13: 13px;
   --text-15: 15px;
 }
@@ -462,6 +473,20 @@
   transition-timing-function: var(--default-transition-timing-function);
 }
 
+@utility underline {
+  text-underline-position: from-font;
+  text-decoration-skip-ink: auto;
+}
+
+@utility truncate-* {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-clamp: --value(integer);
+  -webkit-line-clamp: --value(integer);
+  -webkit-box-orient: vertical;
+}
+
 @utility scrollbar-none {
   & {
     scrollbar-width: none;
@@ -495,7 +520,13 @@
 
 @utility transition-appearance {
   transition-property:
-    opacity, transform, translate, background-color, box-shadow, font-size, border, color;
+    opacity, transform, scale, translate, background-color, box-shadow, border-color, color;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
+}
+
+@utility transition-transform-opacity {
+  transition-property: opacity, transform, scale, rotate, translate;
   transition-duration: var(--default-transition-duration);
   transition-timing-function: var(--default-transition-timing-function);
 }
@@ -525,45 +556,69 @@
   font-family: inherit;
 }
 
+@utility text-trim-both {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}
+
+.pxd-countdown-progress {
+  animation: pxd-countdown-shrink linear forwards;
+  transform-origin: left;
+}
+
+@keyframes pxd-countdown-shrink {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
 @layer base {
-  * {
+  *,
+  &::before,
+  &::after {
     border-color: var(--color-gray-300);
   }
+
+  .dark :is(*, *::before, *::after) {
+    border-color: var(--color-gray-400);
+  }
 }
 
-@layer components {
-  .pxd-input--border {
-    border-width: 1px;
-    border-style: solid;
+.pxd-input--border {
+  border-width: 1px;
+  border-style: solid;
 
-    &:not(.is-disabled, .is-readonly):hover {
-      border-color: hsla(var(--primary), 0.5);
+  &:not(.is-disabled, .is-readonly):hover {
+    border-color: hsla(var(--primary), 0.5);
+  }
+
+  &:not(.is-disabled, .is-readonly)[data-focusing='true'],
+  &:not(.is-disabled, .is-readonly):focus-within {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px hsla(var(--primary), 0.2);
+  }
+
+  &.is-error {
+    &:not(:focus)::placeholder {
+      color: var(--color-red-900) !important;
     }
 
-    &:not(.is-disabled, .is-readonly)[data-focusing='true'],
-    &:not(.is-disabled, .is-readonly):focus-within {
-      border-color: var(--color-primary);
-      box-shadow: 0 0 0 3px hsla(var(--primary), 0.2);
+    &,
+    &:focus-within,
+    &[data-focusing='true'] {
+      border-color: hsl(var(--color-red-900-value));
+      box-shadow: 0 0 0 3px hsl(var(--color-red-300-value));
     }
 
-    &.is-error {
-      &:not(:focus)::placeholder {
-        color: var(--color-red-900) !important;
-      }
-
-      &,
-      &:focus-within,
-      &[data-focusing='true'] {
-        border-color: hsl(var(--color-red-900-value));
-        box-shadow: 0 0 0 3px hsl(var(--color-red-300-value));
-      }
-
-      &:focus-within,
-      &[data-focusing='true'],
-      &:not(.is-disabled, .is-readonly):hover {
-        border-color: hsl(var(--color-red-900-value));
-        box-shadow: 0 0 0 3px hsl(var(--color-red-500-value));
-      }
+    &:focus-within,
+    &[data-focusing='true'],
+    &:not(.is-disabled, .is-readonly):hover {
+      border-color: hsl(var(--color-red-900-value));
+      box-shadow: 0 0 0 3px hsl(var(--color-red-500-value));
     }
   }
 }
@@ -593,8 +648,8 @@
 .pxd-transition--fade-scale-enter-from,
 .pxd-transition--fade-scale-leave-to {
   opacity: 0;
-  filter: blur(5px);
-  transform: scale(0.75);
+  filter: blur(4px);
+  transform: scale(0.8);
 }
 
 /* Make exit faster than enter */
@@ -602,19 +657,11 @@
   transition-duration: var(--faster-transition-duration) !important;
 }
 
-/*
-.line-clamp {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-clamp: var(--line-clamp, 1);
-  -webkit-line-clamp: var(--line-clamp, 1);
-  -webkit-box-orient: vertical;
-}
-*/
-
-.scrollbar-stable {
-  scrollbar-gutter: stable !important;
+[data-enter-motion='false'][class*='-enter-active'],
+[data-leave-motion='false'][class*='-leave-active'],
+[data-visible='true'] [data-enter-motion='false'],
+[data-visible='false'] [data-leave-motion='false'] {
+  transition-duration: 0s !important;
 }
 
 .scrollbar-disabled,

package/dist/types/shared/props.d.ts

@@ -11,8 +11,8 @@ export type ComponentBreakpointKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type ComponentBreakpoint<T = string> = Record<ComponentBreakpointKeys, T>
 
 export type ComponentAs = string | object
-export type ComponentLabel = string | number | readonly string[] | null
-export type ComponentValue = string | number | boolean
+export type ComponentLabel = string | number | undefined | null
+export type ComponentValue = string | number
 
 export type ComponentClass = string | any[] | Record<string, any>
 
@@ -29,8 +29,10 @@ export type ResponsiveValue<T> = T | Partial<ComponentBreakpoint<T>>
 
 export interface ComponentOption {
   label: ComponentLabel
-  value: string | number
+  value: ComponentValue
   disabled?: boolean
 }
 
 export type ComponentBeforeChange<T> = (value: T) => Awaitable<T>
+
+export type ComponentDateTimeValue = number | string | Date | null

package/dist/types/shared/utils.d.ts

@@ -7,3 +7,10 @@ export type Nullable<T> = T | null | undefined
 
 export type MaybeElement = Nullable<HTMLElement | SVGElement | ComponentPublicInstance>
 export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<Nullable<T>>
+export type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends readonly unknown[]
+    ? T[K]
+    : T[K] extends object
+      ? DeepPartial<T[K]>
+      : T[K]
+}

package/dist/utils/{context.js → _internal/context.js}

@@ -1,4 +1,5 @@
 import { inject, provide } from "vue";
+import { isUndefined } from "../is.js";
 export function createContext(providerComponentName, fallbackValue) {
   const symbolDescription = `${providerComponentName}Context`;
   const injectionKey = Symbol(symbolDescription);
@@ -8,7 +9,7 @@ export function createContext(providerComponentName, fallbackValue) {
   };
   const injectContext = (fallback) => {
     const context = inject(injectionKey, fallback ?? fallbackValue);
-    if (context === void 0) {
+    if (isUndefined(context)) {
       throw new Error(
         `Injection \`${injectionKey.toString()}\` not found. Component must be used within \`${providerComponentName}\``
       );

package/dist/utils/_internal/mention-html.d.ts

@@ -0,0 +1,33 @@
+export declare const MENTION_TAG = "MENTION";
+export declare const MENTION_TAG_LOWER: string;
+/** The trigger a chip falls back to when its markup carries no `trigger` attribute. */
+export declare const DEFAULT_TRIGGER = "@";
+/**
+ * A collapsed selection sitting right after a `contenteditable=false` element is
+ * not representable; Android resolves it *into* the element, the IME then finds
+ * no editable context and hides the keyboard. A zero-width space after every chip
+ * gives the caret a real text node to live in. It is stripped on serialize, so it
+ * never reaches the public HTML, the v-model or the server.
+ */
+export declare const CARET_ANCHOR = "\u200B";
+export declare function createCaretAnchor(): Text;
+export declare function isMentionElement(node: Node | null | undefined): boolean;
+/**
+ * Every chip in `root`. Pressing Enter nests content in block elements, so the
+ * editor's direct children are not enough.
+ */
+export declare function queryMentionElements(root: ParentNode): HTMLElement[];
+export declare function getMentionLabel(el: HTMLElement): string;
+export declare function createMentionElement(key: string, label: string, trigger?: string): HTMLElement;
+/** Escape plain text for paste fallback (newlines → `<br>`). */
+export declare function escapePlainTextAsHtml(text: string): string;
+/**
+ * Serialize an editor DOM tree into the public HTML contract:
+ * plain text + `<mention key="...">label</mention>` only.
+ */
+export declare function serializeMentionHtml(root: HTMLElement): string;
+/**
+ * Paste sanitizer: keep legal `<mention key>` nodes; everything else becomes text.
+ */
+export declare function sanitizeMentionClipboardHtml(html: string): DocumentFragment;
+export declare function setMentionEditorContent(root: HTMLElement, html: string): void;

package/dist/utils/_internal/mention-html.js

@@ -0,0 +1,146 @@
+export const MENTION_TAG = "MENTION";
+export const MENTION_TAG_LOWER = MENTION_TAG.toLowerCase();
+const BLOCK_TAGS = /* @__PURE__ */ new Set(["DIV", "P", "LI", "PRE"]);
+export const DEFAULT_TRIGGER = "@";
+export const CARET_ANCHOR = "\u200B";
+export function createCaretAnchor() {
+  return document.createTextNode(CARET_ANCHOR);
+}
+export function isMentionElement(node) {
+  return !!node && node.nodeType === Node.ELEMENT_NODE && node.tagName === MENTION_TAG;
+}
+export function queryMentionElements(root) {
+  return Array.from(root.querySelectorAll(MENTION_TAG_LOWER));
+}
+export function getMentionLabel(el) {
+  const trigger = el.getAttribute("trigger") || DEFAULT_TRIGGER;
+  const text = el.textContent ?? "";
+  return text.startsWith(trigger) ? text.slice(trigger.length) : text;
+}
+export function createMentionElement(key, label, trigger = DEFAULT_TRIGGER) {
+  const el = document.createElement(MENTION_TAG_LOWER);
+  el.setAttribute("key", key);
+  if (trigger !== DEFAULT_TRIGGER) {
+    el.setAttribute("trigger", trigger);
+  }
+  el.setAttribute("contenteditable", "false");
+  el.className = "pxd-mention--chip";
+  el.textContent = `${trigger}${label}`;
+  return el;
+}
+function escapeMentionText(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeMentionAttr(text) {
+  return escapeMentionText(text).replace(/"/g, "&quot;");
+}
+export function escapePlainTextAsHtml(text) {
+  return escapeMentionText(text).replace(/\n/g, "<br>");
+}
+export function serializeMentionHtml(root) {
+  let result = "";
+  function startLine() {
+    if (result && !result.endsWith("\n")) {
+      result += "\n";
+    }
+  }
+  function walk(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      result += (node.textContent ?? "").replace(/\u00A0/g, " ").replace(/\u200B/g, "");
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    const el = node;
+    if (isMentionElement(el)) {
+      const key = el.getAttribute("key") ?? "";
+      const label = getMentionLabel(el);
+      const trigger = el.getAttribute("trigger");
+      const triggerAttr = trigger ? ` trigger="${escapeMentionAttr(trigger)}"` : "";
+      result += `<${MENTION_TAG_LOWER} key="${escapeMentionAttr(key)}"${triggerAttr}>${escapeMentionText(label)}</${MENTION_TAG_LOWER}>`;
+      return;
+    }
+    if (el.tagName === "BR") {
+      result += "\n";
+      return;
+    }
+    if (BLOCK_TAGS.has(el.tagName) && (el.textContent || el.querySelector(MENTION_TAG_LOWER))) {
+      startLine();
+    }
+    for (const child of Array.from(el.childNodes)) {
+      walk(child);
+    }
+  }
+  for (const child of Array.from(root.childNodes)) {
+    walk(child);
+  }
+  return result === "\n" ? "" : result;
+}
+function parseMentionHtml(html) {
+  const fragment = document.createDocumentFragment();
+  if (!html) {
+    return fragment;
+  }
+  const doc = new DOMParser().parseFromString(`<body>${html}</body>`, "text/html");
+  appendSanitizedChildren(doc.body, fragment);
+  return fragment;
+}
+export function sanitizeMentionClipboardHtml(html) {
+  const fragment = document.createDocumentFragment();
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  appendSanitizedChildren(doc.body, fragment);
+  return fragment;
+}
+function appendSanitizedChildren(source, target) {
+  for (const child of Array.from(source.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      const text = child.textContent ?? "";
+      if (text) {
+        appendPlainText(target, text);
+      }
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      continue;
+    }
+    const el = child;
+    if (isMentionElement(el)) {
+      const key = el.getAttribute("key");
+      if (key != null && key !== "") {
+        const trigger = el.getAttribute("trigger") || DEFAULT_TRIGGER;
+        target.appendChild(createMentionElement(key, getMentionLabel(el), trigger));
+        target.appendChild(createCaretAnchor());
+        continue;
+      }
+    }
+    if (el.tagName === "BR") {
+      target.appendChild(document.createElement("br"));
+      continue;
+    }
+    appendSanitizedChildren(el, target);
+  }
+}
+function appendPlainText(target, text) {
+  const parts = text.split("\n");
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i]) {
+      const last = target.lastChild;
+      if (last?.nodeType === Node.TEXT_NODE) {
+        last.textContent = (last.textContent ?? "") + parts[i];
+      } else {
+        target.appendChild(document.createTextNode(parts[i]));
+      }
+    }
+    if (i < parts.length - 1) {
+      target.appendChild(document.createElement("br"));
+    }
+  }
+}
+export function setMentionEditorContent(root, html) {
+  root.replaceChildren();
+  root.appendChild(parseMentionHtml(html));
+  if (!root.childNodes.length) {
+    root.appendChild(document.createElement("br"));
+  }
+}

package/dist/utils/_internal/observer.d.ts

@@ -0,0 +1,42 @@
+import type { Nullable } from '../../types/shared/utils.js';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+export type TargetRef = MaybeRefOrGetter<Nullable<HTMLElement>> | MaybeRefOrGetter<Nullable<HTMLElement>>[] | MaybeRefOrGetter<Nullable<HTMLElement>[]>;
+/**
+ * The only native method this factory calls itself. Target bookkeeping goes through
+ * `ObserverSpec.sync`, because `MutationObserver` has no `unobserve`.
+ */
+export interface AnyObserver {
+    disconnect(): void;
+}
+/** Every native entry reports the node it was produced for. */
+export interface AnyObserverEntry {
+    target: Node;
+}
+export interface ObservedItem<TItem> {
+    /** The native entry. A `MutationRecord` for mutation observers. */
+    entry: TItem;
+    /** The registered element this entry belongs to. */
+    target: HTMLElement;
+}
+export interface ObserverResults<TObserver> {
+    observer: Ref<TObserver | undefined>;
+    stop: () => void;
+}
+export interface ObserverSpec<TObserver extends AnyObserver, TOptions, TItem extends AnyObserverEntry> {
+    /** Options reduced to a stable string, so an equal setup shares one observer. */
+    normalize: (options: TOptions | undefined) => string;
+    create: (callback: (items: TItem[], observer: TObserver) => void, options: TOptions | undefined) => TObserver | undefined;
+    /**
+     * Applies the move from `prev` to `next` on an existing observer. Pooled specs are
+     * driven one element at a time (`[]` to `[el]` adds, `[el]` to `[]` removes).
+     */
+    sync: (observer: TObserver, prev: HTMLElement[], next: HTMLElement[], options: TOptions | undefined) => void;
+    /** Attributes a native item to the registered element it was reported for. */
+    resolveTarget: (item: TItem, observed: readonly HTMLElement[]) => HTMLElement | undefined;
+    /**
+     * Share one native instance across every caller using equal options. Only valid when
+     * items carry their own target, which rules out mutation observers.
+     */
+    pooled?: boolean;
+}
+export declare function createObserver<TObserver extends AnyObserver, TOptions, TItem extends AnyObserverEntry>(spec: ObserverSpec<TObserver, TOptions, TItem>): (target: TargetRef, callback: (items: ObservedItem<TItem>[]) => void, options?: MaybeRefOrGetter<TOptions>) => ObserverResults<TObserver>;

package/dist/utils/_internal/observer.js

@@ -0,0 +1,173 @@
+import { onScopeDispose, shallowRef, watch } from "vue";
+import { getElement } from "../dom.js";
+import { toArray } from "../format.js";
+import { toValue } from "../helper.js";
+import { isNotNil, isServer } from "../is.js";
+function resolveTargets(source) {
+  return [
+    ...new Set(
+      toArray(toValue(source)).map((i) => getElement(i)).filter(isNotNil)
+    )
+  ];
+}
+function isSameElements(a, b) {
+  return a.length === b.length && a.every((el, i) => el === b[i]);
+}
+export function createObserver(spec) {
+  const pools = /* @__PURE__ */ new Map();
+  return function observerWrapper(target, callback, options) {
+    const observer = shallowRef();
+    const subscription = { callback };
+    let pool;
+    let observed = [];
+    let activeKey;
+    function attach(el) {
+      let subs = pool.targets.get(el);
+      if (!subs) {
+        pool.targets.set(el, subs = /* @__PURE__ */ new Set());
+        spec.sync(pool.observer, [], [el], pool.options);
+      }
+      subs.add(subscription);
+    }
+    function detach(el) {
+      const subs = pool.targets.get(el);
+      subs?.delete(subscription);
+      if (subs && !subs.size) {
+        pool.targets.delete(el);
+        spec.sync(pool.observer, [el], [], pool.options);
+      }
+    }
+    function dispatch(items) {
+      const batches = /* @__PURE__ */ new Map();
+      for (const entry of items) {
+        const subs = pool?.targets.get(entry.target);
+        if (!subs) {
+          continue;
+        }
+        for (const sub of subs) {
+          const batch = batches.get(sub);
+          if (batch) {
+            batch.push(entry);
+          } else {
+            batches.set(sub, [entry]);
+          }
+        }
+      }
+      for (const [sub, batch] of batches) {
+        sub.callback(batch.map((entry) => ({ entry, target: entry.target })));
+      }
+    }
+    function acquire(key, value) {
+      let entry = pools.get(key);
+      if (!entry) {
+        const created = spec.create(dispatch, value);
+        if (!created) {
+          return void 0;
+        }
+        entry = { observer: created, options: value, count: 0, targets: /* @__PURE__ */ new Map() };
+        pools.set(key, entry);
+      }
+      entry.count++;
+      return entry;
+    }
+    function cleanup() {
+      if (pool) {
+        observed.forEach(detach);
+        pool.count--;
+        if (pool.count <= 0) {
+          pool.observer.disconnect();
+          pools.delete(activeKey);
+        }
+      } else {
+        observer.value?.disconnect();
+      }
+      pool = void 0;
+      observer.value = void 0;
+      observed = [];
+    }
+    function emitDirectly(items) {
+      const payload = items.map((entry) => {
+        const target2 = spec.resolveTarget(entry, observed);
+        return target2 ? { entry, target: target2 } : void 0;
+      }).filter(isNotNil);
+      if (payload.length) {
+        subscription.callback(payload);
+      }
+    }
+    const unwatch = watch(
+      [() => resolveTargets(target), () => spec.normalize(toValue(options))],
+      ([newTargets, optionKey]) => {
+        if (isServer()) {
+          return;
+        }
+        let targetsChanged = !isSameElements(observed, newTargets);
+        if (optionKey !== activeKey) {
+          activeKey = optionKey;
+          cleanup();
+          targetsChanged = true;
+        }
+        if (!targetsChanged) {
+          return;
+        }
+        if (spec.pooled) {
+          if (!newTargets.length) {
+            observed.forEach(detach);
+            observed = [];
+            return;
+          }
+          if (!pool) {
+            pool = acquire(optionKey, toValue(options));
+            if (!pool) {
+              return;
+            }
+            observer.value = pool.observer;
+            observed = [];
+          }
+          observed.forEach((el) => {
+            if (!newTargets.includes(el)) {
+              detach(el);
+            }
+          });
+          newTargets.forEach((el) => {
+            if (!observed.includes(el)) {
+              attach(el);
+            }
+          });
+          observed = newTargets;
+          return;
+        }
+        if (!newTargets.length) {
+          if (observer.value) {
+            spec.sync(observer.value, observed, newTargets, toValue(options));
+            observed = [];
+          }
+          return;
+        }
+        if (!observer.value) {
+          observer.value = spec.create(emitDirectly, toValue(options));
+          if (!observer.value) {
+            return;
+          }
+          observed = [];
+        }
+        spec.sync(observer.value, observed, newTargets, toValue(options));
+        observed = newTargets;
+      },
+      {
+        immediate: true,
+        flush: "post"
+      }
+    );
+    function stop() {
+      cleanup();
+      unwatch();
+    }
+    onScopeDispose(() => {
+      stop();
+    });
+    return {
+      observer,
+      stop
+    };
+  };
+}

package/dist/utils/_internal/swipe-cell-instances.d.ts

@@ -0,0 +1,7 @@
+import type { SwipeCellCloseTrigger } from '../../components/swipe-cell/types';
+export type SwipeCellEntry = {
+    getGroup: () => string;
+    close: (trigger: SwipeCellCloseTrigger) => void;
+};
+export declare function registerSwipeCell(entry: SwipeCellEntry): () => void;
+export declare function exclusiveOpen(self: SwipeCellEntry): void;