@kya-os/consent 0.1.13 → 0.1.14

package/dist/cjs/components/consent-permissions.js

@@ -0,0 +1,433 @@
+"use strict";
+/**
+ * Consent Permissions Web Component
+ *
+ * Renders a list of permission scopes that the agent is requesting.
+ * Can be interactive (with checkboxes) or display-only.
+ *
+ * @module components/consent-permissions
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentPermissions = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+/**
+ * ConsentPermissions - Permission list component
+ *
+ * @example
+ * ```html
+ * <!-- Display-only mode -->
+ * <consent-permissions
+ *   scopes='["read:profile", "write:data"]'
+ * ></consent-permissions>
+ *
+ * <!-- Interactive mode -->
+ * <consent-permissions
+ *   scopes='[{"id": "read:profile", "label": "Read profile", "required": true}]'
+ *   interactive
+ * ></consent-permissions>
+ * ```
+ *
+ * @fires change - Fired when permissions selection changes (interactive mode)
+ * @csspart list - The permissions list container
+ * @csspart item - Individual permission item
+ * @cssprop --consent-primary - Primary brand color for icons/checkboxes
+ */
+let ConsentPermissions = class ConsentPermissions extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Permission scopes - can be string array or PermissionItem array
+         * Accepts JSON string for attribute binding
+         */
+        this.scopes = [];
+        /**
+         * Enable interactive mode with checkboxes
+         */
+        this.interactive = false;
+        /**
+         * Pre-select all scopes in interactive mode (default: only required scopes are pre-selected)
+         */
+        this.selectAll = false;
+        /**
+         * Icon to show next to each permission
+         * Options: 'check', 'bullet', 'shield'
+         */
+        this.iconStyle = 'check';
+        /**
+         * Internal state for selected permissions in interactive mode
+         */
+        this.selectedScopes = new Set();
+        /**
+         * Track previous scope IDs to detect newly added scopes
+         * (used to distinguish new scopes from user-deselected scopes)
+         */
+        this.previousScopeIds = new Set();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Initialize selected scopes with required permissions in interactive mode
+        if (this.interactive) {
+            this.initializeSelectedScopes();
+        }
+    }
+    updated(changedProperties) {
+        // Re-initialize selected scopes when scopes property changes dynamically
+        if (changedProperties.has('scopes') && this.interactive) {
+            this.reinitializeSelectedScopes();
+        }
+    }
+    /**
+     * Re-initialize selected scopes when scopes change dynamically.
+     * Preserves existing valid selections while adding new scopes based on selectAll/required settings.
+     */
+    reinitializeSelectedScopes() {
+        const currentScopeIds = new Set(this.normalizedScopes.map((s) => s.id));
+        // Remove selections that are no longer in the scopes list
+        const validSelections = new Set(Array.from(this.selectedScopes).filter((id) => currentScopeIds.has(id)));
+        // Identify truly NEW scopes (not previously shown to user)
+        const newScopeIds = Array.from(currentScopeIds).filter((id) => !this.previousScopeIds.has(id));
+        if (this.selectAll) {
+            // Auto-select only NEW scopes, preserving user's existing deselections
+            this.selectedScopes = new Set([...validSelections, ...newScopeIds]);
+        }
+        else {
+            // Add required scopes that aren't already selected
+            const requiredIds = this.normalizedScopes
+                .filter((s) => s.required)
+                .map((s) => s.id);
+            this.selectedScopes = new Set([...validSelections, ...requiredIds]);
+        }
+        // Update tracking of which scopes user has seen
+        this.previousScopeIds = currentScopeIds;
+        // Emit change event so parent stays in sync
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { selected: this.getSelectedScopes() },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    initializeSelectedScopes() {
+        // Track initial scopes for detecting new ones later
+        this.previousScopeIds = new Set(this.normalizedScopes.map((scope) => scope.id));
+        if (this.selectAll) {
+            // Pre-select all scopes
+            this.selectedScopes = new Set(this.normalizedScopes.map((scope) => scope.id));
+        }
+        else {
+            // Only pre-select required scopes
+            this.selectedScopes = new Set(this.normalizedScopes
+                .filter((scope) => scope.required)
+                .map((scope) => scope.id));
+        }
+    }
+    /**
+     * Normalize scopes to PermissionItem format
+     */
+    get normalizedScopes() {
+        return this.scopes.map((scope) => {
+            if (typeof scope === 'string') {
+                return {
+                    id: scope,
+                    label: this.formatScopeLabel(scope),
+                };
+            }
+            return scope;
+        });
+    }
+    /**
+     * Convert scope ID to human-readable label
+     */
+    formatScopeLabel(scopeId) {
+        // Convert 'read:profile' to 'Read profile'
+        return scopeId
+            .replace(/[_:-]/g, ' ')
+            .replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+    /**
+     * Get currently selected scopes
+     */
+    getSelectedScopes() {
+        return Array.from(this.selectedScopes);
+    }
+    handleCheckboxChange(scopeId, checked) {
+        if (checked) {
+            this.selectedScopes.add(scopeId);
+        }
+        else {
+            this.selectedScopes.delete(scopeId);
+        }
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { selected: this.getSelectedScopes() },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    renderIcon() {
+        switch (this.iconStyle) {
+            case 'bullet':
+                return (0, lit_1.html) `<div class="icon icon-bullet"></div>`;
+            case 'shield':
+                return (0, lit_1.html) `
+          <div class="icon icon-shield">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </div>
+        `;
+            default:
+                return (0, lit_1.html) `
+          <div class="icon icon-check">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          </div>
+        `;
+        }
+    }
+    renderPermissionItem(scope) {
+        const isSelected = this.selectedScopes.has(scope.id);
+        return (0, lit_1.html) `
+      <li class="permission-item" part="item">
+        ${this.interactive
+            ? (0, lit_1.html) `
+              <input
+                type="checkbox"
+                class="checkbox"
+                .checked=${isSelected}
+                ?disabled=${scope.required}
+                @change=${(e) => this.handleCheckboxChange(scope.id, e.target.checked)}
+                aria-label=${scope.label}
+              />
+            `
+            : this.renderIcon()}
+        <div class="content">
+          <span class="label">
+            ${scope.label}
+            ${scope.required
+            ? (0, lit_1.html) `<span class="required-badge">Required</span>`
+            : null}
+          </span>
+          ${scope.description
+            ? (0, lit_1.html) `<div class="description">${scope.description}</div>`
+            : null}
+        </div>
+      </li>
+    `;
+    }
+    render() {
+        const scopes = this.normalizedScopes;
+        if (scopes.length === 0) {
+            return (0, lit_1.html) `<div class="empty">No permissions requested</div>`;
+        }
+        return (0, lit_1.html) `
+      <ul class="permission-list" part="list" role="list">
+        ${scopes.map((scope) => this.renderPermissionItem(scope))}
+      </ul>
+    `;
+    }
+};
+exports.ConsentPermissions = ConsentPermissions;
+ConsentPermissions.styles = (0, lit_1.css) `
+    :host {
+      display: block;
+      --_primary: var(--consent-primary, #2563eb);
+    }
+
+    .permission-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .permission-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      padding: 0.625rem 0;
+      font-size: 0.875rem;
+      color: #374151;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    .permission-item:last-child {
+      border-bottom: none;
+    }
+
+    /* Icon styles */
+    .icon {
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-top: 0.0625rem;
+    }
+
+    .icon-check {
+      background: var(--_primary);
+      border-radius: 0.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-check svg {
+      width: 0.75rem;
+      height: 0.75rem;
+      color: white;
+    }
+
+    .icon-bullet {
+      background: var(--_primary);
+      border-radius: 50%;
+      width: 0.5rem;
+      height: 0.5rem;
+      margin: 0.375rem;
+    }
+
+    .icon-shield {
+      color: var(--_primary);
+    }
+
+    .icon-shield svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    /* Content */
+    .content {
+      flex: 1;
+    }
+
+    .label {
+      font-weight: 500;
+      color: #111827;
+    }
+
+    .description {
+      font-size: 0.75rem;
+      color: #6b7280;
+      margin-top: 0.125rem;
+    }
+
+    .required-badge {
+      font-size: 0.625rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: #6b7280;
+      background: #f3f4f6;
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      margin-left: 0.5rem;
+    }
+
+    /* Interactive mode checkbox */
+    .checkbox {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 1rem;
+      height: 1rem;
+      border: 1px solid #d1d5db;
+      border-radius: 0.25rem;
+      background: white;
+      cursor: pointer;
+      position: relative;
+      flex-shrink: 0;
+      margin-top: 0.125rem;
+    }
+
+    .checkbox:checked {
+      background: var(--_primary);
+      border-color: var(--_primary);
+    }
+
+    .checkbox:checked::after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    .checkbox:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .checkbox:focus-visible {
+      outline: 2px solid var(--_primary);
+      outline-offset: 2px;
+    }
+
+    /* Empty state */
+    .empty {
+      text-align: center;
+      color: #6b7280;
+      font-size: 0.875rem;
+      padding: 1rem 0;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({
+        type: Array,
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return [];
+                try {
+                    const parsed = JSON.parse(value);
+                    // Validate that parsed result is actually an array
+                    if (!Array.isArray(parsed)) {
+                        console.warn('[consent-permissions] Expected array, got:', typeof parsed);
+                        return [];
+                    }
+                    return parsed;
+                }
+                catch {
+                    return [];
+                }
+            },
+            toAttribute: (value) => {
+                return JSON.stringify(value);
+            },
+        },
+    })
+], ConsentPermissions.prototype, "scopes", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], ConsentPermissions.prototype, "interactive", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'select-all' })
+], ConsentPermissions.prototype, "selectAll", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'icon-style' })
+], ConsentPermissions.prototype, "iconStyle", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], ConsentPermissions.prototype, "selectedScopes", void 0);
+exports.ConsentPermissions = ConsentPermissions = __decorate([
+    (0, decorators_js_1.customElement)('consent-permissions')
+], ConsentPermissions);
+//# sourceMappingURL=consent-permissions.js.map

package/dist/cjs/components/consent-permissions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-permissions.js","sourceRoot":"","sources":["../../../src/components/consent-permissions.ts"],"names":[],"mappings":"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"}

package/dist/cjs/components/consent-shell.js

@@ -0,0 +1,234 @@
+"use strict";
+/**
+ * Consent Shell Web Component
+ *
+ * The main container for consent pages. Provides:
+ * - Card-like container with shadow and rounded corners
+ * - Header section with logo and title
+ * - Content area for auth-specific content
+ * - Footer for action buttons
+ *
+ * @module components/consent-shell
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentShell = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+/**
+ * ConsentShell - Container component for consent pages
+ *
+ * @example
+ * ```html
+ * <consent-shell
+ *   page-title="Permission Request"
+ *   logo-url="https://example.com/logo.png"
+ *   company-name="Acme Corp"
+ *   primary-color="#2563EB"
+ * >
+ *   <div slot="content">
+ *     <!-- Auth-specific content -->
+ *   </div>
+ *   <div slot="footer">
+ *     <consent-button variant="secondary">Cancel</consent-button>
+ *     <consent-button variant="primary">Allow</consent-button>
+ *   </div>
+ * </consent-shell>
+ * ```
+ *
+ * @slot content - Main content area
+ * @slot footer - Action buttons area
+ * @csspart container - The outer card container
+ * @csspart header - The header section
+ * @csspart content - The content section
+ * @csspart footer - The footer section
+ */
+let ConsentShell = class ConsentShell extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Page title (renamed from 'title' to avoid conflict with HTMLElement.title)
+         */
+        this.pageTitle = 'Permission Request';
+        /**
+         * Primary brand color
+         */
+        this.primaryColor = '#2563EB';
+        /**
+         * Secondary brand color
+         */
+        this.secondaryColor = '#DBEAFE';
+    }
+    renderLogo() {
+        if (this.logoUrl) {
+            return (0, lit_1.html) `
+        <img
+          class="logo"
+          src=${this.logoUrl}
+          alt=${this.companyName || 'Company logo'}
+        />
+      `;
+        }
+        // Default shield icon
+        return (0, lit_1.html) `
+      <div class="default-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+            fill="currentColor"
+            opacity="0.2"
+          />
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+      </div>
+    `;
+    }
+    updated(changedProperties) {
+        // Update CSS variables when colors change
+        if (changedProperties.has('primaryColor') ||
+            changedProperties.has('secondaryColor')) {
+            this.style.setProperty('--consent-primary', this.primaryColor);
+            this.style.setProperty('--consent-secondary', this.secondaryColor);
+        }
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div class="container" part="container">
+        <header class="header" part="header">
+          ${this.renderLogo()}
+          ${this.companyName
+            ? (0, lit_1.html) `<div class="company-name">${this.companyName}</div>`
+            : null}
+          <h1 class="title">${this.pageTitle}</h1>
+        </header>
+
+        <div class="content" part="content">
+          <slot name="content"></slot>
+        </div>
+
+        <footer class="footer" part="footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+    }
+};
+exports.ConsentShell = ConsentShell;
+ConsentShell.styles = (0, lit_1.css) `
+    :host {
+      display: block;
+      /* System font stack with font smoothing for crisp text */
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      /* Allow customization via CSS variables */
+      --_primary: var(--consent-primary, #2563eb);
+      --_secondary: var(--consent-secondary, #dbeafe);
+    }
+
+    /* Container - matches AgentShield PreviewShell exactly */
+    .container {
+      background: white;
+      border-radius: 20px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-shadow:
+        0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 8px 10px -6px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      max-width: 512px;
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    /* Header */
+    .header {
+      padding: 1.25rem 2rem 0;
+      text-align: center;
+    }
+
+    .logo {
+      max-height: 48px;
+      max-width: 200px;
+      margin-bottom: 0.5rem;
+    }
+
+    .company-name {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin-bottom: 0.5rem;
+    }
+
+    .title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #333333;
+      margin: 0;
+    }
+
+    /* Content */
+    .content {
+      padding: 1rem 2rem 2rem;
+    }
+
+    /* Footer */
+    .footer {
+      padding: 0 2rem 2rem;
+      display: flex;
+      gap: 0.75rem;
+    }
+
+    .footer ::slotted(*) {
+      flex: 1;
+    }
+
+    /* Default icon when no logo */
+    .default-icon {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 0.5rem;
+      background: var(--_secondary);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .default-icon svg {
+      width: 24px;
+      height: 24px;
+      color: var(--_primary);
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'page-title' })
+], ConsentShell.prototype, "pageTitle", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'logo-url' })
+], ConsentShell.prototype, "logoUrl", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'company-name' })
+], ConsentShell.prototype, "companyName", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'primary-color' })
+], ConsentShell.prototype, "primaryColor", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'secondary-color' })
+], ConsentShell.prototype, "secondaryColor", void 0);
+exports.ConsentShell = ConsentShell = __decorate([
+    (0, decorators_js_1.customElement)('consent-shell')
+], ConsentShell);
+//# sourceMappingURL=consent-shell.js.map

package/dist/cjs/components/consent-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-shell.js","sourceRoot":"","sources":["../../../src/components/consent-shell.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;;;;;;;;;AAEH,6BAA4C;AAC5C,qDAA4D;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAU;IAArC;;QACL;;WAEG;QAEH,cAAS,GAAG,oBAAoB,CAAC;QAcjC;;WAEG;QAEH,iBAAY,GAAG,SAAS,CAAC;QAEzB;;WAEG;QAEH,mBAAc,GAAG,SAAS,CAAC;IA2J7B,CAAC;IAlES,UAAU;QAChB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAA,UAAI,EAAA;;;gBAGD,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,WAAW,IAAI,cAAc;;OAE3C,CAAC;QACJ,CAAC;QAED,sBAAsB;QACtB,OAAO,IAAA,UAAI,EAAA;;;;;;;;;;;;;;;;;;;KAmBV,CAAC;IACJ,CAAC;IAEkB,OAAO,CAAC,iBAAuC;QAChE,0CAA0C;QAC1C,IACE,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC;YACrC,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,EACvC,CAAC;YACD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAA,UAAI,EAAA;;;YAGH,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAA,UAAI,EAAA,6BAA6B,IAAI,CAAC,WAAW,QAAQ;YAC3D,CAAC,CAAC,IAAI;8BACY,IAAI,CAAC,SAAS;;;;;;;;;;;KAWvC,CAAC;IACJ,CAAC;;AAvLU,oCAAY;AA+BP,mBAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqF3B,AArFqB,CAqFpB;AA/GF;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;+CACnB;AAMjC;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;6CACjC;AAMjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;iDACjC;AAMrB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;kDAC9B;AAMzB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;oDAC9B;uBA7BhB,YAAY;IADxB,IAAA,6BAAa,EAAC,eAAe,CAAC;GAClB,YAAY,CAwLxB"}