@erplora/outfitkit 0.1.1

package/dist/ok-detail-list.js

@@ -0,0 +1,156 @@
+import { LitElement, css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.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 OkDetailList extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.columns = 1;
+    this.dense = false;
+    this.placeholder = "—";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --label-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --value-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --row-gap: 0.75rem;
+      --col-gap: 1rem;
+      --label-width: minmax(120px, 30%);
+      --divider-color: var(--ok-border-color, var(--ion-border-color, #e0e0e0));
+    }
+
+    .dl {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--row-gap) var(--col-gap);
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    /* 2 columnas en desktop; se apila a 1 en pantallas estrechas. */
+    :host([columns='2']) .dl {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    /* Modo denso: menos separación vertical. */
+    :host([dense]) {
+      --row-gap: 0.375rem;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: var(--label-width) 1fr;
+      gap: 0.25rem var(--col-gap);
+      align-items: baseline;
+      min-width: 0;
+    }
+
+    /* Un par puede forzar ancho completo en layout de 2 columnas. */
+    .row.full {
+      grid-column: 1 / -1;
+    }
+
+    .label {
+      margin: 0;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--label-color);
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
+    .value {
+      margin: 0;
+      font-size: 0.9375rem;
+      line-height: 1.4;
+      color: var(--value-color);
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
+    :host([dense]) .value {
+      font-size: 0.875rem;
+    }
+
+    .value.empty {
+      color: var(--label-color);
+    }
+
+    /* El valor enriquecido puede traer enlaces/badges: que hereden bien. */
+    .value ::slotted(*),
+    .value a {
+      color: inherit;
+    }
+
+    /* Apilado en móvil: la etiqueta encima del valor, full width. */
+    @media (max-width: 600px) {
+      :host([columns='2']) .dl {
+        grid-template-columns: 1fr;
+      }
+      .row {
+        grid-template-columns: 1fr;
+        gap: 0.125rem;
+      }
+    }
+  `;
+  }
+  renderValue(item) {
+    const raw = item.value;
+    if (raw === void 0 || raw === null || raw === "") {
+      return html`<dd class="value empty">${this.placeholder}</dd>`;
+    }
+    if (item.html) {
+      return html`<dd class="value">${unsafeHTML(raw)}</dd>`;
+    }
+    return html`<dd class="value">${raw}</dd>`;
+  }
+  render() {
+    const items = this.items ?? [];
+    if (items.length === 0) {
+      return nothing;
+    }
+    return html`
+      <dl class="dl">
+        ${items.map(
+      (item) => html`
+            <div class="row ${item.full ? "full" : ""}" role="presentation">
+              <dt class="label">${item.label}</dt>
+              ${this.renderValue(item)}
+            </div>
+          `
+    )}
+      </dl>
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkDetailList.prototype, "items");
+__decorateClass([
+  property({ type: Number, reflect: true })
+], OkDetailList.prototype, "columns");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkDetailList.prototype, "dense");
+__decorateClass([
+  property()
+], OkDetailList.prototype, "placeholder");
+define("ok-detail-list", OkDetailList);
+export {
+  OkDetailList
+};

package/dist/ok-diff.js

@@ -0,0 +1,200 @@
+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 _OkDiff = class _OkDiff2 extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.lines = [];
+    this.raw = "";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): cadena --ok-* → --ion-* → hex. */
+      --bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --bg-hunk: var(--ok-surface-2, var(--ion-color-step-100, #f3f4f6));
+      --border: var(--ok-border-color, var(--ion-border-color, #e2e4e8));
+      --text: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --text-muted: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --num: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      /* "leaf" = verde de adición; "danger" = rojo de eliminación. */
+      --add: var(--ok-success, var(--ion-color-success, #2dd36f));
+      --del: var(--ok-danger, var(--ion-color-danger, #eb445a));
+      --radius: var(--ok-radius-md, 8px);
+      --mono: var(
+        --ok-font-mono,
+        ui-monospace,
+        SFMono-Regular,
+        'SF Mono',
+        Menlo,
+        Consolas,
+        monospace
+      );
+    }
+
+    .diff {
+      font-family: var(--mono);
+      font-size: 12.5px;
+      line-height: 1.6;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      overflow: hidden;
+      box-sizing: border-box;
+      color: var(--text);
+    }
+
+    .line {
+      display: grid;
+      grid-template-columns: 44px 44px 1fr;
+      padding: 0 12px 0 0;
+    }
+
+    .num {
+      text-align: right;
+      padding: 0 8px;
+      color: var(--num);
+      user-select: none;
+      font-size: 11px;
+      white-space: nowrap;
+    }
+
+    .content {
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      color: inherit;
+    }
+
+    /* Línea añadida: tinte leaf 8% + numeración verdosa + glifo "+". */
+    .line--add {
+      background: color-mix(in srgb, var(--add) 8%, transparent);
+    }
+    .line--add .num {
+      color: color-mix(in srgb, var(--add) 70%, var(--num));
+    }
+    .line--add .content::before {
+      content: '+ ';
+      color: var(--add);
+    }
+
+    /* Línea eliminada: tinte danger 8% + numeración rojiza + glifo "−". */
+    .line--del {
+      background: color-mix(in srgb, var(--del) 8%, transparent);
+    }
+    .line--del .num {
+      color: color-mix(in srgb, var(--del) 70%, var(--num));
+    }
+    .line--del .content::before {
+      content: '− ';
+      color: var(--del);
+    }
+
+    /* Cabecera de hunk (@@ … @@): fondo elevado, cursiva, ocupa todo el ancho. */
+    .line--hunk {
+      grid-template-columns: 1fr;
+      background: var(--bg-hunk);
+      color: var(--text-muted);
+      font-style: italic;
+    }
+    .line--hunk .content {
+      padding-left: 12px;
+    }
+    .line--hunk .content::before {
+      content: '';
+    }
+  `;
+  }
+  /** Devuelve las líneas a renderizar: `.lines` si existe, si no parsea `raw`. */
+  resolveLines() {
+    if (this.lines && this.lines.length) return this.lines;
+    if (this.raw) return _OkDiff2.parseUnified(this.raw);
+    return [];
+  }
+  /**
+   * Parsea un diff unificado (texto) a OkDiffLine[]. CSP-safe (sin eval):
+   * solo recorre líneas y lleva la cuenta de oldNo/newNo según las cabeceras
+   * de hunk `@@ -a,b +c,d @@`. Ignora cabeceras de fichero (---, +++).
+   */
+  static parseUnified(raw) {
+    const out = [];
+    let oldNo = 0;
+    let newNo = 0;
+    const hunkRe = /^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/;
+    for (const line of raw.replace(/\r\n?/g, "\n").split("\n")) {
+      if (line.startsWith("+++") || line.startsWith("---") || line.startsWith("diff ")) {
+        continue;
+      }
+      const hunk = hunkRe.exec(line);
+      if (hunk) {
+        oldNo = Number(hunk[1]);
+        newNo = Number(hunk[2]);
+        out.push({ type: "hunk", content: line });
+        continue;
+      }
+      const head = line.charAt(0);
+      if (head === "+") {
+        out.push({ type: "add", content: line.slice(1), newNo });
+        newNo += 1;
+      } else if (head === "-") {
+        out.push({ type: "del", content: line.slice(1), oldNo });
+        oldNo += 1;
+      } else {
+        const content = head === " " ? line.slice(1) : line;
+        out.push({ type: "ctx", content, oldNo, newNo });
+        oldNo += 1;
+        newNo += 1;
+      }
+    }
+    return out;
+  }
+  /** Texto de la columna numérica (vacío si no hay número). */
+  static numText(n) {
+    return n === void 0 || n === null ? "" : String(n);
+  }
+  renderLine(line) {
+    if (line.type === "hunk") {
+      return html`
+        <div class="line line--hunk" role="row">
+          <div class="content" role="cell">${line.content}</div>
+        </div>
+      `;
+    }
+    return html`
+      <div class="line line--${line.type}" role="row">
+        <span class="num" role="cell" aria-hidden="true">${_OkDiff2.numText(line.oldNo)}</span>
+        <span class="num" role="cell" aria-hidden="true">${_OkDiff2.numText(line.newNo)}</span>
+        <span class="content" role="cell">${line.content}</span>
+      </div>
+    `;
+  }
+  render() {
+    const lines = this.resolveLines();
+    return html`
+      <div class="diff" role="table" aria-label="Diff de líneas">
+        ${lines.map((l) => this.renderLine(l))}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], _OkDiff.prototype, "lines");
+__decorateClass([
+  property()
+], _OkDiff.prototype, "raw");
+let OkDiff = _OkDiff;
+define("ok-diff", OkDiff);
+export {
+  OkDiff
+};

package/dist/ok-donut.js

@@ -0,0 +1,280 @@
+import { LitElement, css, svg, 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 DEFAULT_PALETTE = [
+  "var(--ok-primary, var(--ion-color-primary, #3880ff))",
+  "var(--ok-success, var(--ion-color-success, #2dd36f))",
+  "var(--ok-warning, var(--ion-color-warning, #ffc409))",
+  "var(--ok-tertiary, var(--ion-color-tertiary, #5260ff))",
+  "var(--ok-danger, var(--ion-color-danger, #eb445a))",
+  "var(--ok-secondary, var(--ion-color-secondary, #3dc2ff))"
+];
+class OkDonut extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.slices = [];
+    this.size = 140;
+    this.thickness = 16;
+    this.centerLabel = "";
+    this.centerValue = "";
+    this.legend = true;
+    this.legendSide = "side";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --value-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --label-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --track-color: var(--ok-donut-track, var(--ion-color-step-100, #ebedf0));
+      --legend-color: var(--ok-color-medium-shade, var(--ion-color-medium-shade, #808289));
+    }
+
+    .donut {
+      display: grid;
+      gap: 18px;
+      align-items: center;
+    }
+    /* Leyenda al lado: SVG de ancho fijo + leyenda flexible. */
+    .donut.side {
+      grid-template-columns: auto 1fr;
+    }
+    /* Leyenda abajo: una sola columna, todo centrado. */
+    .donut.bottom {
+      grid-template-columns: 1fr;
+      justify-items: center;
+    }
+
+    svg {
+      display: block;
+    }
+
+    .track {
+      fill: none;
+      stroke: var(--track-color);
+    }
+    .slice {
+      fill: none;
+      transform: rotate(-90deg);
+      transform-origin: center;
+      /* Animación al cambiar proporciones (mismo espíritu que el CSS original). */
+      transition: stroke-dasharray 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    /* Modo pie: el segmento se rellena en vez de trazarse. */
+    .pie {
+      stroke: none;
+      transform: rotate(-90deg);
+      transform-origin: center;
+    }
+
+    .center-value {
+      fill: var(--value-color);
+      text-anchor: middle;
+      font-weight: 700;
+      letter-spacing: -0.04em;
+    }
+    .center-label {
+      fill: var(--label-color);
+      text-anchor: middle;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+
+    .legend {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      font-size: 12px;
+      width: 100%;
+    }
+    .legend-row {
+      display: grid;
+      grid-template-columns: 10px 1fr auto;
+      gap: 8px;
+      align-items: center;
+      color: var(--legend-color);
+    }
+    .legend-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 3px;
+    }
+    .legend-pct {
+      color: var(--value-color);
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+    }
+  `;
+  }
+  // Total de los valores (sin negativos), con guarda contra 0.
+  get total() {
+    const sum = (this.slices ?? []).reduce(
+      (acc, s) => acc + Math.max(0, s.value || 0),
+      0
+    );
+    return sum;
+  }
+  // Color efectivo de un slice (su color o el de la paleta por índice).
+  colorAt(slice, i) {
+    return slice.color || DEFAULT_PALETTE[i % DEFAULT_PALETTE.length];
+  }
+  // Porcentaje (0–100) de un slice sobre el total.
+  pct(value) {
+    const total = this.total;
+    if (total <= 0) return 0;
+    return Math.max(0, value) / total * 100;
+  }
+  // Dibuja el donut (anillos trazados) o el pie (cuñas macizas) según thickness.
+  renderChart() {
+    const size = this.size;
+    const cx = size / 2;
+    const cy = size / 2;
+    const isPie = this.thickness <= 0;
+    const total = this.total;
+    const slices = this.slices ?? [];
+    const stroke = isPie ? 0 : this.thickness;
+    const r = isPie ? size / 2 : (size - stroke) / 2;
+    const circumference = 2 * Math.PI * r;
+    const pieStroke = size / 2;
+    const pieR = size / 4;
+    const pieCircumference = 2 * Math.PI * pieR;
+    let offset = 0;
+    const segments = slices.map((s, i) => {
+      const fraction = total > 0 ? Math.max(0, s.value) / total : 0;
+      const dash = fraction * (isPie ? pieCircumference : circumference);
+      const dashoffset = -offset;
+      offset += dash;
+      const color = this.colorAt(s, i);
+      if (isPie) {
+        return svg`<circle
+          class="pie"
+          cx=${cx}
+          cy=${cy}
+          r=${pieR}
+          fill="none"
+          stroke=${color}
+          stroke-width=${pieStroke}
+          stroke-dasharray=${`${dash} ${pieCircumference}`}
+          stroke-dashoffset=${dashoffset}
+        />`;
+      }
+      return svg`<circle
+        class="slice"
+        cx=${cx}
+        cy=${cy}
+        r=${r}
+        stroke=${color}
+        stroke-width=${stroke}
+        stroke-dasharray=${`${dash} ${circumference}`}
+        stroke-dashoffset=${dashoffset}
+        stroke-linecap="butt"
+      />`;
+    });
+    const valueSize = Math.max(14, Math.round(size * 0.16));
+    const labelSize = Math.max(8, Math.round(size * 0.065));
+    const showCenter = !isPie && (this.centerValue || this.centerLabel);
+    return svg`
+      ${!isPie ? svg`<circle
+            class="track"
+            cx=${cx}
+            cy=${cy}
+            r=${r}
+            stroke-width=${stroke}
+          />` : svg``}
+      ${segments}
+      ${showCenter ? svg`
+          ${this.centerValue ? svg`<text
+                class="center-value"
+                x=${cx}
+                y=${this.centerLabel ? cy + valueSize * 0.05 : cy + valueSize * 0.35}
+                font-size=${valueSize}
+              >${this.centerValue}</text>` : svg``}
+          ${this.centerLabel ? svg`<text
+                class="center-label"
+                x=${cx}
+                y=${this.centerValue ? cy + valueSize * 0.7 : cy + labelSize * 0.35}
+                font-size=${labelSize}
+              >${this.centerLabel}</text>` : svg``}
+        ` : svg``}
+    `;
+  }
+  // Filas de leyenda: cuadradito de color + nombre + porcentaje calculado.
+  renderLegend() {
+    const slices = this.slices ?? [];
+    if (!this.legend || slices.length === 0) return null;
+    return html`
+      <div class="legend" role="list">
+        ${slices.map((s, i) => {
+      const pct = this.pct(s.value);
+      return html`
+            <div class="legend-row" role="listitem">
+              <span
+                class="legend-dot"
+                style=${`background:${this.colorAt(s, i)}`}
+              ></span>
+              <span>${s.label}</span>
+              <span class="legend-pct">${Math.round(pct)}%</span>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  render() {
+    const size = this.size;
+    const showLegend = this.legend && (this.slices ?? []).length > 0;
+    const side = this.legendSide === "bottom" ? "bottom" : "side";
+    const ariaLabel = (this.slices ?? []).map((s) => `${s.label}: ${Math.round(this.pct(s.value))}%`).join(", ");
+    return html`
+      <div class=${`donut ${showLegend ? side : "bottom"}`}>
+        <svg
+          width=${size}
+          height=${size}
+          viewBox=${`0 0 ${size} ${size}`}
+          role="img"
+          aria-label=${ariaLabel || "donut chart"}
+        >
+          ${this.renderChart()}
+        </svg>
+        ${showLegend ? this.renderLegend() : null}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkDonut.prototype, "slices");
+__decorateClass([
+  property({ type: Number })
+], OkDonut.prototype, "size");
+__decorateClass([
+  property({ type: Number })
+], OkDonut.prototype, "thickness");
+__decorateClass([
+  property({ attribute: "center-label" })
+], OkDonut.prototype, "centerLabel");
+__decorateClass([
+  property({ attribute: "center-value" })
+], OkDonut.prototype, "centerValue");
+__decorateClass([
+  property({ type: Boolean })
+], OkDonut.prototype, "legend");
+__decorateClass([
+  property({ attribute: "legend-side" })
+], OkDonut.prototype, "legendSide");
+define("ok-donut", OkDonut);
+export {
+  OkDonut
+};