@peasant-labs/fairtrade 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 peasant-labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# fairtrade design system
+
+**fairtrade** is an **open-source** design system for building agent products of every kind:
+orchestration, analysis, transcripts, pr review, and more. it ships design tokens, a documented
+component library, and the rules that keep every screen aligned, glanceable and readable, in a locked
+identity (amber on near-black + warm paper, atkinson hyperlegible mono, lowercase chrome, square
+corners). built with **vite 8 + react 19 + tailwind v4**, run with **pnpm**.
+
+this repo is the single-page presentation site: a wise.design-style page that reads top to bottom, with
+an ascii splash at the top, the documented system in the middle, and a live "in use" showcase at the end
+across three example apps (an analytics dashboard, a commons, and a transcript viewer) that exercise the
+system's range. it ships a component library (`src/ui/*`) with storybook, and is **neuroinclusive by
+default** (the dyslexia / adhd / autism / low-vision rules are baked into the tokens, not a toggle).
+
+## run
+
+```bash
+pnpm install
+pnpm dev              # the presentation (http://localhost:5180, or next free port)
+pnpm build           # contrast gate + static dist/
+pnpm preview         # serve dist/
+pnpm storybook       # the component library (http://localhost:6006)
+pnpm build-storybook # compile every component + story
+```
+
+- toggle dark/light top-right, or deep-link a theme with `?theme=light`.
+- the in-page comment tool is **dev-only** (it posts to a dev-server endpoint); `?fb=off` hides it in dev.
+  `?cap` is a review-only capture mode that shrinks the full-screen sections so a whole tall section fits
+  one screenshot.
+
+## the page
+
+1. **hero** (`#top`) - an ascii wheat **video** (the crop). it seeds the next screen.
+2. **brand** (`#brand`) - a dim ascii **soil** field with **roots** fanning down (narrow at the top,
+   full width at the bottom) into a white **fairtrade** wordmark; soil, roots and wordmark each reveal
+   on scroll-in.
+3. **philosophy** (`#manifesto`) - one statement over a cursor-spotlight that reveals a tiled field of
+   ascii portraits behind the text.
+4. **documentation** - foundations, components and "using the system", in three groups, with a sticky
+   on-this-page rail and scroll-spy. the header is gated by zone (hidden over the splash, shown across
+   the docs).
+5. **in use** (`#inuse`) - a full-screen workspace whose sticky app-switcher flips between live demos of
+   the three apps (transcript viewer, village commons, peasant code-map + analytics).
+
+## at a glance
+
+- **themes:** dark (default, deep near-black) + light (genuinely white, warm paper); token-driven; amber
+  is a scarce accent.
+- **type:** atkinson hyperlegible mono (display + chrome + code) + atkinson hyperlegible (reading prose).
+- **icons:** lucide-react for all functional ui; brand marks are inline `<symbol>`s. procedural + filtered
+  **ascii imagery** is an intentional centerpiece on a few low-traffic display surfaces only.
+- **standardized:** one 4/8 spacing scale, one type scale (16px floor), one control height, one border
+  token, radius 0.
+
+## structure
+
+- `src/App.jsx` - composition root: nav, the hero/brand splash, philosophy, the docs (sticky rail +
+  scroll-spy), and the in-use showcase.
+- `src/sections-react/*.jsx`, `src/DocSections.jsx`, `src/ComponentSections.jsx` - the documented sections.
+- `src/ui/*` - the typed component library; storybook is the source of truth (`pnpm storybook`). tables
+  are tanstack-table-backed (`DataTable`), charts are recharts-backed (`ChartBar` / `ChartLine` /
+  `Sparkline`), and provider logos use `BrandMark` - all wrapped so the engines match the system.
+- `src/mockups/inuse/*` - the in-use app demos (hand-rolled svg visualizations).
+- `src/index.css` - the single source of truth for design tokens and styling.
+- `src/effects.jsx` - the ascii filters (wheat video, soil, roots, portrait thumbnails).
+- `scripts/*` - the gate and qa scripts.
+- machine-readable for agents: `AGENTS.md` (hard rules + commands), `llms.txt`, and generated
+  `public/tokens.json` (w3c dtcg) + `public/components.json` + `packages/tokens/*` (kept fresh by
+  `pnpm gen:check`).
+
+## gates / ci
+
+`pnpm build` regenerates the machine-readable artifacts then runs a pure-js wcag contrast gate (both
+themes) before building; `pnpm gen:check` fails if those artifacts or the token package drift from
+their sources.
+`scripts/validate.mjs` is a 20-check puppeteer interactive gate (icons, single h1, heading outline,
+copy-token labels, decorative icons `aria-hidden`, scroll-spy, zone header gating, command palette, dialog
+focus-trap, theme toggle, 0 overflow at 360/390/768/1024/1440, reduced-motion, no console errors).
+`build-storybook` + `scripts/sbsmoke.mjs` load every story (incl. `play()`). all run in ci
+([`.github/workflows/ci.yml`](./.github/workflows/ci.yml)); `deploy.yml` publishes to github pages with
+storybook nested under `dist/storybook/`.
+
+## license
+
+open source under the [MIT license](./LICENSE).

package/dist/lib/README.md

@@ -0,0 +1,13 @@
+# @peasant-labs/fairtrade
+
+Generated package artifacts for the private fairtrade design-system library.
+
+Import CSS explicitly:
+
+```css
+@import "@peasant-labs/fairtrade/tokens.css";
+@import "@peasant-labs/fairtrade/base.css";
+@import "@peasant-labs/fairtrade/components.css";
+```
+
+Import React UI from `@peasant-labs/fairtrade/ui`.

package/dist/lib/base.css

@@ -0,0 +1,48 @@
+/* @peasant-labs/fairtrade — base styles.
+   GENERATED by scripts/gen-llm-artifacts.mjs. Import after tokens.css and before components.css.
+   This is the consumer-safe base subset from src/index.css with Tailwind @apply resolved to
+   token-backed CSS custom properties. */
+html { scroll-padding-top: var(--nav-h); overscroll-behavior-y: none; }
+body {
+  margin: 0;
+  background: var(--canvas);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  text-align: start;
+  -webkit-font-smoothing: antialiased;
+}
+*, *::before, *::after { box-sizing: border-box; }
+h1, h2, h3 {
+  margin: 0;
+  color: var(--ink-strong);
+  font-family: var(--font-display);
+  font-weight: 700;
+  line-height: var(--lh-tight);
+  text-transform: lowercase;
+}
+p { margin: 0; }
+p, .turn .body, .empty p, .prose {
+  letter-spacing: var(--tracking-prose);
+  word-spacing: var(--word-spacing-prose);
+  max-inline-size: var(--measure-prose);
+}
+.mono, code, pre, .tnum, .kbd, .bullets li, [data-tabular] {
+  letter-spacing: 0;
+  word-spacing: normal;
+}
+em, i { font-style: normal; font-weight: 600; }
+:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
+a { color: var(--amber); text-decoration: none; }
+a.link, .prose a { text-decoration: underline dotted; text-underline-offset: 3px; }
+a.link:hover, a.link:focus-visible, .prose a:hover { text-decoration-style: solid; }
+section { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .01ms !important;
+  }
+}