// Generated, do not edit. sha256:3eb303d976e1be5498b5aef4a7cdd95c577070d967bef44ed7c9e2767146c564
import { esc } from './escape.js';

const DEFAULT_LABELS = Object.freeze({ loading: 'Loading…', loadError: 'Could not load this.' });
let labels = { ...DEFAULT_LABELS };

export function configureLoading({ labels: l = null } = {}) {
  labels = { ...DEFAULT_LABELS, ...(l || {}) };
}

const sizes = ({ w, h, r, flex } = {}) =>
  (w ? ` data-skel-w="${esc(w)}"` : '') + (h ? ` data-skel-h="${esc(h)}"` : '')
  + (r ? ` data-skel-r="${esc(r)}"` : '') + (flex ? ` data-skel-flex="${esc(flex)}"` : '');

export function sizeSkeleton(host) {
  if (!host) return;
  for (const el of host.querySelectorAll('[data-skel-w], [data-skel-h], [data-skel-r], [data-skel-flex]')) {
    const d = el.dataset;
    if (d.skelW) el.style.setProperty('width', d.skelW);
    if (d.skelH) el.style.setProperty('height', d.skelH);
    if (d.skelR) el.style.setProperty('border-radius', d.skelR);
    if (d.skelFlex) el.style.setProperty('flex', d.skelFlex);
  }
}

export function block(w = '100%', h = '1rem', radius = 'var(--radius-sm)') {
  return `<span class="skel skel-block"${sizes({ w, h, r: radius })}></span>`;
}
export function line(w = '100%') {
  return `<span class="skel skel-line"${sizes({ w })}></span>`;
}
export function circle(size = '2rem') {
  return `<span class="skel skel-block"${sizes({ w: size, h: size, r: '50%', flex: 'none' })}></span>`;
}
export function card({ lines = 3 } = {}) {
  const body = Array.from({ length: lines }, (_, i) =>
    `<div class="skel-row">${line(i === 0 ? '55%' : '35%')}${line('20%')}</div>`).join('');
  return `<div class="skel-card">
    <div class="skel-row"><div class="skel-row-l">${circle('1.6rem')}${line('40%')}</div>${block('3rem', '1.1rem')}</div>
    <div class="skel-card-body">${body}</div>
  </div>`;
}
export function table({ rows = 6, cols = 4 } = {}) {
  const cell = (head) => `<span class="skel ${head ? 'skel-line' : 'skel-cell'}"${sizes({ w: head ? '60%' : '80%' })}></span>`;
  const row = (head) => `<div class="skel-trow">${Array.from({ length: cols }, () => `<div class="skel-td">${cell(head)}</div>`).join('')}</div>`;
  const bodyRows = Array.from({ length: rows }, () => row(false)).join('');
  return `<div class="skel-table">${row(true)}${bodyRows}</div>`;
}
export function cards({ count = 3, lines = 3 } = {}) {
  return `<div class="skel-grid">${Array.from({ length: count }, () => card({ lines })).join('')}</div>`;
}

export function skeleton(parts) {
  const inner = Array.isArray(parts) ? parts.join('') : String(parts ?? '');
  const label = `<span class="sr-only">${esc(labels.loading)}</span>`;
  return `<div class="skel-wrap" aria-busy="true" aria-live="polite">${label}<div aria-hidden="true">${inner}</div></div>`;
}

export function show(host, variant = 'lines', opts = {}) {
  if (!host) return;
  let parts;
  if (variant === 'cards') parts = cards(opts);
  else if (variant === 'table') parts = table(opts);
  else if (variant === 'card') parts = card(opts);
  else parts = Array.from({ length: opts.count || 3 }, (_, i) => line(i % 2 ? '70%' : '90%'));
  host.innerHTML = skeleton(parts);
  sizeSkeleton(host);
}

export function spinner(host, label = labels.loading) {
  if (!host) return;
  host.innerHTML = `<div class="skel-spin-wrap" aria-busy="true" aria-live="polite">
    <span class="skel-spinner" aria-hidden="true"></span>
    <span class="t-body-sm t-muted">${esc(label)}</span>
  </div>`;
}

export function error(host, msg) {
  if (!host) return;
  host.innerHTML = `<div class="skel-error t-body-sm t-neg" role="alert">⚠ ${esc(msg || labels.loadError)}</div>`;
}