mirror of
https://github.com/JohnRiceML/clawport-ui.git
synced 2026-08-14 00:47:50 +00:00
JohnRiceMLandClaude Opus 4.6
32f5b403b0
Design System: - Apple HIG typography scale (caption2 → large-title) - 4px spacing grid (space-1 → space-16) - 7 new CSS tokens across all 5 themes - Interactive state CSS classes (hover-lift, btn-primary, focus-ring, etc.) - Shimmer skeleton, slideDown, bounce-dot animations - Light theme polish: deeper shadows, better accent contrast Navigation: - Lucide icons replacing emoji in sidebar - Cmd+K global search command palette (agents, pages, crons) - Breadcrumbs component for page context - Sidebar wrapper orchestrating desktop + mobile - Mobile hamburger menu with spring-animated slide-out - Cron error dot badge on nav item Manor Map + Agent Detail: - Polished agent nodes: tinted squircle emoji, status dots with border ring - Smooth bezier edges, selected agent edge highlighting - Map legend (top-right), skeleton loading state - Detail panel: hierarchy navigation, cron status, dual CTAs - Agent detail: single-column scrollable layout, card sections - SOUL.md viewer with copy button, voice ID copy Chat: - iMessage-style agent list with gradient avatars, online dots - Desktop + mobile variants with responsive master/detail - Sticky header with agent info, profile link, clear button - Time gap timestamps between messages - Typing indicator (bouncing dots) before first stream token - Thin blinking cursor replacing block cursor - Code blocks with copy button, URL auto-linking - Rounded input capsule with SVG icons Cron + Memory: - Sticky header with summary counts, spinning refresh, auto-update timer - Filter pills with ARIA tablist, keyboard cycling - Expandable cron rows with colored borders, error tinting, copy - Memory: 260px sidebar with search, file icons, arrow key nav - Content header with breadcrumb path, copy + download buttons - Mobile master/detail pattern with back button Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
25 lines
1.7 KiB
TypeScript
25 lines
1.7 KiB
TypeScript
// Semantic style objects for TypeScript components
|
|
// Use when CSS classes aren't practical (dynamic styles)
|
|
|
|
export const typography = {
|
|
largeTitle: { fontSize: 'var(--text-large-title)', fontWeight: 'var(--weight-bold)', letterSpacing: 'var(--tracking-tight)', lineHeight: 'var(--leading-tight)' },
|
|
title1: { fontSize: 'var(--text-title1)', fontWeight: 'var(--weight-bold)', letterSpacing: 'var(--tracking-tight)', lineHeight: 'var(--leading-tight)' },
|
|
title2: { fontSize: 'var(--text-title2)', fontWeight: 'var(--weight-semibold)', letterSpacing: 'var(--tracking-normal)', lineHeight: 'var(--leading-snug)' },
|
|
title3: { fontSize: 'var(--text-title3)', fontWeight: 'var(--weight-semibold)', letterSpacing: 'var(--tracking-normal)', lineHeight: 'var(--leading-snug)' },
|
|
body: { fontSize: 'var(--text-body)', fontWeight: 'var(--weight-regular)', lineHeight: 'var(--leading-normal)' },
|
|
subheadline: { fontSize: 'var(--text-subheadline)', fontWeight: 'var(--weight-regular)', lineHeight: 'var(--leading-normal)' },
|
|
footnote: { fontSize: 'var(--text-footnote)', fontWeight: 'var(--weight-regular)', lineHeight: 'var(--leading-normal)' },
|
|
caption1: { fontSize: 'var(--text-caption1)', fontWeight: 'var(--weight-regular)', lineHeight: 'var(--leading-normal)' },
|
|
caption2: { fontSize: 'var(--text-caption2)', fontWeight: 'var(--weight-regular)', lineHeight: 'var(--leading-normal)' },
|
|
sectionHeader: { fontSize: 'var(--text-caption2)', fontWeight: 'var(--weight-semibold)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase' as const, color: 'var(--text-tertiary)' },
|
|
} as const
|
|
|
|
export const layout = {
|
|
sidebarWidth: 220,
|
|
detailPanelWidth: 360,
|
|
chatSidebarWidth: 300,
|
|
memorySidebarWidth: 260,
|
|
maxContentWidth: 1200,
|
|
headerHeight: 52,
|
|
} as const
|