@anmol-srv/sigil 0.10.3 → 0.12.0

package/src/gui/web/components.js

@@ -0,0 +1,90 @@
+/**
+ * Vanilla design-system primitives (translated from Sigil.zip's ui_kit). Each
+ * returns a DOM node. Used by the onboarding wizard so every screen is composed
+ * from the same on-brand parts: status square+word, connector cards, DB-flow
+ * rows. No framework, no build step.
+ */
+
+const E = (tag, cls, text) => {
+  const el = document.createElement(tag);
+  if (cls) el.className = cls;
+  if (text != null) el.textContent = text;
+  return el;
+};
+
+/** Status square + lowercase word. kind: ok|warn|danger|muted */
+export function statusDot(kind, word) {
+  const wrap = E('span', `status-dot ${kind}`);
+  wrap.append(E('span', 'sq'), E('span', null, word));
+  return wrap;
+}
+
+const CONNECTOR_STATUS = {
+  connected: { kind: 'ok', word: 'connected' },
+  available: { kind: 'muted', word: 'available' },
+  unavailable: { kind: 'muted', word: 'not installed' },
+  connecting: { kind: 'warn', word: 'connecting…' },
+  error: { kind: 'danger', word: 'error' },
+};
+
+/**
+ * Connector card. `onAction(id, action)` is called with action 'connect' |
+ * 'disconnect' | 'retry'. `state` overrides the derived status (e.g. while a
+ * connect is in flight pass 'connecting').
+ */
+export function connectorCard(c, onAction) {
+  const status = c.uiState || c.status;
+  const card = E('div', `connector-card ${status === 'unavailable' ? 'unavailable' : ''}`);
+  card.dataset.id = c.id;
+
+  const top = E('div', 'cc-top');
+  top.append(E('div', 'cc-name', c.label));
+  const meta = CONNECTOR_STATUS[status] || CONNECTOR_STATUS.available;
+  top.append(statusDot(meta.kind, meta.word));
+  card.append(top);
+
+  card.append(E('div', 'cc-hint', c.reason && status === 'error' ? c.reason : c.hint));
+
+  const actions = E('div', 'cc-actions');
+  if (status === 'connected') {
+    const b = E('button', 'btn danger', 'Disconnect');
+    b.type = 'button';
+    b.onclick = () => onAction(c.id, 'disconnect');
+    actions.append(b);
+  } else if (status === 'connecting') {
+    const b = E('button', 'btn', 'Connecting…');
+    b.type = 'button'; b.disabled = true;
+    actions.append(b);
+  } else if (status === 'unavailable') {
+    // no action — not installed on this machine
+  } else {
+    const b = E('button', status === 'error' ? 'btn' : 'btn primary', status === 'error' ? 'Retry' : 'Connect');
+    b.type = 'button';
+    b.onclick = () => onAction(c.id, status === 'error' ? 'retry' : 'connect');
+    actions.append(b);
+  }
+  card.append(actions);
+  return card;
+}
+
+/**
+ * A single row in the DB guided flow. phase: pending|active|done|error.
+ * Returns the row element; update via setFlowRow().
+ */
+export function dbFlowRow(id, label) {
+  const row = E('div', 'db-flow-row pending');
+  row.dataset.row = id;
+  row.append(E('span', 'step-sq'));
+  row.append(E('span', 'step-label', label));
+  row.append(E('span', 'step-detail', ''));
+  return row;
+}
+
+export function setFlowRow(container, id, { phase, detail } = {}) {
+  const row = container.querySelector(`[data-row="${id}"]`);
+  if (!row) return;
+  if (phase) row.className = `db-flow-row ${phase}`;
+  if (detail != null) row.querySelector('.step-detail').textContent = detail;
+}
+
+export { E };

package/src/gui/web/design/colors_and_type.css

@@ -0,0 +1,178 @@
+/* ============================================================
+   SIGIL DESIGN SYSTEM — colors_and_type.css
+   Dark, sharp-edged console. Blue brand mark, monospace data,
+   restrained status color. Import this file to inherit all tokens.
+   ============================================================ */
+
+/* ---- Webfonts ---------------------------------------------- */
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
+
+:root {
+  /* ========================================================
+     COLOR — cool-neutral dark ramp
+     Surfaces are layered near-black; text is a desaturated
+     white ramp. Chroma is kept extremely low (cool grey).
+     ======================================================== */
+
+  /* Backgrounds / surfaces (low → high elevation) */
+  --bg-0:        #08090b;   /* app background, deepest */
+  --bg-1:        #0b0c0e;   /* page canvas */
+  --surface-1:   #101113;   /* card / panel */
+  --surface-2:   #151618;   /* row hover, inset, raised */
+  --surface-3:   #1b1d20;   /* active / pressed surface */
+
+  /* Borders / hairlines */
+  --border-1:    #1d1f23;   /* default hairline divider */
+  --border-2:    #292c31;   /* stronger border / card edge */
+  --border-strong: #3a3e44; /* focus-adjacent, input border hover */
+
+  /* Foreground text ramp */
+  --fg-1:        #f4f5f6;   /* primary text, headings, key values */
+  --fg-2:        #a2a5ab;   /* body, secondary text */
+  --fg-3:        #74777d;   /* labels, captions, footer */
+  --fg-4:        #50535a;   /* disabled, faint meta */
+
+  /* ---- Brand (from the Sigil mark gradient) ---- */
+  --brand:       #0084ff;   /* primary blue — active, links, focus */
+  --brand-deep:  #004ce6;   /* gradient anchor / pressed */
+  --brand-light: #99d5ff;   /* gradient highlight / on-dark accents */
+  --brand-tint:  rgba(0, 132, 255, 0.12);  /* selected/active wash */
+  --brand-ring:  rgba(0, 132, 255, 0.45);  /* focus ring */
+
+  /* ---- Status (semantic, used sparingly) ---- */
+  --ok:          #3ddc84;   /* connected / healthy */
+  --ok-tint:     rgba(61, 220, 132, 0.12);
+  --warn:        #f5b544;   /* degraded / attention */
+  --warn-tint:   rgba(245, 181, 68, 0.12);
+  --danger:      #ff5a52;   /* error / disconnected */
+  --danger-tint: rgba(255, 90, 82, 0.12);
+  --info:        var(--brand);
+
+  /* ========================================================
+     TYPE — Geist (UI) + Geist Mono (data / identifiers)
+     UI copy is grotesk; anything machine-derived (pids,
+     versions, hashes, ids, durations) is monospace.
+     ======================================================== */
+  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+
+  /* Type scale (px → rem at 16px base) */
+  --text-display: 2.25rem;  /* 36 — page hero (rare) */
+  --text-h1:      1.625rem; /* 26 — page title */
+  --text-h2:      1.125rem; /* 18 — section / card value */
+  --text-h3:      1rem;     /* 16 — sub-section */
+  --text-body:    0.9375rem;/* 15 — body copy */
+  --text-sm:      0.8125rem;/* 13 — table cells, meta */
+  --text-label:   0.6875rem;/* 11 — UPPERCASE eyebrow labels */
+  --text-xs:      0.625rem; /* 10 — micro meta */
+
+  /* Weights */
+  --w-regular: 400;
+  --w-medium:  500;
+  --w-semibold:600;
+  --w-bold:    700;
+
+  /* Tracking */
+  --track-label: 0.12em;   /* uppercase eyebrows */
+  --track-tight: -0.01em;  /* large headings */
+  --track-normal: 0;
+
+  /* Line heights */
+  --lh-tight: 1.15;
+  --lh-snug:  1.35;
+  --lh-body:  1.55;
+
+  /* ========================================================
+     GEOMETRY — sharp edges. Radius is near-zero by design.
+     ======================================================== */
+  --radius-0: 0px;     /* default — sharp */
+  --radius-1: 2px;     /* inputs, badges (barely softened) */
+  --radius-2: 3px;     /* the largest we ever go */
+
+  /* Borders */
+  --bw: 1px;
+
+  /* ========================================================
+     SPACING — 4px base grid
+     ======================================================== */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 24px;
+  --sp-6: 32px;
+  --sp-7: 48px;
+  --sp-8: 64px;
+  --sp-9: 96px;
+
+  /* Layout */
+  --maxw: 1680px;          /* content max width */
+  --gutter: 32px;          /* page horizontal padding */
+  --nav-h: 64px;           /* top bar height */
+
+  /* ========================================================
+     ELEVATION — shadows are flat & subtle (console, not card UI)
+     ======================================================== */
+  --shadow-0: none;
+  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
+  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
+  --shadow-pop: 0 12px 40px rgba(0,0,0,0.6);
+
+  /* Focus */
+  --focus-ring: 0 0 0 1px var(--brand), 0 0 0 4px var(--brand-ring);
+
+  /* Motion — minimal, quick, no bounce */
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --dur-1: 90ms;
+  --dur-2: 150ms;
+}
+
+/* ============================================================
+   SEMANTIC ELEMENT STYLES — opt-in helpers
+   ============================================================ */
+
+.sig-display {
+  font-family: var(--font-sans);
+  font-size: var(--text-display);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--track-tight);
+  line-height: var(--lh-tight);
+  color: var(--fg-1);
+}
+.sig-h1 {
+  font-family: var(--font-sans);
+  font-size: var(--text-h1);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--track-tight);
+  line-height: var(--lh-tight);
+  color: var(--fg-1);
+}
+.sig-h2 {
+  font-family: var(--font-sans);
+  font-size: var(--text-h2);
+  font-weight: var(--w-semibold);
+  line-height: var(--lh-snug);
+  color: var(--fg-1);
+}
+.sig-label {
+  font-family: var(--font-sans);
+  font-size: var(--text-label);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--track-label);
+  text-transform: uppercase;
+  color: var(--fg-3);
+}
+.sig-body {
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  font-weight: var(--w-regular);
+  line-height: var(--lh-body);
+  color: var(--fg-2);
+}
+.sig-mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: var(--w-medium);
+  color: var(--fg-1);
+  font-feature-settings: 'ss01' on, 'zero' on;
+}

package/src/gui/web/design/sigil-mark-mono.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <g fill="currentColor">
+    <path d="m54.7 21.7v8.9h3.3l19.9-9.7 1.4-0.1 0.1 1.8-9.7 19.9v3.1h9.6l16.2-12.7 2.7-2.8v-27.9h-28.6l-14.9 19.5z"></path>
+    <path d="m2.2 2.2v27.9l2.7 2.2 15.8 13.4h9.5v-3.2l-9.8-20 0.1-1.8 1.6 0.1 19.9 9.8h3.2v-8.9l-14.9-19.5z"></path>
+    <path d="m20.6 54.4-17.2 13.2-1.2 1.6v28.7h28.1l14.9-19.4v-9.7h-3.3l-19.9 10.5-1.5 0.1v-1.8l9.7-19.8v-3.4z"></path>
+    <path d="m54.7 68.8v9.7l14.9 19.4h28.7v-28.7l-19.1-14.8h-9.5v3.3l9.7 19.9-0.1 1.7h-1.4l-19.7-10.5z"></path>
+  </g>
+</svg>

package/src/gui/web/design/sigil-mark.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <linearGradient id="sig1" x1="54.74" x2="98.29" y1="23.07" y2="10.4" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#99D5FF" offset="0"></stop>
+    <stop stop-color="#0084FF" offset=".3602"></stop>
+    <stop stop-color="#004CE6" offset="1"></stop>
+  </linearGradient>
+  <linearGradient id="sig2" x1="1.691" x2="45.24" y1="10.02" y2="32.95" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#005CE6" offset=".3602"></stop>
+    <stop stop-color="#0084FF" offset=".7432"></stop>
+    <stop stop-color="#C9E7FF" offset="1"></stop>
+  </linearGradient>
+  <linearGradient id="sig3" x1="2.223" x2="45.24" y1="89.56" y2="67.06" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#005CE6" offset=".3602"></stop>
+    <stop stop-color="#0084FF" offset=".7432"></stop>
+    <stop stop-color="#C9E7FF" offset="1"></stop>
+  </linearGradient>
+  <linearGradient id="sig4" x1="54.74" x2="98.29" y1="78.41" y2="89.91" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#99D5FF" offset="0"></stop>
+    <stop stop-color="#0084FF" offset=".3602"></stop>
+    <stop stop-color="#004CE6" offset="1"></stop>
+  </linearGradient>
+  <path fill="url(#sig1)" d="m54.7 21.7v8.9h3.3l19.9-9.7 1.4-0.1 0.1 1.8-9.7 19.9v3.1h9.6l16.2-12.7 2.7-2.8v-27.9h-28.6l-14.9 19.5z"></path>
+  <path fill="url(#sig2)" d="m2.2 2.2v27.9l2.7 2.2 15.8 13.4h9.5v-3.2l-9.8-20 0.1-1.8 1.6 0.1 19.9 9.8h3.2v-8.9l-14.9-19.5z"></path>
+  <path fill="url(#sig3)" d="m20.6 54.4-17.2 13.2-1.2 1.6v28.7h28.1l14.9-19.4v-9.7h-3.3l-19.9 10.5-1.5 0.1v-1.8l9.7-19.8v-3.4z"></path>
+  <path fill="url(#sig4)" d="m54.7 68.8v9.7l14.9 19.4h28.7v-28.7l-19.1-14.8h-9.5v3.3l9.7 19.9-0.1 1.7h-1.4l-19.7-10.5z"></path>
+</svg>