origam 2.2.1 → 2.5.0

package/dist/src/composables/Clipboard/clipboard.composable.cjs

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClipboard = useClipboard;
+var _vue = require("vue");
+var _clipboard = require("../../consts/Clipboard/clipboard.const.cjs");
+async function writeToClipboard(text) {
+  if (typeof navigator === "undefined" || typeof document === "undefined") {
+    return false;
+  }
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    textarea.style.pointerEvents = "none";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+function useClipboard(options = {}) {
+  const feedbackDuration = options.feedbackDuration ?? _clipboard.CLIPBOARD_DEFAULT_FEEDBACK_DURATION_MS;
+  const copied = (0, _vue.ref)(false);
+  const error = (0, _vue.ref)(null);
+  const isSupported = (0, _vue.ref)(typeof navigator !== "undefined" && Boolean(navigator.clipboard?.writeText));
+  let resetTimer = null;
+  const clearTimer = () => {
+    if (resetTimer !== null) {
+      clearTimeout(resetTimer);
+      resetTimer = null;
+    }
+  };
+  const copy = async text => {
+    clearTimer();
+    error.value = null;
+    try {
+      const ok = await writeToClipboard(text);
+      if (!ok) {
+        error.value = new Error("Clipboard write failed: the platform did not accept the request.");
+        copied.value = false;
+        return false;
+      }
+      copied.value = true;
+      resetTimer = setTimeout(() => {
+        copied.value = false;
+        resetTimer = null;
+      }, feedbackDuration);
+      return true;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+      copied.value = false;
+      return false;
+    }
+  };
+  if ((0, _vue.getCurrentScope)()) {
+    (0, _vue.onScopeDispose)(clearTimer);
+  }
+  return {
+    copy,
+    copied,
+    error,
+    isSupported
+  };
+}

package/dist/src/composables/Clipboard/clipboard.composable.d.ts

@@ -0,0 +1,21 @@
+import { type Ref } from 'vue';
+import type { IUseClipboardOptions } from '../../interfaces';
+/**
+ * Headless clipboard composable. Wraps the modern Clipboard API + a
+ * legacy execCommand fallback and exposes a self-resetting `copied`
+ * flag so consumers don't have to wire the timeout themselves.
+ *
+ * @example
+ * ```ts
+ * const { copy, copied, error, isSupported } = useClipboard({ feedbackDuration: 2000 })
+ *
+ * await copy('hello world')
+ * // copied.value === true for 2000ms, then auto-resets to false
+ * ```
+ */
+export declare function useClipboard(options?: IUseClipboardOptions): {
+    copy: (text: string) => Promise<boolean>;
+    copied: Ref<boolean, boolean>;
+    error: Ref<Error | null, Error | null>;
+    isSupported: Ref<boolean, boolean>;
+};

package/dist/src/composables/Clipboard/clipboard.composable.js

@@ -0,0 +1,79 @@
+import {
+  getCurrentScope,
+  onScopeDispose,
+  ref
+} from "vue";
+import { CLIPBOARD_DEFAULT_FEEDBACK_DURATION_MS as DEFAULT_FEEDBACK_DURATION_MS } from "../../consts/Clipboard/clipboard.const.js";
+async function writeToClipboard(text) {
+  if (typeof navigator === "undefined" || typeof document === "undefined") {
+    return false;
+  }
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+    }
+  }
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    textarea.style.pointerEvents = "none";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+export function useClipboard(options = {}) {
+  const feedbackDuration = options.feedbackDuration ?? DEFAULT_FEEDBACK_DURATION_MS;
+  const copied = ref(false);
+  const error = ref(null);
+  const isSupported = ref(
+    typeof navigator !== "undefined" && Boolean(navigator.clipboard?.writeText)
+  );
+  let resetTimer = null;
+  const clearTimer = () => {
+    if (resetTimer !== null) {
+      clearTimeout(resetTimer);
+      resetTimer = null;
+    }
+  };
+  const copy = async (text) => {
+    clearTimer();
+    error.value = null;
+    try {
+      const ok = await writeToClipboard(text);
+      if (!ok) {
+        error.value = new Error("Clipboard write failed: the platform did not accept the request.");
+        copied.value = false;
+        return false;
+      }
+      copied.value = true;
+      resetTimer = setTimeout(() => {
+        copied.value = false;
+        resetTimer = null;
+      }, feedbackDuration);
+      return true;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+      copied.value = false;
+      return false;
+    }
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(clearTimer);
+  }
+  return {
+    copy,
+    copied,
+    error,
+    isSupported
+  };
+}

package/dist/src/composables/Code/code.composable.cjs

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetCodeHighlighterForTesting = resetCodeHighlighterForTesting;
+exports.useCode = useCode;
+var _code = require("../../consts/Code/code.const.cjs");
+var _enums = require("../../enums/index.cjs");
+let _highlighterPromise = null;
+let _highlighterReady = false;
+const _cache = /* @__PURE__ */new Map();
+let _unsupportedLangWarned = /* @__PURE__ */new Set();
+function makeCacheKey(code, lang) {
+  return `${lang}::${code}`;
+}
+function lruGet(key) {
+  const hit = _cache.get(key);
+  if (hit === void 0) return void 0;
+  _cache.delete(key);
+  _cache.set(key, hit);
+  return hit;
+}
+function lruSet(key, value) {
+  if (_cache.size >= _code.CODE_CACHE_MAX_ENTRIES) {
+    const oldest = _cache.keys().next().value;
+    if (oldest !== void 0) _cache.delete(oldest);
+  }
+  _cache.set(key, value);
+}
+async function loadHighlighter() {
+  if (_highlighterPromise) return _highlighterPromise;
+  _highlighterPromise = (async () => {
+    const shiki = await Promise.resolve().then(() => require("shiki"));
+    const highlighter = await shiki.createHighlighter({
+      themes: [_code.CODE_LIGHT_THEME, _code.CODE_DARK_THEME],
+      langs: [..._code.SUPPORTED_LANGS]
+    });
+    _highlighterReady = true;
+    return highlighter;
+  })();
+  return _highlighterPromise;
+}
+function resolveLang(lang) {
+  if (_code.SUPPORTED_LANGS.includes(lang)) return lang;
+  if (!_unsupportedLangWarned.has(lang)) {
+    _unsupportedLangWarned.add(lang);
+    console.warn(`[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${_enums.CODE_LANG.PLAINTEXT}". Supported: ${_code.SUPPORTED_LANGS.join(", ")}.`);
+  }
+  return _enums.CODE_LANG.PLAINTEXT;
+}
+function useCode() {
+  async function highlight(code, lang) {
+    const resolvedLang = resolveLang(lang);
+    const key = makeCacheKey(code, resolvedLang);
+    const cached = lruGet(key);
+    if (cached !== void 0) return cached;
+    const highlighter = await loadHighlighter();
+    const opts = {
+      lang: resolvedLang,
+      themes: {
+        light: _code.CODE_LIGHT_THEME,
+        dark: _code.CODE_DARK_THEME
+      },
+      defaultColor: false
+    };
+    let html;
+    try {
+      html = highlighter.codeToHtml(code, opts);
+    } catch (err) {
+      console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
+      html = highlighter.codeToHtml(code, {
+        ...opts,
+        lang: _enums.CODE_LANG.PLAINTEXT
+      });
+    }
+    lruSet(key, html);
+    return html;
+  }
+  async function prime() {
+    await loadHighlighter();
+  }
+  function isReady() {
+    return _highlighterReady;
+  }
+  function resetCacheForTesting() {
+    _cache.clear();
+    _unsupportedLangWarned = /* @__PURE__ */new Set();
+  }
+  return {
+    highlight,
+    prime,
+    isReady,
+    resetCacheForTesting
+  };
+}
+function resetCodeHighlighterForTesting() {
+  _highlighterPromise = null;
+  _highlighterReady = false;
+  _cache.clear();
+  _unsupportedLangWarned = /* @__PURE__ */new Set();
+}

package/dist/src/composables/Code/code.composable.d.ts

@@ -0,0 +1,10 @@
+import type { IUseCodeReturn } from '../../interfaces';
+/**
+ * Public hook — see `IUseCodeReturn` for the surface contract.
+ */
+export declare function useCode(): IUseCodeReturn;
+/**
+ * Test-only: drop the singleton so a fresh dynamic import runs next call.
+ * Production code should never need this.
+ */
+export declare function resetCodeHighlighterForTesting(): void;

package/dist/src/composables/Code/code.composable.js

@@ -0,0 +1,86 @@
+import { CODE_CACHE_MAX_ENTRIES, CODE_DARK_THEME as DARK_THEME, CODE_LIGHT_THEME as LIGHT_THEME, SUPPORTED_LANGS } from "../../consts/Code/code.const.js";
+import { CODE_LANG } from "../../enums/index.js";
+let _highlighterPromise = null;
+let _highlighterReady = false;
+const _cache = /* @__PURE__ */ new Map();
+let _unsupportedLangWarned = /* @__PURE__ */ new Set();
+function makeCacheKey(code, lang) {
+  return `${lang}::${code}`;
+}
+function lruGet(key) {
+  const hit = _cache.get(key);
+  if (hit === void 0) return void 0;
+  _cache.delete(key);
+  _cache.set(key, hit);
+  return hit;
+}
+function lruSet(key, value) {
+  if (_cache.size >= CODE_CACHE_MAX_ENTRIES) {
+    const oldest = _cache.keys().next().value;
+    if (oldest !== void 0) _cache.delete(oldest);
+  }
+  _cache.set(key, value);
+}
+async function loadHighlighter() {
+  if (_highlighterPromise) return _highlighterPromise;
+  _highlighterPromise = (async () => {
+    const shiki = await import("shiki");
+    const highlighter = await shiki.createHighlighter({
+      themes: [LIGHT_THEME, DARK_THEME],
+      langs: [...SUPPORTED_LANGS]
+    });
+    _highlighterReady = true;
+    return highlighter;
+  })();
+  return _highlighterPromise;
+}
+function resolveLang(lang) {
+  if (SUPPORTED_LANGS.includes(lang)) return lang;
+  if (!_unsupportedLangWarned.has(lang)) {
+    _unsupportedLangWarned.add(lang);
+    console.warn(
+      `[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${CODE_LANG.PLAINTEXT}". Supported: ${SUPPORTED_LANGS.join(", ")}.`
+    );
+  }
+  return CODE_LANG.PLAINTEXT;
+}
+export function useCode() {
+  async function highlight(code, lang) {
+    const resolvedLang = resolveLang(lang);
+    const key = makeCacheKey(code, resolvedLang);
+    const cached = lruGet(key);
+    if (cached !== void 0) return cached;
+    const highlighter = await loadHighlighter();
+    const opts = {
+      lang: resolvedLang,
+      themes: { light: LIGHT_THEME, dark: DARK_THEME },
+      defaultColor: false
+    };
+    let html;
+    try {
+      html = highlighter.codeToHtml(code, opts);
+    } catch (err) {
+      console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
+      html = highlighter.codeToHtml(code, { ...opts, lang: CODE_LANG.PLAINTEXT });
+    }
+    lruSet(key, html);
+    return html;
+  }
+  async function prime() {
+    await loadHighlighter();
+  }
+  function isReady() {
+    return _highlighterReady;
+  }
+  function resetCacheForTesting() {
+    _cache.clear();
+    _unsupportedLangWarned = /* @__PURE__ */ new Set();
+  }
+  return { highlight, prime, isReady, resetCacheForTesting };
+}
+export function resetCodeHighlighterForTesting() {
+  _highlighterPromise = null;
+  _highlighterReady = false;
+  _cache.clear();
+  _unsupportedLangWarned = /* @__PURE__ */ new Set();
+}

package/dist/src/composables/CommandPalette/command.composable.cjs

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetCommandRegistryForTesting = resetCommandRegistryForTesting;
+exports.useCommand = useCommand;
+var _vue = require("vue");
+var _utils = require("../../utils/index.cjs");
+const REGISTRY = {
+  items: (0, _vue.ref)([]),
+  isOpen: (0, _vue.ref)(false)
+};
+const upsert = cmd => {
+  const idx = REGISTRY.items.value.findIndex(item => item.id === cmd.id);
+  if (idx === -1) {
+    REGISTRY.items.value.push(cmd);
+  } else {
+    REGISTRY.items.value.splice(idx, 1, cmd);
+  }
+};
+const removeById = id => {
+  const idx = REGISTRY.items.value.findIndex(item => item.id === id);
+  if (idx !== -1) REGISTRY.items.value.splice(idx, 1);
+};
+function useCommand() {
+  const register = cmd => {
+    upsert(cmd);
+    const dispose = () => removeById(cmd.id);
+    (0, _utils.tryOnScopeDispose)(dispose);
+    return dispose;
+  };
+  const unregister = id => removeById(id);
+  const commands = (0, _vue.computed)(() => REGISTRY.items.value);
+  const open = () => {
+    REGISTRY.isOpen.value = true;
+  };
+  const close = () => {
+    REGISTRY.isOpen.value = false;
+  };
+  return {
+    register,
+    unregister,
+    commands,
+    open,
+    close,
+    isOpen: REGISTRY.isOpen
+  };
+}
+function resetCommandRegistryForTesting() {
+  REGISTRY.items.value = [];
+  REGISTRY.isOpen.value = false;
+}

package/dist/src/composables/CommandPalette/command.composable.d.ts

@@ -0,0 +1,37 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { ICommand } from '../../interfaces';
+/*********************************************************
+ * useCommand
+ ********************************************************/
+export interface IUseCommandReturn {
+    /**
+     * Register a command. Returns an `unregister()` closure so callers
+     * can drop the entry imperatively. When called from inside a Vue
+     * effect scope, the entry is auto-unregistered on scope dispose
+     * (component unmount, route leave, …) via `tryOnScopeDispose`.
+     */
+    register: (cmd: ICommand) => () => void;
+    /** Drop the entry with the matching `id`. No-op if unknown. */
+    unregister: (id: string) => void;
+    /**
+     * Reactive read-only view of every registered command, deduplicated
+     * by id.
+     */
+    commands: ComputedRef<ReadonlyArray<ICommand>>;
+    /** Open the global palette singleton. */
+    open: () => void;
+    /** Close the global palette singleton. */
+    close: () => void;
+    /** Reactive open/close state of the global palette singleton. */
+    isOpen: Ref<boolean>;
+}
+export declare function useCommand(): IUseCommandReturn;
+/*********************************************************
+ * Test helper
+ *
+ * @description
+ * Vitest needs to wipe the singleton between specs so the registry
+ * does not leak between cases. Not part of the public surface — do
+ * not import in product code.
+ ********************************************************/
+export declare function resetCommandRegistryForTesting(): void;

package/dist/src/composables/CommandPalette/command.composable.js

@@ -0,0 +1,46 @@
+import { computed, ref } from "vue";
+import { tryOnScopeDispose } from "../../utils/index.js";
+const REGISTRY = {
+  items: ref([]),
+  isOpen: ref(false)
+};
+const upsert = (cmd) => {
+  const idx = REGISTRY.items.value.findIndex((item) => item.id === cmd.id);
+  if (idx === -1) {
+    REGISTRY.items.value.push(cmd);
+  } else {
+    REGISTRY.items.value.splice(idx, 1, cmd);
+  }
+};
+const removeById = (id) => {
+  const idx = REGISTRY.items.value.findIndex((item) => item.id === id);
+  if (idx !== -1) REGISTRY.items.value.splice(idx, 1);
+};
+export function useCommand() {
+  const register = (cmd) => {
+    upsert(cmd);
+    const dispose = () => removeById(cmd.id);
+    tryOnScopeDispose(dispose);
+    return dispose;
+  };
+  const unregister = (id) => removeById(id);
+  const commands = computed(() => REGISTRY.items.value);
+  const open = () => {
+    REGISTRY.isOpen.value = true;
+  };
+  const close = () => {
+    REGISTRY.isOpen.value = false;
+  };
+  return {
+    register,
+    unregister,
+    commands,
+    open,
+    close,
+    isOpen: REGISTRY.isOpen
+  };
+}
+export function resetCommandRegistryForTesting() {
+  REGISTRY.items.value = [];
+  REGISTRY.isOpen.value = false;
+}

package/dist/src/composables/Commons/audio.composable.d.ts

@@ -1,8 +1,8 @@
-import type { IAudioProps } from '../../interfaces';
+import type { IUseAudioProps } from '../../interfaces';
 /*********************************************************
  * useAudio
  ********************************************************/
-export declare function useAudio(props: IAudioProps): {
+export declare function useAudio(props: IUseAudioProps): {
     audioData: import("vue").ShallowRef<Uint8Array<ArrayBufferLike> | null, Uint8Array<ArrayBufferLike> | null>;
     analyser: import("vue").Ref<{
         fftSize: number;

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

@@ -10,13 +10,14 @@ exports.useColorEffect = useColorEffect;
 exports.useTextColor = useTextColor;
 var _vue = require("vue");
 var _colorUtil = require("../../utils/Commons/color.util.ts");
+var _gradientUtil = require("../../utils/Commons/gradient.util.ts");
 function useColor(colors) {
   const colorClasses = (0, _vue.computed)(() => {
     const classes = [];
-    if (colors.value.background && (0, _colorUtil.isUtilityIntent)(colors.value.background)) {
+    if (colors.value.background && !(0, _gradientUtil.isGradient)(colors.value.background) && (0, _colorUtil.isUtilityIntent)(colors.value.background)) {
       classes.push(`origam--bg-${colors.value.background}`);
     }
-    if (colors.value.text && (0, _colorUtil.isUtilityIntent)(colors.value.text)) {
+    if (colors.value.text && !(0, _gradientUtil.isGradient)(colors.value.text) && (0, _colorUtil.isUtilityIntent)(colors.value.text)) {
       classes.push(`origam--color-${colors.value.text}`);
     }
     return classes;
@@ -25,31 +26,46 @@ function useColor(colors) {
     const styles = [];
     let bgIntentFg = null;
     let bgDecl = null;
+    let bgIsGradient = false;
     if (colors.value.background) {
-      if ((0, _colorUtil.isIntent)(colors.value.background)) {
+      if ((0, _gradientUtil.isGradient)(colors.value.background)) {
+        const grad = (0, _gradientUtil.resolveGradient)(colors.value.background);
+        if (grad) {
+          bgDecl = `background-image: ${grad}`;
+          bgIsGradient = true;
+        }
+      } else if ((0, _colorUtil.isIntent)(colors.value.background)) {
         const m = (0, _colorUtil.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 ((0, _colorUtil.isCssColor)(colors.value.background)) {
+      } else if (typeof colors.value.background === "string" && (0, _colorUtil.isCssColor)(colors.value.background)) {
         bgDecl = `background-color: ${colors.value.background}`;
       }
     }
     let fgDecl = null;
     if (colors.value.text) {
-      if ((0, _colorUtil.isIntent)(colors.value.text)) {
+      if ((0, _gradientUtil.isGradient)(colors.value.text)) {
+        const grad = (0, _gradientUtil.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 ((0, _colorUtil.isIntent)(colors.value.text)) {
         if (bgIntentFg && (0, _colorUtil.isIntent)(colors.value.background) && colors.value.text === colors.value.background) {
           fgDecl = `color: ${bgIntentFg}`;
         } else {
           fgDecl = `color: ${(0, _colorUtil.tokenForegroundForIntent)(colors.value.text)}`;
         }
-      } else if ((0, _colorUtil.isCssColor)(colors.value.text)) {
+      } else if (typeof colors.value.text === "string" && (0, _colorUtil.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" && (0, _colorUtil.isParsableColor)(colors.value.background)) {
+    } else if (bgDecl && !bgIsGradient && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && (0, _colorUtil.isParsableColor)(colors.value.background)) {
       const parsed = (0, _colorUtil.parseColor)(colors.value.background);
       if (parsed.a == null || parsed.a === 1) {
         fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
@@ -137,7 +153,15 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
-    if (bgColor.value && (0, _colorUtil.isIntent)(bgColor.value)) {
+    let bgIsGradient = false;
+    let clipText = false;
+    if (bgColor.value && (0, _gradientUtil.isGradient)(bgColor.value)) {
+      const grad = (0, _gradientUtil.resolveGradient)(bgColor.value);
+      if (grad) {
+        bgDecl = `background-image: ${grad}`;
+        bgIsGradient = true;
+      }
+    } else if (bgColor.value && (0, _colorUtil.isIntent)(bgColor.value)) {
       const m = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
       bgIntentFg = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, "default").color;
@@ -147,7 +171,14 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
       (0, _colorUtil.warnLegacyColor)("bgColor", bgColor.value);
       bgDecl = `background-color: ${(0, _colorUtil.rawBgExprWithState)(bgColor.value, bgRole)}`;
     }
-    if (color.value && (0, _colorUtil.isIntent)(color.value)) {
+    if (color.value && (0, _gradientUtil.isGradient)(color.value)) {
+      const grad = (0, _gradientUtil.resolveGradient)(color.value);
+      if (grad) {
+        fgDecl = "color: transparent";
+        bgDecl = `background-image: ${grad}`;
+        clipText = true;
+      }
+    } else if (color.value && (0, _colorUtil.isIntent)(color.value)) {
       if (bgIntentFg && bgColor.value && (0, _colorUtil.isIntent)(bgColor.value) && color.value === bgColor.value) {
         fgDecl = `color: ${bgIntentFg}`;
       } else {
@@ -156,9 +187,9 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     } else if (color.value && typeof color.value === "string" && (0, _colorUtil.isCssColor)(color.value)) {
       if (color.value !== "transparent") (0, _colorUtil.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" && (0, _colorUtil.isParsableColor)(bgColor.value)) {
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _colorUtil.isParsableColor)(bgColor.value)) {
       const parsed = (0, _colorUtil.parseColor)(bgColor.value);
       if (parsed.a == null || parsed.a === 1) {
         fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
@@ -167,6 +198,10 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     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 {