mirror of
https://github.com/awizemann/scarf.git
synced 2026-05-08 02:14:37 +00:00
Alan Wizemann
8a2d89654b
Add a typed design-system package (Packages/ScarfDesign) with rust-tone color tokens, type scale, spacing/radius tokens, ScarfPageHeader and component primitives (ScarfCard, ScarfBadge, ScarfTextField, ScarfSectionHeader, ScarfDivider, four button styles). Both Mac and iOS targets `import ScarfDesign`. Sidebar redesigned per design/static-site/ui-kit/Sidebar.jsx — glassy translucent background, 224 px width, app-icon header with server pill, custom tokenized rows with rust accent-tint when active, footer with live Hermes-running indicator (wired to ServerLiveStatusRegistry). 14 mockup-backed feature screens redesigned: Settings, Dashboard, Sessions, Memory, Chat (visual sweep), Activity, Cron, Insights, MCPServers, Health, Logs, Tools (full); Projects light-touch. Non-mockup features inherit rust through AccentColor.colorset repoint. Mac AppIcon.appiconset replaced with the rust set. AccentColor.colorset repointed to BrandRust hex (light + dark variants). Visual sweep: every multi-button page-header / action-bar cluster now wraps in .fixedSize(horizontal: true, vertical: false) so labels can't wrap letter-by-letter at narrow widths (regression seen on the MCP detail pane with 4 buttons). Follow-ups landed: - Sidebar Hermes-running probe wired to per-window ServerLiveStatusRegistry (no more placeholder green). - Sessions: today filter predicate (isDateInToday(startedAt)); pill count reflects real count. Starred stays a no-op pending an upstream pinned/starred field on HermesSession. - Dashboard: Recent activity column rendered alongside Recent sessions in a ViewThatFits 2-col grid. Populated from HermesDataService.fetchRecentToolCalls(limit:) flattened to ActivityEntry. ActivityEntry gains a public memberwise init. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
53 lines
2.3 KiB
Markdown
53 lines
2.3 KiB
Markdown
# Scarf Design System — static site
|
|
|
|
A self-contained, offline-friendly site that browses every artifact in the
|
|
Scarf design system. Open `index.html` directly in any browser — no server,
|
|
no build step.
|
|
|
|
## What's here
|
|
|
|
```
|
|
static-site/
|
|
├── index.html ← landing page, links into everything
|
|
├── colors_and_type.css ← shared design tokens (referenced everywhere)
|
|
│
|
|
├── ui-kit/ ← interactive macOS UI kit
|
|
│ ├── index.html ← click-thru of every screen in the app
|
|
│ └── *.jsx ← React components (Sidebar, Chat, Dashboard…)
|
|
│
|
|
├── tokens/ ← design-system cards
|
|
│ ├── _preview.css ← shared card styling
|
|
│ ├── colors-*.html ← brand / neutrals / semantic / tool-kinds
|
|
│ ├── type-*.html ← display / body / mono
|
|
│ ├── spacing-*.html ← scale / radii / shadows
|
|
│ ├── components-*.html ← buttons / forms / sidebar / cards / chat / composer / tool-call
|
|
│ ├── iconography.html
|
|
│ └── brand-mark.html
|
|
│
|
|
└── assets/ ← icons, brand artwork
|
|
```
|
|
|
|
## How to use it
|
|
|
|
- **Browse offline**: double-click `index.html`. Everything renders locally;
|
|
the only network dependency is Google Fonts (Inter + JetBrains Mono).
|
|
- **Host as a site**: drop the whole folder onto any static host (Netlify,
|
|
GitHub Pages, S3, your own nginx). Nothing needs building.
|
|
- **Embed in a doc**: link individual cards directly, e.g.
|
|
`static-site/tokens/colors-brand.html`.
|
|
- **Show the macOS app**: `static-site/ui-kit/index.html` runs the full
|
|
React-based interactive kit (single self-contained file — works from
|
|
`file://`, no server needed). The traffic-light corner makes it look like
|
|
the real app. Source components live alongside as `*.jsx` for editing —
|
|
re-bundle into `index.html` when you change them.
|
|
|
|
## Notes
|
|
|
|
- The kit's `index.html` is a self-contained bundle — React, Babel, Lucide
|
|
and every component are inlined, so it works from `file://` with no
|
|
network. The original split-file source is preserved as
|
|
`ui-kit/index.source.html` next to the `.jsx` files for editing.
|
|
- The font import in `colors_and_type.css` (`fonts.googleapis.com`) is the
|
|
only other network call. Replace with locally-served WOFF2 if you need
|
|
airgapped use.
|