feat: add gallery preview cards, typography controls and styling system

This commit implements a full gallery preview showcase with multiple component cards, adds typography customization controls, refactors color token types, and updates the workspace preview to use dynamic styling based on user controls:

1. Adds 4 preview cards: budget table, draft status table, source share bar chart, and performance area chart
2. Creates a reusable gallery preview card export array
3. Adds typography system with font family, base size, and line height controls
4. Refactors color token default types into a reusable GalleryColorTokenValues type
5. Adds spacing customization controls to the editor
6. Updates card UI components to use dynamic typography and spacing variables
7. Reworks workspace preview to use dynamic theme values from user settings
8. Passes all new state and props through the app sidebar and panel components

Author: Sayhi-bzb

apps/agent-html/.agent-html-dev.out

@@ -159,3 +159,30 @@ Port 4173 is in use, trying another one...
 5:35:19 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
 5:39:51 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
 5:39:58 PM [vite] (client) hmr update /src/index.css, /src/gallery/editor.tsx
+5:41:13 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+5:43:17 PM [vite] (client) hmr update /src/index.css, /src/gallery/editor.tsx
+5:43:30 PM [vite] (client) hmr update /src/App.tsx, /src/index.css
+5:43:45 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+5:43:53 PM [vite] (client) hmr update /src/index.css, /src/gallery/panel.tsx
+5:44:03 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+5:44:15 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+5:45:43 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+5:49:57 PM [vite] (client) hmr update /src/index.css, /src/gallery/editor.tsx
+5:50:10 PM [vite] (client) hmr update /src/index.css, /src/gallery/editor.tsx
+5:50:24 PM [vite] (client) hmr update /src/App.tsx, /src/index.css
+5:50:38 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+5:50:50 PM [vite] (client) hmr update /src/index.css, /src/gallery/panel.tsx
+5:51:14 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+5:51:44 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+5:52:06 PM [vite] (client) hmr update /src/index.css, /src/gallery/editor.tsx
+5:57:36 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+5:57:57 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+5:57:57 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+6:00:46 PM [vite] (client) hmr update /src/App.tsx, /src/index.css
+6:01:27 PM [vite] (client) hmr update /src/components/app-sidebar.tsx, /src/index.css
+6:02:07 PM [vite] (client) hmr update /src/index.css, /src/gallery/editor.tsx
+6:02:24 PM [vite] (client) hmr update /src/index.css, /src/gallery/panel.tsx
+6:02:39 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+6:02:39 PM [vite] (client) hmr update /src/index.css, /src/gallery/workspace-preview.tsx
+6:03:17 PM [vite] (client) hmr update /src/index.css, /src/gallery/ui/card.tsx
+6:03:51 PM [vite] (client) hmr update /src/index.css, /src/gallery/editor.tsx

apps/agent-html/src/App.tsx

@@ -1,7 +1,19 @@
 import * as React from "react"
 
-import type { GalleryRadiusValue } from "@/gallery/editor"
+import type {
+  GalleryRadiusValue,
+  GallerySpacingValue,
+} from "@/gallery/editor"
+import {
+  galleryColorTokenDefaults,
+  type GalleryColorTokenName,
+  type GalleryColorTokenValue,
+} from "@/gallery/editor-panels"
 import { galleryScenes } from "@/gallery/scenes"
+import {
+  galleryTypographyDefaults,
+  type GalleryTypographyValue,
+} from "@/gallery/typography"
 import type { GalleryEditorMode } from "@/gallery/types"
 import { GalleryPanel } from "@/gallery/panel"
 import { galleryWorkspacePreviewBaseSceneId } from "@/gallery/preview-content"
@@ -237,8 +249,15 @@ export function App() {
   const [surfaceMode, setSurfaceMode] = React.useState<SurfaceMode>("workspace")
   const [galleryEditorMode, setGalleryEditorMode] =
     React.useState<GalleryEditorMode>("color")
+  const [galleryColorTokenValues, setGalleryColorTokenValues] = React.useState(
+    galleryColorTokenDefaults
+  )
+  const [galleryTypographyValue, setGalleryTypographyValue] =
+    React.useState<GalleryTypographyValue>(galleryTypographyDefaults)
   const [galleryRadiusValue, setGalleryRadiusValue] =
     React.useState<GalleryRadiusValue>("0.625rem")
+  const [gallerySpacingValue, setGallerySpacingValue] =
+    React.useState<GallerySpacingValue>("1rem")
   const [activeGallerySceneId, setActiveGallerySceneId] = React.useState<string>(
     galleryScenes[0].id
   )
@@ -435,25 +454,42 @@ export function App() {
       />
       <main className="flex min-h-0 flex-1 overflow-hidden">
         <AppSidebar
+          galleryColorTokenValues={galleryColorTokenValues}
           galleryEditorMode={galleryEditorMode}
           galleryRadiusValue={galleryRadiusValue}
+          gallerySpacingValue={gallerySpacingValue}
+          galleryTypographyValue={galleryTypographyValue}
           mode={surfaceMode}
           onDeleteProject={handleDeleteProject}
           onDuplicateProject={handleDuplicateProject}
           onEnterGalleryMode={handleEnterGalleryMode}
           onExitGalleryMode={handleExitGalleryMode}
+          onGalleryColorTokenValueChange={(
+            token: GalleryColorTokenName,
+            value: GalleryColorTokenValue
+          ) =>
+            setGalleryColorTokenValues((current) => ({
+              ...current,
+              [token]: value,
+            }))
+          }
           onGalleryEditorModeChange={setGalleryEditorMode}
           onOpenProject={handleOpenProject}
           onRadiusChange={setGalleryRadiusValue}
+          onSpacingChange={setGallerySpacingValue}
+          onTypographyChange={setGalleryTypographyValue}
           onRenameProject={handleRenameProject}
           projects={projects}
           variant="inset"
         />
         <SidebarInset className="min-h-0 overflow-hidden border-0 shadow-sm md:mr-2 md:mb-2">
           {surfaceMode === "gallery" ? (
             <GalleryPanel
+              colorTokenValues={galleryColorTokenValues}
               radiusValue={galleryRadiusValue}
               scene={galleryDisplayScene}
+              spacingValue={gallerySpacingValue}
+              typographyValue={galleryTypographyValue}
             />
           ) : (
             <WorkspacePanel activeProject={activeProject} />

apps/agent-html/src/components/app-sidebar.tsx

@@ -1,6 +1,16 @@
 import * as React from "react"
 
-import { GalleryEditorPanel, type GalleryRadiusValue } from "@/gallery/editor"
+import {
+  GalleryEditorPanel,
+  type GalleryRadiusValue,
+  type GallerySpacingValue,
+} from "@/gallery/editor"
+import type {
+  GalleryColorTokenName,
+  GalleryColorTokenValue,
+  GalleryColorTokenValues,
+} from "@/gallery/editor-panels"
+import type { GalleryTypographyValue } from "@/gallery/typography"
 import type { GalleryEditorMode } from "@/gallery/types"
 import {
   Popover,
@@ -35,30 +45,45 @@ const galleryHeaderEditorItems = [
 ] as const
 
 export function AppSidebar({
+  galleryColorTokenValues,
   mode = "workspace",
   onEnterGalleryMode,
   onExitGalleryMode,
   onDeleteProject,
   onDuplicateProject,
+  onGalleryColorTokenValueChange,
   onGalleryEditorModeChange,
   onOpenProject,
   onRadiusChange,
+  onSpacingChange,
+  onTypographyChange,
   onRenameProject,
   projects,
   galleryEditorMode = "color",
   galleryRadiusValue = "0.625rem",
+  gallerySpacingValue = "1rem",
+  galleryTypographyValue,
   ...props
 }: React.ComponentProps<typeof Sidebar> & {
+  galleryColorTokenValues: GalleryColorTokenValues
   galleryEditorMode?: GalleryEditorMode
   galleryRadiusValue?: GalleryRadiusValue
+  gallerySpacingValue?: GallerySpacingValue
+  galleryTypographyValue: GalleryTypographyValue
   mode?: "gallery" | "workspace"
   onEnterGalleryMode?: () => void
   onExitGalleryMode?: () => void
   onDeleteProject: (projectId: string) => void
   onDuplicateProject: (projectId: string) => void
+  onGalleryColorTokenValueChange: (
+    token: GalleryColorTokenName,
+    value: GalleryColorTokenValue
+  ) => void
   onGalleryEditorModeChange?: (mode: GalleryEditorMode) => void
   onOpenProject: (projectId: string) => void
   onRadiusChange?: (value: GalleryRadiusValue) => void
+  onSpacingChange?: (value: GallerySpacingValue) => void
+  onTypographyChange: (value: GalleryTypographyValue) => void
   onRenameProject: (projectId: string, name: string) => void
   projects: ProjectNavItem[]
 }) {
@@ -138,9 +163,15 @@ export function AppSidebar({
       <SidebarContent>
         {isGalleryMode ? (
           <GalleryEditorPanel
+            colorTokenValues={galleryColorTokenValues}
             mode={galleryEditorMode}
+            onColorTokenValueChange={onGalleryColorTokenValueChange}
             onRadiusChange={(value) => onRadiusChange?.(value)}
+            onSpacingChange={(value) => onSpacingChange?.(value)}
+            onTypographyChange={onTypographyChange}
             radiusValue={galleryRadiusValue}
+            spacingValue={gallerySpacingValue}
+            typographyValue={galleryTypographyValue}
           />
         ) : (
           <NavProjects

apps/agent-html/src/gallery/editor-panels.ts

@@ -50,6 +50,11 @@ export type GalleryColorTokenValue = {
   step: GalleryColorStep
 }
 
+export type GalleryColorTokenValues = Record<
+  GalleryColorTokenName,
+  GalleryColorTokenValue
+>
+
 export const galleryColorRoleGroups: ColorRoleGroup[] = [
   {
     id: "base-surfaces",
@@ -83,10 +88,7 @@ export const galleryColorRoleGroups: ColorRoleGroup[] = [
   },
 ]
 
-export const galleryColorTokenDefaults: Record<
-  GalleryColorTokenName,
-  GalleryColorTokenValue
-> = {
+export const galleryColorTokenDefaults: GalleryColorTokenValues = {
   background: { family: "zinc", step: "50" },
   foreground: { family: "zinc", step: "900" },
   card: { family: "zinc", step: "50" },