tembro 3.1.15 → 3.1.17

package/packages/cli/vendor/src/components/display/status-legend.tsx

@@ -64,7 +64,7 @@ function StatusLegend({
     <Card
       data-slot="status-legend"
       className={cn(
-        "min-w-0 border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-page-bg)_92%,white_8%)] shadow-sm dark:bg-[color:color-mix(in_srgb,var(--aui-page-bg)_96%,black_4%)]",
+        "min-w-0 border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,var(--aui-shadow-xs))]",
         className
       )}
       {...props}
@@ -95,7 +95,7 @@ function StatusLegend({
             data-slot="status-legend-item"
             data-tone={item.tone ?? "default"}
             className={cn(
-              "flex min-w-0 items-start justify-between gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] transition hover:border-[color:color-mix(in_srgb,var(--aui-brand-strong)_26%,var(--aui-surface-border))]",
+              "flex min-w-0 items-start justify-between gap-3 rounded-lg border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] p-3 transition hover:border-[color:var(--aui-control-hover-border,var(--ring))]",
               compact && "p-2.5",
               itemClassName,
               item.className
@@ -105,7 +105,7 @@ function StatusLegend({
               {item.icon ? (
                 <span className="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-xl bg-[color:var(--aui-page-bg)] text-muted-foreground [&_svg]:size-4">{item.icon}</span>
               ) : (
-                <span className={cn("mt-1.5 size-2.5 shrink-0 rounded-full shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-page-bg)_72%,transparent)]", dotClassName[item.tone ?? "default"])} />
+                <span className={cn("mt-1.5 size-2.5 shrink-0 rounded-full ring-4 ring-background", dotClassName[item.tone ?? "default"])} />
               )}
               <div className="min-w-0 space-y-0.5">
                 <div className="truncate text-sm font-medium text-foreground">{item.label}</div>
@@ -113,7 +113,7 @@ function StatusLegend({
               </div>
             </div>
             {showCounts && item.count !== undefined && (
-              <Badge variant="secondary" className="shrink-0 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-2.5 py-1 shadow-sm">
+              <Badge variant="secondary" className="shrink-0 rounded-full border border-[color:var(--aui-card-border,var(--border))] bg-background px-2.5 py-1 shadow-sm">
                 {item.count}
               </Badge>
             )}

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/modern/resizable-panel.tsx

@@ -132,7 +132,7 @@ function ResizablePanelGroup({ direction = "horizontal", className, children, ..
   )
 }
 
-function ResizablePanel({ className, style, defaultSize, ...props }: ResizablePanelInternalProps) {
+function ResizablePanel({ className, style, defaultSize, minSize: _minSize, ...props }: ResizablePanelInternalProps) {
   const context = React.useContext(ResizablePanelContext)
   const panelIndex = Number(props["data-panel-index"] ?? 0)
   const basis = context ? context.getSize(panelIndex) : normalizeSizeValue(defaultSize) ?? 100

package/packages/cli/vendor/src/components/patterns/detail-layout.tsx

@@ -55,7 +55,7 @@ function DetailLayout({
       {hasContent && (
         <div
           data-slot="detail-layout-content"
-          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
         >
           <main data-slot="detail-layout-main" className="min-w-0">
             {children}

package/packages/cli/vendor/src/components/patterns/form-builder.tsx

@@ -22,8 +22,10 @@ import {
 } from "@/components/form/form-date-range-input"
 import { cn } from "@/lib/utils"
 
-export type FormBuilderLayout = "grid" | "stack"
-export type FormBuilderDensity = "compact" | "default" | "comfortable"
+export type FormBuilderLayout = "grid" | "stack"
+export type FormBuilderDensity = "compact" | "default" | "comfortable"
+
+type DistributiveOmit<T, TKey extends PropertyKey> = T extends unknown ? Omit<T, TKey> : never
 
 export type FormBuilderFieldRenderContext<TFieldValues extends FieldValues> = {
   control: Control<TFieldValues>
@@ -48,7 +50,7 @@ export type FormBuilderInputField<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = BaseFormBuilderField & {
   type: "input"
-  props: Omit<FormInputProps<TFieldValues, TName>, "control">
+  props: DistributiveOmit<FormInputProps<TFieldValues, TName>, "control">
 }
 
 export type FormBuilderTextareaField<
@@ -64,7 +66,7 @@ export type FormBuilderSelectField<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = BaseFormBuilderField & {
   type: "select"
-  props: Omit<FormSelectProps<TFieldValues, TName>, "control">
+  props: DistributiveOmit<FormSelectProps<TFieldValues, TName>, "control">
 }
 
 export type FormBuilderAsyncSelectField<
@@ -116,17 +118,14 @@ export type FormBuilderDateRangeField<
   props: Omit<FormDateRangeInputProps<TFieldValues, TFromName, TToName>, "control">
 }
 
-export type FormBuilderField<TFieldValues extends FieldValues> =
-  | FormBuilderCustomField<TFieldValues>
-  | FormBuilderInputField<TFieldValues>
-  | FormBuilderTextareaField<TFieldValues>
-  | FormBuilderSelectField<TFieldValues>
-  | FormBuilderAsyncSelectField<TFieldValues>
-  | FormBuilderSwitchField<TFieldValues>
-  | FormBuilderNumberField<TFieldValues>
-  | FormBuilderPhoneField<TFieldValues>
-  | FormBuilderDateField<TFieldValues>
-  | FormBuilderDateRangeField<TFieldValues>
+type FormBuilderStoredField = BaseFormBuilderField & {
+  type: "input" | "textarea" | "select" | "async-select" | "switch" | "number" | "phone" | "date" | "date-range"
+  props: object
+}
+
+export type FormBuilderField<TFieldValues extends FieldValues> =
+  | FormBuilderCustomField<TFieldValues>
+  | FormBuilderStoredField
 
 export type FormBuilderSection<TFieldValues extends FieldValues> = {
   id: string
@@ -280,8 +279,11 @@ function renderFormBuilderField<TFieldValues extends FieldValues>(
   field: FormBuilderField<TFieldValues>,
   context: FormBuilderFieldRenderContext<TFieldValues>
 ) {
-  const FormInputComponent = FormInput as unknown as React.ComponentType<Record<string, unknown>>
-  const FormSelectComponent = FormSelect as unknown as React.ComponentType<Record<string, unknown>>
+  const FormInputComponent = FormInput as unknown as React.ComponentType<Record<string, unknown>>
+  const FormSelectComponent = FormSelect as unknown as React.ComponentType<Record<string, unknown>>
+  const FormTextareaComponent = FormTextarea as unknown as React.ComponentType<Record<string, unknown>>
+  const FormSwitchComponent = FormSwitch as unknown as React.ComponentType<Record<string, unknown>>
+  const FormDateRangeInputComponent = FormDateRangeInput as unknown as React.ComponentType<Record<string, unknown>>
 
   switch (field.type) {
     case "custom":
@@ -293,8 +295,8 @@ function renderFormBuilderField<TFieldValues extends FieldValues>(
         readOnly: context.readOnly,
         ...(field.props as Omit<FormInputProps<TFieldValues, FieldPath<TFieldValues>>, "control">),
       })
-    case "textarea":
-      return <FormTextarea control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
+    case "textarea":
+      return React.createElement(FormTextareaComponent, { control: context.control, disabled: context.disabled, readOnly: context.readOnly, ...field.props })
     case "select":
       return React.createElement(FormSelectComponent, {
         control: context.control,
@@ -308,8 +310,8 @@ function renderFormBuilderField<TFieldValues extends FieldValues>(
         kind: "async",
         ...field.props,
       })
-    case "switch":
-      return <FormSwitch control={context.control} disabled={context.disabled} {...field.props} />
+    case "switch":
+      return React.createElement(FormSwitchComponent, { control: context.control, disabled: context.disabled, ...field.props })
     case "number":
       return React.createElement(FormInputComponent, {
         control: context.control,
@@ -334,15 +336,13 @@ function renderFormBuilderField<TFieldValues extends FieldValues>(
         kind: "date",
         ...field.props,
       })
-    case "date-range":
-      return (
-        <FormDateRangeInput
-          control={context.control}
-          fromInputProps={{ disabled: context.disabled, readOnly: context.readOnly }}
-          toInputProps={{ disabled: context.disabled, readOnly: context.readOnly }}
-          {...field.props}
-        />
-      )
+    case "date-range":
+      return React.createElement(FormDateRangeInputComponent, {
+        control: context.control,
+        fromInputProps: { disabled: context.disabled, readOnly: context.readOnly },
+        toInputProps: { disabled: context.disabled, readOnly: context.readOnly },
+        ...field.props,
+      })
     default:
       return null
   }

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

@@ -120,7 +120,7 @@ function ResourceDetailPage({
       {(hasMainContent || aside) && (
         <div
           data-slot="resource-detail-page-content"
-          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
         >
           <div data-slot="resource-detail-page-main" className="grid min-w-0 gap-4">
             {children}

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

@@ -136,7 +136,7 @@ function ResourcePage<TData, TValue = unknown>({
       {(hasMainContent || aside) && (
         <div
           data-slot="resource-page-content"
-          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
         >
           <div data-slot="resource-page-main" className="grid min-w-0 gap-4">
             {children}

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/components/ui/card/index.tsx

@@ -181,6 +181,7 @@ function Card({
   return (
     <div
       data-slot="card"
+      data-card=""
       data-surface={surfaceMode || undefined}
       data-size={size ?? "default"}
       data-variant={variant ?? "default"}

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "3.1.15"
+export const PACKAGE_LATEST_VERSION = "3.1.17"
 export const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = PACKAGE_LATEST_VERSION
 

package/packages/cli/vendor/src/showcase/premium/calendar-scheduler/mock.ts

@@ -6,23 +6,26 @@ export const calendarSchedulerMock: ComponentDemoMock = {
 export function Example() {
   return (
     <CalendarScheduler
-      days={["Mon, Jul 6", "Tue, Jul 7"]}
+      variant="agenda"
+      density="compact"
+      title="Delivery schedule"
+      defaultSelectedEventId="1"
+      days={["Mon, Jul 6"]}
       events={[
-        { id: "1", title: "Design review", date: "Mon, Jul 6", time: "10:00", tone: "warning" },
-        { id: "2", title: "Release freeze", date: "Tue, Jul 7", time: "14:00", tone: "danger" },
+        { id: "1", title: "Design review", description: "API review", date: "Mon, Jul 6", time: "10:00" },
+        { id: "2", title: "Release freeze", description: "Production gate", date: "Mon, Jul 6", time: "14:00" },
       ]}
     />
   )
 }`,
   cliCommand: "npx tembro add calendar-scheduler",
   highlights: [
-    "Compact scheduler timeline by day",
-    "Tone variants for different event priorities",
-    "Works with custom day labels",
+    "Board and agenda variants with compact or comfortable density",
+    "Rich metadata, badges, hidden and disabled event states",
+    "Controlled or uncontrolled selection and custom event rendering",
   ],
   scenarios: [
     { title: "Ops dashboard", description: "Show day tasks by lane without heavy calendar widgets." },
     { title: "Sprint board", description: "Keep event density low and readable." },
   ],
 }
-

package/packages/cli/vendor/src/showcase/premium/calendar-scheduler/showcase.tsx

@@ -7,13 +7,14 @@ const defaultDays = ["Mon, Jul 6", "Tue, Jul 7", "Wed, Jul 8"]
 
 export function CalendarSchedulerShowcase() {
   const [showWarning, setShowWarning] = React.useState(true)
+  const [variant, setVariant] = React.useState<"board" | "agenda">("agenda")
 
   const events = React.useMemo(
     () => ([
-      { id: "1", title: "Design review", date: "Mon, Jul 6", time: "10:00", tone: "warning" },
-      { id: "2", title: "Release freeze", date: "Tue, Jul 7", time: "14:00", tone: "danger" },
-      { id: "3", title: "Daily standup", date: "Wed, Jul 8", time: "09:30", tone: "default" },
-      ...(showWarning ? [{ id: "4", title: "Priority follow-up", date: "Mon, Jul 6", time: "16:00", tone: "warning" }] : []),
+      { id: "1", title: "Design review", description: "Component API and release readiness", meta: "Product room", badge: <span className="rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-800">Review</span>, date: "Mon, Jul 6", time: "10:00", tone: "warning" },
+      { id: "2", title: "Release freeze", description: "Production deployment checkpoint", meta: "Platform team", badge: <span className="rounded bg-red-100 px-2 py-0.5 text-xs text-red-800">Required</span>, date: "Tue, Jul 7", time: "14:00", tone: "danger" },
+      { id: "3", title: "Daily standup", description: "Owners, blockers and delivery status", date: "Wed, Jul 8", time: "09:30", tone: "default" },
+      ...(showWarning ? [{ id: "4", title: "Priority follow-up", description: "Customer escalation review", date: "Mon, Jul 6", time: "16:00", tone: "warning" as const }] : []),
     ] as CalendarSchedulerEvent[]),
     [showWarning]
   )
@@ -21,6 +22,7 @@ export function CalendarSchedulerShowcase() {
   return (
     <div className="space-y-3">
       <div className="flex gap-2">
+        <button type="button" className="inline-flex items-center rounded-md border px-3 py-1.5 text-sm" onClick={() => setVariant((value) => value === "agenda" ? "board" : "agenda")}>Use {variant === "agenda" ? "board" : "agenda"}</button>
         <button
           type="button"
           className="inline-flex items-center rounded-md border px-3 py-1.5 text-sm"
@@ -29,7 +31,7 @@ export function CalendarSchedulerShowcase() {
           {showWarning ? "Hide warning" : "Show warning"}
         </button>
       </div>
-      <CalendarScheduler days={defaultDays} events={events} />
+      <CalendarScheduler title="Delivery schedule" description="Production agenda with rich event metadata and selection." variant={variant} density="compact" days={defaultDays} events={events} defaultSelectedEventId="1" />
     </div>
   )
 }

package/packages/cli/vendor/src/showcase/registry-specific.tsx

@@ -48,7 +48,7 @@ import {
   Avatar,
 } from "@/index"
 import { PreviewFileDropzone as FileDropzone, PreviewStatCard as StatCard } from "@/showcase/preview-compositions"
-import { FormBuilder, customField, formSection } from "@/components/patterns/form-builder"
+import { FormBuilder, customField, formSection, inputField, selectField, switchField, textareaField } from "@/components/patterns/form-builder"
 import { ResourceDetailPage } from "@/components/patterns/resource-detail-page"
 import { ResourcePage, ResourcePageSection } from "@/components/patterns/resource-page"
 import { useForm } from "react-hook-form"
@@ -750,6 +750,7 @@ function FormBuilderPreview() {
     email: string
     notes: string
     marketing: boolean
+    role: string
   }
 
   const form = useForm<FormBuilderDemoValues>({
@@ -758,6 +759,7 @@ function FormBuilderPreview() {
       email: "azamat@example.com",
       notes: "Release gate is ready.",
       marketing: true,
+      role: "admin",
     },
   })
 
@@ -779,6 +781,14 @@ function FormBuilderPreview() {
             </div>
           ),
         }),
+        inputField<FormBuilderDemoValues, "name">({ id: "name", props: { name: "name", label: "Name", required: true } }),
+        inputField<FormBuilderDemoValues, "email">({ id: "email", props: { name: "email", label: "Email", type: "email" } }),
+        selectField<FormBuilderDemoValues, "role">({ id: "role", props: { name: "role", label: "Role", options: [
+          { value: "admin", label: "Administrator" },
+          { value: "member", label: "Member" },
+        ] } }),
+        switchField<FormBuilderDemoValues, "marketing">({ id: "marketing", props: { name: "marketing", label: "Product updates" } }),
+        textareaField<FormBuilderDemoValues, "notes">({ id: "notes", colSpan: "full", props: { name: "notes", label: "Release notes" } }),
       ],
     }),
   ]

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.15",
+  "version": "3.1.17",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@3.1.15 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@3.1.17 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.15" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.17" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@3.1.15",
+          label: "tembro@3.1.17",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"