@erplora/outfitkit 0.1.1

package/dist/ok-video.js

@@ -0,0 +1,362 @@
+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",
+  fullscreen: "Fullscreen"
+};
+class OkVideo extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.poster = "";
+    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));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --track-bg: rgba(255, 255, 255, 0.3);
+      --bar-bg: var(--ok-video-bar, rgba(0, 0, 0, 0.55));
+      --border-radius: var(--ok-radius, 10px);
+      --aspect: var(--ok-video-aspect, 16 / 9);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Responsive: bloque al ancho del contenedor. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    .stage {
+      position: relative;
+      width: 100%;
+      aspect-ratio: var(--aspect);
+      background: #000;
+      border-radius: var(--border-radius);
+      overflow: hidden;
+    }
+    video {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      background: #000;
+    }
+    /* Botón grande de play/pausa centrado sobre el vídeo. */
+    .overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: 0;
+      color: #fff;
+      cursor: pointer;
+    }
+    .overlay .big {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.45);
+      transition: opacity 0.18s ease, transform 0.18s ease;
+    }
+    .overlay .big ion-icon {
+      font-size: 2rem;
+    }
+    /* Mientras reproduce, el overlay se atenúa salvo al pasar el ratón. */
+    .overlay.playing .big {
+      opacity: 0;
+    }
+    .stage:hover .overlay.playing .big {
+      opacity: 1;
+    }
+    /* Barra de controles inferior. */
+    .bar {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.4rem 0.6rem;
+      background: linear-gradient(transparent, var(--bar-bg));
+      color: #fff;
+    }
+    ion-button {
+      --color: #fff;
+      --padding-start: 0;
+      --padding-end: 0;
+      margin: 0;
+      flex: 0 0 auto;
+    }
+    .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.75rem;
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+    .volume input[type='range'] {
+      width: 64px;
+      accent-color: var(--primary-color);
+      cursor: pointer;
+      vertical-align: middle;
+    }
+    /* En estrecho, se ocultan el slider de volumen y el reloj para no saturar. */
+    @media (max-width: 420px) {
+      .volume input[type='range'] {
+        display: none;
+      }
+      .time {
+        display: none;
+      }
+    }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Alterna play/pausa sobre el elemento nativo.
+  togglePlay() {
+    if (!this.videoEl) return;
+    if (this.videoEl.paused) this.videoEl.play();
+    else this.videoEl.pause();
+  }
+  onPlay() {
+    this.playing = true;
+    this.dispatchEvent(
+      new CustomEvent("ok-play", {
+        detail: { currentTime: this.videoEl?.currentTime ?? 0 },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onPause() {
+    this.playing = false;
+    this.dispatchEvent(
+      new CustomEvent("ok-pause", {
+        detail: { currentTime: this.videoEl?.currentTime ?? 0 },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onEnded() {
+    this.playing = false;
+    this.dispatchEvent(
+      new CustomEvent("ok-ended", {
+        detail: { duration: this.duration },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onTimeUpdate() {
+    this.current = this.videoEl?.currentTime ?? 0;
+  }
+  onLoadedMeta() {
+    this.duration = this.videoEl?.duration ?? 0;
+  }
+  // Seek: traduce la posición del click dentro de la barra a un tiempo del vídeo.
+  seek(e) {
+    e.stopPropagation();
+    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.videoEl && this.duration) {
+      this.videoEl.currentTime = clamped * this.duration;
+    }
+  }
+  onVolume(e) {
+    const v = Number(e.target.value);
+    this.volume = v;
+    if (this.videoEl) {
+      this.videoEl.volume = v;
+      this.videoEl.muted = v === 0;
+    }
+    this.muted = v === 0;
+  }
+  toggleMute() {
+    this.muted = !this.muted;
+    if (this.videoEl) this.videoEl.muted = this.muted;
+  }
+  // Pantalla completa con la API nativa (sobre el contenedor, para conservar los controles).
+  toggleFullscreen() {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else if (this.stageEl?.requestFullscreen) {
+      this.stageEl.requestFullscreen();
+    }
+  }
+  // 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="stage">
+        <video
+          .src=${this.src}
+          poster=${this.poster || ""}
+          playsinline
+          @play=${this.onPlay}
+          @pause=${this.onPause}
+          @ended=${this.onEnded}
+          @timeupdate=${this.onTimeUpdate}
+          @loadedmetadata=${this.onLoadedMeta}
+          @click=${this.togglePlay}
+        ></video>
+
+        <button
+          class=${`overlay ${this.playing ? "playing" : ""}`}
+          aria-label=${this.playing ? this.t.pause : this.t.play}
+          @click=${this.togglePlay}
+        >
+          <span class="big">
+            <ion-icon name=${this.playing ? "pause" : "play"}></ion-icon>
+          </span>
+        </button>
+
+        <div class="bar">
+          <ion-button
+            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>
+
+          <ion-button
+            fill="clear"
+            size="small"
+            aria-label=${this.t.fullscreen}
+            @click=${this.toggleFullscreen}
+          >
+            <ion-icon slot="icon-only" name="expand-outline"></ion-icon>
+          </ion-button>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkVideo.prototype, "src");
+__decorateClass([
+  property()
+], OkVideo.prototype, "poster");
+__decorateClass([
+  property({ attribute: false })
+], OkVideo.prototype, "labels");
+__decorateClass([
+  state()
+], OkVideo.prototype, "playing");
+__decorateClass([
+  state()
+], OkVideo.prototype, "current");
+__decorateClass([
+  state()
+], OkVideo.prototype, "duration");
+__decorateClass([
+  state()
+], OkVideo.prototype, "volume");
+__decorateClass([
+  state()
+], OkVideo.prototype, "muted");
+__decorateClass([
+  query("video")
+], OkVideo.prototype, "videoEl");
+__decorateClass([
+  query(".stage")
+], OkVideo.prototype, "stageEl");
+define("ok-video", OkVideo);
+export {
+  OkVideo
+};

package/dist/ok-widget-board.js

@@ -0,0 +1,265 @@
+import { LitElement, css, nothing, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.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 = {
+  customize: "Customize panel",
+  close: "Close",
+  presets: "Start from a preset",
+  active: "Active · drag to reorder",
+  available: "Available",
+  empty: "Empty panel. Tap ⋮ to add widgets."
+};
+class OkWidgetBoard extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.widgets = [];
+    this.presets = [];
+    this.value = [];
+    this.editable = false;
+    this.storageKey = "";
+    this.labels = {};
+    this.initialized = false;
+    this.openConfig = () => {
+      if (!this.modal) this.buildModal();
+      this.modal?.present?.();
+    };
+  }
+  static {
+    this.styles = css`
+    :host { display: block; width: 100%; }
+    .bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; min-height: 28px; }
+    .title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ion-color-medium, #6b7280); }
+    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ok-widget-gap, 16px); align-items: start; }
+    .cell { min-width: 0; grid-column: span 12; }
+    @media (min-width: 768px) {
+      .cell[data-size='sm'] { grid-column: span 3; }
+      .cell[data-size='md'] { grid-column: span 6; }
+      .cell[data-size='lg'] { grid-column: span 8; }
+    }
+    .empty { grid-column: span 12; border: 1px dashed var(--ion-border-color, rgba(127,127,127,0.3)); border-radius: 12px; padding: 32px; text-align: center; color: var(--ion-color-medium, #6b7280); }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  get byId() {
+    return new Map(this.widgets.map((w) => [w.id, w]));
+  }
+  get active() {
+    const m = this.byId;
+    return (this.value || []).filter((id) => m.has(id));
+  }
+  willUpdate() {
+    if (this.initialized || !this.widgets.length) return;
+    let initial = null;
+    if (this.storageKey) {
+      try {
+        const saved = JSON.parse(localStorage.getItem(`okwb:${this.storageKey}`) || "null");
+        if (Array.isArray(saved)) initial = saved;
+      } catch (_) {
+      }
+    }
+    if (!initial) {
+      if (this.value && this.value.length) initial = this.value.slice();
+      else if (this.presets.length) initial = this.presets[0].widgets.slice();
+      else initial = this.widgets.map((w) => w.id);
+    }
+    this.value = initial;
+    this.initialized = true;
+  }
+  persist() {
+    if (!this.storageKey) return;
+    try {
+      localStorage.setItem(`okwb:${this.storageKey}`, JSON.stringify(this.value));
+    } catch (_) {
+    }
+  }
+  /** Cambia el estado activo, persiste, re-renderiza el selector y emite `ok-change`. */
+  setValue(next) {
+    this.value = next.slice();
+    this.persist();
+    this.dispatchEvent(new CustomEvent("ok-change", { detail: { value: this.value.slice() }, bubbles: true, composed: true }));
+    this.refreshModal();
+  }
+  render() {
+    const items = this.active;
+    return html`
+      <div class="bar">
+        <slot name="title"><span class="title"></span></slot>
+        ${this.editable ? html`<ion-button fill="clear" size="small" aria-label=${this.t.customize} @click=${this.openConfig}>
+              <ion-icon slot="icon-only" name="ellipsis-vertical"></ion-icon>
+            </ion-button>` : nothing}
+      </div>
+      <div class="grid">
+        ${items.length ? repeat(
+      items,
+      (id) => id,
+      (id) => {
+        const w = this.byId.get(id);
+        return w ? html`<div class="cell" data-size=${w.size || "md"} data-id=${id}></div>` : nothing;
+      }
+    ) : html`<div class="empty">${this.t.empty}</div>`}
+      </div>`;
+  }
+  updated() {
+    const map = this.byId;
+    this.renderRoot.querySelectorAll(".cell").forEach((cell) => {
+      const id = cell.dataset.id || "";
+      if (cell.dataset.mounted === id) return;
+      cell.replaceChildren();
+      try {
+        map.get(id)?.render(cell);
+      } catch (err) {
+        console.error("[ok-widget-board]", id, err);
+      }
+      cell.dataset.mounted = id;
+    });
+  }
+  buildModal() {
+    const t = this.t;
+    const make = (tag, opts = {}) => {
+      const n = document.createElement(tag);
+      for (const [k, v] of Object.entries(opts.attrs || {})) v === true ? n.setAttribute(k, "") : v != null && n.setAttribute(k, String(v));
+      for (const [k, v] of Object.entries(opts.props || {})) n[k] = v;
+      if (opts.text != null) n.textContent = opts.text;
+      return n;
+    };
+    const modal = make("ion-modal");
+    modal.initialBreakpoint = 0.9;
+    modal.breakpoints = [0, 0.9, 1];
+    const header = make("ion-header");
+    const tb = make("ion-toolbar");
+    tb.appendChild(make("ion-title", { text: t.customize }));
+    const endBtns = make("ion-buttons", { attrs: { slot: "end" } });
+    const closeBtn = make("ion-button", { text: t.close });
+    closeBtn.addEventListener("click", () => modal.dismiss?.());
+    endBtns.appendChild(closeBtn);
+    tb.appendChild(endBtns);
+    header.appendChild(tb);
+    modal.appendChild(header);
+    const content = make("ion-content");
+    if (this.presets.length) {
+      content.appendChild(make("div", { attrs: { class: "okwb-sub" }, text: t.presets }));
+      const wrap = make("div", { attrs: { class: "okwb-presets" } });
+      for (const p of this.presets) {
+        const chip = make("ion-chip", { attrs: { outline: true } });
+        chip.appendChild(make("ion-label", { text: p.label }));
+        chip.addEventListener("click", () => this.setValue(p.widgets.filter((id) => this.byId.has(id))));
+        wrap.appendChild(chip);
+      }
+      content.appendChild(wrap);
+    }
+    content.appendChild(make("div", { attrs: { class: "okwb-sub" }, text: t.active }));
+    const activeList = make("ion-list");
+    const reorder = make("ion-reorder-group", { props: { disabled: false } });
+    reorder.addEventListener("ionItemReorder", (ev) => {
+      const e = ev;
+      const next = this.active;
+      const moved = next.splice(e.detail.from, 1)[0];
+      next.splice(e.detail.to, 0, moved);
+      e.detail.complete();
+      this.setValue(next);
+    });
+    activeList.appendChild(reorder);
+    content.appendChild(activeList);
+    content.appendChild(make("div", { attrs: { class: "okwb-sub" }, text: t.available }));
+    const availList = make("ion-list");
+    content.appendChild(availList);
+    const style = make("style", { text: `.okwb-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium);padding:12px 16px 4px}.okwb-presets{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}` });
+    modal.appendChild(style);
+    modal.appendChild(content);
+    document.body.appendChild(modal);
+    this.modal = modal;
+    this.reorderEl = reorder;
+    this.availEl = availList;
+    this.refreshModal();
+  }
+  /** Repinta las listas de activos/disponibles del modal según `value`. */
+  refreshModal() {
+    const reorder = this.reorderEl;
+    const availList = this.availEl;
+    if (!reorder || !availList) return;
+    const map = this.byId;
+    const item = (w, checked, onToggle, withHandle) => {
+      const it = document.createElement("ion-item");
+      if (w.icon) {
+        const ic = document.createElement("ion-icon");
+        ic.setAttribute("slot", "start");
+        ic.setAttribute("name", w.icon);
+        it.appendChild(ic);
+      }
+      const lbl = document.createElement("ion-label");
+      const h3 = document.createElement("h3");
+      h3.textContent = w.title;
+      lbl.appendChild(h3);
+      if (w.category) {
+        const p = document.createElement("p");
+        p.textContent = w.category;
+        lbl.appendChild(p);
+      }
+      it.appendChild(lbl);
+      const tog = document.createElement("ion-toggle");
+      tog.setAttribute("slot", "end");
+      tog.checked = checked;
+      tog.addEventListener("ionChange", onToggle);
+      it.appendChild(tog);
+      if (withHandle) {
+        const r = document.createElement("ion-reorder");
+        r.setAttribute("slot", "end");
+        it.appendChild(r);
+      }
+      return it;
+    };
+    reorder.replaceChildren();
+    for (const id of this.active) {
+      const w = map.get(id);
+      if (!w) continue;
+      reorder.appendChild(item(w, true, () => this.setValue(this.active.filter((x) => x !== id)), true));
+    }
+    availList.replaceChildren();
+    for (const w of this.widgets) {
+      if (this.active.includes(w.id)) continue;
+      availList.appendChild(item(w, false, () => this.setValue([...this.active, w.id]), false));
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.modal?.remove();
+    this.modal = void 0;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkWidgetBoard.prototype, "widgets");
+__decorateClass([
+  property({ attribute: false })
+], OkWidgetBoard.prototype, "presets");
+__decorateClass([
+  property({ attribute: false })
+], OkWidgetBoard.prototype, "value");
+__decorateClass([
+  property({ type: Boolean })
+], OkWidgetBoard.prototype, "editable");
+__decorateClass([
+  property({ attribute: "storage-key" })
+], OkWidgetBoard.prototype, "storageKey");
+__decorateClass([
+  property({ attribute: false })
+], OkWidgetBoard.prototype, "labels");
+__decorateClass([
+  state()
+], OkWidgetBoard.prototype, "initialized");
+define("ok-widget-board", OkWidgetBoard);
+export {
+  OkWidgetBoard
+};