Add InteractiveRow WithButton story, SectionHeader pattern, and new primitives

apps/demo/src/index.css

@@ -61,35 +61,6 @@
   --shadow-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.02);
 }
 
-/* ═══════════════════════════════════════════════════════════════════
-   Tabular digits — all numbers render in JetBrains Mono
-   ═══════════════════════════════════════════════════════════════════ */
-
-@font-face {
-  font-family: "Digits";
-  src: local("JetBrains Mono"), url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
-  unicode-range: U+0030-0039, U+002E, U+002C, U+0025, U+002B, U+002D, U+003A;
-  font-weight: 400;
-  font-display: swap;
-  size-adjust: 88%;
-}
-@font-face {
-  font-family: "Digits";
-  src: local("JetBrains Mono Medium"), url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
-  unicode-range: U+0030-0039, U+002E, U+002C, U+0025, U+002B, U+002D, U+003A;
-  font-weight: 500;
-  font-display: swap;
-  size-adjust: 88%;
-}
-@font-face {
-  font-family: "Digits";
-  src: local("JetBrains Mono Bold"), url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
-  unicode-range: U+0030-0039, U+002E, U+002C, U+0025, U+002B, U+002D, U+003A;
-  font-weight: 600 900;
-  font-display: swap;
-  size-adjust: 88%;
-}
-
 /* ═══════════════════════════════════════════════════════════════════
    Global resets
    ═══════════════════════════════════════════════════════════════════ */

apps/demo/src/pages/AvatarPage.tsx

@@ -1,5 +1,4 @@
-import { Button } from "@nexu-design/ui-web";
-import { PageHeader, PageShell, SectionHeader } from "@nexu-design/ui-web";
+import { Button, PageHeader, PageShell, SectionHeader } from "@nexu-design/ui-web";
 import { useState } from "react";
 
 const SKIN_TONES = [

apps/demo/src/pages/ComponentsPage.tsx

@@ -1,6 +1,4 @@
-import { Button } from "@nexu-design/ui-web";
-
-import { PageHeader, PageShell, SectionHeader } from "@nexu-design/ui-web";
+import { Button, PageHeader, PageShell, SectionHeader } from "@nexu-design/ui-web";
 import {
   AlertTriangle,
   ArrowRight,

apps/demo/src/pages/CopyPage.tsx

@@ -1,6 +1,4 @@
-import { Button } from "@nexu-design/ui-web";
-
-import { PageHeader, PageShell, SectionHeader } from "@nexu-design/ui-web";
+import { Button, PageHeader, PageShell, SectionHeader } from "@nexu-design/ui-web";
 
 function ChatBubble({
   from,

apps/demo/src/pages/MotionPage.tsx

@@ -1,5 +1,4 @@
-import { Button } from "@nexu-design/ui-web";
-import { PageHeader, PageShell, SectionHeader } from "@nexu-design/ui-web";
+import { Button, PageHeader, PageShell, SectionHeader } from "@nexu-design/ui-web";
 import { useEffect, useState } from "react";
 import NexuLoader, { NexuLoadingScreen } from "../components/NexuLoader";
 

apps/demo/src/pages/nexu/NexuAvatarDetailPage.tsx

@@ -127,7 +127,7 @@ export default function NexuAvatarDetailPage() {
             <EntityCardContent>
               <TagGroup>
                 {avatar.skills.map((skill) => (
-                  <TagGroupItem key={skill} variant="brand" radius="md">
+                  <TagGroupItem key={skill} variant="accent" radius="md">
                     {skill}
                   </TagGroupItem>
                 ))}

apps/demo/src/pages/nexu/NexuAvatarsPage.tsx

@@ -80,7 +80,7 @@ export default function NexuAvatarsPage() {
                       role.status === "busy"
                         ? "warning"
                         : role.status === "waiting"
-                          ? "brand"
+                          ? "accent"
                           : "success"
                     }
                     className="shrink-0 text-[10px]"

apps/demo/src/pages/nexu/NexuDashboardPage.tsx

@@ -152,7 +152,7 @@ export default function NexuDashboardPage() {
                           a.status === "busy"
                             ? "warning"
                             : a.status === "waiting"
-                              ? "brand"
+                              ? "accent"
                               : "success"
                         }
                         size="xs"

apps/demo/src/pages/nexu/NexuLanding.tsx

@@ -54,7 +54,7 @@ function FeatureCard({
           <Icon size={20} className="text-accent" />
         </div>
         {badge && (
-          <Badge variant="brand" size="sm">
+          <Badge variant="accent" size="sm">
             {badge}
           </Badge>
         )}
@@ -150,7 +150,7 @@ export default function NexuLanding() {
               <span className="text-[11px] font-bold text-accent-fg">N</span>
             </div>
             <span className="text-sm font-semibold tracking-tight text-text-primary">nexu</span>
-            <Badge variant="brand" size="sm">
+            <Badge variant="accent" size="sm">
               分身监控管理
             </Badge>
           </div>
@@ -185,7 +185,7 @@ export default function NexuLanding() {
         />
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(30,171,96,0.06)_0%,transparent_50%)]" />
         <div className="relative mx-auto max-w-4xl px-6 pt-24 pb-20 text-center">
-          <Badge variant="brand" size="lg" className="mb-8 text-xs">
+          <Badge variant="accent" size="lg" className="mb-8 text-xs">
             <Zap size={12} /> 基于 Refly 能力 · 多数字员工，赛博工作室
           </Badge>
           <h1 className="mb-6 text-[48px] font-bold leading-[1.1] tracking-tight text-text-primary">

apps/demo/src/pages/nexu/NexuProgressPage.tsx

@@ -124,7 +124,7 @@ export default function NexuProgressPage() {
                   </div>
                 </div>
                 <Badge
-                  variant={run.status === "success" ? "success" : "brand"}
+                  variant={run.status === "success" ? "success" : "accent"}
                   className="shrink-0 text-[10px]"
                 >
                   {run.status === "success" ? "成功" : "待审批"}

apps/demo/src/pages/nexu/NexuSkillsKnowledgePage.tsx

@@ -59,7 +59,7 @@ export default function NexuSkillsKnowledgePage() {
                 <EntityCardContent>
                   <div className="flex flex-wrap gap-2">
                     {row.skills.map((s) => (
-                      <Badge key={s} variant="brand" size="lg">
+                      <Badge key={s} variant="accent" size="lg">
                         <Wrench size={12} />
                         {s}
                       </Badge>

apps/demo/src/pages/openclaw/BillingPage.tsx

@@ -121,7 +121,7 @@ export default function BillingPage() {
                 value={(totalCredits - totalUsed).toLocaleString()}
                 icon={Crown}
                 tone="success"
-                trend={{ label: "Free plan", variant: "brand" }}
+                trend={{ label: "Free plan", variant: "accent" }}
               />
               <StatCard
                 label="Usage rate"

apps/demo/src/pages/openclaw/ChannelDetailPage.tsx

@@ -169,7 +169,7 @@ export default function ChannelDetailPage({ channelId }: { channelId: string })
               <div className="flex items-center gap-2">
                 <h1 className="text-[15px] font-bold text-text-heading">{channel.name}</h1>
                 <Badge
-                  variant={channel.chatType === "group" ? "brand" : "default"}
+                  variant={channel.chatType === "group" ? "accent" : "default"}
                   className={
                     channel.chatType === "group"
                       ? "bg-[var(--color-info-subtle)] text-[var(--color-info)]"

apps/demo/src/pages/openclaw/DashboardPage.tsx

@@ -41,7 +41,7 @@ function DeploymentRow({ dep }: { dep: Deployment }) {
         <div className="flex gap-2 items-center">
           <span className="text-[13px] font-medium text-text-primary truncate">{dep.title}</span>
           {dep.source === "content" && (
-            <Badge variant="brand" size="xs">
+            <Badge variant="accent" size="xs">
               Content
             </Badge>
           )}

apps/demo/src/pages/openclaw/OpenClawLanding.tsx

@@ -253,7 +253,7 @@ function FeatureCard({
           <Icon size={20} className="text-accent" />
         </div>
         {badge && (
-          <Badge variant="brand" size="sm">
+          <Badge variant="accent" size="sm">
             {badge}
           </Badge>
         )}
@@ -762,13 +762,13 @@ export default function OpenClawLanding() {
               </div>
               <div className="flex-1 min-w-0">
                 <div className="flex gap-2 items-center mb-1.5">
-                  <Badge variant="brand" size="sm">
+                  <Badge variant="accent" size="sm">
                     {c.tag}
                   </Badge>
                 </div>
                 <div className="text-[14px] font-semibold text-text-primary mb-1">{c.prompt}</div>
                 <div className="text-[13px] text-text-muted mb-2">{c.result}</div>
-                <Badge variant="brand">
+                <Badge variant="accent">
                   <Clock size={10} /> {c.time}
                 </Badge>
               </div>

apps/demo/src/pages/product/AutomationPage.tsx

@@ -4,11 +4,12 @@ import {
   AlertTitle,
   Button,
   FollowUpInput,
-  InspectorPanel,
   StatCard,
   ToggleGroup,
   ToggleGroupItem,
 } from "@nexu-design/ui-web";
+import type * as React from "react";
+import { InspectorPanel } from "./InspectorPanel";
 import {
   AlertCircle,
   BarChart3,

packages/ui-web/src/patterns/inspector-panel.tsx → apps/demo/src/pages/product/InspectorPanel.tsx

@@ -1,6 +1,5 @@
 import type * as React from "react";
 
-import { cn } from "../lib/cn";
 import {
   DetailPanel,
   DetailPanelCloseButton,
@@ -10,8 +9,7 @@ import {
   DetailPanelHeader,
   type DetailPanelProps,
   DetailPanelTitle,
-} from "../primitives/detail-panel";
-import { PanelFooter } from "../primitives/panel-footer";
+} from "@nexu-design/ui-web";
 
 export interface InspectorPanelProps extends Omit<DetailPanelProps, "children" | "title"> {
   title: React.ReactNode;
@@ -54,27 +52,26 @@ export function InspectorPanel({
   ...props
 }: InspectorPanelProps) {
   return (
-    <DetailPanel width={width} className={cn("bg-surface-0", className)} {...props}>
-      <DetailPanelHeader className={cn("items-center shrink-0", headerClassName)}>
+    <DetailPanel width={width} className={`bg-surface-0 ${className ?? ""}`} {...props}>
+      <DetailPanelHeader className={`items-center shrink-0 ${headerClassName ?? ""}`}>
         {leading}
         <div className="min-w-0 flex-1">
           {badges ? (
-            <div className={cn("mb-0.5 flex flex-wrap items-center gap-1.5", badgesClassName)}>
+            <div className={`mb-0.5 flex flex-wrap items-center gap-1.5 ${badgesClassName ?? ""}`}>
               {badges}
             </div>
           ) : null}
-          <DetailPanelTitle className={cn("truncate", titleClassName)}>{title}</DetailPanelTitle>
+          <DetailPanelTitle className={`truncate ${titleClassName ?? ""}`}>
+            {title}
+          </DetailPanelTitle>
           {description ? (
             <DetailPanelDescription className={descriptionClassName}>
               {description}
             </DetailPanelDescription>
           ) : null}
           {meta ? (
             <div
-              className={cn(
-                "mt-2 flex flex-wrap items-center gap-3 text-[11px] text-text-muted",
-                metaClassName,
-              )}
+              className={`mt-2 flex flex-wrap items-center gap-3 text-[11px] text-text-muted ${metaClassName ?? ""}`}
             >
               {meta}
             </div>
@@ -84,7 +81,9 @@ export function InspectorPanel({
       </DetailPanelHeader>
       <DetailPanelContent className={contentClassName}>{children}</DetailPanelContent>
       {footer ? (
-        <PanelFooter className={cn("shrink-0", footerClassName)}>{footer}</PanelFooter>
+        <div className={`shrink-0 border-t border-border px-4 py-3 ${footerClassName ?? ""}`}>
+          {footer}
+        </div>
       ) : null}
     </DetailPanel>
   );

apps/demo/src/pages/product/ProductDemoPage.tsx

@@ -6,15 +6,12 @@ import {
   ActivityBarIndicator,
   ActivityBarItem,
   DetailPanel,
-  FileEditor,
-  FileTree,
   NavigationMenu,
   NavigationMenuButton,
   NavigationMenuItem,
   Sidebar,
   SidebarContent,
   SidebarHeader,
-  WorkspaceShell,
 } from "@nexu-design/ui-web";
 import {
   Clock,
@@ -34,7 +31,9 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 import AutomationPage from "./AutomationPage";
 import CloneBuilderPage from "./CloneBuilderPage";
-import { CLONE_FILE_TREE, FOLDER_ICONS, type FileNode } from "./FileTree";
+import { FileEditor } from "./FileEditor";
+import { CLONE_FILE_TREE, FileTree, FOLDER_ICONS, type FileNode } from "./FileTree";
+import { WorkspaceShell } from "./WorkspaceShell";
 import { ProductLayoutContext } from "./ProductLayoutContext";
 import SessionsPage from "./SessionsPage";
 import SkillsPage from "./SkillsPage";
@@ -288,7 +287,7 @@ export default function ProductDemoPage() {
                   lastEditedBy={getFile(openFilePath)?.lastEditedBy}
                   lastEditedAt={getFile(openFilePath)?.lastEditedAt}
                   onClose={handleCloseFile}
-                  onSave={(content) => saveFile(openFilePath, content, "human")}
+                  onSave={(content: string) => saveFile(openFilePath, content, "human")}
                 />
               </DetailPanel>
             ) : null

apps/demo/src/pages/product/ProductLayout.tsx

@@ -6,15 +6,12 @@ import {
   ActivityBarIndicator,
   ActivityBarItem,
   DetailPanel,
-  FileEditor,
-  FileTree,
   NavigationMenu,
   NavigationMenuButton,
   NavigationMenuItem,
   Sidebar,
   SidebarContent,
   SidebarHeader,
-  WorkspaceShell,
 } from "@nexu-design/ui-web";
 import {
   Clock,
@@ -31,7 +28,9 @@ import {
 import { type ReactNode, useCallback, useMemo, useState } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
 
-import { CLONE_FILE_TREE, FOLDER_ICONS, FOLDER_ROUTES, type FileNode } from "./FileTree";
+import { FileEditor } from "./FileEditor";
+import { CLONE_FILE_TREE, FileTree, FOLDER_ICONS, FOLDER_ROUTES, type FileNode } from "./FileTree";
+import { WorkspaceShell } from "./WorkspaceShell";
 import { ProductLayoutContext } from "./ProductLayoutContext";
 import { getFile, saveFile } from "./fileStore";