ucode-agent 1.26.2 → 1.27.0

package/templates/blocks/plain/filter-bar.js

@@ -0,0 +1,133 @@
+/**
+ * A row of filters — All / Active / Done — that works from the keyboard.
+ *
+ * Written by hand it usually becomes three divs with a click handler and no
+ * way to reach it by tab. These are real buttons in a labelled group, with
+ * arrow keys moving between them and one tab stop for the whole row.
+ *
+ *   import { FilterBar } from './blocks/filter-bar.js';
+ *
+ *   const filters = FilterBar({
+ *     options: [
+ *       { value: 'all', label: 'All' },
+ *       { value: 'active', label: 'Active' },
+ *       { value: 'done', label: 'Done' },
+ *     ],
+ *     value: 'all',
+ *     onChange: (value) => { state.filter = value; render(); },
+ *   });
+ *   document.querySelector('#app').append(filters.el);
+ */
+
+const CSS = `
+.fb {
+  display: inline-flex; gap: 2px; padding: 4px;
+  background: var(--surface, #14171c);
+  border: 1px solid var(--line, #232830); border-radius: 999px;
+}
+.fb button {
+  padding: 8px var(--s3, 16px); min-height: 36px;
+  font: inherit; color: var(--muted, #8b93a3);
+  background: none; border: 0; border-radius: 999px; cursor: pointer;
+  transition: color var(--fast, 160ms), background var(--fast, 160ms);
+}
+.fb button:hover { color: var(--text, #e7eaf0); }
+.fb button[aria-pressed="true"] {
+  color: var(--accent-ink, #04110f); background: var(--accent, #2dd4bf);
+}
+.fb button:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; }
+.fb-count { margin-left: 6px; opacity: .7; font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .fb button { transition: none; } }
+`;
+
+let styled = false;
+function styles() {
+  if (styled) return;
+  styled = true;
+  document.head.append(Object.assign(document.createElement('style'), { textContent: CSS }));
+}
+
+export function FilterBar({
+  options = [],
+  value = options[0]?.value,
+  onChange = () => {},
+  label = 'Filter',
+} = {}) {
+  styles();
+
+  let current = value;
+
+  const el = document.createElement('div');
+  el.className = 'fb';
+  el.setAttribute('role', 'group');
+  el.setAttribute('aria-label', label);
+
+  const buttons = options.map((option) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.value = option.value;
+    button.textContent = option.label;
+
+    if (option.count !== undefined) {
+      const count = document.createElement('span');
+      count.className = 'fb-count';
+      count.textContent = String(option.count);
+      button.append(count);
+    }
+
+    button.addEventListener('click', () => pick(option.value));
+    el.append(button);
+    return button;
+  });
+
+  // One tab stop for the row, arrows to move inside it: the pattern a
+  // keyboard user expects from a group of related choices.
+  el.addEventListener('keydown', (event) => {
+    const keys = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+    const step = keys[event.key];
+    if (!step) return;
+    event.preventDefault();
+    const at = buttons.findIndex((b) => b.dataset.value === current);
+    const next = buttons[(at + step + buttons.length) % buttons.length];
+    pick(next.dataset.value);
+    next.focus();
+  });
+
+  function paint() {
+    for (const button of buttons) {
+      const on = button.dataset.value === current;
+      button.setAttribute('aria-pressed', String(on));
+      button.tabIndex = on ? 0 : -1;
+    }
+  }
+
+  function pick(next) {
+    if (next === current) return;
+    current = next;
+    paint();
+    onChange(current);
+  }
+
+  paint();
+
+  return {
+    el,
+    get value() { return current; },
+    /** Move the selection without calling onChange — for state set elsewhere. */
+    setValue(next) { current = next; paint(); },
+    /** Update the numbers beside the labels. */
+    setCounts(counts = {}) {
+      for (const button of buttons) {
+        const count = counts[button.dataset.value];
+        let span = button.querySelector('.fb-count');
+        if (count === undefined) { span?.remove(); continue; }
+        if (!span) {
+          span = document.createElement('span');
+          span.className = 'fb-count';
+          button.append(span);
+        }
+        span.textContent = String(count);
+      }
+    },
+  };
+}

package/templates/blocks/plain/item-list.js

@@ -0,0 +1,249 @@
+/**
+ * A list of things you can add, tick off, rename and remove.
+ *
+ * The part of a one-page app that is written from scratch most often and
+ * finished least often: no empty state, no keyboard, no way to fix a typo,
+ * and a delete button that is a bare × with nothing to announce it. This one
+ * has all of that, and it is an ordinary file now — edit it to suit the app.
+ *
+ *   import { ItemList } from './blocks/item-list.js';
+ *
+ *   const list = ItemList({
+ *     items: store.state.items,
+ *     onChange: (items) => store.set({ items }),
+ *     placeholder: 'Add a task',
+ *     empty: { title: 'Nothing here yet', description: 'Add the first one above.' },
+ *   });
+ *   document.querySelector('#app').append(list.el);
+ *
+ * Items are `{ id, text, done }`. `onChange` gets the whole array back after
+ * every change, so the state lives in one place and this only draws it.
+ */
+
+const CSS = `
+.il { display: flex; flex-direction: column; gap: var(--s3, 16px); }
+.il-add { display: flex; gap: var(--s1, 8px); }
+.il-add input {
+  flex: 1; min-width: 0;
+  padding: 12px var(--s2, 12px);
+  font: inherit; color: var(--text, #e7eaf0);
+  background: var(--surface, #14171c);
+  border: 1px solid var(--line, #232830); border-radius: var(--r, 16px);
+}
+.il-add input::placeholder { color: var(--muted, #8b93a3); }
+.il-add input:focus-visible, .il button:focus-visible, .il input:focus-visible {
+  outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px;
+}
+.il-add button {
+  padding: 0 var(--s4, 24px); min-height: 44px;
+  font: 500 inherit; color: var(--accent-ink, #04110f); background: var(--accent, #2dd4bf);
+  border: 0; border-radius: var(--r, 16px); cursor: pointer;
+  transition: filter var(--fast, 160ms);
+}
+.il-add button:hover { filter: brightness(1.08); }
+.il-add button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
+
+.il-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1, 8px); }
+.il-row {
+  display: flex; align-items: center; gap: var(--s2, 12px);
+  padding: var(--s2, 12px);
+  background: var(--surface, #14171c);
+  border: 1px solid var(--line, #232830); border-radius: var(--r, 16px);
+}
+.il-row:hover { border-color: color-mix(in oklab, var(--line, #232830) 60%, var(--accent, #2dd4bf)); }
+.il-check { width: 20px; height: 20px; flex: none; accent-color: var(--accent, #2dd4bf); cursor: pointer; }
+.il-text {
+  flex: 1; min-width: 0; padding: 4px 6px; margin: -4px -6px;
+  font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 8px;
+  text-align: left; cursor: text; overflow-wrap: anywhere;
+}
+.il-text:hover { border-color: var(--line, #232830); }
+.il-row[data-done="true"] .il-text { color: var(--muted, #8b93a3); text-decoration: line-through; }
+.il-edit {
+  flex: 1; min-width: 0; padding: 4px 6px; margin: -4px -6px;
+  font: inherit; color: var(--text, #e7eaf0); background: var(--bg, #0b0d10);
+  border: 1px solid var(--accent, #2dd4bf); border-radius: 8px;
+}
+.il-remove {
+  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
+  font-size: 18px; line-height: 1; color: var(--muted, #8b93a3);
+  background: none; border: 0; border-radius: 8px; cursor: pointer;
+  transition: color var(--fast, 160ms), background var(--fast, 160ms);
+}
+.il-remove:hover { color: var(--bad, #ff8b95); background: color-mix(in oklab, var(--surface, #14171c) 70%, var(--bad, #ff8b95)); }
+
+.il-empty { padding: var(--s5, 40px) var(--s3, 16px); text-align: center; }
+.il-empty h2 { margin: 0 0 var(--s1, 8px); font-size: 1.05rem; }
+.il-empty p { margin: 0; color: var(--muted, #8b93a3); }
+.il-count { color: var(--muted, #8b93a3); font-size: .875rem; }
+@media (prefers-reduced-motion: reduce) { .il * { transition: none !important; } }
+`;
+
+let styled = false;
+function styles() {
+  if (styled) return;
+  styled = true;
+  document.head.append(Object.assign(document.createElement('style'), { textContent: CSS }));
+}
+
+const uid = () => `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 7)}`;
+
+export function ItemList({
+  items = [],
+  onChange = () => {},
+  placeholder = 'Add an item',
+  addLabel = 'Add',
+  empty = { title: 'Nothing here yet', description: 'Add the first one above.' },
+} = {}) {
+  styles();
+
+  let rows = items.map((i) => ({ ...i }));
+  let editing = null;                       // id of the row being renamed
+
+  const el = document.createElement('div');
+  el.className = 'il';
+
+  // -- the add row ---------------------------------------------------------
+  const form = document.createElement('form');
+  form.className = 'il-add';
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.placeholder = placeholder;
+  input.setAttribute('aria-label', placeholder);
+  input.autocomplete = 'off';
+  const add = document.createElement('button');
+  add.type = 'submit';
+  add.textContent = addLabel;
+  add.disabled = true;
+  form.append(input, add);
+
+  input.addEventListener('input', () => { add.disabled = !input.value.trim(); });
+
+  function submit() {
+    const text = input.value.trim();
+    if (!text) return;
+    rows = [...rows, { id: uid(), text, done: false }];
+    input.value = '';
+    add.disabled = true;
+    commit();
+    input.focus();
+  }
+
+  form.addEventListener('submit', (event) => { event.preventDefault(); submit(); });
+
+  // Enter is how this control is actually used, and a form's implicit submit
+  // is conditional on things outside this file — a disabled default button, a
+  // browser quirk, an ancestor that swallows the key. Handled outright.
+  input.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter' || event.isComposing) return;
+    event.preventDefault();
+    submit();
+  });
+
+  const list = document.createElement('ul');
+  list.className = 'il-rows';
+
+  const count = document.createElement('p');
+  count.className = 'il-count';
+  count.setAttribute('aria-live', 'polite');
+
+  el.append(form, list, count);
+
+  function commit() {
+    draw();
+    onChange(rows.map((r) => ({ ...r })));
+  }
+
+  function row(item) {
+    const li = document.createElement('li');
+    li.className = 'il-row';
+    li.dataset.done = String(Boolean(item.done));
+
+    const check = document.createElement('input');
+    check.type = 'checkbox';
+    check.className = 'il-check';
+    check.checked = Boolean(item.done);
+    check.setAttribute('aria-label', `Mark "${item.text}" as ${item.done ? 'not done' : 'done'}`);
+    check.addEventListener('change', () => {
+      rows = rows.map((r) => (r.id === item.id ? { ...r, done: check.checked } : r));
+      commit();
+    });
+
+    let body;
+    if (editing === item.id) {
+      // Renaming in place: Enter keeps it, Escape puts it back, and clicking
+      // away keeps it too — losing an edit to a stray click is infuriating.
+      body = document.createElement('input');
+      body.className = 'il-edit';
+      body.value = item.text;
+      body.setAttribute('aria-label', `Rename "${item.text}"`);
+      const keep = () => {
+        const text = body.value.trim();
+        editing = null;
+        if (!text || text === item.text) return draw();
+        rows = rows.map((r) => (r.id === item.id ? { ...r, text } : r));
+        commit();
+      };
+      body.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') { event.preventDefault(); keep(); }
+        if (event.key === 'Escape') { event.preventDefault(); editing = null; draw(); }
+      });
+      body.addEventListener('blur', keep);
+      queueMicrotask(() => { body.focus(); body.select(); });
+    } else {
+      body = document.createElement('button');
+      body.type = 'button';
+      body.className = 'il-text';
+      body.textContent = item.text;
+      body.setAttribute('aria-label', `Rename "${item.text}"`);
+      body.addEventListener('click', () => { editing = item.id; draw(); });
+    }
+
+    const remove = document.createElement('button');
+    remove.type = 'button';
+    remove.className = 'il-remove';
+    remove.textContent = '×';
+    remove.setAttribute('aria-label', `Remove "${item.text}"`);
+    remove.addEventListener('click', () => {
+      rows = rows.filter((r) => r.id !== item.id);
+      commit();
+      input.focus();
+    });
+
+    li.append(check, body, remove);
+    return li;
+  }
+
+  function draw() {
+    list.replaceChildren();
+    if (!rows.length) {
+      const blank = document.createElement('li');
+      blank.className = 'il-empty';
+      const title = document.createElement('h2');
+      title.textContent = empty.title;
+      const description = document.createElement('p');
+      description.textContent = empty.description ?? '';
+      blank.append(title, description);
+      list.append(blank);
+      count.textContent = '';
+      return;
+    }
+    for (const item of rows) list.append(row(item));
+    const left = rows.filter((r) => !r.done).length;
+    count.textContent = `${left} of ${rows.length} left`;
+  }
+
+  draw();
+
+  return {
+    el,
+    /** Redraw from a new array — call this when the state changes elsewhere. */
+    setItems(next = []) {
+      rows = next.map((i) => ({ ...i }));
+      editing = null;
+      draw();
+    },
+    get items() { return rows.map((r) => ({ ...r })); },
+    focus() { input.focus(); },
+  };
+}

package/templates/blocks/plain/modal.js

@@ -0,0 +1,141 @@
+/**
+ * A dialog that behaves like one: Escape closes it, focus is trapped inside
+ * while it is open and goes back to whatever opened it afterwards, and the
+ * page behind it cannot be scrolled or tabbed into.
+ *
+ * Built on the browser's own <dialog>, which does the trapping and the
+ * backdrop already. A hand-rolled div gets the look and none of the rest.
+ *
+ *   import { Modal } from './blocks/modal.js';
+ *
+ *   const confirm = Modal({
+ *     title: 'Delete this list?',
+ *     description: 'Everything in it goes too. This cannot be undone.',
+ *     confirmLabel: 'Delete',
+ *     danger: true,
+ *     onConfirm: () => store.reset(),
+ *   });
+ *   document.body.append(confirm.el);
+ *   button.addEventListener('click', () => confirm.open());
+ */
+
+const CSS = `
+.md {
+  width: min(440px, calc(100vw - 32px)); padding: 0;
+  color: var(--text, #e7eaf0); background: var(--surface, #14171c);
+  border: 1px solid var(--line, #232830); border-radius: var(--r, 16px);
+  box-shadow: 0 24px 60px rgb(0 0 0 / .5);
+}
+.md::backdrop { background: rgb(0 0 0 / .6); }
+.md-body { padding: var(--s4, 24px); }
+.md h2 { margin: 0 0 var(--s1, 8px); font-size: 1.1rem; }
+.md p { margin: 0; color: var(--muted, #8b93a3); }
+.md-actions {
+  display: flex; justify-content: flex-end; gap: var(--s1, 8px);
+  padding: var(--s2, 12px) var(--s4, 24px) var(--s4, 24px);
+}
+.md button {
+  min-height: 44px; padding: 0 var(--s4, 24px);
+  font: 500 inherit; border-radius: var(--r, 16px); cursor: pointer;
+  transition: filter var(--fast, 160ms), background var(--fast, 160ms);
+}
+.md-cancel {
+  color: var(--text, #e7eaf0); background: none;
+  border: 1px solid var(--line, #232830);
+}
+.md-cancel:hover { background: var(--bg, #0b0d10); }
+.md-confirm { color: var(--accent-ink, #04110f); background: var(--accent, #2dd4bf); border: 0; }
+.md-confirm:hover { filter: brightness(1.08); }
+.md-confirm[data-danger="true"] { color: var(--bad-ink, #2a0b0e); background: var(--bad, #ff8b95); }
+.md button:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .md button { transition: none; } }
+`;
+
+let styled = false;
+function styles() {
+  if (styled) return;
+  styled = true;
+  document.head.append(Object.assign(document.createElement('style'), { textContent: CSS }));
+}
+
+let seq = 0;
+
+export function Modal({
+  title = '',
+  description = '',
+  content = null,              // an element, if the dialog is more than a question
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  danger = false,
+  onConfirm = () => {},
+  onCancel = () => {},
+} = {}) {
+  styles();
+
+  const id = `md-${++seq}`;
+  const el = document.createElement('dialog');
+  el.className = 'md';
+  el.setAttribute('aria-labelledby', id);
+
+  const body = document.createElement('div');
+  body.className = 'md-body';
+
+  const heading = document.createElement('h2');
+  heading.id = id;
+  heading.textContent = title;
+  body.append(heading);
+
+  if (description) {
+    const p = document.createElement('p');
+    p.textContent = description;
+    body.append(p);
+  }
+  if (content) body.append(content);
+
+  const actions = document.createElement('div');
+  actions.className = 'md-actions';
+
+  const cancel = document.createElement('button');
+  cancel.type = 'button';
+  cancel.className = 'md-cancel';
+  cancel.textContent = cancelLabel;
+  cancel.addEventListener('click', () => close('cancel'));
+
+  const confirm = document.createElement('button');
+  confirm.type = 'button';
+  confirm.className = 'md-confirm';
+  confirm.dataset.danger = String(Boolean(danger));
+  confirm.textContent = confirmLabel;
+  confirm.addEventListener('click', () => close('confirm'));
+
+  actions.append(cancel, confirm);
+  el.append(body, actions);
+
+  // Escape fires the dialog's own cancel event; route it through the same
+  // path as the button so onCancel runs however it was dismissed.
+  el.addEventListener('cancel', (event) => { event.preventDefault(); close('cancel'); });
+
+  // A click on the backdrop lands on the dialog itself, never on its contents.
+  el.addEventListener('click', (event) => { if (event.target === el) close('cancel'); });
+
+  let opener = null;
+
+  function close(how) {
+    el.close();
+    opener?.focus?.();
+    opener = null;
+    if (how === 'confirm') onConfirm();
+    else onCancel();
+  }
+
+  return {
+    el,
+    open() {
+      opener = document.activeElement;
+      el.showModal();
+      confirm.focus();
+    },
+    close: () => close('cancel'),
+    get isOpen() { return el.open; },
+  };
+}

package/templates/blocks/plain/store.js

@@ -0,0 +1,93 @@
+/**
+ * State in one place, saved to localStorage, and the same in every tab.
+ *
+ * The three things a hand-written version gets wrong: it throws in private
+ * mode, it dies on a corrupt value written by an older version of the app,
+ * and it silently disagrees with itself when the app is open twice.
+ *
+ *   import { createStore } from './blocks/store.js';
+ *
+ *   const store = createStore('tide', { items: [], filter: 'all' });
+ *   store.subscribe(render);            // called now and after every change
+ *   store.update((s) => ({ items: [...s.items, task] }));
+ *   store.state.items
+ */
+
+export function createStore(key, initial = {}) {
+  let state = { ...initial, ...read(key, initial) };
+  const listeners = new Set();
+
+  function announce() {
+    for (const listener of [...listeners]) {
+      try {
+        listener(state);
+      } catch (err) {
+        // One broken listener must not stop the others, or half the page
+        // stops redrawing for a reason nobody can see.
+        console.error('store listener failed', err);
+      }
+    }
+  }
+
+  // The app open in two tabs is one app. Without this the second tab keeps
+  // showing what the first one deleted, then overwrites it on the next save.
+  if (typeof window !== 'undefined') {
+    window.addEventListener('storage', (event) => {
+      if (event.key !== key) return;
+      state = { ...initial, ...read(key, initial) };
+      announce();
+    });
+  }
+
+  return {
+    get state() { return state; },
+
+    /** Replace some of the state. Saves, then tells everyone. */
+    set(patch) {
+      state = { ...state, ...patch };
+      write(key, state);
+      announce();
+    },
+
+    /** The same, from a function of the current state. */
+    update(fn) {
+      this.set(fn(state) ?? {});
+    },
+
+    /** Called straight away with the current state, and after every change. */
+    subscribe(listener) {
+      listeners.add(listener);
+      listener(state);
+      return () => listeners.delete(listener);
+    },
+
+    /** Back to how it started, on disk as well as in memory. */
+    reset() {
+      state = { ...initial };
+      write(key, state);
+      announce();
+    },
+  };
+}
+
+function read(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    // An array or a string where an object belongs is a store written by an
+    // older version of this app. Start again rather than crash on load.
+    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : { ...fallback };
+  } catch {
+    return {};
+  }
+}
+
+function write(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    // Private mode, or the quota is full. Losing the save is survivable;
+    // throwing here would take the whole page down with it.
+  }
+}