origam 0.1.0

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

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeKey = normalizeKey;
+exports.splitKeyCombination = splitKeyCombination;
+exports.splitKeySequence = splitKeySequence;
+var _hotkeyConst = require("@foxy/consts/Commons/hotkey.const.ts");
+var _utils = require("@foxy/utils");
+function splitKeyCombination(combination, isInternal = false) {
+  if (!combination) {
+    if (!isInternal) (0, _utils.consoleWarn)("Invalid hotkey combination: empty string provided");
+    return [];
+  }
+  const startsWithPlusOrUnderscore = combination.startsWith("+") || combination.startsWith("_");
+  const hasInvalidLeadingSeparator =
+  // Starts with a single '+' or '_' followed by a non-separator character (e.g. '+a', '_a')
+  startsWithPlusOrUnderscore && !(combination.startsWith("++") || combination.startsWith("__"));
+  const hasInvalidStructure =
+  // Invalid leading separator patterns
+  combination.length > 1 && hasInvalidLeadingSeparator ||
+  // Disallow literal + or _ keys (they require shift)
+  combination.includes("++") || combination.includes("__") || combination === "+" || combination === "_" ||
+  // Ends with a separator that is not part of a doubled literal
+  combination.length > 1 && (combination.endsWith("+") || combination.endsWith("_")) && combination.at(-2) !== combination.at(-1) ||
+  // Stand-alone doubled separators (dangling)
+  combination === "++" || combination === "--" || combination === "__";
+  if (hasInvalidStructure) {
+    if (!isInternal) (0, _utils.consoleWarn)(`Invalid hotkey combination: "${combination}" has invalid structure`);
+    return [];
+  }
+  const keys = [];
+  let buffer = "";
+  const flushBuffer = () => {
+    if (buffer) {
+      keys.push(normalizeKey(buffer));
+      buffer = "";
+    }
+  };
+  for (let i = 0; i < combination.length; i++) {
+    const char = combination[i];
+    const nextChar = combination[i + 1];
+    if (char === "+" || char === "_" || char === "-") {
+      if (char === nextChar) {
+        flushBuffer();
+        keys.push(char);
+        i++;
+      } else if (char === "+" || char === "_") {
+        flushBuffer();
+      } else {
+        buffer += char;
+      }
+    } else {
+      buffer += char;
+    }
+  }
+  flushBuffer();
+  const hasInvalidMinus = keys.some(key => key.length > 1 && key.includes("-") && key !== "--");
+  if (hasInvalidMinus) {
+    if (!isInternal) (0, _utils.consoleWarn)(`Invalid hotkey combination: "${combination}" has invalid structure`);
+    return [];
+  }
+  if (keys.length === 0 && combination) {
+    return [normalizeKey(combination)];
+  }
+  return keys;
+}
+function splitKeySequence(str) {
+  if (!str) {
+    (0, _utils.consoleWarn)("Invalid hotkey sequence: empty string provided");
+    return [];
+  }
+  const hasInvalidStart = str.startsWith("-") && !["---", "--+"].includes(str);
+  const hasInvalidEnd = str.endsWith("-") && !str.endsWith("+-") && !str.endsWith("_-") && str !== "-" && str !== "---";
+  if (hasInvalidStart || hasInvalidEnd) {
+    (0, _utils.consoleWarn)(`Invalid hotkey sequence: "${str}" contains invalid combinations`);
+    return [];
+  }
+  const result = [];
+  let buffer = "";
+  let i = 0;
+  while (i < str.length) {
+    const char = str[i];
+    if (char === "-") {
+      const prevChar = str[i - 1];
+      const prevPrevChar = i > 1 ? str[i - 2] : void 0;
+      const precededBySinglePlusOrUnderscore = (prevChar === "+" || prevChar === "_") && prevPrevChar !== "+";
+      if (precededBySinglePlusOrUnderscore) {
+        buffer += char;
+        i++;
+      } else {
+        if (buffer) {
+          result.push(buffer);
+          buffer = "";
+        } else {
+          result.push("-");
+        }
+        i++;
+      }
+    } else {
+      buffer += char;
+      i++;
+    }
+  }
+  if (buffer) {
+    result.push(buffer);
+  }
+  const collapsed = [];
+  let minusCount = 0;
+  for (const part of result) {
+    if (part === "-") {
+      if (minusCount % 2 === 0) collapsed.push("-");
+      minusCount++;
+    } else {
+      minusCount = 0;
+      collapsed.push(part);
+    }
+  }
+  const areAllValid = collapsed.every(s => splitKeyCombination(s, true).length > 0);
+  if (!areAllValid) {
+    (0, _utils.consoleWarn)(`Invalid hotkey sequence: "${str}" contains invalid combinations`);
+    return [];
+  }
+  return collapsed;
+}
+function normalizeKey(key) {
+  const lowerKey = key.toLowerCase();
+  return _hotkeyConst.KEYBOARD_ALIASES[lowerKey] || lowerKey;
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Splits a single combination string into individual key parts.
+ *
+ * A combination is a set of keys that must be pressed simultaneously.
+ * e.g. `ctrl+k`, `shift--`
+ */
+export declare function splitKeyCombination(combination: string, isInternal?: boolean): string[];
+/**
+ * Splits a hotkey string into its constituent combination groups.
+ *
+ * A sequence is a series of combinations that must be pressed in order.
+ * e.g. `a-b`, `ctrl+k-p`
+ */
+export declare function splitKeySequence(str: string): string[];
+/**
+ * Normalizes a key string to its canonical form using the alias map.
+ *
+ * @param key - The key string to normalize
+ * @returns The canonical key name in lowercase
+ */
+export declare function normalizeKey(key: string): string;

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

@@ -0,0 +1,121 @@
+import { KEYBOARD_ALIASES } from "@foxy/consts/Commons/hotkey.const.ts";
+import { consoleWarn } from "@foxy/utils";
+export function splitKeyCombination(combination, isInternal = false) {
+  if (!combination) {
+    if (!isInternal) consoleWarn("Invalid hotkey combination: empty string provided");
+    return [];
+  }
+  const startsWithPlusOrUnderscore = combination.startsWith("+") || combination.startsWith("_");
+  const hasInvalidLeadingSeparator = (
+    // Starts with a single '+' or '_' followed by a non-separator character (e.g. '+a', '_a')
+    startsWithPlusOrUnderscore && !(combination.startsWith("++") || combination.startsWith("__"))
+  );
+  const hasInvalidStructure = (
+    // Invalid leading separator patterns
+    combination.length > 1 && hasInvalidLeadingSeparator || // Disallow literal + or _ keys (they require shift)
+    combination.includes("++") || combination.includes("__") || combination === "+" || combination === "_" || // Ends with a separator that is not part of a doubled literal
+    combination.length > 1 && (combination.endsWith("+") || combination.endsWith("_")) && combination.at(-2) !== combination.at(-1) || // Stand-alone doubled separators (dangling)
+    combination === "++" || combination === "--" || combination === "__"
+  );
+  if (hasInvalidStructure) {
+    if (!isInternal) consoleWarn(`Invalid hotkey combination: "${combination}" has invalid structure`);
+    return [];
+  }
+  const keys = [];
+  let buffer = "";
+  const flushBuffer = () => {
+    if (buffer) {
+      keys.push(normalizeKey(buffer));
+      buffer = "";
+    }
+  };
+  for (let i = 0; i < combination.length; i++) {
+    const char = combination[i];
+    const nextChar = combination[i + 1];
+    if (char === "+" || char === "_" || char === "-") {
+      if (char === nextChar) {
+        flushBuffer();
+        keys.push(char);
+        i++;
+      } else if (char === "+" || char === "_") {
+        flushBuffer();
+      } else {
+        buffer += char;
+      }
+    } else {
+      buffer += char;
+    }
+  }
+  flushBuffer();
+  const hasInvalidMinus = keys.some((key) => key.length > 1 && key.includes("-") && key !== "--");
+  if (hasInvalidMinus) {
+    if (!isInternal) consoleWarn(`Invalid hotkey combination: "${combination}" has invalid structure`);
+    return [];
+  }
+  if (keys.length === 0 && combination) {
+    return [normalizeKey(combination)];
+  }
+  return keys;
+}
+export function splitKeySequence(str) {
+  if (!str) {
+    consoleWarn("Invalid hotkey sequence: empty string provided");
+    return [];
+  }
+  const hasInvalidStart = str.startsWith("-") && !["---", "--+"].includes(str);
+  const hasInvalidEnd = str.endsWith("-") && !str.endsWith("+-") && !str.endsWith("_-") && str !== "-" && str !== "---";
+  if (hasInvalidStart || hasInvalidEnd) {
+    consoleWarn(`Invalid hotkey sequence: "${str}" contains invalid combinations`);
+    return [];
+  }
+  const result = [];
+  let buffer = "";
+  let i = 0;
+  while (i < str.length) {
+    const char = str[i];
+    if (char === "-") {
+      const prevChar = str[i - 1];
+      const prevPrevChar = i > 1 ? str[i - 2] : void 0;
+      const precededBySinglePlusOrUnderscore = (prevChar === "+" || prevChar === "_") && prevPrevChar !== "+";
+      if (precededBySinglePlusOrUnderscore) {
+        buffer += char;
+        i++;
+      } else {
+        if (buffer) {
+          result.push(buffer);
+          buffer = "";
+        } else {
+          result.push("-");
+        }
+        i++;
+      }
+    } else {
+      buffer += char;
+      i++;
+    }
+  }
+  if (buffer) {
+    result.push(buffer);
+  }
+  const collapsed = [];
+  let minusCount = 0;
+  for (const part of result) {
+    if (part === "-") {
+      if (minusCount % 2 === 0) collapsed.push("-");
+      minusCount++;
+    } else {
+      minusCount = 0;
+      collapsed.push(part);
+    }
+  }
+  const areAllValid = collapsed.every((s) => splitKeyCombination(s, true).length > 0);
+  if (!areAllValid) {
+    consoleWarn(`Invalid hotkey sequence: "${str}" contains invalid combinations`);
+    return [];
+  }
+  return collapsed;
+}
+export function normalizeKey(key) {
+  const lowerKey = key.toLowerCase();
+  return KEYBOARD_ALIASES[lowerKey] || lowerKey;
+}

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hoverHide = hoverHide;
+exports.hoverRemoveListeners = hoverRemoveListeners;
+exports.hoverShow = hoverShow;
+exports.hoverStop = hoverStop;
+exports.isHoverEnabled = isHoverEnabled;
+exports.updateHover = updateHover;
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+function updateHover(el, binding, wasEnabled, name) {
+  const {
+    value,
+    modifiers
+  } = binding;
+  const enabled = isHoverEnabled(value);
+  const options = {
+    class: `${name}--hover`
+  };
+  if ((0, _utils.isObject)(value) && value.class) {
+    options.class = value.class;
+  }
+  el._hover = el._hover ?? {};
+  el._hover.enabled = enabled;
+  el._hover.class = options.class;
+  if (!enabled) {
+    _consts.HOVER.hide(el, options);
+  }
+  if (enabled && !wasEnabled) {
+    if (modifiers.stop) {
+      el.addEventListener("touchstart", hoverStop, {
+        passive: true
+      });
+      el.addEventListener("mouseenter", hoverStop);
+      return;
+    }
+    el.addEventListener("touchstart", hoverShow, {
+      passive: true
+    });
+    el.addEventListener("touchend", hoverHide, {
+      passive: true
+    });
+    el.addEventListener("touchcancel", hoverHide);
+    el.addEventListener("mouseenter", hoverShow);
+    el.addEventListener("mouseleave", hoverHide);
+  } else if (!enabled && wasEnabled) {
+    hoverRemoveListeners(el);
+  }
+}
+function isHoverEnabled(value) {
+  return typeof value === "undefined" || !!value;
+}
+function hoverShow(e) {
+  const value = {
+    class: ""
+  };
+  const element = e.currentTarget;
+  if (!element?._hover || element._hover.touched || e[_consts.FOXY_HOVER_STOP_KEY]) return;
+  e[_consts.FOXY_HOVER_STOP_KEY] = true;
+  if ((0, _utils.isTouchEvent)(e)) {
+    element._hover.touched = true;
+    element._hover.isTouch = true;
+  } else {
+    if (element._hover.isTouch) return;
+  }
+  if (element._hover.class) {
+    value.class = element._hover.class;
+  }
+  _consts.HOVER.show(e, element, value);
+}
+function hoverStop(e) {
+  e[_consts.FOXY_HOVER_STOP_KEY] = true;
+}
+function hoverHide(e) {
+  const value = {
+    class: ""
+  };
+  const element = e.currentTarget;
+  if (!element?._hover) return;
+  if (element._hover.class) {
+    value.class = element._hover.class;
+  }
+  _consts.HOVER.hide(element, value);
+}
+function hoverRemoveListeners(el) {
+  el.removeEventListener("mouseenter", hoverShow);
+  el.removeEventListener("mouseleave", hoverHide);
+  el.removeEventListener("touchstart", hoverShow);
+  el.removeEventListener("touchend", hoverHide);
+  el.removeEventListener("touchcancel", hoverHide);
+}

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

@@ -0,0 +1,8 @@
+import type { IHoverDirectiveBinding, IHoverHtmlElement } from '@foxy/interfaces';
+import type { THoverEvent } from '@foxy/types';
+export declare function updateHover(el: IHoverHtmlElement, binding: IHoverDirectiveBinding, wasEnabled: boolean, name: string): void;
+export declare function isHoverEnabled(value: any): value is true;
+export declare function hoverShow(e: THoverEvent): void;
+export declare function hoverStop(e: THoverEvent): void;
+export declare function hoverHide(e: Event): void;
+export declare function hoverRemoveListeners(el: IHoverHtmlElement): void;

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

@@ -0,0 +1,68 @@
+import { FOXY_HOVER_STOP_KEY, HOVER } from "@foxy/consts";
+import { isObject, isTouchEvent } from "@foxy/utils";
+export function updateHover(el, binding, wasEnabled, name) {
+  const { value, modifiers } = binding;
+  const enabled = isHoverEnabled(value);
+  const options = { class: `${name}--hover` };
+  if (isObject(value) && value.class) {
+    options.class = value.class;
+  }
+  el._hover = el._hover ?? {};
+  el._hover.enabled = enabled;
+  el._hover.class = options.class;
+  if (!enabled) {
+    HOVER.hide(el, options);
+  }
+  if (enabled && !wasEnabled) {
+    if (modifiers.stop) {
+      el.addEventListener("touchstart", hoverStop, { passive: true });
+      el.addEventListener("mouseenter", hoverStop);
+      return;
+    }
+    el.addEventListener("touchstart", hoverShow, { passive: true });
+    el.addEventListener("touchend", hoverHide, { passive: true });
+    el.addEventListener("touchcancel", hoverHide);
+    el.addEventListener("mouseenter", hoverShow);
+    el.addEventListener("mouseleave", hoverHide);
+  } else if (!enabled && wasEnabled) {
+    hoverRemoveListeners(el);
+  }
+}
+export function isHoverEnabled(value) {
+  return typeof value === "undefined" || !!value;
+}
+export function hoverShow(e) {
+  const value = { class: "" };
+  const element = e.currentTarget;
+  if (!element?._hover || element._hover.touched || e[FOXY_HOVER_STOP_KEY]) return;
+  e[FOXY_HOVER_STOP_KEY] = true;
+  if (isTouchEvent(e)) {
+    element._hover.touched = true;
+    element._hover.isTouch = true;
+  } else {
+    if (element._hover.isTouch) return;
+  }
+  if (element._hover.class) {
+    value.class = element._hover.class;
+  }
+  HOVER.show(e, element, value);
+}
+export function hoverStop(e) {
+  e[FOXY_HOVER_STOP_KEY] = true;
+}
+export function hoverHide(e) {
+  const value = { class: "" };
+  const element = e.currentTarget;
+  if (!element?._hover) return;
+  if (element._hover.class) {
+    value.class = element._hover.class;
+  }
+  HOVER.hide(element, value);
+}
+export function hoverRemoveListeners(el) {
+  el.removeEventListener("mouseenter", hoverShow);
+  el.removeEventListener("mouseleave", hoverHide);
+  el.removeEventListener("touchstart", hoverShow);
+  el.removeEventListener("touchend", hoverHide);
+  el.removeEventListener("touchcancel", hoverHide);
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unmountIntersect = unmountIntersect;
+function unmountIntersect(el, binding) {
+  const observe = el._observe?.[binding.instance.$.uid];
+  if (!observe) return;
+  observe.observer.unobserve(el);
+  delete el._observe[binding.instance.$.uid];
+}

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

@@ -0,0 +1,2 @@
+import type { IIntersectDirectiveBinding, IIntersectHtmlElement } from '@foxy/interfaces';
+export declare function unmountIntersect(el: IIntersectHtmlElement, binding: IIntersectDirectiveBinding): void;

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

@@ -0,0 +1,6 @@
+export function unmountIntersect(el, binding) {
+  const observe = el._observe?.[binding.instance.$.uid];
+  if (!observe) return;
+  observe.observer.unobserve(el);
+  delete el._observe[binding.instance.$.uid];
+}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateLayers = generateLayers;
+var _utils = require("@foxy/utils");
+function generateLayers(layout, positions, layoutSizes, activeItems) {
+  let previousLayer = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  };
+  const layers = [{
+    id: "",
+    layer: {
+      ...previousLayer
+    }
+  }];
+  for (const id of layout) {
+    const position = positions.get(id);
+    const amount = layoutSizes.get(id);
+    const active = activeItems.get(id);
+    if (!position || !amount || !active) continue;
+    const layer = {
+      ...previousLayer,
+      [position.value]: (0, _utils.int)(previousLayer[position.value]) + (active.value ? (0, _utils.int)(amount.value) : 0)
+    };
+    layers.push({
+      id,
+      layer
+    });
+    previousLayer = layer;
+  }
+  return layers;
+}

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

@@ -0,0 +1,7 @@
+import type { ILayer } from '@foxy/interfaces';
+import type { TDirectionBoth } from '@foxy/types';
+import type { Ref } from 'vue';
+export declare function generateLayers(layout: Array<string>, positions: Map<string, Ref<TDirectionBoth>>, layoutSizes: Map<string, Ref<number | string>>, activeItems: Map<string, Ref<boolean>>): Array<{
+    id: string;
+    layer: ILayer;
+}>;

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

@@ -0,0 +1,21 @@
+import { int } from "@foxy/utils";
+export function generateLayers(layout, positions, layoutSizes, activeItems) {
+  let previousLayer = { top: 0, left: 0, right: 0, bottom: 0 };
+  const layers = [{ id: "", layer: { ...previousLayer } }];
+  for (const id of layout) {
+    const position = positions.get(id);
+    const amount = layoutSizes.get(id);
+    const active = activeItems.get(id);
+    if (!position || !amount || !active) continue;
+    const layer = {
+      ...previousLayer,
+      [position.value]: int(previousLayer[position.value]) + (active.value ? int(amount.value) : 0)
+    };
+    layers.push({
+      id,
+      layer
+    });
+    previousLayer = layer;
+  }
+  return layers;
+}

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createProvideFunction = createProvideFunction;
+exports.createVueI18nAdapter = createVueI18nAdapter;
+exports.useProvided = useProvided;
+var _composables = require("@foxy/composables");
+var _vue = require("vue");
+function createVueI18nAdapter({
+  i18n,
+  useI18n: useI18n2
+}) {
+  const current = i18n.global.locale;
+  const fallback = i18n.global.fallbackLocale;
+  const messages = i18n.global.messages;
+  return {
+    name: "vue-i18n",
+    current,
+    fallback,
+    messages,
+    t: (key, ...params) => i18n.global.t(key, params),
+    n: i18n.global.n,
+    provide: createProvideFunction({
+      current,
+      fallback,
+      messages,
+      useI18n: useI18n2
+    })
+  };
+}
+function createProvideFunction(data) {
+  return props => {
+    const current = useProvided(props, "locale", data.current);
+    const fallback = useProvided(props, "fallback", data.fallback);
+    const messages = useProvided(props, "messages", data.messages);
+    const i18n = data.useI18n({
+      locale: current.value,
+      fallbackLocale: fallback.value,
+      messages: messages.value,
+      useScope: "local",
+      legacy: false,
+      inheritLocale: false
+    });
+    (0, _vue.watch)(current, v => {
+      i18n.locale.value = v;
+    });
+    return {
+      name: "vue-i18n",
+      current,
+      fallback,
+      messages,
+      t: (key, ...params) => i18n.t(key, params),
+      n: i18n.n,
+      provide: createProvideFunction({
+        current,
+        fallback,
+        messages,
+        useI18n: data.useI18n
+      })
+    };
+  };
+}
+function useProvided(props, prop, provided) {
+  const internal = (0, _composables.useVModel)(props, prop);
+  internal.value = props[prop] ?? provided.value;
+  (0, _vue.watch)(provided, v => {
+    if (props[prop] == null) {
+      internal.value = v;
+    }
+  });
+  return internal;
+}

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

@@ -0,0 +1,11 @@
+import type { ILocaleI18n, ILocaleInstance, ILocaleMessages, ILocaleProps } from "@foxy/interfaces";
+import { ComputedRef, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+export declare function createVueI18nAdapter({ i18n, useI18n }: ILocaleI18n): ILocaleInstance;
+export declare function createProvideFunction(data: {
+    current: Ref<string>;
+    fallback: Ref<string>;
+    messages: ComputedRef<ILocaleMessages>;
+    useI18n: typeof useI18n;
+}): (props: ILocaleProps) => ILocaleInstance;
+export declare function useProvided<T>(props: any, prop: string, provided: Ref<T>): Ref<T>;

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

@@ -0,0 +1,53 @@
+import { useVModel } from "@foxy/composables";
+import { watch } from "vue";
+export function createVueI18nAdapter({ i18n, useI18n: useI18n2 }) {
+  const current = i18n.global.locale;
+  const fallback = i18n.global.fallbackLocale;
+  const messages = i18n.global.messages;
+  return {
+    name: "vue-i18n",
+    current,
+    fallback,
+    messages,
+    t: (key, ...params) => i18n.global.t(key, params),
+    n: i18n.global.n,
+    provide: createProvideFunction({ current, fallback, messages, useI18n: useI18n2 })
+  };
+}
+export function createProvideFunction(data) {
+  return (props) => {
+    const current = useProvided(props, "locale", data.current);
+    const fallback = useProvided(props, "fallback", data.fallback);
+    const messages = useProvided(props, "messages", data.messages);
+    const i18n = data.useI18n({
+      locale: current.value,
+      fallbackLocale: fallback.value,
+      messages: messages.value,
+      useScope: "local",
+      legacy: false,
+      inheritLocale: false
+    });
+    watch(current, (v) => {
+      i18n.locale.value = v;
+    });
+    return {
+      name: "vue-i18n",
+      current,
+      fallback,
+      messages,
+      t: (key, ...params) => i18n.t(key, params),
+      n: i18n.n,
+      provide: createProvideFunction({ current, fallback, messages, useI18n: data.useI18n })
+    };
+  };
+}
+export function useProvided(props, prop, provided) {
+  const internal = useVModel(props, prop);
+  internal.value = props[prop] ?? provided.value;
+  watch(provided, (v) => {
+    if (props[prop] == null) {
+      internal.value = v;
+    }
+  });
+  return internal;
+}