@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index71.js

@@ -1,8 +1,8 @@
-import { unsafeCSS, css, LitElement } from "lit";
+import { unsafeCSS, css, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { drawerTemplate } from "./index326.js";
-import drawerCss from "./index327.js";
+import cursorCss from "./index239.js";
 import sharedTokens from "./index196.js";
+import { CURSOR_MODES } from "./index240.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,143 +13,235 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibDrawer = class extends LitElement {
+let LibCursorFollower = class extends LitElement {
   constructor() {
-    var _a;
     super(...arguments);
-    this._uid = (((_a = globalThis.crypto) == null ? void 0 : _a.getRandomValues(new Uint32Array(1))[0]) ?? Math.random()).toString(36).slice(0, 5);
-    this.open = false;
-    this.placement = "right";
-    this.size = "md";
-    this.variant = "default";
-    this.label = "";
-    this.eyebrow = "";
-    this.subtitle = "";
-    this.drawerLabel = "";
-    this._onKeyDown = (e) => {
-      var _a2;
-      if (!this.open) return;
-      if (e.key === "Escape") {
-        e.preventDefault();
-        this._close();
-        return;
+    this.mode = "ink";
+    this.lerp = 0;
+    this.trail = false;
+    this._mouse = { x: -200, y: -200 };
+    this._lerped = { x: -200, y: -200 };
+    this._curstate = "hidden";
+    this._lastTrail = { x: 0, y: 0, t: 0 };
+    this._rafId = 0;
+    this._onMove = (e) => {
+      this._mouse.x = e.clientX;
+      this._mouse.y = e.clientY;
+      const dot = this._dot;
+      if (dot) {
+        dot.style.left = `${e.clientX}px`;
+        dot.style.top = `${e.clientY}px`;
       }
-      if (e.key === "Tab") {
-        const focusable = this._getFocusable();
-        if (!focusable.length) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        const active = (_a2 = this.shadowRoot) == null ? void 0 : _a2.activeElement;
-        if (e.shiftKey) {
-          if (active === first) {
-            e.preventDefault();
-            last == null ? void 0 : last.focus();
-          }
+      const label = this._label;
+      if (label == null ? void 0 : label.classList.contains("is-visible")) {
+        label.style.left = `${e.clientX}px`;
+        label.style.top = `${e.clientY}px`;
+      }
+      if (this.trail) this._maybeSpawnTrail(e.clientX, e.clientY);
+      if (this._curstate === "hidden") this._setState("default");
+    };
+    this._onLeave = () => {
+      this._setState("hidden");
+    };
+    this._onEnter = () => {
+      this._setState("default");
+    };
+    this._onDown = () => {
+      this._setState("press");
+    };
+    this._onUp = () => {
+      const el = document.elementFromPoint(this._mouse.x, this._mouse.y);
+      this._setState(this._detectState(el));
+    };
+    this._onOver = (e) => {
+      if (this._curstate === "press") return;
+      const el = e.target;
+      const state = this._detectState(el);
+      this._setState(state);
+      const isDark = !!(el == null ? void 0 : el.closest('[data-cursor-zone="dark"]'));
+      this.toggleAttribute("dark-zone", isDark);
+      const labelAnchor = el == null ? void 0 : el.closest("[data-cursor-label]");
+      const label = this._label;
+      if (label) {
+        if (labelAnchor == null ? void 0 : labelAnchor.dataset["cursorLabel"]) {
+          label.textContent = labelAnchor.dataset["cursorLabel"];
+          label.classList.add("is-visible");
+          label.style.left = `${this._mouse.x}px`;
+          label.style.top = `${this._mouse.y}px`;
         } else {
-          if (active === last) {
-            e.preventDefault();
-            first == null ? void 0 : first.focus();
-          }
+          label.classList.remove("is-visible");
         }
       }
     };
+    this._loop = () => {
+      const factor = this.lerp > 0 ? this.lerp : CURSOR_MODES[this.mode].lerpFactor;
+      this._lerped.x += (this._mouse.x - this._lerped.x) * factor;
+      this._lerped.y += (this._mouse.y - this._lerped.y) * factor;
+      const ring = this._ring;
+      if (ring) {
+        ring.style.left = `${this._lerped.x}px`;
+        ring.style.top = `${this._lerped.y}px`;
+      }
+      this._rafId = requestAnimationFrame(this._loop);
+    };
   }
-  /* ════════════════════════════════════════
-     Ciclo de vida
-     ════════════════════════════════════════ */
+  /* ── Refs a los elementos del shadow ── */
+  get _dot() {
+    return this.shadowRoot.querySelector(".cur-dot");
+  }
+  get _ring() {
+    return this.shadowRoot.querySelector(".cur-ring");
+  }
+  get _label() {
+    return this.shadowRoot.querySelector(".cur-label");
+  }
+  /* ── Lifecycle ── */
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("keydown", this._onKeyDown);
+    document.documentElement.style.cursor = "none";
+    window.addEventListener("mousemove", this._onMove, { passive: true });
+    window.addEventListener("mouseleave", this._onLeave, { passive: true });
+    window.addEventListener("mouseenter", this._onEnter, { passive: true });
+    window.addEventListener("mousedown", this._onDown, { passive: true });
+    window.addEventListener("mouseup", this._onUp, { passive: true });
+    window.addEventListener("mouseover", this._onOver, { passive: true });
+    this._rafId = requestAnimationFrame(this._loop);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("keydown", this._onKeyDown);
-    document.body.style.overflow = "";
+    document.documentElement.style.cursor = "";
+    window.removeEventListener("mousemove", this._onMove);
+    window.removeEventListener("mouseleave", this._onLeave);
+    window.removeEventListener("mouseenter", this._onEnter);
+    window.removeEventListener("mousedown", this._onDown);
+    window.removeEventListener("mouseup", this._onUp);
+    window.removeEventListener("mouseover", this._onOver);
+    cancelAnimationFrame(this._rafId);
   }
+  /** Aplica el modo visual al dot y ring */
   updated(changed) {
-    if (!changed.has("open")) return;
-    if (this.open) {
-      document.body.style.overflow = "hidden";
-      requestAnimationFrame(() => {
-        var _a;
-        const panel = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".dr");
-        panel == null ? void 0 : panel.focus();
-      });
-    } else {
-      document.body.style.overflow = "";
-    }
-    if (!this.drawerLabel) {
-      this.drawerLabel = this.label || "Panel";
+    if (changed.has("mode")) {
+      this._applyMode();
     }
   }
-  /* ════════════════════════════════════════
-     API pública
-     ════════════════════════════════════════ */
-  /** Cierra el drawer y emite el evento */
-  _close() {
-    if (!this.open) return;
-    this.open = false;
-    this.dispatchEvent(new CustomEvent("ui-lib-drawer-close", {
-      bubbles: true,
-      composed: true
-    }));
+  /* ── API pública ── */
+  /** Cambia el modo en tiempo de ejecución */
+  setMode(mode) {
+    this.mode = mode;
   }
-  /* ════════════════════════════════════════
-     Focus trap
-     ════════════════════════════════════════ */
-  _getFocusable() {
-    var _a;
-    const selector = [
-      "a[href]",
-      "button:not([disabled])",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      "textarea:not([disabled])",
-      '[tabindex]:not([tabindex="-1"])'
-    ].join(",");
-    return Array.from(
-      ((_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(selector)) ?? []
-    );
+  /** Activa o desactiva el trail de tinta */
+  toggleTrail() {
+    this.trail = !this.trail;
+    this._lastTrail = { x: this._mouse.x, y: this._mouse.y, t: performance.now() };
   }
-  /* ════════════════════════════════════════
-     Render
-     ════════════════════════════════════════ */
+  /* ── Render ── */
   render() {
-    return drawerTemplate(this);
+    return html`
+      <div class="cur-dot"  part="dot"></div>
+      <div class="cur-ring" part="ring"></div>
+      <div class="cur-label" part="label"></div>
+    `;
+  }
+  /* ── Helpers ── */
+  _detectState(el) {
+    if (!el) return "default";
+    const textZone = el.closest('[data-cursor-zone="text"]');
+    if (textZone && el.matches("p, h1, h2, h3, h4, h5, h6, em, strong, span:not(.cursor-zone-label)")) {
+      return "text";
+    }
+    if (el.matches('a, button, input, select, textarea, [role="button"], [data-interactive], .interactive')) {
+      return "hover";
+    }
+    if (el.closest('a, button, [role="button"]')) {
+      return "hover";
+    }
+    return "default";
+  }
+  _setState(state) {
+    if (this._curstate === state) return;
+    this._curstate = state;
+    this.setAttribute("curstate", state);
+  }
+  /** Aplica los estilos base del modo al dot y ring */
+  _applyMode() {
+    const m = CURSOR_MODES[this.mode];
+    if (!m) return;
+    const dot = this._dot;
+    const ring = this._ring;
+    if (!dot || !ring) return;
+    dot.style.background = m.dotBg;
+    dot.style.width = m.dotSize;
+    dot.style.height = m.dotSize;
+    ring.style.border = m.ringBorder;
+    ring.style.background = m.ringBg;
+    ring.style.width = m.ringSize;
+    ring.style.height = m.ringSize;
+    ring.style.mixBlendMode = m.ringMix;
+  }
+  /** Genera partículas de tinta proporcionales a la velocidad */
+  _maybeSpawnTrail(x, y) {
+    const now = performance.now();
+    const dx = x - this._lastTrail.x;
+    const dy = y - this._lastTrail.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const dt = Math.max(1, now - this._lastTrail.t);
+    const speed = dist / dt;
+    if (dist > 4) {
+      this._spawnTrailParticle(x, y, speed);
+      this._lastTrail = { x, y, t: now };
+    }
+  }
+  _spawnTrailParticle(x, y, speed) {
+    const size = Math.max(2, Math.min(8, speed * 1.5));
+    const isLight = this.mode === "ghost";
+    const color = isLight ? "rgba(250,247,244,0.4)" : "var(--color-kaki-500)";
+    const el = document.createElement("div");
+    el.style.cssText = `
+      position: fixed;
+      border-radius: 50%;
+      pointer-events: none;
+      z-index: 9997;
+      left: ${x}px;
+      top: ${y}px;
+      width: ${size}px;
+      height: ${size}px;
+      background: ${color};
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 0.4;
+      animation: lib-ink-fade ${600 + speed * 50}ms cubic-bezier(0.2, 0, 0.8, 1) forwards;
+    `;
+    document.body.appendChild(el);
+    setTimeout(() => el.remove(), 900);
   }
 };
-LibDrawer.styles = [
+LibCursorFollower.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(drawerCss)}`
+  css`${unsafeCSS(cursorCss)}`
 ];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibDrawer.prototype, "open", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibDrawer.prototype, "placement", 2);
+], LibCursorFollower.prototype, "mode", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibDrawer.prototype, "size", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibDrawer.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String })
-], LibDrawer.prototype, "label", 2);
+  property({ type: Number })
+], LibCursorFollower.prototype, "lerp", 2);
 __decorateClass([
-  property({ type: String })
-], LibDrawer.prototype, "eyebrow", 2);
-__decorateClass([
-  property({ type: String })
-], LibDrawer.prototype, "subtitle", 2);
-__decorateClass([
-  property({ type: String, attribute: "drawer-label" })
-], LibDrawer.prototype, "drawerLabel", 2);
-LibDrawer = __decorateClass([
-  customElement("lib-drawer")
-], LibDrawer);
+  property({ type: Boolean })
+], LibCursorFollower.prototype, "trail", 2);
+LibCursorFollower = __decorateClass([
+  customElement("lib-cursor-follower")
+], LibCursorFollower);
+if (!document.head.querySelector("#lib-cursor-keyframes")) {
+  const s = document.createElement("style");
+  s.id = "lib-cursor-keyframes";
+  s.textContent = `
+    @keyframes lib-ink-fade {
+      0%   { opacity: 0.4; transform: translate(-50%,-50%) scale(1);   }
+      100% { opacity: 0;   transform: translate(-50%,-50%) scale(0.2); }
+    }
+  `;
+  document.head.appendChild(s);
+}
 export {
-  LibDrawer
+  LibCursorFollower
 };
 //# sourceMappingURL=index71.js.map

package/dist/index71.js.map

@@ -1 +1 @@
-{"version":3,"file":"index71.js","sources":["../src/components/organisms/drawer/lib-drawer.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { drawerTemplate } from './lib-drawer.html';\nimport drawerCss from './lib-drawer.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { DrawerPlacement, DrawerSize, DrawerVariant } from './lib-drawer.types';\n\n/**\n * lib-drawer — Shibui UI · SG-59\n *\n * @prop open         — Abre / cierra el drawer\n * @prop placement    — 'right'(default) | 'left' | 'top' | 'bottom'\n * @prop size         — 'sm' | 'md'(default) | 'lg' | 'xl' | 'full'\n * @prop variant      — 'default' | 'dark' | 'kintsugi' | 'kintsugi-dark' | 'glitch' | 'glitch-dark'\n * @prop label        — Texto del título (también rellenable via slot[name=\"title\"])\n * @prop eyebrow      — Texto del eyebrow (también via slot[name=\"eyebrow\"])\n * @prop subtitle     — Texto del subtítulo (también via slot[name=\"subtitle\"])\n * @prop drawer-label — Aria-label del dialog (default = label)\n *\n * @slot              — Contenido del body\n * @slot title        — Reemplaza el título\n * @slot eyebrow      — Reemplaza el eyebrow\n * @slot subtitle     — Reemplaza el subtítulo\n * @slot footer       — Botones de pie (oculto si vacío)\n *\n * @fires ui-lib-drawer-close — Cuando el drawer se cierra (backdrop, Escape, botón X)\n */\n@customElement('lib-drawer')\nexport class LibDrawer extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(drawerCss)}`,\n  ];\n\n  /* ── Identificador único para aria ── */\n  readonly _uid: string = (globalThis.crypto?.getRandomValues(new Uint32Array(1))[0] ?? Math.random())\n  .toString(36)\n  .slice(0, 5);\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  placement: DrawerPlacement = 'right';\n\n  @property({ type: String, reflect: true })\n  size: DrawerSize = 'md';\n\n  @property({ type: String, reflect: true })\n  variant: DrawerVariant = 'default';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: String, attribute: 'drawer-label' })\n  drawerLabel = '';\n\n  /* ════════════════════════════════════════\n     Ciclo de vida\n     ════════════════════════════════════════ */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._onKeyDown);\n    // Restaurar scroll por si se destruye mientras está abierto\n    document.body.style.overflow = '';\n  }\n\n  override updated(changed: Map<PropertyKey, unknown>): void {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      document.body.style.overflow = 'hidden';\n      // Dar foco al panel para que los eventos de teclado funcionen\n      requestAnimationFrame(() => {\n        const panel = this.shadowRoot?.querySelector<HTMLElement>('.dr');\n        panel?.focus();\n      });\n    } else {\n      document.body.style.overflow = '';\n    }\n\n    // Sync aria-label si no se pasó drawer-label explícito\n    if (!this.drawerLabel) {\n      this.drawerLabel = this.label || 'Panel';\n    }\n  }\n\n  /* ════════════════════════════════════════\n     API pública\n     ════════════════════════════════════════ */\n\n  /** Cierra el drawer y emite el evento */\n  _close(): void {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(new CustomEvent('ui-lib-drawer-close', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ════════════════════════════════════════\n     Focus trap\n     ════════════════════════════════════════ */\n\n  private _getFocusable(): HTMLElement[] {\n    const selector = [\n      'a[href]', 'button:not([disabled])', 'input:not([disabled])',\n      'select:not([disabled])', 'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(',');\n\n    return Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLElement>(selector) ?? []\n    );\n  }\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (!this.open) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this._close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      const focusable = this._getFocusable();\n      if (!focusable.length) return;\n\n      const first = focusable[0];\n      const last  = focusable[focusable.length - 1];\n      const active = this.shadowRoot?.activeElement as HTMLElement;\n\n      if (e.shiftKey) {\n        if (active === first) { e.preventDefault(); last?.focus(); }\n      } else {\n        if (active === last)  { e.preventDefault(); first?.focus(); }\n      }\n    }\n  };\n\n  /* ════════════════════════════════════════\n     Render\n     ════════════════════════════════════════ */\n  protected override render(): TemplateResult {\n    return drawerTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-drawer': LibDrawer;\n  }\n}"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"index71.js","sources":["../src/components/organisms/cursor-follower/lib-cursor-follower.component.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport cursorCss from './lib-cursor-follower.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { CURSOR_MODES } from './lib-cursor-follower.types';\nimport type { CursorMode, CursorState } from './lib-cursor-follower.types';\n\n/**\n * @element lib-cursor-follower\n *\n * Cursor personalizado con tres capas: dot exacto, ring con lerp e inercia,\n * y label contextual. Detecta automáticamente el tipo de elemento bajo el cursor.\n *\n * Coloca el componente una sola vez al inicio del <body>. Se encarga de ocultar\n * el cursor nativo del documento.\n *\n * @prop {CursorMode} mode    — ink · minimal · kaki · ghost (default: 'ink')\n * @prop {number}     lerp    — Factor de interpolación del ring 0–1 (override del modo)\n * @prop {boolean}    trail   — Activa la cola de tinta al mover rápido\n *\n * @method setMode(mode)   — Cambia el modo en tiempo de ejecución\n * @method toggleTrail()   — Activa/desactiva el trail\n *\n * @csspart dot   — El punto exacto\n * @csspart ring  — El anillo con lag\n * @csspart label — La etiqueta contextual\n */\n@customElement('lib-cursor-follower')\nexport class LibCursorFollower extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(cursorCss)}`,\n  ];\n\n  /* ── Props ── */\n\n  @property({ type: String, reflect: true })\n  mode: CursorMode = 'ink';\n\n  @property({ type: Number })\n  lerp = 0;                 // 0 = usar el del modo\n\n  @property({ type: Boolean })\n  trail = false;\n\n  /* ── Estado interno del cursor (no reactivo — actualizado en rAF) ── */\n\n  /** Posición exacta del ratón */\n  private _mouse  = { x: -200, y: -200 };\n  /** Posición interpolada del ring */\n  private _lerped = { x: -200, y: -200 };\n\n  /** Estado contextual actual */\n  private _curstate: CursorState = 'hidden';\n\n  /** Anclajes para el trail */\n  private _lastTrail  = { x: 0, y: 0, t: 0 };\n  private _rafId      = 0;\n\n  /* ── Refs a los elementos del shadow ── */\n\n  private get _dot():   HTMLElement { return this.shadowRoot!.querySelector('.cur-dot')   as HTMLElement; }\n  private get _ring():  HTMLElement { return this.shadowRoot!.querySelector('.cur-ring')  as HTMLElement; }\n  private get _label(): HTMLElement { return this.shadowRoot!.querySelector('.cur-label') as HTMLElement; }\n\n  /* ── Lifecycle ── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Ocultar cursor nativo\n    document.documentElement.style.cursor = 'none';\n\n    window.addEventListener('mousemove',  this._onMove,   { passive: true });\n    window.addEventListener('mouseleave', this._onLeave,  { passive: true });\n    window.addEventListener('mouseenter', this._onEnter,  { passive: true });\n    window.addEventListener('mousedown',  this._onDown,   { passive: true });\n    window.addEventListener('mouseup',    this._onUp,     { passive: true });\n    window.addEventListener('mouseover',  this._onOver,   { passive: true });\n\n    this._rafId = requestAnimationFrame(this._loop);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.documentElement.style.cursor = '';\n\n    window.removeEventListener('mousemove',  this._onMove);\n    window.removeEventListener('mouseleave', this._onLeave);\n    window.removeEventListener('mouseenter', this._onEnter);\n    window.removeEventListener('mousedown',  this._onDown);\n    window.removeEventListener('mouseup',    this._onUp);\n    window.removeEventListener('mouseover',  this._onOver);\n\n    cancelAnimationFrame(this._rafId);\n  }\n\n  /** Aplica el modo visual al dot y ring */\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('mode')) {\n      this._applyMode();\n    }\n  }\n\n  /* ── API pública ── */\n\n  /** Cambia el modo en tiempo de ejecución */\n  public setMode(mode: CursorMode): void {\n    this.mode = mode;\n  }\n\n  /** Activa o desactiva el trail de tinta */\n  public toggleTrail(): void {\n    this.trail = !this.trail;\n    this._lastTrail = { x: this._mouse.x, y: this._mouse.y, t: performance.now() };\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return html`\n      <div class=\"cur-dot\"  part=\"dot\"></div>\n      <div class=\"cur-ring\" part=\"ring\"></div>\n      <div class=\"cur-label\" part=\"label\"></div>\n    `;\n  }\n\n  /* ── Event handlers ── */\n\n  private _onMove = (e: MouseEvent): void => {\n    this._mouse.x = e.clientX;\n    this._mouse.y = e.clientY;\n\n    // Dot sigue instantáneamente\n    const dot = this._dot;\n    if (dot) {\n      dot.style.left = `${e.clientX}px`;\n      dot.style.top  = `${e.clientY}px`;\n    }\n\n    // Label sigue al dot\n    const label = this._label;\n    if (label?.classList.contains('is-visible')) {\n      label.style.left = `${e.clientX}px`;\n      label.style.top  = `${e.clientY}px`;\n    }\n\n    // Trail\n    if (this.trail) this._maybeSpawnTrail(e.clientX, e.clientY);\n\n    // Si estaba oculto, restaurar\n    if (this._curstate === 'hidden') this._setState('default');\n  };\n\n  private _onLeave  = (): void => { this._setState('hidden'); };\n  private _onEnter  = (): void => { this._setState('default'); };\n  private _onDown   = (): void => { this._setState('press'); };\n  private _onUp     = (): void => {\n    // Volver al estado previo al press\n    const el = document.elementFromPoint(this._mouse.x, this._mouse.y);\n    this._setState(this._detectState(el));\n  };\n\n  private _onOver = (e: MouseEvent): void => {\n    if (this._curstate === 'press') return; // no interrumpir press\n\n    const el = e.target as Element | null;\n    const state = this._detectState(el);\n    this._setState(state);\n\n    // Zona oscura — el ring adapta el color\n    const isDark = !!el?.closest('[data-cursor-zone=\"dark\"]');\n    this.toggleAttribute('dark-zone', isDark);\n\n    // Label contextual\n    const labelAnchor = el?.closest('[data-cursor-label]') as HTMLElement | null;\n    const label = this._label;\n    if (label) {\n      if (labelAnchor?.dataset['cursorLabel']) {\n        label.textContent = labelAnchor.dataset['cursorLabel'];\n        label.classList.add('is-visible');\n        label.style.left = `${this._mouse.x}px`;\n        label.style.top  = `${this._mouse.y}px`;\n      } else {\n        label.classList.remove('is-visible');\n      }\n    }\n  };\n\n  /* ── Loop de animación del ring ── */\n\n  private _loop = (): void => {\n    const factor = this.lerp > 0\n      ? this.lerp\n      : CURSOR_MODES[this.mode].lerpFactor;\n\n    this._lerped.x += (this._mouse.x - this._lerped.x) * factor;\n    this._lerped.y += (this._mouse.y - this._lerped.y) * factor;\n\n    const ring = this._ring;\n    if (ring) {\n      ring.style.left = `${this._lerped.x}px`;\n      ring.style.top  = `${this._lerped.y}px`;\n    }\n\n    this._rafId = requestAnimationFrame(this._loop);\n  };\n\n  /* ── Helpers ── */\n\n  private _detectState(el: Element | null): CursorState {\n    if (!el) return 'default';\n\n    // Texto editable / seleccionable\n    const textZone = el.closest('[data-cursor-zone=\"text\"]');\n    if (textZone && el.matches('p, h1, h2, h3, h4, h5, h6, em, strong, span:not(.cursor-zone-label)')) {\n      return 'text';\n    }\n\n    // Elemento interactivo\n    if (el.matches('a, button, input, select, textarea, [role=\"button\"], [data-interactive], .interactive')) {\n      return 'hover';\n    }\n    if (el.closest('a, button, [role=\"button\"]')) {\n      return 'hover';\n    }\n\n    return 'default';\n  }\n\n  private _setState(state: CursorState): void {\n    if (this._curstate === state) return;\n    this._curstate = state;\n    this.setAttribute('curstate', state);\n  }\n\n  /** Aplica los estilos base del modo al dot y ring */\n  private _applyMode(): void {\n    const m = CURSOR_MODES[this.mode];\n    if (!m) return;\n\n    const dot  = this._dot;\n    const ring = this._ring;\n    if (!dot || !ring) return;\n\n    dot.style.background = m.dotBg;\n    dot.style.width      = m.dotSize;\n    dot.style.height     = m.dotSize;\n\n    ring.style.border     = m.ringBorder;\n    ring.style.background = m.ringBg;\n    ring.style.width      = m.ringSize;\n    ring.style.height     = m.ringSize;\n    ring.style.mixBlendMode = m.ringMix;\n  }\n\n  /** Genera partículas de tinta proporcionales a la velocidad */\n  private _maybeSpawnTrail(x: number, y: number): void {\n    const now  = performance.now();\n    const dx   = x - this._lastTrail.x;\n    const dy   = y - this._lastTrail.y;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const dt   = Math.max(1, now - this._lastTrail.t);\n    const speed = dist / dt;\n\n    if (dist > 4) {\n      this._spawnTrailParticle(x, y, speed);\n      this._lastTrail = { x, y, t: now };\n    }\n  }\n\n  private _spawnTrailParticle(x: number, y: number, speed: number): void {\n    const size = Math.max(2, Math.min(8, speed * 1.5));\n    const isLight = this.mode === 'ghost';\n    const color = isLight\n      ? 'rgba(250,247,244,0.4)'\n      : 'var(--color-kaki-500)';\n\n    const el = document.createElement('div');\n    el.style.cssText = `\n      position: fixed;\n      border-radius: 50%;\n      pointer-events: none;\n      z-index: 9997;\n      left: ${x}px;\n      top: ${y}px;\n      width: ${size}px;\n      height: ${size}px;\n      background: ${color};\n      transform: translate(-50%, -50%) scale(1);\n      opacity: 0.4;\n      animation: lib-ink-fade ${600 + speed * 50}ms cubic-bezier(0.2, 0, 0.8, 1) forwards;\n    `;\n    document.body.appendChild(el);\n    setTimeout(() => el.remove(), 900);\n  }\n}\n\n/* Keyframe global para las partículas de trail */\nif (!document.head.querySelector('#lib-cursor-keyframes')) {\n  const s = document.createElement('style');\n  s.id = 'lib-cursor-keyframes';\n  s.textContent = `\n    @keyframes lib-ink-fade {\n      0%   { opacity: 0.4; transform: translate(-50%,-50%) scale(1);   }\n      100% { opacity: 0;   transform: translate(-50%,-50%) scale(0.2); }\n    }\n  `;\n  document.head.appendChild(s);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-cursor-follower': LibCursorFollower;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index72.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
-import tableCss from "./index328.js";
+import tableCss from "./index241.js";
 import sharedTokens from "./index196.js";
-import { dataTableTemplate } from "./index329.js";
+import { dataTableTemplate } from "./index242.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/dist/index73.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { accordionTemplate } from "./index330.js";
-import accordionCss from "./index331.js";
+import { property, query, customElement } from "lit/decorators.js";
+import { dialogTemplate } from "./index243.js";
+import dialogCss from "./index244.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,45 +13,106 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibAccordion = class extends LitElement {
+let LibDialog = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.eyebrow = "";
+    this.dlgTitle = "";
     this.variant = "default";
-    this.exclusive = false;
+    this.size = "md";
+    this.layout = "dialog";
+    this.open = false;
+    this.footerMeta = "";
   }
-  _handleToggle(e) {
-    if (!this.exclusive) return;
-    const target = e.target;
-    if (!target.open) return;
-    const items = Array.from(
-      this.querySelectorAll("lib-accordion-item")
-    );
-    items.forEach((item) => {
-      if (item !== target) {
-        item.open = false;
-      }
-    });
+  /* ── Lifecycle ── */
+  /**
+   * Cuando `open` cambia: abrir con showModal + reflow + .is-open
+   * o cerrar con animación de salida + transitionend.
+   */
+  updated(changed) {
+    if (!changed.has("open")) return;
+    if (this.open) {
+      this._dlg.showModal();
+      this._dlg.getBoundingClientRect();
+      this._dlg.classList.add("is-open");
+    } else {
+      this._animateClose();
+    }
+  }
+  /* ── API pública ── */
+  /** Abre el dialog */
+  show() {
+    this.open = true;
+  }
+  /** Cierra el dialog con animación */
+  close() {
+    this.open = false;
   }
+  /* ── Render ── */
   render() {
-    return accordionTemplate({
-      onToggle: this._handleToggle.bind(this)
+    return dialogTemplate({
+      eyebrow: this.eyebrow,
+      dlgTitle: this.dlgTitle,
+      variant: this.variant,
+      size: this.size,
+      layout: this.layout,
+      footerMeta: this.footerMeta,
+      open: this.open,
+      onClose: () => {
+        this.close();
+      }
     });
   }
+  /* ── Private ── */
+  _animateClose() {
+    var _a;
+    if (!((_a = this._dlg) == null ? void 0 : _a.open)) return;
+    this._dlg.classList.add("is-closing");
+    this._dlg.classList.remove("is-open");
+    this._dlg.addEventListener("transitionend", () => {
+      this._dlg.close();
+      this._dlg.classList.remove("is-closing");
+      this.dispatchEvent(
+        new CustomEvent("ui-lib-dialog-close", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    }, { once: true });
+  }
 };
-LibAccordion.styles = [
+LibDialog.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(accordionCss)}`
+  css`${unsafeCSS(dialogCss)}`
 ];
+__decorateClass([
+  property({ type: String })
+], LibDialog.prototype, "eyebrow", 2);
+__decorateClass([
+  property({ type: String, attribute: "dlg-title" })
+], LibDialog.prototype, "dlgTitle", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibDialog.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibAccordion.prototype, "variant", 2);
+], LibDialog.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibDialog.prototype, "layout", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibDialog.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, attribute: "footer-meta" })
+], LibDialog.prototype, "footerMeta", 2);
 __decorateClass([
-  property({ type: Boolean })
-], LibAccordion.prototype, "exclusive", 2);
-LibAccordion = __decorateClass([
-  customElement("lib-accordion")
-], LibAccordion);
+  query("dialog")
+], LibDialog.prototype, "_dlg", 2);
+LibDialog = __decorateClass([
+  customElement("lib-dialog")
+], LibDialog);
 export {
-  LibAccordion
+  LibDialog
 };
 //# sourceMappingURL=index73.js.map

package/dist/index73.js.map

@@ -1 +1 @@
-{"version":3,"file":"index73.js","sources":["../src/components/organisms/accordion/lib-accordion.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { accordionTemplate } from './lib-accordion.component.html';\nimport type { LibAccordionItem } from '../../atoms/accordion-item/lib-accordion-item.component';\nimport accordionCss from './lib-accordion.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type LibAccordionVariant = 'default' | 'flush' | 'separated' | 'accent';\n\n/**\n * @element lib-accordion\n *\n * Organismo que orquesta uno o varios lib-accordion-item.\n * Gestiona el modo exclusive y aplica variantes visuales\n * sobre los items via la API de CSS custom properties.\n *\n * @slot - lib-accordion-item elements\n *\n * @example\n * <lib-accordion variant=\"accent\" exclusive>\n *   <lib-accordion-item label=\"Pregunta 1\">Respuesta 1</lib-accordion-item>\n *   <lib-accordion-item label=\"Pregunta 2\" open>Respuesta 2</lib-accordion-item>\n * </lib-accordion>\n */\n@customElement('lib-accordion')\nexport class LibAccordion extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(accordionCss)}`,\n  ];\n\n  /** Variante visual del accordion */\n  @property({ type: String, reflect: true })\n  variant: LibAccordionVariant = 'default';\n\n  /**\n   * Si true, solo un item puede estar abierto a la vez.\n   * Al abrir uno, los demas se cierran automaticamente.\n   */\n  @property({ type: Boolean })\n  exclusive = false;\n\n  private _handleToggle(e: Event): void {\n    if (!this.exclusive) return;\n\n    const target = e.target as LibAccordionItem;\n\n    // Solo actuamos si el item se acaba de abrir\n    if (!target.open) return;\n\n    const items = Array.from(\n      this.querySelectorAll<LibAccordionItem>('lib-accordion-item')\n    );\n\n    items.forEach(item => {\n      if (item !== target) {\n        item.open = false;\n      }\n    });\n  }\n\n  override render(): TemplateResult {\n    return accordionTemplate({\n      onToggle: this._handleToggle.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-accordion': LibAccordion;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,UAA+B;AAO/B,SAAA,YAAY;AAAA,EAAA;AAAA,EAEJ,cAAc,GAAgB;AACpC,QAAI,CAAC,KAAK,UAAW;AAErB,UAAM,SAAS,EAAE;AAGjB,QAAI,CAAC,OAAO,KAAM;AAElB,UAAM,QAAQ,MAAM;AAAA,MAClB,KAAK,iBAAmC,oBAAoB;AAAA,IAAA;AAG9D,UAAM,QAAQ,CAAA,SAAQ;AACpB,UAAI,SAAS,QAAQ;AACnB,aAAK,OAAO;AAAA,MACd;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAES,SAAyB;AAChC,WAAO,kBAAkB;AAAA,MACvB,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA,EACH;AACF;AAzCa,aACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,aAQX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAdhB,aAeX,WAAA,aAAA,CAAA;AAfW,eAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,YAAA;"}
+{"version":3,"file":"index73.js","sources":["../src/components/organisms/dialog/lib-dialog.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { dialogTemplate } from './lib-dialog.html';\nimport dialogCss from './lib-dialog.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { DialogVariant, DialogSize, DialogLayout } from './lib-dialog.types';\n\n/**\n * @element lib-dialog\n *\n * Ventana de diálogo sobre `<dialog>` nativo con animación de entrada/salida.\n *\n * @prop {string}        eyebrow     — Texto pequeño encima del título\n * @prop {string}        dlg-title   — Título principal del header\n * @prop {DialogVariant} variant     — default · danger · warning · dark\n * @prop {DialogSize}    size        — sm · md · lg · xl · full (default: md)\n * @prop {DialogLayout}  layout      — dialog · drawer-right · drawer-bottom · alert (default: dialog)\n * @prop {boolean}       open        — Estado controlado del panel\n * @prop {string}        footer-meta — Texto auxiliar izquierdo en el footer\n *\n * @slot         — Cuerpo del dialog (dlg-body)\n * @slot header  — Override completo del título (dentro de dlg-header-text)\n * @slot footer  — Botones del footer (a la derecha del footer-meta)\n *\n * @fires ui-lib-dialog-close — Emitido tras la animación de cierre (bubbles, composed)\n *\n * @method show()  — Abre el dialog con animación de entrada\n * @method close() — Cierra el dialog con animación de salida\n */\n@customElement('lib-dialog')\nexport class LibDialog extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(dialogCss)}`,\n  ];\n\n  /* ── Props ── */\n\n  @property({ type: String })\n  eyebrow = '';\n\n  /**\n   * `title` está reservado en HTMLElement — usamos `dlgTitle` + attribute `dlg-title`.\n   */\n  @property({ type: String, attribute: 'dlg-title' })\n  dlgTitle = '';\n\n  @property({ type: String, reflect: true })\n  variant: DialogVariant = 'default';\n\n  @property({ type: String, reflect: true })\n  size: DialogSize = 'md';\n\n  @property({ type: String, reflect: true })\n  layout: DialogLayout = 'dialog';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, attribute: 'footer-meta' })\n  footerMeta = '';\n\n  /* ── Refs ── */\n\n  @query('dialog') declare private _dlg: HTMLDialogElement;\n\n  /* ── Lifecycle ── */\n\n  /**\n   * Cuando `open` cambia: abrir con showModal + reflow + .is-open\n   * o cerrar con animación de salida + transitionend.\n   */\n  protected override updated(changed: PropertyValues<this>): void {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      this._dlg.showModal();\n      this._dlg.getBoundingClientRect(); // force reflow antes de la transición\n      this._dlg.classList.add('is-open');\n    } else {\n      this._animateClose();\n    }\n  }\n\n  /* ── API pública ── */\n\n  /** Abre el dialog */\n  public show(): void {\n    this.open = true;\n  }\n\n  /** Cierra el dialog con animación */\n  public close(): void {\n    this.open = false;\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return dialogTemplate({\n      eyebrow:    this.eyebrow,\n      dlgTitle:   this.dlgTitle,\n      variant:    this.variant,\n      size:       this.size,\n      layout:     this.layout,\n      footerMeta: this.footerMeta,\n      open:       this.open,\n      onClose:    (): void => { this.close(); },\n    });\n  }\n\n  /* ── Private ── */\n\n  private _animateClose(): void {\n    if (!this._dlg?.open) return;\n\n    this._dlg.classList.add('is-closing');\n    this._dlg.classList.remove('is-open');\n\n    this._dlg.addEventListener('transitionend', () => {\n      this._dlg.close();\n      this._dlg.classList.remove('is-closing');\n\n      this.dispatchEvent(\n        new CustomEvent('ui-lib-dialog-close', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }, { once: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-dialog': LibDialog;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,UAAU;AAMV,SAAA,WAAW;AAGX,SAAA,UAAyB;AAGzB,SAAA,OAAmB;AAGnB,SAAA,SAAuB;AAGvB,SAAA,OAAO;AAGP,SAAA,aAAa;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYM,QAAQ,SAAqC;AAC9D,QAAI,CAAC,QAAQ,IAAI,MAAM,EAAG;AAE1B,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,UAAA;AACV,WAAK,KAAK,sBAAA;AACV,WAAK,KAAK,UAAU,IAAI,SAAS;AAAA,IACnC,OAAO;AACL,WAAK,cAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA;AAAA,EAKO,OAAa;AAClB,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAGO,QAAc;AACnB,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAImB,SAAyB;AAC1C,WAAO,eAAe;AAAA,MACpB,SAAY,KAAK;AAAA,MACjB,UAAY,KAAK;AAAA,MACjB,SAAY,KAAK;AAAA,MACjB,MAAY,KAAK;AAAA,MACjB,QAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,MACjB,MAAY,KAAK;AAAA,MACjB,SAAY,MAAY;AAAE,aAAK,MAAA;AAAA,MAAS;AAAA,IAAA,CACzC;AAAA,EACH;AAAA;AAAA,EAIQ,gBAAsB;;AAC5B,QAAI,GAAC,UAAK,SAAL,mBAAW,MAAM;AAEtB,SAAK,KAAK,UAAU,IAAI,YAAY;AACpC,SAAK,KAAK,UAAU,OAAO,SAAS;AAEpC,SAAK,KAAK,iBAAiB,iBAAiB,MAAM;AAChD,WAAK,KAAK,MAAA;AACV,WAAK,KAAK,UAAU,OAAO,YAAY;AAEvC,WAAK;AAAA,QACH,IAAI,YAAY,uBAAuB;AAAA,UACrC,SAAS;AAAA,UACT,UAAU;AAAA,QAAA,CACX;AAAA,MAAA;AAAA,IAEL,GAAG,EAAE,MAAM,MAAM;AAAA,EACnB;AACF;AArGa,UACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAKA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,UASX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAdvC,UAeX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAjB9B,UAkBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,UAqBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAvB9B,UAwBX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA1B/B,UA2BX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GA7BzC,UA8BX,WAAA,cAAA,CAAA;AAIiC,gBAAA;AAAA,EAAhC,MAAM,QAAQ;AAAA,GAlCJ,UAkCsB,WAAA,QAAA,CAAA;AAlCtB,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}