@shibui-ui/ui 1.5.5

package/dist/index38.js

@@ -0,0 +1,278 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import { buttonLiquidTemplate } from "./index260.js";
+import liquidCss from "./index261.js";
+import sharedTokens from "./index196.js";
+import { LIQUID_PALETTES } from "./index262.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+class WaterPhysics {
+  constructor(btn, canvas, water, ripple) {
+    this.fill = 0;
+    this.targetFill = 0;
+    this.fillSpeed = 0.032;
+    this.shimmerX = -1;
+    this.t = 0;
+    this.hovered = false;
+    this.raf = 0;
+    this.A = 3.5;
+    this.f1 = 0.038;
+    this.f2 = 0.063;
+    this.s1 = 1.8;
+    this.s2 = 1.2;
+    this.W = 0;
+    this.H = 0;
+    this.ripples = [];
+    this.btn = btn;
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d");
+    [this.wr, this.wg, this.wb] = water;
+    [this.rr, this.rg, this.rb] = ripple;
+    this.resize();
+    this.loop();
+  }
+  /* ── Dimensiones con DPR ── */
+  resize() {
+    const r = this.btn.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    this.W = r.width;
+    this.H = r.height;
+    this.canvas.width = this.W * dpr;
+    this.canvas.height = this.H * dpr;
+    this.canvas.style.width = `${this.W}px`;
+    this.canvas.style.height = `${this.H}px`;
+    this.ctx.scale(dpr, dpr);
+  }
+  /* ── Spawn de ripple ── */
+  spawnRipple(x, y, { speed = 2.2, maxR, lineWidth = 1.2 } = {}) {
+    const diag = Math.sqrt(this.W ** 2 + this.H ** 2);
+    this.ripples.push({
+      x,
+      y,
+      radius: 0,
+      maxRadius: maxR ?? diag * 0.72,
+      speed,
+      lineWidth,
+      opacity: 0
+    });
+  }
+  /* ── Eventos públicos — llamados por el componente Lit ── */
+  onMouseEnter(x, y) {
+    this.hovered = true;
+    this.targetFill = 1;
+    this.fillSpeed = 0.028;
+    this.shimmerX = -0.3;
+    this.spawnRipple(x, y, { speed: 3.2, lineWidth: 1.8 });
+    setTimeout(() => this.spawnRipple(x, y, { speed: 2, lineWidth: 1.1 }), 80);
+    setTimeout(() => this.spawnRipple(x, y, { speed: 1.3, lineWidth: 0.7 }), 180);
+  }
+  onMouseLeave() {
+    this.hovered = false;
+    this.targetFill = 0;
+    this.fillSpeed = 0.048;
+  }
+  onMouseDown(cx, cy) {
+    for (let i = 0; i < 3; i++) {
+      setTimeout(() => {
+        this.spawnRipple(cx, cy, {
+          speed: 4 - i * 0.8,
+          maxR: this.W * 0.5,
+          lineWidth: 2 - i * 0.4
+        });
+      }, i * 40);
+    }
+  }
+  /* ── Dibujo ── */
+  drawWave() {
+    const { ctx, W, H, A, f1, f2, s1, s2, t, wr, wg, wb, fill } = this;
+    if (fill <= 1e-3) return;
+    const baseY = H * (1 - fill);
+    ctx.beginPath();
+    ctx.moveTo(0, H);
+    ctx.lineTo(0, baseY);
+    for (let x = 0; x <= W; x++) {
+      const y = baseY + A * Math.sin(x * f1 + t * s1) + A * 0.45 * Math.sin(x * f2 - t * s2);
+      ctx.lineTo(x, y);
+    }
+    ctx.lineTo(W, H);
+    ctx.closePath();
+    const grad = ctx.createLinearGradient(0, baseY - A * 2, 0, H);
+    grad.addColorStop(0, `rgba(${wr},${wg},${wb},0.82)`);
+    grad.addColorStop(0.4, `rgba(${wr},${wg},${wb},0.92)`);
+    grad.addColorStop(1, `rgba(${wr},${wg},${wb},0.98)`);
+    ctx.fillStyle = grad;
+    ctx.fill();
+    if (this.shimmerX > -0.5 && this.shimmerX < 1.5) {
+      const sx = W * this.shimmerX;
+      const sg = ctx.createLinearGradient(sx - 40, 0, sx + 40, 0);
+      sg.addColorStop(0, "rgba(255,255,255,0)");
+      sg.addColorStop(0.5, "rgba(255,255,255,0.12)");
+      sg.addColorStop(1, "rgba(255,255,255,0)");
+      ctx.fillStyle = sg;
+      ctx.fillRect(0, Math.max(0, baseY - 4), W, H - Math.max(0, baseY - 4));
+    }
+  }
+  drawRipples() {
+    const { ctx, rr, rg, rb } = this;
+    this.ripples = this.ripples.filter((r) => r.opacity > 0 || r.radius === 0);
+    for (const r of this.ripples) {
+      r.radius += r.speed;
+      r.opacity = Math.max(0, 1 - r.radius / r.maxRadius);
+      ctx.beginPath();
+      ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
+      ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.9})`;
+      ctx.lineWidth = r.lineWidth;
+      ctx.stroke();
+      if (r.radius > 6) {
+        ctx.beginPath();
+        ctx.arc(r.x, r.y, r.radius * 0.65, 0, Math.PI * 2);
+        ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.4})`;
+        ctx.lineWidth = r.lineWidth * 0.5;
+        ctx.stroke();
+      }
+    }
+    this.ripples = this.ripples.filter((r) => r.opacity > 0);
+  }
+  /* ── Loop principal ── */
+  loop() {
+    const tick = () => {
+      this.raf = requestAnimationFrame(tick);
+      const { ctx, W, H } = this;
+      this.t += 0.04;
+      const diff = this.targetFill - this.fill;
+      this.fill += diff * this.fillSpeed * 2.8;
+      if (Math.abs(diff) < 5e-4) this.fill = this.targetFill;
+      if (this.hovered && this.shimmerX < 1.6) {
+        this.shimmerX += 0.012;
+      }
+      if (this.fill <= 1e-3 && this.ripples.length === 0) return;
+      ctx.clearRect(0, 0, W, H);
+      this.drawWave();
+      this.drawRipples();
+    };
+    this.raf = requestAnimationFrame(tick);
+  }
+  /* ── Cleanup ── */
+  destroy() {
+    cancelAnimationFrame(this.raf);
+  }
+}
+let LibButtonLiquid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "ink";
+    this.size = "md";
+    this.disabled = false;
+    this.loading = false;
+    this.dark = false;
+    this.block = false;
+    this._physics = null;
+    this._canvas = null;
+    this._ro = null;
+  }
+  /* ── Lifecycle ── */
+  firstUpdated() {
+    this._initCanvas();
+  }
+  updated(changed) {
+    if (changed.has("variant")) {
+      this._destroyCanvas();
+      this._initCanvas();
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    this._destroyCanvas();
+    (_a = this._ro) == null ? void 0 : _a.disconnect();
+  }
+  /* ── Canvas setup ── */
+  _initCanvas() {
+    if (!this._btn) return;
+    const canvas = document.createElement("canvas");
+    this._canvas = canvas;
+    this._btn.insertBefore(canvas, this._btn.firstChild);
+    const palette = LIQUID_PALETTES[this.variant];
+    this._physics = new WaterPhysics(this._btn, canvas, palette.water, palette.ripple);
+    this._ro = new ResizeObserver(() => {
+      var _a;
+      return (_a = this._physics) == null ? void 0 : _a.resize();
+    });
+    this._ro.observe(this._btn);
+  }
+  _destroyCanvas() {
+    var _a, _b, _c;
+    (_a = this._physics) == null ? void 0 : _a.destroy();
+    this._physics = null;
+    (_b = this._canvas) == null ? void 0 : _b.remove();
+    this._canvas = null;
+    (_c = this._ro) == null ? void 0 : _c.disconnect();
+    this._ro = null;
+  }
+  /* ── Eventos del canvas — llamados desde el template ── */
+  _onMouseEnter(e) {
+    var _a;
+    if (this.disabled || this.loading) return;
+    const rect = this._btn.getBoundingClientRect();
+    (_a = this._physics) == null ? void 0 : _a.onMouseEnter(e.clientX - rect.left, e.clientY - rect.top);
+  }
+  _onMouseLeave() {
+    var _a;
+    (_a = this._physics) == null ? void 0 : _a.onMouseLeave();
+  }
+  _onMouseDown(e) {
+    var _a;
+    if (this.disabled || this.loading) return;
+    const rect = this._btn.getBoundingClientRect();
+    (_a = this._physics) == null ? void 0 : _a.onMouseDown(e.clientX - rect.left, e.clientY - rect.top);
+    this.dispatchEvent(new CustomEvent("ui-lib-click", {
+      detail: { originalEvent: e },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /* ── Render ── */
+  render() {
+    return buttonLiquidTemplate(this);
+  }
+};
+LibButtonLiquid.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(liquidCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonLiquid.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonLiquid.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonLiquid.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonLiquid.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonLiquid.prototype, "dark", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonLiquid.prototype, "block", 2);
+__decorateClass([
+  query(".btn")
+], LibButtonLiquid.prototype, "_btn", 2);
+LibButtonLiquid = __decorateClass([
+  customElement("lib-button-liquid")
+], LibButtonLiquid);
+export {
+  LibButtonLiquid
+};
+//# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index38.js","sources":["../src/components/atoms/liquid-button/lib-liquid-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { buttonLiquidTemplate } from './lib-liquid-button.html';\nimport liquidCss from './lib-liquid-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { LIQUID_PALETTES } from './lib-liquid-button.types';\nimport type { LiquidVariant, LiquidSize } from './lib-liquid-button.types';\n\n/* ============================================================\n   WaterPhysics — clase interna de física de canvas\n   Portada desde el SG-41 (vanilla JS → TypeScript puro)\n   ============================================================ */\nclass WaterPhysics {\n  private btn:        HTMLElement;\n  private canvas:     HTMLCanvasElement;\n  private ctx:        CanvasRenderingContext2D;\n\n  /* Colores */\n  private wr: number; private wg: number; private wb: number;\n  private rr: number; private rg: number; private rb: number;\n\n  /* Estado */\n  private fill       = 0;\n  private targetFill = 0;\n  private fillSpeed  = 0.032;\n  private shimmerX   = -1;\n  private t          = 0;\n  private hovered    = false;\n  private raf        = 0;\n\n  /* Física de onda */\n  private readonly A  = 3.5;\n  private readonly f1 = 0.038;\n  private readonly f2 = 0.063;\n  private readonly s1 = 1.8;\n  private readonly s2 = 1.2;\n\n  private W = 0;\n  private H = 0;\n\n  private ripples: Array<{\n    x: number; y: number;\n    radius: number; maxRadius: number;\n    speed: number; lineWidth: number;\n    opacity: number;\n  }> = [];\n\n  constructor(\n    btn: HTMLElement,\n    canvas: HTMLCanvasElement,\n    water: [number, number, number],\n    ripple: [number, number, number],\n  ) {\n    this.btn    = btn;\n    this.canvas = canvas;\n    this.ctx    = canvas.getContext('2d')!;\n    [this.wr, this.wg, this.wb] = water;\n    [this.rr, this.rg, this.rb] = ripple;\n\n    this.resize();\n    this.loop();\n  }\n\n  /* ── Dimensiones con DPR ── */\n  resize(): void {\n    const r   = this.btn.getBoundingClientRect();\n    const dpr = window.devicePixelRatio || 1;\n    this.W = r.width;\n    this.H = r.height;\n    this.canvas.width          = this.W * dpr;\n    this.canvas.height         = this.H * dpr;\n    this.canvas.style.width    = `${this.W}px`;\n    this.canvas.style.height   = `${this.H}px`;\n    this.ctx.scale(dpr, dpr);\n  }\n\n  /* ── Spawn de ripple ── */\n  spawnRipple(\n    x: number, y: number,\n    { speed = 2.2, maxR, lineWidth = 1.2 }:\n    { speed?: number; maxR?: number; lineWidth?: number } = {},\n  ): void {\n    const diag = Math.sqrt(this.W ** 2 + this.H ** 2);\n    this.ripples.push({\n      x, y,\n      radius:    0,\n      maxRadius: maxR ?? diag * 0.72,\n      speed,\n      lineWidth,\n      opacity:   0,\n    });\n  }\n\n  /* ── Eventos públicos — llamados por el componente Lit ── */\n  onMouseEnter(x: number, y: number): void {\n    this.hovered    = true;\n    this.targetFill = 1;\n    this.fillSpeed  = 0.028;\n    this.shimmerX   = -0.3;\n\n    this.spawnRipple(x, y, { speed: 3.2, lineWidth: 1.8 });\n    setTimeout((): void => this.spawnRipple(x, y, { speed: 2.0, lineWidth: 1.1 }), 80);\n    setTimeout((): void => this.spawnRipple(x, y, { speed: 1.3, lineWidth: 0.7 }), 180);\n  }\n\n  onMouseLeave(): void {\n    this.hovered    = false;\n    this.targetFill = 0;\n    this.fillSpeed  = 0.048;\n  }\n\n  onMouseDown(cx: number, cy: number): void {\n    for (let i = 0; i < 3; i++) {\n      setTimeout((): void => {\n        this.spawnRipple(cx, cy, {\n          speed:     4 - i * 0.8,\n          maxR:      this.W * 0.5,\n          lineWidth: 2 - i * 0.4,\n        });\n      }, i * 40);\n    }\n  }\n\n  /* ── Dibujo ── */\n  private drawWave(): void {\n    const { ctx, W, H, A, f1, f2, s1, s2, t, wr, wg, wb, fill } = this;\n    if (fill <= 0.001) return;\n\n    const baseY = H * (1 - fill);\n\n    /* Cuerpo sinusoidal */\n    ctx.beginPath();\n    ctx.moveTo(0, H);\n    ctx.lineTo(0, baseY);\n    for (let x = 0; x <= W; x++) {\n      const y = baseY\n        + A * Math.sin(x * f1 + t * s1)\n        + A * 0.45 * Math.sin(x * f2 - t * s2);\n      ctx.lineTo(x, y);\n    }\n    ctx.lineTo(W, H);\n    ctx.closePath();\n\n    /* Gradiente vertical */\n    const grad = ctx.createLinearGradient(0, baseY - A * 2, 0, H);\n    grad.addColorStop(0,   `rgba(${wr},${wg},${wb},0.82)`);\n    grad.addColorStop(0.4, `rgba(${wr},${wg},${wb},0.92)`);\n    grad.addColorStop(1,   `rgba(${wr},${wg},${wb},0.98)`);\n    ctx.fillStyle = grad;\n    ctx.fill();\n\n    /* Shimmer diagonal */\n    if (this.shimmerX > -0.5 && this.shimmerX < 1.5) {\n      const sx = W * this.shimmerX;\n      const sg = ctx.createLinearGradient(sx - 40, 0, sx + 40, 0);\n      sg.addColorStop(0,   'rgba(255,255,255,0)');\n      sg.addColorStop(0.5, 'rgba(255,255,255,0.12)');\n      sg.addColorStop(1,   'rgba(255,255,255,0)');\n      ctx.fillStyle = sg;\n      ctx.fillRect(0, Math.max(0, baseY - 4), W, H - Math.max(0, baseY - 4));\n    }\n  }\n\n  private drawRipples(): void {\n    const { ctx, rr, rg, rb } = this;\n    this.ripples = this.ripples.filter(r => r.opacity > 0 || r.radius === 0);\n\n    for (const r of this.ripples) {\n      r.radius += r.speed;\n      r.opacity = Math.max(0, 1 - r.radius / r.maxRadius);\n\n      /* Anillo principal */\n      ctx.beginPath();\n      ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);\n      ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.9})`;\n      ctx.lineWidth   = r.lineWidth;\n      ctx.stroke();\n\n      /* Segundo anillo interior más fino */\n      if (r.radius > 6) {\n        ctx.beginPath();\n        ctx.arc(r.x, r.y, r.radius * 0.65, 0, Math.PI * 2);\n        ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.4})`;\n        ctx.lineWidth   = r.lineWidth * 0.5;\n        ctx.stroke();\n      }\n    }\n\n    /* Limpiar ripples agotados */\n    this.ripples = this.ripples.filter(r => r.opacity > 0);\n  }\n\n  /* ── Loop principal ── */\n  private loop(): void {\n    const tick = (): void => {\n      this.raf = requestAnimationFrame(tick);\n      const { ctx, W, H } = this;\n      this.t += 0.04;\n\n      /* Lerp fill */\n      const diff = this.targetFill - this.fill;\n      this.fill += diff * this.fillSpeed * 2.8;\n      if (Math.abs(diff) < 0.0005) this.fill = this.targetFill;\n\n      /* Shimmer avanza */\n      if (this.hovered && this.shimmerX < 1.6) {\n        this.shimmerX += 0.012;\n      }\n\n      /* Skip si todo en reposo */\n      if (this.fill <= 0.001 && this.ripples.length === 0) return;\n\n      ctx.clearRect(0, 0, W, H);\n      this.drawWave();\n      this.drawRipples();\n    };\n    this.raf = requestAnimationFrame(tick);\n  }\n\n  /* ── Cleanup ── */\n  destroy(): void {\n    cancelAnimationFrame(this.raf);\n  }\n}\n\n\n/* ============================================================\n   LIB-BUTTON-LIQUID — Web Component\n   ============================================================ */\n\n/**\n * Botón con física de agua en canvas.\n *\n * @prop variant  — 'ink' | 'washi' | 'kaki' | 'celadon' | 'ghost' | 'danger'\n * @prop size     — 'sm' | 'md' | 'lg'\n * @prop disabled — bloquea interacción y detiene el canvas\n * @prop loading  — muestra spinner, bloquea interacción\n * @prop dark     — ajusta colores en surface oscura\n * @prop block    — ancho 100%\n *\n * Slots: default · prefix · suffix\n * @fires ui-lib-click — {detail: { originalEvent: MouseEvent }}\n */\n@customElement('lib-button-liquid')\nexport class LibButtonLiquid extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(liquidCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: LiquidVariant = 'ink';\n\n  @property({ type: String, reflect: true })\n  size: LiquidSize = 'md';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  block = false;\n\n  @query('.btn')\n  declare private _btn: HTMLButtonElement;\n\n  private _physics: WaterPhysics | null = null;\n  private _canvas:  HTMLCanvasElement   | null = null;\n  private _ro:      ResizeObserver      | null = null;\n\n  /* ── Lifecycle ── */\n\n  override firstUpdated(): void {\n    this._initCanvas();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    /* Si cambia la variante, reconstruir physics con nueva paleta */\n    if (changed.has('variant')) {\n      this._destroyCanvas();\n      this._initCanvas();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._destroyCanvas();\n    this._ro?.disconnect();\n  }\n\n  /* ── Canvas setup ── */\n\n  private _initCanvas(): void {\n    if (!this._btn) return;\n\n    /* Crear canvas y añadirlo como primer hijo del botón (bajo .btn-inner) */\n    const canvas   = document.createElement('canvas');\n    this._canvas   = canvas;\n    this._btn.insertBefore(canvas, this._btn.firstChild);\n\n    const palette  = LIQUID_PALETTES[this.variant];\n    this._physics  = new WaterPhysics(this._btn, canvas, palette.water, palette.ripple);\n\n    /* ResizeObserver para adaptar canvas al tamaño real del botón */\n    this._ro = new ResizeObserver((): void => this._physics?.resize());\n    this._ro.observe(this._btn);\n  }\n\n  private _destroyCanvas(): void {\n    this._physics?.destroy();\n    this._physics = null;\n    this._canvas?.remove();\n    this._canvas = null;\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  /* ── Eventos del canvas — llamados desde el template ── */\n\n  _onMouseEnter(e: MouseEvent): void {\n    if (this.disabled || this.loading) return;\n    const rect = this._btn.getBoundingClientRect();\n    this._physics?.onMouseEnter(e.clientX - rect.left, e.clientY - rect.top);\n  }\n\n  _onMouseLeave(): void {\n    this._physics?.onMouseLeave();\n  }\n\n  _onMouseDown(e: MouseEvent): void {\n    if (this.disabled || this.loading) return;\n    const rect = this._btn.getBoundingClientRect();\n    this._physics?.onMouseDown(e.clientX - rect.left, e.clientY - rect.top);\n\n    this.dispatchEvent(new CustomEvent('ui-lib-click', {\n      detail: { originalEvent: e },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Render ── */\n  protected override render(): TemplateResult {\n    return buttonLiquidTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-button-liquid': LibButtonLiquid;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index39.js

@@ -0,0 +1,167 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import sharedTokens from "./index196.js";
+import glitchCss from "./index263.js";
+import { textGlitchTemplate } from "./index264.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const KANA = "ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヲ ン ガ ギ グ ゲ ゴ " + "ザ ジ ズ ゼ ゾ ダ ヂ ヅ デ ド バ ビ ブ ベ ボ 渋 液 美 乱 進 間 静 陰 影 黒 白 墨 和 侘".split(" ");
+let LibTextGlitch = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this.variant = "slice";
+    this.trigger = "hover";
+    this.active = false;
+    this._running = false;
+    this._boundMouseEnter = () => {
+      this._decodePlay();
+    };
+  }
+  /* ── Lifecycle ──────────────────────────────────────────── */
+  connectedCallback() {
+    super.connectedCallback();
+    this._setupDecode();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mouseenter", this._boundMouseEnter);
+    clearTimeout(this._alwaysTimer);
+  }
+  updated(changed) {
+    const reInit = changed.has("variant") || changed.has("trigger") || changed.has("text");
+    if (reInit) {
+      this.removeEventListener("mouseenter", this._boundMouseEnter);
+      clearTimeout(this._alwaysTimer);
+      this._running = false;
+      this._setupDecode();
+    }
+  }
+  render() {
+    return textGlitchTemplate({ text: this.text, variant: this.variant });
+  }
+  /* ── API pública ────────────────────────────────────────── */
+  /**
+   * Reproduce el efecto manualmente una vez.
+   * - Para `decode`: lanza el scramble de kanji.
+   * - Para `scan` / `redact`: activa [active] y lo retira al terminar.
+   * - Para `slice` / `shift` / `noise`: activa [active] (CSS bucle).
+   */
+  play() {
+    if (this.variant === "decode") {
+      this._decodePlay();
+      return;
+    }
+    this.active = true;
+    if (this.variant === "scan" || this.variant === "redact") {
+      const dur = this.variant === "scan" ? 620 : 720;
+      setTimeout(() => {
+        this.active = false;
+      }, dur);
+    }
+  }
+  /** Detiene el bucle `trigger="always"` y desactiva [active]. */
+  stop() {
+    clearTimeout(this._alwaysTimer);
+    this._running = false;
+    this.active = false;
+  }
+  /* ── Decode engine ──────────────────────────────────────── */
+  _setupDecode() {
+    if (this.variant !== "decode") return;
+    if (this.trigger === "hover") {
+      this.addEventListener("mouseenter", this._boundMouseEnter);
+    } else {
+      this.updateComplete.then(() => {
+        this._scheduleAlwaysDecode();
+      });
+    }
+  }
+  _scheduleAlwaysDecode() {
+    this._decodePlay();
+    const pause = Math.max([...this.text].length * 55 * 1.5, 400) + 2e3;
+    this._alwaysTimer = setTimeout(() => {
+      this._scheduleAlwaysDecode();
+    }, pause);
+  }
+  /**
+   * Motor de decodificación kanji.
+   *
+   * Cada char span se sustituye por un katakana/kanji aleatorio
+   * durante un número variable de frames, y luego se resuelve al
+   * carácter original. El orden de resolución es estocástico.
+   */
+  _decodePlay() {
+    if (this._running) return;
+    this._running = true;
+    const chars = Array.from(
+      this.renderRoot.querySelectorAll(".char")
+    );
+    if (chars.length === 0) {
+      this._running = false;
+      return;
+    }
+    const SCRAMBLE_CYCLES = 6;
+    const FRAME_MS = 55;
+    const delays = chars.map(
+      () => Math.floor(Math.random() * chars.length * SCRAMBLE_CYCLES * 0.6) + SCRAMBLE_CYCLES
+    );
+    let frame = 0;
+    const total = Math.max(...delays) + 2;
+    const tick = () => {
+      chars.forEach((span, i) => {
+        const orig = span.dataset["original"] ?? "";
+        if (frame < (delays[i] ?? 0)) {
+          if (orig.trim() === "" || orig === "·" || orig === "-") return;
+          span.textContent = KANA[Math.floor(Math.random() * KANA.length)] ?? orig;
+          span.classList.add("is-scrambling");
+        } else {
+          span.textContent = orig;
+          span.classList.remove("is-scrambling");
+        }
+      });
+      frame++;
+      if (frame < total) {
+        setTimeout(tick, FRAME_MS);
+      } else {
+        chars.forEach((span) => {
+          span.textContent = span.dataset["original"] ?? "";
+          span.classList.remove("is-scrambling");
+        });
+        this._running = false;
+      }
+    };
+    tick();
+  }
+};
+LibTextGlitch.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(glitchCss)}`
+];
+__decorateClass([
+  property({ type: String })
+], LibTextGlitch.prototype, "text", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTextGlitch.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTextGlitch.prototype, "trigger", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTextGlitch.prototype, "active", 2);
+LibTextGlitch = __decorateClass([
+  customElement("lib-text-glitch")
+], LibTextGlitch);
+export {
+  LibTextGlitch
+};
+//# sourceMappingURL=index39.js.map

package/dist/index39.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index39.js","sources":["../src/components/atoms/text-glich/lib-text-glitch.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport glitchCss from './lib-text-glitch.css?inline';\nimport { textGlitchTemplate } from './lib-text-glitch.html';\n\n/* ── Tipos públicos ─────────────────────────────────────────── */\n\n/** Variante visual del efecto de glitch. */\nexport type TextGlitchVariant = 'slice' | 'scan' | 'shift' | 'decode' | 'redact' | 'noise';\n\n/**\n * Modo de activación del efecto.\n * - `hover`  → se activa al pasar el cursor (default).\n * - `always` → se activa de forma continua al montar el componente.\n */\nexport type TextGlitchTrigger = 'hover' | 'always';\n\n/* ── Pool de caracteres para el decode ──────────────────────── */\n\nconst KANA =\n  'ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ' +\n  'ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヲ ン ガ ギ グ ゲ ゴ ' +\n  'ザ ジ ズ ゼ ゾ ダ ヂ ヅ デ ド バ ビ ブ ベ ボ 渋 液 美 乱 進 間 静 陰 影 黒 白 墨 和 侘'.split(' ');\n\n/**\n * @element lib-text-glitch\n *\n * @prop {string}              text    - Texto a renderizar y distorsionar.\n * @prop {TextGlitchVariant}   variant - Efecto visual: slice | scan | shift | decode | redact | noise.\n * @prop {TextGlitchTrigger}   trigger - Modo de activación: hover | always.\n * @prop {boolean}             active  - Activa el efecto programáticamente (reflectado en atributo).\n *\n * @method play()  - Reproduce el efecto una vez (scan / redact / decode).\n * @method stop()  - Detiene el bucle `trigger=\"always\"`.\n */\n@customElement('lib-text-glitch')\nexport class LibTextGlitch extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(glitchCss)}`,\n  ];\n\n  /* ── Props ──────────────────────────────────────────────── */\n\n  @property({ type: String })\n  text: string = '';\n\n  @property({ type: String, reflect: true })\n  variant: TextGlitchVariant = 'slice';\n\n  @property({ type: String, reflect: true })\n  trigger: TextGlitchTrigger = 'hover';\n\n  /** Activa el efecto desde el exterior (CSS reacciona a [active]). */\n  @property({ type: Boolean, reflect: true })\n  active: boolean = false;\n\n  /* ── Estado interno ─────────────────────────────────────── */\n\n  private _running = false;\n  private _alwaysTimer?: ReturnType<typeof setTimeout>;\n\n  /* Bound handler reutilizable para poder hacer removeEventListener */\n  private readonly _boundMouseEnter = (): void => { this._decodePlay(); };\n\n  /* ── Lifecycle ──────────────────────────────────────────── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._setupDecode();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('mouseenter', this._boundMouseEnter);\n    clearTimeout(this._alwaysTimer);\n  }\n\n  override updated(changed: PropertyValues): void {\n    const reInit =\n      changed.has('variant') ||\n      changed.has('trigger') ||\n      changed.has('text');\n\n    if (reInit) {\n      /* Limpieza del ciclo anterior */\n      this.removeEventListener('mouseenter', this._boundMouseEnter);\n      clearTimeout(this._alwaysTimer);\n      this._running = false;\n      this._setupDecode();\n    }\n  }\n\n  override render(): TemplateResult {\n    return textGlitchTemplate({ text: this.text, variant: this.variant });\n  }\n\n  /* ── API pública ────────────────────────────────────────── */\n\n  /**\n   * Reproduce el efecto manualmente una vez.\n   * - Para `decode`: lanza el scramble de kanji.\n   * - Para `scan` / `redact`: activa [active] y lo retira al terminar.\n   * - Para `slice` / `shift` / `noise`: activa [active] (CSS bucle).\n   */\n  play(): void {\n    if (this.variant === 'decode') {\n      this._decodePlay();\n      return;\n    }\n    this.active = true;\n    if (this.variant === 'scan' || this.variant === 'redact') {\n      const dur = this.variant === 'scan' ? 620 : 720;\n      setTimeout(() => { this.active = false; }, dur);\n    }\n  }\n\n  /** Detiene el bucle `trigger=\"always\"` y desactiva [active]. */\n  stop(): void {\n    clearTimeout(this._alwaysTimer);\n    this._running = false;\n    this.active = false;\n  }\n\n  /* ── Decode engine ──────────────────────────────────────── */\n\n  private _setupDecode(): void {\n    if (this.variant !== 'decode') return;\n\n    if (this.trigger === 'hover') {\n      this.addEventListener('mouseenter', this._boundMouseEnter);\n    } else {\n      /* always: esperamos el primer render completo para tener los .char */\n      this.updateComplete.then(() => { this._scheduleAlwaysDecode(); });\n    }\n  }\n\n  private _scheduleAlwaysDecode(): void {\n    this._decodePlay();\n    /* Pausa entre repeticiones: proporcional a la longitud del texto */\n    const pause = Math.max([...this.text].length * 55 * 1.5, 400) + 2000;\n    this._alwaysTimer = setTimeout(() => { this._scheduleAlwaysDecode(); }, pause);\n  }\n\n  /**\n   * Motor de decodificación kanji.\n   *\n   * Cada char span se sustituye por un katakana/kanji aleatorio\n   * durante un número variable de frames, y luego se resuelve al\n   * carácter original. El orden de resolución es estocástico.\n   */\n  private _decodePlay(): void {\n    if (this._running) return;\n    this._running = true;\n\n    const chars = Array.from(\n      this.renderRoot.querySelectorAll<HTMLElement>('.char')\n    );\n\n    if (chars.length === 0) {\n      this._running = false;\n      return;\n    }\n\n    const SCRAMBLE_CYCLES = 6;\n    const FRAME_MS        = 55;\n\n    /* Delay estocástico por carácter — no resuelven de izquierda a derecha */\n    const delays = chars.map(() =>\n      Math.floor(Math.random() * chars.length * SCRAMBLE_CYCLES * 0.6) + SCRAMBLE_CYCLES\n    );\n\n    let frame = 0;\n    const total = Math.max(...delays) + 2;\n\n    const tick = (): void => {\n      chars.forEach((span, i) => {\n        const orig = span.dataset['original'] ?? '';\n\n        if (frame < (delays[i] ?? 0)) {\n          /* Espacios y puntuación — no se scramblea */\n          if (orig.trim() === '' || orig === '·' || orig === '-') return;\n          span.textContent = KANA[Math.floor(Math.random() * KANA.length)] ?? orig;\n          span.classList.add('is-scrambling');\n        } else {\n          span.textContent = orig;\n          span.classList.remove('is-scrambling');\n        }\n      });\n\n      frame++;\n\n      if (frame < total) {\n        setTimeout(tick, FRAME_MS);\n      } else {\n        /* Garantía final — todos al original */\n        chars.forEach(span => {\n          span.textContent = span.dataset['original'] ?? '';\n          span.classList.remove('is-scrambling');\n        });\n        this._running = false;\n      }\n    };\n\n    tick();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-text-glitch': LibTextGlitch;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index4.js

@@ -0,0 +1,114 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import "./index22.js";
+import { copyButtonTemplate } from "./index194.js";
+import copyButtonCss from "./index195.js";
+import sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const COPIED_DURATION = 1800;
+let LibCopyButton = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._resetTimer = null;
+    this.value = "";
+    this.variant = "ghost";
+    this.size = "md";
+    this.iconOnly = false;
+    this.label = "Copiar";
+    this.successLabel = "Copiado";
+    this.tooltip = false;
+    this.disabled = false;
+    this._copied = false;
+  }
+  /** Refleja _copied como atributo para que los selectores CSS :host([copied]) funcionen */
+  updated(changed) {
+    if (changed.has("_copied")) {
+      this.toggleAttribute("copied", this._copied);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resetTimer) clearTimeout(this._resetTimer);
+  }
+  async _handleClick() {
+    if (!this.value || this.disabled || this._copied) return;
+    try {
+      await navigator.clipboard.writeText(this.value);
+      this._copied = true;
+      this.dispatchEvent(
+        new CustomEvent("lib-copy", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+      if (this._resetTimer) clearTimeout(this._resetTimer);
+      this._resetTimer = setTimeout(() => {
+        this._copied = false;
+      }, COPIED_DURATION);
+    } catch (err) {
+      console.error("[lib-copy-button] Error al copiar:", err);
+    }
+  }
+  render() {
+    return copyButtonTemplate({
+      value: this.value,
+      variant: this.variant,
+      size: this.size,
+      iconOnly: this.iconOnly,
+      label: this.label,
+      successLabel: this.successLabel,
+      tooltip: this.tooltip,
+      copied: this._copied,
+      disabled: this.disabled,
+      onClick: this._handleClick.bind(this)
+    });
+  }
+};
+LibCopyButton.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(copyButtonCss)}`
+];
+__decorateClass([
+  property({ type: String })
+], LibCopyButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibCopyButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibCopyButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-only" })
+], LibCopyButton.prototype, "iconOnly", 2);
+__decorateClass([
+  property({ type: String })
+], LibCopyButton.prototype, "label", 2);
+__decorateClass([
+  property({ type: String, attribute: "success-label" })
+], LibCopyButton.prototype, "successLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibCopyButton.prototype, "tooltip", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibCopyButton.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], LibCopyButton.prototype, "_copied", 2);
+LibCopyButton = __decorateClass([
+  customElement("lib-copy-button")
+], LibCopyButton);
+export {
+  LibCopyButton
+};
+//# sourceMappingURL=index4.js.map

package/dist/index4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index4.js","sources":["../src/components/atoms/copy-button/lib-copy-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../../atoms/icon/lib-icon.component';\nimport type { LibCopyVariant, LibCopySize } from './lib-copy-button.html';\nimport { copyButtonTemplate } from './lib-copy-button.html';\nimport copyButtonCss from './lib-copy-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/** Tiempo en ms que el estado copiado permanece activo */\nconst COPIED_DURATION = 1800;\n\n/**\n * @element lib-copy-button\n *\n * Boton que copia texto al portapapeles y confirma la accion\n * con un checkmark animado (crossfade idle/copied con ease-bounce).\n *\n * @fires lib-copy - Emitido al copiar con exito. detail: { value: string }\n *\n * @example\n * <lib-copy-button value=\"npm install @shibui-ui/ui\"></lib-copy-button>\n * <lib-copy-button value=\"sk-ant-api03-xyz\" variant=\"outlined\" tooltip></lib-copy-button>\n * <lib-copy-button value=\"copy me\" variant=\"ghost\" icon-only size=\"sm\"></lib-copy-button>\n */\n@customElement('lib-copy-button')\nexport class LibCopyButton extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(copyButtonCss)}`,\n  ];\n\n  private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Texto que se copia al portapapeles */\n  @property({ type: String })\n  value = '';\n\n  /** Variante visual */\n  @property({ type: String, reflect: true })\n  variant: LibCopyVariant = 'ghost';\n\n  /** Tamaño */\n  @property({ type: String, reflect: true })\n  size: LibCopySize = 'md';\n\n  /** Modo icono-solo (sin label, cuadrado) */\n  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })\n  iconOnly = false;\n\n  /** Label en estado idle */\n  @property({ type: String })\n  label = 'Copiar';\n\n  /** Label en estado copiado */\n  @property({ type: String, attribute: 'success-label' })\n  successLabel = 'Copiado';\n\n  /** Muestra un tooltip \"Copiado\" al copiar */\n  @property({ type: Boolean, reflect: true })\n  tooltip = false;\n\n  /** Estado deshabilitado */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Estado interno — activa el crossfade y el tooltip */\n  @state()\n  private _copied = false;\n\n  /** Refleja _copied como atributo para que los selectores CSS :host([copied]) funcionen */\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('_copied')) {\n      this.toggleAttribute('copied', this._copied);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._resetTimer) clearTimeout(this._resetTimer);\n  }\n\n  private async _handleClick(): Promise<void> {\n    if (!this.value || this.disabled || this._copied) return;\n\n    try {\n      await navigator.clipboard.writeText(this.value);\n      this._copied = true;\n\n      this.dispatchEvent(\n        new CustomEvent('lib-copy', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n\n      if (this._resetTimer) clearTimeout(this._resetTimer);\n      this._resetTimer = setTimeout(() => {\n        this._copied = false;\n      }, COPIED_DURATION);\n\n    } catch (err) {\n      console.error('[lib-copy-button] Error al copiar:', err);\n    }\n  }\n\n  override render(): TemplateResult {\n    return copyButtonTemplate({\n      value: this.value,\n      variant: this.variant,\n      size: this.size,\n      iconOnly: this.iconOnly,\n      label: this.label,\n      successLabel: this.successLabel,\n      tooltip: this.tooltip,\n      copied: this._copied,\n      disabled: this.disabled,\n      onClick: this._handleClick.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-copy-button': LibCopyButton;\n  }\n}"],"names":[],"mappings":"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"}