feat(blocks): Team + Profile + Stats — v0.23.0

shadcn's signature strength is blocks (full drop-in screens). We had 5; ship
three more, composed from existing components (no new primitives, low risk):

- Team — members list with avatars, roles, and an Invite action.
- Profile — account-settings form (avatar + name/email/bio + save/cancel).
- Stats — analytics overview: 4 metric cards + traffic-by-source bars.

Registered as registry:block with proper requires; usage snippets verified by
the docs-accuracy test (50/50). PreviewHost cases + showcase build.rs wired.
Landing copy and ROADMAP updated (8 blocks total; Planned v0.23 Menu family
renumbered to v0.24). Cache-bust 0.23.0.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: stevekwon211

README.md

@@ -8,7 +8,7 @@
 
 [Live docs](https://stevekwon211.github.io/slintcn/docs/) · [Live demo](https://stevekwon211.github.io/slintcn) · [npm](https://www.npmjs.com/package/slintcn)
 
-39 UI components, 5 installable blocks, a theme system, and a static registry you can host yourself.
+39 UI components, 8 installable blocks, a theme system, and a static registry you can host yourself.
 
 <p align="center">
   <img src="docs/img/snapshots/section-6-dashboard.png" alt="slintcn dashboard components" width="31%">
@@ -79,6 +79,7 @@ node /path/to/slintcn/bin/slintcn.mjs add button card input dialog
 | **v0.21** | **Adoption W3** — docs API section (variants/sizes auto-derived) + per-item a11y/behavior contract (`a11y.json`, surfaced in docs + `export`) | ✅ |
 | **v0.22** | **Adoption W4** (from Zero adoption testing) — unified add/diff/export pipeline (diff+export now apply external-enums), adoption flags persist to slintcn.json, per-file `routes` (route overlay panels out of `componentsDir`) | ✅ |
 | **v0.22.1** | **Responsive + polish** — mobile nav drawer for the docs, demo fills the window (no letterbox, no resize flicker), Popover/ContextMenu layout fix, Firefox first-click focus | ✅ |
+| **v0.23** | **Blocks expansion** — Team (members + roles), Profile (account form), Stats (metrics + traffic bars) → 8 blocks total | ✅ |
 | **v1.0** | Game HUD registry expansion — hotbar, reticle, full keycap hints | later |
 
 SaaS-first is a **wedge**, not a ceiling. Once tokens + motion + hover semantics

docs/ROADMAP.md

@@ -14,40 +14,40 @@ Lead with the menu family (we already have the overlay infra) and the app-shell
 primitives (they serve real adopters like the Zero desktop app). Charts are a
 heavy, separate R&D track; the Game/HUD layer is the long-term differentiator.
 
-### v0.23 — Menu family (overlay expansion)
+### v0.24 — Menu family (overlay expansion)
 - **Dropdown Menu, Menubar, Navigation Menu, Hover Card.**
 - Why: the highest-frequency missing primitives — every toolbar / profile menu.
 - Reuse: `PopupWindow` + the Popover/ContextMenu/Select patterns (close-on-
   click-outside, cursor/anchor positioning, arrow-key nav).
 - Risk: nested submenus (Menubar) need careful PopupWindow stacking + focus.
 
-### v0.24 — Command & Combobox (search / filter)
+### v0.25 — Command & Combobox (search / filter)
 - **Combobox** (searchable Select), **Command** (⌘K palette: groups + filter).
 - Why: ⌘K is table-stakes in modern tools; Combobox unblocks large option sets.
 - Reuse: Select trigger + PopupWindow + Input for the query; filter a VecModel.
 - Risk: result highlight + keyboard nav; the global ⌘K shortcut is consumer-side.
 
-### v0.25 — Data Table
+### v0.26 — Data Table
 - Sortable / filterable / paginated / row-selectable table (extends `Table`).
 - Why: the single biggest "complex" gap; most-requested.
 - Reuse: Table + Checkbox (select) + Pagination + Input (filter) + Button (sort).
 - Risk: column sizing + virtualized scroll for large data (ScrollArea). Own wave.
 
-### v0.26 — Date & Calendar
+### v0.27 — Date & Calendar
 - **Calendar** (month grid + keyboard), **Date Picker** (Calendar in a Popover),
   basic range select.
 - Why: forms / scheduling.
 - Risk: date math in Rust glue, locale / first-day-of-week, range selection.
 
-### v0.27 — App-shell primitives
+### v0.28 — App-shell primitives
 - **Sidebar** (collapsible app sidebar), **Resizable** (split panes), **Drawer**
   (sheet variant).
 - Why: makes slintcn viable for full desktop app shells — directly serves
   adopters like the Zero desktop app.
 - Reuse: Sheet (Drawer), ScrollArea, layout primitives; Resizable = TouchArea
   drag + width state.
 
-### v0.28 — Catalog round-out (small gaps)
+### v0.29 — Catalog round-out (small gaps)
 - Collapsible, Aspect Ratio, Input OTP, Spinner, Carousel, Button Group,
   Empty / Field / Item, Native Select, Kbd (alias Keycap).
 - Why: parity polish; each is small.
@@ -77,7 +77,22 @@ heavy, separate R&D track; the Game/HUD layer is the long-term differentiator.
 
 ---
 
-## v0.22.1 — responsive site + polish (current)
+## v0.23 — blocks expansion (current)
+
+shadcn's signature strength is **Blocks** — drop-in full screens. We had 5;
+ship three more, composed from existing components (no new primitives):
+
+- [x] **Team** — members list with avatars, roles, and an Invite action
+      (Card + Avatar + Badge + Button).
+- [x] **Profile** — account-settings form: avatar, name, email, bio, save/cancel
+      (Card + Avatar + Input + Textarea + Button).
+- [x] **Stats** — analytics overview: four metric cards + traffic-by-source
+      bars (Card + Label + Badge + Progress; bars stand in until charts ship).
+
+8 blocks total. Each registered + previewed in docs (`/docs/team`, `/profile`,
+`/stats`) + usage snippets verified by the docs-accuracy test.
+
+## v0.22.1 — responsive site + polish
 
 - [x] **Docs mobile nav** — off-canvas drawer (☰ → sidebar over a scrim; closes on
       scrim/Esc/select; body scroll lock). Restores component navigation on phones.

examples/showcase/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "slintcn-showcase"
-version = "0.22.1"
+version = "0.23.0"
 edition = "2021"
 publish = false
 

examples/showcase/Cargo.toml

@@ -21,6 +21,7 @@ fn main() {
             "text", "keycap", "hud-pill", "slot-tile",
             "scroll-area", "popover", "context-menu",
             "sign-in", "login", "pricing", "dashboard", "settings",
+            "team", "profile", "stats",
         ])
         .status()
         .expect("failed to invoke `node` for the slintcn CLI (need Node 20+ on PATH)");

examples/showcase/build.rs

@@ -58,6 +58,9 @@ import { Login }                                from "slintcn/blocks/login.slint
 import { Pricing }                              from "slintcn/blocks/pricing.slint";
 import { Dashboard as DashboardBlock }          from "slintcn/blocks/dashboard.slint";
 import { Settings as SettingsBlock }            from "slintcn/blocks/settings.slint";
+import { Team }                                 from "slintcn/blocks/team.slint";
+import { Profile }                              from "slintcn/blocks/profile.slint";
+import { Stats }                                from "slintcn/blocks/stats.slint";
 
 // Sidebar nav item — local helper, not part of the registry.
 component NavItem inherits Rectangle {
@@ -251,6 +254,9 @@ component PreviewHost inherits Rectangle {
             if root.name == "pricing": Pricing { }
             if root.name == "dashboard": Rectangle { width: 760px; DashboardBlock { } }
             if root.name == "settings": Rectangle { width: 620px; SettingsBlock { } }
+            if root.name == "team": Team { }
+            if root.name == "profile": Profile { }
+            if root.name == "stats": Rectangle { width: 760px; Stats { } }
         }
     }
 
@@ -324,7 +330,7 @@ export component AppWindow inherits Window {
                         font-weight: Tokens.typography-weight-semibold;
                     }
                     Badge {
-                        text: "v0.22";
+                        text: "v0.23";
                         variant: BadgeVariant.secondary;
                         size: BadgeSize.sm;
                     }
@@ -532,7 +538,7 @@ export component AppWindow inherits Window {
                             spacing: 8px;
                             alignment: start;
                             Label { text: "Sign up for the beta"; variant: LabelVariant.default; }
-                            Badge { text: "v0.22"; variant: BadgeVariant.secondary; size: BadgeSize.sm; }
+                            Badge { text: "v0.23"; variant: BadgeVariant.secondary; size: BadgeSize.sm; }
                         }
 
                         VerticalLayout {

examples/showcase/ui/app_window.slint

@@ -1,6 +1,6 @@
 {
   "name": "slintcn",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "Beautiful copy-paste Slint components — shadcn for native UI",
   "keywords": [
     "slint",

package.json

@@ -0,0 +1,78 @@
+import { Tokens } from "../theme/tokens.slint";
+import { Card, CardVariant } from "../components/card.slint";
+import { Avatar } from "../components/avatar.slint";
+import { Input } from "../components/input.slint";
+import { Textarea } from "../components/textarea.slint";
+import { Label, LabelVariant } from "../components/label.slint";
+import { Button, ButtonVariant } from "../components/button.slint";
+import { Separator, SeparatorOrientation } from "../components/separator.slint";
+
+// Profile / account-settings block — avatar + name/email/bio fields with
+// Save / Cancel. Built from Card + Avatar + Input + Textarea + Button. Bind the
+// fields and handle `save()` / `cancel()`.
+export component Profile inherits Rectangle {
+    in-out property <string> display-name: "Sofia Davis";
+    in-out property <string> email: "sofia@acme.dev";
+    in-out property <string> bio: "Product designer. Building tools for makers.";
+    callback save();
+    callback cancel();
+
+    background: transparent;
+
+    Card {
+        variant: CardVariant.solid;
+        width: 480px;
+        VerticalLayout {
+            padding: parent.padding-l;
+            spacing: Tokens.spacing-lg;
+
+            VerticalLayout {
+                spacing: 4px;
+                Text {
+                    text: "Profile";
+                    color: Tokens.color-foreground;
+                    font-size: Tokens.typography-title-size;
+                    font-weight: Tokens.typography-weight-semibold;
+                }
+                Label { text: "How others see you across the app."; variant: LabelVariant.muted; }
+            }
+
+            HorizontalLayout {
+                spacing: 16px;
+                VerticalLayout { alignment: center; Avatar { fallback: "SD"; size: 56px; } }
+                VerticalLayout {
+                    horizontal-stretch: 1;
+                    alignment: center;
+                    spacing: 8px;
+                    Button { text: "Change avatar"; variant: ButtonVariant.outline; }
+                    Label { text: "JPG or PNG, up to 2 MB."; variant: LabelVariant.muted; }
+                }
+            }
+
+            Separator { orientation: SeparatorOrientation.horizontal; }
+
+            VerticalLayout {
+                spacing: 6px;
+                Label { text: "Name"; }
+                Input { placeholder: "Your name"; text <=> root.display-name; }
+            }
+            VerticalLayout {
+                spacing: 6px;
+                Label { text: "Email"; }
+                Input { placeholder: "you@example.com"; text <=> root.email; }
+            }
+            VerticalLayout {
+                spacing: 6px;
+                Label { text: "Bio"; }
+                Textarea { placeholder: "A short bio…"; text <=> root.bio; }
+            }
+
+            HorizontalLayout {
+                spacing: Tokens.spacing-sm;
+                VerticalLayout { horizontal-stretch: 1; }
+                Button { text: "Cancel"; variant: ButtonVariant.outline; clicked => { root.cancel(); } }
+                Button { text: "Save changes"; variant: ButtonVariant.default; clicked => { root.save(); } }
+            }
+        }
+    }
+}

registry/default/blocks/profile.slint

@@ -0,0 +1,96 @@
+import { Tokens } from "../theme/tokens.slint";
+import { Card, CardVariant } from "../components/card.slint";
+import { Label, LabelVariant } from "../components/label.slint";
+import { Badge, BadgeVariant, BadgeSize } from "../components/badge.slint";
+import { Progress } from "../components/progress.slint";
+
+// Analytics-overview block — four metric cards over a "traffic by source"
+// breakdown drawn with Progress bars (slintcn has no chart primitive yet, so
+// bars stand in). Built from Card + Label + Badge + Progress.
+export struct StatMetric { label: string, value: string, delta: string, up: bool }
+export struct TrafficSource { label: string, percent: float, value: string }
+
+export component Stats inherits Rectangle {
+    in property <[StatMetric]> metrics: [
+        { label: "Revenue",      value: "$ 42,580", delta: "+12.4%", up: true },
+        { label: "Subscriptions", value: "2,340",   delta: "+8.1%",  up: true },
+        { label: "Active now",   value: "1,284",    delta: "+3.1%",  up: true },
+        { label: "Churn",        value: "1.8%",     delta: "−0.4%",  up: false },
+    ];
+    in property <[TrafficSource]> sources: [
+        { label: "Direct",   percent: 48, value: "12,480" },
+        { label: "Organic",  percent: 31, value: "8,060"  },
+        { label: "Referral", percent: 14, value: "3,640"  },
+        { label: "Social",   percent: 7,  value: "1,820"  },
+    ];
+
+    background: transparent;
+
+    VerticalLayout {
+        spacing: 16px;
+        alignment: start;
+
+        HorizontalLayout {
+            spacing: 16px;
+            for m in root.metrics: Card {
+                variant: CardVariant.raised;
+                width: 24%;
+                height: 116px;
+                VerticalLayout {
+                    padding: parent.padding-l;
+                    spacing: 6px;
+                    alignment: start;
+                    Label { text: m.label; variant: LabelVariant.muted; }
+                    Text {
+                        text: m.value;
+                        color: Tokens.color-foreground;
+                        font-size: 24px;
+                        font-weight: Tokens.typography-weight-semibold;
+                    }
+                    Badge {
+                        text: m.delta;
+                        variant: m.up ? BadgeVariant.default : BadgeVariant.destructive;
+                        size: BadgeSize.sm;
+                    }
+                }
+            }
+        }
+
+        Card {
+            variant: CardVariant.solid;
+            VerticalLayout {
+                padding: parent.padding-l;
+                spacing: Tokens.spacing-md;
+                Text {
+                    text: "Traffic by source";
+                    color: Tokens.color-foreground;
+                    font-size: Tokens.typography-title-size;
+                    font-weight: Tokens.typography-weight-semibold;
+                }
+                for s in root.sources: HorizontalLayout {
+                    spacing: 12px;
+                    VerticalLayout {
+                        width: 84px;
+                        alignment: center;
+                        Label { text: s.label; }
+                    }
+                    VerticalLayout {
+                        horizontal-stretch: 1;
+                        alignment: center;
+                        Progress { value: s.percent; }
+                    }
+                    VerticalLayout {
+                        width: 64px;
+                        alignment: center;
+                        Text {
+                            text: s.value;
+                            color: Tokens.color-muted-foreground;
+                            font-size: Tokens.typography-body-sm-size;
+                            horizontal-alignment: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}