@acms-subir/core 0.2.0 → 0.3.1

package/src/components/CommandPalette.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { actions } from 'astro:actions';
+
+// ⌘K palette: create, jump, run commands, find content. Opened by ⌘K / Ctrl+K
+// or any [data-cmdk] element (sidebar search, mobile Search tab). The content
+// index is fetched once per page load on first open and filtered client-side.
+
+interface Collection { key: string; singular: string; plural: string }
+interface Props { collections: Collection[] }
+interface IndexItem { kind: string; title: string; sub: string; href: string; status: string; image: string; at: number }
+type Row =
+  | { type: 'link'; id: string; group: string; label: string; hint?: string; icon: string; href: string; newTab?: boolean }
+  | { type: 'run'; id: string; group: string; label: string; hint?: string; icon: string; run: () => void }
+  | { type: 'content'; id: string; group: string; item: IndexItem };
+
+const I: Record<string, string> = {
+  plus: 'M12 5v14M5 12h14',
+  go: 'M5 12h14M13 6l6 6-6 6',
+  upload: 'M12 16V4M7 9l5-5 5 5M4 17v3h16v-3',
+  links: 'M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5',
+  sun: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4',
+  moon: 'M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z',
+  monitor: 'M3 4h18v12H3zM8 20h8M12 16v4',
+  globe: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18',
+  page: 'M7 3h8l4 4v14H7zM15 3v4h4',
+  tag: 'M3 12V3h9l9 9-9 9zM7.5 7.5h0',
+  search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4',
+};
+const Icon = ({ d }: { d: string }) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
+);
+
+const setTheme = (t: string) => (window as unknown as { acmsTheme?: { set: (p: string) => void } }).acmsTheme?.set(t);
+
+export default function CommandPalette({ collections }: Props) {
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState('');
+  const [sel, setSel] = useState(0);
+  const [index, setIndex] = useState<IndexItem[] | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    const onClick = (e: MouseEvent) => {
+      if (e.target instanceof Element && e.target.closest('[data-cmdk]')) {
+        e.preventDefault();
+        setOpen(true);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    document.addEventListener('click', onClick);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.removeEventListener('click', onClick);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    setQ('');
+    setSel(0);
+    requestAnimationFrame(() => inputRef.current?.focus());
+    if (!index) {
+      actions.admin.index({}).then(({ data }) => setIndex(data?.items ?? [])).catch(() => setIndex([]));
+    }
+  }, [open]);
+
+  const staticRows = useMemo<Row[]>(() => {
+    const create: Row[] = [
+      ...collections.map((c): Row => ({ type: 'link', id: `new-${c.key}`, group: 'Create', label: `New ${c.singular.toLowerCase()}`, icon: I.plus, href: `/admin/c/${c.key}?new=1` })),
+      { type: 'link', id: 'new-page', group: 'Create', label: 'New page', icon: I.plus, href: '/admin/pages?new=1' },
+      { type: 'link', id: 'upload', group: 'Create', label: 'Upload media', icon: I.upload, href: '/admin/media' },
+      { type: 'link', id: 'add-link', group: 'Create', label: 'Add link block', icon: I.links, href: '/admin/links' },
+    ];
+    const jump: Row[] = [
+      ['Overview', '/admin'],
+      ...collections.map((c) => [c.plural, `/admin/c/${c.key}`]),
+      ['Pages', '/admin/pages'], ['Tags', '/admin/tags'], ['Media', '/admin/media'],
+      ['Design', '/admin/design'], ['Navigation', '/admin/navigation'], ['Links page', '/admin/links'],
+      ['Users', '/admin/users'], ['Settings', '/admin/settings'],
+      ['Settings › Analytics', '/admin/settings#analytics'], ['Settings › Code injection', '/admin/settings#code'],
+      ['Settings › Redirects', '/admin/settings#redirects'], ['Settings › Announcement bar', '/admin/settings#announcement'],
+    ].map(([label, href]): Row => ({ type: 'link', id: `go-${href}`, group: 'Jump to', label, icon: I.go, href }));
+    const cmds: Row[] = [
+      { type: 'run', id: 'theme-light', group: 'Commands', label: 'Switch to light mode', icon: I.sun, hint: '⌘⇧L', run: () => setTheme('light') },
+      { type: 'run', id: 'theme-dark', group: 'Commands', label: 'Switch to night mode', icon: I.moon, hint: '⌘⇧L', run: () => setTheme('dark') },
+      { type: 'run', id: 'theme-system', group: 'Commands', label: 'Match system theme', icon: I.monitor, run: () => setTheme('system') },
+      { type: 'link', id: 'view-site', group: 'Commands', label: 'View site', icon: I.globe, href: '/', newTab: true },
+    ];
+    return [...create, ...jump, ...cmds];
+  }, [collections]);
+
+  const rows = useMemo<Row[]>(() => {
+    const needle = q.trim().toLowerCase();
+    const match = (s: string) => s.toLowerCase().includes(needle);
+    if (!needle) {
+      const recent = (index ?? []).filter((i) => i.at).sort((a, b) => b.at - a.at).slice(0, 5)
+        .map((item): Row => ({ type: 'content', id: `c-${item.href}`, group: 'Recent', item }));
+      return [...staticRows.filter((r) => r.group === 'Create'), ...recent, ...staticRows.filter((r) => r.group === 'Jump to').slice(0, 6)];
+    }
+    const content = (index ?? []).filter((i) => match(i.title) || match(i.sub))
+      .slice(0, 8)
+      .map((item): Row => ({ type: 'content', id: `c-${item.href}-${item.title}`, group: 'Content', item }));
+    const statics = staticRows.filter((r) => r.type !== 'content' && match(r.label));
+    return [...statics.filter((r) => r.group === 'Create'), ...content, ...statics.filter((r) => r.group !== 'Create')];
+  }, [q, index, staticRows]);
+
+  useEffect(() => { setSel(0); }, [q]);
+  useEffect(() => {
+    listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' });
+  }, [sel]);
+
+  if (!open) return null;
+
+  const close = () => setOpen(false);
+  const activate = (r: Row, newTab = false) => {
+    if (r.type === 'run') { r.run(); close(); return; }
+    const href = r.type === 'content' ? r.item.href : r.href;
+    if (newTab || (r.type === 'link' && r.newTab)) window.open(href, '_blank', 'noopener');
+    else location.href = href;
+    close();
+  };
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') { e.preventDefault(); close(); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); setSel((s) => Math.min(rows.length - 1, s + 1)); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setSel((s) => Math.max(0, s - 1)); }
+    else if (e.key === 'Enter' && rows[sel]) { e.preventDefault(); activate(rows[sel], e.metaKey || e.ctrlKey); }
+  };
+
+  let lastGroup = '';
+  return (
+    <div className="cmdk-root" onKeyDown={onKeyDown}>
+      <div className="cmdk-dim" onClick={close} />
+      <div className="cmdk" role="dialog" aria-modal="true" aria-label="Command palette">
+        <div className="cmdk-in">
+          <Icon d={I.search} />
+          <input
+            ref={inputRef}
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search or type a command…"
+            role="combobox"
+            aria-expanded="true"
+            aria-controls="cmdk-list"
+            aria-activedescendant={rows[sel] ? `cmdk-${sel}` : undefined}
+          />
+          <button type="button" className="cmdk-esc" onClick={close}>esc</button>
+        </div>
+        <div className="cmdk-list" id="cmdk-list" role="listbox" ref={listRef}>
+          {rows.length === 0 && <div className="cmdk-empty">{index ? `Nothing matches “${q}”` : 'Loading…'}</div>}
+          {rows.map((r, i) => {
+            const head = r.group !== lastGroup ? <div className="cmdk-g">{r.group}</div> : null;
+            lastGroup = r.group;
+            return (
+              <div key={r.id}>
+                {head}
+                <div
+                  id={`cmdk-${i}`}
+                  role="option"
+                  aria-selected={i === sel}
+                  className="cmdk-it"
+                  onMouseMove={() => sel !== i && setSel(i)}
+                  onClick={(e) => activate(r, e.metaKey || e.ctrlKey)}
+                >
+                  {r.type === 'content' ? (
+                    <>
+                      {r.item.image ? <img className="cmdk-thumb" src={r.item.image} alt="" /> : (
+                        <span className="cmdk-ico"><Icon d={r.item.kind === 'Tag' ? I.tag : I.page} /></span>
+                      )}
+                      <span className="cmdk-label">{r.item.title}<small>{r.item.sub}</small></span>
+                      {r.item.status && <span className={`status ${r.item.status}`}>{r.item.status}</span>}
+                      <span className="cmdk-kind">{r.item.kind}</span>
+                    </>
+                  ) : (
+                    <>
+                      <span className="cmdk-ico"><Icon d={r.icon} /></span>
+                      <span className="cmdk-label">{r.label}</span>
+                      {r.hint && <kbd>{r.hint}</kbd>}
+                    </>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <div className="cmdk-foot">
+          <span><kbd>↑</kbd> <kbd>↓</kbd> move</span>
+          <span><kbd>↵</kbd> open</span>
+          <span><kbd>⌘ ↵</kbd> new tab</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ContentList.astro

@@ -0,0 +1,246 @@
+---
+// Ghost-style content rows grouped by month, shared by every collection list
+// and Pages. Rows link to the editor; hover (desktop) or swipe/long-press
+// (touch) reveals actions. Bulk + row actions POST back to the page as
+// op=bulk with `ids` and `to` (published | draft | archived | delete).
+
+export interface ContentItem {
+  id: string;
+  href: string;
+  title: string;
+  sub: string;             // public path
+  meta: string;            // "By Ana in design"
+  at: number;              // sort/group timestamp
+  status: string;
+  edited?: boolean;
+  scheduledAt?: number | null;
+  image?: string;
+  viewHref?: string;       // public URL when live
+  badges?: string[];
+  featured?: boolean;
+  // read-only rows (e.g. events mirrored from an external feed): no select
+  // box, swipe or status menu — just the row and an optional single action
+  readonly?: boolean;
+  // one extra POST action shown in the row's action area
+  action?: { label: string; fields: Record<string, string> };
+  // override the relative "3d ago" time with fixed text (event dates)
+  when?: string;
+  // extra class on the status line (e.g. 'cancelled')
+  statusLabel?: string;
+}
+interface Props {
+  items: ContentItem[];
+  noun: string;            // "post"
+  timeZone?: string;
+  empty?: string;          // slot-less empty message when filters hide everything
+  groupByMonth?: boolean;
+}
+const { items, noun, timeZone, empty = `No ${noun}s match the current filters.`, groupByMonth = true } = Astro.props;
+const tz = timeZone ? { timeZone } : {};
+const month = (ts: number) => {
+  try { return new Date(ts).toLocaleDateString('en-US', { month: 'long', year: 'numeric', ...tz }); }
+  catch { return new Date(ts).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); }
+};
+const ago = (ts: number) => {
+  const s = Math.floor((Date.now() - ts) / 1000);
+  if (s < 60) return 'just now';
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  if (s < 86400 * 7) return `${Math.floor(s / 86400)}d ago`;
+  try { return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric', ...tz }); }
+  catch { return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); }
+};
+const when = (ts: number) => {
+  try { return new Date(ts).toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', ...tz }); }
+  catch { return new Date(ts).toLocaleString('en-US'); }
+};
+const label = (s: string) => s[0].toUpperCase() + s.slice(1);
+
+const groups: { title: string; rows: ContentItem[] }[] = [];
+for (const it of items) {
+  const t = groupByMonth ? month(it.at) : '';
+  if (!groups.length || groups[groups.length - 1].title !== t) groups.push({ title: t, rows: [] });
+  groups[groups.length - 1].rows.push(it);
+}
+const I = {
+  ext: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
+  dots: 'M5 12h.01M12 12h.01M19 12h.01',
+  archive: 'M3 4h18v4H3zM5 8v12h14V8M10 12h4',
+  trash: 'M4 7h16M10 11v6M14 11v6M5 7l1 13h12l1-13M9 7V4h6v3',
+  image: 'M3 5h18v14H3zM3 15l5-5 4 4 3-3 6 6',
+  x: 'M6 6l12 12M18 6 6 18',
+};
+---
+
+<form id="bulk-form" method="post" hidden>
+  <input type="hidden" name="op" value="bulk" />
+</form>
+
+<div class="clist" data-noun={noun}>
+  {groups.map((g) => (
+    <section class="cgroup">
+      {g.title && <div class="cgroup-title">{g.title}</div>}
+      {g.rows.map((it) => (
+        <div class={`crow${it.readonly ? ' is-readonly' : ''}`} data-q={`${it.title} ${it.sub} ${it.meta}`.toLowerCase()} data-id={it.id}>
+          {it.readonly ? <span class="crow-check" aria-hidden="true" /> : (
+          <label class="crow-check" title="Select">
+            <input type="checkbox" name="ids" value={it.id} form="bulk-form" aria-label={`Select ${it.title}`} />
+          </label>
+          )}
+          <a class="crow-main" href={it.href}>
+            <span class="crow-thumb">
+              {it.image ? <img src={it.image} alt="" loading="lazy" /> : (
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d={I.image} /></svg>
+              )}
+            </span>
+            <span class="crow-text">
+              <b>{it.featured && <span class="crow-star" title="Featured">★ </span>}{it.title || 'Untitled'}</b>
+              <small>{it.meta ? `${it.meta} · ` : ''}{it.when ?? ago(it.at)}{it.sub && <span class="crow-path"> · {it.sub}</span>}</small>
+              <span class={`status ${it.status}`}>
+                {it.statusLabel ?? (it.status === 'scheduled' && it.scheduledAt ? `Scheduled · ${when(it.scheduledAt)}` : label(it.status))}
+                {it.edited && <span class="edited"> · edited</span>}
+                {it.badges?.map((b) => <span class="pill lang">{b}</span>)}
+              </span>
+            </span>
+          </a>
+          <div class="crow-actions">
+            {it.action && (
+              <form method="post" class="crow-action">
+                {Object.entries(it.action.fields).map(([k, v]) => <input type="hidden" name={k} value={v} />)}
+                <button class="btn sm" type="submit">{it.action.label}</button>
+              </form>
+            )}
+            {it.viewHref && (
+              <a class="icon-btn" href={it.viewHref} target="_blank" rel="noopener" title="View live" aria-label="View live">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={I.ext} /></svg>
+              </a>
+            )}
+            {!it.readonly && <details class="rmenu">
+              <summary class="icon-btn" title="More actions" aria-label="More actions">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d={I.dots} /></svg>
+              </summary>
+              <form method="post" class="rmenu-pop">
+                <input type="hidden" name="op" value="bulk" />
+                <input type="hidden" name="ids" value={it.id} />
+                {it.status !== 'published' && <button class="menu-item" name="to" value="published">Publish now</button>}
+                {it.status === 'published' && <button class="menu-item" name="to" value="draft">Unpublish</button>}
+                {it.status !== 'archived' && <button class="menu-item" name="to" value="archived">Archive</button>}
+                {it.status === 'archived' && <button class="menu-item" name="to" value="draft">Restore as draft</button>}
+                <div class="menu-sep" />
+                <button class="menu-item danger" name="to" value="delete" data-confirm={`Delete “${it.title || 'Untitled'}” permanently?`}>Delete</button>
+              </form>
+            </details>}
+          </div>
+          {!it.readonly && <form method="post" class="crow-swipe" aria-hidden="true">
+            <input type="hidden" name="op" value="bulk" />
+            <input type="hidden" name="ids" value={it.id} />
+            <button name="to" value="archived" class="sw-archive" tabindex="-1">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={I.archive} /></svg>Archive
+            </button>
+            <button name="to" value="delete" class="sw-delete" tabindex="-1" data-confirm={`Delete “${it.title || 'Untitled'}” permanently?`}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={I.trash} /></svg>Delete
+            </button>
+          </form>}
+        </div>
+      ))}
+    </section>
+  ))}
+  <p class="clist-none hint" hidden>{empty}</p>
+</div>
+
+<div class="bulkbar" hidden>
+  <b><span data-count>0</span> selected</b>
+  <button class="btn sm" name="to" value="published" form="bulk-form">Publish</button>
+  <button class="btn sm" name="to" value="archived" form="bulk-form">Archive</button>
+  <button class="btn sm danger" name="to" value="delete" form="bulk-form" data-confirm="Delete the selected items permanently?">Delete</button>
+  <button class="icon-btn" type="button" data-clear aria-label="Clear selection">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d={I.x} /></svg>
+  </button>
+</div>
+
+<script>
+  const list = document.querySelector<HTMLElement>('.clist');
+  const bar = document.querySelector<HTMLElement>('.bulkbar');
+  const boxes = () => [...document.querySelectorAll<HTMLInputElement>('.crow-check input')];
+  const sync = () => {
+    const n = boxes().filter((b) => b.checked).length;
+    if (bar) { bar.hidden = n === 0; bar.querySelector('[data-count]')!.textContent = String(n); }
+    list?.classList.toggle('selecting', n > 0);
+    boxes().forEach((b) => b.closest('.crow')?.classList.toggle('is-selected', b.checked));
+  };
+  list?.addEventListener('change', sync);
+  bar?.querySelector('[data-clear]')?.addEventListener('click', () => { boxes().forEach((b) => (b.checked = false)); sync(); });
+
+  // destructive buttons confirm first
+  document.addEventListener('click', (e) => {
+    const b = e.target instanceof Element ? e.target.closest<HTMLElement>('[data-confirm]') : null;
+    if (b && !confirm(b.dataset.confirm)) e.preventDefault();
+  });
+  // one row menu open at a time; outside click closes
+  document.addEventListener('click', (e) => {
+    document.querySelectorAll<HTMLDetailsElement>('details.rmenu[open]').forEach((d) => {
+      if (!(e.target instanceof Node && d.contains(e.target))) d.open = false;
+    });
+  });
+
+  // live filter from the page's search box
+  const q = document.querySelector<HTMLInputElement>('[data-live-filter]');
+  q?.addEventListener('input', () => {
+    const needle = q.value.trim().toLowerCase();
+    let shown = 0;
+    document.querySelectorAll<HTMLElement>('.cgroup').forEach((g) => {
+      let any = false;
+      g.querySelectorAll<HTMLElement>('.crow').forEach((r) => {
+        const hit = !needle || (r.dataset.q ?? '').includes(needle);
+        r.hidden = !hit;
+        if (hit) { any = true; shown++; }
+      });
+      g.hidden = !any;
+    });
+    const none = document.querySelector<HTMLElement>('.clist-none');
+    if (none) none.hidden = shown > 0;
+  });
+
+  // touch: swipe left for Archive/Delete, long-press to start selecting
+  if (matchMedia('(pointer: coarse)').matches) {
+    document.querySelectorAll<HTMLElement>('.crow:not(.is-readonly)').forEach((row) => {
+      const main = row.querySelector<HTMLElement>('.crow-main')!;
+      let x0 = 0, y0 = 0, dx = 0, swiping = false, timer = 0;
+      row.addEventListener('touchstart', (e) => {
+        x0 = e.touches[0].clientX; y0 = e.touches[0].clientY; dx = 0; swiping = false;
+        timer = window.setTimeout(() => {
+          const cb = row.querySelector<HTMLInputElement>('.crow-check input');
+          if (cb) { cb.checked = !cb.checked; sync(); navigator.vibrate?.(10); }
+          timer = -1;
+        }, 480);
+      }, { passive: true });
+      row.addEventListener('touchmove', (e) => {
+        const mx = e.touches[0].clientX - x0, my = e.touches[0].clientY - y0;
+        if (Math.abs(mx) > 8 || Math.abs(my) > 8) { clearTimeout(timer); if (timer !== -1) timer = 0; }
+        if (!swiping && Math.abs(mx) > 12 && Math.abs(mx) > Math.abs(my)) swiping = true;
+        if (swiping) {
+          dx = Math.max(-148, Math.min(0, mx + (row.classList.contains('swiped') ? -148 : 0)));
+          main.style.transition = 'none';
+          main.style.transform = `translateX(${dx}px)`;
+        }
+      }, { passive: true });
+      row.addEventListener('touchend', (e) => {
+        clearTimeout(timer);
+        if (timer === -1) { e.preventDefault(); timer = 0; return; }
+        if (!swiping) return;
+        main.style.transition = '';
+        main.style.transform = '';
+        document.querySelectorAll('.crow.swiped').forEach((r) => r !== row && r.classList.remove('swiped'));
+        row.classList.toggle('swiped', dx < -60);
+      });
+      main.addEventListener('click', (e) => {
+        if (row.classList.contains('swiped')) { e.preventDefault(); row.classList.remove('swiped'); }
+        else if (list?.classList.contains('selecting')) {
+          e.preventDefault();
+          const cb = row.querySelector<HTMLInputElement>('.crow-check input');
+          if (cb) { cb.checked = !cb.checked; sync(); }
+        }
+      });
+    });
+  }
+</script>

package/src/components/DesignAccess.tsx

@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useState, type FormEvent } from 'react';
+
+// Owner-only scoped keys for design tools (agents, scripts, a theme CLI).
+// A key's secret is shown exactly once after creation and only ever lives in
+// component state; it's never written to storage.
+
+interface KeyRow { id: string; name: string; prefix: string; scopes: string[]; createdAt: number | string }
+
+const SCOPES: { key: string; label: string; hint: string }[] = [
+  { key: 'design:read', label: 'Read design', hint: 'Themes, the live design and the staged draft' },
+  { key: 'design:write-draft', label: 'Stage draft changes', hint: 'Edits land in the private draft only' },
+  { key: 'design:publish', label: 'Publish design', hint: 'Makes the draft live for visitors. Only grant this to tools you trust' },
+  { key: 'media:read', label: 'Read media', hint: 'Browse the media library' },
+  { key: 'media:write', label: 'Upload media', hint: 'Add images to the media library' },
+];
+const DEFAULT_SCOPES = ['design:read', 'design:write-draft'];
+
+const created = (v: number | string) => {
+  const d = new Date(v);
+  return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+};
+
+const errorText = async (res: Response, fallback: string) => {
+  try {
+    const body = (await res.json()) as { error?: unknown };
+    if (typeof body?.error === 'string' && body.error) return body.error;
+  } catch { /* not JSON */ }
+  return fallback;
+};
+
+export default function DesignAccess() {
+  const [keys, setKeys] = useState<KeyRow[] | null>(null);
+  const [forbidden, setForbidden] = useState(false);
+  const [error, setError] = useState('');
+  const [name, setName] = useState('');
+  const [scopes, setScopes] = useState<string[]>(DEFAULT_SCOPES);
+  const [busy, setBusy] = useState(false);
+  const [token, setToken] = useState<{ name: string; value: string } | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const load = useCallback(async () => {
+    setError('');
+    try {
+      const res = await fetch('/api/design/keys', { headers: { accept: 'application/json' } });
+      if (res.status === 403) { setForbidden(true); return; }
+      if (!res.ok) { setError(await errorText(res, `Couldn't load keys (${res.status}).`)); return; }
+      const body = (await res.json()) as { keys?: KeyRow[] };
+      setKeys(body.keys ?? []);
+    } catch {
+      setError("Couldn't reach the server.");
+    }
+  }, []);
+  useEffect(() => { void load(); }, [load]);
+
+  const toggleScope = (key: string, on: boolean) =>
+    setScopes((s) => (on ? [...new Set([...s, key])] : s.filter((x) => x !== key)));
+
+  const create = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || scopes.length === 0) return;
+    setBusy(true);
+    setError('');
+    try {
+      const res = await fetch('/api/design/keys', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ name: name.trim(), scopes }),
+      });
+      if (res.status === 403) { setForbidden(true); return; }
+      if (!res.ok) { setError(await errorText(res, `Couldn't create the key (${res.status}).`)); return; }
+      const body = (await res.json()) as { key: KeyRow; token: string };
+      setKeys((k) => [body.key, ...(k ?? [])]);
+      setToken({ name: body.key.name, value: body.token });
+      setCopied(false);
+      setName('');
+      setScopes(DEFAULT_SCOPES);
+    } catch {
+      setError("Couldn't reach the server.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const revoke = async (k: KeyRow) => {
+    if (!window.confirm(`Revoke “${k.name}”? Anything using it loses access right away.`)) return;
+    setError('');
+    try {
+      const res = await fetch('/api/design/keys', {
+        method: 'DELETE',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ id: k.id }),
+      });
+      if (!res.ok) { setError(await errorText(res, `Couldn't revoke the key (${res.status}).`)); return; }
+      setKeys((list) => (list ?? []).filter((x) => x.id !== k.id));
+    } catch {
+      setError("Couldn't reach the server.");
+    }
+  };
+
+  const copyToken = async () => {
+    if (!token) return;
+    try { await navigator.clipboard.writeText(token.value); setCopied(true); } catch { setCopied(false); }
+  };
+
+  if (forbidden) {
+    return (
+      <p className="notice te-note">
+        Only the site owner can manage design access keys.
+      </p>
+    );
+  }
+
+  return (
+    <div className="da">
+      <p className="te-intro">
+        Scoped keys let a tool, script or agent work on the design without your login. Keys can only do what their
+        scopes allow. Older agent keys don't have design access.
+      </p>
+
+      {token && (
+        <div className="notice da-token" role="status">
+          <p><b>Copy the key for “{token.name}” now.</b> It won't be shown again.</p>
+          <div className="da-token-row">
+            <input readOnly className="mono" value={token.value} aria-label="New access key" onFocus={(e) => e.currentTarget.select()} />
+            <button className="btn sm" type="button" onClick={() => void copyToken()}>{copied ? 'Copied' : 'Copy'}</button>
+            <button className="btn sm ghost" type="button" onClick={() => setToken(null)}>Done</button>
+          </div>
+        </div>
+      )}
+      {error && <p className="flash error te-alert" role="alert">{error}</p>}
+
+      {keys === null ? (
+        !error && <p className="te-muted">Loading keys…</p>
+      ) : keys.length === 0 ? (
+        <p className="te-muted">No design keys yet.</p>
+      ) : (
+        <ul className="da-keys" aria-label="Design access keys">
+          {keys.map((k) => (
+            <li key={k.id}>
+              <div className="da-key">
+                <b>{k.name}</b>
+                <small>
+                  <code>{k.prefix}…</code>
+                  {created(k.createdAt) && ` · created ${created(k.createdAt)}`}
+                </small>
+                <small className="da-scopes">
+                  {k.scopes.map((s) => SCOPES.find((x) => x.key === s)?.label ?? s).join(' · ')}
+                </small>
+              </div>
+              <button className="btn sm ghost te-delete" type="button" onClick={() => void revoke(k)} aria-label={`Revoke key ${k.name}`}>
+                Revoke
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <form className="da-form" onSubmit={(e) => void create(e)}>
+        <p className="card-title da-title">New key</p>
+        <label className="field">
+          <span>Name</span>
+          <input type="text" required maxLength={100} placeholder="e.g. Theme CLI on my laptop" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+        <fieldset className="da-scopes-set">
+          <legend>Scopes</legend>
+          {SCOPES.map((s) => (
+            <label key={s.key} className="check-row">
+              <input type="checkbox" checked={scopes.includes(s.key)} onChange={(e) => toggleScope(s.key, e.target.checked)} />
+              <span>
+                {s.label} <code>{s.key}</code>
+                <small>{s.hint}</small>
+              </span>
+            </label>
+          ))}
+        </fieldset>
+        <button className="btn" type="submit" disabled={busy || !name.trim() || scopes.length === 0}>
+          {busy ? 'Creating…' : 'Create key'}
+        </button>
+      </form>
+    </div>
+  );
+}