tembro 3.1.16 → 4.0.0

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

@@ -9,15 +9,36 @@ export type CalendarSchedulerEvent = {
   time?: string
   tone?: "default" | "success" | "warning" | "danger"
   durationMinutes?: number
+  description?: React.ReactNode
+  meta?: React.ReactNode
+  badge?: React.ReactNode
+  icon?: React.ReactNode
+  disabled?: boolean
+  hidden?: boolean
+  className?: string
 }
 
 export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
   events: CalendarSchedulerEvent[]
   days?: string[]
   view?: "day" | "week" | "month"
+  variant?: "board" | "agenda"
+  density?: "compact" | "default" | "comfortable"
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
   empty?: React.ReactNode
+  selectedEventId?: string
+  defaultSelectedEventId?: string
+  onSelectedEventChange?: (eventId: string, event: CalendarSchedulerEvent) => void
   onCreateEvent?: (date: string) => void
   onEventClick?: (event: CalendarSchedulerEvent) => void
+  renderEvent?: (event: CalendarSchedulerEvent, state: { selected: boolean }) => React.ReactNode
+  createLabel?: React.ReactNode
+  showCount?: boolean
+  dayClassName?: string
+  eventClassName?: string
+  formatDay?: (day: string) => React.ReactNode
 }
 
 const toneClassName = {
@@ -31,39 +52,52 @@ function CalendarScheduler({
   events,
   days,
   view = "week",
+  variant = "board",
+  density = "default",
+  title,
+  description,
+  actions,
   empty = "No events scheduled.",
+  selectedEventId,
+  defaultSelectedEventId,
+  onSelectedEventChange,
   onCreateEvent,
   onEventClick,
+  renderEvent,
+  createLabel = "Create event",
+  showCount = true,
+  dayClassName,
+  eventClassName,
+  formatDay,
   className,
   ...props
 }: CalendarSchedulerProps) {
-  const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
+  const [internalSelectedEventId, setInternalSelectedEventId] = React.useState(defaultSelectedEventId)
+  const currentSelectedEventId = selectedEventId ?? internalSelectedEventId
+  const visibleEvents = events.filter((event) => !event.hidden)
+  const visibleDays = days ?? Array.from(new Set(visibleEvents.map((event) => event.date)))
+
+  const selectEvent = (event: CalendarSchedulerEvent) => {
+    if (event.disabled) return
+    if (selectedEventId === undefined) setInternalSelectedEventId(event.id)
+    onSelectedEventChange?.(event.id, event)
+    onEventClick?.(event)
+  }
 
   if (visibleDays.length === 0) {
     return (
       <div
         data-slot="calendar-scheduler"
         data-view={view}
-        className={cn(
-          "rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-5 text-sm text-muted-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]",
-          className
-        )}
+        data-variant={variant}
+        data-density={density}
+        className={cn("rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-5 text-sm text-muted-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]", className)}
         {...props}
       >
         <div className="flex min-h-32 items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-muted/20 px-4 py-6 text-center">
           <div className="space-y-1.5">
-            <p data-empty="true" className="text-sm font-medium text-foreground">
-              {empty}
-            </p>
-            {onCreateEvent ? (
-              <button
-                type="button"
-                className="rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50"
-                onClick={() => onCreateEvent("today")}
-              >
-                Create event
-              </button>
-            ) : null}
+            <p data-empty="true" className="text-sm font-medium text-foreground">{empty}</p>
+            {onCreateEvent ? <button type="button" className="rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50" onClick={() => onCreateEvent("today")}>{createLabel}</button> : null}
           </div>
         </div>
       </div>
@@ -74,53 +108,79 @@ function CalendarScheduler({
     <div
       data-slot="calendar-scheduler"
       data-view={view}
-      className={cn("grid gap-3", view === "month" && "md:grid-cols-2 xl:grid-cols-3", className)}
+      data-variant={variant}
+      data-density={density}
+      className={cn(
+        "grid",
+        density === "compact" ? "gap-2" : density === "comfortable" ? "gap-5" : "gap-3",
+        view === "month" && variant === "board" && "md:grid-cols-2 xl:grid-cols-3",
+        variant === "agenda" && "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))]",
+        className
+      )}
       {...props}
     >
+      {(title || description || actions) ? (
+        <div data-slot="calendar-scheduler-header" className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-[min(100%,16rem)] flex-1 space-y-1">
+            {title ? <h2 className="text-base font-semibold text-foreground">{title}</h2> : null}
+            {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+          </div>
+          {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+        </div>
+      ) : null}
+
       {visibleDays.map((day) => {
-        const dayEvents = events.filter((event) => event.date === day)
+        const dayEvents = visibleEvents.filter((event) => event.date === day)
 
         return (
-          <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))]"
-          >
+          <section key={day} data-slot="calendar-scheduler-day" className={cn(variant === "board" && "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))]", dayClassName)}>
             <div className="mb-3 flex items-center justify-between gap-3">
-              <div className="text-sm font-semibold text-foreground">{day}</div>
-              <div className="text-xs text-muted-foreground">{dayEvents.length} items</div>
+              <div className="text-sm font-semibold text-foreground">{formatDay?.(day) ?? day}</div>
+              {showCount ? <div className="text-xs text-muted-foreground">{dayEvents.length} items</div> : null}
             </div>
-            <div className="grid gap-2">
+            <div className={cn("grid", density === "compact" ? "gap-1.5" : "gap-2")}>
               {dayEvents.length === 0 ? (
-                <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">
-                  {empty}
-                </div>
-              ) : (
-                dayEvents.map((event) => (
+                <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">{empty}</div>
+              ) : dayEvents.map((event) => {
+                const selected = currentSelectedEventId === event.id
+                return (
                   <button
                     key={event.id}
                     type="button"
+                    disabled={event.disabled}
+                    data-slot="calendar-scheduler-event"
+                    data-selected={selected || undefined}
                     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"],
+                      "border text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
+                      variant === "board" ? "rounded-[var(--radius-md)] px-3 py-2.5 shadow-sm" : "grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 rounded-[var(--radius-md)] bg-background px-3 py-3 hover:bg-muted/35 data-[selected=true]:border-primary/40 data-[selected=true]:bg-primary/5",
+                      variant === "board" && toneClassName[event.tone ?? "default"], eventClassName, event.className
                     )}
-                    onClick={() => onEventClick?.(event)}
+                    onClick={() => selectEvent(event)}
                   >
-                    <div className="font-medium">{event.title}</div>
-                    {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
-                    {event.durationMinutes && <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div>}
+                    {renderEvent ? renderEvent(event, { selected }) : variant === "agenda" ? (
+                      <>
+                        <span className="inline-flex min-w-14 items-center gap-1.5 font-medium">{event.icon}{event.time ?? "—"}</span>
+                        <span className="min-w-0">
+                          <span className="block truncate font-medium text-foreground">{event.title}</span>
+                          {event.description ? <span className="mt-0.5 block text-xs text-muted-foreground">{event.description}</span> : null}
+                          {event.meta ? <span className="mt-1 block text-xs text-muted-foreground">{event.meta}</span> : null}
+                        </span>
+                        {event.badge ? <span className="shrink-0">{event.badge}</span> : event.durationMinutes ? <span className="shrink-0 text-xs opacity-70">{event.durationMinutes} min</span> : null}
+                      </>
+                    ) : (
+                      <>
+                        <div className="font-medium">{event.title}</div>
+                        {event.description ? <div className="mt-1 text-xs opacity-80">{event.description}</div> : null}
+                        {event.time ? <div className="mt-1 text-xs opacity-70">{event.time}</div> : null}
+                        {event.durationMinutes ? <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div> : null}
+                        {event.meta ? <div className="mt-1 text-xs opacity-70">{event.meta}</div> : null}
+                      </>
+                    )}
                   </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>
-            )}
+            {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)}>{createLabel}</button> : null}
           </section>
         )
       })}

package/packages/cli/vendor/src/components/patterns/empty-state.tsx

@@ -1,8 +1,7 @@
 import * as React from "react"
-import { AlertCircleIcon, SearchXIcon } from "lucide-react"
 
+import { StateView, type StateViewProps } from "@/components/feedback/state-view"
 import { Button, buttonVariants } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
 
 export type EmptyStateTone = "empty" | "error" | "info"
 
@@ -13,85 +12,33 @@ export type EmptyStateAction = {
   variant?: React.ComponentProps<typeof Button>["variant"]
 }
 
-export type EmptyStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+export type EmptyStateProps = Omit<StateViewProps, "status" | "tone" | "actions" | "size" | "slot"> & {
   tone?: EmptyStateTone
-  title?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
   primaryAction?: EmptyStateAction
   secondaryAction?: EmptyStateAction
   compact?: boolean
 }
 
-function renderEmptyStateAction(action: EmptyStateAction, fallbackVariant: React.ComponentProps<typeof Button>["variant"]) {
-  if (action.href) {
-    return (
-      <a className={buttonVariants({ variant: action.variant ?? fallbackVariant })} href={action.href}>
-        {action.label}
-      </a>
-    )
-  }
-
-  return (
-    <Button type="button" variant={action.variant ?? fallbackVariant} onClick={action.onClick}>
-      {action.label}
-    </Button>
-  )
+function renderAction(action: EmptyStateAction, fallbackVariant: React.ComponentProps<typeof Button>["variant"]) {
+  if (action.href) return <a className={buttonVariants({ variant: action.variant ?? fallbackVariant })} href={action.href}>{action.label}</a>
+  return <Button type="button" variant={action.variant ?? fallbackVariant} onClick={action.onClick}>{action.label}</Button>
 }
 
-function defaultEmptyStateIcon(tone: EmptyStateTone) {
-  if (tone === "error") return <AlertCircleIcon data-icon="inline-start" />
-  return <SearchXIcon data-icon="inline-start" />
-}
+/** @deprecated Use StateView. */
+function EmptyState({ tone = "empty", primaryAction, secondaryAction, compact = false, ...props }: EmptyStateProps) {
+  const actions = primaryAction || secondaryAction ? (
+    <>
+      {secondaryAction ? renderAction(secondaryAction, "outline") : null}
+      {primaryAction ? renderAction(primaryAction, "default") : null}
+    </>
+  ) : undefined
 
-function EmptyState({
-  className,
-  tone = "empty",
-  title,
-  description,
-  icon,
-  primaryAction,
-  secondaryAction,
-  compact = false,
-  ...props
-}: EmptyStateProps) {
-  return (
-    <div
-      data-slot="empty-state"
-      data-tone={tone}
-      data-compact={compact || undefined}
-      role={tone === "error" ? "alert" : "status"}
-      className={cn(
-        "flex flex-col items-center justify-center rounded-xl border bg-card text-center text-card-foreground shadow-sm",
-        compact ? "gap-3 p-5" : "min-h-64 gap-4 p-8",
-        className
-      )}
-      {...props}
-    >
-      <div
-        data-slot="empty-state-icon"
-        className="flex size-12 items-center justify-center rounded-full border bg-muted text-muted-foreground"
-      >
-        {icon ?? defaultEmptyStateIcon(tone)}
-      </div>
-      {(title || description) && (
-        <div data-slot="empty-state-content" className="grid max-w-md gap-1">
-          {title && <h2 className="text-base font-semibold tracking-tight">{title}</h2>}
-          {description && <p className="text-sm leading-6 text-muted-foreground">{description}</p>}
-        </div>
-      )}
-      {(primaryAction || secondaryAction) && (
-        <div data-slot="empty-state-actions" className="flex flex-wrap items-center justify-center gap-2">
-          {secondaryAction ? renderEmptyStateAction(secondaryAction, "outline") : null}
-          {primaryAction ? renderEmptyStateAction(primaryAction, "default") : null}
-        </div>
-      )}
-    </div>
-  )
+  return <StateView status={tone} size={compact ? "compact" : "default"} actions={actions} slot="empty-state" {...props} />
 }
 
 export type ErrorStateProps = Omit<EmptyStateProps, "tone">
 
+/** @deprecated Use StateView with status="error". */
 function ErrorState(props: ErrorStateProps) {
   return <EmptyState tone="error" {...props} />
 }

package/packages/cli/vendor/src/components/patterns/resource-page.tsx

@@ -1,20 +1,15 @@
 import * as React from "react"
 
 import { DataTable, type DataTableProps } from "@/components/data-table/data-table"
-import { PageHeader, type PageHeaderProps } from "@/components/layout/page-header"
+import { PageHeader, type PageHeaderProps } from "@/components/layout/page-header"
+import { Section, type SectionProps } from "@/components/layout/section"
 import { cn } from "@/lib/utils"
 
 export type ResourcePageDensity = "default" | "compact" | "comfortable"
 
-export type ResourcePageSectionProps = React.ComponentProps<"section"> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  actions?: React.ReactNode
-  headerClassName?: string
-  bodyClassName?: string
-}
+export type ResourcePageSectionProps = Omit<SectionProps, "variant">
 
-function ResourcePageSection({
+function ResourcePageSection({
   className,
   title,
   description,
@@ -23,30 +18,21 @@ function ResourcePageSection({
   bodyClassName,
   children,
   ...props
-}: ResourcePageSectionProps) {
-  return (
-    <section
-      data-slot="resource-page-section"
-      className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", className)}
-      {...props}
-    >
-      {(title || description || actions) && (
-        <div
-          data-slot="resource-page-section-header"
-          className={cn("flex flex-col gap-3 border-b p-4 sm:flex-row sm:items-start sm:justify-between", headerClassName)}
-        >
-          <div className="min-w-0 space-y-1">
-            {title && <h2 className="text-base font-semibold leading-none tracking-tight">{title}</h2>}
-            {description && <p className="text-sm text-muted-foreground">{description}</p>}
-          </div>
-          {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
-        </div>
-      )}
-
-      <div data-slot="resource-page-section-body" className={cn("p-4", bodyClassName)}>
-        {children}
-      </div>
-    </section>
+}: ResourcePageSectionProps) {
+  return (
+    <Section
+      data-slot="resource-page-section"
+      variant="panel"
+      title={title}
+      description={description}
+      actions={actions}
+      headerClassName={headerClassName}
+      bodyClassName={bodyClassName}
+      className={className}
+      {...props}
+    >
+      {children}
+    </Section>
   )
 }
 
@@ -68,7 +54,8 @@ export type ResourcePageProps<TData, TValue = unknown> = Omit<React.ComponentPro
   pageHeaderClassName?: string
   toolbarClassName?: string
   contentClassName?: string
-  asideClassName?: string
+  asideClassName?: string
+  asideWidth?: React.CSSProperties["width"]
 }
 
 const densityClassName: Record<ResourcePageDensity, string> = {
@@ -96,7 +83,9 @@ function ResourcePage<TData, TValue = unknown>({
   pageHeaderClassName,
   toolbarClassName,
   contentClassName,
-  asideClassName,
+  asideClassName,
+  asideWidth = "20rem",
+  style,
   ...props
 }: ResourcePageProps<TData, TValue>) {
   const hasHeader = Boolean(title || description || eyebrow || actions)
@@ -106,8 +95,9 @@ function ResourcePage<TData, TValue = unknown>({
   return (
     <div
       data-slot="resource-page"
-      data-density={density}
-      className={cn("grid min-w-0", densityClassName[density], className)}
+      data-density={density}
+      className={cn("grid min-w-0", densityClassName[density], className)}
+      style={{ "--resource-aside-width": asideWidth, ...style } as React.CSSProperties}
       {...props}
     >
       {breadcrumbs && <div data-slot="resource-page-breadcrumbs">{breadcrumbs}</div>}
@@ -136,7 +126,7 @@ function ResourcePage<TData, TValue = unknown>({
       {(hasMainContent || aside) && (
         <div
           data-slot="resource-page-content"
-          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_var(--resource-aside-width)]", contentClassName)}
         >
           <div data-slot="resource-page-main" className="grid min-w-0 gap-4">
             {children}

package/packages/cli/vendor/src/components/ui/badge/index.tsx

@@ -52,6 +52,7 @@ type BadgeProps = useRender.ComponentProps<"span"> &
     count?: React.ReactNode
     status?: "neutral" | "info" | "success" | "warning" | "danger" | "muted"
     removable?: boolean
+    selected?: boolean
     onRemove?: () => void
     removeLabel?: string
     leftIcon?: React.ReactNode
@@ -68,12 +69,14 @@ function Badge({
   count,
   status,
   removable = false,
+  selected = false,
   onRemove,
   removeLabel = "Remove badge",
   leftIcon,
   rightIcon,
   children,
   render,
+  onKeyDown,
   ...props
 }: BadgeProps) {
   const resolvedTone = status ?? tone
@@ -84,7 +87,19 @@ function Badge({
     defaultTagName: "span",
     props: mergeProps<"span">(
       {
-        className: cn(badgeVariants({ variant, tone: resolvedTone, size, dot: showDot }), className),
+        className: cn(
+          badgeVariants({ variant, tone: resolvedTone, size, dot: showDot }),
+          selected && "ring-2 ring-ring/45 ring-offset-1",
+          className
+        ),
+        tabIndex: removable ? 0 : undefined,
+        onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => {
+          if (removable && (event.key === "Backspace" || event.key === "Delete")) {
+            event.preventDefault()
+            onRemove?.()
+          }
+          onKeyDown?.(event)
+        },
         children: (
           <>
             {showDot ? <span data-slot="badge-dot" /> : null}
@@ -120,6 +135,7 @@ function Badge({
         "data-tone": resolvedTone ?? "neutral",
         "data-size": size ?? "default",
         "data-removable": removable || undefined,
+        "data-selected": selected || undefined,
       } as React.HTMLAttributes<HTMLSpanElement>,
       props
     ),

package/packages/cli/vendor/src/components/ui/button/index.tsx

@@ -46,6 +46,7 @@ export type ButtonProps = ButtonPrimitive.Props &
     iconOnly?: boolean
     fullWidth?: boolean
     pressed?: boolean
+    labelClassName?: string
   }
 
 function Button({
@@ -60,6 +61,7 @@ function Button({
   iconOnly = false,
   fullWidth = false,
   pressed = false,
+  labelClassName,
   children,
   "aria-label": ariaLabel,
   ...props
@@ -96,7 +98,7 @@ function Button({
           {leftIcon}
         </span>
       ) : null}
-      {children ? <span data-slot="button-label">{loading ? loadingLabel : children}</span> : null}
+      {children ? <span data-slot="button-label" className={cn("inline-flex min-w-0 items-center gap-[inherit]", labelClassName)}>{loading ? loadingLabel : children}</span> : null}
       {!loading && rightIcon ? (
         <span data-icon="inline-end" data-slot="button-icon" className="inline-flex shrink-0 items-center justify-center">
           {rightIcon}

package/packages/cli/vendor/src/public-component-surface.ts

@@ -18,54 +18,55 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "date-range-picker", registryName: "date-range-picker", surface: "documented" },
   { slug: "alert", registryName: "alert", surface: "documented" },
   { slug: "bar-chart", registryName: "charts", surface: "documented" },
-  { slug: "sidebar", registryName: "sidebar", surface: "documented" },
-  { slug: "file-upload", registryName: "file-upload", surface: "documented" },
-  { slug: "progress", registryName: "progress", surface: "documented" },
-] as const
-
-export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [
-  { slug: "accordion", registryName: "accordion", surface: "standalone" },
-  { slug: "divider", registryName: "divider", surface: "standalone" },
-  { slug: "segmented-control", registryName: "segmented-control", surface: "standalone" },
-  { slug: "skeleton", registryName: "skeleton", surface: "standalone" },
-  { slug: "spinner", registryName: "spinner", surface: "standalone" },
-  { slug: "command-palette", registryName: "command-palette", surface: "standalone" },
-  { slug: "inline-editable", registryName: "inline-editable", surface: "standalone" },
-  { slug: "avatar", registryName: "avatar", surface: "standalone" },
-  { slug: "code-block", registryName: "code-block", surface: "standalone" },
-  { slug: "data-state", registryName: "data-state", surface: "standalone" },
-  { slug: "kanban", registryName: "kanban", surface: "standalone" },
-  { slug: "list", registryName: "list", surface: "standalone" },
-  { slug: "description-list", registryName: "description-list", surface: "standalone" },
-  { slug: "statistic", registryName: "statistic", surface: "standalone" },
-  { slug: "tree-view", registryName: "tree-view", surface: "standalone" },
-  { slug: "copy-button", registryName: "copy-button", surface: "standalone" },
-  { slug: "section", registryName: "section", surface: "standalone" },
-  { slug: "form-builder", registryName: "form-builder", surface: "standalone" },
-  { slug: "empty-state", registryName: "empty-state", surface: "standalone" },
-  { slug: "page-toolbar", registryName: "page-toolbar", surface: "standalone" },
-  { slug: "bulk-action-bar", registryName: "bulk-action-bar", surface: "standalone" },
-  { slug: "detail-layout", registryName: "detail-layout", surface: "standalone" },
-  { slug: "settings-page", registryName: "settings-page", surface: "standalone" },
-  { slug: "data-view", registryName: "data-view", surface: "standalone" },
-  { slug: "resource-page", registryName: "resource-page", surface: "standalone" },
-  { slug: "resource-detail-page", registryName: "resource-detail-page", surface: "standalone" },
-  { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "standalone" },
-  { slug: "dual-list-picker", registryName: "dual-list-picker", surface: "standalone" },
-  { slug: "resizable-panel", registryName: "resizable-panel", surface: "standalone" },
-  { slug: "tag", registryName: "tag", surface: "standalone" },
-  { slug: "carousel", registryName: "carousel", surface: "standalone" },
-  { slug: "typography", registryName: "typography", surface: "standalone" },
-  { slug: "json-input", registryName: "json-input", surface: "standalone" },
-  { slug: "time-picker", registryName: "time-picker", surface: "standalone" },
-  { slug: "sortable-list", registryName: "sortable-list", surface: "standalone" },
-  { slug: "virtual-list", registryName: "virtual-list", surface: "standalone" },
-  { slug: "color-picker", registryName: "color-picker", surface: "standalone" },
-  { slug: "signature-pad", registryName: "signature-pad", surface: "standalone" },
-  { slug: "qr-code", registryName: "qr-code", surface: "standalone" },
-  { slug: "rich-text-editor", registryName: "rich-text-editor", surface: "standalone" },
-  { slug: "image-cropper", registryName: "image-cropper", surface: "standalone" },
+  { slug: "sidebar", registryName: "sidebar", surface: "documented" },
+  { slug: "workspace-layout", registryName: "workspace-layout", surface: "documented" },
+  { slug: "state-view", registryName: "state-view", surface: "documented" },
+  { slug: "file-upload", registryName: "file-upload", surface: "documented" },
+  { slug: "progress", registryName: "progress", surface: "documented" },
+  { slug: "accordion", registryName: "accordion", surface: "documented" },
+  { slug: "divider", registryName: "divider", surface: "documented" },
+  { slug: "segmented-control", registryName: "segmented-control", surface: "documented" },
+  { slug: "skeleton", registryName: "skeleton", surface: "documented" },
+  { slug: "spinner", registryName: "spinner", surface: "documented" },
+  { slug: "command-palette", registryName: "command-palette", surface: "documented" },
+  { slug: "inline-editable", registryName: "inline-editable", surface: "documented" },
+  { slug: "avatar", registryName: "avatar", surface: "documented" },
+  { slug: "code-block", registryName: "code-block", surface: "documented" },
+  { slug: "data-state", registryName: "data-state", surface: "documented" },
+  { slug: "kanban", registryName: "kanban", surface: "documented" },
+  { slug: "list", registryName: "list", surface: "documented" },
+  { slug: "description-list", registryName: "description-list", surface: "documented" },
+  { slug: "statistic", registryName: "statistic", surface: "documented" },
+  { slug: "tree-view", registryName: "tree-view", surface: "documented" },
+  { slug: "copy-button", registryName: "copy-button", surface: "documented" },
+  { slug: "section", registryName: "section", surface: "documented" },
+  { slug: "form-builder", registryName: "form-builder", surface: "documented" },
+  { slug: "empty-state", registryName: "empty-state", surface: "documented" },
+  { slug: "page-toolbar", registryName: "page-toolbar", surface: "documented" },
+  { slug: "bulk-action-bar", registryName: "bulk-action-bar", surface: "documented" },
+  { slug: "detail-layout", registryName: "detail-layout", surface: "documented" },
+  { slug: "settings-page", registryName: "settings-page", surface: "documented" },
+  { slug: "data-view", registryName: "data-view", surface: "documented" },
+  { slug: "resource-page", registryName: "resource-page", surface: "documented" },
+  { slug: "resource-detail-page", registryName: "resource-detail-page", surface: "documented" },
+  { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "documented" },
+  { slug: "dual-list-picker", registryName: "dual-list-picker", surface: "documented" },
+  { slug: "resizable-panel", registryName: "resizable-panel", surface: "documented" },
+  { slug: "tag", registryName: "tag", surface: "documented" },
+  { slug: "carousel", registryName: "carousel", surface: "documented" },
+  { slug: "typography", registryName: "typography", surface: "documented" },
+  { slug: "json-input", registryName: "json-input", surface: "documented" },
+  { slug: "time-picker", registryName: "time-picker", surface: "documented" },
+  { slug: "sortable-list", registryName: "sortable-list", surface: "documented" },
+  { slug: "virtual-list", registryName: "virtual-list", surface: "documented" },
+  { slug: "color-picker", registryName: "color-picker", surface: "documented" },
+  { slug: "signature-pad", registryName: "signature-pad", surface: "documented" },
+  { slug: "qr-code", registryName: "qr-code", surface: "documented" },
+  { slug: "rich-text-editor", registryName: "rich-text-editor", surface: "documented" },
+  { slug: "image-cropper", registryName: "image-cropper", surface: "documented" },
 ] as const
+
+export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [] as const
 
 export const publicComponentSurfaceEntries = [
   ...documentedPublicComponentSurfaces,