@birdycom/omniaui 0.12.4 → 0.12.6

package/dist/data-table.js

@@ -1,10 +1,11 @@
 // File: packages/ui/src/data-table.js
-// Map: page numbers -> compare -> csv -> row filter -> bind one table (search, sort, pages, columns, resize, drag, trash, bulk) -> boot
-// The list table used in Korrekt and OmniaDesk. Markup stays plain HTML.
+// Map: page numbers -> compare -> csv -> row filter -> bind one table (search, column filters, sort, pages, columns, trash,
+//      bulk, cards) -> boot. Column width and row drag are OmniaUI Pro (data-table-pro.js).
+// The list table for business apps. Markup stays plain HTML.
 // This script adds the behaviour. Excel, PDF and the real delete API stay in the app:
-// listen for oc-datatable-bulk, oc-datatable-reorder, oc-datatable-search and oc-datatable-import.
+// listen for oc-datatable-bulk, oc-datatable-row, oc-datatable-search and oc-datatable-import.
 
-/** Page numbers with ellipses, same window as OmniaDesk (current and last are 1-based). */
+/** Page numbers with ellipses, a window around the current page (current and last are 1-based). */
 export function pageItems(current, last) {
   if (last < 1) return [];
   if (last === 1) return [1];
@@ -110,13 +111,20 @@ export function bindDataTable(root) {
   let query = "";
   let filter = root.querySelector("[data-oc-filter][aria-current='true']")?.dataset.ocFilter
     || (root.querySelector("[data-oc-filter]") ? "active" : "all");
-  let sortKey = "";
-  let sortDir = "asc";
+  // Column filters: a <select data-oc-col-filter="type"> or tab buttons with data-oc-col-filter="type" data-oc-value="…".
+  // A row passes when its cell in that column has that value (data-oc-value or its text); "" means all.
+  const colFilters = new Map();
+  root.querySelectorAll("select[data-oc-col-filter]").forEach((sel) => colFilters.set(sel.dataset.ocColFilter, sel.value));
+  root.querySelectorAll("[data-oc-col-filter][aria-selected='true']").forEach((tab) => colFilters.set(tab.dataset.ocColFilter, tab.dataset.ocValue ?? ""));
+  // aria-sort on a header in the HTML: that column is sorted when the table starts.
+  const sortedTh = [...table.tHead.rows[0].cells].find((th) => th.dataset.ocCol && th.hasAttribute("aria-sort"));
+  let sortKey = sortedTh ? sortedTh.dataset.ocCol : "";
+  let sortDir = sortedTh?.getAttribute("aria-sort") === "descending" ? "desc" : "asc";
   let page = 0;
   let pageSize = Number(pageSelect?.value || root.dataset.pageSize || 15);
   const selected = new Set();
 
-  // Remembered choices from the last visit: page size, density, view, column widths, hidden columns.
+  // Remembered choices from the last visit: page size, density, view, hidden columns.
   const savedSize = readStore(id, "pageSize");
   if (savedSize && pageSelect?.querySelector(`option[value="${savedSize}"]`)) {
     pageSelect.value = String(savedSize);
@@ -124,19 +132,30 @@ export function bindDataTable(root) {
   }
   if (readStore(id, "density") === "compact") root.classList.add("oc-data-table--compact");
   if (readStore(id, "view") === "grid") root.classList.add("oc-data-table--grid");
-  const savedWidths = readStore(id, "widths") || {};
-  for (const th of table.tHead.rows[0].cells) {
-    if (savedWidths[th.dataset.ocCol]) {
-      th.style.width = savedWidths[th.dataset.ocCol];
-      table.classList.add("oc-data-table-table--sized");
-    }
-  }
   const savedCols = readStore(id, "cols") || {};
   root.querySelectorAll("[data-col]").forEach((box) => {
     if (!box.disabled && savedCols[box.dataset.col] != null) box.checked = savedCols[box.dataset.col];
   });
 
   const rows = () => [...tbody.querySelectorAll("[data-oc-row]")];
+  // Move a row to the end without taking it out of the page (Element.moveBefore), so <iconify-icon> and other web
+  // components keep their content; where moveBefore is missing, append and let the icons draw again.
+  // <iconify-icon> empties itself while its row is hidden (another page, another filter) and does not always draw
+  // again when the row comes back: set its icon again so it renders.
+  const redrawIcons = (row) => {
+    row.querySelectorAll("iconify-icon[icon]").forEach((icon) => {
+      if (icon.shadowRoot?.querySelector("svg")) return;
+      const name = icon.getAttribute("icon");
+      icon.removeAttribute("icon");
+      icon.setAttribute("icon", name);
+    });
+  };
+  const moveRow = (row) => {
+    if (tbody.lastElementChild === row) return;
+    if (typeof tbody.moveBefore === "function") { tbody.moveBefore(row, null); return; }
+    tbody.append(row);
+    redrawIcons(row);
+  };
   const textOf = (row) => [...row.cells]
     .filter((td) => td.dataset.ocCol && !SKIP_COL.has(td.dataset.ocCol))
     .map((td) => td.dataset.ocValue || td.textContent)
@@ -145,7 +164,8 @@ export function bindDataTable(root) {
     const td = [...row.cells].find((cell) => cell.dataset.ocCol === key);
     return td ? (td.dataset.ocValue || td.textContent.trim()) : "";
   };
-  const matched = () => rows().filter((row) => rowPasses(row.dataset.ocStatus, filter, textOf(row), query));
+  const passesColumns = (row) => [...colFilters].every(([key, want]) => !want || valueOf(row, key) === want);
+  const matched = () => rows().filter((row) => rowPasses(row.dataset.ocStatus, filter, textOf(row), query) && passesColumns(row));
 
   function paintChecks() {
     for (const row of rows()) {
@@ -202,17 +222,51 @@ export function bindDataTable(root) {
     }
     if (!grid) return;
     const onPage = new Set(list.map((row) => row.dataset.ocKey));
+    const heads = [...table.tHead.rows[0].cells];
+    const hiddenCols = new Set([...root.querySelectorAll("[data-col]:not(:checked)")].map((box) => box.dataset.col));
     grid.replaceChildren();
     for (const row of rows()) {
       if (!onPage.has(row.dataset.ocKey)) continue;
       const card = document.createElement("article");
       card.className = "oc-data-table-card";
       card.dataset.ocKey = row.dataset.ocKey;
-      const title = document.createElement("h3");
+      const cells = [...row.cells];
+      const name = cells.find((td) => td.dataset.ocCol === "name") || cells.find((td) => td.dataset.ocCol && !SKIP_COL.has(td.dataset.ocCol));
+      // Title: the rich name cell (avatar, badge, second line) when there is one, else its text.
+      const title = document.createElement("div");
       title.className = "oc-data-table-card-title";
-      const name = [...row.cells].find((td) => td.dataset.ocCol === "name") || [...row.cells].find((td) => td.dataset.ocCol && !SKIP_COL.has(td.dataset.ocCol));
-      title.textContent = name ? name.textContent.trim() : row.dataset.ocKey;
+      if (name?.querySelector(".oc-data-table-name")) title.append(name.querySelector(".oc-data-table-name").cloneNode(true));
+      else title.textContent = name ? name.textContent.trim() : row.dataset.ocKey;
       card.append(title);
+      // The other visible columns as label / value.
+      const fields = document.createElement("dl");
+      fields.className = "oc-data-table-card-fields";
+      cells.forEach((td, index) => {
+        const col = td.dataset.ocCol;
+        if (!col || td === name || SKIP_COL.has(col) || hiddenCols.has(String(index + 1))) return;
+        const dt = document.createElement("dt");
+        dt.textContent = heads[index]?.textContent.trim() || col;
+        const dd = document.createElement("dd");
+        dd.append(...[...td.childNodes].map((node) => node.cloneNode(true)));
+        if (dd.textContent.trim()) fields.append(dt, dd);
+      });
+      if (fields.childElementCount) card.append(fields);
+      // Row actions (buttons and links; popover ids are not copied).
+      const actions = cells.find((td) => td.dataset.ocCol === "actions");
+      if (actions?.children.length) {
+        const bar = document.createElement("div");
+        bar.className = "oc-data-table-card-actions";
+        const trashed = row.dataset.ocStatus === "deleted";
+        for (const el of actions.querySelectorAll("button, a")) {
+          const when = el.closest("[data-oc-when]")?.dataset.ocWhen;
+          if (when && (when === "deleted") !== trashed) continue;
+          const copy = el.cloneNode(true);
+          copy.removeAttribute("id");
+          copy.removeAttribute("popovertarget");
+          bar.append(copy);
+        }
+        card.append(bar);
+      }
       grid.append(card);
     }
   }
@@ -226,18 +280,23 @@ export function bindDataTable(root) {
       const dir = sortDir === "desc" ? -1 : 1;
       list.sort((a, b) => dir * compareValues(valueOf(a, sortKey), valueOf(b, sortKey), numeric));
       const rest = all.filter((row) => !list.includes(row));
-      for (const row of [...list, ...rest]) tbody.append(row);
+      for (const row of [...list, ...rest]) moveRow(row);
     }
     const last = pageSize > 0 ? Math.max(1, Math.ceil(list.length / pageSize)) : 1;
     if (page > last - 1) page = Math.max(0, last - 1);
     const start = pageSize > 0 ? page * pageSize : 0;
     const visible = new Set((pageSize > 0 ? list.slice(start, start + pageSize) : list));
-    for (const row of all) row.hidden = !visible.has(row);
+    for (const row of all) {
+      const shown = visible.has(row);
+      if (row.hidden && shown) queueMicrotask(() => redrawIcons(row));
+      row.hidden = !shown;
+    }
     if (empty) empty.hidden = list.length !== 0;
     if (summary) {
-      summary.textContent = list.length === 0
-        ? "Showing 0 of 0"
-        : `Showing ${start + 1}–${start + visible.size} of ${list.length}`;
+      // data-oc-summary="Toont {from} t/m {to} van {total} resultaten" translates the line; empty = English.
+      const template = summary.dataset.ocSummary || "Showing {from}–{to} of {total}";
+      const values = { from: list.length ? start + 1 : 0, to: start + visible.size, total: list.length };
+      summary.textContent = template.replace(/\{(from|to|total)\}/g, (_, key) => String(values[key]));
     }
     if (sortSummary) {
       const label = sortKey ? table.querySelector(`th[data-oc-col="${sortKey}"] .oc-table-sort`)?.textContent?.trim() : "";
@@ -301,6 +360,11 @@ export function bindDataTable(root) {
       writeStore(id, "pageSize", pageSize);
       apply();
     }
+    if (target.matches?.("select[data-oc-col-filter]")) {
+      colFilters.set(target.dataset.ocColFilter, target.value);
+      page = 0;
+      apply();
+    }
     if (target.matches?.("[data-col]")) {
       const cols = {};
       root.querySelectorAll("[data-col]").forEach((box) => { cols[box.dataset.col] = box.checked; });
@@ -335,7 +399,10 @@ export function bindDataTable(root) {
   });
 
   root.addEventListener("click", (event) => {
-    const sortBtn = event.target.closest(".oc-table-sort");
+    // The whole header cell sorts, not only its label (wide columns leave a lot of empty cell around the label).
+    const headCell = event.target.closest("thead th");
+    const sortBtn = event.target.closest(".oc-table-sort")
+      || (headCell && !event.target.closest("a, button, input, select, label, .oc-data-table-resize") ? headCell.querySelector(".oc-table-sort") : null);
     if (sortBtn && root.contains(sortBtn)) {
       const th = sortBtn.closest("th");
       if (!th?.dataset.ocCol) return;
@@ -359,6 +426,40 @@ export function bindDataTable(root) {
       apply();
       return;
     }
+    // Per-row actions of a trashed row: data-oc-row-action="restore" or "delete" fires oc-datatable-row { action, key };
+    // in the demo (data-oc-live) restore makes the row active again and delete removes it.
+    const rowBtn = event.target.closest("[data-oc-row-action]");
+    if (rowBtn && root.contains(rowBtn)) {
+      const row = rowBtn.closest("[data-oc-row]");
+      if (!row) return;
+      const action = rowBtn.dataset.ocRowAction;
+      emit("oc-datatable-row", { action, key: row.dataset.ocKey });
+      if (live && action === "restore") row.dataset.ocStatus = "active";
+      if (live && action === "delete") { selected.delete(row.dataset.ocKey); row.remove(); }
+      apply();
+      return;
+    }
+    // The sliders button next to the title shows or hides the filter row.
+    const filtersBtn = event.target.closest("[data-oc-filters-toggle]");
+    if (filtersBtn && root.contains(filtersBtn)) {
+      const row = root.querySelector(".oc-data-table-filters");
+      if (row) {
+        row.hidden = !row.hidden;
+        filtersBtn.setAttribute("aria-expanded", row.hidden ? "false" : "true");
+      }
+      return;
+    }
+    const colTab = event.target.closest("button[data-oc-col-filter]");
+    if (colTab && root.contains(colTab)) {
+      const key = colTab.dataset.ocColFilter;
+      colFilters.set(key, colTab.dataset.ocValue ?? "");
+      root.querySelectorAll(`button[data-oc-col-filter="${key}"]`).forEach((tab) => {
+        tab.setAttribute("aria-selected", tab === colTab ? "true" : "false");
+      });
+      page = 0;
+      apply();
+      return;
+    }
     const viewBtn = event.target.closest("[data-oc-view]");
     if (viewBtn && root.contains(viewBtn)) {
       const mode = viewBtn.dataset.ocView;
@@ -386,12 +487,6 @@ export function bindDataTable(root) {
       exportCsv(null);
       return;
     }
-    if (event.target.closest("[data-oc-reset-widths]")) {
-      for (const th of table.tHead.rows[0].cells) th.style.width = "";
-      table.classList.remove("oc-data-table-table--sized");
-      writeStore(id, "widths", {});
-      return;
-    }
     if (event.target.closest("[data-oc-import]")) {
       root.querySelector("[data-oc-file]")?.click();
       return;
@@ -415,73 +510,15 @@ export function bindDataTable(root) {
     else window.location.href = row.dataset.ocHref;
   });
 
-  // Column resize: drag the handle on the header. Width is remembered per table id.
-  root.addEventListener("pointerdown", (event) => {
-    const handle = event.target.closest(".oc-data-table-resize");
-    if (!handle || !root.contains(handle)) return;
-    const th = handle.closest("th");
-    if (!th) return;
-    event.preventDefault();
-    const startX = event.clientX;
-    const startW = th.getBoundingClientRect().width;
-    const min = Number(th.dataset.ocMin || 64);
-    root.classList.add("is-resizing");
-    table.classList.add("oc-data-table-table--sized");
-    const move = (ev) => {
-      const width = Math.max(min, Math.round(startW + ev.clientX - startX));
-      th.style.width = `${width}px`;
-    };
-    const up = () => {
-      root.classList.remove("is-resizing");
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", up);
-      const widths = {};
-      for (const head of table.tHead.rows[0].cells) if (head.style.width) widths[head.dataset.ocCol] = head.style.width;
-      writeStore(id, "widths", widths);
-    };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
-  });
+  // OmniaUI Pro (data-table-pro.js) changes the rows (drag) and asks the table to show them again.
+  root.addEventListener("oc-datatable-refresh", () => apply());
 
-  // Row drag starts from the grip only, so selecting text in a cell still works.
-  let dragKey = "";
-  root.addEventListener("pointerdown", (event) => {
-    const grip = event.target.closest(".oc-sortable-row-grip");
-    const row = grip?.closest("[data-oc-row]");
-    if (row && root.contains(row)) row.draggable = true;
-  });
-  root.addEventListener("dragstart", (event) => {
-    const row = event.target.closest?.("[data-oc-row]");
-    if (!row?.draggable) return;
-    dragKey = row.dataset.ocKey;
-    row.classList.add("is-dragging", "oc-sortable-row");
-    event.dataTransfer.effectAllowed = "move";
-  });
-  root.addEventListener("dragover", (event) => {
-    const row = event.target.closest?.("[data-oc-row]");
-    if (!row || !dragKey || row.dataset.ocKey === dragKey) return;
-    event.preventDefault();
-    const box = row.getBoundingClientRect();
-    const after = event.clientY > box.top + box.height / 2;
-    tbody.querySelectorAll(".is-drop-before, .is-drop-after").forEach((el) => el.classList.remove("is-drop-before", "is-drop-after"));
-    row.classList.add("oc-sortable-row", after ? "is-drop-after" : "is-drop-before");
-  });
-  root.addEventListener("drop", (event) => {
-    const row = event.target.closest?.("[data-oc-row]");
-    const from = dragKey ? tbody.querySelector(`[data-oc-key="${CSS.escape(dragKey)}"]`) : null;
-    if (!row || !from || row === from) return;
-    event.preventDefault();
-    tbody.insertBefore(from, row.classList.contains("is-drop-after") ? row.nextSibling : row);
-    emit("oc-datatable-reorder", { keys: rows().map((item) => item.dataset.ocKey) });
-    apply();
-  });
-  root.addEventListener("dragend", () => {
-    dragKey = "";
-    for (const row of rows()) {
-      row.draggable = false;
-      row.classList.remove("is-dragging", "is-drop-before", "is-drop-after");
-    }
-  });
+  // Column widths from all rows (every page, also the trash), measured before the first page is shown, so the header
+  // does not jump when sorting or paging brings other rows. Pro column resizing sets its own widths.
+  for (const th of table.tHead.rows[0].cells) {
+    const width = th.getBoundingClientRect().width;
+    if (width && !th.style.width) th.style.minWidth = `${Math.ceil(width)}px`;
+  }
 
   root.querySelectorAll("[data-oc-view]").forEach((btn) => {
     const on = (btn.dataset.ocView === "grid") === root.classList.contains("oc-data-table--grid");
@@ -492,9 +529,9 @@ export function bindDataTable(root) {
   controls.set(root, { apply });
 }
 
-/** Wire every table under scope that is not wired yet. */
+/** Wire every table under scope that is not wired yet (also the data table block: [data-oc-data-table]). */
 export function initDataTables(scope = document) {
-  scope.querySelectorAll(".oc-data-table").forEach((root) => bindDataTable(root));
+  scope.querySelectorAll(".oc-data-table, [data-oc-data-table]").forEach((root) => bindDataTable(root));
 }
 
 // Starts on its own when loaded straight from a <script type="module"> tag: as /js/oc-data-table.js (the docs site,

package/dist/form-extras.d.ts

@@ -0,0 +1,11 @@
+// File: packages/ui/src/form-extras.d.ts
+// Types for the date field (ISO week), name card (rename), avatar picker (preview) and quantity (step) helpers.
+
+export function isoWeek(date: Date): { week: number; year: number };
+export function bindDateField(root: HTMLElement): void;
+export function bindNameCard(root: HTMLElement): void;
+export function acceptsFile(file: { type?: string; name?: string } | null | undefined, accept?: string): boolean;
+export function bindAvatarPicker(root: HTMLElement): void;
+export function stepQuantity(value: number, direction: -1 | 1, limits?: { min?: number; max?: number; step?: number }): number;
+export function bindQuantity(root: HTMLElement): void;
+export function initFormExtras(scope?: ParentNode): void;

package/dist/form-extras.js

@@ -0,0 +1,214 @@
+// File: packages/ui/src/form-extras.js
+// Map: ISO week -> date field (week label) -> name card (rename) -> avatar picker (preview, drop, remove) -> quantity
+//      (step buttons) -> init -> boot
+// Small behaviour for four CSS components; each works without it (native date input, <details>, file input, number input).
+// Events on the component root: oc-namecard-rename { name }, oc-avatar-change { file } (null when removed),
+// oc-avatar-invalid { file, reason } (wrong type or too large).
+
+/** ISO 8601 week of a date: { week, year } (the week with the year's first Thursday is week 1). */
+export function isoWeek(date) {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const day = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - day);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return { week: Math.ceil(((d - yearStart) / 86400000 + 1) / 7), year: d.getUTCFullYear() };
+}
+
+/** .oc-date-field: write "Week 45" (or the template in data-oc-week, e.g. "W{week} · {year}") into its __week. */
+export function bindDateField(root) {
+  const input = root.querySelector(".oc-date-field__input");
+  const out = root.querySelector(".oc-date-field__week");
+  if (!input || !out || root.dataset.ocBound) return;
+  root.dataset.ocBound = "";
+  const template = out.dataset.ocWeek || "Week {week}";
+  const show = () => {
+    const [y, m, d] = (input.value || "").split("-").map(Number);
+    if (!y) { out.textContent = ""; return; }
+    const { week, year } = isoWeek(new Date(y, m - 1, d));
+    out.textContent = template.replace("{week}", String(week)).replace("{year}", String(year));
+  };
+  input.addEventListener("input", show);
+  input.addEventListener("change", show);
+  show();
+}
+
+/** .oc-name-card: the [data-oc-rename] button swaps the title for an input; Enter or blur saves, Escape cancels. */
+export function bindNameCard(root) {
+  const head = root.querySelector(":scope > .oc-name-card__head");
+  const title = head?.querySelector(".oc-name-card__title");
+  const button = head?.querySelector("[data-oc-rename]");
+  if (!title || !button || root.dataset.ocBound) return;
+  root.dataset.ocBound = "";
+  const input = document.createElement("input");
+  input.className = "oc-name-card__input";
+  input.hidden = true;
+  input.setAttribute("aria-label", button.getAttribute("aria-label") || "Name");
+  title.after(input);
+  const finish = (save) => {
+    if (input.hidden) return;
+    const name = input.value.trim();
+    if (save && name && name !== title.textContent) {
+      title.textContent = name;
+      root.dispatchEvent(new CustomEvent("oc-namecard-rename", { bubbles: true, detail: { name } }));
+    }
+    input.hidden = true;
+    title.hidden = false;
+    button.focus();
+  };
+  button.addEventListener("click", (event) => {
+    event.preventDefault(); // a button in <summary> would also toggle the card
+    input.value = title.textContent.trim();
+    title.hidden = true;
+    input.hidden = false;
+    input.focus();
+    input.select();
+  });
+  // Typing in the input must not toggle the card (Space and Enter in a <summary>).
+  input.addEventListener("click", (event) => event.preventDefault());
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") { event.preventDefault(); finish(true); }
+    if (event.key === "Escape") { event.preventDefault(); finish(false); }
+    if (event.key === " ") event.stopPropagation();
+  });
+  input.addEventListener("keyup", (event) => { if (event.key === " ") event.preventDefault(); });
+  input.addEventListener("blur", () => finish(true));
+}
+
+/** Does file match an accept list ("image/*", "image/png,.svg")? An empty list accepts images only. */
+export function acceptsFile(file, accept = "image/*") {
+  if (!file) return false;
+  const rules = (accept || "image/*").split(",").map((r) => r.trim().toLowerCase()).filter(Boolean);
+  const type = (file.type || "").toLowerCase();
+  const name = (file.name || "").toLowerCase();
+  return rules.some((r) => (r.startsWith(".") ? name.endsWith(r) : r.endsWith("/*") ? type.startsWith(r.slice(0, -1)) : type === r));
+}
+
+/** .oc-avatar-picker: preview the chosen or dropped image; [data-oc-avatar-remove] goes back to the initials.
+ *  A file that does not match the input's accept (a PDF picked through "All files") or is larger than
+ *  data-oc-max-kb is refused: the input is cleared and .oc-avatar-picker__error says why (oc-avatar-invalid). */
+export function bindAvatarPicker(root) {
+  const preview = root.querySelector(".oc-avatar-picker__preview");
+  const file = root.querySelector(".oc-avatar-picker__file");
+  if (!preview || !file || root.dataset.ocBound) return;
+  root.dataset.ocBound = "";
+  const initials = preview.querySelector("[data-oc-initials]") || null;
+  let url = "";
+  const error = (text) => {
+    let box = root.querySelector(".oc-avatar-picker__error");
+    if (!box && text) {
+      box = document.createElement("span");
+      box.className = "oc-avatar-picker__error";
+      box.setAttribute("role", "alert");
+      (root.querySelector(".oc-avatar-picker__text") || root).append(box);
+    }
+    if (box) { box.textContent = text; box.hidden = !text; }
+    root.classList.toggle("is-invalid", Boolean(text));
+  };
+  const show = (picked) => {
+    if (url) URL.revokeObjectURL(url);
+    url = "";
+    preview.querySelector("img")?.remove();
+    if (initials) initials.hidden = Boolean(picked);
+    if (picked) {
+      url = URL.createObjectURL(picked);
+      const img = document.createElement("img");
+      img.src = url;
+      img.alt = "";
+      preview.prepend(img);
+    }
+    root.dispatchEvent(new CustomEvent("oc-avatar-change", { bubbles: true, detail: { file: picked || null } }));
+  };
+  const take = (picked) => {
+    if (!picked) return show(null);
+    const maxKb = Number(root.dataset.ocMaxKb || 0);
+    const reason = !acceptsFile(picked, file.accept) ? (root.dataset.ocTypeError || "This file is not an image. Choose a PNG, JPG, WebP or SVG.")
+      : maxKb && picked.size > maxKb * 1024 ? (root.dataset.ocSizeError || `This image is larger than ${maxKb >= 1024 ? `${Math.round(maxKb / 102.4) / 10} MB` : `${maxKb} KB`}.`) : "";
+    if (reason) {
+      file.value = "";
+      error(reason);
+      root.dispatchEvent(new CustomEvent("oc-avatar-invalid", { bubbles: true, detail: { file: picked, reason } }));
+      return;
+    }
+    error("");
+    show(picked);
+  };
+  file.addEventListener("change", () => take(file.files?.[0] || null));
+  root.addEventListener("click", (event) => {
+    if (event.target.closest("[data-oc-avatar-upload]")) file.click();
+    if (event.target.closest("[data-oc-avatar-remove]")) { file.value = ""; error(""); show(null); }
+  });
+  root.addEventListener("dragover", (event) => { event.preventDefault(); root.classList.add("is-dragover"); });
+  root.addEventListener("dragleave", () => root.classList.remove("is-dragover"));
+  root.addEventListener("drop", (event) => {
+    event.preventDefault();
+    root.classList.remove("is-dragover");
+    const picked = event.dataTransfer?.files?.[0];
+    if (!picked) return;
+    // A dropped file never reaches the input, so put it there for the form (where the browser allows it).
+    if (acceptsFile(picked, file.accept)) try { const dt = new DataTransfer(); dt.items.add(picked); file.files = dt.files; } catch { /* old browsers */ }
+    take(picked);
+  });
+}
+
+/** Next value of a quantity: one step (data-oc-step = -1 or 1) within min and max, on the step grid. */
+export function stepQuantity(value, direction, { min = -Infinity, max = Infinity, step = 1 } = {}) {
+  const size = step > 0 ? step : 1;
+  const base = Number.isFinite(min) ? min : 0;
+  const current = Number.isFinite(value) ? value : base;
+  // Off the step grid (2.5 with step 1), the first step lands on the grid: 3 up, 2 down.
+  const k = (current - base) / size;
+  const onGrid = Math.abs(k - Math.round(k)) < 1e-9;
+  const next = onGrid ? current + direction * size : base + (direction > 0 ? Math.ceil(k) : Math.floor(k)) * size;
+  return Math.min(max, Math.max(min, Number(next.toFixed(6))));
+}
+
+/** .oc-quantity: the [data-oc-step] buttons change the number input and disable themselves at min / max. */
+export function bindQuantity(root) {
+  const input = root.querySelector(".oc-quantity__input");
+  if (!input || root.dataset.ocBound) return;
+  root.dataset.ocBound = "";
+  const num = (attr, fallback) => (input.getAttribute(attr) === null || input.getAttribute(attr) === "" ? fallback : Number(input.getAttribute(attr)));
+  const limits = () => ({ min: num("min", -Infinity), max: num("max", Infinity), step: num("step", 1) });
+  const sync = () => {
+    const { min, max } = limits();
+    const value = Number(input.value);
+    root.querySelectorAll("[data-oc-step]").forEach((button) => {
+      const down = Number(button.dataset.ocStep) < 0;
+      button.disabled = input.disabled || (down ? value <= min : value >= max);
+    });
+  };
+  root.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-oc-step]");
+    if (!button || !root.contains(button) || input.disabled || input.readOnly) return;
+    const next = stepQuantity(Number(input.value), Number(button.dataset.ocStep) < 0 ? -1 : 1, limits());
+    if (String(next) === input.value) return;
+    input.value = String(next);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+  input.addEventListener("input", sync);
+  input.addEventListener("change", sync);
+  sync();
+}
+
+/** Wire every date field, name card, avatar picker and quantity field under scope. */
+export function initFormExtras(scope = document) {
+  scope.querySelectorAll(".oc-date-field").forEach(bindDateField);
+  scope.querySelectorAll(".oc-name-card").forEach(bindNameCard);
+  scope.querySelectorAll(".oc-avatar-picker").forEach(bindAvatarPicker);
+  scope.querySelectorAll(".oc-quantity").forEach(bindQuantity);
+}
+
+// Starts on its own as /js/oc-form-extras.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-form-extras") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
+  const boot = () => initFormExtras(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/lazy.d.ts

@@ -0,0 +1,5 @@
+// File: packages/ui/src/lazy.d.ts
+// Types for the lazy image script.
+
+export function watchLazy(img: HTMLImageElement): void;
+export function initLazy(scope?: ParentNode): void;

package/dist/lazy.js

@@ -0,0 +1,37 @@
+// File: packages/ui/src/lazy.js
+// Map: mark one image (loaded / error) -> bind every .oc-lazy -> boot
+// Lazy images: <figure class="oc-lazy"><img loading="lazy" …></figure>. The browser loads the image when it comes near
+// the screen; this script only adds .is-loaded (the photo fades in over the placeholder) or .is-error. Without it the
+// image simply shows when it is there.
+
+/** Mark the .oc-lazy box of one image as loaded or failed, now or when the image finishes. */
+export function watchLazy(img) {
+  const box = img.closest(".oc-lazy");
+  if (!box || box.dataset.ocBound) return;
+  box.dataset.ocBound = "";
+  const done = () => box.classList.add(img.naturalWidth ? "is-loaded" : "is-error");
+  if (img.complete) done();
+  else {
+    img.addEventListener("load", done, { once: true });
+    img.addEventListener("error", () => box.classList.add("is-error"), { once: true });
+  }
+}
+
+/** Watch every lazy image under scope. */
+export function initLazy(scope = document) {
+  scope.querySelectorAll(".oc-lazy img").forEach(watchLazy);
+}
+
+// Starts on its own as /js/oc-lazy.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-lazy") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
+  const boot = () => initLazy(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/oc-theme.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.4. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.6. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {

package/dist/parts/app-data-table-footer.css

@@ -0,0 +1,38 @@
+/* File: packages/ui/src/parts/app-data-table-footer.css | Map: footer grid (count, rows per page, pager) -> page buttons -> narrow screens */
+/* Footer of the list table (app-data-table.css): the count on the left, rows per page in the middle, the pager on the right. */
+
+/* Footer: count on the left, rows-per-page in the middle, pager on the right. */
+.oc-data-table-footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 0.75rem;
+}
+.oc-data-table-summary { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-data-table-per-page { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
+.oc-data-table-per-page .oc-select { inline-size: auto; }
+.oc-data-table-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
+.oc-data-table-page {
+  min-inline-size: 2rem;
+  padding: 0.25rem 0.45rem;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--oc-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+}
+.oc-data-table-page[aria-current="page"] {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-color: oklch(from var(--oc-primary) l c h / 0.35);
+}
+.oc-data-table-page:disabled { opacity: 0.4; cursor: default; }
+.oc-data-table-page:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-data-table-ellipsis { padding-inline: 0.25rem; color: var(--oc-muted-foreground); }
+
+@media (max-width: 40rem) {
+  .oc-data-table-footer { grid-template-columns: 1fr; }
+  .oc-data-table-pager { justify-content: flex-start; }
+}