@cognivo/components 0.8.0

package/dist/components/ai-feature-flag/ai-feature-flag.js

@@ -0,0 +1,457 @@
+import { css as b, LitElement as m, nothing as d, html as o } from "lit";
+import { property as u, state as w, customElement as y } from "lit/decorators.js";
+import { h as x, r as $, f as k } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-switch/cg-switch.js";
+import "../ai-search/ai-search.js";
+var _ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, p = (e, r, a, t) => {
+  for (var i = t > 1 ? void 0 : t ? z(r, a) : r, s = e.length - 1, l; s >= 0; s--)
+    (l = e[s]) && (i = (t ? l(r, a, i) : l(i)) || i);
+  return t && i && _(r, a, i), i;
+};
+const T = {
+  release: "Release",
+  experiment: "Experiment",
+  "kill-switch": "Kill switch",
+  operational: "Operational"
+};
+let g = class extends m {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.flags = [], this.environment = "production", this._search = "";
+  }
+  // ─── Derivations ────────────────────────────────────────────────────────
+  get _filtered() {
+    const e = this._search.toLowerCase().trim();
+    return e ? this.flags.filter(
+      (r) => r.name.toLowerCase().includes(e) || (r.description || "").toLowerCase().includes(e) || (r.id || "").toLowerCase().includes(e)
+    ) : this.flags;
+  }
+  get _enabled() {
+    return this._filtered.filter((e) => e.enabled);
+  }
+  get _disabled() {
+    return this._filtered.filter((e) => !e.enabled);
+  }
+  _rolloutClass(e) {
+    return e == null ? "" : e === 0 ? "zero" : e < 100 ? "partial" : "";
+  }
+  _relativeTime(e) {
+    if (!e) return "";
+    const r = new Date(e);
+    if (isNaN(r.getTime())) return "";
+    const a = r.getTime() - Date.now(), t = Math.abs(a), i = 6e4, s = 60 * i, l = 24 * s, h = 7 * l, f = 30 * l, v = 365 * l;
+    let n, c;
+    t < s ? (n = Math.round(a / i), c = "minute") : t < l ? (n = Math.round(a / s), c = "hour") : t < h ? (n = Math.round(a / l), c = "day") : t < f ? (n = Math.round(a / h), c = "week") : t < v ? (n = Math.round(a / f), c = "month") : (n = Math.round(a / v), c = "year");
+    try {
+      return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(n, c);
+    } catch {
+      return "";
+    }
+  }
+  // ─── Handlers ───────────────────────────────────────────────────────────
+  _onSearch(e) {
+    const r = e.detail;
+    this._search = r?.query ?? "";
+  }
+  _onToggle(e, r) {
+    r.stopPropagation();
+    const a = r.detail;
+    this.dispatchEvent(new CustomEvent("ai-flag-toggle", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, name: e.name, enabled: a?.checked ?? !e.enabled }
+    }));
+  }
+  _onClick(e) {
+    e.disabled || this.dispatchEvent(new CustomEvent("ai-flag-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, name: e.name }
+    }));
+  }
+  // ─── Renderers ──────────────────────────────────────────────────────────
+  _renderFlag(e) {
+    const r = this._rolloutClass(e.rollout), a = this._relativeTime(e.lastModified), t = e.rollout != null ? Math.min(100, Math.max(0, e.rollout)) : null;
+    return o`
+      <button
+        class="flag-item ${e.disabled ? "disabled" : ""}"
+        type="button"
+        ?disabled=${e.disabled}
+        @click=${() => this._onClick(e)}
+      >
+        <!-- Row 1: name + type badge (left) | quiet meta (right) -->
+        <div class="flag-title-row">
+          <div class="flag-title-left">
+            <span class="flag-name">${e.name}</span>
+            ${e.type ? o`
+              <span class="type-badge type-${e.type}">${T[e.type]}</span>
+            ` : d}
+          </div>
+          <div class="flag-title-right">
+            ${a ? o`<span class="flag-updated">${a}</span>` : d}
+            ${e.environment ? o`<span class="flag-env">${e.environment}</span>` : d}
+          </div>
+        </div>
+
+        <!-- Row 2: description -->
+        ${e.description ? o`
+          <div class="flag-desc">${e.description}</div>
+        ` : d}
+
+        <!-- Row 3: full-width rollout bar with label above -->
+        ${t != null ? o`
+          <div class="flag-bar-row">
+            <div class="flag-bar-label">
+              <span>Rollout</span>
+              <span>${t}%</span>
+            </div>
+            <span class="rollout-track" role="progressbar" aria-valuenow=${t} aria-valuemin="0" aria-valuemax="100" aria-label="Rollout for ${e.name}">
+              <span class="rollout-fill ${r}" style="width: ${t}%"></span>
+            </span>
+          </div>
+        ` : d}
+
+        <!-- Toggle: pinned right, vertically centered across rows 1+2 -->
+        <span class="flag-toggle-slot">
+          <cg-switch
+            .checked=${e.enabled}
+            ?disabled=${e.disabled}
+            ?loading=${e.loading ?? !1}
+            aria-label="Toggle ${e.name}"
+            @click=${(i) => i.stopPropagation()}
+            @cg-change=${(i) => this._onToggle(e, i)}
+          ></cg-switch>
+        </span>
+      </button>
+    `;
+  }
+  render() {
+    const e = this._filtered, r = this._enabled, a = this._disabled;
+    return o`
+      <div class="header">
+        <h3>Feature Flags</h3>
+        <span class="env-badge">${this.environment}</span>
+      </div>
+
+      <div class="search-bar">
+        <ai-search
+          placeholder="Search flags by name, ID, or description…"
+          .value=${this._search}
+          @ai-search-query=${this._onSearch}
+        ></ai-search>
+      </div>
+
+      ${e.length === 0 ? o`
+        <div class="empty" role="status">
+          ${this._search ? `No flags match "${this._search}"` : "No feature flags configured."}
+        </div>
+      ` : o`
+        ${r.length ? o`
+          <div class="group-label">Enabled · ${r.length}</div>
+          <div class="flag-list" role="list" aria-label="Enabled flags">
+            ${r.map((t) => this._renderFlag(t))}
+          </div>
+        ` : d}
+
+        ${a.length ? o`
+          <div class="group-label">Disabled · ${a.length}</div>
+          <div class="flag-list" role="list" aria-label="Disabled flags">
+            ${a.map((t) => this._renderFlag(t))}
+          </div>
+        ` : d}
+
+        <div class="count">${e.length} of ${this.flags.length} flag${this.flags.length === 1 ? "" : "s"}</div>
+      `}
+    `;
+  }
+};
+g.styles = [x, $, k, b`
+    :host {
+      display: block;
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      box-shadow: var(--cg-elevation-1);
+      padding: var(--cg-spacing-24);
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding-bottom: var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    h3 {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      margin: 0;
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .env-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      font-size: 10px;
+      font-weight: var(--cg-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      background: var(--cg-color-surface-cards-emphasis);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-base-text);
+    }
+    .env-badge::before {
+      content: '';
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-status-info-text-default);
+    }
+
+    /* ── Search ── */
+    .search-bar { margin-bottom: var(--cg-spacing-12); }
+    .search-bar ai-search { width: 100%; display: block; }
+
+    /* ── Group label ── */
+    .group-label {
+      font-size: 10px;
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      margin: var(--cg-spacing-16) 0 var(--cg-spacing-8);
+    }
+    .group-label:first-of-type { margin-top: 0; }
+
+    .flag-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-6);
+    }
+
+    /* ── Flag card — 4-row grid:
+         row 1: title cluster (left) | meta-right (Updated · env) | toggle
+         row 2: description (full width left of the toggle)         | toggle
+         row 3: full-width rollout bar (spans both columns)
+       Toggle stays vertically centered across rows 1+2; the rollout bar
+       gets the full card width so it reads at a glance instead of being
+       a tiny inline strip. */
+    .flag-item {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-template-areas:
+        'title  toggle'
+        'desc   toggle'
+        'bar    bar';
+      column-gap: var(--cg-spacing-16);
+      row-gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      background: var(--cg-color-surface-cards-emphasis);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      font-family: inherit;
+      font: inherit;
+      width: 100%;
+      text-align: left;
+      color: inherit;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    /* Cards are clickable for inspection but do NOT press-scale — a row
+       isn't a button. Hover bumps the border for affordance instead. */
+    .flag-item:hover { border-color: var(--cg-color-surface-cards-border-strong); }
+    .flag-item:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .flag-item.disabled {
+      opacity: 0.6;
+      cursor: default;
+    }
+    .flag-item:not(.disabled) { cursor: pointer; }
+
+    /* Right-aligned toggle slot — spans all three rows, vertically centered. */
+    .flag-toggle-slot {
+      grid-area: toggle;
+      align-self: center;
+      display: flex;
+      align-items: center;
+    }
+
+    /* Title row split: name + type on the left, quiet meta on the right.
+       The right-side meta (Updated, env) keeps the title row tidy and
+       gives the bottom row over to the full-width progress bar. */
+    .flag-title-row {
+      grid-area: title;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+      min-width: 0;
+    }
+    .flag-title-left {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      flex-wrap: wrap;
+      min-width: 0;
+    }
+    .flag-title-right {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+      font-variant-numeric: tabular-nums;
+    }
+    .flag-name {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* ── Type badge per flag (release / experiment / kill-switch / operational) ── */
+    .type-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--cg-spacing-6);
+      height: var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-50);
+      font-size: 10px;
+      font-weight: var(--cg-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      border: var(--cg-border-width-50) solid currentColor;
+      background: transparent;
+      flex-shrink: 0;
+    }
+    .type-release      { color: var(--cg-color-status-info-text-default); }
+    .type-experiment   { color: var(--cg-color-accent-text); }
+    .type-kill-switch  { color: var(--cg-color-status-error-text-default); }
+    .type-operational  { color: var(--cg-color-status-warning-text-default); }
+
+    /* Description — second row, full width on the left side. */
+    .flag-desc {
+      grid-area: desc;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      line-height: var(--cg-line-height-normal);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    /* Bottom row — full-width rollout bar with the % label inline above. */
+    .flag-bar-row {
+      grid-area: bar;
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-4);
+      width: 100%;
+    }
+    .flag-bar-label {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 10px;
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      letter-spacing: var(--cg-letter-spacing-wide);
+      text-transform: uppercase;
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Rollout bar — full-width strip across the bottom of the card.
+       Display: block on both track and fill so the percentage width
+       actually renders (inline elements silently ignore width/height). */
+    .rollout-track {
+      display: block;
+      width: 100%;
+      height: var(--cg-spacing-6);
+      background: var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full);
+      overflow: hidden;
+    }
+    .rollout-fill {
+      display: block;
+      height: 100%;
+      background: var(--cg-color-status-success-text-default);
+      border-radius: var(--cg-border-radius-full);
+      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    .rollout-fill.partial { background: var(--cg-color-status-warning-text-default); }
+    .rollout-fill.zero    { background: var(--cg-color-status-error-text-default); }
+
+    .flag-env {
+      padding: var(--cg-spacing-2) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-50);
+      font-size: 10px;
+      font-weight: var(--cg-font-weight-bold);
+      background: var(--cg-overlay-dark-subtle);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      text-transform: uppercase;
+    }
+    .flag-updated {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* ── Footer count ── */
+    .count {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-16);
+      text-align: center;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-32);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) { border-radius: 0; }
+    :host([rounded="sm"])   { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"])   { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"])   { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) { border-radius: var(--cg-border-radius-full); }
+  `];
+p([
+  u({ reflect: !0 })
+], g.prototype, "rounded", 2);
+p([
+  u({ type: Array })
+], g.prototype, "flags", 2);
+p([
+  u({ type: String })
+], g.prototype, "environment", 2);
+p([
+  w()
+], g.prototype, "_search", 2);
+g = p([
+  y("ai-feature-flag")
+], g);
+export {
+  g as AiFeatureFlag
+};
+//# sourceMappingURL=ai-feature-flag.js.map

package/dist/components/ai-feature-flag/ai-feature-flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-feature-flag.js","sources":["../../../src/components/ai-feature-flag/ai-feature-flag.ts"],"sourcesContent":["/**\n * @element ai-feature-flag\n * Feature-flag management panel — environment header, debounced search,\n * enabled/disabled grouping, dogfooded <cg-switch> toggles, per-flag type\n * badge (release / experiment / kill-switch / operational), rollout-%\n * mini bar, and relative-time last-modified. Modeled on LaunchDarkly /\n * Statsig / Vercel Flags dashboards.\n *\n * @example\n * ```html\n * <ai-feature-flag environment=\"staging\"></ai-feature-flag>\n * ```\n *\n * @fires {CustomEvent<{id, name, enabled}>} ai-flag-toggle - Flag flipped\n * @fires {CustomEvent<{id, name}>} ai-flag-click - Flag row clicked\n *\n * @cssprop [--cg-color-surface-cards-background] - Card background\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-switch/cg-switch.js';\nimport '../ai-search/ai-search.js';\n\nexport type FeatureFlagType = 'release' | 'experiment' | 'kill-switch' | 'operational';\n\nexport interface FeatureFlag {\n  id: string;\n  name: string;\n  description: string;\n  enabled: boolean;\n  /** Optional flag classification — drives badge color. */\n  type?: FeatureFlagType;\n  /** Per-flag environment label (overrides the panel's environment). */\n  environment?: string;\n  /** Rollout percentage 0-100. Renders a mini bar + label when set. */\n  rollout?: number;\n  /** ISO date or epoch ms — rendered as relative time. */\n  lastModified?: string | number;\n  /** Toggle-pending state. */\n  loading?: boolean;\n  /** Locked / read-only flag. */\n  disabled?: boolean;\n}\n\nconst TYPE_LABELS: Record<FeatureFlagType, string> = {\n  release: 'Release',\n  experiment: 'Experiment',\n  'kill-switch': 'Kill switch',\n  operational: 'Operational',\n};\n\n@customElement('ai-feature-flag')\nexport class AiFeatureFlag extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\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-elevation-1);\n      padding: var(--cg-spacing-24);\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding-bottom: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    h3 {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0;\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .env-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      background: var(--cg-color-surface-cards-emphasis);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n    }\n    .env-badge::before {\n      content: '';\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-status-info-text-default);\n    }\n\n    /* ── Search ── */\n    .search-bar { margin-bottom: var(--cg-spacing-12); }\n    .search-bar ai-search { width: 100%; display: block; }\n\n    /* ── Group label ── */\n    .group-label {\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      margin: var(--cg-spacing-16) 0 var(--cg-spacing-8);\n    }\n    .group-label:first-of-type { margin-top: 0; }\n\n    .flag-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-6);\n    }\n\n    /* ── Flag card — 4-row grid:\n         row 1: title cluster (left) | meta-right (Updated · env) | toggle\n         row 2: description (full width left of the toggle)         | toggle\n         row 3: full-width rollout bar (spans both columns)\n       Toggle stays vertically centered across rows 1+2; the rollout bar\n       gets the full card width so it reads at a glance instead of being\n       a tiny inline strip. */\n    .flag-item {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      grid-template-areas:\n        'title  toggle'\n        'desc   toggle'\n        'bar    bar';\n      column-gap: var(--cg-spacing-16);\n      row-gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-cards-emphasis);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-family: inherit;\n      font: inherit;\n      width: 100%;\n      text-align: left;\n      color: inherit;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    /* Cards are clickable for inspection but do NOT press-scale — a row\n       isn't a button. Hover bumps the border for affordance instead. */\n    .flag-item:hover { border-color: var(--cg-color-surface-cards-border-strong); }\n    .flag-item:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .flag-item.disabled {\n      opacity: 0.6;\n      cursor: default;\n    }\n    .flag-item:not(.disabled) { cursor: pointer; }\n\n    /* Right-aligned toggle slot — spans all three rows, vertically centered. */\n    .flag-toggle-slot {\n      grid-area: toggle;\n      align-self: center;\n      display: flex;\n      align-items: center;\n    }\n\n    /* Title row split: name + type on the left, quiet meta on the right.\n       The right-side meta (Updated, env) keeps the title row tidy and\n       gives the bottom row over to the full-width progress bar. */\n    .flag-title-row {\n      grid-area: title;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      min-width: 0;\n    }\n    .flag-title-left {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-wrap: wrap;\n      min-width: 0;\n    }\n    .flag-title-right {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      font-variant-numeric: tabular-nums;\n    }\n    .flag-name {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    /* ── Type badge per flag (release / experiment / kill-switch / operational) ── */\n    .type-badge {\n      display: inline-flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-6);\n      height: var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-50);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      border: var(--cg-border-width-50) solid currentColor;\n      background: transparent;\n      flex-shrink: 0;\n    }\n    .type-release      { color: var(--cg-color-status-info-text-default); }\n    .type-experiment   { color: var(--cg-color-accent-text); }\n    .type-kill-switch  { color: var(--cg-color-status-error-text-default); }\n    .type-operational  { color: var(--cg-color-status-warning-text-default); }\n\n    /* Description — second row, full width on the left side. */\n    .flag-desc {\n      grid-area: desc;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: var(--cg-line-height-normal);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n    /* Bottom row — full-width rollout bar with the % label inline above. */\n    .flag-bar-row {\n      grid-area: bar;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n      width: 100%;\n    }\n    .flag-bar-label {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-input-text-placeholder);\n      letter-spacing: var(--cg-letter-spacing-wide);\n      text-transform: uppercase;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Rollout bar — full-width strip across the bottom of the card.\n       Display: block on both track and fill so the percentage width\n       actually renders (inline elements silently ignore width/height). */\n    .rollout-track {\n      display: block;\n      width: 100%;\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      overflow: hidden;\n    }\n    .rollout-fill {\n      display: block;\n      height: 100%;\n      background: var(--cg-color-status-success-text-default);\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    .rollout-fill.partial { background: var(--cg-color-status-warning-text-default); }\n    .rollout-fill.zero    { background: var(--cg-color-status-error-text-default); }\n\n    .flag-env {\n      padding: var(--cg-spacing-2) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      text-transform: uppercase;\n    }\n    .flag-updated {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    /* ── Footer count ── */\n    .count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-16);\n      text-align: center;\n      font-variant-numeric: tabular-nums;\n    }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) { border-radius: 0; }\n    :host([rounded=\"sm\"])   { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"])   { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"])   { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) flags: FeatureFlag[] = [];\n  @property({ type: String }) environment = 'production';\n\n  @state() private _search = '';\n\n  // ─── Derivations ────────────────────────────────────────────────────────\n\n  private get _filtered(): FeatureFlag[] {\n    const q = this._search.toLowerCase().trim();\n    if (!q) return this.flags;\n    return this.flags.filter(f =>\n      f.name.toLowerCase().includes(q) ||\n      (f.description || '').toLowerCase().includes(q) ||\n      (f.id || '').toLowerCase().includes(q),\n    );\n  }\n\n  private get _enabled() { return this._filtered.filter(f => f.enabled); }\n  private get _disabled() { return this._filtered.filter(f => !f.enabled); }\n\n  private _rolloutClass(pct: number | undefined): string {\n    if (pct == null) return '';\n    if (pct === 0) return 'zero';\n    if (pct < 100) return 'partial';\n    return '';\n  }\n\n  private _relativeTime(input: string | number | undefined): string {\n    if (!input) return '';\n    const date = new Date(input);\n    if (isNaN(date.getTime())) return '';\n    const diffMs = date.getTime() - Date.now();\n    const abs = Math.abs(diffMs);\n    const min = 60_000, hr = 60 * min, day = 24 * hr, week = 7 * day, month = 30 * day, year = 365 * day;\n    let value: number, unit: Intl.RelativeTimeFormatUnit;\n    if (abs < hr) { value = Math.round(diffMs / min); unit = 'minute'; }\n    else if (abs < day) { value = Math.round(diffMs / hr); unit = 'hour'; }\n    else if (abs < week) { value = Math.round(diffMs / day); unit = 'day'; }\n    else if (abs < month) { value = Math.round(diffMs / week); unit = 'week'; }\n    else if (abs < year) { value = Math.round(diffMs / month); unit = 'month'; }\n    else { value = Math.round(diffMs / year); unit = 'year'; }\n    try { return new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(value, unit); }\n    catch { return ''; }\n  }\n\n  // ─── Handlers ───────────────────────────────────────────────────────────\n\n  private _onSearch(e: Event): void {\n    // ai-search fires CustomEvent<{query: string, filters: string[]}>.\n    const detail = (e as CustomEvent<{ query: string }>).detail;\n    this._search = detail?.query ?? '';\n  }\n\n  private _onToggle(flag: FeatureFlag, e: Event): void {\n    e.stopPropagation();\n    const detail = (e as CustomEvent<{ checked: boolean }>).detail;\n    this.dispatchEvent(new CustomEvent('ai-flag-toggle', {\n      bubbles: true, composed: true,\n      detail: { id: flag.id, name: flag.name, enabled: detail?.checked ?? !flag.enabled },\n    }));\n  }\n\n  private _onClick(flag: FeatureFlag): void {\n    if (flag.disabled) return;\n    this.dispatchEvent(new CustomEvent('ai-flag-click', {\n      bubbles: true, composed: true,\n      detail: { id: flag.id, name: flag.name },\n    }));\n  }\n\n  // ─── Renderers ──────────────────────────────────────────────────────────\n\n  private _renderFlag(flag: FeatureFlag) {\n    const rolloutClass = this._rolloutClass(flag.rollout);\n    const lastMod = this._relativeTime(flag.lastModified);\n\n    const clamped = flag.rollout != null\n      ? Math.min(100, Math.max(0, flag.rollout))\n      : null;\n\n    return html`\n      <button\n        class=\"flag-item ${flag.disabled ? 'disabled' : ''}\"\n        type=\"button\"\n        ?disabled=${flag.disabled}\n        @click=${() => this._onClick(flag)}\n      >\n        <!-- Row 1: name + type badge (left) | quiet meta (right) -->\n        <div class=\"flag-title-row\">\n          <div class=\"flag-title-left\">\n            <span class=\"flag-name\">${flag.name}</span>\n            ${flag.type ? html`\n              <span class=\"type-badge type-${flag.type}\">${TYPE_LABELS[flag.type]}</span>\n            ` : nothing}\n          </div>\n          <div class=\"flag-title-right\">\n            ${lastMod ? html`<span class=\"flag-updated\">${lastMod}</span>` : nothing}\n            ${flag.environment ? html`<span class=\"flag-env\">${flag.environment}</span>` : nothing}\n          </div>\n        </div>\n\n        <!-- Row 2: description -->\n        ${flag.description ? html`\n          <div class=\"flag-desc\">${flag.description}</div>\n        ` : nothing}\n\n        <!-- Row 3: full-width rollout bar with label above -->\n        ${clamped != null ? html`\n          <div class=\"flag-bar-row\">\n            <div class=\"flag-bar-label\">\n              <span>Rollout</span>\n              <span>${clamped}%</span>\n            </div>\n            <span class=\"rollout-track\" role=\"progressbar\" aria-valuenow=${clamped} aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Rollout for ${flag.name}\">\n              <span class=\"rollout-fill ${rolloutClass}\" style=\"width: ${clamped}%\"></span>\n            </span>\n          </div>\n        ` : nothing}\n\n        <!-- Toggle: pinned right, vertically centered across rows 1+2 -->\n        <span class=\"flag-toggle-slot\">\n          <cg-switch\n            .checked=${flag.enabled}\n            ?disabled=${flag.disabled}\n            ?loading=${flag.loading ?? false}\n            aria-label=\"Toggle ${flag.name}\"\n            @click=${(e: Event) => e.stopPropagation()}\n            @cg-change=${(e: Event) => this._onToggle(flag, e)}\n          ></cg-switch>\n        </span>\n      </button>\n    `;\n  }\n\n  override render() {\n    const filtered = this._filtered;\n    const enabled = this._enabled;\n    const disabled = this._disabled;\n\n    return html`\n      <div class=\"header\">\n        <h3>Feature Flags</h3>\n        <span class=\"env-badge\">${this.environment}</span>\n      </div>\n\n      <div class=\"search-bar\">\n        <ai-search\n          placeholder=\"Search flags by name, ID, or description…\"\n          .value=${this._search}\n          @ai-search-query=${this._onSearch}\n        ></ai-search>\n      </div>\n\n      ${filtered.length === 0 ? html`\n        <div class=\"empty\" role=\"status\">\n          ${this._search ? `No flags match \"${this._search}\"` : 'No feature flags configured.'}\n        </div>\n      ` : html`\n        ${enabled.length ? html`\n          <div class=\"group-label\">Enabled · ${enabled.length}</div>\n          <div class=\"flag-list\" role=\"list\" aria-label=\"Enabled flags\">\n            ${enabled.map(f => this._renderFlag(f))}\n          </div>\n        ` : nothing}\n\n        ${disabled.length ? html`\n          <div class=\"group-label\">Disabled · ${disabled.length}</div>\n          <div class=\"flag-list\" role=\"list\" aria-label=\"Disabled flags\">\n            ${disabled.map(f => this._renderFlag(f))}\n          </div>\n        ` : nothing}\n\n        <div class=\"count\">${filtered.length} of ${this.flags.length} flag${this.flags.length === 1 ? '' : 's'}</div>\n      `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-feature-flag': AiFeatureFlag;\n  }\n}\n"],"names":["TYPE_LABELS","AiFeatureFlag","LitElement","q","f","pct","input","date","diffMs","abs","min","hr","day","week","month","year","value","unit","detail","flag","e","rolloutClass","lastMod","clamped","html","nothing","filtered","enabled","disabled","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-feedback/ai-feedback.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export declare class AiFeedback extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    /** Feedback mode */
+    mode: 'thumbs' | 'stars' | 'emoji';
+    /** Issue tags for negative feedback */
+    tags: string[];
+    /** Associated message ID */
+    messageId: string;
+    /** Show comment textarea */
+    showComment: boolean;
+    private _rating;
+    private _selectedTags;
+    private _comment;
+    private _submitted;
+    private _hoverStar;
+    private _emojiLabels;
+    private _renderEmoji;
+    private _handleThumb;
+    private _handleStar;
+    private _handleEmoji;
+    private _toggleTag;
+    private _handleSubmit;
+    private _isNegative;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-feedback.d.ts.map

package/dist/components/ai-feedback/ai-feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-feedback.d.ts","sourceRoot":"","sources":["../../../src/components/ai-feedback/ai-feedback.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAqUnB;IAC0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAClF,oBAAoB;IACQ,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAE1E,uCAAuC;IACZ,IAAI,EAAE,MAAM,EAAE,CAAyD;IAElG,4BAA4B;IACA,SAAS,EAAE,MAAM,CAAM;IAEnD,4BAA4B;IACC,WAAW,EAAE,OAAO,CAAS;IAEjD,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,UAAU,CAAa;IAExC,OAAO,CAAC,YAAY,CAA2D;IAC/E,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAOV,MAAM;CAoEhB"}