@muten/shadcn 0.0.5 → 0.1.0

package/registry/kit/board.js

@@ -0,0 +1,300 @@
+// kit/board.js - the order Board and its card (the reference artifact's «Tablero» and «Tarjeta: mínimo y máximo"),
+// composed only from atoms. Lanes and cards are data; the card groups its information by what it is about and
+// orders it by what needs the owner first. Drag with the mouse, hold on touch, Space/arrows with the keyboard.
+//   lanes [{id, title, next}]  next = the label of the step that moves a card INTO the following lane
+//   cards [{id, lane, who, sub, total, contact, status [tone,label], request {…} | [{…}], order {count, photos, extras},
+//           pay {method transfer|card|cash, tone, label, detail}, delivery {mode ship|pickup, label, when, map, track},
+//           note, actions [["advance", label]]}]  photos and request.photo are CSS backgrounds (a gradient or url()).
+//   sizes [{title, description, card}]  renders those cards side by side (static) instead of a board.
+// on.change(json [{id, lane}]) after a card moves; on.action(json {id, action}) for every card button.
+export function orderBoard(root, i, core, on) {
+  const { ui, $, $$, lib, openModal: open, closeModal, CONTENT, body, foot, easeHeight, money0, hue, ini } = core;
+  const list = (v) => (Array.isArray(v) ? v : []);
+  const copy = (x) => JSON.parse(JSON.stringify(x));
+  const CARDS = Object.fromEntries(list(i.cards).map((c) => [c.id, { actions: [], ...copy(c) }]));
+  const LANES_B = list(i.lanes).map((l) => ({ ...l, cards: list(i.cards).filter((c) => c.lane === l.id).map((c) => c.id) }));
+  const SIZES = list(i.sizes).map((s) => [s.title, s.description || '', s.card]);
+  const btn = (variant, label, attrs = '') => `<button data-slot="button" class="cn-button cn-button-variant-${variant} cn-button-size-default group/button" ${attrs}>${label}</button>`;
+  // one shared modal: this board's content is put in place right before it opens
+  const KINDS = {}; const openModal = (kind, mode) => { CONTENT[kind] = KINDS[kind]; open(kind, mode); };
+  const emit = () => on.change?.(JSON.stringify($$('.cx-bcard', brd).map((c) => ({ id: c.dataset.card, lane: c.closest('.cx-blane')?.dataset.lane }))));
+  root.innerHTML = SIZES.length ? '<div class="cx-card-sizes"></div>' : '<div class="cx-board cx-scroll"></div><p class="sr-only cx-board-live" aria-live="assertive"></p>';
+  const TONE_CLS = { ok: 'cx-tone-ok', wait: 'cx-tone-wait', new: 'cx-tone-new', bad: 'cx-tone-bad', info: 'cx-tone-new', muted: 'cn-badge-variant-outline' };
+  const badge = ([t, l, dot = t !== 'muted']) => `<span data-slot="badge" class="cn-badge group/badge ${TONE_CLS[t]}">${dot ? '<span class="cx-dot"></span>' : ''}${l}</span>`;
+  const bBtn = (act, label, variant = 'outline', icon = '') => `<button data-slot="button" class="cn-button cn-button-variant-${variant} cn-button-size-xs group/button" data-bact="${act}">${icon ? `<svg><use href="#${icon}"/></svg>` : ''}${label}</button>`;
+  const miniMap = (m) => `<svg class="cx-map-svg" viewBox="0 0 240 110" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+      <rect width="240" height="110" class="mp-ground"/>
+      <path class="mp-park" d="M150 8h52v34h-52z"/><path class="mp-water" d="M0 92c40-10 70 6 110-2s70-14 130-4v24H0z"/>
+      <g class="mp-street"><path d="M0 30h240M0 64h240M40 0v110M98 0v110M170 0v110M214 0v110"/></g>
+      <g class="mp-minor"><path d="M0 47h240M69 0v110M134 0v110"/></g>
+      ${m.route ? '<path class="mp-route" d="M40 64H98V30h72V64h44"/>' : ''}
+      <circle cx="40" cy="64" r="5" class="mp-shop"/>
+      <g transform="translate(${m.route ? 214 : 170} 64)"><path class="mp-pin" d="M0 0c-6-8-10-12-10-17a10 10 0 0 1 20 0c0 5-4 9-10 17z"/><circle cy="-17" r="3.5" class="mp-pin-dot"/></g>
+    </svg>`;
+  // ── Order card for Storio, composed only from atoms ──
+  // Card > CardHeader (Item: Avatar · name · line · contact Button) + attention Buttons
+  //      > CardContent (ItemGroup: Productos · Pago · Entrega, split by ItemSeparator)
+  //      > CardFooter (the one Button that changes the state)
+  const TONE = { ok: 'ok', wait: 'wait', new: 'info', bad: 'bad', info: 'info', muted: 'muted' };
+  const GROUPS = {
+    order: (o) => ui.item({
+      media: ui.itemMedia(ui.icon('bag')),
+      title: `${o.count} ${o.count === 1 ? 'producto' : 'productos'}`,
+      footer: `<div class="cx-vstack"><div class="cx-hstack">${o.photos.slice(0, 5).map((x) => ui.avatar(x, { shape: 'square', size: 'lg', bg: x })).join('')}${o.photos.length > 5 ? `<span data-slot="avatar" data-size="lg" data-shape="square" class="cn-avatar group/avatar"><span class="cn-avatar-fallback">+${o.photos.length - 5}</span></span>` : ''}</div>${o.extras?.length ? `<div class="cx-hstack">${o.extras.map((e) => ui.badge(e, { variant: 'outline' })).join('')}</div>` : ''}</div>`,
+    }),
+    pay: (p, c) => {
+      const action = p.method === 'transfer' && p.tone === 'new' ? ['receipt', 'Revisar comprobante', 'image'] : p.method === 'card' ? ['stripe', 'Ver recibo de Stripe', 'card'] : null;
+      return ui.item({
+        media: ui.itemMedia(ui.icon('card')),
+        title: `<span>Pago · ${money0(c.total)}</span>`,
+        description: p.detail || '',
+        actions: ui.badge(p.label, { tone: TONE[p.tone] }),
+        footer: action ? ui.button({ label: action[1], icon: action[2], attrs: `data-bact="${action[0]}"`, cls: 'cx-fill' }) : '',
+      });
+    },
+    delivery: (d) => {
+      const info = d.track ? `<b>${d.track.steps[d.track.at]}</b> · ${d.track.courier.split(' ')[0]}, ${d.track.eta}` : d.map ? d.map.address : '';
+      const more = (d.track || d.map) ? ui.button({ label: d.track ? 'Ver entrega' : 'Ver mapa', size: 'xs', attrs: 'data-bact="delivery"' }) : '';
+      return ui.item({
+        media: ui.itemMedia(ui.icon(d.mode === 'pickup' ? 'store' : 'truck')),
+        title: `${d.label}${d.when ? ` · ${d.when}` : ''}`,
+        description: info,
+        actions: more,
+        footer: d.track ? ui.progress((d.track.at / (d.track.steps.length - 1)) * 100, `Entrega: ${d.track.steps[d.track.at]}`) : '',
+      });
+    },
+  };
+  const GROUP_ORDER = ['order', 'pay', 'delivery'];
+  const SIGNAL_TONE = { wait: 'wait', bad: 'bad', info: 'info' };
+  const signals = (c) => {
+    const list = c.request ? (Array.isArray(c.request) ? c.request : [c.request]) : [];
+    const items = list.map((r, i) => ui.button({ icon: r.icon, size: 'icon-sm', variant: 'ghost', tone: SIGNAL_TONE[r.tone] || 'info', cls: 'cx-has-indicator', attrs: `data-bact="request" data-i="${i}" data-name="${r.title}" aria-haspopup="dialog" aria-label="${r.title}${r.text ? ': ' + r.text : ''}"` }).replace('</button>', `${ui.indicator(SIGNAL_TONE[r.tone] || 'info')}</button>`));
+    if (c.note) items.push(ui.button({ icon: 'quote', size: 'icon-sm', variant: 'ghost', tone: 'note', cls: 'cx-has-indicator', attrs: `data-bact="note" data-name="Nota del cliente" aria-haspopup="dialog" aria-label="Nota de ${c.who.split(' ')[0]}: ${c.note}"` }).replace('</button>', `${ui.indicator('note')}</button>`));
+    return items.length ? `<div class="cx-hstack" role="group" aria-label="Pendientes">${items.join('')}</div>` : '';
+  };
+  const CONTACT = {
+    whatsapp: { icon: 'b-whatsapp', color: '#25D366', name: 'WhatsApp' },
+    telegram: { icon: 'b-telegram', color: '#26A5E4', name: 'Telegram' },
+    instagram: { icon: 'b-instagram', color: '#E4405F', name: 'Instagram' },
+    phone: { icon: 'call', color: 'var(--foreground)', name: 'una llamada' },
+  };
+  const cardInner = (id) => {
+    const c = CARDS[id], via = CONTACT[c.contact];
+    const contact = via ? ui.button({ icon: via.icon, size: 'icon-sm', variant: 'ghost', tone: 'brand', attrs: `style="--brand:${via.color}" data-bact="contact" aria-label="Contactar a ${c.who} por ${via.name}, como lo pidió" title="Prefiere ${via.name}"` }) : '';
+    const person = ui.item({
+      media: ui.itemMedia(ui.avatar(c.who), 'default'),
+      title: `<span class="cx-ellipsis" title="${c.who}">${c.who}</span>`,
+      description: `<span class="cx-ellipsis" title="${c.sub}">${c.sub}</span>`,
+      actions: contact || (c.status ? ui.badge(c.status[1], { tone: TONE[c.status[0]] }) : (c.pay ? '' : `<span class="cx-num cx-strong">${money0(c.total)}</span>`)),
+      footer: (c.status && contact ? ui.badge(c.status[1], { tone: TONE[c.status[0]] }) : '') + signals(c),
+    });
+    const groups = GROUP_ORDER.filter((k) => c[k]).map((k) => GROUPS[k](c[k], c));
+    const next = c.actions.find(([a]) => a === 'advance');
+    return `<div data-slot="card-header" class="cn-card-header">${person}</div>`
+      + (groups.length ? `<div data-slot="card-content" class="cn-card-content"><div data-slot="item-group" class="cn-item-group" role="list">${groups.join(ui.itemSeparator())}</div></div>` : '')
+      + (next ? `<div data-slot="card-footer" class="cn-card-footer">${ui.button({ label: `${next[1]}<svg><use href="#right"/></svg>`, variant: 'default', size: 'default', attrs: 'data-bact="advance"', cls: 'cx-fill' })}</div>` : '');
+  };
+
+  const brd = $('.cx-board', root) || document.createElement('div'), brdLive = $('.cx-board-live', root);
+  brd.innerHTML = LANES_B.map((l) => `<section class="cx-blane" data-lane="${l.id}" aria-label="${l.title}"><div class="cx-lane-h"><span>${l.title}</span><span class="cx-count"></span></div><div class="cx-lane-list">${l.cards.map((id) => `<div data-slot="card" data-size="sm" class="cn-card group/card cx-bcard" tabindex="0" data-card="${id}" aria-roledescription="tarjeta que se puede mover" aria-label="Pedido ${id} de ${CARDS[id].who}">${cardInner(id)}</div>`).join('')}</div></section>`).join('');
+  const lanesEls = () => $$('.cx-blane', brd);
+  const syncLanes = () => lanesEls().forEach((l) => {
+    const list = $('.cx-lane-list', l), n = $$('.cx-bcard', list).length;
+    $('.cx-count', l).textContent = n;
+    const empty = $('.cx-lane-empty-b', list);
+    if (!n && !$('.cx-bph', list) && !empty) list.insertAdjacentHTML('beforeend', '<div class="cx-lane-empty-b">Suelta aquí un pedido</div>');
+    if ((n || $('.cx-bph', list)) && empty) empty.remove();
+  });
+  const sayCard = (card) => { const lane = card.closest('.cx-blane'), list = $$('.cx-bcard', lane); brdLive.textContent = `Pedido ${card.dataset.card}: ${lane.getAttribute('aria-label')}, posición ${list.indexOf(card) + 1} de ${list.length}`; };
+  const flip = (els, change) => { // animate siblings from their old place to the new one
+    const before = new Map(els.map((x) => [x, x.getBoundingClientRect()])); change();
+    before.forEach((r, x) => { const n = x.getBoundingClientRect(); const dx = r.left - n.left, dy = r.top - n.top; if (dx || dy) x.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'none' }], { duration: 200, easing: 'cubic-bezier(.22, 1, .36, 1)' }); });
+  };
+  let bDrag = null;
+  brd.addEventListener('pointerdown', (e) => {
+    const card = e.target.closest('.cx-bcard'); if (!card || e.button > 0 || card.hasAttribute('data-lifted') || e.target.closest('button, a, input')) return;
+    bDrag = { card, x0: e.clientX, y0: e.clientY, lx: e.clientX, ly: e.clientY, live: false, id: e.pointerId, touch: e.pointerType !== 'mouse', held: false, pan: false };
+    // on touch, a swipe moves the board and the page; holding still for a moment picks the card up
+    if (bDrag.touch) { const d = bDrag; d.timer = setTimeout(() => { if (bDrag === d && !d.pan) { d.held = true; card.setAttribute('data-held', ''); navigator.vibrate?.(8); } }, 260); }
+  });
+  addEventListener('pointermove', (e) => {
+    if (!bDrag || e.pointerId !== bDrag.id) return;
+    const d = bDrag;
+    if (d.pan) { brd.scrollLeft -= e.clientX - d.lx; scrollBy(0, -(e.clientY - d.ly)); d.lx = e.clientX; d.ly = e.clientY; return; }
+    if (!d.live) {
+      if (Math.hypot(e.clientX - d.x0, e.clientY - d.y0) < 6) return;
+      if (d.touch && !d.held) { clearTimeout(d.timer); d.pan = true; d.lx = e.clientX; d.ly = e.clientY; return; }
+      d.card.removeAttribute('data-held');
+      d.live = true; const r = d.card.getBoundingClientRect();
+      d.dx = d.x0 - r.left; d.dy = d.y0 - r.top;
+      d.ph = document.createElement('div'); d.ph.className = 'cx-bph'; d.ph.style.height = r.height + 'px';
+      d.card.after(d.ph); d.card.style.width = r.width + 'px'; d.card.classList.add('cx-dragging'); lib.appendChild(d.card);
+      d.from = { list: d.ph.parentElement, next: d.ph.nextSibling };
+    }
+    d.card.style.left = e.clientX - d.dx + 'px'; d.card.style.top = e.clientY - d.dy + 'px';
+    const lane = document.elementFromPoint(e.clientX, e.clientY)?.closest?.('.cx-blane');
+    lanesEls().forEach((l) => l.toggleAttribute('data-over', l === lane));
+    if (!lane) return;
+    const list = $('.cx-lane-list', lane), cards = $$('.cx-bcard', list);
+    const before = cards.find((c) => { const r = c.getBoundingClientRect(); return e.clientY < r.top + r.height / 2; }) || null;
+    if (d.ph.parentElement === list && (d.ph.nextElementSibling === before || (!before && d.ph === list.lastElementChild))) return;
+    flip($$('.cx-bcard', brd), () => { list.insertBefore(d.ph, before); syncLanes(); });
+  });
+  const bEnd = () => {
+    if (!bDrag) return; const d = bDrag; bDrag = null;
+    clearTimeout(d.timer); d.card.removeAttribute('data-held');
+    if (!d.live) return;
+    lanesEls().forEach((l) => l.removeAttribute('data-over'));
+    const to = d.ph.getBoundingClientRect(), from = d.card.getBoundingClientRect();
+    d.card.classList.remove('cx-dragging'); d.card.style.cssText = '';
+    d.ph.replaceWith(d.card); syncLanes();
+    d.card.animate([{ transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) rotate(1.5deg)` }, { transform: 'none' }], { duration: 220, easing: 'cubic-bezier(.22, 1, .36, 1)' });
+    sayCard(d.card); emit();
+  };
+  addEventListener('pointerup', bEnd); addEventListener('pointercancel', bEnd);
+  let lifted = null;
+  brd.addEventListener('keydown', (e) => {
+    const card = e.target.closest('.cx-bcard'); if (!card || e.target !== card) return;
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      if (lifted === card) { card.removeAttribute('data-lifted'); lifted = null; brdLive.textContent = `Soltado. ${brdLive.textContent}`; sayCard(card); emit(); return; }
+      lifted = card; card.setAttribute('data-lifted', ''); card._home = { list: card.parentElement, next: card.nextSibling };
+      brdLive.textContent = `Levantaste el pedido ${card.dataset.card}. Flechas para moverlo, Espacio para soltar, Esc para cancelar.`; return;
+    }
+    if (lifted !== card) return;
+    const list = card.parentElement, lane = card.closest('.cx-blane'), ls = lanesEls(), li = ls.indexOf(lane);
+    let move = null;
+    if (e.key === 'ArrowUp' && card.previousElementSibling?.classList.contains('cx-bcard')) move = () => list.insertBefore(card, card.previousElementSibling);
+    if (e.key === 'ArrowDown' && card.nextElementSibling?.classList.contains('cx-bcard')) move = () => list.insertBefore(card.nextElementSibling, card);
+    if ((e.key === 'ArrowLeft' && li > 0) || (e.key === 'ArrowRight' && li < ls.length - 1)) {
+      const target = $('.cx-lane-list', ls[li + (e.key === 'ArrowLeft' ? -1 : 1)]), idx = $$('.cx-bcard', list).indexOf(card);
+      move = () => target.insertBefore(card, $$('.cx-bcard', target)[idx] || null);
+    }
+    if (e.key === 'Escape') { e.preventDefault(); move = () => card._home.list.insertBefore(card, card._home.next); card.removeAttribute('data-lifted'); lifted = null; }
+    if (!move) return;
+    e.preventDefault(); flip($$('.cx-bcard', brd), () => { move(); syncLanes(); }); card.focus({ preventScroll: true }); card.scrollIntoView({ block: 'nearest', inline: 'nearest' }); sayCard(card);
+  });
+  // move the board sideways: drag its background with the mouse (touch pans natively), wheel with Shift,
+  // and while a card is being dragged near an edge the board scrolls by itself so every lane is reachable
+  let pan = null;
+  brd.addEventListener('pointerdown', (e) => {
+    if (e.pointerType !== 'mouse' || e.button > 0 || e.target.closest('.cx-bcard, button, a')) return;
+    pan = { x: e.clientX, left: brd.scrollLeft, moved: false };
+  });
+  addEventListener('pointermove', (e) => {
+    if (!pan) return; const dx = e.clientX - pan.x;
+    if (!pan.moved && Math.abs(dx) > 3) { pan.moved = true; brd.classList.add('panning'); }
+    if (pan.moved) brd.scrollLeft = pan.left - dx;
+  });
+  addEventListener('pointerup', () => { if (!pan) return; pan = null; brd.classList.remove('panning'); });
+  const boardEdges = () => { brd.toggleAttribute('data-start', brd.scrollLeft > 2); brd.toggleAttribute('data-end', brd.scrollLeft < brd.scrollWidth - brd.clientWidth - 2); };
+  brd.addEventListener('scroll', boardEdges, { passive: true }); new ResizeObserver(boardEdges).observe(brd);
+  let edgeX = null;
+  const edgeTick = () => {
+    if (!bDrag?.live) { edgeX = null; return; }
+    if (edgeX != null) { const r = brd.getBoundingClientRect(), zone = 70; const v = edgeX < r.left + zone ? -(r.left + zone - edgeX) : edgeX > r.right - zone ? edgeX - (r.right - zone) : 0; if (v) brd.scrollLeft += Math.max(-18, Math.min(18, v / 3)); }
+    requestAnimationFrame(edgeTick);
+  };
+  addEventListener('pointermove', (e) => { if (bDrag?.live) { if (edgeX == null) requestAnimationFrame(edgeTick); edgeX = e.clientX; } });
+
+  // the card's own buttons
+  let receiptFor = null, replyFor = null, deliveryFor = null, requestFor = null, requestIdx = 0;
+  KINDS.request = () => {
+    const c = CARDS[requestFor], list = Array.isArray(c.request) ? c.request : [c.request], r = list[requestIdx] || list[0];
+    $('#mdl-title').textContent = r.title; $('#mdl-desc').textContent = `${c.who} · pedido ${requestFor}${r.when ? ' · ' + r.when : ''}`;
+    body.innerHTML = `${r.text ? `<blockquote class="cx-req-full" data-tone="${r.tone}">${r.text}</blockquote>` : '<p class="cx-note" style="text-align:left">Sin mensaje del cliente.</p>'}${r.photo ? `<span class="cx-bc-ph" style="width:96px;background:${r.photo}"></span>` : ''}${list.length > 1 ? `<div class="cx-req-next"><b>También por resolver</b>${list.filter((x) => x !== r).map((x) => `<span><svg><use href="#${x.icon}"/></svg>${x.title}</span>`).join('')}</div>` : ''}`;
+    const [yes, no] = r.actions;
+    foot.innerHTML = (no ? btn('outline', no[1], `data-req-act="${no[0]}"`) : btn('outline', 'Cerrar', 'data-dismiss')) + (yes ? btn('default', yes[1], `data-req-act="${yes[0]}"`) : '');
+    foot.firstElementChild.classList.add('cx-exit'); foot.lastElementChild.classList.add('cx-go');
+  };
+  document.addEventListener('click', (e) => {
+    const r = e.target.closest('[data-req-act]'); if (!r || !requestFor) return;
+    const card = $(`.cx-bcard[data-card="${requestFor}"]`, root), act = r.dataset.reqAct, idx = requestIdx; requestFor = null; closeModal();
+    // run the card's action once the modal (and its history entry) is gone, so a follow-up modal can open
+    setTimeout(() => { if (!card) return; const t = document.createElement('button'); t.dataset.bact = act; t.dataset.i = idx; t.hidden = true; card.appendChild(t); t.click(); t.remove(); }, 420);
+  });
+  let noteFor = null, stripeFor = null;
+  KINDS.note = () => {
+    const c = CARDS[noteFor];
+    $('#mdl-title').textContent = `Nota de ${c.who.split(' ')[0]}`; $('#mdl-desc').textContent = `${c.who} · pedido ${noteFor}`;
+    body.innerHTML = `<blockquote class="cx-req-full" data-tone="note">${c.note}</blockquote>`;
+    foot.innerHTML = btn('outline', 'Cerrar', 'data-dismiss') + btn('default', 'Copiar nota', 'data-note-copy');
+    foot.firstElementChild.classList.add('cx-exit'); foot.lastElementChild.classList.add('cx-go');
+  };
+  KINDS.stripe = () => {
+    const c = CARDS[stripeFor], p = c.pay;
+    $('#mdl-title').textContent = 'Recibo de pago'; $('#mdl-desc').textContent = `${c.who} · pedido ${stripeFor}`;
+    body.innerHTML = `<div class="cx-stripe"><div class="cx-stripe-top"><span class="cx-stripe-amt cx-num">${money0(c.total)}</span><span data-slot="badge" class="cn-badge group/badge cx-tone-ok"><span class="cx-dot"></span>Pagado</span></div><dl><dt>Medio</dt><dd>${p.detail.split(' · ')[0]}</dd><dt>Procesado por</dt><dd>Stripe</dd><dt>Fecha</dt><dd>8 oct 2026 · 09:14</dd><dt>ID del pago</dt><dd class="cx-num">pi_3Q${stripeFor.slice(1)}xK8aR2</dd><dt>Comisión</dt><dd class="cx-num">${money0(Math.round(c.total * 0.039))}</dd><dt>Recibes</dt><dd class="cx-num"><b>${money0(c.total - Math.round(c.total * 0.039))}</b></dd></dl></div>`;
+    foot.innerHTML = btn('outline', 'Cerrar', 'data-dismiss') + `<a data-slot="button" class="cn-button cn-button-variant-default cn-button-size-default group/button cx-go" href="https://dashboard.stripe.com/test/payments" target="_blank" rel="noopener">Abrir en Stripe</a>`;
+    foot.firstElementChild.classList.add('cx-exit');
+  };
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('[data-note-copy]') || !noteFor) return;
+    const t = e.target.closest('[data-note-copy]'), text = CARDS[noteFor].note;
+    try { navigator.clipboard.writeText(text).then(() => { t.textContent = 'Copiada'; }, () => { getSelection().selectAllChildren($('.cx-req-full', body)); }); } catch { getSelection().selectAllChildren($('.cx-req-full', body)); }
+  });
+  KINDS.delivery = () => {
+    const c = CARDS[deliveryFor], d = c.delivery;
+    $('#mdl-title').textContent = d.label; $('#mdl-desc').textContent = `${c.who} · pedido ${deliveryFor}${d.when ? ' · ' + d.when : ''}`;
+    const steps = d.track ? `<div class="cx-dl-steps" style="--n:${d.track.steps.length}">${d.track.steps.map((st, i) => `<div ${i < d.track.at ? 'data-done' : i === d.track.at ? 'data-now aria-current="step"' : ''}><i></i><span>${st}</span></div>`).join('')}</div>` : '';
+    const courier = d.track ? `<div class="cx-dl-courier"><span data-slot="avatar" data-size="default" class="cn-avatar cx-av" style="--h:${hue(d.track.courier)}"><span class="cn-avatar-fallback">${ini(d.track.courier)}</span></span><div><b>${d.track.courier}</b><small>Domiciliario · ${d.track.vehicle}</small></div><div class="cx-dl-eta"><small>Llega en</small><b>${d.track.eta}</b></div></div>` : '';
+    body.innerHTML = `<div class="cx-dl">${d.map ? `<div class="cx-dl-map">${miniMap(d.map)}</div><div class="cx-dl-addr"><svg><use href="#mappin"/></svg><div><b>${d.map.address}</b><small>${d.map.detail}</small></div></div>` : ''}${steps}${courier}</div>`;
+    foot.innerHTML = btn('outline', 'Cerrar', 'data-dismiss') + (d.map ? `<a data-slot="button" class="cn-button cn-button-variant-default cn-button-size-default group/button cx-go" href="https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(d.map.address)}" target="_blank" rel="noopener"><svg><use href="#mappin"/></svg>Abrir en Maps</a>` : '');
+    foot.firstElementChild.classList.add('cx-exit');
+  };
+  const redraw = (id) => { const card = $(`.cx-bcard[data-card="${id}"]`, root); easeHeight(card, () => { card.innerHTML = cardInner(id); }); card.animate([{ boxShadow: '0 0 0 2px var(--selected)' }, { boxShadow: '0 0 0 1px var(--border)' }], { duration: 700, easing: 'ease-out' }); };
+  const onCardButton = (e) => {
+    const b = e.target.closest('[data-bact]'); if (!b) return;
+    const card = b.closest('.cx-bcard'); if (!card) return; const id = card.dataset.card, act = b.dataset.bact, c = CARDS[id];
+    on.action?.(JSON.stringify({ id, action: act }));
+    if (act === 'advance') {
+      const ls = lanesEls().filter((l) => l.dataset.lane !== 'cancel'), li = ls.indexOf(card.closest('.cx-blane')); if (li < 0 || li >= ls.length - 1) return;
+      const NEXT = Object.fromEntries(LANES_B.map((l) => [l.id, l.next ? [['advance', l.next, 'secondary']] : []]));
+      const to = ls[li + 1]; c.actions = NEXT[to.dataset.lane] ?? c.actions;
+      if (to.dataset.lane === 'done') { if (c.delivery) delete c.delivery.track; c.status = ['ok', 'Entregado']; }
+      flip($$('.cx-bcard', brd), () => { $('.cx-lane-list', to).prepend(card); card.innerHTML = cardInner(id); syncLanes(); });
+      card.focus({ preventScroll: true }); sayCard(card); emit();
+    }
+    if (act === 'receipt') { receiptFor = id; openModal('receipt', 'auto'); }
+    if (act === 'delivery') { deliveryFor = id; openModal('delivery', 'auto'); }
+    if (act === 'request') { requestFor = id; requestIdx = +(b.dataset.i || 0); openModal('request', 'auto'); }
+    if (act === 'note') { noteFor = id; openModal('note', 'auto'); }
+    if (act === 'stripe') { stripeFor = id; openModal('stripe', 'auto'); }
+    if (act === 'contact') brdLive.textContent = `Abriendo ${CONTACT[c.contact].name} con ${c.who}`;
+    if (act === 'reply') { replyFor = id; openModal('reply', 'auto'); }
+    if (act === 'cancel-yes') { delete c.request; c.status = ['bad', 'Cancelado']; c.pay = { ...c.pay, tone: 'muted', label: `Devuelto ${money0(c.total)}` }; delete c.delivery; c.actions = []; if (!card.closest('.cx-board')) { redraw(id); return; } const to = $('[data-lane=cancel] .cx-lane-list', brd); flip($$('.cx-bcard', brd), () => { to.prepend(card); card.innerHTML = cardInner(id); syncLanes(); }); to.closest('.cx-blane').scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }); brdLive.textContent = `Pedido ${id} cancelado y devuelto`; emit(); }
+    if (act === 'cancel-no') { const rest = Array.isArray(c.request) ? c.request.filter((_, i) => i !== +(b.dataset.i || 0)) : []; if (rest.length) c.request = rest.length === 1 ? rest[0] : rest; else delete c.request; c.actions = [['advance', 'Preparar', 'secondary']]; redraw(id); }
+    if (act === 'refund') { if (Array.isArray(c.request)) { c.request = c.request.filter((_, i) => i !== +(b.dataset.i || 0)); if (c.request.length === 1) c.request = c.request[0]; } else delete c.request; c.pay = { ...c.pay, tone: 'info', label: `Reembolsado ${money0(c.total)}` }; redraw(id); }
+  };
+  root.addEventListener('click', onCardButton);
+  
+  const sizes = $('.cx-card-sizes', root); if (sizes) sizes.innerHTML = SIZES.map(([t, d, id]) => `<div class="cx-cs-col"><div class="cx-cs-h"><b>${t}</b><span>${d}</span></div><div data-slot="card" data-size="sm" class="cn-card group/card cx-bcard cx-bcard-static" data-card="${id}" aria-label="${t}">${cardInner(id)}</div></div>`).join('');
+  KINDS.receipt = () => {
+    const c = CARDS[receiptFor];
+    $('#mdl-title').textContent = 'Comprobante de pago'; $('#mdl-desc').textContent = `${c.who} · pedido ${receiptFor}`;
+    body.innerHTML = `<div class="cx-rcpt"><div class="cx-rcpt-shot" role="img" aria-label="Captura de la transferencia"><span class="cx-rcpt-ok"><svg><use href="#check"/></svg></span><b>Transferencia exitosa</b><span class="cx-rcpt-amt">${money0(c.total)}</span><dl><dt>Para</dt><dd>Barbería El Roble</dd><dt>Desde</dt><dd>${c.who}</dd><dt>Referencia</dt><dd class="cx-num">M${receiptFor.slice(1)}7731</dd><dt>Fecha</dt><dd>8 oct 2026 · 10:42</dd></dl></div><div class="cx-rcpt-check"><span>Monto del pedido</span><b class="cx-num">${money0(c.total)}</b><span data-slot="badge" class="cn-badge group/badge cx-tone-ok"><span class="cx-dot"></span>Coincide</span></div></div>`;
+    foot.innerHTML = btn('outline', 'Rechazar', 'data-rcpt="no"') + btn('default', 'Aprobar pago', 'data-rcpt="yes"');
+    foot.firstElementChild.classList.add('cx-exit'); foot.lastElementChild.classList.add('cx-go');
+  };
+  KINDS.reply = () => {
+    const c = CARDS[replyFor];
+    $('#mdl-title').textContent = `Responder a ${c.who}`; $('#mdl-desc').textContent = `Queja del pedido ${replyFor}`;
+    body.innerHTML = `<div class="cx-bc-req" data-tone="bad" style="margin:0"><div class="cx-bc-req-h"><svg><use href="#info"/></svg><b>Queja</b><small>${(c.request.when ?? c.request[0]?.when)}</small></div><p>«${(c.request.text ?? c.request[0]?.text)}»</p></div><div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><label data-slot="label" class="cn-label" for="rp-t">Tu respuesta</label><textarea data-slot="textarea" class="cn-textarea" id="rp-t" rows="4">Hola ${c.who.split(' ')[0]}, lo siento mucho. Te enviamos una nueva hoy sin costo.</textarea><p data-slot="field-description" class="cn-field-description">Le llega por WhatsApp.</p></div>`;
+    foot.innerHTML = btn('outline', 'Cancelar', 'data-dismiss') + btn('default', 'Enviar respuesta', 'data-reply-send');
+    foot.firstElementChild.classList.add('cx-exit'); foot.lastElementChild.classList.add('cx-go');
+  };
+  document.addEventListener('click', (e) => {
+    const r = e.target.closest('[data-rcpt]');
+    if (r && receiptFor) {
+      const c = CARDS[receiptFor], ok = r.dataset.rcpt === 'yes';
+      c.pay = ok ? { method: 'transfer', tone: 'ok', label: 'Pagado', detail: c.pay?.detail } : { method: 'transfer', tone: 'bad', label: 'Rechazado', detail: c.pay?.detail };
+      c.actions = ok ? [['advance', 'Preparar', 'secondary']] : [];
+      redraw(receiptFor); brdLive.textContent = ok ? `Pago de ${c.who} aprobado` : `Comprobante de ${c.who} rechazado`;
+      receiptFor = null; closeModal();
+    }
+    if (e.target.closest('[data-reply-send]') && replyFor) {
+      const c = CARDS[replyFor]; c.request = { ...(Array.isArray(c.request) ? c.request[0] : c.request), tone: 'info', icon: 'check', title: 'Queja respondida', when: 'ahora', text: c.request.text, actions: [['refund', 'Reembolsar', 'ghost']] };
+      redraw(replyFor); replyFor = null; closeModal();
+    }
+  });
+  syncLanes();}

package/registry/kit/collections.js

@@ -0,0 +1,148 @@
+// @muten/shadcn · collections (kit): the reference artifact's Tags field, Pagination nav, Virtual list and the
+// Carousel's behaviour, generic. Data and labels come in; nothing about a product is inside.
+
+// Tags: chips animate in and out, the field's height eases; suggestions; a cap with its count. i {label, tags
+// "Barba,Corte clásico", suggestions "Fade,Navaja", max, hint} → on.change("Barba,Corte clásico,Fade")
+export function tagInput(root, i, core, on) {
+  const { $, $$, fold, easeHeight } = core;
+  const split = (s) => String(s || '').split(',').map((x) => x.trim()).filter(Boolean);
+  const MAXT = Number(i.max) || 8, SUG = split(i.suggestions), id = 'tg' + Math.random().toString(36).slice(2, 7);
+  let tags = split(i.tags);
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><label data-slot="label" class="cn-label" for="${id}">${i.label || 'Etiquetas'}</label><div class="cx-taginput"><input id="${id}" class="cx-tag-field" placeholder="${i.placeholder || 'Agrega y presiona Enter'}" autocomplete="off"></div><p data-slot="field-description" class="cn-field-description cx-count-line"><span>${i.hint || ''}</span><span data-tg-n></span></p></div>${SUG.length ? '<div class="cx-suggest"><span>Sugerencias</span><div class="cx-line" style="justify-content:flex-start" data-tg-sug></div></div>' : ''}`;
+  const tgBox = $('.cx-taginput', root), tgIn = $('input', root), tgN = $('[data-tg-n]', root), tgSug = $('[data-tg-sug]', root);
+  const chipHtml = (t) => `<span data-slot="badge" class="cn-badge cn-badge-variant-secondary cx-chip" data-tag="${t}">${t}<button class="cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-chip-x" aria-label="Quitar ${t}" title="Quitar" tabindex="-1"><svg style="width:12px;height:12px"><use href="#x"/></svg></button></span>`;
+  const emit = () => on?.change?.(tags.join(','));
+  const tgMeta = () => {
+    tgN.textContent = `${tags.length}/${MAXT}`; tgN.parentElement.toggleAttribute('data-near', tags.length >= MAXT);
+    tgIn.placeholder = tags.length >= MAXT ? `Llegaste al tope de ${MAXT}` : tags.length ? '' : (i.placeholder || 'Agrega y presiona Enter');
+    if (tgSug) $$('.cx-sug', tgSug).forEach((b) => { b.disabled = tags.some((t) => fold(t) === fold(b.textContent)) || tags.length >= MAXT; });
+  };
+  const tgAdd = (raw) => {
+    const t = raw.trim().replace(/\s+/g, ' '); if (!t) return;
+    const same = tags.find((x) => fold(x) === fold(t));
+    if (same) { const c = $(`[data-tag="${same}"]`, tgBox); c.classList.remove('flash'); void c.offsetWidth; c.classList.add('flash'); tgIn.value = ''; return; }
+    if (tags.length >= MAXT) return;
+    const tag = t[0].toUpperCase() + t.slice(1); tags.push(tag); tgIn.value = '';
+    easeHeight(tgBox, () => { tgIn.insertAdjacentHTML('beforebegin', chipHtml(tag)); tgMeta(); });
+    $(`[data-tag="${tag}"]`, tgBox).classList.add('in'); emit();
+  };
+  const tgRemove = (chip) => { tags = tags.filter((t) => t !== chip.dataset.tag); tgMeta(); chip.classList.add('out'); chip.addEventListener('animationend', () => easeHeight(tgBox, () => chip.remove()), { once: true }); emit(); };
+  tgIn.addEventListener('keydown', (e) => {
+    const marked = $('.cx-chip[data-marked]', tgBox);
+    if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); tgAdd(tgIn.value); }
+    else if (e.key === 'Backspace' && !tgIn.value && tags.length) { e.preventDefault(); const last = $$('.cx-chip:not(.out)', tgBox).at(-1); if (marked) tgRemove(marked); else last?.setAttribute('data-marked', ''); }
+    else marked?.removeAttribute('data-marked');
+  });
+  tgIn.addEventListener('blur', () => { $('.cx-chip[data-marked]', tgBox)?.removeAttribute('data-marked'); if (tgIn.value.trim()) tgAdd(tgIn.value); });
+  tgBox.addEventListener('click', (e) => { const x = e.target.closest('.cx-chip .cx-chip-x'); if (x) tgRemove(x.parentElement); tgIn.focus(); });
+  if (tgSug) { tgSug.innerHTML = SUG.map((s) => `<button class="cn-button cn-button-variant-outline cn-button-size-xs cx-sug"><svg style="width:12px;height:12px"><use href="#plus"/></svg>${s}</button>`).join(''); tgSug.addEventListener('click', (e) => { const b = e.target.closest('.cx-sug'); if (b) tgAdd(b.textContent); }); }
+  tags.forEach((t) => tgIn.insertAdjacentHTML('beforebegin', chipHtml(t))); tgMeta();
+}
+
+// Pagination nav for server pages: always 7 slots once there are more than 7 pages (the buttons never slide),
+// «Página n de N» on a phone, and the range line. i {total, per, page, noun} → on.page(n)
+export function paginationNav(root, i, core, on) {
+  const { $ } = core;
+  root.innerHTML = '<div class="cx-pg-foot"><nav class="cn-pagination cx-pagination" aria-label="Páginas"><ul class="cn-pagination-content" style="list-style:none;margin:0;padding:0"></ul></nav><span class="cx-num" aria-live="polite" data-pg-range></span></div>';
+  const pgNav = $('ul', root), pgRange = $('[data-pg-range]', root);
+  let total = Number(i.total) || 0, per = Number(i.per) || 10, page = Number(i.page) || 1, noun = i.noun || 'resultados';
+  const pages = () => Math.max(1, Math.ceil(total / per));
+  const nums = () => { const P = pages(); if (P <= 7) return Array.from({ length: P }, (_, k) => k + 1); if (page <= 4) return [1, 2, 3, 4, 5, '…', P]; if (page >= P - 3) return [1, '…', P - 4, P - 3, P - 2, P - 1, P]; return [1, '…', page - 1, page, page + 1, '…', P]; };
+  const paint = (focus) => {
+    const P = pages();
+    const nav = (dir, p, off) => `<li><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-default cn-pagination-${dir === -1 ? 'previous' : 'next'} group/button" data-page="${p}" ${off ? 'disabled' : ''} aria-label="Página ${dir === -1 ? 'anterior' : 'siguiente'}">${dir === -1 ? '<svg><use href="#left"/></svg><span>Anterior</span>' : '<span>Siguiente</span><svg><use href="#right"/></svg>'}</button></li>`;
+    pgNav.innerHTML = nav(-1, page - 1, page === 1) + nums().map((p) => (p === '…' ? '<li class="cx-pg-num"><span class="cn-pagination-ellipsis cx-pg-gap" aria-hidden="true"><svg><use href="#more"/></svg></span></li>' : `<li class="cx-pg-num"><button data-slot="button" class="cn-button ${p === page ? 'cn-button-variant-outline' : 'cn-button-variant-ghost'} cn-button-size-icon group/button cx-num" data-page="${p}" ${p === page ? 'aria-current="page"' : ''} aria-label="Página ${p}">${p}</button></li>`)).join('') + `<li class="cx-pg-compact">Página ${page} de ${P}</li>` + nav(1, page + 1, page === P);
+    pgRange.textContent = `${(page - 1) * per + 1}–${Math.min(total, page * per)} de ${total} ${noun}`;
+    if (focus) pgNav.querySelector('[aria-current]')?.focus({ preventScroll: true });
+  };
+  pgNav.addEventListener('click', (e) => { const b = e.target.closest('[data-page]'); if (!b || b.disabled) return; page = +b.dataset.page; paint(true); on?.page?.(page); });
+  paint();
+  return (next) => { const np = Number(next.page) || page, nt = Number(next.total) || total; if (np === page && nt === total) return; page = np; total = nt; per = Number(next.per) || per; paint(); };
+}
+
+// Virtual list: only the visible rows (+ a margin) exist in the DOM. i {rows [{title, subtitle, value}], total
+// (rows repeat up to it, for a long demo), rowHeight, label} → on.jump not needed: «Ir al n» via inputs.jump.
+export function virtualList(root, i, core) {
+  const { $ } = core;
+  const rows = Array.isArray(i.rows) ? i.rows : [];
+  const VTOTAL = Math.max(Number(i.total) || 0, rows.length), VROW = Number(i.rowHeight) || 52, VOVER = 6;
+  root.innerHTML = `<div class="cx-pages-wrap"><div class="cx-vlist cx-scroll" tabindex="0" role="list" aria-label="${i.label || 'Lista'}"><div class="cx-vspace"><div class="cx-vwin"></div></div></div><div class="cx-pg-foot"><span class="cx-num" data-vl-info></span>${i.jump ? `<button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-vl-jump>Ir al ${Number(i.jump).toLocaleString('es-CO')}</button>` : ''}</div></div>`;
+  const vBox = $('.cx-vlist', root), vSpace = $('.cx-vspace', root), vWin = $('.cx-vwin', root), vInfo = $('[data-vl-info]', root);
+  vSpace.style.height = VTOTAL * VROW + 'px';
+  let vFirst = -1, vRaf = 0;
+  const vPaint = () => {
+    const top = vBox.scrollTop, h = vBox.clientHeight;
+    const first = Math.max(0, Math.floor(top / VROW) - VOVER), last = Math.min(VTOTAL, Math.ceil((top + h) / VROW) + VOVER);
+    if (first !== vFirst) {
+      vFirst = first; vWin.style.transform = `translateY(${first * VROW}px)`;
+      let html = '';
+      for (let k = first; k < last; k++) { const c = rows[k % rows.length] || {}; html += `<div class="cx-vrow" role="listitem" aria-setsize="${VTOTAL}" aria-posinset="${k + 1}"><span class="cx-vn cx-num">${(k + 1).toLocaleString('es-CO')}</span><span>${c.title ?? ''}<small>${c.subtitle ?? ''}</small></span><b>${c.value ?? ''}</b></div>`; }
+      vWin.innerHTML = html;
+    }
+    const a = Math.floor(top / VROW) + 1, b = Math.min(VTOTAL, Math.ceil((top + h) / VROW));
+    vInfo.textContent = `${a.toLocaleString('es-CO')}–${b.toLocaleString('es-CO')} de ${VTOTAL.toLocaleString('es-CO')} · ${vWin.childElementCount} filas en el DOM`;
+  };
+  vBox.addEventListener('scroll', () => { cancelAnimationFrame(vRaf); vRaf = requestAnimationFrame(vPaint); }, { passive: true });
+  vBox.addEventListener('keydown', (e) => { const d = { ArrowDown: VROW, ArrowUp: -VROW, PageDown: vBox.clientHeight, PageUp: -vBox.clientHeight }[e.key]; if (d) { e.preventDefault(); vBox.scrollTop += d; } if (e.key === 'Home') { e.preventDefault(); vBox.scrollTop = 0; } if (e.key === 'End') { e.preventDefault(); vBox.scrollTop = vBox.scrollHeight; } });
+  $('[data-vl-jump]', root)?.addEventListener('click', () => vBox.scrollTo({ top: Number(i.jump) * VROW - VROW, behavior: 'smooth' }));
+  new ResizeObserver(() => { vFirst = -1; vPaint(); }).observe(vBox);
+}
+
+// Carousel behaviour over the slides muten rendered inside a `.cx-car` (the Carousel part): pages, indicator
+// (dots · progress · count · thumbs), loop, autoplay with its own pause, arrows (bar | overlay), keys and mouse drag.
+export function carouselBehavior(root, i, core) {
+  const { $, $$, ui } = core;
+  const perView = String(i.perView || '1').split(',').map(Number), [perSm, perLg] = perView.length > 1 ? perView : [Math.min(perView[0], 2), perView[0]];
+  const center = i.center === 'on', loop = i.loop === 'on', autoplay = Number(i.autoplay) || 0, indicator = i.indicator || 'dots', arrows = i.arrows || 'bar';
+  root.style.setProperty('--per', perLg); root.style.setProperty('--per-sm', perSm);
+  if (center) root.dataset.center = '';
+  const view = $('.cx-car-view', root); view.dataset.arrows = arrows;
+  const prevB = ui.button({ icon: 'left', size: 'icon-sm', attrs: 'data-car="prev" aria-label="Anterior" title="Anterior"', cls: 'cx-car-arrow' });
+  const nextB = ui.button({ icon: 'right', size: 'icon-sm', attrs: 'data-car="next" aria-label="Siguiente" title="Siguiente"', cls: 'cx-car-arrow' });
+  if (arrows === 'overlay') view.insertAdjacentHTML('beforeend', prevB + nextB);
+  root.insertAdjacentHTML('beforeend', `<div class="cx-car-bar"><div class="cx-car-ind" data-ind="${indicator}"></div><div class="cx-hstack" style="gap:6px">${autoplay ? ui.button({ icon: 'pause', size: 'icon-sm', variant: 'ghost', attrs: 'data-car="play" aria-label="Pausar" title="Pausar"' }) : ''}${arrows === 'bar' ? prevB + nextB : ''}</div></div>`);
+  const track = $('.cx-car-track', root), ind = $('.cx-car-ind', root), cards = $$('.cx-car-slide', track);
+  cards.forEach((c, k) => { c.setAttribute('role', 'group'); c.setAttribute('aria-roledescription', 'diapositiva'); c.setAttribute('aria-label', `${k + 1} de ${cards.length}`); });
+  const step = () => (cards[1] ? cards[1].offsetLeft - cards[0].offsetLeft : track.clientWidth);
+  const perPage = () => (center ? 1 : Math.max(1, Math.round(track.clientWidth / step())));
+  const pages = () => (center ? cards.length : Math.max(1, Math.ceil(cards.length / perPage())));
+  const current = () => {
+    if (center) { const mid = track.scrollLeft + track.clientWidth / 2; let best = 0, d = Infinity; cards.forEach((c, k) => { const cd = Math.abs(c.offsetLeft + c.offsetWidth / 2 - mid); if (cd < d) { d = cd; best = k; } }); return best; }
+    if (track.scrollLeft >= track.scrollWidth - track.clientWidth - 4) return pages() - 1;
+    return Math.round(track.scrollLeft / (step() * perPage()));
+  };
+  const go = (p) => { const n = pages(); if (loop) p = (p + n) % n; else p = Math.max(0, Math.min(n - 1, p)); const target = center ? cards[p].offsetLeft + cards[p].offsetWidth / 2 - track.clientWidth / 2 : p * step() * perPage(); track.scrollTo({ left: target, behavior: 'smooth' }); };
+  const thumbOf = (k) => { const media = cards[k].querySelector('img, [role=img], .cx-gallery-img'); const bg = media ? getComputedStyle(media).backgroundImage : ''; return media?.tagName === 'IMG' ? `<img src="${media.src}" alt="">` : `<span class="cx-thumb-fill" style="background-image:${bg}"></span>`; };
+  const paint = () => {
+    const n = pages(), cur = current();
+    if (indicator === 'dots') { if (ind.childElementCount !== n) ind.innerHTML = Array.from({ length: n }, (_, k) => ui.button({ variant: 'ghost', size: 'icon-xs', cls: 'cx-dotb', attrs: `role="tab" data-go="${k}" aria-label="Ir a ${k + 1} de ${n}"`, label: '<span class="cx-dot-mark"></span>' })).join(''); $$('[data-go]', ind).forEach((d, k) => d.setAttribute('aria-selected', k === cur)); }
+    if (indicator === 'progress') ind.innerHTML = `<div class="cx-hstack" style="gap:10px;flex-wrap:nowrap">${ui.progress(((cur + 1) / n) * 100, `Diapositiva ${cur + 1} de ${n}`)}${ui.text(`${cur + 1} / ${n}`, 'caption')}</div>`;
+    if (indicator === 'count') ind.innerHTML = ui.text(`${cur + 1} de ${n}`, 'caption');
+    if (indicator === 'thumbs') { if (!ind.childElementCount) ind.innerHTML = `<div class="cx-hstack" role="tablist" aria-label="Miniaturas">${cards.map((_, k) => ui.button({ variant: 'ghost', size: 'icon-lg', cls: 'cx-thumb', attrs: `role="tab" data-go="${k}" aria-label="Foto ${k + 1}"`, label: thumbOf(k) })).join('')}</div>`; $$('[data-go]', ind).forEach((d, k) => { d.setAttribute('aria-selected', k === cur); d.setAttribute('aria-pressed', k === cur); }); }
+    if (center) cards.forEach((c, k) => c.toggleAttribute('data-active', k === cur));
+    if (!loop) { $$('[data-car="prev"]', root).forEach((b) => { b.disabled = cur === 0; }); $$('[data-car="next"]', root).forEach((b) => { b.disabled = cur >= n - 1; }); }
+  };
+  let raf = 0; track.addEventListener('scroll', () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(paint); }, { passive: true });
+  root.addEventListener('click', (e) => {
+    const g = e.target.closest('[data-go]'); if (g) { go(+g.dataset.go); return; }
+    const a = e.target.closest('[data-car]'); if (!a) return;
+    if (a.dataset.car === 'prev') go(current() - 1);
+    if (a.dataset.car === 'next') go(current() + 1);
+    if (a.dataset.car === 'play') { playing = !playing; a.innerHTML = ui.icon(playing ? 'pause' : 'play'); a.setAttribute('aria-label', playing ? 'Pausar' : 'Reproducir'); a.title = a.getAttribute('aria-label'); }
+  });
+  track.tabIndex = 0;
+  track.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight') { e.preventDefault(); go(current() + 1); } if (e.key === 'ArrowLeft') { e.preventDefault(); go(current() - 1); } });
+  let drag = null;
+  track.addEventListener('pointerdown', (e) => { if (e.pointerType !== 'mouse' || e.button > 0) return; drag = { x: e.clientX, left: track.scrollLeft, moved: false }; track.classList.add('dragging'); });
+  addEventListener('pointermove', (e) => { if (!drag) return; const dx = e.clientX - drag.x; if (Math.abs(dx) > 4) drag.moved = true; track.scrollLeft = drag.left - dx; });
+  addEventListener('pointerup', () => { if (!drag) return; const moved = drag.moved; drag = null; track.classList.remove('dragging'); if (moved) track.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); }, { capture: true, once: true }); });
+  let playing = !!autoplay && !matchMedia('(prefers-reduced-motion: reduce)').matches, hold = false;
+  if (autoplay) {
+    if (!playing) { const b = $('[data-car="play"]', root); b.innerHTML = ui.icon('play'); b.setAttribute('aria-label', 'Reproducir'); }
+    ['pointerenter', 'focusin', 'touchstart'].forEach((t) => root.addEventListener(t, () => { hold = true; }, { passive: true }));
+    ['pointerleave', 'focusout'].forEach((t) => root.addEventListener(t, () => { hold = false; }));
+    setInterval(() => { if (playing && !hold && !document.hidden) go(loop || current() < pages() - 1 ? current() + 1 : 0); }, autoplay);
+  }
+  new ResizeObserver(() => { if (indicator !== 'thumbs') ind.innerHTML = ''; paint(); }).observe(track);
+  paint();
+}