reviewzy 0.2.0 → 0.3.0

package/src/dashboard/static/dashboard.css

@@ -2,17 +2,17 @@
    reviewzy — dashboard page styles
    ============================================================ */
 
-/* ---- Page shell (navbar shell per cloudy-ui) ---- */
+/* The one override that retunes the column: the navbar's card and inner
+   column, the page width and this shell all read it. */
+:root { --page-w: 1400px; }
+
+/* ---- Page shell (navbar shell) ---- */
 .app-shell { min-height: 100vh; display: flex; flex-direction: column; }
-.main { padding: var(--space-10) var(--space-12); max-width: 1400px; margin: 0 auto; width: 100%; }
+.main { padding: var(--space-10) var(--space-8); max-width: var(--page-w); margin: 0 auto; width: 100%; }
 
 /* ---- Page header: the eyebrow / title / lede triplet (login/editor pages) ---- */
-.page-header { margin-bottom: var(--space-8); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
-.page-eyebrow { color: var(--accent); margin-bottom: var(--space-2); }
-.page-title { font: 550 var(--text-2xl)/1.15 var(--font-sans); color: var(--text); letter-spacing: -0.02em; margin-bottom: var(--space-3); }
-.page-lede { font-size: var(--text-base); color: var(--text-dim); max-width: 540px; }
-/* The entries header is just the title plus the total count, no eyebrow or lede. */
-.page-count { font-size: var(--text-sm); color: var(--text-dim); }
+.page-eyebrow { color: var(--accent-text); margin-bottom: var(--space-2); }
+.page-lede { font-size: var(--t-3); color: var(--text-3); max-width: 540px; }
 
 /* ---- Filter form ---- */
 .filters { display: grid; grid-template-columns: minmax(0, 2fr) 200px 200px; gap: var(--space-3); align-items: end; margin-bottom: var(--space-8); }
@@ -21,43 +21,20 @@
 /* ---- Entries region ---- */
 /* The loading strip is hidden until htmx marks the request in flight (hx-indicator adds the
    .htmx-request class); it sits beside the swap target, so a swap never removes it. */
-#entries-loading { display: none; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); padding: var(--space-2) 0; }
+#entries-loading { display: none; align-items: center; gap: var(--space-2); font-size: var(--t-2); color: var(--text-3); padding: var(--space-2) 0; }
 #entries-loading.htmx-request { display: flex; }
-/* The spinner reuses the @keyframes spin components.css ships for .btn-loading. */
-.spinner {
-  width: 12px; height: 12px;
-  border: 2px solid var(--line-strong);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  flex-shrink: 0;
-}
 
 /* ---- Partial state ---- */
 .partial-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
-.partial-count { font-size: var(--text-sm); color: var(--text-dim); }
-
-/* ---- Screen-reader-only ---- */
-/* Present in the DOM and the accessibility tree, absent from layout, and never focusable. */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
+.partial-count { font-size: var(--t-2); color: var(--text-3); }
 
 /* ---- Project groups ---- */
 .project-group { margin-bottom: var(--space-10); }
 .project-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
-.project-name { font: 500 var(--text-lg)/1.2 var(--font-mono); color: var(--text); letter-spacing: -0.01em; }
+.project-name { font: 500 var(--t-5)/1.2 var(--font-mono); color: var(--text); letter-spacing: -0.01em; }
 .batch { margin-bottom: var(--space-6); }
 .batch-header { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
-.batch-meta { font: 400 var(--text-xs)/1 var(--font-sans); color: var(--text-faint); }
+.batch-meta { font: 400 var(--t-2)/1 var(--font-sans); color: var(--text-4); }
 
 /* ---- Entry table cells ----
    The table lays out fixed with a colgroup so the title column takes the remainder and the row
@@ -75,7 +52,7 @@
 .entry-title {
   flex: 1 1 auto;
   min-width: 0;
-  font: 450 var(--text-base)/1.4 var(--font-sans);
+  font: 400 var(--t-3)/1.4 var(--font-sans);
   color: var(--text);
   white-space: nowrap;
   overflow: hidden;
@@ -83,14 +60,14 @@
 }
 .entry-filer {
   flex-shrink: 0;
-  font-size: var(--text-xs);
-  color: var(--text-faint);
+  font-size: var(--t-2);
+  color: var(--text-4);
   white-space: nowrap;
 }
 .cell-file {
   font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--text-faint);
+  font-size: var(--t-2);
+  color: var(--text-4);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -101,103 +78,53 @@
    .htmx-request while the request is in flight, and pointer-events drops the duplicate click a
    double-click would otherwise fire. */
 .htmx-request { pointer-events: none; }
-/* The cloudy-ui custom checkbox: an appearance:none box on the sunk plane, accent-filled with a
-   clip-path check when checked. The select-all also takes a dash in its indeterminate state (a
-   partially selected batch), which the native accent-color box could not express. */
-.cell-select input[type="checkbox"],
-.batch-header .select-all {
-  width: 15px;
-  height: 15px;
-  appearance: none;
-  background: var(--bg-sunken);
-  border: 1px solid var(--line);
-  border-radius: calc(var(--radius) * 0.5);
-  cursor: pointer;
-  flex-shrink: 0;
-  position: relative;
-  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
-}
-.cell-select input[type="checkbox"]:hover,
-.batch-header .select-all:hover { border-color: var(--line-strong); }
-.cell-select input[type="checkbox"]:checked,
-.batch-header .select-all:checked,
-.cell-select input[type="checkbox"]:indeterminate,
-.batch-header .select-all:indeterminate {
-  background: var(--accent);
-  border-color: var(--accent);
-}
-.cell-select input[type="checkbox"]:checked::after,
-.batch-header .select-all:checked::after {
-  content: '';
-  position: absolute;
-  inset: 3px;
-  background: var(--text-on-accent);
-  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-}
-.cell-select input[type="checkbox"]:indeterminate::after,
-.batch-header .select-all:indeterminate::after {
-  content: '';
-  position: absolute;
-  left: 3px;
-  right: 3px;
-  top: 50%;
-  height: 2px;
-  transform: translateY(-50%);
-  background: var(--text-on-accent);
-  border-radius: 1px;
-}
-.cell-actions { white-space: nowrap; }
-.cell-actions .btn + .btn { margin-left: var(--space-2); }
+.cell-actions { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1); }
 .table-wrap tbody td.cell-actions { padding-left: var(--space-1); padding-right: var(--space-1); }
 .batch-bar {
   display: flex;
   align-items: center;
   margin-bottom: var(--space-4);
-  /* Sticks just below the 56px navbar so the approve button stays reachable while rows scroll
+  /* Sticks just below the navbar so the approve button stays reachable while rows scroll
      under it; the background and z-index stop table rows from showing through the bar. */
   position: sticky;
-  top: 56px;
+  top: var(--navbar-h);
   z-index: 10;
   padding: var(--space-2) 0;
   background: var(--bg);
 }
-.batch-header .select-all { align-self: center; }
+.batch-header .checkbox-label { align-self: center; }
 /* ---- Collapsible project sections and batches ----
    The chevron points down expanded and turns when collapsed; the state is applied by dashboard.js
    from localStorage, so the server ships everything open and the viewer's choice re-applies. */
 .collapse-toggle { align-self: center; }
-.collapse-toggle svg { transition: transform var(--dur-fast) var(--ease); }
+.collapse-toggle svg { transition: transform var(--dur-tint) var(--ease); }
 .collapse-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
 .project-header .collapse-toggle, .batch-header .collapse-toggle { margin-left: auto; }
 .notice-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
 
-/* ---- Diff view: the anchored snippet vs the entry's text, mono on sunken, anchor distinct ---- */
+/* ---- Diff view: the anchored snippet vs the entry's text, mono on the well, anchor distinct ---- */
 .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-8); }
 @media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; } }
 .diff-code {
-  font: 400 var(--text-sm)/1.6 var(--font-mono);
-  background: var(--bg-sunken);
+  font: 400 var(--t-2)/1.6 var(--font-mono);
+  background: var(--well);
   border: 1px solid var(--line);
-  border-radius: var(--radius);
+  border-radius: var(--r-1);
   padding: var(--space-4);
   white-space: pre-wrap;
   word-break: break-word;
-  color: var(--text-muted);
+  color: var(--text-2);
   margin: 0;
 }
 .diff-line { display: block; }
 .diff-anchor {
-  background: var(--accent-soft);
+  background: var(--accent-quiet);
   border-left: 2px solid var(--accent);
   color: var(--text);
   padding-left: var(--space-2);
 }
 
-/* ---- Empty states ---- */
-.empty-state { text-align: center; padding: var(--space-12) var(--space-6); }
-.empty-icon { margin: 0 auto var(--space-4); width: 32px; height: 32px; color: var(--text-faint); display: flex; align-items: center; justify-content: center; }
-.empty-state h3 { font: 500 var(--text-lg)/1.3 var(--font-sans); color: var(--text); margin-bottom: var(--space-2); }
-.empty-state p { font-size: var(--text-sm); color: var(--text-dim); max-width: 420px; margin: 0 auto var(--space-4); }
+/* ---- Empty state actions: the shipped .empty-state lays out one button, this row holds two ---- */
 .empty-actions { display: flex; gap: var(--space-2); justify-content: center; }
 
 /* ---- Error box (cloned from #error-box by dashboard.js) ---- */
@@ -205,7 +132,7 @@
 .callout-actions { margin-top: var(--space-2); }
 
 /* ---- Entry editor ---- */
-/* The one live region, kept out of sight by the shared .visually-hidden utility above. */
+/* The one live region, kept out of sight by the shipped .sr-only utility. */
 .editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
 .editor-main { min-width: 0; }
 .editor-rail { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: var(--space-8); }
@@ -221,32 +148,32 @@
 #editor-text { font-family: var(--font-mono); }
 
 /* ---- Editor prev/next rails ----
-   One full-height fixed strip per side, below the 56px navbar, so the previous and next entries are
-   a single click away while reading. The strip sits inside the 48px page padding, clear of content. */
+   One full-height fixed strip per side, below the navbar, so the previous and next entries are
+   a single click away while reading. The strip sits inside the page's inline padding, clear of content. */
 .editor-nav-btn {
   position: fixed;
-  top: 56px;
+  top: var(--navbar-h);
   bottom: 0;
   width: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-dim);
+  color: var(--text-3);
   text-decoration: none;
   z-index: 40;
-  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+  transition: background var(--dur-tint) var(--ease), color var(--dur-tint) var(--ease);
 }
 .editor-nav-prev { left: 0; }
 .editor-nav-next { right: 0; }
-.editor-nav-btn:hover { background: var(--bg-hover); color: var(--text); }
-.editor-nav-btn.is-disabled { color: var(--text-faint); opacity: 0.4; pointer-events: none; }
+.editor-nav-btn:hover { background: var(--surface-2); color: var(--text); }
+.editor-nav-btn.is-disabled { color: var(--text-4); opacity: 0.4; pointer-events: none; }
 .editor-nav-btn svg { width: 18px; height: 18px; }
 @media (max-width: 900px) { .editor-nav { display: none; } }
 #editor-region > .callout { margin-bottom: var(--space-4); }
 #editor-region > .btn { margin-top: var(--space-4); }
 .editor-actions { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
 /* The in-flight indicator for an approve or reject from the editor: htmx's own rules fade it in. */
-.editor-actions .htmx-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
+.editor-actions .htmx-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--t-2); color: var(--text-3); }
 
 /* The notes card: the agent's row reuses the constraint row shape; the human's textarea and its
    save button sit below it. */
@@ -256,51 +183,51 @@
 /* Constraint panel: live count and placeholder checklist; the server owns the refusal. */
 .constraint-row { display: flex; gap: var(--space-3); padding: 6px 0; }
 .constraint-row + .constraint-row { border-top: 1px solid var(--line); }
-.constraint-label { flex-shrink: 0; font: 450 11px/1.4 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); width: 96px; padding-top: 2px; }
-.constraint-value { min-width: 0; color: var(--text-muted); font-size: var(--text-sm); }
-.char-count { color: var(--text-muted); font-size: var(--text-sm); }
+.constraint-label { flex-shrink: 0; font: 500 11px/1.4 var(--font-sans); letter-spacing: var(--caps); text-transform: uppercase; color: var(--text-3); width: 96px; padding-top: 2px; }
+.constraint-value { min-width: 0; color: var(--text-2); font-size: var(--t-2); }
+.char-count { color: var(--text-2); font-size: var(--t-2); }
 .char-count.over { color: var(--danger); }
 .placeholder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
 .placeholder-item { display: flex; align-items: center; gap: var(--space-2); }
-.placeholder-state { font-size: var(--text-xs); color: var(--text-dim); min-width: 52px; }
+.placeholder-state { font-size: var(--t-2); color: var(--text-3); min-width: 52px; }
 .placeholder-state.is-present { color: var(--success); }
 
 /* The context card's secondary block: the provenance rows (hash, filer, stale note) collapsed
    behind a summary, so the anchor and the agent-supplied context rows lead the card. */
 .context-secondary { margin-top: var(--space-3); }
-.context-secondary summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-dim); }
+.context-secondary summary { cursor: pointer; font-size: var(--t-2); color: var(--text-3); }
 .context-secondary .info-table { margin-top: var(--space-2); }
 
 /* Repo row link: the brand icon beside the shortened owner/repo path, linking out to the host. */
 .repo-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
-.repo-link:hover { color: var(--accent); }
-.repo-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; opacity: 0.7; }
-.placeholder-token { font: 400 var(--text-sm)/1 var(--font-mono); color: var(--text); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 6px; }
+.repo-link:hover { color: var(--accent-text); }
+.repo-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; opacity: var(--icon-dim); }
+.placeholder-token { font: 400 var(--t-2)/1 var(--font-mono); color: var(--text); background: var(--well); border: 1px solid var(--line); border-radius: var(--r-1); padding: 2px 6px; }
 
 /* Entry images: one image per row at the card's width, a remove form below each, and the
    one-file upload form closing the card. The file input flexes to whatever width remains. */
 .image-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
-.entry-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
-.image-skip { margin: 0; font-size: var(--text-xs); color: var(--text-dim); }
+.entry-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-1); }
+.image-skip { margin: 0; font-size: var(--t-2); color: var(--text-3); }
 .image-remove { margin-top: var(--space-1); }
 .image-upload { display: flex; gap: var(--space-2); align-items: center; }
 .image-upload .input { flex: 1; min-width: 0; }
 
 /* Revision history: newest first; the text clamps like the list's entry text. */
-.history-empty { font-size: var(--text-sm); color: var(--text-faint); padding: var(--space-2) 0; }
+.history-empty { font-size: var(--t-2); color: var(--text-4); padding: var(--space-2) 0; }
 .revision-list { list-style: none; margin: 0; padding: 0; }
 .revision { padding: var(--space-3) 0; }
 .revision + .revision { border-top: 1px solid var(--line); }
 .revision-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
-.revision-time { font-size: var(--text-xs); color: var(--text-faint); }
+.revision-time { font-size: var(--t-2); color: var(--text-4); }
 .revision-head .btn { margin-left: auto; }
 .revision-text {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-size: var(--text-sm);
-  color: var(--text-muted);
+  font-size: var(--t-2);
+  color: var(--text-2);
 }
 
 /* ---- Login page: the navbar shell, then one centered card ---- */

package/src/dashboard/static/dashboard.js

@@ -1,35 +1,11 @@
-// reviewzy dashboard behaviors. Load after htmx.min.js.
+// reviewzy dashboard behaviors. Loads as a module after htmx.min.js.
+// The navbar's ink, its dock state and the table header label boxes come from ui.js;
+// initTables is re-run after every htmx swap so a freshly rendered table head gets its boxes.
+import { initTables } from "./ui.js";
+
 (() => {
   "use strict";
 
-  // --- Navbar ink (cloudy-ui navbar component) ---
-  // Positions the sliding underline under the active link; re-positions on resize without animating.
-  const navbarNav = document.getElementById("navbar-nav");
-  const navbarInk = document.getElementById("navbar-ink");
-
-  function positionNavbarInk() {
-    if (!navbarNav || !navbarInk) return;
-    const active = navbarNav.querySelector(".navbar-link.active");
-    if (!active) {
-      navbarInk.style.opacity = "0";
-      return;
-    }
-    const navRect = navbarNav.getBoundingClientRect();
-    const linkRect = active.getBoundingClientRect();
-    navbarInk.style.left = `${linkRect.left - navRect.left}px`;
-    navbarInk.style.width = `${linkRect.width}px`;
-    navbarInk.style.opacity = "1";
-  }
-
-  window.addEventListener("resize", () => {
-    navbarInk.style.transition = "none";
-    positionNavbarInk();
-    requestAnimationFrame(() => {
-      navbarInk.style.transition = "";
-    });
-  });
-  requestAnimationFrame(positionNavbarInk);
-
   // --- Filter errors ---
   // A failed filter request (HTTP error or network error) replaces the list with the error box
   // from the page's #error-box template; the retry button re-submits the filter form.
@@ -307,4 +283,5 @@
 
   applyCollapseState();
   document.addEventListener("htmx:afterSwap", applyCollapseState);
+  document.addEventListener("htmx:afterSwap", initTables);
 })();

package/src/dashboard/static/icons.svg

@@ -0,0 +1,184 @@
+<svg xmlns="http://www.w3.org/2000/svg" hidden="" aria-hidden="true">
+  <!-- icon sprite. Paste this whole element into <body> as its first
+       child, then reach an icon with <use href="#i-name"/>.
+
+       Drawing contract, on every symbol: viewBox 0 0 16 16, fill none, stroke
+       currentColor, stroke-width 1.5, round caps, round joins. The round join
+       is the corner treatment: every corner in the set gets the same 0.75-unit
+       outer radius from it, so no path carries an rx of its own.
+
+       Grid: a closed shape bounds 2..14 (a circle container r 6.5 at 8,8), an
+       open stroke runs 3..13, a chevron arm is 5 on each axis, a dot is a
+       0.01-long round-capped segment. -->
+
+  <!-- marks -->
+  <symbol id="i-minus" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 8h10"/>
+  </symbol>
+  <symbol id="i-plus" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 3v10M3 8h10"/>
+  </symbol>
+  <symbol id="i-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.75 8.25L6.5 12L13.25 4"/>
+  </symbol>
+  <symbol id="i-x" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 4L12 12M12 4L4 12"/>
+  </symbol>
+
+  <!-- chevrons: arm 5 on each axis, apex 2.5 off centre -->
+  <symbol id="i-chevron-down" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 5.5L8 10.5L13 5.5"/>
+  </symbol>
+  <symbol id="i-chevron-up" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 10.5L8 5.5L13 10.5"/>
+  </symbol>
+  <symbol id="i-chevron-right" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5.5 3L10.5 8L5.5 13"/>
+  </symbol>
+  <symbol id="i-chevron-left" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10.5 3L5.5 8L10.5 13"/>
+  </symbol>
+
+  <!-- arrows: shaft 3..13, head arm 4 -->
+  <symbol id="i-arrow-right" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 8h10M9 4L13 8L9 12"/>
+  </symbol>
+  <symbol id="i-arrow-left" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13 8H3M7 4L3 8L7 12"/>
+  </symbol>
+  <symbol id="i-arrow-up" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 13V3M4 7L8 3L12 7"/>
+  </symbol>
+  <symbol id="i-arrow-down" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 3v10M4 9L8 13L12 9"/>
+  </symbol>
+
+  <!-- chrome -->
+  <symbol id="i-search" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="6.75" cy="6.75" r="4.75"/>
+    <path d="M10.5 10.5L14 14"/>
+  </symbol>
+  <symbol id="i-settings" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.5 5.5H13.5M2.5 10.5H13.5"/>
+    <circle cx="6" cy="5.5" r="1.75"/>
+    <circle cx="10" cy="10.5" r="1.75"/>
+  </symbol>
+  <symbol id="i-bell" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4.5 7.5a3.5 3.5 0 0 1 7 0v3l1.5 2h-10l1.5-2z"/>
+    <path d="M6.5 12.5a1.5 1.5 0 0 0 3 0"/>
+  </symbol>
+  <symbol id="i-user" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="5.25" r="2.5"/>
+    <path d="M3.25 13.75a4.75 4.75 0 0 1 9.5 0"/>
+  </symbol>
+  <symbol id="i-lock" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.5 7h11v6.5h-11z"/>
+    <path d="M5 7V5.25a3 3 0 016 0V7"/>
+  </symbol>
+  <symbol id="i-menu" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.5 4.5H13.5M2.5 8H13.5M2.5 11.5H13.5"/>
+  </symbol>
+  <symbol id="i-grid" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 2h4v4H2zM10 2h4v4h-4zM2 10h4v4H2zM10 10h4v4h-4z"/>
+  </symbol>
+  <symbol id="i-chart" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 13L5.5 8L8.5 11L14 3"/>
+  </symbol>
+  <symbol id="i-sun" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="8" r="3"/>
+    <path d="M8 2v1.5M8 12.5V14M2 8h1.5M12.5 8H14M4.8 4.8L3.75 3.75M11.2 4.8L12.25 3.75M4.8 11.2L3.75 12.25M11.2 11.2L12.25 12.25"/>
+  </symbol>
+  <symbol id="i-moon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14 8.8A6 6 0 1 1 7.2 2a4.8 4.8 0 0 0 6.8 6.8z"/>
+  </symbol>
+
+  <!-- files and code -->
+  <symbol id="i-folder" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 3.5h4l1.5 2H14v7H2z"/>
+  </symbol>
+  <symbol id="i-file" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M9.5 2.5H4v11h8V5z"/>
+    <path d="M9.5 2.5V5H12"/>
+  </symbol>
+  <symbol id="i-code" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5.5 4.5L2.5 8L5.5 11.5M10.5 4.5L13.5 8L10.5 11.5"/>
+  </symbol>
+  <symbol id="i-terminal" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 4.5L6.5 8L3 11.5M8.5 12H13"/>
+  </symbol>
+  <symbol id="i-console" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.5 2.5h11v11h-11z"/>
+    <path d="M5 6l2 2-2 2"/>
+    <path d="M8.5 10h2.5"/>
+  </symbol>
+
+  <!-- row actions -->
+  <symbol id="i-copy" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5.5 5.5h8v8h-8z"/>
+    <path d="M10.5 5.5V2.5h-8v8h3"/>
+  </symbol>
+  <symbol id="i-trash" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 4.5H13"/>
+    <path d="M6 4.5V2.5h4v2"/>
+    <path d="M4.5 4.5v9h7v-9"/>
+  </symbol>
+  <symbol id="i-edit" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M11.5 2.5l2 2-8 8H3.5v-2z"/>
+    <path d="M9.5 4.5l2 2"/>
+  </symbol>
+  <symbol id="i-filter" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.5 3.5h11l-4 5v4l-3 1.5V8.5z"/>
+  </symbol>
+  <symbol id="i-sort" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 4H13M3 8H9.5M3 12H6"/>
+  </symbol>
+  <symbol id="i-more" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="3.5" r="1"/><circle cx="8" cy="8" r="1"/><circle cx="8" cy="12.5" r="1"/>
+  </symbol>
+  <symbol id="i-refresh" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3.5 8A4.5 4.5 0 0 1 12.5 8"/>
+    <path d="M11 6.5L12.5 8L14 6.5"/>
+    <path d="M12.5 8A4.5 4.5 0 0 1 3.5 8"/>
+    <path d="M5 9.5L3.5 8L2 9.5"/>
+  </symbol>
+  <symbol id="i-undo" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.5 8a5.5 5.5 0 1 0 9-4.2"/>
+    <path d="M11.5 2.25v1.55H9.2"/>
+  </symbol>
+  <symbol id="i-external" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13.5 9v4.5h-11v-11H7"/>
+    <path d="M9.5 2.5H13.5V6.5"/>
+    <path d="M7.5 8.5L13.5 2.5"/>
+  </symbol>
+  <symbol id="i-download" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 2.5v8"/>
+    <path d="M4.5 7.5L8 11L11.5 7.5"/>
+    <path d="M2.5 13.5H13.5"/>
+  </symbol>
+  <symbol id="i-upload" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 11V3"/>
+    <path d="M4.5 6.5L8 3L11.5 6.5"/>
+    <path d="M2.5 13.5H13.5"/>
+  </symbol>
+
+  <!-- status: the container carries the level, the mark carries the sense -->
+  <symbol id="i-info" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="8" r="6.5"/>
+    <path d="M8 7.5v3.5"/>
+    <path d="M8 5h.01"/>
+  </symbol>
+  <symbol id="i-warning" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 2.5L14 13.5H2z"/>
+    <path d="M8 6.5v3"/>
+    <path d="M8 11.5h.01"/>
+  </symbol>
+  <symbol id="i-error" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="8" r="6.5"/>
+    <path d="M8 5v3.5"/>
+    <path d="M8 10.75h.01"/>
+  </symbol>
+  <symbol id="i-success" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="8" r="6.5"/>
+    <path d="M5 8L7 10L11 6"/>
+  </symbol>
+</svg>