@erplora/outfitkit 0.1.1

package/dist/ok-app-launcher.js

@@ -0,0 +1,396 @@
+import { LitElement, css, render, nothing, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LABELS = {
+  apps: "Apps",
+  empty: "No apps",
+  close: "Close"
+};
+class OkAppLauncher extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.apps = [];
+    this.labels = {};
+    this.open = false;
+    this.shown = false;
+    this.onKeydown = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    this.portalRoot = null;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.6));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
+      --panel-bg: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #ffffff)));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.12));
+      --border-radius: var(--ok-radius, 12px);
+      --shadow: var(--ok-shadow, 0 -8px 28px rgba(0, 0, 0, 0.18));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+      --scrim: var(--ok-scrim, rgba(0, 0, 0, 0.4));
+
+      /* INLINE: solo lo que mide el botón. */
+      display: inline-block;
+      position: relative;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    /* Disparador: botón con icono de rejilla. */
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      border-radius: 50%;
+      transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease),
+        border-color var(--ok-transition, 150ms ease), box-shadow var(--ok-transition, 150ms ease),
+        transform 120ms ease;
+    }
+    @media (hover: hover) {
+      .trigger:hover {
+        background: var(--hover-bg);
+      }
+    }
+    .trigger:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    .trigger ion-icon {
+      font-size: 1.4rem;
+    }
+
+    /* Scrim a pantalla completa tras la hoja. */
+    .scrim {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      background: var(--scrim);
+      opacity: 0;
+      transition: opacity var(--ok-transition, 200ms ease);
+    }
+    .scrim.shown {
+      opacity: 1;
+    }
+
+    /* Hoja de acción: anclada abajo, full-width, esquinas superiores redondeadas, desliza hacia
+       arriba. position:fixed para cubrir el viewport con independencia de los ancestros. */
+    .sheet {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1001;
+      max-height: 85vh;
+      overflow-y: auto;
+      padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
+      background: var(--panel-bg);
+      border-top-left-radius: var(--ok-sheet-radius, 16px);
+      border-top-right-radius: var(--ok-sheet-radius, 16px);
+      box-shadow: var(--shadow);
+      box-sizing: border-box;
+      transform: translateY(100%);
+      transition: transform var(--ok-transition, 260ms cubic-bezier(0.32, 0.72, 0, 1));
+    }
+    .sheet.shown {
+      transform: translateY(0);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .scrim,
+      .sheet {
+        transition: none;
+      }
+    }
+    /* Barra/agarre superior, decorativa (estilo sheet modal de Ionic). */
+    .handle {
+      width: 36px;
+      height: 5px;
+      margin: 0.25rem auto 0.5rem;
+      border-radius: 999px;
+      background: var(--border-color);
+    }
+    /* Cabecera de la hoja: título + botón cerrar. */
+    .head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      padding: 0 0.25rem 0.5rem;
+    }
+    .head .title {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: var(--color);
+    }
+    .close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      height: 34px;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: var(--color-muted);
+      cursor: pointer;
+      border-radius: 50%;
+      transition: background-color var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .close-btn:hover {
+        background: var(--hover-bg);
+      }
+    }
+    .close-btn ion-icon {
+      font-size: 1.3rem;
+    }
+
+    /* Rejilla de apps: auto-fit en función del ancho (más columnas en pantallas anchas). */
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
+      gap: 0.5rem;
+      padding-bottom: 0.25rem;
+    }
+    .app {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.75rem 0.3rem;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+      border-radius: 12px;
+      text-align: center;
+      text-decoration: none;
+      transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease),
+        border-color var(--ok-transition, 150ms ease), box-shadow var(--ok-transition, 150ms ease),
+        transform 120ms ease;
+    }
+    @media (hover: hover) {
+      .app:hover {
+        background: var(--hover-bg);
+        transform: translateY(-1px);
+      }
+    }
+    .app:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .trigger:hover,
+      .trigger:active,
+      .app:hover,
+      .app:active {
+        transform: none;
+      }
+    }
+    /* Cuadro del icono grande (color de la app o primary por defecto). */
+    .app .box {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 52px;
+      height: 52px;
+      border-radius: 14px;
+      background: var(--app-color, var(--primary-color));
+      color: var(--primary-contrast);
+    }
+    .app .box ion-icon {
+      font-size: 1.7rem;
+    }
+    .app .label {
+      font-size: 0.78rem;
+      line-height: 1.2;
+      color: var(--color-muted);
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .empty {
+      padding: 1.5rem 0.75rem;
+      font-size: 0.85rem;
+      color: var(--color-muted);
+      text-align: center;
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unbind();
+    const host = this.portalRoot?.host;
+    this.portalRoot = null;
+    if (host && host.parentNode) host.parentNode.removeChild(host);
+  }
+  // Crea (una vez) el portal: un div en `document.body` con shadow propio que ADOPTA la misma hoja
+  // de estilos del componente, de modo que `.scrim`/`.sheet`/`.app` se ven idénticos fuera del host.
+  ensurePortal() {
+    if (this.portalRoot) return this.portalRoot;
+    const host = document.createElement("div");
+    host.setAttribute("data-ok-app-launcher-portal", "");
+    document.body.appendChild(host);
+    const root = host.attachShadow({ mode: "open" });
+    const styles = this.constructor.elementStyles ?? [];
+    root.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet).filter((s) => !!s);
+    this.portalRoot = root;
+    return root;
+  }
+  // Renderiza el overlay (o nada) en el portal. Se llama tras cada update del host. No crea el
+  // portal hasta la primera apertura (evita divs vacíos en el body por cada launcher montado).
+  updated() {
+    if (!this.open && !this.portalRoot) return;
+    render(this.open ? this.overlayTemplate() : nothing, this.ensurePortal());
+  }
+  bind() {
+    document.addEventListener("keydown", this.onKeydown);
+  }
+  unbind() {
+    document.removeEventListener("keydown", this.onKeydown);
+  }
+  toggle() {
+    this.open ? this.close() : this.openSheet();
+  }
+  openSheet() {
+    if (this.open) return;
+    this.open = true;
+    this.bind();
+    requestAnimationFrame(() => requestAnimationFrame(() => this.shown = true));
+    this.dispatchEvent(
+      new CustomEvent("ok-open", { detail: { open: true }, bubbles: true, composed: true })
+    );
+  }
+  close() {
+    if (!this.open) return;
+    this.unbind();
+    this.shown = false;
+    const sheet = this.portalRoot?.querySelector(".sheet");
+    const finish = () => {
+      this.open = false;
+    };
+    if (sheet && !this.prefersReducedMotion()) {
+      sheet.addEventListener("transitionend", finish, { once: true });
+    } else {
+      finish();
+    }
+    this.dispatchEvent(
+      new CustomEvent("ok-open", { detail: { open: false }, bubbles: true, composed: true })
+    );
+  }
+  prefersReducedMotion() {
+    return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  }
+  // Selecciona una app: si tiene `href` navega; si no, emite `ok-app-select`. Siempre cierra.
+  selectApp(app) {
+    if (app.href) {
+      this.close();
+      window.location.href = app.href;
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("ok-app-select", {
+        detail: { id: app.id, app },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.close();
+  }
+  // Un icono es «SVG ya resuelto» si es un string `<svg…>` o un `data:` URI; entonces va a la
+  // prop `icon` de ion-icon (no a `name`), que es como los hosts con iconos horneados/offline
+  // los pintan sin tocar la red.
+  isResolvedSvg(icon) {
+    return /^\s*</.test(icon) || icon.startsWith("data:");
+  }
+  renderApp(app) {
+    const boxStyle = app.color ? `--app-color:${app.color}` : "";
+    const icon = app.icon ?? "apps-outline";
+    return html`<button
+      type="button"
+      class="app"
+      style=${boxStyle}
+      role="menuitem"
+      @click=${() => this.selectApp(app)}
+    >
+      <span class="box">
+        ${this.isResolvedSvg(icon) ? html`<ion-icon .icon=${icon}></ion-icon>` : html`<ion-icon .name=${icon}></ion-icon>`}
+      </span>
+      <span class="label">${app.label}</span>
+    </button>`;
+  }
+  render() {
+    return html`
+      <button
+        type="button"
+        class="trigger"
+        aria-haspopup="menu"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-label=${this.t.apps}
+        @click=${() => this.toggle()}
+      >
+        <ion-icon name="apps-outline"></ion-icon>
+      </button>
+    `;
+  }
+  // Overlay (scrim + hoja inferior). Se renderiza en el portal de `document.body` vía `updated()`.
+  overlayTemplate() {
+    return html`
+      <div class="scrim ${this.shown ? "shown" : ""}" @click=${() => this.close()}></div>
+      <div class="sheet ${this.shown ? "shown" : ""}" role="menu" aria-label=${this.t.apps}>
+        <div class="handle"></div>
+        <div class="head">
+          <span class="title">${this.t.apps}</span>
+          <button
+            type="button"
+            class="close-btn"
+            aria-label=${this.t.close}
+            @click=${() => this.close()}
+          >
+            <ion-icon name="close-outline"></ion-icon>
+          </button>
+        </div>
+        ${this.apps.length ? html`<div class="grid">${this.apps.map((app) => this.renderApp(app))}</div>` : html`<div class="empty">${this.t.empty}</div>`}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkAppLauncher.prototype, "apps");
+__decorateClass([
+  property({ attribute: false })
+], OkAppLauncher.prototype, "labels");
+__decorateClass([
+  state()
+], OkAppLauncher.prototype, "open");
+__decorateClass([
+  state()
+], OkAppLauncher.prototype, "shown");
+define("ok-app-launcher", OkAppLauncher);
+export {
+  OkAppLauncher
+};

package/dist/ok-audio.js

@@ -0,0 +1,308 @@
+import { LitElement, css, html } from "lit";
+import { property, state, query } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LABELS = {
+  play: "Play",
+  pause: "Pause",
+  mute: "Mute",
+  unmute: "Unmute",
+  volume: "Volume"
+};
+class OkAudio extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.title = "";
+    this.labels = {};
+    this.playing = false;
+    this.current = 0;
+    this.duration = 0;
+    this.volume = 1;
+    this.muted = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.55));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --surface-bg: var(--ok-surface, var(--ion-card-background, #ffffff));
+      --track-bg: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.14));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.1));
+      --border-radius: var(--ok-radius, 10px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Por defecto ocupa el ancho del contenedor y es responsive. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    .player {
+      box-sizing: border-box;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.6rem 0.75rem;
+      background: var(--surface-bg);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+    }
+    .title {
+      font-size: 0.9rem;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .controls {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+    }
+    ion-button {
+      --padding-start: 0;
+      --padding-end: 0;
+      margin: 0;
+      flex: 0 0 auto;
+    }
+    .play ion-icon {
+      font-size: 1.4rem;
+    }
+    /* Barra de progreso clicable: ocupa el espacio flexible disponible. */
+    .progress {
+      position: relative;
+      flex: 1 1 auto;
+      min-width: 0;
+      height: 6px;
+      border-radius: 999px;
+      background: var(--track-bg);
+      cursor: pointer;
+    }
+    .progress .fill {
+      position: absolute;
+      inset: 0 auto 0 0;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--primary-color);
+      width: 0%;
+    }
+    .progress .knob {
+      position: absolute;
+      top: 50%;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--primary-color);
+      transform: translate(-50%, -50%);
+      left: 0%;
+    }
+    .time {
+      flex: 0 0 auto;
+      font-size: 0.78rem;
+      color: var(--color-muted);
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+    /* Bloque de volumen: el slider sólo se ve con espacio suficiente. */
+    .volume {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      flex: 0 0 auto;
+    }
+    .volume input[type='range'] {
+      width: 70px;
+      accent-color: var(--primary-color);
+      cursor: pointer;
+    }
+    /* En contenedores estrechos se oculta el slider de volumen (queda el mute). */
+    @media (max-width: 360px) {
+      .volume input[type='range'] {
+        display: none;
+      }
+    }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Alterna play/pausa sobre el elemento nativo.
+  togglePlay() {
+    if (!this.audioEl) return;
+    if (this.audioEl.paused) this.audioEl.play();
+    else this.audioEl.pause();
+  }
+  // Sincroniza el estado al darle play y re-emite `ok-play`.
+  onPlay() {
+    this.playing = true;
+    this.dispatchEvent(
+      new CustomEvent("ok-play", {
+        detail: { currentTime: this.audioEl?.currentTime ?? 0 },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Sincroniza el estado al pausar y re-emite `ok-pause`.
+  onPause() {
+    this.playing = false;
+    this.dispatchEvent(
+      new CustomEvent("ok-pause", {
+        detail: { currentTime: this.audioEl?.currentTime ?? 0 },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Fin de la reproducción: re-emite `ok-ended`.
+  onEnded() {
+    this.playing = false;
+    this.dispatchEvent(
+      new CustomEvent("ok-ended", {
+        detail: { duration: this.duration },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onTimeUpdate() {
+    this.current = this.audioEl?.currentTime ?? 0;
+  }
+  onLoadedMeta() {
+    this.duration = this.audioEl?.duration ?? 0;
+  }
+  // Seek: traduce la posición del click dentro de la barra a un tiempo del audio.
+  seek(e) {
+    const bar = e.currentTarget;
+    const rect = bar.getBoundingClientRect();
+    const ratio = rect.width > 0 ? (e.clientX - rect.left) / rect.width : 0;
+    const clamped = Math.min(1, Math.max(0, ratio));
+    if (this.audioEl && this.duration) {
+      this.audioEl.currentTime = clamped * this.duration;
+    }
+  }
+  // Cambia el volumen desde el slider (0..1) y desactiva mute si subimos volumen.
+  onVolume(e) {
+    const v = Number(e.target.value);
+    this.volume = v;
+    if (this.audioEl) {
+      this.audioEl.volume = v;
+      this.audioEl.muted = v === 0;
+    }
+    this.muted = v === 0;
+  }
+  // Alterna mute conservando el último volumen.
+  toggleMute() {
+    this.muted = !this.muted;
+    if (this.audioEl) this.audioEl.muted = this.muted;
+  }
+  // Formatea segundos a m:ss (sin libs de fechas).
+  fmt(secs) {
+    if (!isFinite(secs) || secs < 0) secs = 0;
+    const m = Math.floor(secs / 60);
+    const s = Math.floor(secs % 60);
+    return `${m}:${s.toString().padStart(2, "0")}`;
+  }
+  render() {
+    const pct = this.duration ? this.current / this.duration * 100 : 0;
+    const volIcon = this.muted || this.volume === 0 ? "volume-mute-outline" : this.volume < 0.5 ? "volume-low-outline" : "volume-high-outline";
+    return html`
+      <div class="player">
+        ${this.title ? html`<div class="title">${this.title}</div>` : ""}
+        <audio
+          .src=${this.src}
+          preload="metadata"
+          @play=${this.onPlay}
+          @pause=${this.onPause}
+          @ended=${this.onEnded}
+          @timeupdate=${this.onTimeUpdate}
+          @loadedmetadata=${this.onLoadedMeta}
+        ></audio>
+        <div class="controls">
+          <ion-button
+            class="play"
+            fill="clear"
+            size="small"
+            aria-label=${this.playing ? this.t.pause : this.t.play}
+            @click=${this.togglePlay}
+          >
+            <ion-icon
+              slot="icon-only"
+              name=${this.playing ? "pause" : "play"}
+            ></ion-icon>
+          </ion-button>
+
+          <div class="progress" @click=${this.seek}>
+            <div class="fill" style=${`width:${pct}%`}></div>
+            <div class="knob" style=${`left:${pct}%`}></div>
+          </div>
+
+          <span class="time">${this.fmt(this.current)} / ${this.fmt(this.duration)}</span>
+
+          <div class="volume">
+            <ion-button
+              fill="clear"
+              size="small"
+              aria-label=${this.muted ? this.t.unmute : this.t.mute}
+              @click=${this.toggleMute}
+            >
+              <ion-icon slot="icon-only" name=${volIcon}></ion-icon>
+            </ion-button>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              .value=${String(this.muted ? 0 : this.volume)}
+              @input=${this.onVolume}
+              aria-label=${this.t.volume}
+            />
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkAudio.prototype, "src");
+__decorateClass([
+  property()
+], OkAudio.prototype, "title");
+__decorateClass([
+  property({ attribute: false })
+], OkAudio.prototype, "labels");
+__decorateClass([
+  state()
+], OkAudio.prototype, "playing");
+__decorateClass([
+  state()
+], OkAudio.prototype, "current");
+__decorateClass([
+  state()
+], OkAudio.prototype, "duration");
+__decorateClass([
+  state()
+], OkAudio.prototype, "volume");
+__decorateClass([
+  state()
+], OkAudio.prototype, "muted");
+__decorateClass([
+  query("audio")
+], OkAudio.prototype, "audioEl");
+define("ok-audio", OkAudio);
+export {
+  OkAudio
+};