@erplora/outfitkit 0.1.1

package/dist/ok-coachmark.js

@@ -0,0 +1,500 @@
+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 = {
+  prev: "Back",
+  next: "Next",
+  finish: "Done",
+  skip: "Skip",
+  step: "Step {n} of {total}"
+};
+class OkCoachmark extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.current = 0;
+    this.open = false;
+    this.labels = {};
+    this.rect = null;
+    this.bubble = null;
+    this.portalRoot = null;
+    this.onReflow = () => {
+      if (this.open) this.measure();
+    };
+    this.onKeydown = (e) => {
+      if (!this.open) return;
+      if (e.key === "Escape") {
+        this.skip();
+      } else if (e.key === "ArrowRight") {
+        this.next();
+      } else if (e.key === "ArrowLeft") {
+        this.prev();
+      }
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --brand: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --brand-soft: var(--ok-primary-soft, rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.25));
+      --brand-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --panel-bg: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #ffffff)));
+      --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.62));
+      --border-radius: var(--ok-radius, 14px);
+      --shadow: var(--ok-shadow, 0 16px 48px rgba(0, 0, 0, 0.22));
+      --scrim: var(--ok-coach-scrim, rgba(0, 0, 0, 0.45));
+      --dot-off: var(--ok-coach-dot, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.2));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      display: block;
+      width: 100%;
+    }
+
+    /* El host no pinta nada visible: todo el overlay se porta a document.body. */
+    :host {
+      position: absolute;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+
+    /* ---- Estilos del portal (adoptados por el shadow del portal en body) ---- */
+
+    /* Scrim de cuatro paneles que rodean el hueco del spotlight (deja ver el target). */
+    .scrim-piece {
+      position: fixed;
+      z-index: 9000;
+      background: var(--scrim);
+      transition: opacity 200ms ease;
+    }
+
+    /* Anillo de spotlight pulsante alrededor del target. */
+    .spot {
+      position: fixed;
+      z-index: 9001;
+      border-radius: var(--ok-coach-spot-radius, 10px);
+      pointer-events: none;
+      box-shadow: 0 0 0 3px var(--brand), 0 0 0 7px var(--brand-soft);
+      animation: ok-coach-pulse 2s ease-in-out infinite;
+    }
+    @keyframes ok-coach-pulse {
+      0%,
+      100% {
+        box-shadow: 0 0 0 3px var(--brand), 0 0 0 7px var(--brand-soft);
+      }
+      50% {
+        box-shadow: 0 0 0 3px var(--brand), 0 0 0 12px transparent;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .spot {
+        animation: none;
+      }
+    }
+
+    /* Bubble anclado al target. position:fixed porque sigue rects reales del viewport. */
+    .bubble {
+      position: fixed;
+      z-index: 9002;
+      box-sizing: border-box;
+      width: 290px;
+      max-width: calc(100vw - 24px);
+      padding: 14px 16px 12px;
+      background: var(--panel-bg);
+      color: var(--color);
+      border: 1px solid var(--brand);
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow);
+      font-family: var(--font);
+    }
+
+    /* Flecha del bubble: cuadrado rotado pegado al borde según el lado. */
+    .arrow {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      background: var(--panel-bg);
+      border: 1px solid var(--brand);
+      transform: rotate(45deg);
+    }
+    .arrow.bottom {
+      top: -7px;
+      left: 50%;
+      margin-left: -6px;
+      border-right: 0;
+      border-bottom: 0;
+    }
+    .arrow.top {
+      bottom: -7px;
+      left: 50%;
+      margin-left: -6px;
+      border-left: 0;
+      border-top: 0;
+    }
+    .arrow.right {
+      left: -7px;
+      top: 50%;
+      margin-top: -6px;
+      border-right: 0;
+      border-top: 0;
+    }
+    .arrow.left {
+      right: -7px;
+      top: 50%;
+      margin-top: -6px;
+      border-left: 0;
+      border-bottom: 0;
+    }
+
+    .step-label {
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--brand);
+      margin: 0 0 4px;
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color);
+      margin: 0 0 4px;
+    }
+    .text {
+      font-size: 12.5px;
+      line-height: 1.5;
+      color: var(--color-muted);
+      margin: 0 0 12px;
+    }
+
+    .bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+    }
+    .dots {
+      display: inline-flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+    .dots button {
+      width: 6px;
+      height: 6px;
+      padding: 0;
+      border: 0;
+      border-radius: 50%;
+      background: var(--dot-off);
+      cursor: pointer;
+      transition: width 180ms ease, background-color 180ms ease, border-radius 180ms ease;
+    }
+    .dots button.on {
+      width: 18px;
+      border-radius: 3px;
+      background: var(--brand);
+    }
+
+    .actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    /* Botones propios mínimos (ghost + primary). No reusamos ion-button para no acoplar el portal a
+       estilos de host; son controles simples accesibles. */
+    .btn {
+      font: inherit;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1;
+      padding: 7px 11px;
+      border-radius: 8px;
+      border: 1px solid transparent;
+      cursor: pointer;
+      background: none;
+      color: var(--color-muted);
+      transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
+    }
+    .btn.ghost:hover {
+      background: rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06);
+    }
+    .btn.primary {
+      background: var(--brand);
+      color: var(--brand-contrast);
+      border-color: var(--brand);
+    }
+    .btn.primary:hover {
+      opacity: 0.92;
+    }
+    .btn:focus-visible {
+      outline: 2px solid var(--brand);
+      outline-offset: 2px;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .scrim-piece,
+      .dots button,
+      .btn {
+        transition: none;
+      }
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  get step() {
+    return this.steps[this.current];
+  }
+  get isLast() {
+    return this.current >= this.steps.length - 1;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unbind();
+    const host = this.portalRoot?.host;
+    this.portalRoot = null;
+    if (host && host.parentNode) host.parentNode.removeChild(host);
+  }
+  updated(changed) {
+    if (changed.has("open")) {
+      if (this.open) {
+        this.bind();
+        this.measure();
+      } else {
+        this.unbind();
+      }
+    } else if (this.open && (changed.has("current") || changed.has("steps"))) {
+      this.measure();
+    }
+    if (!this.open && !this.portalRoot) return;
+    render(this.open ? this.overlayTemplate() : nothing, this.ensurePortal());
+  }
+  bind() {
+    document.addEventListener("keydown", this.onKeydown);
+    window.addEventListener("scroll", this.onReflow, true);
+    window.addEventListener("resize", this.onReflow);
+  }
+  unbind() {
+    document.removeEventListener("keydown", this.onKeydown);
+    window.removeEventListener("scroll", this.onReflow, true);
+    window.removeEventListener("resize", this.onReflow);
+  }
+  // Crea (una vez) el portal: un div en document.body con shadow propio que ADOPTA la hoja de
+  // estilos del componente, de modo que scrim/spot/bubble se ven idénticos fuera del host.
+  ensurePortal() {
+    if (this.portalRoot) return this.portalRoot;
+    const host = document.createElement("div");
+    host.setAttribute("data-ok-coachmark-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;
+  }
+  // Localiza el target del paso actual, mide su rect y calcula la posición del bubble.
+  measure() {
+    const sel = this.step?.target;
+    let el = null;
+    if (sel) {
+      try {
+        el = document.querySelector(sel);
+      } catch {
+        el = null;
+      }
+    }
+    this.rect = el ? el.getBoundingClientRect() : null;
+    this.bubble = this.computeBubble(this.rect);
+  }
+  // Coloca el bubble respecto al rect del target eligiendo el lado con sitio (edge-aware). Mismo
+  // criterio que computeAnchor: lado preferido y, si no cabe, volteo al opuesto; clamp a márgenes.
+  computeBubble(rect) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const gap = 14;
+    const margin = 8;
+    const bw = Math.min(290, vw - 24);
+    const bh = 150;
+    if (!rect) {
+      return { top: (vh - bh) / 2, left: (vw - bw) / 2, side: "bottom" };
+    }
+    const want = this.step?.placement ?? "bottom";
+    const fits = {
+      bottom: rect.bottom + gap + bh <= vh - margin,
+      top: rect.top - gap - bh >= margin,
+      right: rect.right + gap + bw <= vw - margin,
+      left: rect.left - gap - bw >= margin
+    };
+    const opposite = {
+      bottom: "top",
+      top: "bottom",
+      left: "right",
+      right: "left"
+    };
+    const order = [want, opposite[want], "bottom", "top", "right", "left"];
+    const side = order.find((s) => fits[s]) ?? want;
+    let top;
+    let left;
+    if (side === "bottom" || side === "top") {
+      left = rect.left + rect.width / 2 - bw / 2;
+      top = side === "bottom" ? rect.bottom + gap : rect.top - gap - bh;
+    } else {
+      top = rect.top + rect.height / 2 - bh / 2;
+      left = side === "right" ? rect.right + gap : rect.left - gap - bw;
+    }
+    left = Math.max(margin, Math.min(left, vw - bw - margin));
+    top = Math.max(margin, Math.min(top, vh - bh - margin));
+    return { top, left, side };
+  }
+  // ---- Navegación / eventos ----
+  emit(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+  goTo(index) {
+    if (index < 0 || index >= this.steps.length || index === this.current) return;
+    this.current = index;
+    this.emit("ok-step", { index });
+  }
+  next() {
+    if (this.isLast) {
+      this.finish();
+      return;
+    }
+    const index = this.current + 1;
+    this.current = index;
+    this.emit("ok-next", { index });
+    this.emit("ok-step", { index });
+  }
+  prev() {
+    if (this.current <= 0) return;
+    const index = this.current - 1;
+    this.current = index;
+    this.emit("ok-prev", { index });
+    this.emit("ok-step", { index });
+  }
+  finish() {
+    this.open = false;
+    this.emit("ok-finish");
+  }
+  skip() {
+    this.open = false;
+    this.emit("ok-skip");
+  }
+  // El host no renderiza nada visible (es un controlador); el overlay vive en el portal.
+  render() {
+    return nothing;
+  }
+  // Cuatro paneles de scrim que rodean el hueco del target (efecto recorte sin clip-path), o un
+  // scrim completo si no hay target.
+  scrimTemplate() {
+    const r = this.rect;
+    if (!r) {
+      return html`<div class="scrim-piece" style="inset:0" @click=${() => this.skip()}></div>`;
+    }
+    const pad = 6;
+    const t = Math.max(0, r.top - pad);
+    const b = Math.max(0, r.bottom + pad);
+    const l = Math.max(0, r.left - pad);
+    const rr = Math.max(0, r.right + pad);
+    const click = () => this.skip();
+    return html`
+      <div class="scrim-piece" style="left:0;top:0;right:0;height:${t}px" @click=${click}></div>
+      <div class="scrim-piece" style="left:0;top:${b}px;right:0;bottom:0" @click=${click}></div>
+      <div class="scrim-piece" style="left:0;top:${t}px;width:${l}px;height:${b - t}px" @click=${click}></div>
+      <div class="scrim-piece" style="left:${rr}px;top:${t}px;right:0;height:${b - t}px" @click=${click}></div>
+    `;
+  }
+  spotTemplate() {
+    const r = this.rect;
+    if (!r) return nothing;
+    const pad = 6;
+    return html`<div
+      class="spot"
+      style="left:${r.left - pad}px;top:${r.top - pad}px;width:${r.width + pad * 2}px;height:${r.height + pad * 2}px"
+    ></div>`;
+  }
+  bubbleTemplate() {
+    const pos = this.bubble;
+    const s = this.step;
+    if (!pos || !s) return nothing;
+    const total = this.steps.length;
+    const label = this.t.step.replace("{n}", String(this.current + 1)).replace("{total}", String(total));
+    return html`
+      <div
+        class="bubble"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${s.title ?? label}
+        style="top:${pos.top}px;left:${pos.left}px"
+      >
+        <span class="arrow ${pos.side}"></span>
+        <p class="step-label">${label}</p>
+        ${s.title ? html`<h2 class="title">${s.title}</h2>` : nothing}
+        ${s.text ? html`<p class="text">${s.text}</p>` : nothing}
+        <div class="bar">
+          <div class="dots" role="tablist">
+            ${this.steps.map(
+      (_, i) => html`<button
+                type="button"
+                role="tab"
+                class=${i === this.current ? "on" : ""}
+                aria-selected=${i === this.current ? "true" : "false"}
+                aria-label=${this.t.step.replace("{n}", String(i + 1)).replace("{total}", String(total))}
+                @click=${() => this.goTo(i)}
+              ></button>`
+    )}
+          </div>
+          <div class="actions">
+            <button type="button" class="btn ghost" @click=${() => this.skip()}>
+              ${this.t.skip}
+            </button>
+            ${this.current > 0 ? html`<button type="button" class="btn ghost" @click=${() => this.prev()}>
+                  ${this.t.prev}
+                </button>` : nothing}
+            <button type="button" class="btn primary" @click=${() => this.next()}>
+              ${this.isLast ? this.t.finish : this.t.next}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  // Overlay completo renderizado en el portal de document.body.
+  overlayTemplate() {
+    if (!this.step) return nothing;
+    return html`${this.scrimTemplate()}${this.spotTemplate()}${this.bubbleTemplate()}`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkCoachmark.prototype, "steps");
+__decorateClass([
+  property({ type: Number })
+], OkCoachmark.prototype, "current");
+__decorateClass([
+  property({ type: Boolean })
+], OkCoachmark.prototype, "open");
+__decorateClass([
+  property({ attribute: false })
+], OkCoachmark.prototype, "labels");
+__decorateClass([
+  state()
+], OkCoachmark.prototype, "rect");
+__decorateClass([
+  state()
+], OkCoachmark.prototype, "bubble");
+define("ok-coachmark", OkCoachmark);
+export {
+  OkCoachmark
+};

package/dist/ok-code.js

@@ -0,0 +1,190 @@
+import { LitElement, css, 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;
+};
+class OkCode extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.code = "";
+    this.inline = false;
+    this.language = "";
+    this.copy = false;
+    this.copied = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --bg: var(--ok-surface, var(--ion-background-color, #f5f6f8));
+      --inline-bg: var(--ok-surface-3, var(--ion-color-light, #e6e8ec));
+      --border-color: var(--ok-border-color, var(--ion-border-color, #d7dbe0));
+      --color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --label-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --radius: 8px;
+      --inline-radius: 4px;
+      --mono: var(
+        --ok-font-mono,
+        ui-monospace,
+        'SF Mono',
+        'SFMono-Regular',
+        'Menlo',
+        'Consolas',
+        monospace
+      );
+    }
+
+    /* La variante inline no debe ocupar todo el ancho. */
+    :host([inline]) {
+      display: inline;
+      width: auto;
+    }
+
+    .wrap {
+      position: relative;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Bloque de código: superficie bordeada con scroll horizontal. */
+    .block {
+      display: block;
+      margin: 0;
+      background: var(--bg);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius);
+      padding: 14px 16px;
+      font-family: var(--mono);
+      font-size: 12.5px;
+      line-height: 1.6;
+      color: var(--color);
+      overflow-x: auto;
+      white-space: pre;
+      tab-size: 2;
+    }
+
+    /* Hueco a la derecha cuando hay botón de copiar, para no solapar. */
+    .block.has-copy {
+      padding-right: 44px;
+    }
+
+    /* Cabecera opcional con la etiqueta de lenguaje. */
+    .head {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0 0 6px;
+    }
+
+    .lang {
+      font-family: var(--mono);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--label-color);
+    }
+
+    /* Botón de copiar flotante (esquina superior derecha del bloque). */
+    .copy {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      --padding-start: 6px;
+      --padding-end: 6px;
+      --padding-top: 4px;
+      --padding-bottom: 4px;
+      margin: 0;
+      height: 28px;
+      font-size: 11px;
+    }
+
+    /* Variante inline: pill sobre bg-3, sin borde. */
+    .inline {
+      display: inline;
+      padding: 1px 6px;
+      font-family: var(--mono);
+      font-size: 12px;
+      line-height: inherit;
+      color: var(--color);
+      background: var(--inline-bg);
+      border-radius: var(--inline-radius);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+  `;
+  }
+  async handleCopy() {
+    try {
+      await navigator.clipboard.writeText(this.code);
+      this.copied = true;
+      window.setTimeout(() => {
+        this.copied = false;
+      }, 1600);
+      this.dispatchEvent(
+        new CustomEvent("ok-copy", {
+          detail: { code: this.code, ok: true },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } catch {
+      this.dispatchEvent(
+        new CustomEvent("ok-copy", {
+          detail: { code: this.code, ok: false },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  render() {
+    if (this.inline) {
+      return html`<code class="inline">${this.code}</code>`;
+    }
+    const showCopy = this.copy;
+    return html`
+      <div class="wrap">
+        ${this.language ? html`<div class="head"><span class="lang">${this.language}</span></div>` : null}
+        <pre class="block ${showCopy ? "has-copy" : ""}"><code>${this.code}</code></pre>
+        ${showCopy ? html`<ion-button
+              class="copy"
+              size="small"
+              fill="solid"
+              color="medium"
+              aria-label="Copiar código"
+              @click=${this.handleCopy}
+              >${this.copied ? "Copiado" : "Copiar"}</ion-button
+            >` : null}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkCode.prototype, "code");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkCode.prototype, "inline");
+__decorateClass([
+  property()
+], OkCode.prototype, "language");
+__decorateClass([
+  property({ type: Boolean })
+], OkCode.prototype, "copy");
+__decorateClass([
+  state()
+], OkCode.prototype, "copied");
+define("ok-code", OkCode);
+export {
+  OkCode
+};