origam 2.2.1 → 2.5.0

package/dist/src/composables/Commons/color.composable.js

@@ -11,13 +11,14 @@ import {
   tokenStylesForIntent,
   warnLegacyColor
 } from "../../utils/Commons/color.util.ts";
+import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.ts";
 export function useColor(colors) {
   const colorClasses = computed(() => {
     const classes = [];
-    if (colors.value.background && isUtilityIntent(colors.value.background)) {
+    if (colors.value.background && !isGradient(colors.value.background) && isUtilityIntent(colors.value.background)) {
       classes.push(`origam--bg-${colors.value.background}`);
     }
-    if (colors.value.text && isUtilityIntent(colors.value.text)) {
+    if (colors.value.text && !isGradient(colors.value.text) && isUtilityIntent(colors.value.text)) {
       classes.push(`origam--color-${colors.value.text}`);
     }
     return classes;
@@ -26,31 +27,46 @@ export function useColor(colors) {
     const styles = [];
     let bgIntentFg = null;
     let bgDecl = null;
+    let bgIsGradient = false;
     if (colors.value.background) {
-      if (isIntent(colors.value.background)) {
+      if (isGradient(colors.value.background)) {
+        const grad = resolveGradient(colors.value.background);
+        if (grad) {
+          bgDecl = `background-image: ${grad}`;
+          bgIsGradient = true;
+        }
+      } else if (isIntent(colors.value.background)) {
         const m = tokenStylesForIntent(colors.value.background, "default");
         bgDecl = `background-color: ${m["background-color"]}`;
         bgIntentFg = m.color;
       } else if (colors.value.background === "transparent") {
         bgDecl = `background-color: ${colors.value.background}`;
-      } else if (isCssColor(colors.value.background)) {
+      } else if (typeof colors.value.background === "string" && isCssColor(colors.value.background)) {
         bgDecl = `background-color: ${colors.value.background}`;
       }
     }
     let fgDecl = null;
     if (colors.value.text) {
-      if (isIntent(colors.value.text)) {
+      if (isGradient(colors.value.text)) {
+        const grad = resolveGradient(colors.value.text);
+        if (grad) {
+          fgDecl = "color: transparent";
+          styles.push(`background-image: ${grad}`);
+          styles.push("background-clip: text");
+          styles.push("-webkit-background-clip: text");
+        }
+      } else if (isIntent(colors.value.text)) {
         if (bgIntentFg && isIntent(colors.value.background) && colors.value.text === colors.value.background) {
           fgDecl = `color: ${bgIntentFg}`;
         } else {
           fgDecl = `color: ${tokenForegroundForIntent(colors.value.text)}`;
         }
-      } else if (isCssColor(colors.value.text)) {
+      } else if (typeof colors.value.text === "string" && isCssColor(colors.value.text)) {
         fgDecl = `color: ${colors.value.text}`;
       }
-    } else if (bgIntentFg) {
+    } else if (bgIntentFg && !bgIsGradient) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (bgDecl && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && isParsableColor(colors.value.background)) {
+    } else if (bgDecl && !bgIsGradient && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && isParsableColor(colors.value.background)) {
       const parsed = parseColor(colors.value.background);
       if (parsed.a == null || parsed.a === 1) {
         fgDecl = `color: ${getForeground(parsed)}`;
@@ -124,7 +140,15 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
-    if (bgColor.value && isIntent(bgColor.value)) {
+    let bgIsGradient = false;
+    let clipText = false;
+    if (bgColor.value && isGradient(bgColor.value)) {
+      const grad = resolveGradient(bgColor.value);
+      if (grad) {
+        bgDecl = `background-image: ${grad}`;
+        bgIsGradient = true;
+      }
+    } else if (bgColor.value && isIntent(bgColor.value)) {
       const m = tokenStylesForIntent(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
       bgIntentFg = tokenStylesForIntent(bgColor.value, "default").color;
@@ -134,7 +158,14 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
       warnLegacyColor("bgColor", bgColor.value);
       bgDecl = `background-color: ${rawBgExprWithState(bgColor.value, bgRole)}`;
     }
-    if (color.value && isIntent(color.value)) {
+    if (color.value && isGradient(color.value)) {
+      const grad = resolveGradient(color.value);
+      if (grad) {
+        fgDecl = "color: transparent";
+        bgDecl = `background-image: ${grad}`;
+        clipText = true;
+      }
+    } else if (color.value && isIntent(color.value)) {
       if (bgIntentFg && bgColor.value && isIntent(bgColor.value) && color.value === bgColor.value) {
         fgDecl = `color: ${bgIntentFg}`;
       } else {
@@ -143,9 +174,9 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
     } else if (color.value && typeof color.value === "string" && isCssColor(color.value)) {
       if (color.value !== "transparent") warnLegacyColor("color", color.value);
       fgDecl = `color: ${color.value}`;
-    } else if (!color.value && bgIntentFg) {
+    } else if (!color.value && bgIntentFg && !bgIsGradient) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (!color.value && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && isParsableColor(bgColor.value)) {
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && isParsableColor(bgColor.value)) {
       const parsed = parseColor(bgColor.value);
       if (parsed.a == null || parsed.a === 1) {
         fgDecl = `color: ${getForeground(parsed)}`;
@@ -154,6 +185,10 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
     const styles = [];
     if (bgDecl) styles.push(bgDecl);
     if (fgDecl) styles.push(fgDecl);
+    if (clipText) {
+      styles.push("background-clip: text");
+      styles.push("-webkit-background-clip: text");
+    }
     return styles;
   });
   return { colorClasses, colorStyles, color, bgColor };

package/dist/src/composables/Commons/{calendar.composable.cjs → date-picker-calendar.composable.cjs}

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCalendar = useCalendar;
+exports.useDatePickerCalendar = useDatePickerCalendar;
 var _vue = require("vue");
 var _composables = require("../../composables/index.cjs");
 var _utils = require("../../utils/index.cjs");
-function useCalendar(props) {
+function useDatePickerCalendar(props) {
   const adapter = (0, _composables.useDate)();
   const model = (0, _composables.useVModel)(props, "date", [], v => (0, _utils.wrapInArray)(v));
   const year = (0, _composables.useVModel)(props, "year", void 0, v => {

package/dist/src/composables/Commons/{calendar.composable.d.ts → date-picker-calendar.composable.d.ts}

@@ -1,8 +1,8 @@
 import type { ICalendarProps, IDay } from "../../interfaces";
 /*********************************************************
- * useCalendar
+ * useDatePickerCalendar
  ********************************************************/
-export declare function useCalendar(props: ICalendarProps): {
+export declare function useDatePickerCalendar(props: ICalendarProps): {
     displayValue: import("vue").ComputedRef<unknown>;
     daysInMonth: import("vue").ComputedRef<IDay[]>;
     daysInWeek: import("vue").ComputedRef<IDay[]>;

package/dist/src/composables/Commons/{calendar.composable.js → date-picker-calendar.composable.js}

@@ -1,7 +1,7 @@
 import { computed } from "vue";
 import { useDate, useVModel } from "../../composables/index.js";
 import { getWeek, wrapInArray } from "../../utils/index.js";
-export function useCalendar(props) {
+export function useDatePickerCalendar(props) {
   const adapter = useDate();
   const model = useVModel(
     props,

package/dist/src/composables/Commons/elevation.composable.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useElevation = useElevation;
 var _vue = require("vue");
+var _elevation = require("../../consts/Commons/elevation.const.cjs");
 var _utils = require("../../utils/index.cjs");
 function elevationToToken(level) {
   if (level <= 0) return "none";
@@ -14,13 +15,11 @@ function elevationToToken(level) {
   if (level <= 16) return "lg";
   return "xl";
 }
-const ORIGAM_SHADOW_RUNGS = /* @__PURE__ */new Set(["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"]);
 function isOrigamRung(value) {
-  return typeof value === "string" && ORIGAM_SHADOW_RUNGS.has(value);
+  return typeof value === "string" && _elevation.ORIGAM_SHADOW_RUNGS.has(value);
 }
-const UTILITY_SHADOW_RUNGS = /* @__PURE__ */new Set(["none", "xs", "sm", "md", "lg", "xl"]);
 function isUtilityRung(value) {
-  return typeof value === "string" && UTILITY_SHADOW_RUNGS.has(value);
+  return typeof value === "string" && _elevation.UTILITY_SHADOW_RUNGS.has(value);
 }
 const _bgWarned = /* @__PURE__ */new WeakSet();
 function warnBgColorUsage(bgColor) {
@@ -47,7 +46,7 @@ function useElevation(props, flat = (0, _vue.ref)(false), bgColor = (0, _vue.ref
       const numeric = typeof elevation === "string" ? parseInt(elevation, 10) : elevation;
       if (typeof numeric === "number" && !Number.isNaN(numeric)) {
         const tokenName = elevationToToken(numeric);
-        if (UTILITY_SHADOW_RUNGS.has(tokenName)) {
+        if (_elevation.UTILITY_SHADOW_RUNGS.has(tokenName)) {
           classes.push(`origam--shadow-${tokenName}`);
         }
       }

package/dist/src/composables/Commons/elevation.composable.js

@@ -1,4 +1,5 @@
 import { computed, isRef, ref } from "vue";
+import { ORIGAM_SHADOW_RUNGS, UTILITY_SHADOW_RUNGS } from "../../consts/Commons/elevation.const.js";
 import { getCurrentInstanceName } from "../../utils/index.js";
 function elevationToToken(level) {
   if (level <= 0) return "none";
@@ -8,27 +9,9 @@ function elevationToToken(level) {
   if (level <= 16) return "lg";
   return "xl";
 }
-const ORIGAM_SHADOW_RUNGS = /* @__PURE__ */ new Set([
-  "none",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl"
-]);
 function isOrigamRung(value) {
   return typeof value === "string" && ORIGAM_SHADOW_RUNGS.has(value);
 }
-const UTILITY_SHADOW_RUNGS = /* @__PURE__ */ new Set([
-  "none",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl"
-]);
 function isUtilityRung(value) {
   return typeof value === "string" && UTILITY_SHADOW_RUNGS.has(value);
 }

package/dist/src/composables/Commons/virtual.composable.cjs

@@ -30,6 +30,7 @@ function useVirtual(props, items) {
     resizeRef.value = containerRef.value;
   });
   const viewportHeight = (0, _vue.computed)(() => {
+    if (!_consts.IN_BROWSER) return (0, _utils.int)(props.height) || 0;
     return containerRef.value === document.documentElement ? display.height.value : contentRect.value?.height || (0, _utils.int)(props.height) || 0;
   });
   const hasInitialRender = (0, _vue.computed)(() => {

package/dist/src/composables/Commons/virtual.composable.js

@@ -21,6 +21,7 @@ export function useVirtual(props, items) {
     resizeRef.value = containerRef.value;
   });
   const viewportHeight = computed(() => {
+    if (!IN_BROWSER) return int(props.height) || 0;
     return containerRef.value === document.documentElement ? display.height.value : contentRect.value?.height || int(props.height) || 0;
   });
   const hasInitialRender = computed(() => {

package/dist/src/composables/CssSupport/cssSupport.composable.cjs

@@ -5,31 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports._resetCssSupportCache = _resetCssSupportCache;
 exports.useCssSupport = useCssSupport;
+exports.useCssSupportClient = useCssSupportClient;
 var _vue = require("vue");
+var _cssSupport = require("../../consts/CssSupport/css-support.const.cjs");
 const _cache = /* @__PURE__ */new Map();
 let _initialized = false;
-const FEATURE_QUERIES = {
-  grid: "display: grid",
-  subgrid: "grid-template-columns: subgrid",
-  flexGap: "gap: 1px",
-  containerQueries: "(container-type: inline-size)",
-  has: "selector(:has(*))",
-  aspectRatio: "aspect-ratio: 1",
-  colorMix: "color: color-mix(in srgb, red, blue)",
-  accentColor: "accent-color: red",
-  minMaxClamp: "width: min(10px, 20px)",
-  mathFunctions: "width: calc(min(10px, 20px) + max(5px, 8px))",
-  anchorPositioning: "anchor-name: --foo",
-  scrollDrivenAnims: "animation-timeline: scroll()",
-  viewTransitions: "view-transition-name: foo",
-  nestedSelectors: "selector(& > a)",
-  individualTransforms: "translate: 1px 1px",
-  logicalProperties: "margin-inline: 1px",
-  backdropFilter: "backdrop-filter: blur(1px)",
-  fieldSizing: "field-sizing: content",
-  textWrapBalance: "text-wrap: balance",
-  contentVisibility: "content-visibility: auto"
-};
 function rawSupports(query) {
   if (typeof window === "undefined" || typeof CSS === "undefined" || !CSS.supports) {
     return false;
@@ -47,15 +27,15 @@ function rawSupports(query) {
 const _flags = (0, _vue.ref)(emptyMap());
 function emptyMap() {
   const out = {};
-  for (const k of Object.keys(FEATURE_QUERIES)) {
+  for (const k of Object.keys(_cssSupport.FEATURE_QUERIES)) {
     out[k] = false;
   }
   return Object.freeze(out);
 }
 function detectAll() {
   const out = {};
-  for (const k of Object.keys(FEATURE_QUERIES)) {
-    out[k] = rawSupports(FEATURE_QUERIES[k]);
+  for (const k of Object.keys(_cssSupport.FEATURE_QUERIES)) {
+    out[k] = rawSupports(_cssSupport.FEATURE_QUERIES[k]);
   }
   return Object.freeze(out);
 }
@@ -97,4 +77,15 @@ function _resetCssSupportCache() {
   _cache.clear();
   _initialized = false;
   _flags.value = emptyMap();
+}
+function useCssSupportClient(feature, options = {}) {
+  const {
+    defaultValue = false
+  } = options;
+  const flag = (0, _vue.ref)(defaultValue);
+  (0, _vue.onMounted)(() => {
+    const query = _cssSupport.FEATURE_QUERIES[feature] ?? feature;
+    flag.value = rawSupports(query);
+  });
+  return flag;
 }

package/dist/src/composables/CssSupport/cssSupport.composable.d.ts

@@ -1,26 +1,5 @@
 import { type ComputedRef, type Ref } from 'vue';
-declare const FEATURE_QUERIES: {
-    readonly grid: "display: grid";
-    readonly subgrid: "grid-template-columns: subgrid";
-    readonly flexGap: "gap: 1px";
-    readonly containerQueries: "(container-type: inline-size)";
-    readonly has: "selector(:has(*))";
-    readonly aspectRatio: "aspect-ratio: 1";
-    readonly colorMix: "color: color-mix(in srgb, red, blue)";
-    readonly accentColor: "accent-color: red";
-    readonly minMaxClamp: "width: min(10px, 20px)";
-    readonly mathFunctions: "width: calc(min(10px, 20px) + max(5px, 8px))";
-    readonly anchorPositioning: "anchor-name: --foo";
-    readonly scrollDrivenAnims: "animation-timeline: scroll()";
-    readonly viewTransitions: "view-transition-name: foo";
-    readonly nestedSelectors: "selector(& > a)";
-    readonly individualTransforms: "translate: 1px 1px";
-    readonly logicalProperties: "margin-inline: 1px";
-    readonly backdropFilter: "backdrop-filter: blur(1px)";
-    readonly fieldSizing: "field-sizing: content";
-    readonly textWrapBalance: "text-wrap: balance";
-    readonly contentVisibility: "content-visibility: auto";
-};
+import { FEATURE_QUERIES } from '../../consts/CssSupport/css-support.const';
 export type TCssFeatureName = keyof typeof FEATURE_QUERIES;
 export type TCssSupportMap = Readonly<Record<TCssFeatureName, boolean>>;
 export interface IUseCssSupport {
@@ -67,4 +46,28 @@ export declare function useCssSupport(): IUseCssSupport;
  * _resetCssSupportCache
  ********************************************************/
 export declare function _resetCssSupportCache(): void;
-export {};
+export interface IUseCssSupportClientOptions {
+    /**
+     * Value returned during SSR and on the first client render (before
+     * `onMounted` fires). Pick the side of the branch that produces the
+     * smaller / safer markup — typically `false` (= JS fallback) so the
+     * server output stays universally compatible.
+     */
+    defaultValue?: boolean;
+}
+/*********************************************************
+ * useCssSupportClient
+ *
+ * @description
+ * Hydration-safe single-feature gate. Returns a `Ref<boolean>` that
+ * starts at `defaultValue` and flips to the real support result on
+ * `onMounted`. Use to gate **markup**, not styles — for style-only
+ * branches prefer `useCssSupport().css.value.X` directly.
+ *
+ * @example
+ *   const supportsContainer = useCssSupportClient('containerQueries')
+ *   // template:
+ *   //   <div v-if="supportsContainer">…CSS path…</div>
+ *   //   <div v-else>…JS fallback path…</div>
+ ********************************************************/
+export declare function useCssSupportClient(feature: TCssFeatureName | string, options?: IUseCssSupportClientOptions): Ref<boolean>;

package/dist/src/composables/CssSupport/cssSupport.composable.js

@@ -1,28 +1,7 @@
-import { computed, readonly, ref } from "vue";
+import { computed, onMounted, readonly, ref } from "vue";
+import { FEATURE_QUERIES } from "../../consts/CssSupport/css-support.const.js";
 const _cache = /* @__PURE__ */ new Map();
 let _initialized = false;
-const FEATURE_QUERIES = {
-  grid: "display: grid",
-  subgrid: "grid-template-columns: subgrid",
-  flexGap: "gap: 1px",
-  containerQueries: "(container-type: inline-size)",
-  has: "selector(:has(*))",
-  aspectRatio: "aspect-ratio: 1",
-  colorMix: "color: color-mix(in srgb, red, blue)",
-  accentColor: "accent-color: red",
-  minMaxClamp: "width: min(10px, 20px)",
-  mathFunctions: "width: calc(min(10px, 20px) + max(5px, 8px))",
-  anchorPositioning: "anchor-name: --foo",
-  scrollDrivenAnims: "animation-timeline: scroll()",
-  viewTransitions: "view-transition-name: foo",
-  nestedSelectors: "selector(& > a)",
-  individualTransforms: "translate: 1px 1px",
-  logicalProperties: "margin-inline: 1px",
-  backdropFilter: "backdrop-filter: blur(1px)",
-  fieldSizing: "field-sizing: content",
-  textWrapBalance: "text-wrap: balance",
-  contentVisibility: "content-visibility: auto"
-};
 function rawSupports(query) {
   if (typeof window === "undefined" || typeof CSS === "undefined" || !CSS.supports) {
     return false;
@@ -91,3 +70,12 @@ export function _resetCssSupportCache() {
   _initialized = false;
   _flags.value = emptyMap();
 }
+export function useCssSupportClient(feature, options = {}) {
+  const { defaultValue = false } = options;
+  const flag = ref(defaultValue);
+  onMounted(() => {
+    const query = FEATURE_QUERIES[feature] ?? feature;
+    flag.value = rawSupports(query);
+  });
+  return flag;
+}

package/dist/src/composables/DataTable/headers.composable.d.ts

@@ -48,6 +48,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
+            bold: () => string;
+            link: (url: string) => string;
             charAt: (pos: number) => string;
             charCodeAt: (index: number) => number;
             concat: (...strings: string[]) => string;
@@ -97,14 +99,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -161,6 +161,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
+            bold: () => string;
+            link: (url: string) => string;
             charAt: (pos: number) => string;
             charCodeAt: (index: number) => number;
             concat: (...strings: string[]) => string;
@@ -210,14 +212,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -275,6 +275,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
+            bold: () => string;
+            link: (url: string) => string;
             charAt: (pos: number) => string;
             charCodeAt: (index: number) => number;
             concat: (...strings: string[]) => string;
@@ -324,14 +326,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -388,6 +388,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
+            bold: () => string;
+            link: (url: string) => string;
             charAt: (pos: number) => string;
             charCodeAt: (index: number) => number;
             concat: (...strings: string[]) => string;
@@ -437,14 +439,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;

package/dist/src/composables/InlineEdit/inline-edit.composable.cjs

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInlineEdit = useInlineEdit;
+var _vue = require("vue");
+const toDraft = value => {
+  if (value === null || value === void 0) return "";
+  return String(value);
+};
+function useInlineEdit(modelValue, options = {}) {
+  const trim = options.trim ?? true;
+  const isEditing = (0, _vue.ref)(false);
+  const draft = (0, _vue.ref)("");
+  const error = (0, _vue.ref)(null);
+  const isPending = (0, _vue.ref)(false);
+  let validationToken = 0;
+  const normalisedDraft = (0, _vue.computed)(() => trim ? draft.value.trim() : draft.value);
+  const isDraftEmpty = (0, _vue.computed)(() => normalisedDraft.value.length === 0);
+  const edit = () => {
+    if (isEditing.value) return;
+    draft.value = toDraft((0, _vue.unref)(modelValue));
+    error.value = null;
+    isPending.value = false;
+    isEditing.value = true;
+  };
+  const setValue = next => {
+    draft.value = next;
+    if (error.value !== null) {
+      error.value = null;
+    }
+  };
+  const cancel = () => {
+    validationToken += 1;
+    isPending.value = false;
+    error.value = null;
+    isEditing.value = false;
+    draft.value = "";
+    options.onCancel?.();
+  };
+  const runValidator = async (value, validator) => {
+    if (!validator) return null;
+    const verdict = await validator(value);
+    if (verdict === true) return null;
+    return typeof verdict === "string" ? verdict : "Invalid value";
+  };
+  const confirm = async () => {
+    if (!isEditing.value) return false;
+    const token = ++validationToken;
+    const next = normalisedDraft.value;
+    error.value = null;
+    if (options.validate) {
+      isPending.value = true;
+      let verdict = null;
+      try {
+        verdict = await runValidator(next, options.validate);
+      } catch (err) {
+        verdict = err instanceof Error ? err.message : String(err);
+      }
+      if (token !== validationToken) return false;
+      isPending.value = false;
+      if (verdict !== null) {
+        error.value = verdict;
+        options.onError?.(verdict);
+        return false;
+      }
+    }
+    isEditing.value = false;
+    options.onConfirm?.(next);
+    draft.value = "";
+    await (0, _vue.nextTick)();
+    return true;
+  };
+  return {
+    isEditing,
+    draft,
+    error,
+    isPending,
+    normalisedDraft,
+    isDraftEmpty,
+    edit,
+    confirm,
+    cancel,
+    setValue
+  };
+}

package/dist/src/composables/InlineEdit/inline-edit.composable.d.ts

@@ -0,0 +1,36 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { IUseInlineEditOptions } from '../../interfaces';
+/**
+ * Headless edit-in-place state machine.
+ *
+ * The composable owns the four states — IDLE / EDITING / VALIDATING /
+ * ERROR — and the four transitions: `edit`, `confirm`, `cancel`,
+ * `setValue`. It is **input-agnostic** (no DOM references) and only
+ * reads the v-model value through the passed-in `Ref`. Components
+ * plug their `<input>` value/oninput on the returned `draft` ref and
+ * forward keyboard events to `confirm` / `cancel`.
+ *
+ * @example
+ * ```ts
+ * const model = ref('hello')
+ * const {
+ *     isEditing, draft, error, isPending,
+ *     edit, confirm, cancel, setValue
+ * } = useInlineEdit(model, {
+ *     validate: (v) => v.length >= 3 || 'Min 3 chars',
+ *     onConfirm: (v) => (model.value = v),
+ * })
+ * ```
+ */
+export declare function useInlineEdit(modelValue: Ref<string | number> | ComputedRef<string | number>, options?: IUseInlineEditOptions): {
+    isEditing: Ref<boolean, boolean>;
+    draft: Ref<string, string>;
+    error: Ref<string | null, string | null>;
+    isPending: Ref<boolean, boolean>;
+    normalisedDraft: ComputedRef<string>;
+    isDraftEmpty: ComputedRef<boolean>;
+    edit: () => void;
+    confirm: () => Promise<boolean>;
+    cancel: () => void;
+    setValue: (next: string) => void;
+};