@acms-subir/core 0.0.1

package/src/components/media/CropModal.tsx

@@ -0,0 +1,229 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Media } from '../../lib/schema';
+import { mediaUrl, uploadImage } from '../editor/imaging';
+
+// Crop/edit modal for the media library. Edits are non-destructive: applying
+// uploads the result as a NEW media item (serve routes cache immutably, so
+// bytes at an existing key are never rewritten).
+
+interface Props {
+  media: Media;
+  onClose: () => void;
+  onSaved: (created: Media) => void;
+}
+
+interface Rect { x: number; y: number; w: number; h: number }
+
+const ASPECTS: { label: string; value: number | null }[] = [
+  { label: 'Free', value: null },
+  { label: '1:1', value: 1 },
+  { label: '4:3', value: 4 / 3 },
+  { label: '3:2', value: 3 / 2 },
+  { label: '16:9', value: 16 / 9 },
+];
+
+const MIN_CROP = 24;
+
+export function CropModal({ media, onClose, onSaved }: Props) {
+  // rotation is applied first (90° steps); crop coords live in the rotated space
+  const [rotation, setRotation] = useState(0);
+  const [workingSrc, setWorkingSrc] = useState(() => mediaUrl(media.key));
+  const [imgSize, setImgSize] = useState<{ w: number; h: number } | null>(null);
+  const [crop, setCrop] = useState<Rect | null>(null);
+  const [aspect, setAspect] = useState<number | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const stageRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const bitmapRef = useRef<ImageBitmap | null>(null);
+  const dragRef = useRef<{ mode: string; startX: number; startY: number; start: Rect } | null>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  // load the source bitmap once; rotation renders it into a canvas dataURL
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const blob = await (await fetch(mediaUrl(media.key))).blob();
+        const bmp = await createImageBitmap(blob);
+        if (cancelled) return;
+        bitmapRef.current = bmp;
+        setImgSize({ w: bmp.width, h: bmp.height });
+        setCrop({ x: 0, y: 0, w: bmp.width, h: bmp.height });
+      } catch {
+        if (!cancelled) setError('Could not load the image for editing.');
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [media.key]);
+
+  const applyRotation = useCallback((deg: number) => {
+    const bmp = bitmapRef.current;
+    if (!bmp) return;
+    const rot = ((deg % 360) + 360) % 360;
+    const swapped = rot === 90 || rot === 270;
+    const canvas = document.createElement('canvas');
+    canvas.width = swapped ? bmp.height : bmp.width;
+    canvas.height = swapped ? bmp.width : bmp.height;
+    const ctx = canvas.getContext('2d')!;
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate((rot * Math.PI) / 180);
+    ctx.drawImage(bmp, -bmp.width / 2, -bmp.height / 2);
+    setWorkingSrc(canvas.toDataURL());
+    setImgSize({ w: canvas.width, h: canvas.height });
+    setCrop({ x: 0, y: 0, w: canvas.width, h: canvas.height });
+    setRotation(rot);
+  }, []);
+
+  // displayed image scale (client px per source px)
+  const scale = imgRef.current && imgSize ? imgRef.current.clientWidth / imgSize.w : 1;
+
+  const clampCrop = useCallback((r: Rect): Rect => {
+    if (!imgSize) return r;
+    const w = Math.min(Math.max(r.w, MIN_CROP), imgSize.w);
+    const h = Math.min(Math.max(r.h, MIN_CROP), imgSize.h);
+    return {
+      w, h,
+      x: Math.min(Math.max(r.x, 0), imgSize.w - w),
+      y: Math.min(Math.max(r.y, 0), imgSize.h - h),
+    };
+  }, [imgSize]);
+
+  const setAspectAndReset = (a: number | null) => {
+    setAspect(a);
+    if (!imgSize) return;
+    if (a === null) { setCrop({ x: 0, y: 0, w: imgSize.w, h: imgSize.h }); return; }
+    let w = imgSize.w;
+    let h = w / a;
+    if (h > imgSize.h) { h = imgSize.h; w = h * a; }
+    setCrop(clampCrop({ x: (imgSize.w - w) / 2, y: (imgSize.h - h) / 2, w, h }));
+  };
+
+  const onPointerDown = (mode: string) => (e: React.PointerEvent) => {
+    if (!crop) return;
+    e.preventDefault();
+    e.stopPropagation();
+    (e.target as Element).setPointerCapture(e.pointerId);
+    dragRef.current = { mode, startX: e.clientX, startY: e.clientY, start: { ...crop } };
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    const drag = dragRef.current;
+    if (!drag || !imgSize) return;
+    const dx = (e.clientX - drag.startX) / scale;
+    const dy = (e.clientY - drag.startY) / scale;
+    const s = drag.start;
+    if (drag.mode === 'move') {
+      setCrop(clampCrop({ ...s, x: s.x + dx, y: s.y + dy }));
+      return;
+    }
+    // corner resize: nw/ne/sw/se
+    let { x, y, w, h } = s;
+    if (drag.mode.includes('e')) w = s.w + dx;
+    if (drag.mode.includes('s')) h = s.h + dy;
+    if (drag.mode.includes('w')) { x = s.x + dx; w = s.w - dx; }
+    if (drag.mode.includes('n')) { y = s.y + dy; h = s.h - dy; }
+    if (aspect) {
+      h = w / aspect;
+      if (drag.mode.includes('n')) y = s.y + s.h - h;
+    }
+    if (w >= MIN_CROP && h >= MIN_CROP && x >= 0 && y >= 0 && x + w <= imgSize.w && y + h <= imgSize.h) {
+      setCrop({ x, y, w, h });
+    }
+  };
+
+  const onPointerUp = () => { dragRef.current = null; };
+
+  async function apply() {
+    if (!crop || !imgSize || busy) return;
+    setBusy(true);
+    setError('');
+    try {
+      const img = new Image();
+      img.src = workingSrc;
+      await new Promise((res, rej) => { img.onload = res; img.onerror = rej; });
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.round(crop.w);
+      canvas.height = Math.round(crop.h);
+      canvas.getContext('2d')!.drawImage(img, crop.x, crop.y, crop.w, crop.h, 0, 0, canvas.width, canvas.height);
+      const blob = await new Promise<Blob | null>((res) => canvas.toBlob(res, 'image/webp', 0.9));
+      if (!blob) throw new Error('Crop failed');
+      const base = media.filename.replace(/\.[a-z0-9]+$/i, '');
+      const file = new File([blob], `${base}-edited.webp`, { type: 'image/webp' });
+      const created = await uploadImage(file, media.alt);
+      onSaved(created);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Something went wrong saving the edit.');
+      setBusy(false);
+    }
+  }
+
+  const unchanged = rotation === 0 && crop && imgSize && crop.x === 0 && crop.y === 0 && crop.w === imgSize.w && crop.h === imgSize.h;
+
+  return (
+    <div className="pe-modal-backdrop" onClick={onClose}>
+      <div className="pe-modal mc-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="pe-modal-head">
+          <strong>Edit image</strong>
+          <span className="mc-dims">
+            {crop ? `${Math.round(crop.w)}×${Math.round(crop.h)}` : ''}
+          </span>
+          <button type="button" className="pe-modal-close" onClick={onClose}>✕ Close</button>
+        </div>
+
+        {error && <div className="pe-modal-error">{error}</div>}
+
+        <div className="mc-stage" ref={stageRef}>
+          {imgSize ? (
+            <div className="mc-canvas" onPointerMove={onPointerMove} onPointerUp={onPointerUp}>
+              <img ref={imgRef} src={workingSrc} alt="" draggable={false} />
+              {crop && (
+                <div
+                  className="mc-crop"
+                  style={{
+                    left: crop.x * scale, top: crop.y * scale,
+                    width: crop.w * scale, height: crop.h * scale,
+                  }}
+                  onPointerDown={onPointerDown('move')}
+                >
+                  {['nw', 'ne', 'sw', 'se'].map((c) => (
+                    <span key={c} className={`mc-handle mc-${c}`} onPointerDown={onPointerDown(c)} />
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="mc-loading">Loading image…</div>
+          )}
+        </div>
+
+        <div className="mc-toolbar">
+          <div className="mc-aspects">
+            {ASPECTS.map((a) => (
+              <button
+                key={a.label}
+                type="button"
+                className={`pe-btn sm ${aspect === a.value ? 'primary' : ''}`}
+                onClick={() => setAspectAndReset(a.value)}
+              >
+                {a.label}
+              </button>
+            ))}
+            <button type="button" className="pe-btn sm" onClick={() => applyRotation(rotation + 90)}>⟳ Rotate</button>
+          </div>
+          <div className="mc-actions">
+            <button type="button" className="pe-btn sm ghost" onClick={onClose}>Cancel</button>
+            <button type="button" className="pe-btn sm primary" disabled={busy || !crop || Boolean(unchanged)} onClick={apply}>
+              {busy ? 'Saving…' : 'Save as new image'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/media/MediaLibrary.tsx

@@ -0,0 +1,295 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { actions } from 'astro:actions';
+import type { Media } from '../../lib/schema';
+import { mediaThumb, mediaUrl, uploadFile, uploadImage } from '../editor/imaging';
+import { CropModal } from './CropModal';
+
+// The media library: live-filtered tile grid, a detail drawer for the
+// selected asset (alt text auto-saves on blur), and upload via button or
+// drag-and-drop anywhere on the page.
+
+const fmtSize = (b: number) => (b > 1024 * 1024 ? `${(b / 1024 / 1024).toFixed(1)} MB` : `${Math.round(b / 1024)} KB`);
+const fmtFormat = (mime: string) => (mime.split('/')[1] ?? mime).replace('+xml', '');
+const fmtVariants = (n: number) => (n === 0 ? '—' : n === 1 ? '1 size' : `${n} sizes`);
+const fmtDate = (ts: number) =>
+  new Date(ts).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+const isCroppable = (m: Media) => m.mime !== 'image/svg+xml' && m.mime !== 'image/gif';
+
+export default function MediaLibrary({ media }: { media: Media[] }) {
+  const [items, setItems] = useState(media);
+  const [query, setQuery] = useState('');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [editing, setEditing] = useState<Media | null>(null);
+  const [altDraft, setAltDraft] = useState('');
+  const [altSaved, setAltSaved] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [error, setError] = useState('');
+  const searchRef = useRef<HTMLInputElement>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const dragDepth = useRef(0);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((m) => m.filename.toLowerCase().includes(q) || m.alt.toLowerCase().includes(q));
+  }, [items, query]);
+
+  const selected = useMemo(() => items.find((m) => m.id === selectedId) ?? null, [items, selectedId]);
+
+  useEffect(() => {
+    setAltDraft(selected?.alt ?? '');
+    setAltSaved(false);
+    setCopied(false);
+  }, [selectedId]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (editing) return;
+      const el = document.activeElement;
+      const typing =
+        el instanceof HTMLElement &&
+        (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT' || el.isContentEditable);
+      if (e.key === '/' && !typing) {
+        e.preventDefault();
+        searchRef.current?.focus();
+      }
+      if (e.key === 'Escape') {
+        // Esc in a non-empty search clears it (native for type=search); only
+        // an Esc beyond that closes the drawer.
+        if (el === searchRef.current && searchRef.current?.value) return;
+        setSelectedId(null);
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [editing]);
+
+  async function handleFiles(files: FileList | File[] | null) {
+    const list = [...(files ?? [])];
+    if (!list.length) return;
+    setUploading(true);
+    setError('');
+    try {
+      for (const f of list) {
+        // images go through the client-side optimize pipeline; documents
+        // upload as-is (the server rejects unsupported types)
+        const created = f.type.startsWith('image/') ? await uploadImage(f) : await uploadFile(f);
+        setItems((prev) => [created, ...prev]);
+        setSelectedId(created.id);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed.');
+    }
+    setUploading(false);
+  }
+
+  async function saveAlt() {
+    if (!selected || altDraft === selected.alt) return;
+    const id = selected.id;
+    const alt = altDraft;
+    const r = await actions.media.updateAlt({ id, alt });
+    if (r.error) {
+      setError('Could not save alt text.');
+      return;
+    }
+    setItems((prev) => prev.map((m) => (m.id === id ? { ...m, alt } : m)));
+    setAltSaved(true);
+    setTimeout(() => setAltSaved(false), 1600);
+  }
+
+  async function remove(m: Media) {
+    if (!confirm('Delete this image? Pages using it will show a broken image.')) return;
+    const r = await actions.media.delete({ id: m.id });
+    if (r.error) {
+      setError('Could not delete the image.');
+      return;
+    }
+    setItems((prev) => prev.filter((x) => x.id !== m.id));
+    setSelectedId((cur) => (cur === m.id ? null : cur));
+  }
+
+  async function copyUrl(m: Media) {
+    await navigator.clipboard.writeText(new URL(mediaUrl(m.key), location.origin).href);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1600);
+  }
+
+  const hasFiles = (e: React.DragEvent) => Array.from(e.dataTransfer.types).includes('Files');
+
+  return (
+    <div
+      className="ml"
+      onDragEnter={(e) => {
+        if (!hasFiles(e)) return;
+        e.preventDefault();
+        dragDepth.current += 1;
+        setDragOver(true);
+      }}
+      onDragOver={(e) => {
+        if (hasFiles(e)) e.preventDefault();
+      }}
+      onDragLeave={(e) => {
+        if (!hasFiles(e)) return;
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+          dragDepth.current = 0;
+          setDragOver(false);
+        }
+      }}
+      onDrop={(e) => {
+        if (!hasFiles(e)) return;
+        e.preventDefault();
+        dragDepth.current = 0;
+        setDragOver(false);
+        void handleFiles(e.dataTransfer.files);
+      }}
+    >
+      <div className="page-head">
+        <h1>
+          Media
+          <span className="ml-count">
+            {query.trim() ? `${filtered.length} of ${items.length}` : `${items.length} ${items.length === 1 ? 'asset' : 'assets'}`}
+          </span>
+        </h1>
+        <div className="ml-tools">
+          <div className="ml-search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+              <circle cx="11" cy="11" r="7" />
+              <path d="m20 20-3.5-3.5" />
+            </svg>
+            <input
+              ref={searchRef}
+              type="search"
+              placeholder="Filter by name or alt…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+            <kbd>/</kbd>
+          </div>
+          <button className="btn primary" type="button" disabled={uploading} onClick={() => fileRef.current?.click()}>
+            {uploading ? 'Uploading…' : 'Upload'}
+          </button>
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/*,.pdf,.zip,.txt,.csv,.md,.json,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.epub"
+            multiple
+            hidden
+            onChange={(e) => {
+              void handleFiles(e.target.files);
+              e.target.value = '';
+            }}
+          />
+        </div>
+      </div>
+
+      {error && <div className="flash error">{error}</div>}
+
+      {filtered.length === 0 ? (
+        <div className="card card-pad">
+          <p className="hint" style={{ margin: 0 }}>
+            {items.length === 0
+              ? 'No uploads yet. Drop images anywhere on this page, or use the Upload button.'
+              : 'Nothing matches that filter.'}
+          </p>
+        </div>
+      ) : (
+        <div className="ml-layout">
+          <div className="ml-grid">
+            {filtered.map((m) => (
+              <button
+                key={m.id}
+                type="button"
+                className={`ml-tile${m.id === selectedId ? ' sel' : ''}`}
+                onClick={() => setSelectedId((cur) => (cur === m.id ? null : m.id))}
+              >
+                <span className="ml-thumb">
+                  {m.mime.startsWith('image/') ? (
+                    <img src={mediaThumb(m)} alt={m.alt || m.filename} loading="lazy" />
+                  ) : (
+                    <span className="ml-filetile" aria-hidden="true">
+                      {(m.filename.split('.').pop() || 'file').toUpperCase().slice(0, 4)}
+                    </span>
+                  )}
+                </span>
+                {!m.alt && m.mime.startsWith('image/') && <span className="ml-noalt">No alt</span>}
+                <span className="ml-cap">
+                  <span className="ml-name" title={m.filename}>{m.filename}</span>
+                  <span className="ml-sub">{fmtSize(m.size)}</span>
+                </span>
+              </button>
+            ))}
+          </div>
+
+          {selected && (
+            <aside className="ml-drawer">
+              <a className="ml-big" href={mediaUrl(selected.key)} target="_blank" rel="noopener">
+                {selected.mime.startsWith('image/') ? (
+                  <img src={mediaUrl(selected.key)} alt={selected.alt || selected.filename} />
+                ) : (
+                  <span className="ml-filetile big" aria-hidden="true">
+                    {(selected.filename.split('.').pop() || 'file').toUpperCase().slice(0, 4)}
+                  </span>
+                )}
+              </a>
+              <div className="ml-dname" title={selected.filename}>{selected.filename}</div>
+              <label className="field">
+                <span>
+                  Alt text
+                  {altSaved && <em className="ml-saved">Saved ✓</em>}
+                </span>
+                <input
+                  type="text"
+                  placeholder="Describe the image…"
+                  value={altDraft}
+                  onChange={(e) => setAltDraft(e.target.value)}
+                  onBlur={() => void saveAlt()}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') e.currentTarget.blur();
+                  }}
+                />
+              </label>
+              <div className="ml-kv"><span>Dimensions</span><b>{selected.width && selected.height ? `${selected.width}×${selected.height}` : '—'}</b></div>
+              <div className="ml-kv"><span>Size</span><b>{fmtSize(selected.size)}</b></div>
+              <div className="ml-kv"><span>Format</span><b>{fmtFormat(selected.mime)}</b></div>
+              <div className="ml-kv"><span>Variants</span><b>{fmtVariants(selected.variants.length)}</b></div>
+              <div className="ml-kv"><span>Uploaded</span><b>{fmtDate(selected.createdAt)}</b></div>
+              <div className="ml-actions">
+                {isCroppable(selected) && (
+                  <button className="btn sm" type="button" onClick={() => setEditing(selected)}>Edit</button>
+                )}
+                <button className="btn sm" type="button" onClick={() => void copyUrl(selected)}>
+                  {copied ? 'Copied ✓' : 'Copy URL'}
+                </button>
+                <button
+                  className="btn sm ghost danger"
+                  type="button"
+                  style={{ marginLeft: 'auto' }}
+                  onClick={() => void remove(selected)}
+                >
+                  Delete
+                </button>
+              </div>
+            </aside>
+          )}
+        </div>
+      )}
+
+      {dragOver && <div className="ml-dropveil">Drop images to upload</div>}
+
+      {editing && (
+        <CropModal
+          media={editing}
+          onClose={() => setEditing(null)}
+          onSaved={(created) => {
+            setItems((prev) => [created, ...prev]);
+            setEditing(null);
+            setSelectedId(created.id);
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/layouts/Admin.astro

@@ -0,0 +1,119 @@
+---
+import { getRepo } from '../lib/repo';
+import { BRAND } from '../lib/brand';
+import { CONTENT } from '../lib/content';
+import '../styles/admin.css';
+
+interface Props {
+  title: string;
+  // fixed sections plus one `c:<key>` entry per configured collection
+  section: string;
+  /** lift the content max-width — for screens with a live preview that should fill large displays */
+  wide?: boolean;
+}
+const { title, section, wide = false } = Astro.props;
+
+const repo = await getRepo(Astro.locals);
+const [pages, posts, links, home] = await Promise.all([
+  repo.listPages(),
+  repo.listPosts(),
+  repo.listLinks(),
+  repo.getHomePage(),
+]);
+
+const icons: Record<string, string> = {
+  dashboard: 'M3 3h7v9H3zM14 3h7v5h-7zM14 12h7v9h-7zM3 16h7v5H3z',
+  home: 'M3 10.5 12 3l9 7.5M5 9.5V21h5v-6h4v6h5V9.5',
+  pages: 'M7 3h8l4 4v14H7zM15 3v4h4M10 12h6M10 16h6',
+  posts: 'M4 5h16M4 10h16M4 15h10M4 20h7',
+  media: 'M3 5h18v14H3zM3 15l5-5 4 4 3-3 6 6M15.5 9.5h0',
+  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',
+  tags: 'M3 12V3h9l9 9-9 9zM7.5 7.5h0',
+  users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M15 3.13a4 4 0 0 1 0 7.75',
+  settings: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6A7 7 0 0 0 19 12z',
+  design: 'M12 3c3.2 3.7 6 7 6 10.2a6 6 0 1 1-12 0C6 10 8.8 6.7 12 3zM9.5 14.5a2.5 2.5 0 0 0 5 0',
+  navigation: 'M4 6h16M4 12h10M4 18h13M19 11l3 3-3 3',
+};
+
+// one sidebar entry per configured collection, in config order
+const byCollection = new Map<string, number>();
+for (const p of posts) byCollection.set(p.collection, (byCollection.get(p.collection) ?? 0) + 1);
+const collectionItems = Object.entries(CONTENT.collections).map(([key, c]) => ({
+  key: `c:${key}`,
+  label: c.plural,
+  href: `/admin/c/${key}`,
+  icon: icons.posts,
+  count: byCollection.get(key) ?? 0,
+}));
+
+const items = [
+  { key: 'dashboard', label: 'Dashboard', href: '/admin', icon: icons.dashboard, count: null },
+  { key: 'home', label: 'Home Page', href: home ? `/admin/pages/${home.id}` : '/admin/pages', icon: icons.home, count: null },
+  { key: 'pages', label: 'Pages', href: '/admin/pages', icon: icons.pages, count: pages.length },
+  ...collectionItems,
+  { key: 'tags', label: 'Tags', href: '/admin/tags', icon: icons.tags, count: null },
+  { key: 'media', label: 'Media', href: '/admin/media', icon: icons.media, count: null },
+  { key: 'links', label: 'Links', href: '/admin/links', icon: icons.links, count: links.length },
+  { key: 'users', label: 'Users', href: '/admin/users', icon: icons.users, count: null },
+  { key: 'design', label: 'Design', href: '/admin/design', icon: icons.design, count: null },
+  { key: 'navigation', label: 'Navigation', href: '/admin/navigation', icon: icons.navigation, count: null },
+  { key: 'settings', label: 'Settings', href: '/admin/settings', icon: icons.settings, count: null },
+];
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <title>{title} · {BRAND.name} admin</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="sidebar">
+        <div class="brand">
+          <svg width="22" height="22" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
+            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="#e7e8ec" />
+            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="#ff8a4c" />
+            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="#e7e8ec" opacity="0.48" />
+          </svg>
+          <div>
+            <div class="brand-name">{BRAND.name}</div>
+            <div class="brand-sub">v{BRAND.version} · {BRAND.stack}</div>
+          </div>
+        </div>
+        {items.map((it) => (
+          <a class={`nav-item ${section === it.key ? 'active' : ''}`} href={it.href}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+              <path d={it.icon} />
+            </svg>
+            {it.label}
+            {it.count !== null && <span class="count">{it.count}</span>}
+          </a>
+        ))}
+        <div class="nav-sep" />
+        <a class="nav-item" href="/" target="_blank" rel="noopener">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c2.5 2.4 3.8 5.6 3.8 9S14.5 18.6 12 21c-2.5-2.4-3.8-5.6-3.8-9S9.5 5.4 12 3z" />
+          </svg>
+          View site
+        </a>
+        <div class="sidebar-foot">
+          Signed in · <a href="/admin/logout">Sign out</a>
+        </div>
+      </aside>
+      <div class="main">
+        <div class="topbar">
+          <div class="crumb">{BRAND.name} / <b>{title}</b></div>
+          <a class="btn sm ghost" href="/" target="_blank" rel="noopener">Open site ↗</a>
+        </div>
+        <div class={`content ${wide ? 'content-wide' : ''}`}>
+          <slot />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>