@cognivo/components 0.8.0

package/dist/components/ai-form-generator/ai-form-generator.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+interface FormField {
+    name: string;
+    type: 'text' | 'email' | 'number' | 'select' | 'checkbox' | 'textarea' | 'date';
+    label: string;
+    placeholder?: string;
+    required?: boolean;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    min?: number;
+    max?: number;
+    pattern?: string;
+    section?: string;
+    default?: string | number | boolean;
+}
+interface FormSchema {
+    title?: string;
+    description?: string;
+    fields: FormField[];
+    submitLabel?: string;
+}
+export declare class AiFormGenerator extends LitElement {
+    static styles: import('lit').CSSResult[];
+    schema: FormSchema | null;
+    values: Record<string, unknown>;
+    loading: boolean;
+    private _values;
+    private _errors;
+    updated(changed: Map<string, unknown>): void;
+    private _setValue;
+    private _validate;
+    private _handleSubmit;
+    private _renderField;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-form-generator.d.ts.map

package/dist/components/ai-form-generator/ai-form-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-form-generator.d.ts","sourceRoot":"","sources":["../../../src/components/ai-form-generator/ai-form-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAEnC,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACrC;AAED,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA8DnB;IAEyB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAQ;IACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IACpC,OAAO,UAAS;IAEpC,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,OAAO,CAA8B;IAE7C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc9C,OAAO,CAAC,SAAS;IAajB,OAAO,CAAC,SAAS;IA4BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,YAAY;IAuDX,MAAM;CAwChB"}

package/dist/components/ai-form-generator/ai-form-generator.js

@@ -0,0 +1,225 @@
+import { css as p, LitElement as v, html as s, nothing as l } from "lit";
+import { property as h, state as m, customElement as u } from "lit/decorators.js";
+import { h as g, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-input/cg-input.js";
+import "../cg-textarea/cg-textarea.js";
+import "../cg-select/cg-select.js";
+import "../cg-checkbox/cg-checkbox.js";
+import "../cg-button/cg-button.js";
+var b = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (e, t, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? $(t, r) : t, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (o = (a ? d(t, r, o) : d(o)) || o);
+  return a && o && b(t, r, o), o;
+};
+let i = class extends v {
+  constructor() {
+    super(...arguments), this.schema = null, this.values = {}, this.loading = !1, this._values = {}, this._errors = {};
+  }
+  updated(e) {
+    if (e.has("schema") && this.schema) {
+      const t = { ...this.values };
+      for (const r of this.schema.fields)
+        t[r.name] === void 0 && r.default !== void 0 && (t[r.name] = r.default);
+      this._values = t, this._errors = {};
+    }
+    e.has("values") && (this._values = { ...this.values });
+  }
+  _setValue(e, t) {
+    if (this._values = { ...this._values, [e]: t }, this._errors[e]) {
+      const r = { ...this._errors };
+      delete r[e], this._errors = r;
+    }
+    this.dispatchEvent(new CustomEvent("ai-form-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { name: e, value: t, values: this._values }
+    }));
+  }
+  _validate() {
+    if (!this.schema) return !1;
+    const e = {};
+    for (const t of this.schema.fields) {
+      const r = this._values[t.name];
+      if (t.required && (r === void 0 || r === "" || r === null) && (e[t.name] = `${t.label} is required`), t.type === "number" && r !== void 0 && r !== "") {
+        const a = Number(r);
+        isNaN(a) ? e[t.name] = "Must be a number" : t.min !== void 0 && a < t.min ? e[t.name] = `Minimum: ${t.min}` : t.max !== void 0 && a > t.max && (e[t.name] = `Maximum: ${t.max}`);
+      }
+      if (t.pattern && r)
+        try {
+          new RegExp(t.pattern).test(String(r)) || (e[t.name] = "Invalid format");
+        } catch {
+        }
+    }
+    return this._errors = e, this.dispatchEvent(new CustomEvent("ai-form-validate", {
+      bubbles: !0,
+      composed: !0,
+      detail: { valid: Object.keys(e).length === 0, errors: e }
+    })), Object.keys(e).length === 0;
+  }
+  _handleSubmit() {
+    this._validate() && this.dispatchEvent(new CustomEvent("ai-form-submit", {
+      bubbles: !0,
+      composed: !0,
+      detail: { values: { ...this._values } }
+    }));
+  }
+  _renderField(e) {
+    const t = this._values[e.name] ?? "", r = this._errors[e.name];
+    return e.type === "checkbox" ? s`
+        <cg-checkbox
+          label="${e.label}"
+          ?checked=${!!t}
+          @cg-change=${(a) => this._setValue(e.name, a.detail.checked)}
+        ></cg-checkbox>
+      ` : e.type === "select" ? s`
+        <cg-select
+          label="${e.label}"
+          placeholder="${e.placeholder || "Select..."}"
+          .value=${String(t)}
+          .options=${(e.options || []).map((a) => ({ value: a.value, label: a.label }))}
+          ?error=${!!r}
+          @cg-change=${(a) => this._setValue(e.name, a.detail.value)}
+        ></cg-select>
+        ${r ? s`<cg-label error="${r}"></cg-label>` : l}
+      ` : e.type === "textarea" ? s`
+        <cg-textarea
+          label="${e.label}"
+          placeholder="${e.placeholder || ""}"
+          .value=${String(t)}
+          ?error=${!!r}
+          helper="${r || ""}"
+          @cg-input=${(a) => this._setValue(e.name, a.detail.value)}
+        ></cg-textarea>
+      ` : s`
+      <cg-input
+        label="${e.label}"
+        type="${e.type}"
+        placeholder="${e.placeholder || ""}"
+        .value=${String(t)}
+        ?error=${!!r}
+        ?required=${e.required}
+        helper="${r || ""}"
+        @cg-input=${(a) => this._setValue(e.name, a.detail.value)}
+      ></cg-input>
+    `;
+  }
+  render() {
+    if (this.loading)
+      return s`<div class="form"><div class="loading-overlay"><ai-thinking text="Generating form" delay="0"></ai-thinking></div></div>`;
+    if (!this.schema || this.schema.fields.length === 0)
+      return s`<div class="form"><div class="empty">No form schema provided</div></div>`;
+    const e = /* @__PURE__ */ new Map();
+    for (const t of this.schema.fields) {
+      const r = t.section || "";
+      e.has(r) || e.set(r, []), e.get(r).push(t);
+    }
+    return s`
+      <div class="form" role="form" aria-label="${this.schema.title || "AI-generated form"}">
+        ${this.schema.title ? s`
+          <div class="form-header">
+            <div class="form-title">${this.schema.title}</div>
+            ${this.schema.description ? s`<div class="form-desc">${this.schema.description}</div>` : l}
+          </div>
+        ` : l}
+
+        <div class="form-body">
+          ${[...e.entries()].map(([t, r]) => s`
+            ${t ? s`<div class="section-label">${t}</div>` : l}
+            ${r.map((a) => this._renderField(a))}
+          `)}
+        </div>
+
+        <div class="form-footer">
+          <cg-button variant="primary" full @cg-click=${this._handleSubmit}>
+            ${this.schema.submitLabel || "Submit"}
+          </cg-button>
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = [g, f, p`
+    :host { display: block; }
+
+    .form {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+    }
+
+    .form-header {
+      padding: var(--cg-spacing-20) var(--cg-spacing-24) var(--cg-spacing-12);
+    }
+    .form-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .form-desc {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-4);
+    }
+
+    .form-body {
+      padding: var(--cg-spacing-8) var(--cg-spacing-24) var(--cg-spacing-16);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-16);
+      overflow: hidden;
+    }
+    .form-body > * {
+      min-width: 0;
+    }
+
+    .section-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      padding-top: var(--cg-spacing-8);
+    }
+
+    .form-footer {
+      padding: var(--cg-spacing-16) var(--cg-spacing-24);
+    }
+
+    .loading-overlay {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--cg-spacing-48);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-32);
+      text-align: center;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+c([
+  h({ type: Object })
+], i.prototype, "schema", 2);
+c([
+  h({ type: Object })
+], i.prototype, "values", 2);
+c([
+  h({ type: Boolean })
+], i.prototype, "loading", 2);
+c([
+  m()
+], i.prototype, "_values", 2);
+c([
+  m()
+], i.prototype, "_errors", 2);
+i = c([
+  u("ai-form-generator")
+], i);
+export {
+  i as AiFormGenerator
+};
+//# sourceMappingURL=ai-form-generator.js.map

package/dist/components/ai-form-generator/ai-form-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-form-generator.js","sources":["../../../src/components/ai-form-generator/ai-form-generator.ts"],"sourcesContent":["/**\n * @element ai-form-generator\n * Dynamic form from AI-generated JSON schema using Cognivo design system components.\n *\n * @fires {CustomEvent<{values}>} ai-form-submit\n * @fires {CustomEvent<{name, value, values}>} ai-form-change\n * @fires {CustomEvent<{valid, errors}>} ai-form-validate\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-input/cg-input.js';\nimport '../cg-textarea/cg-textarea.js';\nimport '../cg-select/cg-select.js';\nimport '../cg-checkbox/cg-checkbox.js';\nimport '../cg-button/cg-button.js';\n\ninterface FormField {\n  name: string;\n  type: 'text' | 'email' | 'number' | 'select' | 'checkbox' | 'textarea' | 'date';\n  label: string;\n  placeholder?: string;\n  required?: boolean;\n  options?: { value: string; label: string }[];\n  min?: number;\n  max?: number;\n  pattern?: string;\n  section?: string;\n  default?: string | number | boolean;\n}\n\ninterface FormSchema {\n  title?: string;\n  description?: string;\n  fields: FormField[];\n  submitLabel?: string;\n}\n\n@customElement('ai-form-generator')\nexport class AiFormGenerator extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .form {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      overflow: hidden;\n    }\n\n    .form-header {\n      padding: var(--cg-spacing-20) var(--cg-spacing-24) var(--cg-spacing-12);\n    }\n    .form-title {\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    }\n    .form-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-4);\n    }\n\n    .form-body {\n      padding: var(--cg-spacing-8) var(--cg-spacing-24) var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-16);\n      overflow: hidden;\n    }\n    .form-body > * {\n      min-width: 0;\n    }\n\n    .section-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      padding-top: var(--cg-spacing-8);\n    }\n\n    .form-footer {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n    }\n\n    .loading-overlay {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--cg-spacing-48);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-32);\n      text-align: center;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Object }) schema: FormSchema | null = null;\n  @property({ type: Object }) values: Record<string, unknown> = {};\n  @property({ type: Boolean }) loading = false;\n\n  @state() private _values: Record<string, unknown> = {};\n  @state() private _errors: Record<string, string> = {};\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('schema') && this.schema) {\n      const vals: Record<string, unknown> = { ...this.values };\n      for (const f of this.schema.fields) {\n        if (vals[f.name] === undefined && f.default !== undefined) vals[f.name] = f.default;\n      }\n      this._values = vals;\n      this._errors = {};\n    }\n    if (changed.has('values')) {\n      this._values = { ...this.values };\n    }\n  }\n\n  private _setValue(name: string, value: unknown) {\n    this._values = { ...this._values, [name]: value };\n    if (this._errors[name]) {\n      const errs = { ...this._errors };\n      delete errs[name];\n      this._errors = errs;\n    }\n    this.dispatchEvent(new CustomEvent('ai-form-change', {\n      bubbles: true, composed: true,\n      detail: { name, value, values: this._values },\n    }));\n  }\n\n  private _validate(): boolean {\n    if (!this.schema) return false;\n    const errors: Record<string, string> = {};\n    for (const f of this.schema.fields) {\n      const val = this._values[f.name];\n      if (f.required && (val === undefined || val === '' || val === null)) {\n        errors[f.name] = `${f.label} is required`;\n      }\n      if (f.type === 'number' && val !== undefined && val !== '') {\n        const num = Number(val);\n        if (isNaN(num)) errors[f.name] = 'Must be a number';\n        else if (f.min !== undefined && num < f.min) errors[f.name] = `Minimum: ${f.min}`;\n        else if (f.max !== undefined && num > f.max) errors[f.name] = `Maximum: ${f.max}`;\n      }\n      if (f.pattern && val) {\n        try {\n          if (!new RegExp(f.pattern).test(String(val))) errors[f.name] = 'Invalid format';\n        } catch { /* skip */ }\n      }\n    }\n    this._errors = errors;\n    this.dispatchEvent(new CustomEvent('ai-form-validate', {\n      bubbles: true, composed: true,\n      detail: { valid: Object.keys(errors).length === 0, errors },\n    }));\n    return Object.keys(errors).length === 0;\n  }\n\n  private _handleSubmit() {\n    if (!this._validate()) return;\n    this.dispatchEvent(new CustomEvent('ai-form-submit', {\n      bubbles: true, composed: true,\n      detail: { values: { ...this._values } },\n    }));\n  }\n\n  private _renderField(field: FormField) {\n    const val = this._values[field.name] ?? '';\n    const err = this._errors[field.name];\n\n    if (field.type === 'checkbox') {\n      return html`\n        <cg-checkbox\n          label=\"${field.label}\"\n          ?checked=${!!val}\n          @cg-change=${(e: CustomEvent) => this._setValue(field.name, e.detail.checked)}\n        ></cg-checkbox>\n      `;\n    }\n\n    if (field.type === 'select') {\n      return html`\n        <cg-select\n          label=\"${field.label}\"\n          placeholder=\"${field.placeholder || 'Select...'}\"\n          .value=${String(val)}\n          .options=${(field.options || []).map(o => ({ value: o.value, label: o.label }))}\n          ?error=${!!err}\n          @cg-change=${(e: CustomEvent) => this._setValue(field.name, e.detail.value)}\n        ></cg-select>\n        ${err ? html`<cg-label error=\"${err}\"></cg-label>` : nothing}\n      `;\n    }\n\n    if (field.type === 'textarea') {\n      return html`\n        <cg-textarea\n          label=\"${field.label}\"\n          placeholder=\"${field.placeholder || ''}\"\n          .value=${String(val)}\n          ?error=${!!err}\n          helper=\"${err || ''}\"\n          @cg-input=${(e: CustomEvent) => this._setValue(field.name, e.detail.value)}\n        ></cg-textarea>\n      `;\n    }\n\n    return html`\n      <cg-input\n        label=\"${field.label}\"\n        type=\"${field.type}\"\n        placeholder=\"${field.placeholder || ''}\"\n        .value=${String(val)}\n        ?error=${!!err}\n        ?required=${field.required}\n        helper=\"${err || ''}\"\n        @cg-input=${(e: CustomEvent) => this._setValue(field.name, e.detail.value)}\n      ></cg-input>\n    `;\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`<div class=\"form\"><div class=\"loading-overlay\"><ai-thinking text=\"Generating form\" delay=\"0\"></ai-thinking></div></div>`;\n    }\n\n    if (!this.schema || this.schema.fields.length === 0) {\n      return html`<div class=\"form\"><div class=\"empty\">No form schema provided</div></div>`;\n    }\n\n    const sections = new Map<string, FormField[]>();\n    for (const f of this.schema.fields) {\n      const sec = f.section || '';\n      if (!sections.has(sec)) sections.set(sec, []);\n      sections.get(sec)!.push(f);\n    }\n\n    return html`\n      <div class=\"form\" role=\"form\" aria-label=\"${this.schema.title || 'AI-generated form'}\">\n        ${this.schema.title ? html`\n          <div class=\"form-header\">\n            <div class=\"form-title\">${this.schema.title}</div>\n            ${this.schema.description ? html`<div class=\"form-desc\">${this.schema.description}</div>` : nothing}\n          </div>\n        ` : nothing}\n\n        <div class=\"form-body\">\n          ${[...sections.entries()].map(([section, fields]) => html`\n            ${section ? html`<div class=\"section-label\">${section}</div>` : nothing}\n            ${fields.map(f => this._renderField(f))}\n          `)}\n        </div>\n\n        <div class=\"form-footer\">\n          <cg-button variant=\"primary\" full @cg-click=${this._handleSubmit}>\n            ${this.schema.submitLabel || 'Submit'}\n          </cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiFormGenerator","LitElement","changed","vals","f","name","value","errs","errors","val","num","field","err","html","e","o","nothing","sections","sec","section","fields","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+interface PolicyCheck {
+    policy: string;
+    passed: boolean;
+    reason?: string;
+}
+export declare class AiGuardrail extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    status: 'safe' | 'flagged' | 'blocked';
+    checks: PolicyCheck[];
+    blockedContent: string;
+    allowOverride: boolean;
+    severityLevel: 'low' | 'medium' | 'high' | 'critical';
+    private _revealed;
+    private _getStatusIcon;
+    private _getStatusText;
+    private _checkIcon;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-guardrail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-guardrail.d.ts","sourceRoot":"","sources":["../../../src/components/ai-guardrail/ai-guardrail.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,WAAW;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAiInB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAU;IACjC,MAAM,EAAE,WAAW,EAAE,CAAM;IAC1C,cAAc,SAAM;IACH,aAAa,UAAS;IACvC,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAS;IAEjE,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,UAAU;IAMT,MAAM;CA+ChB"}

package/dist/components/ai-guardrail/ai-guardrail.js

@@ -0,0 +1,229 @@
+import { css as u, LitElement as v, html as r, nothing as s } from "lit";
+import { property as c, state as f, customElement as h } from "lit/decorators.js";
+import { h as p, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var k = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (e, i, l, n) => {
+  for (var o = n > 1 ? void 0 : n ? m(i, l) : i, d = e.length - 1, g; d >= 0; d--)
+    (g = e[d]) && (o = (n ? g(i, l, o) : g(o)) || o);
+  return n && o && k(i, l, o), o;
+};
+let t = class extends v {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.status = "safe", this.checks = [], this.blockedContent = "", this.allowOverride = !1, this.severityLevel = "low", this._revealed = !1;
+  }
+  _getStatusIcon() {
+    return this.status === "safe" ? r`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>` : this.status === "flagged" ? r`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>` : r`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>`;
+  }
+  _getStatusText() {
+    return this.status === "safe" ? "All safety checks passed" : this.status === "flagged" ? "Content flagged for review" : "Content blocked by safety filter";
+  }
+  _checkIcon(e) {
+    return e ? r`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>` : r`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>`;
+  }
+  render() {
+    return r`
+      <div class="panel" role="alert" aria-live="polite" aria-label="Safety filter: ${this.status}">
+        <div class="status-bar ${this.status}">
+          ${this._getStatusIcon()}
+          <span class="status-text">${this._getStatusText()}</span>
+          ${this.status !== "safe" ? r`<span class="severity ${this.severityLevel}">${this.severityLevel}</span>` : s}
+        </div>
+
+        ${this.checks.length > 0 ? r`
+          <div class="checks">
+            <div class="checks-label">Policy Checks (${this.checks.filter((e) => e.passed).length}/${this.checks.length} passed)</div>
+            ${this.checks.map((e) => r`
+              <div class="check">
+                <span class="check-icon ${e.passed ? "pass" : "fail"}">${this._checkIcon(e.passed)}</span>
+                <div class="check-info">
+                  <div class="check-policy">${e.policy}</div>
+                  ${e.reason ? r`<div class="check-reason">${e.reason}</div>` : s}
+                </div>
+              </div>
+            `)}
+          </div>
+        ` : s}
+
+        ${this.blockedContent ? r`
+          <div class="blocked-section">
+            <div class="blocked-label">Blocked Content</div>
+            <div class="blocked-content ${this._revealed ? "revealed" : ""}"
+              @click=${() => {
+      this._revealed = !this._revealed, this.dispatchEvent(new CustomEvent("ai-guardrail-reveal", { bubbles: !0, composed: !0, detail: { revealed: this._revealed } }));
+    }}>
+              ${this.blockedContent}
+            </div>
+            <div class="blocked-hint">${this._revealed ? "Click to hide" : "Click to reveal (may contain harmful content)"}</div>
+          </div>
+        ` : s}
+
+        ${this.allowOverride || this.status !== "safe" ? r`
+          <div class="actions">
+            <button class="btn" @click=${() => this.dispatchEvent(new CustomEvent("ai-guardrail-report", { bubbles: !0, composed: !0, detail: { status: this.status, checks: this.checks } }))}>Report Issue</button>
+            ${this.allowOverride ? r`
+              <span class="override-warning">Override requires admin approval</span>
+              <button class="btn danger" @click=${() => this.dispatchEvent(new CustomEvent("ai-guardrail-override", { bubbles: !0, composed: !0, detail: { status: this.status, severity: this.severityLevel } }))}>Override</button>
+            ` : s}
+          </div>
+        ` : s}
+      </div>
+    `;
+  }
+};
+t.styles = [p, b, u`
+    .panel {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+    }
+
+    /* ── Status bar ── */
+    .status-bar {
+      display: flex; align-items: center; gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);
+    }
+    .status-bar svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); flex-shrink: 0; }
+    .status-bar.safe {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);
+    }
+    .status-bar.flagged {
+      background: var(--cg-color-status-warning-background-default);
+      color: var(--cg-color-status-warning-text-default);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-warning-border-default);
+    }
+    .status-bar.blocked {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+    }
+
+    .status-text { flex: 1; }
+    .severity {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8); border-radius: var(--cg-border-radius-full);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .severity.low { background: var(--cg-color-status-success-background-default); color: var(--cg-color-status-success-text-default); }
+    .severity.medium { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }
+    .severity.high { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }
+    .severity.critical { background: var(--cg-color-status-error-background-default); color: var(--cg-color-status-error-text-default); }
+
+    /* ── Policy checks ── */
+    .checks { padding: var(--cg-spacing-16) var(--cg-spacing-20); }
+    .checks-label {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    .check {
+      display: flex; align-items: flex-start; gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-6) 0;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .check:last-child { border-bottom: none; }
+
+    .check-icon { flex-shrink: 0; margin-top: var(--cg-spacing-2); }
+    .check-icon svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+    .check-icon.pass { color: var(--cg-color-status-success-text-default); }
+    .check-icon.fail { color: var(--cg-color-status-error-text-default); }
+
+    .check-info { flex: 1; }
+    .check-policy { font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-medium); }
+    .check-reason { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); margin-top: var(--cg-spacing-2); }
+
+    /* ── Blocked content ── */
+    .blocked-section {
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .blocked-label {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-status-error-text-default);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .blocked-content {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16); border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-status-error-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text);
+      font-family: var(--cg-font-family-mono);
+      line-height: var(--cg-line-height-relaxed);
+      filter: blur(4px);
+      transition: filter var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      cursor: pointer;
+    }
+    .blocked-content.revealed { filter: none; }
+    .blocked-hint {
+      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);
+      margin-top: var(--cg-spacing-6); text-align: center;
+    }
+
+    /* ── Actions ── */
+    .actions {
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      display: flex; align-items: center; gap: var(--cg-spacing-12);
+    }
+    .override-warning {
+      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); flex: 1;
+    }
+
+    .btn {
+      padding: var(--cg-spacing-6) var(--cg-spacing-12); border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: transparent; color: var(--cg-color-surface-container-outlined);
+      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }
+    .btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+
+    .btn.danger {
+      border-color: var(--cg-color-status-error-border-default);
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+    .btn.danger:hover { background: var(--cg-color-status-error-text-default); color: var(--cg-overlay-dark-text); }
+
+    /* ── Rounded ── */
+    :host([rounded="none"]) .panel { border-radius: 0; }
+    :host([rounded="sm"]) .panel { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .panel { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .panel { border-radius: var(--cg-component-card-radius); }
+  `];
+a([
+  c({ reflect: !0 })
+], t.prototype, "rounded", 2);
+a([
+  c()
+], t.prototype, "status", 2);
+a([
+  c({ type: Array })
+], t.prototype, "checks", 2);
+a([
+  c()
+], t.prototype, "blockedContent", 2);
+a([
+  c({ type: Boolean })
+], t.prototype, "allowOverride", 2);
+a([
+  c()
+], t.prototype, "severityLevel", 2);
+a([
+  f()
+], t.prototype, "_revealed", 2);
+t = a([
+  h("ai-guardrail")
+], t);
+export {
+  t as AiGuardrail
+};
+//# sourceMappingURL=ai-guardrail.js.map

package/dist/components/ai-guardrail/ai-guardrail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-guardrail.js","sources":["../../../src/components/ai-guardrail/ai-guardrail.ts"],"sourcesContent":["/**\n * @element ai-guardrail\n * Content safety filter display with policy checks, blocked content blur, and override controls.\n *\n * @fires {CustomEvent} ai-guardrail-override - Override clicked\n * @fires {CustomEvent} ai-guardrail-report - Report clicked\n * @fires {CustomEvent} ai-guardrail-reveal - Blocked content revealed/hidden\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface PolicyCheck {\n  policy: string;\n  passed: boolean;\n  reason?: string;\n}\n\n@customElement('ai-guardrail')\nexport class AiGuardrail extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      overflow: hidden;\n    }\n\n    /* ── Status bar ── */\n    .status-bar {\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n    }\n    .status-bar svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); flex-shrink: 0; }\n    .status-bar.safe {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);\n    }\n    .status-bar.flagged {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-warning-border-default);\n    }\n    .status-bar.blocked {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n    }\n\n    .status-text { flex: 1; }\n    .severity {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8); border-radius: var(--cg-border-radius-full);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .severity.low { background: var(--cg-color-status-success-background-default); color: var(--cg-color-status-success-text-default); }\n    .severity.medium { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }\n    .severity.high { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }\n    .severity.critical { background: var(--cg-color-status-error-background-default); color: var(--cg-color-status-error-text-default); }\n\n    /* ── Policy checks ── */\n    .checks { padding: var(--cg-spacing-16) var(--cg-spacing-20); }\n    .checks-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .check {\n      display: flex; align-items: flex-start; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-6) 0;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .check:last-child { border-bottom: none; }\n\n    .check-icon { flex-shrink: 0; margin-top: var(--cg-spacing-2); }\n    .check-icon svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    .check-icon.pass { color: var(--cg-color-status-success-text-default); }\n    .check-icon.fail { color: var(--cg-color-status-error-text-default); }\n\n    .check-info { flex: 1; }\n    .check-policy { font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-medium); }\n    .check-reason { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); margin-top: var(--cg-spacing-2); }\n\n    /* ── Blocked content ── */\n    .blocked-section {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .blocked-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-status-error-text-default);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .blocked-content {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16); border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text);\n      font-family: var(--cg-font-family-mono);\n      line-height: var(--cg-line-height-relaxed);\n      filter: blur(4px);\n      transition: filter var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      cursor: pointer;\n    }\n    .blocked-content.revealed { filter: none; }\n    .blocked-hint {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-6); text-align: center;\n    }\n\n    /* ── Actions ── */\n    .actions {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n    }\n    .override-warning {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); flex: 1;\n    }\n\n    .btn {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12); border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: transparent; color: var(--cg-color-surface-container-outlined);\n      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n\n    .btn.danger {\n      border-color: var(--cg-color-status-error-border-default);\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .btn.danger:hover { background: var(--cg-color-status-error-text-default); color: var(--cg-overlay-dark-text); }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-component-card-radius); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() status: 'safe' | 'flagged' | 'blocked' = 'safe';\n  @property({ type: Array }) checks: PolicyCheck[] = [];\n  @property() blockedContent = '';\n  @property({ type: Boolean }) allowOverride = false;\n  @property() severityLevel: 'low' | 'medium' | 'high' | 'critical' = 'low';\n\n  @state() private _revealed = false;\n\n  private _getStatusIcon() {\n    if (this.status === 'safe') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`;\n    if (this.status === 'flagged') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg>`;\n    return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  private _getStatusText(): string {\n    if (this.status === 'safe') return 'All safety checks passed';\n    if (this.status === 'flagged') return 'Content flagged for review';\n    return 'Content blocked by safety filter';\n  }\n\n  private _checkIcon(passed: boolean) {\n    return passed\n      ? html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`\n      : html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  override render() {\n    return html`\n      <div class=\"panel\" role=\"alert\" aria-live=\"polite\" aria-label=\"Safety filter: ${this.status}\">\n        <div class=\"status-bar ${this.status}\">\n          ${this._getStatusIcon()}\n          <span class=\"status-text\">${this._getStatusText()}</span>\n          ${this.status !== 'safe' ? html`<span class=\"severity ${this.severityLevel}\">${this.severityLevel}</span>` : nothing}\n        </div>\n\n        ${this.checks.length > 0 ? html`\n          <div class=\"checks\">\n            <div class=\"checks-label\">Policy Checks (${this.checks.filter(c => c.passed).length}/${this.checks.length} passed)</div>\n            ${this.checks.map(c => html`\n              <div class=\"check\">\n                <span class=\"check-icon ${c.passed ? 'pass' : 'fail'}\">${this._checkIcon(c.passed)}</span>\n                <div class=\"check-info\">\n                  <div class=\"check-policy\">${c.policy}</div>\n                  ${c.reason ? html`<div class=\"check-reason\">${c.reason}</div>` : nothing}\n                </div>\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${this.blockedContent ? html`\n          <div class=\"blocked-section\">\n            <div class=\"blocked-label\">Blocked Content</div>\n            <div class=\"blocked-content ${this._revealed ? 'revealed' : ''}\"\n              @click=${() => { this._revealed = !this._revealed; this.dispatchEvent(new CustomEvent('ai-guardrail-reveal', { bubbles: true, composed: true, detail: { revealed: this._revealed } })); }}>\n              ${this.blockedContent}\n            </div>\n            <div class=\"blocked-hint\">${this._revealed ? 'Click to hide' : 'Click to reveal (may contain harmful content)'}</div>\n          </div>\n        ` : nothing}\n\n        ${(this.allowOverride || this.status !== 'safe') ? html`\n          <div class=\"actions\">\n            <button class=\"btn\" @click=${() => this.dispatchEvent(new CustomEvent('ai-guardrail-report', { bubbles: true, composed: true, detail: { status: this.status, checks: this.checks } }))}>Report Issue</button>\n            ${this.allowOverride ? html`\n              <span class=\"override-warning\">Override requires admin approval</span>\n              <button class=\"btn danger\" @click=${() => this.dispatchEvent(new CustomEvent('ai-guardrail-override', { bubbles: true, composed: true, detail: { status: this.status, severity: this.severityLevel } }))}>Override</button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiGuardrail","LitElement","html","passed","nothing","c","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+export declare class AiHeatmap extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    /** 2D data array (rows × cols) */
+    data: number[][];
+    /** Row labels */
+    rowLabels: string[];
+    /** Column labels */
+    colLabels: string[];
+    /** Color scale: sequential (min→max) or diverging (neg→zero→pos) */
+    colorScale: 'sequential' | 'diverging';
+    /** Show values in cells */
+    showValues: boolean;
+    /** Title */
+    title: string;
+    private _tooltip;
+    private _cellSize;
+    private _labelMarginLeft;
+    private _labelMarginTop;
+    private get _flatValues();
+    private get _min();
+    private get _max();
+    /**
+     * Compute cell fill color algorithmically.
+     * Uses hardcoded RGB values because heatmap gradients must be computed per-value —
+     * CSS custom properties can't be interpolated numerically in JS.
+     * Dark neutral: rgb(39,39,42) matches --cg-gray-800 (#27272a).
+     */
+    private _getColor;
+    /** Contrast text color — dark on bright cells, light on dark cells. */
+    private _getTextColor;
+    private _handleCellClick;
+    private _handleCellHover;
+    private _handleCellLeave;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-heatmap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-heatmap.d.ts","sourceRoot":"","sources":["../../../src/components/ai-heatmap/ai-heatmap.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAuFnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACzE,kCAAkC;IACP,IAAI,EAAE,MAAM,EAAE,EAAE,CAAM;IACjD,iBAAiB;IACU,SAAS,EAAE,MAAM,EAAE,CAAM;IACpD,oBAAoB;IACO,SAAS,EAAE,MAAM,EAAE,CAAM;IACpD,oEAAoE;IACxC,UAAU,EAAE,YAAY,GAAG,WAAW,CAAgB;IAClF,2BAA2B;IACE,UAAU,EAAE,OAAO,CAAQ;IACxD,YAAY;IACyB,KAAK,EAAE,MAAM,CAAM;IAE/C,OAAO,CAAC,QAAQ,CAAkF;IAE3G,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,eAAe,CAAM;IAE7B,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,IAAI,GAAoD;IACpE,OAAO,KAAK,IAAI,GAAoD;IAEpE;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IA2BjB,uEAAuE;IACvE,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,gBAAgB;IAEf,MAAM;CAgEhB"}