@alegendstale/holly-components 0.2.9 → 0.2.11

package/dist/components/tool-tip/Tooltip2.js

@@ -0,0 +1,103 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+const enterEvents = ['pointerenter', 'focus'];
+const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
+let SimpleTooltip = class SimpleTooltip extends LitElement {
+    static lazy(target, callback) {
+        const createTooltip = () => {
+            const tooltip = document.createElement('simple-tooltip');
+            callback(tooltip);
+            target.parentNode.insertBefore(tooltip, target.nextSibling);
+            tooltip.show();
+            enterEvents.forEach((eventName) => target.removeEventListener(eventName, createTooltip));
+        };
+        enterEvents.forEach((eventName) => target.addEventListener(eventName, createTooltip));
+    }
+    get target() {
+        return this._target;
+    }
+    set target(target) {
+        if (this.target) {
+            // Remove events from current target
+            enterEvents.forEach(name => this.target.removeEventListener(name, this.show));
+            leaveEvents.forEach(name => this.target.removeEventListener(name, this.hide));
+        }
+        if (target) {
+            // Add events to new target
+            enterEvents.forEach(name => target.addEventListener(name, this.show));
+            leaveEvents.forEach(name => target.addEventListener(name, this.hide));
+        }
+        this._target = target;
+    }
+    constructor() {
+        super();
+        this.offset = 4;
+        this.showing = false;
+        // Tooltip target
+        this._target = null;
+        this.addEventListener('transitionend', this.finishHide);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.hide();
+        // Set target to previous element as backup
+        this.target ??= this.previousElementSibling;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    show() {
+        this.style.cssText = '';
+        // Position tooltip near target
+        const { x, y, height } = this.target.getBoundingClientRect();
+        this.style.left = `${x}px`;
+        this.style.top = `${y + height + this.offset}px`;
+        this.showing = true;
+    }
+    hide() {
+        this.showing = false;
+    }
+    finishHide() {
+        if (!this.showing) {
+            this.style.display = 'none';
+        }
+    }
+};
+SimpleTooltip.styles = css `
+		:host {
+			display: inline-block;
+			position: fixed;
+			padding: 4px;
+			border: 1px solid darkgray;
+			border-radius: 4px;
+			background: #ccc;
+			pointer-events: none;
+
+			//Animation
+			opacity: 0;
+			transform: scale(0.75);
+			transition: opacity, transform;
+			transition-duration: .33s;
+		}
+
+		:host([showing]) {
+			opacity: 1;
+			transform: scale(1);
+		}
+	`;
+__decorate([
+    property({ type: Number })
+], SimpleTooltip.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SimpleTooltip.prototype, "showing", void 0);
+SimpleTooltip = __decorate([
+    customElement('simple-tooltip')
+], SimpleTooltip);
+export { SimpleTooltip };

package/dist/components/tool-tip/index.js

@@ -1 +1 @@
-import "./tool-tip.js";
+import './tool-tip';

package/dist/components/tool-tip/tool-tip.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import { client } from "../../utils/types";
 export type TriggerTypes = 'hover' | 'click' | 'manual';
 export declare const styles: import("lit").CSSResult;
 export declare class ToolTip extends LitElement {

package/dist/components/tool-tip/tool-tip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-tip.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,YAAY,GACtB,OAAO,GACP,OAAO,GACP,QAAQ,CAAA;AAEV,eAAO,MAAM,MAAM,yBAgDlB,CAAA;AAED,qBACa,OAAQ,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAAU;IAGvB,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAGjC,OAAO,UAAS;IAGhB,IAAI,SAAM;IAGV,OAAO,EAAE,YAAY,CAAY;IAEjC,MAAM;IAcN;;OAEG;IACH,aAAa,QAAS;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,UAAU,OAAO;;;MAsB7D;IAEK,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO;IAIpD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM;CAInC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"tool-tip.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,MAAM,YAAY,GACtB,OAAO,GACP,OAAO,GACP,QAAQ,CAAA;AAEV,eAAO,MAAM,MAAM,yBAgDlB,CAAA;AAED,qBACa,OAAQ,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAAU;IAGvB,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAGjC,OAAO,UAAS;IAGhB,IAAI,SAAM;IAGV,OAAO,EAAE,YAAY,CAAY;IAEjC,MAAM;IAcN;;OAEG;IACH,aAAa,QAAS;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,UAAU,OAAO;;;MAsB7D;IAEK,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO;IAIpD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM;CAInC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/components/tool-tip/tool-tip.js

@@ -1,106 +1,129 @@
-import { css as h, LitElement as y, html as f } from "lit";
-import { query as d, property as a, customElement as c } from "lit/decorators.js";
-var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (i, t, o, l) => {
-  for (var e = l > 1 ? void 0 : l ? x(t, o) : t, s = i.length - 1, r; s >= 0; s--)
-    (r = i[s]) && (e = (l ? r(t, o, e) : r(e)) || e);
-  return l && e && g(t, o, e), e;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const m = h`
-	:host {
-		display: block;
-		position: relative;
-		--tooltip-x: 0;
-		--tooltip-y: 0;
-	}
-
-	:host([display]:hover) {
-		& > p {
-			display: flex;
-		}
-	}
-
-	p {
-		display: none;
-		align-items: center;
-		justify-content: center;
-
-		position: absolute;
-		background: #000000C0;
-		width: max-content;
-		min-width: 100px;
-		height: 40px;
-		text-align: center;
-		vertical-align: middle;
-		font-size: 18px;
-		font-weight: var(--font-medium);
-		color: #FAFAFA;
-		padding: 0;
-		margin: 0;
-		transform: translateX(-50%);
-
-		left: var(--tooltip-x);
-		top: var(--tooltip-y);
-
-		/* Obsidian Styling */
-
-		box-sizing: border-box;
-		animation: pop-down 200ms forwards ease-in-out;
-		box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
-		border-radius: var(--radius-s);
-		line-height: var(--line-height-tight);
-		z-index: var(--layer-tooltip);
-		pointer-events: none;
-		word-break: normal;
-		overflow-wrap: anywhere;
-	}
+import { css, html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+export const styles = css `
+	:host {
+		display: block;
+		position: relative;
+		--tooltip-x: 0;
+		--tooltip-y: 0;
+	}
+
+	:host([display]:hover) {
+		& > p {
+			display: flex;
+		}
+	}
+
+	p {
+		display: none;
+		align-items: center;
+		justify-content: center;
+
+		position: absolute;
+		background: #000000C0;
+		width: max-content;
+		min-width: 100px;
+		height: 40px;
+		text-align: center;
+		vertical-align: middle;
+		font-size: 18px;
+		font-weight: var(--font-medium);
+		color: #FAFAFA;
+		padding: 0;
+		margin: 0;
+		transform: translateX(-50%);
+
+		left: var(--tooltip-x);
+		top: var(--tooltip-y);
+
+		/* Obsidian Styling */
+
+		box-sizing: border-box;
+		animation: pop-down 200ms forwards ease-in-out;
+		box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
+		border-radius: var(--radius-s);
+		line-height: var(--line-height-tight);
+		z-index: var(--layer-tooltip);
+		pointer-events: none;
+		word-break: normal;
+		overflow-wrap: anywhere;
+	}
 `;
-let p = class extends y {
-  constructor() {
-    super(...arguments), this.display = !1, this.text = "", this.trigger = "manual", this.clampPosition = (i, t) => {
-      if (!this.contentEl || !t) return { x: 0, y: 0 };
-      let o = this.contentEl.offsetWidth, l = this.contentEl.offsetHeight, e = i.x - t.left > t.width / 2 ? i.x - t.left - 56 : i.x - t.left + 64, s = o / 2;
-      e < 0 + s ? e = 0 + s : e + o > t.width + s && (e = t.width - o + s);
-      let r = i.y - t.top - l / 4;
-      return r < 0 ? r = 0 : r + l > t.height && (r = t.height - l), { x: e, y: r };
-    };
-  }
-  render() {
-    return f`
-			<slot
-				@pointerover=${() => this.display = this.trigger === "hover" ? !0 : this.display}
-				@pointerout=${() => this.display = this.trigger === "hover" ? !1 : this.display}
-				@click=${() => this.trigger === "click" ? this.display = !this.display : null}
-			>
-			</slot>
-			<p id='content'>
-				${this.text}
-			</p>
+let ToolTip = class ToolTip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.display = false;
+        this.text = '';
+        this.trigger = 'manual';
+        /**
+         * Clamps the tooltip position to within the bounds
+         */
+        this.clampPosition = (pos, bounds) => {
+            if (!this.contentEl || !bounds)
+                return { x: 0, y: 0 };
+            // Get tooltip bounds
+            let tooltipWidth = this.contentEl.offsetWidth;
+            let tooltipHeight = this.contentEl.offsetHeight;
+            // Set tooltip position left or right side of mouse based on whether cursor is halfway
+            let leftPosition = pos.x - bounds.left > bounds.width / 2 ? pos.x - bounds.left - 56 : pos.x - bounds.left + 64;
+            let halfTooltipWidth = tooltipWidth / 2;
+            // Clamp to left edge
+            if (leftPosition < 0 + halfTooltipWidth)
+                leftPosition = 0 + halfTooltipWidth;
+            else if (leftPosition + tooltipWidth > bounds.width + halfTooltipWidth)
+                leftPosition = bounds.width - tooltipWidth + halfTooltipWidth;
+            // Get cursor position & align tooltip centered to cursor (1/4 tooltip height)
+            let topPosition = pos.y - bounds.top - tooltipHeight / 4;
+            // Clamp to top edge
+            if (topPosition < 0)
+                topPosition = 0;
+            // Clamp to bottom edge
+            else if (topPosition + tooltipHeight > bounds.height)
+                topPosition = bounds.height - tooltipHeight;
+            return { x: leftPosition, y: topPosition };
+        };
+    }
+    render() {
+        return html `
+			<slot
+				@pointerover=${() => this.display = this.trigger === 'hover' ? true : this.display}
+				@pointerout=${() => this.display = this.trigger === 'hover' ? false : this.display}
+				@click=${() => this.trigger === 'click' ? this.display = !this.display : null}
+			>
+			</slot>
+			<p id='content'>
+				${this.text}
+			</p>
 		`;
-  }
-  setClampedPosition({ x: i, y: t }, o) {
-    this.setPosition(this.clampPosition({ x: i, y: t }, o));
-  }
-  setPosition({ x: i, y: t }) {
-    this.style.setProperty("--tooltip-x", `${i}px`), this.style.setProperty("--tooltip-y", `${t}px`);
-  }
-};
-p.styles = m;
-n([
-  d("#content")
-], p.prototype, "contentEl", 2);
-n([
-  a({ type: Boolean, reflect: !0 })
-], p.prototype, "display", 2);
-n([
-  a({ type: String })
-], p.prototype, "text", 2);
-n([
-  a({ type: String })
-], p.prototype, "trigger", 2);
-p = n([
-  c("tool-tip")
-], p);
-export {
-  p as ToolTip,
-  m as styles
+    }
+    setClampedPosition({ x, y }, bounds) {
+        this.setPosition(this.clampPosition({ x, y }, bounds));
+    }
+    setPosition({ x, y }) {
+        this.style.setProperty('--tooltip-x', `${x}px`);
+        this.style.setProperty('--tooltip-y', `${y}px`);
+    }
 };
+ToolTip.styles = styles;
+__decorate([
+    query('#content')
+], ToolTip.prototype, "contentEl", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ToolTip.prototype, "display", void 0);
+__decorate([
+    property({ type: String })
+], ToolTip.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], ToolTip.prototype, "trigger", void 0);
+ToolTip = __decorate([
+    customElement('tool-tip')
+], ToolTip);
+export { ToolTip };

package/dist/components/tool-tip/tool-tip.stories.js

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Tool Tip',
+    tags: ['autodocs'],
+    component: 'tool-tip',
+};
+export default meta;
+const Template = {
+    render: ({ content, trigger }) => {
+        return html `
+			<tool-tip content=${content} trigger=${trigger}>
+				<button>${trigger} me</button>
+			</tool-tip>
+		`;
+    },
+};
+export const Hover = {
+    ...Template,
+    args: {
+        content: 'hovered tooltip',
+        trigger: 'hover'
+    }
+};
+export const Click = {
+    ...Template,
+    args: {
+        content: 'clicked tooltip',
+        trigger: 'click'
+    }
+};

package/dist/index.js

@@ -1,14 +1,6 @@
-import * as o from "./components/tool-tip/index.js";
-import * as r from "./components/bottom-sheet/index.js";
-import * as e from "./components/carousel-scroller/index.js";
-import * as t from "./components/color-palette/index.js";
-import * as a from "./components/canvas/index.js";
-import * as s from "./components/absolute-container/index.js";
-export {
-  s as AbsoluteContainer,
-  r as BottomSheet,
-  a as Canvas,
-  e as CarouselScroller,
-  t as ColorPalette,
-  o as ToolTip
-};
+export * as ToolTip from './components/tool-tip';
+export * as BottomSheet from './components/bottom-sheet';
+export * as CarouselScroller from './components/carousel-scroller';
+export * as ColorPalette from './components/color-palette';
+export * as Canvas from './components/canvas';
+export * as AbsoluteContainer from './components/absolute-container';

package/dist/utils/EventEmitter.js

@@ -1,24 +1,24 @@
-class r {
-  constructor() {
-    this.eventListeners = {};
-  }
-  on(e, s) {
-    const t = this.eventListeners[e] ?? /* @__PURE__ */ new Set();
-    t.add(s), this.eventListeners[e] = t;
-  }
-  off(e, s) {
-    const t = this.eventListeners[e] ?? /* @__PURE__ */ new Set();
-    t.delete(s), this.eventListeners[e] = t;
-  }
-  emit(e, ...s) {
-    const t = this.eventListeners[e] ?? /* @__PURE__ */ new Set();
-    for (const n of t)
-      n(...s);
-  }
-  clear() {
-    this.eventListeners = {};
-  }
+export class EventEmitter {
+    constructor() {
+        this.eventListeners = {};
+    }
+    on(eventName, listener) {
+        const listeners = this.eventListeners[eventName] ?? new Set();
+        listeners.add(listener);
+        this.eventListeners[eventName] = listeners;
+    }
+    off(eventName, listener) {
+        const listeners = this.eventListeners[eventName] ?? new Set();
+        listeners.delete(listener);
+        this.eventListeners[eventName] = listeners;
+    }
+    emit(eventName, ...args) {
+        const listeners = this.eventListeners[eventName] ?? new Set();
+        for (const listener of listeners) {
+            listener(...args);
+        }
+    }
+    clear() {
+        this.eventListeners = {};
+    }
 }
-export {
-  r as EventEmitter
-};

package/dist/utils/basicUtils.js

@@ -1,32 +1,149 @@
-import r from "colorsea";
-import i from "../node_modules/colorsea/colors/x11.js";
-import { CopyFormat as n } from "../components/color-palette/color-palette-utils.js";
-function f(t) {
-  var o;
-  return t.includes("-") ? t.substring(t.lastIndexOf("/") + 1).split("-").map((e) => "#" + e) : ((o = t.substring(t.lastIndexOf("/") + 1).match(/.{1,6}/g)) == null ? void 0 : o.map((e) => "#" + e)) || [];
-}
-function l(t) {
-  const o = r(t);
-  return o.rgb()[0] * 0.299 + o.rgb()[1] * 0.587 + o.rgb()[2] * 0.114 > 186 ? "#000000" : "#ffffff";
-}
-async function u(t, o) {
-  let e = t;
-  o === n.Value && !t.includes("`") && (e.includes("#") ? e = e.split("#")[1] : e.includes("(") && (e = e.split("(")[1].split(")")[0])), await navigator.clipboard.writeText(e);
-}
-function p(t) {
-  return Math.max(10, 16 - t);
-}
-function d(t) {
-  try {
-    return r.useNames(i), r(t, void 0, { thowParseError: !0 }), !0;
-  } catch {
-    return !1;
-  }
-}
-export {
-  u as copyToClipboard,
-  p as getAdjustedFontSize,
-  l as getForegroundColor,
-  d as isColorValid,
-  f as parseUrl
-};
+import colorsea from "colorsea";
+import x11 from 'colorsea/colors/x11';
+import { CopyFormat, defaultSettings } from "../components/color-palette/color-palette-utils";
+/**
+ * Get settings without their default values
+ */
+export function getModifiedSettings(settings) {
+    let newSettings = {};
+    for (const [key, value] of Object.entries(settings)) {
+        const defaultVal = defaultSettings[key];
+        // Check if setting is a key in defaultSettings
+        if (key in defaultSettings) {
+            // Check if setting is equal to default & keep setting if not equal
+            if (value !== defaultVal)
+                newSettings = { ...newSettings, [key]: value };
+        }
+        // Add all other settings not defined in defaults
+        else {
+            // Break if empty array
+            if (value instanceof Array && value.length === 0)
+                break;
+            // Add setting
+            else
+                newSettings = { ...newSettings, [key]: value };
+        }
+    }
+    // Return null if newSettings is empty
+    return Object.keys(newSettings).length !== 0 ? newSettings : undefined;
+}
+/**
+ * Checks if all settings are set to their default values
+ */
+export function areSettingsDefault(settings) {
+    for (const [key, value] of Object.entries(settings)) {
+        // Ignore settings that don't have a default counterpart
+        if (!(key in defaultSettings))
+            return true;
+        // Check if any settings are not default
+        if (value !== defaultSettings[key]) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Gets the modified settings as a string
+ */
+export function getModifiedSettingsAsString(settings) {
+    const moddedSettings = getModifiedSettings(settings);
+    if (moddedSettings)
+        return JSON.stringify(moddedSettings);
+}
+export function convertStringSettings(settings) {
+    return JSON.parse(`{
+        "height": ${settings.height}, 
+        "direction": "${settings.direction}", 
+        "gradient": ${settings.gradient}, 
+        "preventHover": ${settings.preventHover}, 
+        "override": ${settings.override}, 
+        "aliases": ${JSON.stringify(settings.aliases)}
+        }`);
+}
+/**
+ * Parse input url & extract colors
+ * @param url URL from color input
+ * @returns Array of colors
+ */
+export function parseUrl(url) {
+    // Check if url colors contain dashes in-between
+    if (url.includes('-')) {
+        // Replace dashes with hexes (colorhunt)
+        return url.substring(url.lastIndexOf('/') + 1).split('-').map(i => '#' + i);
+    }
+    // Add hex between URL path colors (coolors)
+    else
+        return url.substring(url.lastIndexOf('/') + 1).match(/.{1,6}/g)?.map(i => '#' + i) || [];
+}
+/**
+ * Converts ColorPalette plugin settings to Palette settings
+ */
+export function pluginToPaletteSettings(pluginSettings) {
+    return {
+        height: pluginSettings.height,
+        width: pluginSettings.width,
+        direction: pluginSettings.direction,
+        gradient: pluginSettings.gradient,
+        preventHover: pluginSettings.preventHover,
+        override: pluginSettings.override,
+        aliases: []
+    };
+}
+/**
+ * Creates a codeblock palette
+ * @param input Either palette input or colors & settings object
+ * @returns palette block string
+ */
+export function createPaletteBlock(input) {
+    if (typeof input === 'string')
+        return `\`\`\`palette\n${input}\n\`\`\`\n`;
+    else
+        return input.settings ? `\`\`\`palette\n${toNString(input.colors)}\n${JSON.stringify(input.settings)}\n\`\`\`\n` : `\`\`\`palette\n${toNString(input.colors)}\n\`\`\`\n`;
+}
+/**
+ * Gets the appropriate foreground contrast color
+ */
+export function getForegroundColor(color) {
+    const csColor = colorsea(color);
+    return (csColor.rgb()[0] * 0.299 + csColor.rgb()[1] * 0.587 + csColor.rgb()[2] * 0.114) > 186 ? '#000000' : '#ffffff';
+}
+/**
+ * Converts string array to newline separated string
+ */
+export function toNString(array) {
+    let result = '';
+    for (const string of array) {
+        result += string + '\n';
+    }
+    return result.trim();
+}
+export async function copyToClipboard(text, copyFormat) {
+    let copiedText = text;
+    // Copy only color value if CopyFormat is set to value & when not a codeblock
+    if (copyFormat === CopyFormat.Value && !text.includes('`')) {
+        if (copiedText.includes('#'))
+            copiedText = copiedText.split('#')[1];
+        else if (copiedText.includes('('))
+            copiedText = copiedText.split('(')[1].split(')')[0];
+    }
+    //  new Notice(`Copied ${copiedText}`);
+    await navigator.clipboard.writeText(copiedText);
+}
+/**
+* Calculate font size based on number of colors
+*/
+export function getAdjustedFontSize(colorsCount) {
+    const minFontSize = 10;
+    const baseFontSize = 16;
+    return Math.max(minFontSize, baseFontSize - colorsCount);
+}
+export function isColorValid(color) {
+    try {
+        colorsea.useNames(x11);
+        colorsea(color, undefined, { thowParseError: true });
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+}