@cognivo/components 0.8.0

package/dist/components/cg-theme/cg-theme.js

@@ -0,0 +1,91 @@
+import { css as g, LitElement as l, html as m } from "lit";
+import { property as p, customElement as h } from "lit/decorators.js";
+import { h as u, r as d } from "../../chunks/premium.css-9I4kHrsl.js";
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (e, n, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? y(n, s) : n, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (t = (i ? a(n, s, t) : a(t)) || t);
+  return i && t && x(n, s, t), t;
+};
+let o = class extends l {
+  constructor() {
+    super(...arguments), this.density = "cozy", this.motion = "full", this.contrast = "normal", this.tokens = null;
+  }
+  _tokensInlineStyle() {
+    return this.tokens ? Object.entries(this.tokens).map(([n, s]) => `${n}: ${s};`).join(" ") : "";
+  }
+  render() {
+    const e = this._tokensInlineStyle();
+    return m`
+      <div class="scope" style=${e || ""}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+o.styles = [u, d, g`
+    :host { display: contents; }
+    .scope { display: contents; }
+
+    /* ── Density bands (token override layers) ──
+       Each density rescales only spacing and component sizing. Type and
+       color stay constant so density doesn't smuggle in surprise contrast. */
+    :host([density="compact"]) .scope {
+      --cg-spacing-2: 1px; --cg-spacing-4: 2px; --cg-spacing-6: 4px;
+      --cg-spacing-8: 6px; --cg-spacing-12: 8px; --cg-spacing-16: 12px;
+      --cg-spacing-24: 16px; --cg-spacing-32: 20px; --cg-spacing-48: 32px;
+      --cg-component-input-height-md: 36px;
+      --cg-component-input-height-lg: 44px;
+      --cg-component-button-height-sm: 28px;
+      --cg-component-button-height-md: 36px;
+      --cg-component-button-height-lg: 44px;
+    }
+    :host([density="comfortable"]) .scope {
+      --cg-spacing-2: 3px; --cg-spacing-4: 5px; --cg-spacing-6: 7px;
+      --cg-spacing-8: 10px; --cg-spacing-12: 14px; --cg-spacing-16: 20px;
+      --cg-spacing-24: 28px; --cg-spacing-32: 36px; --cg-spacing-48: 56px;
+      --cg-component-input-height-md: 52px;
+      --cg-component-input-height-lg: 60px;
+      --cg-component-button-height-sm: 40px;
+      --cg-component-button-height-md: 56px;
+      --cg-component-button-height-lg: 64px;
+    }
+    /* density="cozy" is the default — no overrides */
+
+    /* ── Motion bands ── */
+    :host([motion="reduced"]) .scope {
+      --cg-transition-duration-fast: 80ms;
+      --cg-transition-duration-default: 120ms;
+      --cg-transition-duration-slow: 180ms;
+    }
+    :host([motion="none"]) .scope,
+    :host([motion="none"]) .scope * {
+      animation-duration: 0.001ms !important;
+      transition-duration: 0.001ms !important;
+    }
+
+    /* ── Contrast bands ── */
+    :host([contrast="high"]) .scope {
+      --cg-color-surface-cards-border: var(--cg-color-surface-base-text);
+      --cg-color-surface-cards-border-strong: var(--cg-color-surface-base-text);
+      --cg-color-input-border-default: var(--cg-color-surface-base-text);
+    }
+  `];
+c([
+  p({ reflect: !0 })
+], o.prototype, "density", 2);
+c([
+  p({ reflect: !0 })
+], o.prototype, "motion", 2);
+c([
+  p({ reflect: !0 })
+], o.prototype, "contrast", 2);
+c([
+  p({ attribute: !1 })
+], o.prototype, "tokens", 2);
+o = c([
+  h("cg-theme")
+], o);
+export {
+  o as CgTheme
+};
+//# sourceMappingURL=cg-theme.js.map

package/dist/components/cg-theme/cg-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-theme.js","sources":["../../../src/components/cg-theme/cg-theme.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-theme\n * Scoping element that applies design-token overrides to its descendants.\n * Wraps any subtree to retheme just that part of the page — without\n * touching the global `:root` declarations.\n *\n * Three runtime preference axes (density, motion, contrast) are exposed\n * as first-class attributes that map to predefined token override sets,\n * so consumers can flip them at runtime without writing CSS:\n *\n *   - density: compact | cozy | comfortable\n *   - motion:  full | reduced | none\n *   - contrast: normal | high\n *\n * Plus a `tokens` prop accepting an arbitrary `Record<string, string>` of\n * `--cg-*` overrides for ad-hoc theming (org/workspace/user layers).\n *\n * Nest cg-theme to layer overrides — inner wins. The classic three-tier\n * inheritance pattern (org -> workspace -> user) is just three nested\n * cg-theme elements.\n *\n * @example Brand override\n * ```html\n * <cg-theme .tokens=${{\n *   '--cg-color-action-primary-background-default': '#ff00aa',\n *   '--cg-color-action-primary-text-default': '#ffffff',\n * }}>\n *   <cg-button variant=\"primary\">On-brand button</cg-button>\n * </cg-theme>\n * ```\n *\n * @example Density + motion preference\n * ```html\n * <cg-theme density=\"compact\" motion=\"reduced\">\n *   <cg-table .columns=${cols} .rows=${rows}></cg-table>\n * </cg-theme>\n * ```\n *\n * @example Layered inheritance\n * ```html\n * <cg-theme .tokens=${orgPalette}>            <!-- org defaults -->\n *   <cg-theme .tokens=${workspacePalette}>    <!-- workspace overrides -->\n *     <cg-theme density=${userDensity}>        <!-- user prefs -->\n *       <App />\n *     </cg-theme>\n *   </cg-theme>\n * </cg-theme>\n * ```\n *\n * @slot - The content to retheme.\n *\n * @cssprop --cg-component-theme-density-compact-spacing-step\n * @cssprop --cg-component-theme-density-cozy-spacing-step\n */\n@customElement('cg-theme')\nexport class CgTheme extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: contents; }\n    .scope { display: contents; }\n\n    /* ── Density bands (token override layers) ──\n       Each density rescales only spacing and component sizing. Type and\n       color stay constant so density doesn't smuggle in surprise contrast. */\n    :host([density=\"compact\"]) .scope {\n      --cg-spacing-2: 1px; --cg-spacing-4: 2px; --cg-spacing-6: 4px;\n      --cg-spacing-8: 6px; --cg-spacing-12: 8px; --cg-spacing-16: 12px;\n      --cg-spacing-24: 16px; --cg-spacing-32: 20px; --cg-spacing-48: 32px;\n      --cg-component-input-height-md: 36px;\n      --cg-component-input-height-lg: 44px;\n      --cg-component-button-height-sm: 28px;\n      --cg-component-button-height-md: 36px;\n      --cg-component-button-height-lg: 44px;\n    }\n    :host([density=\"comfortable\"]) .scope {\n      --cg-spacing-2: 3px; --cg-spacing-4: 5px; --cg-spacing-6: 7px;\n      --cg-spacing-8: 10px; --cg-spacing-12: 14px; --cg-spacing-16: 20px;\n      --cg-spacing-24: 28px; --cg-spacing-32: 36px; --cg-spacing-48: 56px;\n      --cg-component-input-height-md: 52px;\n      --cg-component-input-height-lg: 60px;\n      --cg-component-button-height-sm: 40px;\n      --cg-component-button-height-md: 56px;\n      --cg-component-button-height-lg: 64px;\n    }\n    /* density=\"cozy\" is the default — no overrides */\n\n    /* ── Motion bands ── */\n    :host([motion=\"reduced\"]) .scope {\n      --cg-transition-duration-fast: 80ms;\n      --cg-transition-duration-default: 120ms;\n      --cg-transition-duration-slow: 180ms;\n    }\n    :host([motion=\"none\"]) .scope,\n    :host([motion=\"none\"]) .scope * {\n      animation-duration: 0.001ms !important;\n      transition-duration: 0.001ms !important;\n    }\n\n    /* ── Contrast bands ── */\n    :host([contrast=\"high\"]) .scope {\n      --cg-color-surface-cards-border: var(--cg-color-surface-base-text);\n      --cg-color-surface-cards-border-strong: var(--cg-color-surface-base-text);\n      --cg-color-input-border-default: var(--cg-color-surface-base-text);\n    }\n  `];\n\n  /** Density preset. Maps to spacing + component height overrides. */\n  @property({ reflect: true }) density: 'compact' | 'cozy' | 'comfortable' = 'cozy';\n\n  /** Motion preset. Maps to transition-duration overrides. */\n  @property({ reflect: true }) motion: 'full' | 'reduced' | 'none' = 'full';\n\n  /** Contrast preset. Maps to surface/border tokens. */\n  @property({ reflect: true }) contrast: 'normal' | 'high' = 'normal';\n\n  /**\n   * Arbitrary `--cg-*` overrides applied to the descendant tree.\n   * Provide as an object whose keys are CSS custom property names\n   * (e.g. `--cg-color-action-primary-background-default`) and whose\n   * values are valid CSS values (`#hex`, `rgb(...)`, `var(--ref)`).\n   *\n   * Set to a new object reference to update — mutating in place will\n   * not trigger a re-render. Pass null to clear.\n   */\n  @property({ attribute: false }) tokens: Record<string, string> | null = null;\n\n  private _tokensInlineStyle(): string {\n    if (!this.tokens) return '';\n    const entries = Object.entries(this.tokens);\n    return entries.map(([k, v]) => `${k}: ${v};`).join(' ');\n  }\n\n  override render() {\n    const inline = this._tokensInlineStyle();\n    return html`\n      <div class=\"scope\" style=${inline || ''}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-theme': CgTheme;\n  }\n}\n"],"names":["CgTheme","LitElement","k","v","inline","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AA2DO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmDwB,KAAA,UAA8C,QAG9C,KAAA,SAAsC,QAGtC,KAAA,WAA8B,UAW3B,KAAA,SAAwC;AAAA,EAAA;AAAA,EAEhE,qBAA6B;AACnC,WAAK,KAAK,SACM,OAAO,QAAQ,KAAK,MAAM,EAC3B,IAAI,CAAC,CAACC,GAAGC,CAAC,MAAM,GAAGD,CAAC,KAAKC,CAAC,GAAG,EAAE,KAAK,GAAG,IAF7B;AAAA,EAG3B;AAAA,EAES,SAAS;AAChB,UAAMC,IAAS,KAAK,mBAAA;AACpB,WAAOC;AAAA,iCACsBD,KAAU,EAAE;AAAA;AAAA;AAAA;AAAA,EAI3C;AACF;AApFaJ,EACK,SAAS,CAACM,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+CnD;AAG4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnDhBV,EAmDkB,WAAA,WAAA,CAAA;AAGAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAtDhBV,EAsDkB,WAAA,UAAA,CAAA;AAGAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAzDhBV,EAyDkB,WAAA,YAAA,CAAA;AAWGS,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GApEnBV,EAoEqB,WAAA,UAAA,CAAA;AApErBA,IAANS,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZX,CAAA;"}

package/dist/components/cg-theme-editor/cg-theme-editor.d.ts

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-theme-editor
+ * Live, in-app token editor that drives the closest ancestor
+ * `<cg-theme>` element. Drop into your dev/staging build to retune tier-2
+ * tokens without rebuilding — color pickers, sliders, and an image-drop
+ * zone that runs `themeFromImage()` to extract a palette from a logo.
+ *
+ * The editor walks up from the host to find a `<cg-theme>` ancestor and
+ * mutates its `tokens` prop on every change. There is no global side
+ * effect — clearing the editor (or removing it) leaves the theme as it
+ * was on the cg-theme element.
+ *
+ * Pair with the `themeFromImage()` API exported from
+ * `@cognivo/theme-generator` for image-driven palette extraction. The
+ * editor accepts a `themeFromImage` callback prop; consumers wire it
+ * once at mount time so this package stays free of a workspace-wide
+ * dependency on theme-generator.
+ *
+ * @example
+ * ```html
+ * <cg-theme>
+ *   <App />
+ *   <cg-theme-editor></cg-theme-editor>
+ * </cg-theme>
+ * ```
+ *
+ * @example With image extraction wired up
+ * ```ts
+ * import { themeFromImage, paletteToCssVars } from '@cognivo/theme-generator';
+ * editor.themeFromImage = (data) => paletteToCssVars(themeFromImage(data));
+ * ```
+ *
+ * @fires {CustomEvent<{tokens: Record<string,string>}>} cg-theme-change - On every token change.
+ *
+ * @cssprop --cg-component-theme-editor-width - Panel width (default 280px)
+ */
+export declare class CgThemeEditor extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Where the panel docks. */
+    anchor: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Start collapsed. */
+    collapsed: boolean;
+    /**
+     * The set of tokens the editor exposes. Each entry: { name, label, type }.
+     * Type "color" renders an `<input type="color">`. Default is the small
+     * brand-defining set that maps cleanly to most designs.
+     */
+    editableTokens: Array<{
+        name: string;
+        label: string;
+        type: 'color';
+    }>;
+    /**
+     * Optional callback that converts an RGBAImageData into a token override.
+     * Wire `themeFromImage` + `paletteToCssVars` here. When unset, the
+     * image-drop zone is disabled.
+     */
+    themeFromImage: ((image: {
+        data: Uint8ClampedArray | Uint8Array | number[];
+        width: number;
+        height: number;
+    }) => Record<string, string>) | null;
+    private _values;
+    private _showCopied;
+    private _dragover;
+    connectedCallback(): void;
+    /**
+     * Read the current resolved value of each editable token from the page
+     * so the color inputs start populated. Falls back to "#000000" for
+     * unresolvable values; the input still works once the user picks.
+     */
+    private _readInitialValues;
+    /**
+     * Convert any CSS color value into a 6-digit hex form that color inputs
+     * accept. Returns null if the value can't be parsed.
+     */
+    private _normalizeColor;
+    /** Walk up from the host to find a sibling/ancestor `<cg-theme>`. */
+    private _findThemeTarget;
+    private _applyToTheme;
+    private _onColorChange;
+    private _onImagePicked;
+    private _onImageInputChange;
+    private _onDragEnter;
+    private _onDragLeave;
+    private _onDrop;
+    private _onReset;
+    private _onCopy;
+    private _onToggle;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-theme-editor': CgThemeEditor;
+    }
+}
+//# sourceMappingURL=cg-theme-editor.d.ts.map

package/dist/components/cg-theme-editor/cg-theme-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-theme-editor.d.ts","sourceRoot":"","sources":["../../../src/components/cg-theme-editor/cg-theme-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA+InB;IAEH,6BAA6B;IACA,MAAM,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAkB;IAEhH,uBAAuB;IACqB,SAAS,UAAS;IAE9D;;;;OAIG;IAC6B,cAAc,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,CASnG;IAEF;;;;OAIG;IAEH,cAAc,EACV,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,iBAAiB,GAAG,UAAU,GAAG,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GACvH,IAAI,CAAQ;IAEP,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAS;IAE1B,iBAAiB,IAAI,IAAI;IAKlC;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAY1B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAgBvB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc,CA0BpB;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,OAAO,CAKb;IAEF,OAAO,CAAC,QAAQ,CASd;IAEF,OAAO,CAAC,OAAO,CAOb;IAEF,OAAO,CAAC,SAAS,CAEf;IAEO,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-theme-editor/cg-theme-editor.js

@@ -0,0 +1,341 @@
+import { css as f, LitElement as m, nothing as h, html as c } from "lit";
+import { property as d, state as g, customElement as y } from "lit/decorators.js";
+import { h as _, r as w } from "../../chunks/premium.css-9I4kHrsl.js";
+var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, r, a, t) => {
+  for (var o = t > 1 ? void 0 : t ? k(r, a) : r, s = e.length - 1, l; s >= 0; s--)
+    (l = e[s]) && (o = (t ? l(r, a, o) : l(o)) || o);
+  return t && o && x(r, a, o), o;
+};
+let i = class extends m {
+  constructor() {
+    super(...arguments), this.anchor = "bottom-right", this.collapsed = !1, this.editableTokens = [
+      { name: "--cg-color-action-primary-background-default", label: "Primary", type: "color" },
+      { name: "--cg-color-action-primary-text-default", label: "Primary text", type: "color" },
+      { name: "--cg-color-action-secondary-background-default", label: "Secondary", type: "color" },
+      { name: "--cg-color-accent-text", label: "Accent", type: "color" },
+      { name: "--cg-color-surface-base-background", label: "Surface bg", type: "color" },
+      { name: "--cg-color-surface-base-text", label: "Surface text", type: "color" },
+      { name: "--cg-color-surface-cards-background", label: "Card bg", type: "color" },
+      { name: "--cg-color-surface-cards-border", label: "Border", type: "color" }
+    ], this.themeFromImage = null, this._values = {}, this._showCopied = !1, this._dragover = !1, this._onImagePicked = (e) => {
+      if (!this.themeFromImage) return;
+      const r = new Image(), a = URL.createObjectURL(e);
+      r.onload = () => {
+        const t = document.createElement("canvas");
+        t.width = r.naturalWidth, t.height = r.naturalHeight;
+        const o = t.getContext("2d");
+        if (!o) return;
+        o.drawImage(r, 0, 0);
+        const s = o.getImageData(0, 0, t.width, t.height), l = this.themeFromImage(s), p = { ...this._values };
+        for (const [v, b] of Object.entries(l)) {
+          const u = this._normalizeColor(b);
+          u && (p[v] = u);
+        }
+        this._values = p, this._applyToTheme(), URL.revokeObjectURL(a);
+      }, r.src = a;
+    }, this._onImageInputChange = (e) => {
+      const a = e.target.files?.[0];
+      a && this._onImagePicked(a);
+    }, this._onDragEnter = (e) => {
+      e.preventDefault(), this._dragover = !0;
+    }, this._onDragLeave = () => {
+      this._dragover = !1;
+    }, this._onDrop = (e) => {
+      e.preventDefault(), this._dragover = !1;
+      const r = e.dataTransfer?.files?.[0];
+      r && this._onImagePicked(r);
+    }, this._onReset = () => {
+      const e = this._findThemeTarget();
+      e && (e.tokens = null), this._readInitialValues(), this.dispatchEvent(new CustomEvent("cg-theme-change", {
+        detail: { tokens: {} },
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._onCopy = () => {
+      const e = JSON.stringify(this._values, null, 2);
+      navigator.clipboard?.writeText && navigator.clipboard.writeText(e), this._showCopied = !0, setTimeout(() => {
+        this._showCopied = !1;
+      }, 1200);
+    }, this._onToggle = () => {
+      this.collapsed = !this.collapsed;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._readInitialValues();
+  }
+  /**
+   * Read the current resolved value of each editable token from the page
+   * so the color inputs start populated. Falls back to "#000000" for
+   * unresolvable values; the input still works once the user picks.
+   */
+  _readInitialValues() {
+    const r = this._findThemeTarget() ?? this, a = window.getComputedStyle(r), t = {};
+    for (const o of this.editableTokens) {
+      const s = a.getPropertyValue(o.name).trim();
+      t[o.name] = this._normalizeColor(s) ?? "#000000";
+    }
+    this._values = t;
+  }
+  /**
+   * Convert any CSS color value into a 6-digit hex form that color inputs
+   * accept. Returns null if the value can't be parsed.
+   */
+  _normalizeColor(e) {
+    if (!e) return null;
+    const r = e.trim().toLowerCase();
+    if (/^#[0-9a-f]{6}$/.test(r)) return r;
+    if (/^#[0-9a-f]{3}$/.test(r)) {
+      const [t, o, s] = r.slice(1);
+      return `#${t}${t}${o}${o}${s}${s}`;
+    }
+    const a = r.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (a) {
+      const t = (o) => parseInt(o, 10).toString(16).padStart(2, "0");
+      return `#${t(a[1])}${t(a[2])}${t(a[3])}`;
+    }
+    return null;
+  }
+  /** Walk up from the host to find a sibling/ancestor `<cg-theme>`. */
+  _findThemeTarget() {
+    let e = this.parentNode;
+    for (; e; ) {
+      if (e instanceof HTMLElement && e.tagName.toLowerCase() === "cg-theme")
+        return e;
+      e = e instanceof ShadowRoot ? e.host : e.parentNode;
+    }
+    return null;
+  }
+  _applyToTheme() {
+    const e = this._findThemeTarget();
+    e && (e.tokens = { ...this._values });
+  }
+  _onColorChange(e, r) {
+    this._values = { ...this._values, [e]: r }, this._applyToTheme(), this.dispatchEvent(new CustomEvent("cg-theme-change", {
+      detail: { tokens: this._values },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return c`
+      <div class="panel">
+        <header class=${this.collapsed ? "collapsed" : ""} @click=${this._onToggle}>
+          <span class="title">Theme</span>
+          <button class="toggle" type="button" aria-label=${this.collapsed ? "Expand" : "Collapse"}>
+            ${this.collapsed ? "+" : "–"}
+          </button>
+        </header>
+        ${this.collapsed ? h : c`
+          <div class="panel-body">
+            ${this.editableTokens.map((e) => c`
+              <div class="row">
+                <label for=${`tok-${e.name}`}>${e.label}</label>
+                <input
+                  id=${`tok-${e.name}`}
+                  type="color"
+                  .value=${this._values[e.name] ?? "#000000"}
+                  @input=${(r) => this._onColorChange(e.name, r.target.value)}
+                />
+              </div>
+            `)}
+
+            <label
+              class="image-drop ${this._dragover ? "dragover" : ""} ${this.themeFromImage ? "" : "disabled"}"
+              @dragenter=${this._onDragEnter}
+              @dragover=${(e) => e.preventDefault()}
+              @dragleave=${this._onDragLeave}
+              @drop=${this._onDrop}
+            >
+              ${this.themeFromImage ? c`Drop a logo or <strong>browse</strong> to extract a palette.` : c`Image extraction not configured.`}
+              <input
+                type="file"
+                accept="image/*"
+                ?disabled=${!this.themeFromImage}
+                @change=${this._onImageInputChange}
+              />
+            </label>
+
+            <div class="footer">
+              <button type="button" @click=${this._onCopy}>Copy JSON</button>
+              <button type="button" @click=${this._onReset}>Reset</button>
+            </div>
+
+            ${this._showCopied ? c`<span class="copied">Copied</span>` : h}
+          </div>
+        `}
+      </div>
+    `;
+  }
+};
+i.styles = [_, w, f`
+    :host {
+      position: fixed;
+      bottom: var(--cg-spacing-16);
+      right: var(--cg-spacing-16);
+      z-index: var(--cg-z-index-top, 1000);
+      font-family: var(--cg-font-family-primary, system-ui, sans-serif);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    :host([anchor="bottom-left"])  { right: auto; left: var(--cg-spacing-16); }
+    :host([anchor="top-right"])    { bottom: auto; top: var(--cg-spacing-16); }
+    :host([anchor="top-left"])     { right: auto; left: var(--cg-spacing-16); bottom: auto; top: var(--cg-spacing-16); }
+
+    .panel {
+      width: var(--cg-component-theme-editor-width, 280px);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      box-shadow: var(--cg-shadow-elevation-md, 0 8px 24px rgba(0, 0, 0, 0.18));
+      overflow: hidden;
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    :host([collapsed]) .panel-body { display: none; }
+
+    header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      background: var(--cg-color-action-tertiary-background-hover);
+      cursor: grab;
+      user-select: none;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    header.collapsed { border-bottom: 0; }
+    .title {
+      flex: 1 1 auto;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .toggle {
+      background: transparent;
+      border: 0;
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      padding: var(--cg-spacing-2) var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      border-radius: var(--cg-border-radius-50);
+    }
+    .toggle:hover { color: var(--cg-color-surface-base-text); background: var(--cg-color-action-tertiary-background-hover); }
+
+    .panel-body {
+      padding: var(--cg-spacing-12);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+      max-height: 60vh;
+      overflow-y: auto;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+    .row label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row input[type="color"] {
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-24);
+      padding: 0;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      background: transparent;
+      cursor: pointer;
+    }
+
+    .image-drop {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: var(--cg-spacing-16);
+      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      text-align: center;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .image-drop:hover, .image-drop.dragover {
+      border-color: var(--cg-color-action-primary-border-default);
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .image-drop input { display: none; }
+    .image-drop.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .footer {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      padding-top: var(--cg-spacing-8);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .footer button {
+      flex: 1 1 0;
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-base-text);
+      cursor: pointer;
+    }
+    .footer button:hover { background: var(--cg-color-action-tertiary-background-hover); }
+
+    .copied {
+      position: absolute;
+      bottom: calc(100% + var(--cg-spacing-4));
+      right: 0;
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-radius: var(--cg-border-radius-50);
+      font-size: var(--cg-font-size-xs);
+      pointer-events: none;
+    }
+  `];
+n([
+  d({ reflect: !0 })
+], i.prototype, "anchor", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "collapsed", 2);
+n([
+  d({ attribute: !1 })
+], i.prototype, "editableTokens", 2);
+n([
+  d({ attribute: !1 })
+], i.prototype, "themeFromImage", 2);
+n([
+  g()
+], i.prototype, "_values", 2);
+n([
+  g()
+], i.prototype, "_showCopied", 2);
+n([
+  g()
+], i.prototype, "_dragover", 2);
+i = n([
+  y("cg-theme-editor")
+], i);
+export {
+  i as CgThemeEditor
+};
+//# sourceMappingURL=cg-theme-editor.js.map

package/dist/components/cg-theme-editor/cg-theme-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-theme-editor.js","sources":["../../../src/components/cg-theme-editor/cg-theme-editor.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-theme-editor\n * Live, in-app token editor that drives the closest ancestor\n * `<cg-theme>` element. Drop into your dev/staging build to retune tier-2\n * tokens without rebuilding — color pickers, sliders, and an image-drop\n * zone that runs `themeFromImage()` to extract a palette from a logo.\n *\n * The editor walks up from the host to find a `<cg-theme>` ancestor and\n * mutates its `tokens` prop on every change. There is no global side\n * effect — clearing the editor (or removing it) leaves the theme as it\n * was on the cg-theme element.\n *\n * Pair with the `themeFromImage()` API exported from\n * `@cognivo/theme-generator` for image-driven palette extraction. The\n * editor accepts a `themeFromImage` callback prop; consumers wire it\n * once at mount time so this package stays free of a workspace-wide\n * dependency on theme-generator.\n *\n * @example\n * ```html\n * <cg-theme>\n *   <App />\n *   <cg-theme-editor></cg-theme-editor>\n * </cg-theme>\n * ```\n *\n * @example With image extraction wired up\n * ```ts\n * import { themeFromImage, paletteToCssVars } from '@cognivo/theme-generator';\n * editor.themeFromImage = (data) => paletteToCssVars(themeFromImage(data));\n * ```\n *\n * @fires {CustomEvent<{tokens: Record<string,string>}>} cg-theme-change - On every token change.\n *\n * @cssprop --cg-component-theme-editor-width - Panel width (default 280px)\n */\n@customElement('cg-theme-editor')\nexport class CgThemeEditor extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      position: fixed;\n      bottom: var(--cg-spacing-16);\n      right: var(--cg-spacing-16);\n      z-index: var(--cg-z-index-top, 1000);\n      font-family: var(--cg-font-family-primary, system-ui, sans-serif);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    :host([anchor=\"bottom-left\"])  { right: auto; left: var(--cg-spacing-16); }\n    :host([anchor=\"top-right\"])    { bottom: auto; top: var(--cg-spacing-16); }\n    :host([anchor=\"top-left\"])     { right: auto; left: var(--cg-spacing-16); bottom: auto; top: var(--cg-spacing-16); }\n\n    .panel {\n      width: var(--cg-component-theme-editor-width, 280px);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      box-shadow: var(--cg-shadow-elevation-md, 0 8px 24px rgba(0, 0, 0, 0.18));\n      overflow: hidden;\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    :host([collapsed]) .panel-body { display: none; }\n\n    header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-action-tertiary-background-hover);\n      cursor: grab;\n      user-select: none;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    header.collapsed { border-bottom: 0; }\n    .title {\n      flex: 1 1 auto;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .toggle {\n      background: transparent;\n      border: 0;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: var(--cg-spacing-2) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .toggle:hover { color: var(--cg-color-surface-base-text); background: var(--cg-color-action-tertiary-background-hover); }\n\n    .panel-body {\n      padding: var(--cg-spacing-12);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .row {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .row label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .row input[type=\"color\"] {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-24);\n      padding: 0;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n      cursor: pointer;\n    }\n\n    .image-drop {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: var(--cg-spacing-16);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      text-align: center;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .image-drop:hover, .image-drop.dragover {\n      border-color: var(--cg-color-action-primary-border-default);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .image-drop input { display: none; }\n    .image-drop.disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .footer {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      padding-top: var(--cg-spacing-8);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .footer button {\n      flex: 1 1 0;\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n    }\n    .footer button:hover { background: var(--cg-color-action-tertiary-background-hover); }\n\n    .copied {\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-4));\n      right: 0;\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-radius: var(--cg-border-radius-50);\n      font-size: var(--cg-font-size-xs);\n      pointer-events: none;\n    }\n  `];\n\n  /** Where the panel docks. */\n  @property({ reflect: true }) anchor: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' = 'bottom-right';\n\n  /** Start collapsed. */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * The set of tokens the editor exposes. Each entry: { name, label, type }.\n   * Type \"color\" renders an `<input type=\"color\">`. Default is the small\n   * brand-defining set that maps cleanly to most designs.\n   */\n  @property({ attribute: false }) editableTokens: Array<{ name: string; label: string; type: 'color' }> = [\n    { name: '--cg-color-action-primary-background-default', label: 'Primary', type: 'color' },\n    { name: '--cg-color-action-primary-text-default', label: 'Primary text', type: 'color' },\n    { name: '--cg-color-action-secondary-background-default', label: 'Secondary', type: 'color' },\n    { name: '--cg-color-accent-text', label: 'Accent', type: 'color' },\n    { name: '--cg-color-surface-base-background', label: 'Surface bg', type: 'color' },\n    { name: '--cg-color-surface-base-text', label: 'Surface text', type: 'color' },\n    { name: '--cg-color-surface-cards-background', label: 'Card bg', type: 'color' },\n    { name: '--cg-color-surface-cards-border', label: 'Border', type: 'color' },\n  ];\n\n  /**\n   * Optional callback that converts an RGBAImageData into a token override.\n   * Wire `themeFromImage` + `paletteToCssVars` here. When unset, the\n   * image-drop zone is disabled.\n   */\n  @property({ attribute: false })\n  themeFromImage:\n    | ((image: { data: Uint8ClampedArray | Uint8Array | number[]; width: number; height: number }) => Record<string, string>)\n    | null = null;\n\n  @state() private _values: Record<string, string> = {};\n  @state() private _showCopied = false;\n  @state() private _dragover = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._readInitialValues();\n  }\n\n  /**\n   * Read the current resolved value of each editable token from the page\n   * so the color inputs start populated. Falls back to \"#000000\" for\n   * unresolvable values; the input still works once the user picks.\n   */\n  private _readInitialValues(): void {\n    const target = this._findThemeTarget();\n    const probe = target ?? this;\n    const cs = window.getComputedStyle(probe);\n    const next: Record<string, string> = {};\n    for (const t of this.editableTokens) {\n      const v = cs.getPropertyValue(t.name).trim();\n      next[t.name] = this._normalizeColor(v) ?? '#000000';\n    }\n    this._values = next;\n  }\n\n  /**\n   * Convert any CSS color value into a 6-digit hex form that color inputs\n   * accept. Returns null if the value can't be parsed.\n   */\n  private _normalizeColor(value: string): string | null {\n    if (!value) return null;\n    const v = value.trim().toLowerCase();\n    if (/^#[0-9a-f]{6}$/.test(v)) return v;\n    if (/^#[0-9a-f]{3}$/.test(v)) {\n      const [r, g, b] = v.slice(1);\n      return `#${r}${r}${g}${g}${b}${b}`;\n    }\n    const rgb = v.match(/^rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)/);\n    if (rgb) {\n      const to2 = (n: string) => parseInt(n, 10).toString(16).padStart(2, '0');\n      return `#${to2(rgb[1]!)}${to2(rgb[2]!)}${to2(rgb[3]!)}`;\n    }\n    return null;\n  }\n\n  /** Walk up from the host to find a sibling/ancestor `<cg-theme>`. */\n  private _findThemeTarget(): HTMLElement | null {\n    let cursor: Node | null = this.parentNode;\n    while (cursor) {\n      if (cursor instanceof HTMLElement && cursor.tagName.toLowerCase() === 'cg-theme') {\n        return cursor;\n      }\n      cursor = cursor instanceof ShadowRoot ? cursor.host : (cursor as Node).parentNode;\n    }\n    return null;\n  }\n\n  private _applyToTheme(): void {\n    const target = this._findThemeTarget();\n    if (!target) return;\n    // Assign a NEW object reference so cg-theme's @property re-renders.\n    (target as unknown as { tokens: Record<string, string> | null }).tokens = { ...this._values };\n  }\n\n  private _onColorChange(name: string, value: string): void {\n    this._values = { ...this._values, [name]: value };\n    this._applyToTheme();\n    this.dispatchEvent(new CustomEvent('cg-theme-change', {\n      detail: { tokens: this._values },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _onImagePicked = (file: File): void => {\n    if (!this.themeFromImage) return;\n    const img = new Image();\n    const url = URL.createObjectURL(file);\n    img.onload = () => {\n      const canvas = document.createElement('canvas');\n      canvas.width = img.naturalWidth;\n      canvas.height = img.naturalHeight;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) return;\n      ctx.drawImage(img, 0, 0);\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n      const tokens = this.themeFromImage!(imageData);\n      // Merge the extracted tokens into the editor's known values where\n      // there's overlap; for non-overlapping tokens, push them through\n      // directly so the cg-theme picks them up too.\n      const merged = { ...this._values };\n      for (const [k, v] of Object.entries(tokens)) {\n        const norm = this._normalizeColor(v);\n        if (norm) merged[k] = norm;\n      }\n      this._values = merged;\n      this._applyToTheme();\n      URL.revokeObjectURL(url);\n    };\n    img.src = url;\n  };\n\n  private _onImageInputChange = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) this._onImagePicked(file);\n  };\n\n  private _onDragEnter = (e: DragEvent): void => {\n    e.preventDefault();\n    this._dragover = true;\n  };\n\n  private _onDragLeave = (): void => {\n    this._dragover = false;\n  };\n\n  private _onDrop = (e: DragEvent): void => {\n    e.preventDefault();\n    this._dragover = false;\n    const file = e.dataTransfer?.files?.[0];\n    if (file) this._onImagePicked(file);\n  };\n\n  private _onReset = (): void => {\n    const target = this._findThemeTarget();\n    if (target) (target as unknown as { tokens: Record<string, string> | null }).tokens = null;\n    this._readInitialValues();\n    this.dispatchEvent(new CustomEvent('cg-theme-change', {\n      detail: { tokens: {} },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onCopy = (): void => {\n    const json = JSON.stringify(this._values, null, 2);\n    if (navigator.clipboard?.writeText) {\n      void navigator.clipboard.writeText(json);\n    }\n    this._showCopied = true;\n    setTimeout(() => { this._showCopied = false; }, 1200);\n  };\n\n  private _onToggle = (): void => {\n    this.collapsed = !this.collapsed;\n  };\n\n  override render() {\n    return html`\n      <div class=\"panel\">\n        <header class=${this.collapsed ? 'collapsed' : ''} @click=${this._onToggle}>\n          <span class=\"title\">Theme</span>\n          <button class=\"toggle\" type=\"button\" aria-label=${this.collapsed ? 'Expand' : 'Collapse'}>\n            ${this.collapsed ? '+' : '–'}\n          </button>\n        </header>\n        ${this.collapsed ? nothing : html`\n          <div class=\"panel-body\">\n            ${this.editableTokens.map(t => html`\n              <div class=\"row\">\n                <label for=${`tok-${t.name}`}>${t.label}</label>\n                <input\n                  id=${`tok-${t.name}`}\n                  type=\"color\"\n                  .value=${this._values[t.name] ?? '#000000'}\n                  @input=${(e: Event) => this._onColorChange(t.name, (e.target as HTMLInputElement).value)}\n                />\n              </div>\n            `)}\n\n            <label\n              class=\"image-drop ${this._dragover ? 'dragover' : ''} ${this.themeFromImage ? '' : 'disabled'}\"\n              @dragenter=${this._onDragEnter}\n              @dragover=${(e: Event) => e.preventDefault()}\n              @dragleave=${this._onDragLeave}\n              @drop=${this._onDrop}\n            >\n              ${this.themeFromImage\n                ? html`Drop a logo or <strong>browse</strong> to extract a palette.`\n                : html`Image extraction not configured.`}\n              <input\n                type=\"file\"\n                accept=\"image/*\"\n                ?disabled=${!this.themeFromImage}\n                @change=${this._onImageInputChange}\n              />\n            </label>\n\n            <div class=\"footer\">\n              <button type=\"button\" @click=${this._onCopy}>Copy JSON</button>\n              <button type=\"button\" @click=${this._onReset}>Reset</button>\n            </div>\n\n            ${this._showCopied ? html`<span class=\"copied\">Copied</span>` : nothing}\n          </div>\n        `}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-theme-editor': CgThemeEditor;\n  }\n}\n"],"names":["CgThemeEditor","LitElement","file","img","url","canvas","ctx","imageData","tokens","merged","k","v","norm","target","json","probe","cs","next","t","value","r","g","b","rgb","to2","n","cursor","name","html","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-time-picker/cg-time-picker.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-time-picker
+ * Time picker with hour/minute grid dropdown, following cg-input/cg-select/cg-date-picker styling.
+ *
+ * @example
+ * ```html
+ * <cg-time-picker label="Start time" placeholder="Pick a time"></cg-time-picker>
+ * <cg-time-picker label="Meeting" value="14:30" step="15"></cg-time-picker>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string}>} cg-change - When a time is selected
+ */
+export declare class CgTimePicker extends LitElement {
+    static styles: import('lit').CSSResult[];
+    label: string;
+    value: string;
+    placeholder: string;
+    name: string;
+    helper: string;
+    size: 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    /** Use 12-hour format with AM/PM toggle */
+    use12h: boolean;
+    /** Minute step interval (1, 5, 10, 15, 30) */
+    step: number;
+    private _open;
+    private _selectedHour;
+    private _selectedMinute;
+    private _period;
+    private _toggle;
+    private _close;
+    private _parseValue;
+    private _selectHour;
+    private _selectMinute;
+    private _setPeriod;
+    private _emitValue;
+    private _formatDisplay;
+    private _getHours;
+    private _getMinutes;
+    private _handleClickOutside;
+    private _handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-time-picker': CgTimePicker;
+    }
+}
+//# sourceMappingURL=cg-time-picker.d.ts.map

package/dist/components/cg-time-picker/cg-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-time-picker/cg-time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAwNnB;IAES,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAiB;IAC5B,IAAI,SAAM;IACV,MAAM,SAAM;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5C,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAC5D,2CAA2C;IACd,MAAM,UAAS;IAC5C,8CAA8C;IAClB,IAAI,SAAK;IAE5B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,OAAO,CAAqB;IAE7C,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,cAAc;IAOb,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CAuEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}