@gogitcms/design-system 0.15.0-next.3

package/README.md

@@ -0,0 +1,77 @@
+# @gogitcms/design-system
+
+The **Go·Git CMS** design system — monochrome, terminal-adjacent, desktop-first.
+Authored once against React Native primitives and consumed as source, so the
+same components render:
+
+- **natively** in the Expo mobile app (`react-native`),
+- **on the web** in the Wails desktop app and the SPA frontend (`react-native-web`).
+
+## Foundations
+
+- **`theme.ts`** — a single neutral **ink ramp** (light + dark) carries the whole
+  UI; the only chromatic tokens are the git **diff signals** (add green / del red).
+  Plus spacing (4px grid), radius (3/5/8), typography (Geist / Geist Mono), and
+  control/layout dimensions.
+- **`ThemeProvider` / `useTheme` / `useThemeMode`** — theme context following the
+  system color scheme with a manual toggle (`<ThemeToggle/>`). Hooks fall back to
+  the light theme when no provider is mounted, so components never crash in isolation.
+- **`useResponsive()`** — `{ isDesktop, isMobile, width }` from
+  `useWindowDimensions`. This is how one component picks the desktop vs mobile
+  layout on **every** platform — no CSS media queries needed. Breakpoint:
+  `DESKTOP_BREAKPOINT` (900px).
+
+## Components
+
+| Group | Components |
+|---|---|
+| Typography | `Text` (display/h1–h3/body/mono/label variants) |
+| Forms | `Button` (primary/default/ghost/danger × sm/md/lg), `IconButton`, `Input` |
+| Data display | `Card`, `Badge`, `DiffStat`, `Avatar`, `Divider`, `SectionLabel`, `NavRow` |
+| Icons | `Icon` — Lucide-style line icons, platform-split: raw `<svg>` on web, `react-native-svg` on native |
+| Layout | `Screen`, `TopBar`, `Pane`, `AppShell`, `MobileScreen`, `ThemeToggle` |
+| Templates | `ContentBrowser` — responsive CMS browser (desktop multi-pane ↔ mobile drill-down) |
+
+### Icons are platform-split
+
+`Icon.web.tsx` renders a raw `<svg>` (valid inside the react-native-web DOM);
+`Icon.tsx` uses `react-native-svg`. Bundlers resolve the right one automatically
+(Vite → `.web.tsx`, Metro → `.tsx`), so web apps never pull in `react-native-svg`
+(it's an **optional** peer dependency, needed only by native consumers).
+
+## Responsive across all three targets
+
+`ContentBrowser` is the whole story: it calls `useResponsive()` and renders
+`AppShell` (sidebar → entries → editor panes) at desktop widths or `MobileScreen`
+(drill-down list → entries → entry) below the breakpoint.
+
+```tsx
+import { ThemeProvider, ContentBrowser } from "@gogitcms/design-system";
+
+<ThemeProvider>
+  <ContentBrowser
+    workspace={{ name: "Acme Docs", initials: "AD", branch: "main", changed: 4 }}
+    sections={sections}          /* nav items with icons + counts */
+    activeNavKey={active}
+    onSelectNav={setActive}
+    entries={entries}            /* { path, status, added, removed, title, body } */
+    userInitials="ED"
+    onSignOut={signOut}
+  />
+</ThemeProvider>
+```
+
+- **Mobile app** — the viewport is always narrow → native mobile drill-down.
+- **Desktop app** — a wide window → the multi-pane power layout.
+- **SPA frontend** — switches between the two live as the browser resizes.
+
+## Fonts
+
+On the web, load Geist + Geist Mono via a `<link>` in the host page (see the apps'
+`index.html`). On native they fall back to the platform system + monospace fonts;
+add the font files via `expo-font` to get Geist on device.
+
+## Testing
+
+`pnpm test` renders the components through react-native-web in jsdom (the same
+path the web apps use), including the web `Icon`. Run from the package root.

package/css/components.css

@@ -0,0 +1,312 @@
+/* Go Git CMS — component styles for web surfaces.
+ *
+ * The companion to ../src/web/*.tsx. Those components only pick class names;
+ * every visual decision lives here so a button renders correctly from server
+ * HTML alone, with no hydration. Depends on tokens.css.
+ *
+ * Hover and press are CSS states rather than React state on purpose — the docs
+ * site ships most of these as static markup.
+ */
+
+/* ── Button ──────────────────────────────────────────────────────────────── */
+
+.ds-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  height: var(--control-md);
+  padding: 0 var(--space-4);
+  font-family: var(--font-sans);
+  font-size: var(--fs-body);
+  font-weight: var(--fw-medium);
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease-standard),
+    border-color var(--dur-fast) var(--ease-standard),
+    opacity var(--dur-fast) var(--ease-standard);
+}
+
+.ds-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.ds-btn[disabled],
+.ds-btn[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-btn--sm {
+  height: var(--control-sm);
+  padding: 0 var(--space-3);
+  font-size: var(--fs-sm);
+}
+.ds-btn--lg {
+  height: var(--control-lg);
+}
+.ds-btn--full {
+  width: 100%;
+}
+
+.ds-btn--primary {
+  background: var(--surface-inverted);
+  color: var(--text-inverted);
+}
+.ds-btn--primary:not([disabled]):hover {
+  background: var(--ink-900);
+}
+.ds-btn--primary:not([disabled]):active {
+  background: var(--ink-800);
+}
+
+.ds-btn--default {
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  border-color: var(--border-default);
+}
+.ds-btn--default:not([disabled]):hover {
+  background: var(--surface-hover);
+  border-color: var(--border-hover);
+}
+.ds-btn--default:not([disabled]):active {
+  background: var(--surface-active);
+}
+
+.ds-btn--ghost {
+  background: transparent;
+  color: var(--text-primary);
+}
+.ds-btn--ghost:not([disabled]):hover {
+  background: var(--surface-hover);
+}
+.ds-btn--ghost:not([disabled]):active {
+  background: var(--surface-active);
+}
+
+.ds-btn--danger {
+  background: transparent;
+  color: var(--diff-del-fg);
+  border-color: var(--border-default);
+}
+.ds-btn--danger:not([disabled]):hover,
+.ds-btn--danger:not([disabled]):active {
+  background: var(--diff-del-bg);
+}
+
+/* An anchor styled as a button is a button: no link underline, and no hover
+   fade, since the background shift already answers the hover. */
+a.ds-btn {
+  text-decoration: none;
+}
+a.ds-btn:hover {
+  opacity: 1;
+}
+
+/* ── Icon button ─────────────────────────────────────────────────────────── */
+
+.ds-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-md);
+  height: var(--control-md);
+  padding: 0;
+  color: var(--text-secondary);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition:
+    border-color var(--dur-fast) var(--ease-standard),
+    background var(--dur-fast) var(--ease-standard);
+}
+.ds-iconbtn:hover {
+  border-color: var(--border-hover);
+}
+.ds-iconbtn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.ds-iconbtn--sm {
+  width: var(--control-sm);
+  height: var(--control-sm);
+}
+.ds-iconbtn--bare {
+  width: auto;
+  height: auto;
+  background: none;
+  border: none;
+}
+.ds-iconbtn--bare:hover {
+  opacity: 0.6;
+}
+
+/* ── Badge ───────────────────────────────────────────────────────────────── */
+
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 18px;
+  padding: 0 6px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-mono-sm);
+  font-weight: var(--fw-medium);
+  line-height: 1;
+  white-space: nowrap;
+  border: 1px solid;
+  border-radius: var(--radius-sm);
+}
+.ds-badge--sans {
+  font-family: var(--font-sans);
+}
+.ds-badge--neutral {
+  background: var(--surface-sunken);
+  color: var(--text-secondary);
+  border-color: var(--border-subtle);
+}
+.ds-badge--add {
+  background: var(--diff-add-bg);
+  color: var(--diff-add-fg);
+  border-color: var(--diff-add-bg);
+}
+.ds-badge--del {
+  background: var(--diff-del-bg);
+  color: var(--diff-del-fg);
+  border-color: var(--diff-del-bg);
+}
+.ds-badge--strong {
+  background: var(--surface-inverted);
+  color: var(--text-inverted);
+  border-color: var(--surface-inverted);
+}
+
+/* ── Avatar ──────────────────────────────────────────────────────────────── */
+
+.ds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size: var(--fs-mono-sm);
+  font-weight: var(--fw-semibold);
+  line-height: 1;
+  color: var(--text-secondary);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+}
+
+/* ── Card ────────────────────────────────────────────────────────────────── */
+
+.ds-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+}
+.ds-card--sunken {
+  background: var(--surface-sunken);
+}
+.ds-card--interactive {
+  display: block;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color var(--dur-fast) var(--ease-standard);
+}
+.ds-card--interactive:hover {
+  border-color: var(--border-hover);
+  opacity: 1;
+}
+.ds-card--interactive:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ── Input ───────────────────────────────────────────────────────────────── */
+
+.ds-input {
+  width: 100%;
+  height: var(--control-lg);
+  padding: 0 var(--space-3);
+  font-family: var(--font-sans);
+  font-size: var(--fs-body);
+  color: var(--text-primary);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  outline: none;
+  transition: border-color var(--dur-fast) var(--ease-standard);
+}
+.ds-input:hover {
+  border-color: var(--border-hover);
+}
+.ds-input:focus {
+  border-color: var(--border-focus);
+}
+.ds-input--mono {
+  font-family: var(--font-mono);
+  font-size: var(--fs-mono);
+}
+.ds-input--sm {
+  height: var(--control-md);
+}
+
+textarea.ds-input {
+  height: auto;
+  padding: var(--space-3);
+  line-height: var(--lh-body);
+  resize: vertical;
+}
+
+select.ds-input {
+  padding: 0 var(--space-2);
+}
+
+/* ── Section label ───────────────────────────────────────────────────────── */
+
+/* The uppercase mono micro-label. Wide tracking is the brand tell — don't set
+   it in sentence case. */
+.ds-label {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  line-height: var(--lh-xs);
+  letter-spacing: var(--ls-label);
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+/* ── Divider ─────────────────────────────────────────────────────────────── */
+
+.ds-divider {
+  height: 1px;
+  border: 0;
+  margin: 0;
+  background: var(--border-subtle);
+}
+.ds-divider--vertical {
+  width: 1px;
+  height: 100%;
+  background: var(--border-default);
+}
+
+/* ── Mono metadata ───────────────────────────────────────────────────────── */
+
+/* Paths, hashes, branches, timestamps, counts. */
+.ds-meta {
+  font-family: var(--font-mono);
+  font-size: var(--fs-mono-sm);
+  line-height: var(--lh-mono-sm);
+  color: var(--text-tertiary);
+}

package/css/tokens.css

@@ -0,0 +1,212 @@
+/* Go Git CMS design tokens as CSS custom properties.
+ *
+ * This file is the CSS projection of ../src/theme.ts — the React Native theme
+ * object is still the source of truth. Every value here has a counterpart
+ * there, and __tests__/cssTokens.test.ts fails the build if the two drift.
+ * Reach for it from web surfaces that don't run react-native-web (the Astro
+ * docs site, marketing pages, e-mail templates); the SPAs and the mobile app
+ * keep consuming theme.ts directly.
+ *
+ * Monochrome by design: one neutral ink ramp carries the whole UI and the only
+ * chromatic tokens are the git diff signals.
+ */
+
+:root {
+  /* Ink ramp — 0 is paper white, 1000 is near-black */
+  --ink-0: #ffffff;
+  --ink-50: #f7f7f7;
+  --ink-100: #ededed;
+  --ink-150: #e4e4e4;
+  --ink-200: #dcdcdc;
+  --ink-300: #c9c9c9;
+  --ink-400: #a6a6a6;
+  --ink-500: #808080;
+  --ink-600: #5c5c5c;
+  --ink-700: #3d3d3d;
+  --ink-800: #242424;
+  --ink-900: #151515;
+  --ink-1000: #0a0a0a;
+
+  /* Raised surfaces sit flush with the page in light mode and lift one step in
+     dark, where a pure-black card would disappear into the background. */
+  --surface-raised: var(--ink-0);
+  /* The top bar is permanent dark chrome in both modes. */
+  --surface-topbar: #1a1a1a;
+
+  /* Git diff signals — the only permitted color */
+  --diff-add-fg: #1a7f37;
+  --diff-add-bg: #e6f4ea;
+  --diff-add-line: #addab8;
+  --diff-del-fg: #b42318;
+  --diff-del-bg: #fbeae8;
+  --diff-del-line: #f0b7b1;
+
+  color-scheme: light;
+}
+
+/* Dark is the same semantic mapping over an inverted ramp. Scope it to
+   [data-theme="dark"] (or .dark) on any container — usually <html>. */
+[data-theme="dark"],
+.dark {
+  --ink-0: #0b0b0b;
+  --ink-50: #151515;
+  --ink-100: #1e1e1e;
+  --ink-150: #242424;
+  --ink-200: #2d2d2d;
+  --ink-300: #3a3a3a;
+  --ink-400: #585858;
+  --ink-500: #808080;
+  --ink-600: #a2a2a2;
+  --ink-700: #c4c4c4;
+  --ink-800: #dcdcdc;
+  --ink-900: #ececec;
+  --ink-1000: #f4f4f4;
+
+  --surface-raised: var(--ink-50);
+  --surface-topbar: #1e1e1e;
+
+  --diff-add-fg: #3fb950;
+  --diff-add-bg: #12261a;
+  --diff-add-line: #1f5132;
+  --diff-del-fg: #f85149;
+  --diff-del-bg: #2a1615;
+  --diff-del-line: #6a2b28;
+
+  color-scheme: dark;
+}
+
+/* Semantic aliases are declared for both scopes rather than at :root alone.
+   A var() alias resolves against the element it is *declared* on, so a :root-only
+   alias keeps pointing at the light ramp whenever [data-theme] sits on a nested
+   container instead of <html>. Repeating the block makes scoped dark islands
+   (a dark top bar over a light page) work. */
+:root,
+[data-theme="dark"],
+.dark {
+  /* Text */
+  --text-primary: var(--ink-1000);
+  --text-secondary: var(--ink-600);
+  --text-tertiary: var(--ink-500);
+  --text-disabled: var(--ink-400);
+  --text-inverted: var(--ink-0);
+  --text-link: var(--ink-1000);
+
+  /* Surfaces */
+  --surface-page: var(--ink-0);
+  --surface-sunken: var(--ink-50);
+  --surface-hover: var(--ink-50);
+  --surface-active: var(--ink-100);
+  --surface-inverted: var(--ink-1000);
+  --surface-overlay: rgba(10, 10, 10, 0.45);
+
+  /* Borders — hairlines carry structure, not shadows */
+  --border-subtle: var(--ink-100);
+  --border-default: var(--ink-200);
+  --border-hover: var(--ink-400);
+  --border-strong: var(--ink-1000);
+  --border-focus: var(--ink-1000);
+  /* Active column/tab rule. Mid-gray in both modes: it sits directly under the
+     dark top bar, where near-black merges into the bar and white glares. */
+  --border-active: var(--ink-600);
+
+  /* Selection */
+  --selection-bg: var(--ink-1000);
+  --selection-fg: var(--ink-0);
+}
+
+:root {
+  /* Type — Geist for UI and prose, Geist Mono for every technical string:
+     paths, hashes, branch names, timestamps, code, uppercase micro-labels. */
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
+
+  --fw-light: 300;
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+
+  --fs-display: 40px;
+  --lh-display: 44px;
+  --fs-h1: 28px;
+  --lh-h1: 34px;
+  --fs-h2: 22px;
+  --lh-h2: 28px;
+  --fs-h3: 17px;
+  --lh-h3: 24px;
+  --fs-body: 14px;
+  --lh-body: 21px;
+  --fs-body-lg: 16px;
+  --lh-body-lg: 24px;
+  --fs-sm: 13px;
+  --lh-sm: 18px;
+  --fs-xs: 11px;
+  --lh-xs: 16px;
+  --fs-mono: 13px;
+  --lh-mono: 20px;
+  --fs-mono-sm: 12px;
+  --lh-mono-sm: 18px;
+
+  --ls-tight: -0.4px;
+  --ls-normal: 0;
+  --ls-wide: 0.3px;
+  --ls-label: 0.9px;
+
+  /* Spacing — 4px base grid */
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+
+  /* Radius — small and sharp; nothing rounder than a pill */
+  --radius-0: 0;
+  --radius-sm: 3px;
+  --radius-md: 5px;
+  --radius-lg: 8px;
+  --radius-pill: 999px;
+
+  /* Control heights */
+  --control-sm: 28px;
+  --control-md: 34px;
+  --control-lg: 40px;
+
+  /* Layout dims */
+  --sidebar-w: 260px;
+  --column-w: 300px;
+  --topbar-h: 48px;
+  --container: 1200px;
+
+  /* Elevation — overlays only. Cards are defined by a border. */
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06);
+  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.1);
+  --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.14);
+
+  /* Motion — fast and restrained, no overshoot */
+  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
+  --dur-fast: 90ms;
+  --dur-base: 150ms;
+  --dur-slow: 240ms;
+
+  /* Focus — a crisp near-black ring offset by the page color, never a glow */
+  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--ink-1000);
+
+  /* Responsive breakpoint, mirroring DESKTOP_BREAKPOINT in theme.ts. Custom
+     properties can't be used in a media query, so this is documentation for
+     humans; the queries themselves hard-code 900px. */
+  --desktop-breakpoint: 900px;
+}
+
+::selection {
+  background: var(--selection-bg);
+  color: var(--selection-fg);
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@gogitcms/design-system",
+  "version": "0.15.0-next.3",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",
+  "exports": {
+    ".": "./src/index.ts",
+    "./web": "./src/web/index.ts",
+    "./css/tokens.css": "./css/tokens.css",
+    "./css/components.css": "./css/components.css",
+    "./package.json": "./package.json",
+    "./*": "./*"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/go-git-cms/gogitcms.git",
+    "directory": "packages/design-system"
+  },
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.20.1",
+    "@types/react": "^19.0.0",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-native-web": "^0.21.2",
+    "typescript": "^5.5.4"
+  },
+  "files": [
+    "src",
+    "css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}