origam 2.16.0 → 2.17.1

package/dist/src/utils/Commons/commons.util.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInternalInstance, ComponentPublicInstance, ComputedGetter, InjectionKey, MaybeRef, ToRefs, VNode, VNodeChild } from 'vue';
-import { TClientPosition, TFn, TFocusLocation, TNotAUnion, TSelectItemKey, TTemplateRef, TWrapInArrayResult } from '../../types';
+import { TClientPosition, TFn, TFocusLocation, TNotAUnion, TSelectItemKey, TTemplateRef, TWrapInArrayResult } from '../../types/Commons/commons.type';
 /**
  * Convert to unit.
  *
@@ -25,6 +25,21 @@ export declare function toKebabCase(str?: string): string;
 export declare namespace toKebabCase {
     var cache: Map<string, string>;
 }
+/**
+ * `kebab-case` → `camelCase`. Used to recognise prop names that were passed
+ * as kebab-case attributes on the parent vnode.
+ *
+ * Shared by `usePassedProps` / `useDefaults` (defaults.composable.ts) AND
+ * `theme-props-resolver.composable.ts` — both need to match `vnode.props`
+ * keys against declared prop names with the EXACT same rule (see ADR-005).
+ * Two independent implementations of this matching rule is exactly the
+ * kind of drift the "reuse before writing" policy exists to prevent, so
+ * it lives here as the single shared primitive rather than in either
+ * composable.
+ *
+ * @param str …
+ */
+export declare function camelize(str: string): string;
 /**
  * Find children with provide.
  *

package/dist/src/utils/Commons/commons.util.js

@@ -12,9 +12,9 @@ import {
   unref,
   watchEffect
 } from "vue";
-import { IN_BROWSER, ON_REGEX } from "../../consts/index.js";
+import { IN_BROWSER, ON_REGEX } from "../../consts/Commons/commons.const.js";
 import { FOCUS_LOCATION } from "../../enums/index.js";
-import { getLifeCycleTarget } from "../../utils/index.js";
+import { getLifeCycleTarget } from "./getCurrentInstance.util.js";
 export function convertToUnit(str, unit = "px") {
   if (str == null || str === "") {
     return void 0;
@@ -43,6 +43,9 @@ export function toKebabCase(str = "") {
   return kebab;
 }
 toKebabCase.cache = /* @__PURE__ */ new Map();
+export function camelize(str) {
+  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
 export function findChildrenWithProvide(key, vnode) {
   if (!vnode || typeof vnode !== "object") return [];
   if (Array.isArray(vnode)) {

package/dist/src/utils/Commons/css-support.util.cjs

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rawSupports = rawSupports;
+exports.resetSupportsCache = resetSupportsCache;
+const _cache = /* @__PURE__ */new Map();
+function rawSupports(query) {
+  if (typeof window === "undefined" || typeof CSS === "undefined" || !CSS.supports) {
+    return false;
+  }
+  if (_cache.has(query)) return _cache.get(query);
+  let result = false;
+  try {
+    result = CSS.supports(query);
+  } catch {
+    result = false;
+  }
+  _cache.set(query, result);
+  return result;
+}
+function resetSupportsCache() {
+  _cache.clear();
+}

package/dist/src/utils/Commons/css-support.util.d.ts

@@ -0,0 +1,32 @@
+/*********************************************************
+ * css-support.util
+ *
+ * @description
+ * Low-level, cached `CSS.supports()` wrapper shared by `useCssSupport`
+ * and `useCssSupportClient` (packages/ds/src/composables/Commons/).
+ * @description
+ * Extracted here rather than duplicated in each composable file: both
+ * hooks need the exact same SSR-safe, cached "does the browser support
+ * this query" primitive, and the module-level cache must stay a single
+ * instance so every component (and both hooks) sees the same answers.
+ ********************************************************/
+/**
+ * Run `CSS.supports(query)` with safe handling of:
+ *   - SSR / non-browser environments (returns false)
+ *   - older browsers without CSS.supports (returns false)
+ *   - parens-vs-paren-less queries (Selector queries need `selector(...)`,
+ *     not all engines accept `display: grid` without parens — we let the
+ *     caller phrase the query)
+ *   - `@supports`-style boolean expressions (we DO NOT split — the caller
+ *     is responsible for using a query CSS.supports accepts)
+ *
+ * Results are cached.
+ */
+export declare function rawSupports(query: string): boolean;
+/**
+ * Test-only helper — clear the shared `CSS.supports` cache.
+ * Not part of the public API; consumers must not depend on it.
+ *
+ * @internal
+ */
+export declare function resetSupportsCache(): void;

package/dist/src/utils/Commons/css-support.util.js

@@ -0,0 +1,18 @@
+const _cache = /* @__PURE__ */ new Map();
+export function rawSupports(query) {
+  if (typeof window === "undefined" || typeof CSS === "undefined" || !CSS.supports) {
+    return false;
+  }
+  if (_cache.has(query)) return _cache.get(query);
+  let result = false;
+  try {
+    result = CSS.supports(query);
+  } catch {
+    result = false;
+  }
+  _cache.set(query, result);
+  return result;
+}
+export function resetSupportsCache() {
+  _cache.clear();
+}

package/dist/src/utils/Commons/date.util.cjs

@@ -48,8 +48,8 @@ exports.startOfWeek = startOfWeek;
 exports.startOfYear = startOfYear;
 exports.toISO = toISO;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _date = require("../../consts/Commons/date.const.cjs");
+var _commons = require("./commons.util.cjs");
 function createInstance(options, locale) {
   const instance = (0, _vue.reactive)(typeof options.adapter === "function" ? new options.adapter({
     locale: options.locale[locale.current.value] ?? locale.current.value,
@@ -65,7 +65,7 @@ function date(value) {
   if (value instanceof Date) return value;
   if (typeof value === "string") {
     let parsed;
-    if (_consts.REGEX_DATE_YYYY_MM_DD.test(value)) {
+    if (_date.REGEX_DATE_YYYY_MM_DD.test(value)) {
       return parseLocalDate(value);
     } else {
       parsed = Date.parse(value);
@@ -81,8 +81,8 @@ function parseLocalDate(value) {
 function toISO(adapter, value) {
   const date2 = adapter.toJsDate(value);
   const year = date2.getFullYear();
-  const month = (0, _utils.padStart)(String(date2.getMonth() + 1), 2, "0");
-  const day = (0, _utils.padStart)(String(date2.getDate()), 2, "0");
+  const month = (0, _commons.padStart)(String(date2.getMonth() + 1), 2, "0");
+  const day = (0, _commons.padStart)(String(date2.getDate()), 2, "0");
   return `${year}-${month}-${day}`;
 }
 function parseISO(value) {
@@ -240,7 +240,7 @@ function getWeekArray(date2, locale, firstDayOfWeek) {
   let currentWeek = [];
   const firstDayOfMonth = startOfMonth(date2);
   const lastDayOfMonth = endOfMonth(date2);
-  const first = firstDayOfWeek ?? _consts.FIRST_DAY[locale.slice(-2).toUpperCase()] ?? 0;
+  const first = firstDayOfWeek ?? _date.FIRST_DAY[locale.slice(-2).toUpperCase()] ?? 0;
   const firstDayWeekIndex = (firstDayOfMonth.getDay() - first + 7) % 7;
   const lastDayWeekIndex = (lastDayOfMonth.getDay() - first + 7) % 7;
   for (let i = 0; i < firstDayWeekIndex; i++) {
@@ -267,7 +267,7 @@ function getWeekArray(date2, locale, firstDayOfWeek) {
   return weeks;
 }
 function startOfWeek(date2, locale, firstDayOfWeek) {
-  const day = firstDayOfWeek ?? _consts.FIRST_DAY[locale.slice(-2).toUpperCase()] ?? 0;
+  const day = firstDayOfWeek ?? _date.FIRST_DAY[locale.slice(-2).toUpperCase()] ?? 0;
   const d = new Date(date2);
   while (d.getDay() !== day) {
     d.setDate(d.getDate() - 1);
@@ -276,7 +276,7 @@ function startOfWeek(date2, locale, firstDayOfWeek) {
 }
 function endOfWeek(date2, locale) {
   const d = new Date(date2);
-  const lastDay = ((_consts.FIRST_DAY[locale.slice(-2).toUpperCase()] ?? 0) + 6) % 7;
+  const lastDay = ((_date.FIRST_DAY[locale.slice(-2).toUpperCase()] ?? 0) + 6) % 7;
   while (d.getDay() !== lastDay) {
     d.setDate(d.getDate() + 1);
   }
@@ -503,10 +503,10 @@ function formatDate(value, formatString, locale, formats) {
   return new Intl.DateTimeFormat(locale, options).format(newDate);
 }
 function getWeekdays(locale, firstDayOfWeek) {
-  const daysFromSunday = firstDayOfWeek ?? _consts.FIRST_DAY[locale.slice(-2).toUpperCase()] ?? 0;
-  return (0, _utils.createRange)(7).map(i => {
-    const weekday = new Date(_consts.DATE_2000_JUNARY_SUNDAY);
-    weekday.setDate(_consts.DATE_2000_JUNARY_SUNDAY.getDate() + daysFromSunday + i);
+  const daysFromSunday = firstDayOfWeek ?? _date.FIRST_DAY[locale.slice(-2).toUpperCase()] ?? 0;
+  return (0, _commons.createRange)(7).map(i => {
+    const weekday = new Date(_date.DATE_2000_JUNARY_SUNDAY);
+    weekday.setDate(_date.DATE_2000_JUNARY_SUNDAY.getDate() + daysFromSunday + i);
     return new Intl.DateTimeFormat(locale, {
       weekday: "narrow"
     }).format(weekday);

package/dist/src/utils/Commons/date.util.d.ts

@@ -1,6 +1,7 @@
-import type { IDateAdapter, IDateOptions, ILocaleInstance } from "../../interfaces";
-import { DateAdapter } from "../../services";
-import type { TCustomDateFormat } from "../../types";
+import type { IDateAdapter, IDateOptions } from '../../interfaces/Commons/date.interface';
+import type { ILocaleInstance } from '../../interfaces/Commons/locale.interface';
+import { DateAdapter } from '../../classes/Commons/date-adapter.class';
+import type { TCustomDateFormat } from '../../types/Commons/date.type';
 /**
  * Create instance.
  *

package/dist/src/utils/Commons/date.util.js

@@ -1,6 +1,6 @@
 import { reactive, watch } from "vue";
-import { DATE_2000_JUNARY_SUNDAY, FIRST_DAY, REGEX_DATE_YYYY_MM_DD } from "../../consts/index.js";
-import { createRange, padStart } from "../../utils/index.js";
+import { DATE_2000_JUNARY_SUNDAY, FIRST_DAY, REGEX_DATE_YYYY_MM_DD } from "../../consts/Commons/date.const.js";
+import { createRange, padStart } from "./commons.util.js";
 export function createInstance(options, locale) {
   const instance = reactive(
     typeof options.adapter === "function" ? new options.adapter({

package/dist/src/utils/Commons/display.util.cjs

@@ -7,19 +7,20 @@ exports.getClientHeight = getClientHeight;
 exports.getClientWidth = getClientWidth;
 exports.getPlatform = getPlatform;
 exports.parseDisplayOptions = parseDisplayOptions;
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
-function parseDisplayOptions(options = _consts.DEFAULT_DISPLAY_OPTIONS) {
-  return (0, _utils.mergeDeep)(_consts.DEFAULT_DISPLAY_OPTIONS, options);
+var _commons = require("../../consts/Commons/commons.const.cjs");
+var _display = require("../../consts/Commons/display.const.cjs");
+var _commons2 = require("./commons.util.cjs");
+function parseDisplayOptions(options = _display.DEFAULT_DISPLAY_OPTIONS) {
+  return (0, _commons2.mergeDeep)(_display.DEFAULT_DISPLAY_OPTIONS, options);
 }
 function getClientWidth(ssr) {
-  return _consts.IN_BROWSER && !ssr ? window.innerWidth : typeof ssr === "object" && ssr.clientWidth || 0;
+  return _commons.IN_BROWSER && !ssr ? window.innerWidth : typeof ssr === "object" && ssr.clientWidth || 0;
 }
 function getClientHeight(ssr) {
-  return _consts.IN_BROWSER && !ssr ? window.innerHeight : typeof ssr === "object" && ssr.clientHeight || 0;
+  return _commons.IN_BROWSER && !ssr ? window.innerHeight : typeof ssr === "object" && ssr.clientHeight || 0;
 }
 function getPlatform(ssr) {
-  const userAgent = _consts.IN_BROWSER && !ssr ? window.navigator.userAgent : "ssr";
+  const userAgent = _commons.IN_BROWSER && !ssr ? window.navigator.userAgent : "ssr";
   const match = regexp => {
     return Boolean(userAgent.match(regexp));
   };
@@ -46,7 +47,7 @@ function getPlatform(ssr) {
     win,
     mac,
     linux,
-    touch: _consts.SUPPORTS_TOUCH,
+    touch: _commons.SUPPORTS_TOUCH,
     ssr: userAgent === "ssr"
   };
 }

package/dist/src/utils/Commons/display.util.d.ts

@@ -1,5 +1,5 @@
-import type { IDisplayOptions, IDisplayPlatform, IInternalDisplayOptions } from '../../interfaces';
-import type { TSSROptions } from '../../types';
+import type { IDisplayOptions, IDisplayPlatform, IInternalDisplayOptions } from '../../interfaces/Commons/display.interface';
+import type { TSSROptions } from '../../types/Commons/display.type';
 /**
  * Parse display options.
  *

package/dist/src/utils/Commons/display.util.js

@@ -1,5 +1,6 @@
-import { DEFAULT_DISPLAY_OPTIONS, IN_BROWSER, SUPPORTS_TOUCH } from "../../consts/index.js";
-import { mergeDeep } from "../../utils/index.js";
+import { IN_BROWSER, SUPPORTS_TOUCH } from "../../consts/Commons/commons.const.js";
+import { DEFAULT_DISPLAY_OPTIONS } from "../../consts/Commons/display.const.js";
+import { mergeDeep } from "./commons.util.js";
 export function parseDisplayOptions(options = DEFAULT_DISPLAY_OPTIONS) {
   return mergeDeep(
     DEFAULT_DISPLAY_OPTIONS,

package/dist/src/utils/Commons/elevation.util.cjs

@@ -5,23 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatElevationStyle = formatElevationStyle;
 exports.isCustomBoxShadow = isCustomBoxShadow;
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _elevation = require("../../consts/Commons/elevation.const.cjs");
+var _color = require("./color.util.cjs");
+var _commons = require("./commons.util.cjs");
 function isCustomBoxShadow(value) {
-  return _consts.CUSTOM_BOX_SHADOW_REGEX.test(value.trim());
+  return _elevation.CUSTOM_BOX_SHADOW_REGEX.test(value.trim());
 }
 function formatElevationStyle(elevation = 0, bgColor) {
-  const blurRadius = (0, _utils.roundTo)((0, _utils.normalize)(elevation * 0.04, 0, 1, 0, 16), 1);
-  const offsetX = (0, _utils.roundTo)((0, _utils.normalize)(elevation * 0.04, 0, 1, 0, 8), 1);
-  const offsetY = (0, _utils.roundTo)((0, _utils.normalize)(elevation * 0.04, 0, 1, 0, 16), 1);
-  const opacity = (0, _utils.roundTo)((0, _utils.normalize)(elevation * 0.04, 0, 1, 0.5, 0.25), 2);
+  const blurRadius = (0, _commons.roundTo)((0, _commons.normalize)(elevation * 0.04, 0, 1, 0, 16), 1);
+  const offsetX = (0, _commons.roundTo)((0, _commons.normalize)(elevation * 0.04, 0, 1, 0, 8), 1);
+  const offsetY = (0, _commons.roundTo)((0, _commons.normalize)(elevation * 0.04, 0, 1, 0, 16), 1);
+  const opacity = (0, _commons.roundTo)((0, _commons.normalize)(elevation * 0.04, 0, 1, 0.5, 0.25), 2);
   let color = {
     h: 0,
     s: 0,
     l: 0
   };
-  if (typeof bgColor === "string" && (0, _utils.isParsableColor)(bgColor)) {
-    color = (0, _utils.HSVtoHSL)((0, _utils.RGBtoHSV)((0, _utils.parseColor)(bgColor)));
+  if (typeof bgColor === "string" && (0, _color.isParsableColor)(bgColor)) {
+    color = (0, _color.HSVtoHSL)((0, _color.RGBtoHSV)((0, _color.parseColor)(bgColor)));
   }
-  return `box-shadow: ${(0, _utils.convertToUnit)(offsetX)} ${(0, _utils.convertToUnit)(offsetY)} ${(0, _utils.convertToUnit)(blurRadius)} hsl(${(0, _utils.convertToUnit)(color.h, "deg")} ${(0, _utils.convertToUnit)(color.s * 100, "%")} ${(0, _utils.convertToUnit)(color.l * 100, "%")} / ${opacity.toFixed(2)})`;
+  return `box-shadow: ${(0, _commons.convertToUnit)(offsetX)} ${(0, _commons.convertToUnit)(offsetY)} ${(0, _commons.convertToUnit)(blurRadius)} hsl(${(0, _commons.convertToUnit)(color.h, "deg")} ${(0, _commons.convertToUnit)(color.s * 100, "%")} ${(0, _commons.convertToUnit)(color.l * 100, "%")} / ${opacity.toFixed(2)})`;
 }

package/dist/src/utils/Commons/elevation.util.d.ts

@@ -1,4 +1,4 @@
-import type { TColor } from "../../types";
+import type { TColor } from '../../types/Commons/color.type';
 /**
  * Whether a string is a free-form custom `box-shadow` value (not an
  * origam-native rung name, not a Material 0..24 number) that should be

package/dist/src/utils/Commons/elevation.util.js

@@ -1,5 +1,6 @@
-import { CUSTOM_BOX_SHADOW_REGEX } from "../../consts/index.js";
-import { convertToUnit, HSVtoHSL, isParsableColor, normalize, parseColor, RGBtoHSV, roundTo } from "../../utils/index.js";
+import { CUSTOM_BOX_SHADOW_REGEX } from "../../consts/Commons/elevation.const.js";
+import { HSVtoHSL, isParsableColor, parseColor, RGBtoHSV } from "./color.util.js";
+import { convertToUnit, normalize, roundTo } from "./commons.util.js";
 export function isCustomBoxShadow(value) {
   return CUSTOM_BOX_SHADOW_REGEX.test(value.trim());
 }

package/dist/src/utils/Commons/event.util.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPrefixedEventHandlers = getPrefixedEventHandlers;
-var _utils = require("../../utils/index.cjs");
+var _commons = require("./commons.util.cjs");
 function getPrefixedEventHandlers(attrs, suffix, getData) {
-  return Object.keys(attrs).filter(key => (0, _utils.isOn)(key) && key.endsWith(suffix)).reduce((acc, key) => {
+  return Object.keys(attrs).filter(key => (0, _commons.isOn)(key) && key.endsWith(suffix)).reduce((acc, key) => {
     acc[key.slice(0, -suffix.length)] = event => attrs[key](event, getData(event));
     return acc;
   }, {});

package/dist/src/utils/Commons/event.util.d.ts

@@ -1,4 +1,4 @@
-import type { TEventHandler } from '../../types';
+import type { TEventHandler } from '../../types/Commons/event.type';
 /**
  * Get prefixed event handlers.
  *

package/dist/src/utils/Commons/event.util.js

@@ -1,4 +1,4 @@
-import { isOn } from "../../utils/index.js";
+import { isOn } from "./commons.util.js";
 export function getPrefixedEventHandlers(attrs, suffix, getData) {
   return Object.keys(attrs).filter((key) => isOn(key) && key.endsWith(suffix)).reduce((acc, key) => {
     acc[key.slice(0, -suffix.length)] = (event) => attrs[key](event, getData(event));

package/dist/src/utils/Commons/filters.util.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultFilter = defaultFilter;
 exports.filterItems = filterItems;
-var _utils = require("../../utils/index.cjs");
+var _commons = require("./commons.util.cjs");
 function defaultFilter(value, query) {
   if (value == null || query == null) return -1;
   return value.toString().toLocaleLowerCase().indexOf(query.toString().toLocaleLowerCase());
@@ -13,11 +13,11 @@ function defaultFilter(value, query) {
 function filterItems(items, query, options) {
   const array = [];
   const filter = options?.default ?? defaultFilter;
-  const keys = options?.filterKeys ? (0, _utils.wrapInArray)(options.filterKeys) : false;
+  const keys = options?.filterKeys ? (0, _commons.wrapInArray)(options.filterKeys) : false;
   const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length;
   if (!items?.length) return array;
   loop: for (let i = 0; i < items.length; i++) {
-    const [item, transformed = item] = (0, _utils.wrapInArray)(items[i]);
+    const [item, transformed = item] = (0, _commons.wrapInArray)(items[i]);
     const customMatches = {};
     const defaultMatches = {};
     let match = -1;
@@ -25,7 +25,7 @@ function filterItems(items, query, options) {
       if (typeof item === "object") {
         const filterKeys = keys || Object.keys(transformed);
         for (const key of filterKeys) {
-          const value = (0, _utils.getPropertyFromItem)(transformed, key);
+          const value = (0, _commons.getPropertyFromItem)(transformed, key);
           const keyFilter = options?.customKeyFilter?.[key];
           match = keyFilter ? keyFilter(value, query, item) : filter(value, query, item);
           if (match !== -1 && match !== false) {

package/dist/src/utils/Commons/filters.util.d.ts

@@ -1,5 +1,5 @@
-import type { IInternalItem } from '../../interfaces';
-import type { TFilterFunction, TFilterKeyFunctions, TFilterKeys, TFilterMatch, TFilterMode } from '../../types';
+import type { IInternalItem } from '../../interfaces/List/list-children.interface';
+import type { TFilterFunction, TFilterKeyFunctions, TFilterKeys, TFilterMatch, TFilterMode } from '../../types/Commons/filters.type';
 /**
  * Default filter.
  *

package/dist/src/utils/Commons/filters.util.js

@@ -1,4 +1,4 @@
-import { getPropertyFromItem, wrapInArray } from "../../utils/index.js";
+import { getPropertyFromItem, wrapInArray } from "./commons.util.js";
 export function defaultFilter(value, query) {
   if (value == null || query == null) return -1;
   return value.toString().toLocaleLowerCase().indexOf(query.toString().toLocaleLowerCase());

package/dist/src/utils/Commons/forwardRefs.util.cjs

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.forwardRefs = forwardRefs;
 exports.getDescriptor = getDescriptor;
-var _consts = require("../../consts/index.cjs");
+var _forwardRefs = require("../../consts/Commons/forwardRefs.const.cjs");
 function forwardRefs(target, ...refs) {
-  target[_consts.FORWARD_REFS] = refs;
+  target[_forwardRefs.FORWARD_REFS] = refs;
   return new Proxy(target, {
     get(target2, key) {
       if (Reflect.has(target2, key)) {
@@ -55,14 +55,14 @@ function forwardRefs(target, ...refs) {
         if (descriptor2) return descriptor2;
       }
       for (const ref of refs) {
-        const childRefs = ref.value && ref.value[_consts.FORWARD_REFS];
+        const childRefs = ref.value && ref.value[_forwardRefs.FORWARD_REFS];
         if (!childRefs) continue;
         const queue = childRefs.slice();
         while (queue.length) {
           const ref2 = queue.shift();
           const descriptor2 = getDescriptor(ref2.value, key);
           if (descriptor2) return descriptor2;
-          const childRefs2 = ref2.value?.[_consts.FORWARD_REFS];
+          const childRefs2 = ref2.value?.[_forwardRefs.FORWARD_REFS];
           if (childRefs2) queue.push(...childRefs2);
         }
       }

package/dist/src/utils/Commons/forwardRefs.util.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, Ref, UnwrapRef } from 'vue';
-import type { TOmitPrefix, TOmitProps, TUnionToIntersection } from '../../types';
+import type { TOmitPrefix, TOmitProps, TUnionToIntersection } from '../../types/Commons/forwardRefs.type';
 /**
  * Forward refs.
  *

package/dist/src/utils/Commons/forwardRefs.util.js

@@ -1,4 +1,4 @@
-import { FORWARD_REFS } from "../../consts/index.js";
+import { FORWARD_REFS } from "../../consts/Commons/forwardRefs.const.js";
 export function forwardRefs(target, ...refs) {
   target[FORWARD_REFS] = refs;
   return new Proxy(target, {

package/dist/src/utils/Commons/getCurrentInstance.util.cjs

@@ -8,7 +8,7 @@ exports.getCurrentInstanceName = getCurrentInstanceName;
 exports.getLifeCycleTarget = getLifeCycleTarget;
 exports.getUid = getUid;
 var _vue = require("vue");
-var _utils = require("../../utils/index.cjs");
+var _commons = require("./commons.util.cjs");
 function getLifeCycleTarget(target) {
   return target || (0, _vue.getCurrentInstance)();
 }
@@ -21,19 +21,14 @@ function getCurrentInstance(name, message) {
 }
 function getCurrentInstanceName(name = "composable") {
   const vm = getCurrentInstance(name).type;
-  return (0, _utils.toKebabCase)(vm?.aliasName ?? vm?.name ?? vm?.__name);
+  return (0, _commons.toKebabCase)(vm?.aliasName ?? vm?.name ?? vm?.__name);
 }
-let _uid = 0;
-let _map = /* @__PURE__ */new WeakMap();
+const _map = /* @__PURE__ */new WeakMap();
 function getUid() {
   const vm = getCurrentInstance("getUid");
-  if (_map.has(vm)) return _map.get(vm);else {
-    const uid = _uid++;
-    _map.set(vm, uid);
-    return uid;
-  }
-}
-getUid.reset = () => {
-  _uid = 0;
-  _map = /* @__PURE__ */new WeakMap();
-};
+  const cached = _map.get(vm);
+  if (cached !== void 0) return cached;
+  const uid = (0, _vue.useId)();
+  _map.set(vm, uid);
+  return uid;
+}

package/dist/src/utils/Commons/getCurrentInstance.util.d.ts

@@ -19,9 +19,57 @@ export declare function getCurrentInstance(name: string, message?: string): Comp
  */
 export declare function getCurrentInstanceName(name?: string): string;
 /**
- * Get uid.
+ * Stable per-instance id, safe to render on the server and hydrate on the
+ * client.
+ *
+ * ⛔ This used to be a module-global monotonic counter (`let _uid = 0`), with
+ * `createOrigam()`'s `install()` calling a `getUid.reset()`. Both halves were
+ * wrong on a persistent SSR process, in two independent ways — measured on the
+ * marketing site's production build, not inferred:
+ *
+ *  1. A LINEAR COUNTER IS ORDER-DEPENDENT, and the order differs between the
+ *     two sides. Vue's SSR renderer buffers an async subtree and resumes it
+ *     after its siblings, so instances call this function in a different
+ *     sequence server-side than they mount client-side. On `/`, with a single
+ *     request and an idle server, **82 of 125 `origam-*` ids differed** between
+ *     the served HTML and the post-hydration DOM.
+ *  2. `reset()` WAS MODULE-GLOBAL STATE MUTATED FROM A PER-REQUEST PATH.
+ *     Nuxt's server plugin runs `createOrigam()` + `app.use()` once per
+ *     request, so request B's install rewound the counter while request A was
+ *     still rendering. Under parallel load the same page was served with
+ *     `origam-app-263` where a quiet server served `origam-app-0`, and every
+ *     one of the 125 ids was replaced at hydration. Worse, a rewound counter
+ *     hands the same number out twice, which puts **two elements with the same
+ *     `id` in one document** — invalid HTML, and `useStyle` then injects two
+ *     `#id { … }` rules that both match both elements.
+ *
+ * Vue 3.5's `useId()` fixes both by construction: the value comes from the
+ * instance's position in the tree (`instance.ids`, inherited from the parent
+ * and extended at every async boundary) and nothing lives at module scope.
+ * Same position ⇒ same id on both sides; separate apps ⇒ separate namespaces,
+ * so concurrent renders cannot see each other.
+ *
+ * Two properties callers rely on are preserved:
+ *
+ *  - **One id per instance for its whole life.** `useId()` increments on every
+ *     call, so the `WeakMap` below is what makes repeated calls return the same
+ *     value — same contract as before, and `style.composable.ts` depends on it.
+ *  - **Must run inside `setup()`.** Unchanged: `getCurrentInstance` throws
+ *     otherwise, which is a louder failure than `useId()`'s own dev-only warn.
+ *
+ * ⚠️ Two things changed for callers:
+ *
+ *  - **The return type is a `string`** (`'v-3'`, or `'v-2-0'` past an async
+ *    boundary), not a number. Treat it as opaque — never parse it, never do
+ *    arithmetic on it, never assume it sorts. `useGroupItem` is deliberately
+ *    NOT a caller: its id is runtime-only identity that never reaches the DOM,
+ *    so it keeps its own counter and `IGroupProvide`'s `id: number` is intact.
+ *  - **Uniqueness is scoped to the Vue app**, where it used to be global to
+ *    the module. That is the scope the value actually needs — it becomes a DOM
+ *    `id`, and ids only have to be unique inside one document, which is one
+ *    app in every configuration this DS ships (Nuxt, Histoire, VitePress). A
+ *    page that mounts TWO independent Vue apps and renders origam components
+ *    in both must give at least one of them its own
+ *    `app.config.idPrefix`, or the two id spaces will overlap.
  */
-export declare function getUid(): number;
-export declare namespace getUid {
-    var reset: () => void;
-}
+export declare function getUid(): string;

package/dist/src/utils/Commons/getCurrentInstance.util.js

@@ -1,5 +1,5 @@
-import { getCurrentInstance as _getCurrentInstance } from "vue";
-import { toKebabCase } from "../../utils/index.js";
+import { getCurrentInstance as _getCurrentInstance, useId } from "vue";
+import { toKebabCase } from "./commons.util.js";
 export function getLifeCycleTarget(target) {
   return target || _getCurrentInstance();
 }
@@ -14,18 +14,12 @@ export function getCurrentInstanceName(name = "composable") {
   const vm = getCurrentInstance(name).type;
   return toKebabCase(vm?.aliasName ?? vm?.name ?? vm?.__name);
 }
-let _uid = 0;
-let _map = /* @__PURE__ */ new WeakMap();
+const _map = /* @__PURE__ */ new WeakMap();
 export function getUid() {
   const vm = getCurrentInstance("getUid");
-  if (_map.has(vm)) return _map.get(vm);
-  else {
-    const uid = _uid++;
-    _map.set(vm, uid);
-    return uid;
-  }
+  const cached = _map.get(vm);
+  if (cached !== void 0) return cached;
+  const uid = useId();
+  _map.set(vm, uid);
+  return uid;
 }
-getUid.reset = () => {
-  _uid = 0;
-  _map = /* @__PURE__ */ new WeakMap();
-};