tembro 2.0.3 → 2.0.5

package/packages/cli/vendor/src/showcase/fallback.tsx

@@ -1,9 +1,7 @@
 import {
   Accordion,
   Alert,
-  Affix,
   AnchorNav,
-  AspectRatio,
   Avatar,
   AvatarGroup,
   Badge,
@@ -12,30 +10,21 @@ import {
   CalendarScheduler,
   Card,
   CardContent,
-  CardHeader,
-  CardTitle,
   Carousel,
   CarouselItem,
-  Cascader,
   CodeBlock,
   ColorInput,
   CopyButton,
-  CopyField,
-  DataState,
-  DescriptionList,
-  Descriptions,
-  Divider,
-  DualListPicker,
-  EmptyState,
-  EntityCard,
-  FilterChips,
-  FloatButton,
-  Grid,
+  CopyField,
+  DataState,
+  Descriptions,
+  Divider,
+  DualListPicker,
+  FilterBar,
   Heading,
   Input,
   JsonInput,
   KanbanBoard,
-  KeyboardShortcut,
   List,
   Mark,
   Menubar,
@@ -43,7 +32,6 @@ import {
   MenubarItem,
   MenubarMenu,
   MenubarTrigger,
-  MentionInput,
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
@@ -66,12 +54,9 @@ import {
   SegmentedControl,
   Skeleton,
   SkeletonCard,
-  SkeletonForm,
-  SkeletonTable,
   SkeletonText,
   Slider,
   Spinner,
-  Stack,
   StepperTabs,
   Statistic,
   StatisticCard,
@@ -81,13 +66,11 @@ import {
   Tag,
   TagInput,
   TagGroup,
-  TagList,
   Text,
   TimePicker,
   TimeRangePicker,
   Tour,
   TreeView,
-  Watermark,
 } from "@/index"
 import { StatCard } from "@/components/layout/stat-card"
 
@@ -200,31 +183,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "affix") {
-    return (
-      <div className="grid gap-3">
-        <Affix offsetTop={0}>
-          <div className="rounded-lg border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 py-2 text-sm font-medium">
-            Sticky helper bar
-          </div>
-        </Affix>
-        <div className="rounded-xl border border-dashed border-[color:var(--aui-divider)] p-4 text-sm text-[color:var(--aui-page-muted)]">
-          Use `Affix` when a small control or summary should remain visible while the surrounding content scrolls.
-        </div>
-      </div>
-    )
-  }
-
-  if (item.slug === "aspect-ratio") {
-    return (
-      <AspectRatio ratio={16 / 9} className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]">
-        <div className="flex size-full items-center justify-center bg-[linear-gradient(135deg,color-mix(in_oklch,var(--aui-brand),transparent_88%),transparent)] text-sm font-medium text-[color:var(--aui-page-foreground)]">
-          16:9 media surface
-        </div>
-      </AspectRatio>
-    )
-  }
-
   if (item.slug === "avatar") {
     return (
       <div className="flex flex-wrap items-center gap-4">
@@ -277,18 +235,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "cascader") {
-    return (
-      <Cascader
-        value={["workspace", "billing", "invoices"]}
-        options={[
-          { value: "workspace", label: "Workspace", children: [{ value: "billing", label: "Billing", children: [{ value: "invoices", label: "Invoices" }, { value: "plans", label: "Plans" }] }] },
-          { value: "settings", label: "Settings", children: [{ value: "team", label: "Team" }] },
-        ]}
-      />
-    )
-  }
-
   if (item.slug === "code-block") {
     return (
       <CodeBlock
@@ -396,28 +342,10 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "skeleton-form") {
-    return <SkeletonForm />
-  }
-
-  if (item.slug === "skeleton-table") {
-    return <SkeletonTable rows={5} columns={4} />
-  }
-
   if (item.slug === "slider") {
     return <Slider label="Spacing scale" description="Adjust dashboard density." defaultValue={64} showValue />
   }
 
-  if (item.slug === "stack") {
-    return (
-      <Stack gap="sm">
-        <div className="rounded-lg border p-3 text-sm">Header area</div>
-        <div className="rounded-lg border p-3 text-sm">Content area</div>
-        <div className="rounded-lg border p-3 text-sm">Footer area</div>
-      </Stack>
-    )
-  }
-
   if (item.slug === "statistic") {
     return (
       <StatisticGrid columns={3}>
@@ -448,19 +376,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "tag-list") {
-    return (
-      <TagList
-        removable
-        items={[
-          { key: "1", label: "Dashboard" },
-          { key: "2", label: "Billing", variant: "secondary" },
-          { key: "3", label: "Priority", variant: "outline" },
-        ]}
-      />
-    )
-  }
-
   if (item.slug === "time-picker") {
     return (
       <div className="grid gap-3">
@@ -519,19 +434,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "watermark") {
-    return (
-      <Watermark text="AZAMAT UI">
-        <Card>
-          <CardContent className="p-6">
-            <p className="text-lg font-semibold">Preview export</p>
-            <p className="mt-2 text-sm text-muted-foreground">Subtle branding surface for internal screenshots or mockups.</p>
-          </CardContent>
-        </Card>
-      </Watermark>
-    )
-  }
-
   if (item.slug === "range-slider") {
     return <RangeSlider label="Revenue band" description="Filter a metric window." defaultValue={[20, 80]} showValue />
   }
@@ -578,31 +480,29 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "filter-chips" || item.slug === "data-table-saved-filters") {
-    return (
-      <div className="grid gap-3">
-        <FilterChips
-          chips={[
-            { key: "status", label: "Status", value: "Active", tone: "success" },
-            { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
-            { key: "region", label: "Region", value: "APAC", tone: "info" },
-          ]}
-          onRemove={() => undefined}
-          onClear={() => undefined}
-        />
-        {item.slug === "data-table-saved-filters" ? (
-          <ButtonGroup
-            attached={false}
-            items={[
-              { key: "default", label: "Default", variant: "secondary" },
-              { key: "billing", label: "Billing" },
-              { key: "ops", label: "Operations" },
-            ]}
-          />
-        ) : null}
-      </div>
-    )
-  }
+  if (item.slug === "data-table-saved-filters") {
+    return (
+      <div className="grid gap-3">
+        <FilterBar
+          chips={[
+            { key: "status", label: "Status", value: "Active", tone: "success" },
+            { key: "owner", label: "Owner", value: "Azamat", tone: "default" },
+            { key: "region", label: "Region", value: "APAC", tone: "info" },
+          ]}
+          onRemoveChip={() => undefined}
+          onReset={() => undefined}
+        />
+        <ButtonGroup
+          attached={false}
+          items={[
+            { key: "default", label: "Default", variant: "secondary" },
+            { key: "billing", label: "Billing" },
+            { key: "ops", label: "Operations" },
+          ]}
+        />
+      </div>
+    )
+  }
 
   if (item.slug === "anchor-nav") {
     return (
@@ -660,25 +560,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "empty-search-state") {
-    return (
-      <EmptyState
-        title="No matching components"
-        description="Try a shorter keyword or switch to a broader family."
-        action={<Button size="sm">Clear search</Button>}
-      />
-    )
-  }
-
-  if (item.slug === "float-button") {
-    return (
-      <div className="relative min-h-28 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4">
-        <p className="text-sm text-muted-foreground">Floating action inside a content area.</p>
-        <FloatButton className="absolute bottom-4 right-4">+</FloatButton>
-      </div>
-    )
-  }
-
   if (item.slug === "data-list" || item.slug === "list") {
     return (
       <List
@@ -691,37 +572,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "key-value-card") {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Account summary</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <DescriptionList
-            items={[
-              { key: "owner", label: "Owner", value: "Azamat UI" },
-              { key: "plan", label: "Plan", value: "Scale" },
-              { key: "renewal", label: "Renewal", value: "July 14, 2026" },
-            ]}
-          />
-        </CardContent>
-      </Card>
-    )
-  }
-
-  if (item.slug === "entity-card" || item.slug === "file-card") {
-    return (
-      <EntityCard
-        title={item.slug === "file-card" ? "Design-spec.pdf" : "Azamat Workspace"}
-        description={item.slug === "file-card" ? "Shared with 4 reviewers." : "Admin console and live dashboard route."}
-        status={<Badge variant="secondary">Live</Badge>}
-        meta={item.slug === "file-card" ? "2.4 MB" : "Updated 8 min ago"}
-        actions={<Button size="sm" variant="outline">Open</Button>}
-      />
-    )
-  }
-
   if (item.slug === "status-legend") {
     return (
       <StatusLegend
@@ -749,26 +599,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "entity-header") {
-    return (
-      <Card>
-        <CardContent className="flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:justify-between">
-          <div className="space-y-2">
-            <Badge variant="outline">Customer</Badge>
-            <div>
-              <h3 className="text-xl font-semibold">Acme Holdings</h3>
-              <p className="text-sm text-muted-foreground">Enterprise account with billing and admin ownership.</p>
-            </div>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm">Archive</Button>
-            <Button size="sm">Edit</Button>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
   if (item.slug === "notification-center") {
     return (
       <List
@@ -822,7 +652,7 @@ function renderGenericPreviewSurface(
             key: "done",
             title: "Done",
             cards: [
-              { key: "3", title: "Publish 1.0.0", description: "Release package and sync docs." },
+              { key: "3", title: "Publish 1.0.0", description: "Release package and sync docs." },
             ],
           },
         ]}
@@ -830,29 +660,6 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "keyboard-shortcut") {
-    return (
-      <div className="flex flex-wrap gap-3">
-        <KeyboardShortcut keys={["Ctrl", "K"]} />
-        <KeyboardShortcut keys={["Shift", "Enter"]} />
-        <KeyboardShortcut keys={["Alt", "S"]} />
-      </div>
-    )
-  }
-
-  if (item.slug === "mention-input") {
-    return (
-      <MentionInput
-        defaultValue="@azamat can you review the DataTable route?"
-        options={[
-          { value: "@azamat", label: "@azamat" },
-          { value: "@team", label: "@team" },
-          { value: "@design", label: "@design" },
-        ]}
-      />
-    )
-  }
-
   if (item.slug === "menubar") {
     return (
       <Menubar>
@@ -887,11 +694,11 @@ function renderGenericPreviewSurface(
 
   if (item.slug === "overlay") {
     return (
-      <Grid columns={3} gap="sm">
+      <div className="grid gap-3 sm:grid-cols-3">
         <Card><CardContent className="p-4"><p className="font-medium">Dialog</p><p className="mt-1 text-sm text-muted-foreground">Focused confirmation and forms.</p></CardContent></Card>
         <Card><CardContent className="p-4"><p className="font-medium">Popover</p><p className="mt-1 text-sm text-muted-foreground">Compact contextual actions.</p></CardContent></Card>
         <Card><CardContent className="p-4"><p className="font-medium">Sheet</p><p className="mt-1 text-sm text-muted-foreground">Side panel workflows.</p></CardContent></Card>
-      </Grid>
+      </div>
     )
   }
 
@@ -916,20 +723,6 @@ function renderGenericPreviewSurface(
     return <QuantityStepper defaultValue={3} min={1} max={10} />
   }
 
-  if (item.slug === "repeater-field") {
-    return (
-      <Card>
-        <CardContent className="grid gap-3 p-5">
-          <Input placeholder="First item" defaultValue="Revenue KPI" />
-          <Input placeholder="Second item" defaultValue="Churn guardrail" />
-          <div>
-            <Button size="sm" variant="outline">Add row</Button>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
   if (item.slug === "resizable-panel") {
     return (
       <ResizablePanelGroup>
@@ -992,30 +785,57 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.category === "Overlay") {
-    return (
-      <div className="rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <p className="text-sm font-semibold text-[color:var(--aui-page-foreground)]">{item.title}</p>
-        <p className="mt-2 text-sm leading-6 text-[color:var(--aui-page-muted)]">
-          This overlay route needs a dedicated interactive demo. The docs fallback avoids rendering a different component as a substitute.
-        </p>
-      </div>
-    )
-  }
-
-  if (item.category === "Data Display") {
-    return (
-      <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
-        <div className="flex items-center justify-between gap-4">
-          <div>
-            <p className="text-lg font-semibold">{item.title}</p>
-            <p className="mt-1 text-sm text-muted-foreground">Generic display fallback kept neutral until a dedicated showcase is added.</p>
-          </div>
-          <Badge variant="outline">{mode}</Badge>
-        </div>
-      </div>
-    )
-  }
+  if (item.category === "Overlay") {
+    return (
+      <div className="grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold text-[color:var(--aui-page-foreground)]">{item.title}</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 text-[color:var(--aui-page-muted)]">
+              Overlay surfaces should stay compact, focused, and secondary to the route behind them.
+            </p>
+          </div>
+          <Badge variant="outline">Overlay</Badge>
+        </div>
+
+        <div className="rounded-2xl border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            <Button variant="ghost">Cancel</Button>
+            <Button variant="outline">Save draft</Button>
+            <Button>Confirm</Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (item.category === "Data Display") {
+    return (
+      <div className="grid gap-4 rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-lg font-semibold">{item.title}</p>
+            <p className="mt-1 text-sm text-muted-foreground">Display surfaces should prioritize readable values, compact metadata, and clear scanning order.</p>
+          </div>
+          <Badge variant="outline">{mode}</Badge>
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-3">
+          {[
+            { label: "Primary value", value: "84.2k", note: "Strong first read" },
+            { label: "Supporting meta", value: "12 teams", note: "Context stays secondary" },
+            { label: "Status", value: "Live", note: "One concise badge or tone" },
+          ].map((entry) => (
+            <div key={entry.label} className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{entry.label}</p>
+              <p className="mt-2 text-lg font-semibold text-[color:var(--aui-page-foreground)]">{entry.value}</p>
+              <p className="mt-1 text-sm text-muted-foreground">{entry.note}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">

package/packages/cli/vendor/src/showcase/premium/accordion/showcase.tsx

@@ -8,12 +8,14 @@ const docsItems = [
   {
     key: "tokens",
     title: "Theme tokens stay in one place",
+    meta: "P0",
     description: "Radius, color and shadow should not be redefined per route.",
     content: "Use shared CSS tokens so consumers can adapt the system without fighting deeply nested component styles.",
   },
   {
     key: "surface",
     title: "One canonical public surface",
+    badge: <Badge variant="secondary">Core</Badge>,
     description: "Teach one entry point before helper members.",
     content: "Start with Input, Select, DataTable, Card and Badge. Move aliases and advanced members lower in the docs hierarchy.",
   },
@@ -21,6 +23,7 @@ const docsItems = [
     key: "demo",
     title: "Real demos beat placeholder previews",
     description: "Each route should prove the actual component behavior.",
+    meta: "Docs",
     content: "A docs page should show the real installed component with interactive state, not a generic substitute card.",
   },
 ] as const
@@ -29,12 +32,14 @@ const releaseItems = [
   {
     key: "docs",
     title: "Docs updated",
+    badge: <Badge variant="secondary">Done</Badge>,
     description: "Public route and CLI snippet verified",
     content: "Component detail page, API notes, and install snippet were reviewed together before release.",
   },
   {
     key: "tokens",
     title: "Visual tokens synced",
+    meta: "Review",
     description: "No stray radius, border, or surface overrides",
     content: "The route uses package tokens directly so the result matches what consumers install.",
   },
@@ -42,6 +47,8 @@ const releaseItems = [
     key: "qa",
     title: "QA preview checked",
     description: "Build and interactive preview passed",
+    disabled: true,
+    disabledReason: "Blocked until release candidate is built.",
     content: "The component was verified with type-check and production build before push.",
   },
 ] as const
@@ -49,6 +56,7 @@ const releaseItems = [
 export function AccordionShowcase() {
   const [singleValue, setSingleValue] = React.useState<string | string[]>("surface")
   const [multiValue, setMultiValue] = React.useState<string | string[]>(["docs"])
+  const [variant, setVariant] = React.useState<"default" | "soft" | "ghost">("soft")
 
   return (
     <div className="space-y-0">
@@ -61,13 +69,25 @@ export function AccordionShowcase() {
       </section>
 
       <section className={panelClass}>
+        <div className="mb-5 flex flex-wrap gap-2">
+          {(["soft", "default", "ghost"] as const).map((item) => (
+            <button
+              key={item}
+              type="button"
+              className={`rounded-full border px-3 py-1.5 text-xs font-medium ${variant === item ? "border-primary bg-primary/10 text-foreground" : "border-[color:var(--aui-divider)] text-muted-foreground"}`}
+              onClick={() => setVariant(item)}
+            >
+              {item}
+            </button>
+          ))}
+        </div>
         <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
           <div>
             <p className="text-lg font-semibold aui-text-strong">Documentation flow</p>
             <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
               Single-open mode keeps the user focused on one explanation at a time.
             </p>
-            <Accordion className="mt-5" type="single" value={singleValue} onValueChange={setSingleValue} items={[...docsItems]} />
+            <Accordion className="mt-5" type="single" variant={variant} size="lg" value={singleValue} onValueChange={setSingleValue} items={[...docsItems]} />
           </div>
 
           <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
@@ -100,7 +120,17 @@ export function AccordionShowcase() {
             </div>
           </div>
 
-          <Accordion className="xl:mt-8" type="multiple" value={multiValue} onValueChange={setMultiValue} items={[...releaseItems]} />
+          <Accordion
+            className="xl:mt-8"
+            type="multiple"
+            variant={variant}
+            value={multiValue}
+            onValueChange={setMultiValue}
+            items={releaseItems.map((item, index) => ({
+              ...item,
+              indicatorPosition: index === 0 ? "start" : "end",
+            }))}
+          />
         </div>
       </section>
     </div>

package/packages/cli/vendor/src/showcase/premium/action-menu/showcase.tsx

@@ -10,6 +10,7 @@ const panelClass =
 
 export function ActionMenuShowcase({ mode }: ComponentDemoProps) {
   const [lastAction, setLastAction] = React.useState("No action selected")
+  const [pinOpen, setPinOpen] = React.useState(false)
 
   return (
     <div className="space-y-5">
@@ -38,10 +39,11 @@ export function ActionMenuShowcase({ mode }: ComponentDemoProps) {
             </div>
             <ActionMenu
               label="Invoice actions"
+              closeOnSelect={!pinOpen}
               actions={[
-                { key: "open", label: "Open details", icon: <ExternalLinkIcon className="size-4" />, onSelect: async () => setLastAction("Opened invoice details") },
-                { key: "duplicate", label: "Duplicate", icon: <CopyIcon className="size-4" />, onSelect: async () => setLastAction("Duplicated invoice workflow") },
-                { key: "archive", label: "Archive", icon: <ArchiveIcon className="size-4" />, destructive: true, onSelect: async () => setLastAction("Archived invoice workflow") },
+                { key: "open", section: "Primary", label: "Open details", description: "Jump into the full invoice route", icon: <ExternalLinkIcon className="size-4" />, shortcut: "↵", onSelect: async () => setLastAction("Opened invoice details") },
+                { key: "duplicate", section: "Primary", label: "Duplicate", description: "Create a new workflow from this one", icon: <CopyIcon className="size-4" />, keepOpen: pinOpen, onSelect: async () => setLastAction("Duplicated invoice workflow") },
+                { key: "archive", section: "Danger zone", label: "Archive", description: "Hide it from active operational queues", icon: <ArchiveIcon className="size-4" />, destructive: true, onSelect: async () => setLastAction("Archived invoice workflow") },
               ]}
             />
           </div>
@@ -49,6 +51,13 @@ export function ActionMenuShowcase({ mode }: ComponentDemoProps) {
         <section className={panelClass}>
           <p className="text-sm font-medium aui-text-muted">Last action</p>
           <p className="mt-3 text-base font-medium aui-text-strong">{lastAction}</p>
+          <button
+            type="button"
+            className="mt-4 rounded-full border border-[color:var(--aui-divider)] px-3 py-1.5 text-xs font-medium"
+            onClick={() => setPinOpen((value) => !value)}
+          >
+            {pinOpen ? "Close on select off" : "Close on select on"}
+          </button>
         </section>
       </div>
 

package/packages/cli/vendor/src/showcase/premium/activity-feed/showcase.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { ActivityFeed } from "@/index"
+import { ActivityFeed, Badge, Button } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -18,6 +18,7 @@ type ToneFilter = (typeof toneFilters)[number]
 export function ActivityFeedShowcase({ mode }: ComponentDemoProps) {
   const [compact, setCompact] = React.useState(mode === "playground")
   const [filter, setFilter] = React.useState<ToneFilter>("all")
+  const [selectedId, setSelectedId] = React.useState<string | null>(null)
 
   const visibleItems = React.useMemo(() => {
     if (filter === "all") {
@@ -55,10 +56,22 @@ export function ActivityFeedShowcase({ mode }: ComponentDemoProps) {
       <ActivityFeed
         title="Recent activity"
         description="System and team events are grouped into one lightweight feed."
-        items={visibleItems}
+        items={visibleItems.map((item, index) => ({
+          ...item,
+          unread: index === 0,
+          badge: index === 0 ? <Badge variant="secondary">Unread</Badge> : undefined,
+          interactive: true,
+          onSelect: () => setSelectedId(item.id),
+          actions: (
+            <Button size="xs" variant="ghost" onClick={() => setSelectedId(item.id)}>
+              Review
+            </Button>
+          ),
+        }))}
         compact={compact}
         empty={<span className="aui-text-muted text-sm">No matching activity for selected tone.</span>}
       />
+      <div className="aui-text-muted text-sm">Selected item: {selectedId ?? "none"}</div>
     </div>
   )
 }