@jaimevalasek/aioson 1.4.0 → 1.5.1

package/template/.aioson/skills/design/warm-craft-ui/references/components.md

@@ -0,0 +1,508 @@
+# Components — Warm Craft UI
+
+Reusable component specifications. Every component must use tokens from `design-tokens.md`. Never hardcode colors, sizes, or radii.
+
+---
+
+## Navigation
+
+### Top Bar
+```
+height: 64px
+background: var(--bg-surface)
+border-bottom: 1px solid var(--border-subtle)
+shadow: var(--shadow-xs)
+padding: 0 var(--space-6)
+display: flex; align-items: center; justify-content: space-between
+```
+
+Content slots:
+- **Left:** Logo (mark or wordmark, max-height 28px)
+- **Center:** Search bar (optional, rounded pill `var(--radius-full)`, `var(--bg-elevated)` background, max-width 480px)
+- **Right:** Notification icon + User avatar (rounded full, 36px)
+
+### Sidebar Navigation
+```
+width: 240px
+background: var(--bg-void)
+padding: var(--space-4) var(--space-3)
+border-right: 1px solid var(--border-subtle)
+```
+
+Nav item:
+```
+height: var(--control-md)  /* 40px */
+padding: 0 var(--space-3)
+border-radius: var(--radius-lg)
+font: var(--font-body), var(--text-sm), var(--weight-medium)
+color: var(--text-secondary)
+transition: var(--transition-fast)
+display: flex; align-items: center; gap: var(--space-3)
+icon: 20px, stroke-width 1.5
+
+hover:
+  background: var(--bg-elevated)
+  color: var(--text-primary)
+
+active:
+  background: var(--bg-elevated)
+  color: var(--text-heading)
+  font-weight: var(--weight-semibold)
+```
+
+Nav section label:
+```
+font: var(--font-body), var(--text-xs), var(--weight-medium)
+color: var(--text-muted)
+letter-spacing: var(--tracking-wider)
+text-transform: uppercase
+padding: var(--space-6) var(--space-3) var(--space-2)
+```
+
+### Bottom Tab Bar (mobile)
+```
+height: 56px
+background: var(--bg-surface)
+border-top: 1px solid var(--border-subtle)
+display: flex; justify-content: space-around; align-items: center
+
+tab item:
+  icon: 24px
+  label: var(--text-xs), var(--weight-medium)
+  color: var(--text-muted)
+  gap: var(--space-1)
+
+  active:
+    color: var(--accent)
+```
+
+---
+
+## Cards
+
+### Base Card
+```
+background: var(--bg-surface)
+border: 1px solid var(--border-subtle)
+border-radius: var(--radius-xl)
+padding: var(--space-6)
+shadow: var(--shadow-sm)
+transition: var(--transition-base)
+
+hover (when clickable):
+  shadow: var(--shadow-md)
+  transform: translateY(-1px)
+  border-color: var(--border-medium)
+```
+
+### Stat Card
+```
+extends: Base Card
+padding: var(--space-5) var(--space-6)
+
+number:
+  font: var(--font-display), var(--text-4xl), var(--weight-bold)
+  color: var(--text-heading)
+  letter-spacing: var(--tracking-tight)
+
+label:
+  font: var(--font-body), var(--text-sm), var(--weight-medium)
+  color: var(--text-secondary)
+  margin-top: var(--space-1)
+
+trend:
+  font: var(--font-body), var(--text-sm), var(--weight-medium)
+  color: var(--semantic-green) or var(--semantic-red)
+  includes: arrow icon + percentage
+```
+
+### Feature Card
+```
+extends: Base Card
+padding: var(--space-8)
+border-radius: var(--radius-2xl)
+
+icon area:
+  width: 48px; height: 48px
+  background: var(--accent-subtle)
+  border-radius: var(--radius-lg)
+  display: flex; align-items: center; justify-content: center
+  icon color: var(--accent)
+
+title:
+  font: var(--font-display), var(--text-xl), var(--weight-semibold)
+  color: var(--text-heading)
+  margin-top: var(--space-4)
+
+description:
+  font: var(--font-body), var(--text-base), var(--weight-normal)
+  color: var(--text-secondary)
+  line-height: var(--leading-relaxed)
+  margin-top: var(--space-2)
+```
+
+### Media Card
+```
+extends: Base Card
+padding: 0
+overflow: hidden
+border-radius: var(--radius-2xl)
+
+media:
+  width: 100%
+  aspect-ratio: 16/9 or 4/3
+  object-fit: cover
+
+body:
+  padding: var(--space-5) var(--space-6)
+
+title:
+  font: var(--font-display), var(--text-lg), var(--weight-semibold)
+  color: var(--text-heading)
+
+meta:
+  font: var(--font-body), var(--text-sm)
+  color: var(--text-secondary)
+  margin-top: var(--space-2)
+```
+
+---
+
+## Buttons
+
+### Primary Button
+```
+height: var(--control-md)
+padding: 0 var(--space-5)
+background: var(--accent)
+color: var(--accent-contrast)
+border: none
+border-radius: var(--radius-lg)
+font: var(--font-body), var(--text-sm), var(--weight-semibold)
+cursor: pointer
+transition: var(--transition-fast)
+
+hover:
+  background: var(--accent-hover)
+
+active:
+  transform: scale(0.98)
+
+disabled:
+  opacity: 0.5
+  pointer-events: none
+```
+
+### Secondary Button
+```
+extends: Primary (dimensions, font, radius)
+background: transparent
+color: var(--text-heading)
+border: 1px solid var(--border-medium)
+
+hover:
+  background: var(--bg-elevated)
+  border-color: var(--border-strong)
+```
+
+### Ghost Button
+```
+extends: Primary (dimensions, font)
+background: transparent
+color: var(--text-secondary)
+border: none
+
+hover:
+  background: var(--bg-elevated)
+  color: var(--text-heading)
+```
+
+### Large CTA (hero sections)
+```
+height: var(--control-xl)
+padding: 0 var(--space-8)
+border-radius: var(--radius-xl)
+font-size: var(--text-base)
+shadow: var(--shadow-md)
+
+hover:
+  shadow: var(--shadow-lg)
+  transform: translateY(-1px)
+```
+
+---
+
+## Forms
+
+### Text Input
+```
+height: var(--control-md)
+padding: 0 var(--space-4)
+background: var(--bg-surface)
+border: 1px solid var(--border-medium)
+border-radius: var(--radius-md)
+font: var(--font-body), var(--text-base)
+color: var(--text-heading)
+transition: var(--transition-fast)
+
+placeholder:
+  color: var(--text-muted)
+
+focus:
+  border-color: var(--accent)
+  box-shadow: 0 0 0 3px var(--accent-dim)
+  outline: none
+
+error:
+  border-color: var(--semantic-red)
+  box-shadow: 0 0 0 3px var(--semantic-red-dim)
+```
+
+### Label
+```
+font: var(--font-body), var(--text-sm), var(--weight-medium)
+color: var(--text-heading)
+margin-bottom: var(--space-2)
+display: block
+```
+
+### Helper Text
+```
+font: var(--font-body), var(--text-sm)
+color: var(--text-secondary)
+margin-top: var(--space-1)
+```
+
+### Error Message
+```
+font: var(--font-body), var(--text-sm), var(--weight-medium)
+color: var(--semantic-red)
+margin-top: var(--space-1)
+```
+
+### Textarea
+```
+extends: Text Input
+min-height: 120px
+padding: var(--space-3) var(--space-4)
+resize: vertical
+line-height: var(--leading-normal)
+```
+
+### Select
+```
+extends: Text Input
+appearance: none
+background-image: chevron-down SVG
+background-position: right var(--space-3) center
+background-repeat: no-repeat
+padding-right: var(--space-10)
+```
+
+### Checkbox / Radio
+```
+width: 20px; height: 20px
+border: 2px solid var(--border-strong)
+border-radius: var(--radius-sm) (checkbox) or var(--radius-full) (radio)
+transition: var(--transition-fast)
+
+checked:
+  background: var(--accent)
+  border-color: var(--accent)
+  color: var(--accent-contrast) (checkmark)
+```
+
+### Toggle Switch
+```
+width: 44px; height: 24px
+border-radius: var(--radius-full)
+background: var(--border-strong)
+transition: var(--transition-base)
+
+thumb:
+  width: 20px; height: 20px
+  border-radius: var(--radius-full)
+  background: white
+  shadow: var(--shadow-sm)
+
+checked:
+  background: var(--accent)
+  thumb: translate right
+```
+
+---
+
+## Data Display
+
+### Table
+```
+width: 100%
+border-collapse: separate
+border-spacing: 0
+
+header row:
+  background: var(--bg-elevated)
+  font: var(--font-body), var(--text-sm), var(--weight-semibold)
+  color: var(--text-heading)
+  text-align: left
+  padding: var(--space-3) var(--space-4)
+  border-bottom: 1px solid var(--border-medium)
+
+body row:
+  font: var(--font-body), var(--text-sm)
+  color: var(--text-primary)
+  padding: var(--space-3) var(--space-4)
+  border-bottom: 1px solid var(--border-subtle)
+  transition: var(--transition-fast)
+
+  hover:
+    background: var(--bg-elevated)
+
+first cell + last cell:
+  border-radius: var(--radius-lg) on outer corners (first and last row)
+```
+
+### Badge
+```
+display: inline-flex; align-items: center
+height: 24px
+padding: 0 var(--space-3)
+border-radius: var(--radius-full)
+font: var(--font-body), var(--text-xs), var(--weight-medium)
+
+variants:
+  default:  background: var(--bg-elevated), color: var(--text-secondary)
+  accent:   background: var(--accent-dim), color: var(--accent-strong)
+  success:  background: var(--semantic-green-dim), color: var(--semantic-green)
+  warning:  background: var(--semantic-amber-dim), color: var(--semantic-amber)
+  error:    background: var(--semantic-red-dim), color: var(--semantic-red)
+```
+
+### Avatar
+```
+border-radius: var(--radius-full)
+object-fit: cover
+
+sizes:
+  xs: 24px
+  sm: 32px
+  md: 40px
+  lg: 56px
+  xl: 80px
+
+fallback:
+  background: var(--accent-dim)
+  color: var(--accent)
+  font: var(--font-body), var(--weight-semibold)
+  display: flex; align-items: center; justify-content: center
+  (shows initials)
+```
+
+### Empty State
+```
+text-align: center
+padding: var(--space-16) var(--space-8)
+
+illustration:
+  max-width: 240px
+  margin: 0 auto var(--space-6)
+  (warm, hand-drawn style — never cold geometric)
+
+title:
+  font: var(--font-display), var(--text-xl), var(--weight-semibold)
+  color: var(--text-heading)
+
+description:
+  font: var(--font-body), var(--text-base)
+  color: var(--text-secondary)
+  max-width: 400px
+  margin: var(--space-2) auto var(--space-6)
+
+action:
+  Primary Button
+```
+
+---
+
+## Feedback
+
+### Toast / Notification
+```
+background: var(--bg-surface)
+border: 1px solid var(--border-medium)
+border-radius: var(--radius-xl)
+padding: var(--space-4) var(--space-5)
+shadow: var(--shadow-lg)
+max-width: 420px
+display: flex; gap: var(--space-3); align-items: flex-start
+
+icon: 20px, colored by semantic type
+title: var(--font-body), var(--text-sm), var(--weight-semibold), var(--text-heading)
+message: var(--font-body), var(--text-sm), var(--text-secondary)
+dismiss: Ghost Button, icon-only, top-right
+```
+
+### Modal
+```
+background: var(--bg-surface)
+border: 1px solid var(--border-subtle)
+border-radius: var(--radius-2xl)
+shadow: var(--shadow-xl)
+padding: var(--space-8)
+max-width: 480px
+width: 90vw
+
+backdrop:
+  background: rgba(45, 40, 35, 0.40)
+  backdrop-filter: blur(4px)
+
+title:
+  font: var(--font-display), var(--text-xl), var(--weight-semibold)
+  color: var(--text-heading)
+
+body:
+  font: var(--font-body), var(--text-base)
+  color: var(--text-primary)
+  margin-top: var(--space-4)
+
+actions:
+  margin-top: var(--space-6)
+  display: flex; gap: var(--space-3); justify-content: flex-end
+```
+
+### Tooltip
+```
+background: var(--text-heading)
+color: var(--text-inverse)
+padding: var(--space-2) var(--space-3)
+border-radius: var(--radius-md)
+font: var(--font-body), var(--text-xs), var(--weight-medium)
+shadow: var(--shadow-md)
+max-width: 240px
+```
+
+### Progress Bar
+```
+height: 8px
+background: var(--bg-elevated)
+border-radius: var(--radius-full)
+overflow: hidden
+
+fill:
+  height: 100%
+  background: var(--accent)
+  border-radius: var(--radius-full)
+  transition: width var(--transition-slow)
+```
+
+### Skeleton Loader
+```
+background: var(--bg-elevated)
+border-radius: var(--radius-md) (for text) or var(--radius-xl) (for cards)
+animation: warm-pulse 1.8s ease-in-out infinite
+
+@keyframes warm-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+```

package/template/.aioson/skills/design/warm-craft-ui/references/dashboards.md

@@ -0,0 +1,223 @@
+# Dashboard Presets — Warm Craft UI
+
+Composition guides for common dashboard types. Every preset uses the App Shell from `patterns.md`, tokens from `design-tokens.md`, and components from `components.md`.
+
+---
+
+## General Dashboard Rules
+
+1. **Never start with four equal stat cards.** Find the hero insight first.
+2. **Charts use warm palette only:** terracotta, sage, amber, slate-blue, muted purple. Never default library colors.
+3. **Serif stat numbers:** all prominent numbers use `var(--font-display)` — this is the visual signature in data-heavy pages.
+4. **Card depth hierarchy:** hero insight gets `var(--shadow-md)`, secondary cards get `var(--shadow-sm)`, tables get `var(--shadow-xs)`.
+5. **Breathing room:** dashboards in Warm Craft are NOT dense. Keep `var(--space-5)` or `var(--space-6)` gap between cards.
+6. **Section headers use serif:** `var(--font-display)`, `var(--text-lg)`, `var(--weight-semibold)`.
+
+---
+
+## Preset 1: Overview Dashboard
+
+Use for: general-purpose analytics, admin home, project overview.
+
+```
+GREETING HEADER (optional but encouraged)
+  "Good morning, {name}" or "Dashboard Overview"
+  font: var(--font-display), var(--text-2xl), var(--weight-bold)
+  subtitle: date or summary context
+  margin-bottom: var(--space-6)
+
+HERO INSIGHT (one card, full width or 2/3 width)
+  Large serif number + trend + context sentence
+  "Revenue this month: $48,250 — 12% above target"
+  background: var(--bg-surface)
+  border-radius: var(--radius-2xl)
+  padding: var(--space-8)
+  shadow: var(--shadow-md)
+
+SECONDARY STATS (grid, 3-4 columns)
+  Stat Card components
+  Smaller than hero, var(--shadow-sm)
+
+CHART SECTION
+  Section header + one or two charts side by side
+  Chart container: Base Card with padding var(--space-6)
+  Colors: var(--accent), var(--accent-secondary), var(--accent-tertiary), var(--semantic-blue)
+
+RECENT ACTIVITY or TABLE
+  Section header + Table component or Activity Feed
+```
+
+---
+
+## Preset 2: Analytics Dashboard
+
+Use for: marketing analytics, traffic analysis, conversion tracking, growth metrics.
+
+```
+DATE RANGE SELECTOR (top right, next to page title)
+  Pill-shaped select or date picker
+  background: var(--bg-elevated)
+  border-radius: var(--radius-full)
+
+METRIC STRIP (3-5 metrics, horizontal scroll on mobile)
+  Each: serif number + label + trend badge
+  NOT cards — just a clean horizontal row with dividers
+  background: var(--bg-surface)
+  border-radius: var(--radius-xl)
+  padding: var(--space-4) var(--space-6)
+
+PRIMARY CHART (full width)
+  Area chart or line chart — main KPI over time
+  Warm gradient fill under the line
+  background: var(--bg-surface) card
+  border-radius: var(--radius-xl)
+  height: 320px
+
+BREAKDOWN SECTION (two columns)
+  Left: Donut chart or horizontal bar chart (top sources, categories)
+  Right: Table with sortable columns (detailed breakdown)
+
+COMPARISON TABLE (full width)
+  Table with trend sparklines in cells
+  Warm-colored inline mini charts
+```
+
+---
+
+## Preset 3: Activity Feed Dashboard
+
+Use for: social, CRM activity, team updates, notification center, audit log.
+
+```
+LAYOUT: Two columns on desktop, single column on mobile
+  Left (2/3): Activity Feed
+  Right (1/3): Summary + Quick Actions
+
+ACTIVITY FEED
+  Vertical timeline with warm connecting line
+  line: 2px solid var(--border-subtle), left side
+
+  Each item:
+    avatar: var(--space-10) (40px)
+    content: user action description
+    timestamp: var(--text-xs), var(--text-muted)
+    padding: var(--space-4) 0
+    border-bottom: 1px solid var(--border-subtle)
+
+    action types have different icons/colors:
+      create: var(--semantic-green) icon
+      update: var(--semantic-blue) icon
+      delete: var(--semantic-red) icon
+      comment: var(--accent) icon
+
+SUMMARY SIDEBAR
+  Quick stats: Stat Cards (compact variant)
+  Quick actions: Stack of Ghost Buttons
+  Filters: Badge chips for filtering activity type
+```
+
+---
+
+## Preset 4: Project Board Dashboard
+
+Use for: project management, kanban overview, sprint planning, task tracking.
+
+```
+PROJECT HEADER
+  Project name (serif, large) + status badge + team avatars (overlapping)
+  Progress bar: overall project completion
+  margin-bottom: var(--space-6)
+
+BOARD VIEW (default)
+  Horizontal columns: "To Do" | "In Progress" | "Review" | "Done"
+  Column header:
+    title + count badge
+    font: var(--font-body), var(--text-sm), var(--weight-semibold)
+    color: var(--text-heading)
+
+  Column:
+    background: var(--bg-void)
+    border-radius: var(--radius-xl)
+    padding: var(--space-3)
+    min-width: 280px
+
+  Task card:
+    Base Card, compact padding var(--space-4)
+    title: var(--text-sm), var(--weight-medium)
+    assignee avatar: 24px, bottom-right
+    priority badge: colored dot or badge
+    due date: var(--text-xs), var(--text-muted)
+
+TABLE VIEW (alternative)
+  Table component with:
+    task name, assignee (avatar + name), status (badge), priority, due date
+    row click opens detail panel
+
+FOOTER STATS
+  Horizontal strip: tasks completed / total, team velocity, overdue count
+```
+
+---
+
+## Preset 5: Admin Panel Dashboard
+
+Use for: system admin, user management, configuration, moderation.
+
+```
+SYSTEM STATUS BANNER (conditional — only when issues)
+  full width, above content
+  background: var(--semantic-amber-dim) or var(--semantic-red-dim)
+  border-radius: var(--radius-xl)
+  padding: var(--space-4) var(--space-6)
+  icon + message + action button
+  margin-bottom: var(--space-6)
+
+QUICK STATS ROW
+  4 Stat Cards: Total Users, Active Today, Pending Reviews, Open Issues
+  Compact variant, var(--shadow-sm)
+
+USER MANAGEMENT SECTION
+  Section header: "Recent Users" + "View All" link
+  Table: avatar + name + email + role (badge) + status + last active + actions
+  Warm hover, rounded corners
+
+SYSTEM HEALTH (two columns)
+  Left: simple bar chart (API response times, warm colored)
+  Right: recent error log (compact list, severity badges)
+
+QUICK ACTIONS
+  Grid of action cards (2-3 columns):
+    "Manage Users", "Review Queue", "System Settings", "Export Data"
+    Feature Card style (icon + title + description)
+    Click navigates to section
+```
+
+---
+
+## Chart Color Palette
+
+For all dashboards, use these colors in order. Never use library defaults.
+
+```css
+/* Primary data series */
+--chart-1: var(--accent);            /* #E07A5F — terracotta */
+--chart-2: var(--accent-secondary);  /* #7C9A82 — sage */
+--chart-3: var(--accent-tertiary);   /* #D4A76A — amber */
+--chart-4: var(--semantic-blue);     /* #5B8DB8 — slate blue */
+--chart-5: var(--semantic-purple);   /* #9B8EC4 — muted purple */
+--chart-6: #8B7355;                  /* warm brown */
+
+/* Background fills (use with 0.15 opacity) */
+--chart-fill-1: rgba(224, 122, 95, 0.15);
+--chart-fill-2: rgba(124, 154, 130, 0.15);
+--chart-fill-3: rgba(212, 167, 106, 0.15);
+```
+
+Rules:
+- Area charts: use gradient fill from `--chart-fill-*` to transparent
+- Bar charts: solid `--chart-*` colors, rounded top corners (`border-radius: 4px 4px 0 0`)
+- Donut charts: `--chart-*` colors, warm gray for remaining (`var(--bg-elevated)`)
+- Line charts: 2px stroke, dot markers on hover only
+- Grid lines: `var(--border-subtle)`, never dark
+- Axis labels: `var(--text-muted)`, `var(--text-xs)`
+- Tooltips: uses Tooltip component from `components.md`