tembro 2.0.6 → 2.1.1

package/packages/cli/vendor/src/components/form/form-field-shell.tsx

@@ -10,6 +10,8 @@ export type FormFieldShellProps = React.ComponentProps<"div"> & {
   label?: React.ReactNode
   description?: React.ReactNode
   error?: React.ReactNode
+  success?: React.ReactNode
+  loading?: boolean
   required?: boolean
   htmlFor?: string
   labelId?: string
@@ -34,6 +36,8 @@ export type FormFieldShellControlProps = Pick<
   FormFieldShellProps,
   | "label"
   | "description"
+  | "success"
+  | "loading"
   | "required"
   | "className"
   | "htmlFor"
@@ -89,6 +93,8 @@ function FormFieldShell({
   label,
   description,
   error,
+  success,
+  loading = false,
   required = false,
   htmlFor,
   labelId,
@@ -181,13 +187,30 @@ function FormFieldShell({
       {showErrorIcon && <span className="mt-1 shrink-0">{resolvedErrorIcon}</span>}
       <span className="min-w-0">{error}</span>
     </p>
-  ) : null
-
-  return (
+  ) : null
+
+  const successNode = success && !error ? (
+    <p
+      data-slot="form-field-success"
+      className="rounded-[min(var(--radius-xl),16px)] border border-emerald-500/18 bg-emerald-500/8 px-3 py-2 text-sm font-medium leading-6 text-emerald-700 dark:text-emerald-300"
+    >
+      {success}
+    </p>
+  ) : null
+
+  const loadingNode = loading ? (
+    <p data-slot="form-field-loading" className="text-sm leading-6 text-muted-foreground">
+      Loading...
+    </p>
+  ) : null
+
+  return (
     <div
       data-slot="form-field-shell"
       data-layout={layout}
       data-invalid={Boolean(error) || undefined}
+      data-success={Boolean(success && !error) || undefined}
+      data-loading={loading || undefined}
       data-disabled={disabled || undefined}
       data-readonly={readOnly || undefined}
       aria-disabled={disabled || undefined}
@@ -202,7 +225,9 @@ function FormFieldShell({
           </div>
           <div className="grid min-w-0 gap-2">
             {content}
+            {loadingNode}
             {hasDescriptionBottom && descriptionNode}
+            {successNode}
             {errorNode}
           </div>
         </>
@@ -212,17 +237,21 @@ function FormFieldShell({
           <div className="grid min-w-0 flex-1 gap-2">
             {hasDescriptionTop && descriptionNode}
             {content}
+            {loadingNode}
             {hasDescriptionBottom && descriptionNode}
-            {errorNode}
+            {successNode}
+            {errorNode}
           </div>
         </>
       ) : (
         <>
           {header}
-          {hasDescriptionTop && descriptionNode}
-          {content}
-          {hasDescriptionBottom && descriptionNode}
-          {errorNode}
+          {hasDescriptionTop && descriptionNode}
+          {content}
+          {loadingNode}
+          {hasDescriptionBottom && descriptionNode}
+          {successNode}
+          {errorNode}
         </>
       )}
     </div>

package/packages/cli/vendor/src/components/form/form-input.tsx

@@ -192,6 +192,8 @@ function buildShellProps<
   return {
     label: props.label,
     description: props.description,
+    success: props.success,
+    loading: props.loading,
     required: props.required,
     className: props.className,
     htmlFor: props.id ?? props.name,

package/packages/cli/vendor/src/components/form/form-select.tsx

@@ -67,6 +67,8 @@ function buildShellProps<
   return {
     label: props.label,
     description: props.description,
+    success: props.success,
+    loading: props.loading,
     required: props.required,
     className: props.className,
     htmlFor: props.name,

package/packages/cli/vendor/src/components/form/form-switch.tsx

@@ -29,9 +29,11 @@ function FormSwitch<
 >({
   control,
   name,
-  label,
-  description,
-  required,
+  label,
+  description,
+  success,
+  loading,
+  required,
   className,
   layout,
   descriptionPosition,
@@ -96,6 +98,8 @@ function FormSwitch<
           <FormFieldShell
             label={label}
             description={description}
+            success={success}
+            loading={loading}
             required={required}
             error={error}
             htmlFor={switchId}
@@ -122,6 +126,8 @@ function FormSwitch<
         ) : (
           <FormFieldShell
             error={error}
+            success={success}
+            loading={loading}
             className={className}
             descriptionId={resolvedIds.descriptionId}
             errorId={resolvedIds.errorId}

package/packages/cli/vendor/src/components/form/form-textarea.tsx

@@ -29,8 +29,10 @@ function FormTextarea<
   name,
   rules,
   label,
-  description,
-  required,
+  description,
+  success,
+  loading,
+  required,
   className,
   layout,
   descriptionPosition,
@@ -68,6 +70,8 @@ function FormTextarea<
           <FormFieldShell
             label={label}
             description={description}
+            success={success}
+            loading={loading}
             required={required}
             error={error}
             htmlFor={textareaId}

package/packages/cli/vendor/src/components/layout/app-sidebar.tsx

@@ -59,6 +59,7 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
   mobileToggleClassName?: string
   mobilePanelClassName?: string
   mobileOverlayClassName?: string
+  footerClassName?: string
   renderMobileToggle?: (state: { open: boolean; setOpen: (open: boolean) => void }) => React.ReactNode
   onItemSelect?: (item: AppSidebarNavItem) => void
   renderItem?: (item: AppSidebarNavItem, state: { collapsed: boolean }) => React.ReactNode
@@ -433,6 +434,7 @@ function SidebarSurface({
   footerAccount,
   secondaryActions = [],
   footerSecondary,
+  footerClassName,
   tooltipOnCollapsed,
   onItemSelect,
   renderItem,
@@ -531,7 +533,7 @@ function SidebarSurface({
       </nav>
 
       {(footerAccount || footerSecondary || footer || visibleSecondaryActions.length > 0 || (collapsed && (collapsedRail || visibleRailItems.length > 0))) && (
-        <div data-slot="app-sidebar-footer" className="shrink-0 border-t p-3">
+        <div data-slot="app-sidebar-footer" className={cn("shrink-0 border-t p-3", footerClassName)}>
           {collapsed ? (
             <>
               {visibleRailItems.length > 0 ? (

package/packages/cli/vendor/src/components/layout/breadcrumbs.tsx

@@ -19,6 +19,7 @@ export type BreadcrumbsProps = React.ComponentProps<"nav"> & {
   collapseLabel?: React.ReactNode
   separator?: React.ReactNode
   wrap?: boolean
+  currentItemLabel?: React.AriaAttributes["aria-current"]
   renderLink?: (props: React.ComponentProps<"a"> & { item: BreadcrumbItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
 }
 
@@ -46,6 +47,7 @@ function Breadcrumbs({
   collapseLabel = "…",
   separator = <ChevronRightIcon className="size-3.5" />,
   wrap = false,
+  currentItemLabel,
   renderLink,
   ...props
 }: BreadcrumbsProps) {
@@ -106,7 +108,7 @@ function Breadcrumbs({
             ) : (
               <span
                 data-slot="breadcrumbs-current"
-                aria-current={isCurrent ? (item.currentLabel ?? "page") : undefined}
+                aria-current={isCurrent ? ((item.currentLabel ?? currentItemLabel ?? "page") as React.AriaAttributes["aria-current"]) : undefined}
                 className={cn(
                   "inline-flex min-w-0 items-center gap-1.5 truncate rounded-[var(--radius-sm)] px-1 py-0.5",
                   isCurrent && "bg-accent/45 font-medium text-foreground"

package/packages/cli/vendor/src/components/modern/calendar-scheduler.tsx

@@ -2,18 +2,22 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type CalendarSchedulerEvent = {
-  id: string
-  title: React.ReactNode
-  date: string
-  time?: string
-  tone?: "default" | "success" | "warning" | "danger"
-}
-
+export type CalendarSchedulerEvent = {
+  id: string
+  title: React.ReactNode
+  date: string
+  time?: string
+  tone?: "default" | "success" | "warning" | "danger"
+  durationMinutes?: number
+}
+
 export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
   events: CalendarSchedulerEvent[]
   days?: string[]
+  view?: "day" | "week" | "month"
   empty?: React.ReactNode
+  onCreateEvent?: (date: string) => void
+  onEventClick?: (event: CalendarSchedulerEvent) => void
 }
 
 const toneClassName = {
@@ -23,11 +27,11 @@ const toneClassName = {
   danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
 }
 
-function CalendarScheduler({ events, days, empty = "No events scheduled.", className, ...props }: CalendarSchedulerProps) {
+function CalendarScheduler({ events, days, view = "week", empty = "No events scheduled.", onCreateEvent, onEventClick, className, ...props }: CalendarSchedulerProps) {
   const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
 
   return (
-    <div data-slot="calendar-scheduler" className={cn("grid gap-3", className)} {...props}>
+    <div data-slot="calendar-scheduler" data-view={view} className={cn("grid gap-3", view === "month" && "md:grid-cols-2 xl:grid-cols-3", className)} {...props}>
       {visibleDays.map((day) => (
         <section key={day} className="rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]">
           <div className="mb-3 flex items-center justify-between gap-3">
@@ -41,16 +45,27 @@ function CalendarScheduler({ events, days, empty = "No events scheduled.", class
               </div>
             ) : (
               events.filter((event) => event.date === day).map((event) => (
-                <div key={event.id} className={cn("rounded-[var(--radius-md)] border px-3 py-2.5 text-sm shadow-sm", toneClassName[event.tone ?? "default"])}>
+                <button
+                  key={event.id}
+                  type="button"
+                  className={cn("rounded-[var(--radius-md)] border px-3 py-2.5 text-left text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", toneClassName[event.tone ?? "default"])}
+                  onClick={() => onEventClick?.(event)}
+                >
                   <div className="font-medium">{event.title}</div>
                   {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
-                </div>
+                  {event.durationMinutes && <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div>}
+                </button>
               ))
             )}
           </div>
+          {onCreateEvent && (
+            <button type="button" className="mt-3 w-full rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50" onClick={() => onCreateEvent(day)}>
+              Create event
+            </button>
+          )}
         </section>
       ))}
-    </div>
+    </div>
   )
 }
 

package/packages/cli/vendor/src/components/modern/dual-list-picker.tsx

@@ -8,44 +8,112 @@ export type DualListItem = {
   disabled?: boolean
 }
 
-export type DualListPickerProps = React.ComponentProps<"div"> & {
-  items: DualListItem[]
-  picked?: string[]
-  onPickedChange?: (value: string[]) => void
-  availableTitle?: React.ReactNode
-  pickedTitle?: React.ReactNode
-}
-
-function DualListPicker({ items, picked = [], onPickedChange, availableTitle = "Available", pickedTitle = "Selected", className, ...props }: DualListPickerProps) {
-  const pickedSet = new Set(picked)
-  const availableItems = items.filter((item) => !pickedSet.has(item.value))
-  const pickedItems = items.filter((item) => pickedSet.has(item.value))
-
-  function toggle(value: string) {
-    const next = pickedSet.has(value) ? picked.filter((item) => item !== value) : [...picked, value]
-    onPickedChange?.(next)
-  }
-
-  const renderColumn = (title: React.ReactNode, columnItems: DualListItem[]) => (
-    <div className="min-h-48 rounded-lg border bg-card">
-      <div className="border-b px-3 py-2 text-sm font-medium">{title}</div>
-      <div className="grid gap-1 p-2">
-        {columnItems.map((item) => (
-          <button key={item.value} type="button" disabled={item.disabled} className="flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted disabled:opacity-50" onClick={() => toggle(item.value)}>
-            <span>{item.label}</span>
-            <span className="text-muted-foreground">{pickedSet.has(item.value) ? "−" : "+"}</span>
-          </button>
+export type DualListPickerProps = React.ComponentProps<"div"> & {
+  items: DualListItem[]
+  picked?: string[]
+  onPickedChange?: (value: string[]) => void
+  availableTitle?: React.ReactNode
+  pickedTitle?: React.ReactNode
+  searchPlaceholder?: string
+  emptyMessage?: React.ReactNode
+  maxPicked?: number
+  transferAll?: boolean
+}
+
+function DualListPicker({
+  items,
+  picked = [],
+  onPickedChange,
+  availableTitle = "Available",
+  pickedTitle = "Selected",
+  searchPlaceholder = "Search items...",
+  emptyMessage = "No items.",
+  maxPicked,
+  transferAll = true,
+  className,
+  ...props
+}: DualListPickerProps) {
+  const [query, setQuery] = React.useState("")
+  const pickedSet = new Set(picked)
+  const normalizedQuery = query.trim().toLowerCase()
+  const matchesQuery = (item: DualListItem) => {
+    if (!normalizedQuery) return true
+    return String(item.label).toLowerCase().includes(normalizedQuery) || item.value.toLowerCase().includes(normalizedQuery)
+  }
+  const availableItems = items.filter((item) => !pickedSet.has(item.value) && matchesQuery(item))
+  const pickedItems = items.filter((item) => pickedSet.has(item.value) && matchesQuery(item))
+  const maxReached = maxPicked !== undefined && picked.length >= maxPicked
+
+  function toggle(value: string) {
+    const isPicked = pickedSet.has(value)
+    if (!isPicked && maxReached) return
+    const next = isPicked ? picked.filter((item) => item !== value) : [...picked, value]
+    onPickedChange?.(next)
+  }
+
+  function addAll() {
+    const next = [...picked]
+    for (const item of items) {
+      if (item.disabled || pickedSet.has(item.value)) continue
+      if (maxPicked !== undefined && next.length >= maxPicked) break
+      next.push(item.value)
+    }
+    onPickedChange?.(next)
+  }
+
+  function removeAll() {
+    onPickedChange?.([])
+  }
+
+  const renderColumn = (title: React.ReactNode, columnItems: DualListItem[], mode: "available" | "picked") => (
+    <div className="min-h-48 rounded-lg border bg-card">
+      <div className="flex items-center justify-between gap-2 border-b px-3 py-2 text-sm font-medium">
+        <span>{title}</span>
+        <span className="text-xs font-normal text-muted-foreground">{columnItems.length}</span>
+      </div>
+      <div className="grid gap-1 p-2">
+        {columnItems.length === 0 ? (
+          <div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
+        ) : columnItems.map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            disabled={item.disabled || (mode === "available" && maxReached)}
+            className="flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:opacity-50"
+            aria-pressed={pickedSet.has(item.value)}
+            onClick={() => toggle(item.value)}
+          >
+            <span>{item.label}</span>
+            <span className="text-muted-foreground">{pickedSet.has(item.value) ? "−" : "+"}</span>
+          </button>
         ))}
       </div>
     </div>
   )
-
-  return (
-    <div data-slot="dual-list-picker" className={cn("grid gap-3 md:grid-cols-2", className)} {...props}>
-      {renderColumn(availableTitle, availableItems)}
-      {renderColumn(pickedTitle, pickedItems)}
-    </div>
-  )
-}
+
+  return (
+    <div data-slot="dual-list-picker" className={cn("grid gap-3", className)} {...props}>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <input
+          value={query}
+          placeholder={searchPlaceholder}
+          className="h-9 min-w-0 rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40 sm:max-w-xs"
+          onChange={(event) => setQuery(event.currentTarget.value)}
+        />
+        {transferAll && (
+          <div className="flex gap-2">
+            <button type="button" className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50" disabled={maxReached} onClick={addAll}>Add all</button>
+            <button type="button" className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50" disabled={picked.length === 0} onClick={removeAll}>Remove all</button>
+          </div>
+        )}
+      </div>
+      <div className="grid gap-3 md:grid-cols-2">
+        {renderColumn(availableTitle, availableItems, "available")}
+        {renderColumn(pickedTitle, pickedItems, "picked")}
+      </div>
+      {maxPicked !== undefined && <div className="text-xs text-muted-foreground">{picked.length} / {maxPicked} selected</div>}
+    </div>
+  )
+}
 
 export { DualListPicker }

package/packages/cli/vendor/src/components/modern/rich-text-editor.tsx

@@ -2,14 +2,16 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "onChange"> & {
-  value?: string
-  onValueChange?: (value: string) => void
-  placeholder?: string
-}
-
-function RichTextEditor({ value, onValueChange, placeholder = "Write something...", className, ...props }: RichTextEditorProps) {
-  const ref = React.useRef<HTMLDivElement | null>(null)
+export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  output?: "html" | "text"
+  disabled?: boolean
+}
+
+function RichTextEditor({ value, onValueChange, placeholder = "Write something...", output = "html", disabled = false, className, ...props }: RichTextEditorProps) {
+  const ref = React.useRef<HTMLDivElement | null>(null)
 
   React.useEffect(() => {
     if (ref.current && value !== undefined && ref.current.innerHTML !== value) {
@@ -18,27 +20,28 @@ function RichTextEditor({ value, onValueChange, placeholder = "Write something..
   }, [value])
 
   return (
-    <div data-slot="rich-text-editor" className={cn("grid gap-2 rounded-lg border bg-background p-2", className)} {...props}>
-      <div className="flex flex-wrap gap-1 border-b pb-2">
+    <div data-slot="rich-text-editor" data-disabled={disabled || undefined} className={cn("grid gap-2 rounded-lg border bg-background p-2", disabled && "opacity-60", className)} {...props}>
+      <div className="flex flex-wrap gap-1 border-b pb-2">
         {[
           ["bold", "B"],
           ["italic", "I"],
           ["underline", "U"],
         ].map(([command, label]) => (
-          <button key={command} type="button" className="rounded border px-2 py-1 text-xs font-medium" onClick={() => document.execCommand(command)}>
-            {label}
-          </button>
+          <button key={command} type="button" disabled={disabled} className="rounded border px-2 py-1 text-xs font-medium disabled:opacity-50" onClick={() => document.execCommand(command)}>
+            {label}
+          </button>
         ))}
       </div>
       <div
-        ref={ref}
-        contentEditable
-        data-placeholder={placeholder}
-        className="min-h-32 rounded-md p-2 text-sm outline-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]"
-        onInput={(event) => onValueChange?.(event.currentTarget.innerHTML)}
-      />
-    </div>
-  )
-}
+        ref={ref}
+        contentEditable={!disabled}
+        aria-disabled={disabled || undefined}
+        data-placeholder={placeholder}
+        className="min-h-32 rounded-md p-2 text-sm outline-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]"
+        onInput={(event) => onValueChange?.(output === "text" ? event.currentTarget.textContent ?? "" : event.currentTarget.innerHTML)}
+      />
+    </div>
+  )
+}
 
 export { RichTextEditor }

package/packages/cli/vendor/src/components/modern/tour.tsx

@@ -2,38 +2,56 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type TourStep = {
-  title: React.ReactNode
-  description?: React.ReactNode
-}
+export type TourStep = {
+  title: React.ReactNode
+  description?: React.ReactNode
+  target?: string
+}
 
 export type TourProps = React.ComponentProps<"div"> & {
   steps: TourStep[]
-  index?: number
-  onIndexChange?: (index: number) => void
-  onClose?: () => void
-}
-
-function Tour({ steps, index = 0, onIndexChange, onClose, className, ...props }: TourProps) {
-  const step = steps[index]
-  if (!step) return null
-
-  return (
-    <div data-slot="tour" className={cn("rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg", className)} {...props}>
-      <div className="grid gap-2">
-        <div className="font-semibold">{step.title}</div>
-        {step.description && <div className="text-sm text-muted-foreground">{step.description}</div>}
-        <div className="flex items-center justify-between gap-3 pt-2">
-          <span className="text-xs text-muted-foreground">{index + 1} / {steps.length}</span>
-          <div className="flex gap-2">
-            <button type="button" className="rounded-md border px-2.5 py-1 text-sm" disabled={index === 0} onClick={() => onIndexChange?.(index - 1)}>Back</button>
-            {index < steps.length - 1 ? (
-              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={() => onIndexChange?.(index + 1)}>Next</button>
-            ) : (
-              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={onClose}>Done</button>
-            )}
-          </div>
-        </div>
+  index?: number
+  onIndexChange?: (index: number) => void
+  onClose?: () => void
+  onSkip?: () => void
+  onFinish?: () => void
+  placement?: "top" | "right" | "bottom" | "left"
+}
+
+function Tour({ steps, index = 0, onIndexChange, onClose, onSkip, onFinish, placement = "bottom", className, ...props }: TourProps) {
+  const step = steps[index]
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+  React.useEffect(() => {
+    containerRef.current?.focus()
+  }, [index])
+
+  if (!step) return null
+
+  return (
+    <div
+      ref={containerRef}
+      data-slot="tour"
+      data-placement={placement}
+      tabIndex={-1}
+      className={cn("rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/40", className)}
+      {...props}
+    >
+      <div className="grid gap-2">
+        <div className="font-semibold">{step.title}</div>
+        {step.description && <div className="text-sm text-muted-foreground">{step.description}</div>}
+        {step.target && <div className="text-xs text-muted-foreground">{step.target}</div>}
+        <div className="flex items-center justify-between gap-3 pt-2">
+          <span className="text-xs text-muted-foreground">{index + 1} / {steps.length}</span>
+          <div className="flex gap-2">
+            <button type="button" className="rounded-md border px-2.5 py-1 text-sm" onClick={() => { onSkip?.(); onClose?.() }}>Skip</button>
+            <button type="button" className="rounded-md border px-2.5 py-1 text-sm" disabled={index === 0} onClick={() => onIndexChange?.(index - 1)}>Back</button>
+            {index < steps.length - 1 ? (
+              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={() => onIndexChange?.(index + 1)}>Next</button>
+            ) : (
+              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={() => { onFinish?.(); onClose?.() }}>Done</button>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   )

package/packages/cli/vendor/src/components/navigation/command-bar.tsx

@@ -5,11 +5,15 @@ export type CommandBarProps = React.ComponentProps<"div"> & {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   position?: "bottom" | "top"
+  grouped?: boolean
+  label?: React.ReactNode
 }
 
 function CommandBar({
   open = true,
   position = "bottom",
+  grouped = false,
+  label,
   children,
   className,
   ...props
@@ -22,10 +26,12 @@ function CommandBar({
       className={cn(
         "fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/60",
         position === "bottom" ? "bottom-6" : "top-6",
+        grouped && "gap-3 rounded-[28px] px-3 py-2.5",
         className
       )}
       {...props}
     >
+      {label ? <span className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">{label}</span> : null}
       {children}
     </div>
   )

package/packages/cli/vendor/src/components/navigation/demo.tsx

@@ -3,7 +3,6 @@ import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 export const navigationShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
   component("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
-  component("anchor-nav", "AnchorNav", "navigation", "Section jump navigation for long detail pages."),
   component("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
   component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
 ])