ucode-agent 1.26.2 → 1.27.0

package/templates/blocks/plain/theme-toggle.js

@@ -0,0 +1,116 @@
+/**
+ * Light and dark, remembered, and right on the first paint.
+ *
+ * Two things a hand-written toggle misses: it ignores the setting the
+ * operating system already has, so a daylight user gets a dark page and has
+ * to fix it every visit; and it applies the saved choice after the stylesheet
+ * has painted, so the page flashes the wrong colours on every load.
+ *
+ *   import { ThemeToggle, applyTheme } from './blocks/theme-toggle.js';
+ *
+ *   applyTheme();                                  // first line of app.js
+ *   header.append(ThemeToggle().el);
+ *
+ * The starter's stylesheet is the dark one. This adds the light values as an
+ * override on [data-theme="light"], so nothing already written has to change.
+ */
+
+const CSS = `
+:root[data-theme="light"] {
+  --bg: #f7f8fa;
+  --surface: #ffffff;
+  --line: #e3e6ec;
+  --text: #171a1f;
+  --muted: #626a78;
+  --accent: #0d9488;
+  --accent-ink: #ffffff;
+  --bad: #c2405a;
+  --bad-ink: #ffffff;
+}
+.tg {
+  display: inline-grid; place-items: center;
+  width: 40px; height: 40px;
+  font-size: 16px; line-height: 1;
+  color: var(--muted, #8b93a3); background: var(--surface, #14171c);
+  border: 1px solid var(--line, #232830); border-radius: 999px; cursor: pointer;
+  transition: color var(--fast, 160ms), border-color var(--fast, 160ms);
+}
+.tg:hover { color: var(--text, #e7eaf0); border-color: var(--accent, #2dd4bf); }
+.tg:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .tg { transition: none; } }
+`;
+
+const KEY = 'theme';
+
+let styled = false;
+function styles() {
+  if (styled) return;
+  styled = true;
+  document.head.append(Object.assign(document.createElement('style'), { textContent: CSS }));
+}
+
+const saved = () => {
+  try { return localStorage.getItem(KEY); } catch { return null; }
+};
+
+const systemPrefersLight = () =>
+  typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: light)').matches;
+
+/** What the page should be showing right now. */
+export function currentTheme() {
+  return saved() ?? (systemPrefersLight() ? 'light' : 'dark');
+}
+
+/**
+ * Put the theme on <html>. Call this once, as early as possible — before the
+ * first render, not after it.
+ */
+export function applyTheme(theme = currentTheme()) {
+  styles();
+  document.documentElement.dataset.theme = theme;
+  document.documentElement.style.colorScheme = theme;
+  return theme;
+}
+
+export function ThemeToggle({ onChange = () => {} } = {}) {
+  styles();
+  let theme = applyTheme();
+
+  const el = document.createElement('button');
+  el.type = 'button';
+  el.className = 'tg';
+
+  // Drawn rather than typed: a moon from the dingbat block is a different
+  // shape in every font, and missing altogether in some.
+  const SUN = '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"/>';
+  const MOON = '<path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/>';
+
+  function paint() {
+    el.innerHTML =
+      `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" ` +
+      `stroke-width="1.7" stroke-linecap="round" aria-hidden="true">${theme === 'light' ? SUN : MOON}</svg>`;
+    el.setAttribute('aria-label', theme === 'light' ? 'Switch to dark' : 'Switch to light');
+    el.setAttribute('aria-pressed', String(theme === 'dark'));
+  }
+
+  el.addEventListener('click', () => {
+    theme = theme === 'light' ? 'dark' : 'light';
+    try { localStorage.setItem(KEY, theme); } catch { /* private mode: this visit only */ }
+    applyTheme(theme);
+    paint();
+    onChange(theme);
+  });
+
+  // Someone who has never chosen follows the system, including when it
+  // changes at sunset while the page is open.
+  if (typeof matchMedia === 'function') {
+    matchMedia('(prefers-color-scheme: light)').addEventListener?.('change', () => {
+      if (saved()) return;
+      theme = applyTheme(currentTheme());
+      paint();
+    });
+  }
+
+  paint();
+  return { el, get theme() { return theme; } };
+}

package/templates/blocks/plain/toast.js

@@ -0,0 +1,107 @@
+/**
+ * A short message that appears, is read out, and goes away.
+ *
+ * The version everyone writes is a div that fades in and is invisible to a
+ * screen reader, so the one confirmation the app gives is the one thing a
+ * blind user never hears. This one lives in a polite live region, stacks,
+ * caps itself so a loop cannot bury the page, and holds still if the reader
+ * has asked for less motion.
+ *
+ *   import { toast } from './blocks/toast.js';
+ *
+ *   toast('Saved');
+ *   toast.error('Could not reach the server');
+ *   toast('Deleted', { action: { label: 'Undo', onClick: undo } });
+ */
+
+const CSS = `
+.tw {
+  position: fixed; inset: auto 0 0 0; z-index: 60;
+  display: flex; flex-direction: column-reverse; align-items: center; gap: var(--s1, 8px);
+  padding: var(--s3, 16px); pointer-events: none;
+}
+.tt {
+  display: flex; align-items: center; gap: var(--s2, 12px);
+  max-width: min(420px, calc(100vw - 32px));
+  padding: 12px var(--s3, 16px);
+  color: var(--text, #e7eaf0); background: var(--surface, #14171c);
+  border: 1px solid var(--line, #232830); border-radius: var(--r, 16px);
+  box-shadow: 0 12px 32px rgb(0 0 0 / .45);
+  pointer-events: auto;
+  animation: tt-in 180ms cubic-bezier(.2,0,.2,1);
+}
+.tt[data-tone="error"] { border-color: var(--bad, #ff8b95); }
+.tt[data-tone="error"] .tt-dot { background: var(--bad, #ff8b95); }
+.tt-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--accent, #2dd4bf); }
+.tt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.tt-action {
+  flex: none; padding: 4px 10px;
+  font: 500 inherit; color: var(--accent, #2dd4bf);
+  background: none; border: 1px solid var(--line, #232830); border-radius: 999px; cursor: pointer;
+}
+.tt-action:hover { background: var(--bg, #0b0d10); }
+.tt-action:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; }
+@keyframes tt-in { from { opacity: 0; transform: translateY(8px); } }
+@media (prefers-reduced-motion: reduce) { .tt { animation: none; } }
+`;
+
+const MAX = 3;
+const LIFE = 4000;
+
+let wrap = null;
+
+function region() {
+  if (wrap) return wrap;
+  document.head.append(Object.assign(document.createElement('style'), { textContent: CSS }));
+  wrap = document.createElement('div');
+  wrap.className = 'tw';
+  // polite, not assertive: a confirmation should wait its turn rather than
+  // interrupt whatever the reader is in the middle of.
+  wrap.setAttribute('role', 'status');
+  wrap.setAttribute('aria-live', 'polite');
+  document.body.append(wrap);
+  return wrap;
+}
+
+function show(text, { tone = 'default', action = null, duration = LIFE } = {}) {
+  const host = region();
+
+  const el = document.createElement('div');
+  el.className = 'tt';
+  el.dataset.tone = tone;
+
+  const dot = document.createElement('span');
+  dot.className = 'tt-dot';
+
+  const label = document.createElement('span');
+  label.className = 'tt-text';
+  label.textContent = text;
+
+  el.append(dot, label);
+
+  let timer = null;
+  const dismiss = () => { clearTimeout(timer); el.remove(); };
+
+  if (action) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'tt-action';
+    button.textContent = action.label;
+    button.addEventListener('click', () => { dismiss(); action.onClick?.(); });
+    el.append(button);
+  }
+
+  host.append(el);
+  while (host.children.length > MAX) host.firstElementChild.remove();
+
+  // A toast the pointer is resting on is a toast being read.
+  el.addEventListener('pointerenter', () => clearTimeout(timer));
+  el.addEventListener('pointerleave', () => { timer = setTimeout(dismiss, 1200); });
+  timer = setTimeout(dismiss, duration);
+
+  return dismiss;
+}
+
+export const toast = Object.assign(show, {
+  error: (text, options = {}) => show(text, { ...options, tone: 'error', duration: options.duration ?? 6000 }),
+});

package/templates/plain-html/styles.css

@@ -7,6 +7,10 @@
   --text: #e7eaf0;
   --muted: #8b93a3;
   --accent: #2dd4bf;
+  --accent-ink: #04110f;
+  --good: #4ade80;
+  --bad: #ff8b95;
+  --bad-ink: #2a0b0e;
 
   --r: 16px;
   --s1: 8px;