@erplora/outfitkit 0.1.1

package/dist/ok-kanban.js

@@ -0,0 +1,427 @@
+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;
+};
+const DEFAULT_LABELS = {
+  empty: "No cards"
+};
+class OkKanban extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.columns = [];
+    this.labels = {};
+    this.view = [];
+    this.drag = null;
+    this.overColumn = null;
+    this.overCardId = null;
+    this.overAfter = false;
+    this.lastColumnsRef = null;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable estilo Ionic: cadena --ok-* → --ion-* → hex. */
+      --background: var(--ok-bg-soft, var(--ion-color-light, #f4f5f8));
+      --column-background: var(--ok-surface, var(--ion-card-background, #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.55));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --border-color: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.12));
+      --card-background: var(--ok-card-bg, var(--ion-background-color, #ffffff));
+      --drop-highlight: var(
+        --ok-kanban-drop,
+        rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.1)
+      );
+      --border-radius: var(--ok-radius, 10px);
+      --column-width: var(--ok-kanban-column-width, 280px);
+      --gap: var(--ok-kanban-gap, 0.9rem);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Ocupa todo el contenedor; el scroll vive dentro (columnas y listas). */
+      display: block;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      color: var(--color);
+      font-family: var(--font);
+      font-size: 0.95rem;
+    }
+
+    /* Fila de columnas con scroll horizontal (en móvil se desliza). */
+    .board {
+      display: flex;
+      gap: var(--gap);
+      align-items: flex-start;
+      height: 100%;
+      box-sizing: border-box;
+      padding: var(--gap);
+      overflow-x: auto;
+      overflow-y: hidden;
+      background: var(--background);
+      -webkit-overflow-scrolling: touch;
+      scroll-snap-type: x proximity;
+    }
+
+    /* Columna de ancho fijo; el contenido scrollea en vertical por dentro. */
+    .column {
+      flex: 0 0 var(--column-width);
+      width: var(--column-width);
+      max-height: 100%;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      background: var(--column-background);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      scroll-snap-align: start;
+      transition: background 0.15s ease, box-shadow 0.15s ease;
+    }
+    /* Resaltado de la columna destino mientras se arrastra sobre ella. */
+    .column.drag-over {
+      background: var(--drop-highlight);
+      box-shadow: inset 0 0 0 2px var(--primary-color);
+    }
+
+    /* Cabecera: franja de color (si hay) + título + contador. */
+    .column-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.7rem 0.85rem;
+      border-bottom: 1px solid var(--border-color);
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+    .swatch {
+      flex: 0 0 auto;
+      width: 10px;
+      height: 10px;
+      border-radius: 3px;
+      background: var(--swatch-color, var(--primary-color));
+    }
+    .column-title {
+      flex: 1 1 auto;
+      min-width: 0;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .count {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 1.5rem;
+      height: 1.5rem;
+      padding: 0 0.45rem;
+      border-radius: 999px;
+      background: var(--background);
+      color: var(--color-muted);
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+
+    /* Lista de tarjetas con scroll vertical propio. */
+    .cards {
+      flex: 1 1 auto;
+      min-height: 2.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.55rem;
+      padding: 0.7rem;
+      margin: 0;
+      list-style: none;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    .empty {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-muted);
+      font-size: 0.85rem;
+      text-align: center;
+      padding: 0.8rem;
+      border: 1px dashed var(--border-color);
+      border-radius: var(--border-radius);
+    }
+
+    /* Tarjeta arrastrable. */
+    .card {
+      box-sizing: border-box;
+      padding: 0.6rem 0.7rem;
+      background: var(--card-background);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      cursor: grab;
+      user-select: 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, opacity 0.15s ease;
+    }
+    /* Hover sutil solo con ratón: la tarjeta se levanta ligeramente. */
+    @media (hover: hover) {
+      .card:not(.dragging):hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        transform: translateY(-2px);
+      }
+    }
+    .card:active {
+      cursor: grabbing;
+    }
+    /* Press feedback solo cuando no se está arrastrando (no romper el drag&drop). */
+    .card:not(.dragging):active {
+      transform: translateY(0) scale(0.98);
+    }
+    .card.dragging {
+      opacity: 0.45;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .card:not(.dragging):hover,
+      .card:not(.dragging):active {
+        transform: none;
+      }
+    }
+    /* Marcador del punto de inserción (placeholder) durante el dragover. */
+    .card.drop-before {
+      box-shadow: inset 0 3px 0 -1px var(--primary-color);
+    }
+    .card.drop-after {
+      box-shadow: inset 0 -3px 0 -1px var(--primary-color);
+    }
+    .card-title {
+      font-weight: 600;
+      line-height: 1.3;
+      word-break: break-word;
+    }
+    .card-subtitle {
+      margin-top: 0.2rem;
+      color: var(--color-muted);
+      font-size: 0.85rem;
+      line-height: 1.3;
+      word-break: break-word;
+    }
+    .tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.3rem;
+      margin-top: 0.5rem;
+    }
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.1rem 0.5rem;
+      border-radius: 999px;
+      background: var(--background);
+      color: var(--color-muted);
+      font-size: 0.72rem;
+      font-weight: 600;
+      line-height: 1.6;
+    }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Clona en profundidad (solo los niveles que reordenamos) la prop hacia el estado interno.
+  syncFromProp() {
+    this.view = this.columns.map((col) => ({
+      ...col,
+      cards: col.cards.map((card) => ({ ...card }))
+    }));
+    this.lastColumnsRef = this.columns;
+  }
+  // ---- Drag & drop nativo HTML5 ---------------------------------------------------------------
+  onDragStart(e, fromColumn, cardId) {
+    this.drag = { cardId, fromColumn };
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", cardId);
+    }
+  }
+  onDragEnd() {
+    this.drag = null;
+    this.overColumn = null;
+    this.overCardId = null;
+    this.overAfter = false;
+  }
+  // Mientras se arrastra sobre una columna: permite soltar y resalta la columna.
+  onColumnDragOver(e, columnId) {
+    if (!this.drag) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    if (this.overColumn !== columnId) this.overColumn = columnId;
+    this.overCardId = null;
+    this.overAfter = false;
+  }
+  // Mientras se arrastra sobre una tarjeta: calcula si la inserción va antes o después según
+  // la posición vertical del puntero respecto al centro de la tarjeta.
+  onCardDragOver(e, columnId, cardId) {
+    if (!this.drag) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    const target = e.currentTarget;
+    const rect = target.getBoundingClientRect();
+    const after = e.clientY > rect.top + rect.height / 2;
+    if (this.overColumn !== columnId) this.overColumn = columnId;
+    if (this.overCardId !== cardId || this.overAfter !== after) {
+      this.overCardId = cardId;
+      this.overAfter = after;
+    }
+  }
+  // Suelta sobre la columna (zona vacía o tras propagación): inserta al final si no hay tarjeta diana.
+  onColumnDrop(e, toColumn) {
+    if (!this.drag) return;
+    e.preventDefault();
+    this.commitMove(toColumn);
+  }
+  // Suelta sobre una tarjeta concreta: inserta antes/después de ella.
+  onCardDrop(e, toColumn) {
+    if (!this.drag) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.commitMove(toColumn);
+  }
+  // Aplica el movimiento en el modelo interno y emite `ok-card-move`.
+  commitMove(toColumn) {
+    const drag = this.drag;
+    if (!drag) return;
+    const fromCol = this.view.find((c) => c.id === drag.fromColumn);
+    const toCol = this.view.find((c) => c.id === toColumn);
+    if (!fromCol || !toCol) {
+      this.onDragEnd();
+      return;
+    }
+    const fromIndex = fromCol.cards.findIndex((c) => c.id === drag.cardId);
+    if (fromIndex === -1) {
+      this.onDragEnd();
+      return;
+    }
+    let toIndex = toCol.cards.length;
+    if (this.overCardId) {
+      const targetIndex = toCol.cards.findIndex((c) => c.id === this.overCardId);
+      if (targetIndex !== -1) {
+        toIndex = this.overAfter ? targetIndex + 1 : targetIndex;
+      }
+    }
+    const [card] = fromCol.cards.splice(fromIndex, 1);
+    if (fromCol === toCol && fromIndex < toIndex) {
+      toIndex -= 1;
+    }
+    toCol.cards.splice(toIndex, 0, card);
+    this.view = this.view.map((c) => ({ ...c, cards: [...c.cards] }));
+    this.dispatchEvent(
+      new CustomEvent("ok-card-move", {
+        detail: {
+          cardId: drag.cardId,
+          fromColumn: drag.fromColumn,
+          toColumn,
+          toIndex
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.onDragEnd();
+  }
+  // Click en una tarjeta (no en arrastre): emite `ok-card-click`.
+  onCardClick(card) {
+    this.dispatchEvent(
+      new CustomEvent("ok-card-click", {
+        detail: { id: card.id, card },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ---- Render ---------------------------------------------------------------------------------
+  renderCard(column, card) {
+    const dragging = this.drag?.cardId === card.id;
+    const isOver = this.overCardId === card.id && this.overColumn === column.id;
+    const classes = [
+      "card",
+      dragging ? "dragging" : "",
+      isOver && !this.overAfter ? "drop-before" : "",
+      isOver && this.overAfter ? "drop-after" : ""
+    ].filter(Boolean).join(" ");
+    return html`<li
+      class=${classes}
+      draggable="true"
+      @dragstart=${(e) => this.onDragStart(e, column.id, card.id)}
+      @dragend=${() => this.onDragEnd()}
+      @dragover=${(e) => this.onCardDragOver(e, column.id, card.id)}
+      @drop=${(e) => this.onCardDrop(e, column.id)}
+      @click=${() => this.onCardClick(card)}
+    >
+      <div class="card-title">${card.title}</div>
+      ${card.subtitle ? html`<div class="card-subtitle">${card.subtitle}</div>` : ""}
+      ${card.tags?.length ? html`<div class="tags">
+            ${card.tags.map((tag) => html`<span class="tag">${tag}</span>`)}
+          </div>` : ""}
+    </li>`;
+  }
+  renderColumn(column) {
+    const over = this.overColumn === column.id;
+    const headerStyle = column.color ? `--swatch-color:${column.color}` : "";
+    return html`<section
+      class=${`column ${over ? "drag-over" : ""}`.trim()}
+      @dragover=${(e) => this.onColumnDragOver(e, column.id)}
+      @drop=${(e) => this.onColumnDrop(e, column.id)}
+    >
+      <header class="column-header">
+        <span class="swatch" style=${headerStyle}></span>
+        <span class="column-title">${column.title}</span>
+        <span class="count">${column.cards.length}</span>
+      </header>
+      ${column.cards.length ? html`<ul class="cards">
+            ${column.cards.map((card) => this.renderCard(column, card))}
+          </ul>` : html`<ul class="cards">
+            <li class="empty">${this.t.empty}</li>
+          </ul>`}
+    </section>`;
+  }
+  render() {
+    if (this.columns !== this.lastColumnsRef) {
+      this.syncFromProp();
+    }
+    return html`<div class="board">
+      ${this.view.map((column) => this.renderColumn(column))}
+    </div>`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkKanban.prototype, "columns");
+__decorateClass([
+  property({ attribute: false })
+], OkKanban.prototype, "labels");
+__decorateClass([
+  state()
+], OkKanban.prototype, "view");
+__decorateClass([
+  state()
+], OkKanban.prototype, "drag");
+__decorateClass([
+  state()
+], OkKanban.prototype, "overColumn");
+__decorateClass([
+  state()
+], OkKanban.prototype, "overCardId");
+__decorateClass([
+  state()
+], OkKanban.prototype, "overAfter");
+define("ok-kanban", OkKanban);
+export {
+  OkKanban
+};

package/dist/ok-kbd.js

@@ -0,0 +1,159 @@
+import { LitElement, css, html } from "lit";
+import { property } 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 MOD_KEYS = /* @__PURE__ */ new Set(["cmd", "command", "ctrl", "control", "shift", "alt", "option", "opt", "meta", "win", "super"]);
+const GLYPHS = {
+  cmd: "⌘",
+  command: "⌘",
+  meta: "⌘",
+  super: "⌘",
+  win: "⊞",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  shift: "Shift",
+  alt: "Alt",
+  option: "⌥",
+  opt: "⌥",
+  enter: "↵",
+  return: "↵",
+  esc: "Esc",
+  escape: "Esc",
+  tab: "Tab",
+  space: "space",
+  up: "↑",
+  down: "↓",
+  left: "←",
+  right: "→",
+  del: "⌫",
+  delete: "⌫",
+  backspace: "⌫"
+};
+class OkKbd extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.keys = "";
+    this.size = "md";
+    this.combo = true;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Átomo inline: ocupa solo su contenido. */
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      vertical-align: middle;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --bg: var(--ok-kbd-bg, var(--ion-color-light, #f4f5f8));
+      --bg-mod: var(--ok-kbd-bg-mod, var(--ion-color-light-shade, #d7d8da));
+      --border-color: var(--ok-kbd-border, var(--ion-border-color, #c8c9cc));
+      --color: var(--ok-kbd-color, var(--ion-color-medium-shade, #808289));
+      --color-mod: var(--ok-kbd-color-mod, var(--ion-text-color, #1f2933));
+      --radius: var(--ok-kbd-radius, 4px);
+      --font-mono: var(--ok-kbd-font, ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace);
+    }
+
+    .key {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      min-width: 22px;
+      height: 22px;
+      padding: 0 5px;
+      background: var(--bg);
+      border: 1px solid var(--border-color);
+      /* Relieve 3D: borde inferior más grueso. */
+      border-bottom-width: 3px;
+      border-radius: var(--radius);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      font-weight: 500;
+      line-height: 1;
+      color: var(--color);
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+
+    /* Tamaño compacto. */
+    :host([size='sm']) .key {
+      min-width: 18px;
+      height: 18px;
+      padding: 0 4px;
+      font-size: 10px;
+      border-bottom-width: 2px;
+    }
+
+    /* Modificadores: fondo más pesado, negrita, uppercase. */
+    .key.mod {
+      background: var(--bg-mod);
+      color: var(--color-mod);
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      font-size: 10px;
+    }
+
+    :host([size='sm']) .key.mod {
+      font-size: 9px;
+    }
+
+    /* Separador "+" entre teclas en modo combo. */
+    .plus {
+      font-size: 10px;
+      color: var(--color);
+      opacity: 0.6;
+      user-select: none;
+    }
+  `;
+  }
+  // Divide `keys` en tokens normalizados (sin vacíos).
+  parseKeys() {
+    return this.keys.split(/\s+/).map((k) => k.trim()).filter((k) => k.length > 0);
+  }
+  // ¿Es una tecla modificadora?
+  isMod(token) {
+    return MOD_KEYS.has(token.toLowerCase());
+  }
+  // Etiqueta visible: glifo bonito si existe, si no la tecla tal cual (en mayúscula si es 1 char).
+  label(token) {
+    const glyph = GLYPHS[token.toLowerCase()];
+    if (glyph) return glyph;
+    return token.length === 1 ? token.toUpperCase() : token;
+  }
+  render() {
+    const tokens = this.parseKeys();
+    return tokens.map((token, i) => {
+      const mod = this.isMod(token);
+      const cap = html`<kbd
+        class="key ${mod ? "mod" : ""}"
+        aria-label=${token}
+        >${this.label(token)}</kbd
+      >`;
+      const sep = this.combo && i < tokens.length - 1 ? html`<span class="plus" aria-hidden="true">+</span>` : null;
+      return html`${cap}${sep}`;
+    });
+  }
+}
+__decorateClass([
+  property()
+], OkKbd.prototype, "keys");
+__decorateClass([
+  property({ reflect: true })
+], OkKbd.prototype, "size");
+__decorateClass([
+  property({ type: Boolean })
+], OkKbd.prototype, "combo");
+define("ok-kbd", OkKbd);
+export {
+  OkKbd
+};