tembro 3.1.1 → 3.1.5

package/packages/cli/vendor/src/components/layout/index.ts

@@ -1,8 +1,4 @@
 export * from "./app-header"
 export * from "./app-sidebar"
-export * from "./stat-card"
-export * from "./sidebar-nav"
 export * from "./breadcrumbs"
-export * from "./page-container"
 export * from "./section"
-export * from "./sticky-footer-bar"

package/packages/cli/vendor/src/components/layout/public.ts

@@ -1,7 +1,3 @@
 export * from "./app-sidebar"
 export * from "./breadcrumbs"
-export * from "./page-container"
 export * from "./section"
-export * from "./section-header"
-export * from "./sidebar-nav"
-export * from "./sticky-footer-bar"

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

@@ -1,8 +1,11 @@
+"use client"
+
 import * as React from "react"
 
 import { Badge } from "@/components/ui/badge"
 import { Tooltip } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
+import { ControllableDetails } from "./controllable-details"
 
 export type SidebarNavItem = {
   key: string
@@ -17,6 +20,8 @@ export type SidebarNavItem = {
   hidden?: boolean
   sectionLabel?: React.ReactNode
   defaultExpanded?: boolean
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
   tooltip?: React.ReactNode
   onSelect?: () => void
 }
@@ -26,6 +31,9 @@ export type SidebarNavProps = React.ComponentProps<"nav"> & {
   collapsed?: boolean
   scrollable?: boolean
   tooltipOnCollapsed?: boolean
+  showSectionLabels?: boolean
+  itemSize?: "sm" | "md" | "lg"
+  activeIndicator?: "none" | "bar" | "pill"
   itemClassName?: string
   activeItemClassName?: string
   renderItem?: (item: SidebarNavItem, element: React.ReactNode) => React.ReactNode
@@ -45,6 +53,8 @@ function SidebarLeaf({
   item,
   collapsed,
   depth,
+  itemSize,
+  activeIndicator,
   itemClassName,
   activeItemClassName,
   renderLink,
@@ -52,6 +62,8 @@ function SidebarLeaf({
   item: SidebarNavItem
   collapsed: boolean
   depth: number
+  itemSize: NonNullable<SidebarNavProps["itemSize"]>
+  activeIndicator: NonNullable<SidebarNavProps["activeIndicator"]>
   itemClassName?: string
   activeItemClassName?: string
   renderLink?: SidebarNavProps["renderLink"]
@@ -70,7 +82,7 @@ function SidebarLeaf({
   )
 
   const commonClassName = cn(
-    "group flex min-h-9 items-center gap-2 rounded-xl border border-transparent px-2.5 text-sm font-medium text-[color:var(--aui-page-muted-strong,var(--muted-foreground))] transition-[background-color,border-color,color,box-shadow] hover:border-[color:var(--aui-divider)] hover:bg-[color:var(--aui-page-bg-alt)] hover:text-[color:var(--aui-page-foreground)] data-[active=true]:border-[color:var(--aui-surface-border-strong,var(--ring))] data-[active=true]:bg-[color:var(--aui-control-bg)] data-[active=true]:text-[color:var(--aui-page-foreground)] data-[active=true]:shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+    "group flex items-center gap-2 border border-transparent text-sm font-medium transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
     collapsed && "justify-center px-0",
     depth > 0 && !collapsed && "pl-3",
     itemClassName,
@@ -98,6 +110,8 @@ function SidebarLeaf({
           "data-depth": String(depth),
           "data-active": item.active || undefined,
           "data-disabled": item.disabled || undefined,
+          "data-size": itemSize,
+          "data-active-indicator": activeIndicator,
           "aria-current": currentValue,
           className: commonClassName,
           onClick: (event) => {
@@ -119,6 +133,8 @@ function SidebarLeaf({
         data-depth={depth}
         data-active={item.active || undefined}
         data-disabled={item.disabled || undefined}
+        data-size={itemSize}
+        data-active-indicator={activeIndicator}
         aria-current={currentValue}
         className={commonClassName}
         onClick={(event) => {
@@ -142,6 +158,8 @@ function SidebarLeaf({
         data-depth={depth}
         data-active={item.active || undefined}
         data-disabled={item.disabled || undefined}
+        data-size={itemSize}
+        data-active-indicator={activeIndicator}
         aria-current={currentValue}
         className={cn("w-full text-left", commonClassName)}
         onClick={() => {
@@ -168,6 +186,8 @@ function SidebarLeaf({
       data-depth={depth}
       data-active={item.active || undefined}
       data-disabled={item.disabled || undefined}
+      data-size={itemSize}
+      data-active-indicator={activeIndicator}
       aria-current={currentValue}
       disabled={item.disabled}
       className={cn("w-full text-left", commonClassName)}
@@ -182,6 +202,9 @@ function SidebarTree({
   items,
   collapsed,
   depth,
+  showSectionLabels,
+  itemSize,
+  activeIndicator,
   itemClassName,
   activeItemClassName,
   renderItem,
@@ -190,6 +213,9 @@ function SidebarTree({
   items: SidebarNavItem[]
   collapsed: boolean
   depth: number
+  showSectionLabels: boolean
+  itemSize: NonNullable<SidebarNavProps["itemSize"]>
+  activeIndicator: NonNullable<SidebarNavProps["activeIndicator"]>
   itemClassName?: string
   activeItemClassName?: string
   renderItem?: SidebarNavProps["renderItem"]
@@ -198,7 +224,7 @@ function SidebarTree({
   return items.map((item) => {
     if (item.hidden) return null
 
-    const showSectionLabel = !collapsed && depth === 0 && item.sectionLabel
+    const showSectionLabel = showSectionLabels && !collapsed && depth === 0 && item.sectionLabel
     const hasChildren = hasVisibleChildren(item)
 
     if (!hasChildren) {
@@ -207,6 +233,8 @@ function SidebarTree({
           item={item}
           collapsed={collapsed}
           depth={depth}
+          itemSize={itemSize}
+          activeIndicator={activeIndicator}
           itemClassName={itemClassName}
           activeItemClassName={activeItemClassName}
           renderLink={renderLink}
@@ -273,10 +301,12 @@ function SidebarTree({
             {item.sectionLabel}
           </div>
         ) : null}
-        <details
+        <ControllableDetails
           data-slot="sidebar-nav-group-details"
-          open={isExpanded}
+          open={item.expanded}
+          defaultOpen={isExpanded}
           className="group/sidebar-nav-details"
+          onOpenChange={item.onExpandedChange}
         >
           {trigger}
           <div
@@ -287,13 +317,16 @@ function SidebarTree({
               items={item.items ?? []}
               collapsed={collapsed}
               depth={depth + 1}
+              showSectionLabels={showSectionLabels}
+              itemSize={itemSize}
+              activeIndicator={activeIndicator}
               itemClassName={itemClassName}
               activeItemClassName={activeItemClassName}
               renderItem={renderItem}
               renderLink={renderLink}
             />
           </div>
-        </details>
+        </ControllableDetails>
       </div>
     )
 
@@ -306,6 +339,9 @@ function SidebarNav({
   items,
   collapsed = false,
   scrollable = true,
+  showSectionLabels = true,
+  itemSize = "md",
+  activeIndicator = "bar",
   itemClassName,
   activeItemClassName,
   renderItem,
@@ -316,6 +352,7 @@ function SidebarNav({
 
   return (
     <nav
+      aria-label="Primary navigation"
       data-slot="sidebar-nav"
       data-collapsed={collapsed || undefined}
       className={cn("grid min-h-0 gap-1", scrollable ? "overflow-y-auto overscroll-contain" : null, className)}
@@ -325,6 +362,9 @@ function SidebarNav({
         items={visibleItems}
         collapsed={collapsed}
         depth={0}
+        showSectionLabels={showSectionLabels}
+        itemSize={itemSize}
+        activeIndicator={activeIndicator}
         itemClassName={itemClassName}
         activeItemClassName={activeItemClassName}
         renderItem={renderItem}

package/packages/cli/vendor/src/components/modern/image-cropper.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import * as React from "react"
+import Cropper, { type Area, type Point } from "react-easy-crop"
+import { RotateCwIcon, ZoomInIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function degreesToRadians(degrees: number) {
+  return (degrees * Math.PI) / 180
+}
+
+function getRotatedSize(width: number, height: number, rotation: number) {
+  const radians = degreesToRadians(rotation)
+  return {
+    width: Math.abs(Math.cos(radians) * width) + Math.abs(Math.sin(radians) * height),
+    height: Math.abs(Math.sin(radians) * width) + Math.abs(Math.cos(radians) * height),
+  }
+}
+
+function loadImage(src: string, crossOrigin?: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image()
+    if (crossOrigin) image.crossOrigin = crossOrigin
+    image.onload = () => resolve(image)
+    image.onerror = () => reject(new Error("Crop source image could not be loaded"))
+    image.src = src
+  })
+}
+
+export async function createCroppedImageBlob({
+  src,
+  crop,
+  rotation = 0,
+  type = "image/png",
+  quality = 0.92,
+  crossOrigin = "anonymous",
+}: {
+  src: string
+  crop: Area
+  rotation?: number
+  type?: string
+  quality?: number
+  crossOrigin?: string
+}) {
+  const image = await loadImage(src, crossOrigin)
+  const rotatedSize = getRotatedSize(image.naturalWidth, image.naturalHeight, rotation)
+  const sourceCanvas = document.createElement("canvas")
+  sourceCanvas.width = Math.ceil(rotatedSize.width)
+  sourceCanvas.height = Math.ceil(rotatedSize.height)
+  const sourceContext = sourceCanvas.getContext("2d")
+  if (!sourceContext) throw new Error("Canvas 2D context is unavailable")
+
+  sourceContext.translate(sourceCanvas.width / 2, sourceCanvas.height / 2)
+  sourceContext.rotate(degreesToRadians(rotation))
+  sourceContext.translate(-image.naturalWidth / 2, -image.naturalHeight / 2)
+  sourceContext.drawImage(image, 0, 0)
+
+  const outputCanvas = document.createElement("canvas")
+  outputCanvas.width = Math.max(1, Math.round(crop.width))
+  outputCanvas.height = Math.max(1, Math.round(crop.height))
+  const outputContext = outputCanvas.getContext("2d")
+  if (!outputContext) throw new Error("Canvas 2D context is unavailable")
+  outputContext.drawImage(
+    sourceCanvas,
+    Math.round(crop.x),
+    Math.round(crop.y),
+    Math.round(crop.width),
+    Math.round(crop.height),
+    0,
+    0,
+    outputCanvas.width,
+    outputCanvas.height
+  )
+
+  return new Promise<Blob>((resolve, reject) => {
+    outputCanvas.toBlob(
+      (blob) => (blob ? resolve(blob) : reject(new Error("Cropped image could not be encoded"))),
+      type,
+      quality
+    )
+  })
+}
+
+export type ImageCropperProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  src: string
+  alt?: string
+  crop?: Point
+  defaultCrop?: Point
+  onCropChange?: (crop: Point) => void
+  zoom?: number
+  defaultZoom?: number
+  onZoomChange?: (zoom: number) => void
+  rotation?: number
+  defaultRotation?: number
+  onRotationChange?: (rotation: number) => void
+  onCropComplete?: (area: Area, areaPixels: Area) => void
+  aspect?: number
+  cropShape?: "rect" | "round"
+  objectFit?: "contain" | "cover" | "horizontal-cover" | "vertical-cover"
+  minZoom?: number
+  maxZoom?: number
+  zoomStep?: number
+  showGrid?: boolean
+  disabled?: boolean
+  labels?: {
+    cropper?: string
+    zoom?: string
+    rotation?: string
+  }
+}
+
+function ImageCropper({
+  src,
+  alt = "Image crop preview",
+  crop,
+  defaultCrop = { x: 0, y: 0 },
+  onCropChange,
+  zoom,
+  defaultZoom = 1,
+  onZoomChange,
+  rotation,
+  defaultRotation = 0,
+  onRotationChange,
+  onCropComplete,
+  aspect = 1,
+  cropShape = "rect",
+  objectFit = "contain",
+  minZoom = 1,
+  maxZoom = 3,
+  zoomStep = 0.1,
+  showGrid = true,
+  disabled = false,
+  labels,
+  className,
+  ...props
+}: ImageCropperProps) {
+  const [internalCrop, setInternalCrop] = React.useState(defaultCrop)
+  const [internalZoom, setInternalZoom] = React.useState(defaultZoom)
+  const [internalRotation, setInternalRotation] = React.useState(defaultRotation)
+  const currentCrop = crop ?? internalCrop
+  const currentZoom = zoom ?? internalZoom
+  const currentRotation = rotation ?? internalRotation
+
+  return (
+    <div data-slot="image-cropper" data-disabled={disabled || undefined} className={cn("grid gap-3 data-[disabled]:opacity-60", className)} {...props}>
+      <div
+        role="img"
+        aria-label={labels?.cropper ?? alt}
+        className={cn("relative min-h-64 overflow-hidden rounded-md bg-black", disabled && "pointer-events-none")}
+        style={{ aspectRatio: aspect }}
+      >
+        <Cropper
+          image={src}
+          crop={currentCrop}
+          zoom={currentZoom}
+          rotation={currentRotation}
+          aspect={aspect}
+          cropShape={cropShape}
+          objectFit={objectFit}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          zoomSpeed={zoomStep}
+          showGrid={showGrid}
+          onCropChange={(nextCrop) => {
+            if (crop === undefined) setInternalCrop(nextCrop)
+            onCropChange?.(nextCrop)
+          }}
+          onZoomChange={(nextZoom) => {
+            if (zoom === undefined) setInternalZoom(nextZoom)
+            onZoomChange?.(nextZoom)
+          }}
+          onRotationChange={(nextRotation) => {
+            if (rotation === undefined) setInternalRotation(nextRotation)
+            onRotationChange?.(nextRotation)
+          }}
+          onCropComplete={onCropComplete}
+        />
+      </div>
+      <div className="grid gap-2 sm:grid-cols-2">
+        <label className="grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground">
+          <ZoomInIcon className="size-4" aria-hidden="true" />
+          <span className="sr-only">{labels?.zoom ?? "Zoom"}</span>
+          <input
+            type="range"
+            min={minZoom}
+            max={maxZoom}
+            step={zoomStep}
+            value={currentZoom}
+            disabled={disabled}
+            aria-label={labels?.zoom ?? "Zoom"}
+            className="w-full accent-foreground"
+            onChange={(event) => {
+              const nextZoom = Number(event.target.value)
+              if (zoom === undefined) setInternalZoom(nextZoom)
+              onZoomChange?.(nextZoom)
+            }}
+          />
+          <span className="w-9 text-right tabular-nums">{currentZoom.toFixed(1)}x</span>
+        </label>
+        <label className="grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground">
+          <RotateCwIcon className="size-4" aria-hidden="true" />
+          <span className="sr-only">{labels?.rotation ?? "Rotation"}</span>
+          <input
+            type="range"
+            min="-180"
+            max="180"
+            step="1"
+            value={currentRotation}
+            disabled={disabled}
+            aria-label={labels?.rotation ?? "Rotation"}
+            className="w-full accent-foreground"
+            onChange={(event) => {
+              const nextRotation = Number(event.target.value)
+              if (rotation === undefined) setInternalRotation(nextRotation)
+              onRotationChange?.(nextRotation)
+            }}
+          />
+          <span className="w-10 text-right tabular-nums">{Math.round(currentRotation)}°</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export { ImageCropper }

package/packages/cli/vendor/src/components/modern/index.ts

@@ -1,6 +1,5 @@
-export * from "../display/carousel"
-export * from "../display/tag"
-export * from "../display/typography"
 export * from "./calendar-scheduler"
 export * from "./dual-list-picker"
 export * from "./resizable-panel"
+export * from "./rich-text-editor"
+export * from "./image-cropper"

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

@@ -1,58 +1,199 @@
 "use client"
 
 import * as React from "react"
+import { EditorContent, useEditor, type Editor } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from "@tiptap/extension-link"
+import Placeholder from "@tiptap/extension-placeholder"
+import {
+  BoldIcon,
+  CodeIcon,
+  Heading2Icon,
+  ItalicIcon,
+  LinkIcon,
+  ListIcon,
+  ListOrderedIcon,
+  QuoteIcon,
+  Redo2Icon,
+  StrikethroughIcon,
+  Undo2Icon,
+  UnlinkIcon,
+} from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-export type RichTextEditorProps = React.ComponentProps<"div"> & {
+export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
   value?: string
   defaultValue?: string
   onValueChange?: (value: string) => void
   output?: "text" | "html"
   placeholder?: string
+  editable?: boolean
+  autoFocus?: boolean
+  minHeight?: number
+  onLinkRequest?: (currentHref?: string) => string | null | undefined
+  labels?: {
+    editor?: string
+    toolbar?: string
+  }
 }
 
-function RichTextEditor({
+type ToolbarAction = {
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  active?: boolean
+  disabled?: boolean
+  run: () => void
+}
+
+function escapeHtml(value: string) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
+}
+
+function contentForEditor(value: string, output: "text" | "html") {
+  return output === "html" ? value : `<p>${escapeHtml(value)}</p>`
+}
+
+function EditorToolbar({ editor, onLinkRequest, label }: { editor: Editor; onLinkRequest?: RichTextEditorProps["onLinkRequest"]; label: string }) {
+  const linkHref = editor.getAttributes("link").href as string | undefined
+  const actions: ToolbarAction[] = [
+    { label: "Undo", icon: Undo2Icon, disabled: !editor.can().undo(), run: () => editor.chain().focus().undo().run() },
+    { label: "Redo", icon: Redo2Icon, disabled: !editor.can().redo(), run: () => editor.chain().focus().redo().run() },
+    { label: "Bold", icon: BoldIcon, active: editor.isActive("bold"), run: () => editor.chain().focus().toggleBold().run() },
+    { label: "Italic", icon: ItalicIcon, active: editor.isActive("italic"), run: () => editor.chain().focus().toggleItalic().run() },
+    { label: "Strike", icon: StrikethroughIcon, active: editor.isActive("strike"), run: () => editor.chain().focus().toggleStrike().run() },
+    { label: "Inline code", icon: CodeIcon, active: editor.isActive("code"), run: () => editor.chain().focus().toggleCode().run() },
+    { label: "Heading", icon: Heading2Icon, active: editor.isActive("heading", { level: 2 }), run: () => editor.chain().focus().toggleHeading({ level: 2 }).run() },
+    { label: "Bullet list", icon: ListIcon, active: editor.isActive("bulletList"), run: () => editor.chain().focus().toggleBulletList().run() },
+    { label: "Ordered list", icon: ListOrderedIcon, active: editor.isActive("orderedList"), run: () => editor.chain().focus().toggleOrderedList().run() },
+    { label: "Blockquote", icon: QuoteIcon, active: editor.isActive("blockquote"), run: () => editor.chain().focus().toggleBlockquote().run() },
+  ]
+
+  if (onLinkRequest) {
+    actions.push({
+      label: "Set link",
+      icon: LinkIcon,
+      active: editor.isActive("link"),
+      run: () => {
+        const href = onLinkRequest(linkHref)
+        if (href === null || href === undefined) return
+        if (!href.trim()) editor.chain().focus().unsetLink().run()
+        else editor.chain().focus().extendMarkRange("link").setLink({ href: href.trim() }).run()
+      },
+    })
+  }
+
+  if (editor.isActive("link")) {
+    actions.push({ label: "Remove link", icon: UnlinkIcon, run: () => editor.chain().focus().unsetLink().run() })
+  }
+
+  return (
+    <div role="toolbar" aria-label={label} className="flex flex-wrap gap-1 border-b p-1.5">
+      {actions.map((action) => {
+        const Icon = action.icon
+        return (
+          <button
+            key={action.label}
+            type="button"
+            title={action.label}
+            aria-label={action.label}
+            aria-pressed={action.active || undefined}
+            disabled={action.disabled}
+            className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent aria-pressed:text-foreground disabled:pointer-events-none disabled:opacity-40"
+            onClick={action.run}
+          >
+            <Icon className="size-4" />
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function MountedRichTextEditor({
   value,
-  defaultValue,
+  defaultValue = "",
   onValueChange,
-  output: _output,
+  output = "html",
   placeholder = "Start typing...",
+  editable = true,
+  autoFocus = false,
+  minHeight = 144,
+  onLinkRequest,
+  labels,
   className,
-  children,
   ...props
 }: RichTextEditorProps) {
-  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? "")
-  const isControlled = value !== undefined
-  const currentValue = isControlled ? value ?? "" : uncontrolledValue
+  const initialContent = value ?? defaultValue
+  const editor = useEditor({
+    immediatelyRender: true,
+    autofocus: autoFocus,
+    editable,
+    editorProps: {
+      attributes: {
+        "aria-label": labels?.editor ?? "Rich text editor",
+        role: "textbox",
+      },
+    },
+    content: contentForEditor(initialContent, output),
+    extensions: [
+      StarterKit.configure({ link: false }),
+      Link.configure({ openOnClick: false, autolink: true, defaultProtocol: "https" }),
+      Placeholder.configure({ placeholder }),
+    ],
+    onUpdate: ({ editor: nextEditor }) => {
+      onValueChange?.(output === "html" ? nextEditor.getHTML() : nextEditor.getText())
+    },
+  })
+
+  React.useEffect(() => {
+    if (!editor || value === undefined) return
+    const currentValue = output === "html" ? editor.getHTML() : editor.getText()
+    if (currentValue !== value) editor.commands.setContent(contentForEditor(value, output), { emitUpdate: false })
+  }, [editor, output, value])
+
+  React.useEffect(() => {
+    editor?.setEditable(editable)
+  }, [editable, editor])
 
   return (
     <div
-      {...props}
       data-slot="rich-text-editor"
-      className={cn(
-        "min-h-28 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-3 py-2 text-sm leading-6 text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] outline-none transition-[background-color,border-color,box-shadow] focus-within:border-[color:var(--ring)] focus-within:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)]",
-        className
-      )}
+      data-disabled={!editable || undefined}
+      className={cn("overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring data-[disabled]:opacity-60", className)}
+      {...props}
     >
-      <textarea
-        value={currentValue}
-        placeholder={placeholder}
-        aria-multiline="true"
-        className={cn(
-          "min-h-20 w-full resize-none border-0 bg-transparent p-0 outline-none placeholder:text-muted-foreground/65"
-        )}
-        onChange={(event) => {
-          const nextValue = event.currentTarget.value
-          if (!isControlled) {
-            setUncontrolledValue(nextValue)
-          }
-          onValueChange?.(nextValue)
-        }}
+      {editor && editable ? <EditorToolbar editor={editor} onLinkRequest={onLinkRequest} label={labels?.toolbar ?? "Text formatting"} /> : null}
+      <EditorContent
+        editor={editor}
+        aria-label={labels?.editor ?? "Rich text editor"}
+        className="[&_.tiptap]:px-3 [&_.tiptap]:py-2.5 [&_.tiptap]:outline-none [&_.tiptap_a]:text-primary [&_.tiptap_a]:underline [&_.tiptap_blockquote]:border-l-2 [&_.tiptap_blockquote]:pl-3 [&_.tiptap_h2]:text-lg [&_.tiptap_h2]:font-semibold [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:pl-6 [&_.tiptap_p.is-editor-empty:first-child:before]:pointer-events-none [&_.tiptap_p.is-editor-empty:first-child:before]:float-left [&_.tiptap_p.is-editor-empty:first-child:before]:h-0 [&_.tiptap_p.is-editor-empty:first-child:before]:text-muted-foreground [&_.tiptap_p.is-editor-empty:first-child:before]:content-[attr(data-placeholder)] [&_.tiptap_ul]:list-disc [&_.tiptap_ul]:pl-6"
+        style={{ minHeight }}
       />
-      {children}
     </div>
   )
 }
 
-export { RichTextEditor }
+function RichTextEditor(props: RichTextEditorProps) {
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <div
+        data-slot="rich-text-editor"
+        data-state="loading"
+        className={cn("overflow-hidden rounded-md border bg-background shadow-sm", props.className)}
+        style={{ minHeight: props.minHeight ?? 144 }}
+        aria-busy="true"
+      />
+    )
+  }
+
+  return <MountedRichTextEditor {...props} />
+}
+
+export { EditorToolbar, RichTextEditor }

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

@@ -2,7 +2,4 @@ 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("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."),
 ])

package/packages/cli/vendor/src/components/navigation/index.ts

@@ -1,6 +1 @@
-export * from "./anchor-nav"
-export * from "./nav-tabs"
-export * from "./page-tabs"
 export * from "./pagination"
-export * from "./stepper-tabs"
-export * from "./command-bar"