@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/components/ui/Button.tsx

@@ -1,47 +1,79 @@
 'use client'
 
-import { type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
 
-type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost'
-type ButtonSize = 'sm' | 'md' | 'lg'
+const button = cv(
+  // Base classes apply to every variant.
+  'focus-visible:ring-offset-background inline-flex items-center justify-center gap-2 rounded-[var(--radius)] font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90',
+        secondary: 'bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80',
+        danger: 'bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90',
+        ghost: 'bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]',
+        outline:
+          'border border-[var(--border)] bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]',
+        link: 'bg-transparent text-[var(--primary)] underline-offset-4 hover:underline',
+      },
+      size: {
+        xs: 'h-7 px-2 text-xs',
+        sm: 'h-8 px-2.5 text-xs',
+        md: 'h-9 px-4 text-sm',
+        lg: 'h-10 px-6 text-base',
+        icon: 'h-9 w-9 p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+    },
+  },
+)
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  loading?: boolean
-  children: ReactNode
-}
-
-const variantClasses: Record<ButtonVariant, string> = {
-  primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90',
-  secondary: 'bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80',
-  danger: 'bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90',
-  ghost: 'bg-transparent hover:bg-[var(--accent)] text-[var(--foreground)]',
-}
+export type ButtonVariants = VariantProps<typeof button>
 
-const sizeClasses: Record<ButtonSize, string> = {
-  sm: 'px-2.5 py-1 text-xs',
-  md: 'px-4 py-2 text-sm',
-  lg: 'px-6 py-2.5 text-base',
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariants {
+  loading?: boolean
+  /** Stretch the button to fill its container width. */
+  full?: boolean
+  /** Icon rendered before the children. Use with `size="icon"` for icon-only buttons. */
+  leftIcon?: ReactNode
+  /** Icon rendered after the children. */
+  rightIcon?: ReactNode
+  children?: ReactNode
 }
 
-export function Button({
-  variant = 'primary',
-  size = 'md',
-  loading = false,
-  disabled,
-  children,
-  className = '',
-  ...rest
-}: ButtonProps) {
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant,
+    size,
+    full,
+    loading = false,
+    disabled,
+    leftIcon,
+    rightIcon,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
   return (
     <button
+      ref={ref}
       disabled={disabled || loading}
-      className={`inline-flex items-center justify-center gap-2 rounded-[var(--radius)] font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      aria-busy={loading || undefined}
+      className={button({
+        variant,
+        size,
+        class: [full ? 'w-full' : '', className].filter(Boolean).join(' '),
+      })}
       {...rest}
     >
-      {loading && (
-        <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+      {loading ? (
+        <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden>
           <circle
             className="opacity-25"
             cx="12"
@@ -56,8 +88,13 @@ export function Button({
             d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
           />
         </svg>
+      ) : (
+        leftIcon
       )}
       {children}
+      {!loading && rightIcon}
     </button>
   )
-}
+})
+
+export { button as buttonVariants }

package/src/components/ui/Card.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const card = cv(
+  'rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)]',
+  {
+    variants: {
+      padding: {
+        none: 'p-0',
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+      },
+      elevation: {
+        flat: 'shadow-none',
+        sm: 'shadow-sm',
+        md: 'shadow-md',
+        lg: 'shadow-lg',
+      },
+    },
+    defaultVariants: { padding: 'md', elevation: 'sm' },
+  },
+)
+
+export type CardVariants = VariantProps<typeof card>
+
+const INTERACTIVE_CLASS = 'transition-shadow hover:shadow-md focus-within:shadow-md'
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariants {
+  /** Apply hover/focus elevation transitions (e.g. for clickable cards). */
+  interactive?: boolean
+  children?: ReactNode
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { padding, elevation, interactive, className, children, ...rest },
+  ref,
+) {
+  const extras = [interactive ? INTERACTIVE_CLASS : '', className].filter(Boolean).join(' ')
+  return (
+    <div ref={ref} className={card({ padding, elevation, class: extras })} {...rest}>
+      {children}
+    </div>
+  )
+})
+
+/**
+ * Header slot — sits at the top of a card. Pair with CardTitle / CardDescription.
+ */
+export function CardHeader({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`flex flex-col space-y-1.5 ${className}`} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export function CardTitle({
+  className = '',
+  children,
+  ...rest
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={`text-lg leading-tight font-semibold tracking-tight text-[var(--card-foreground)] ${className}`}
+      {...rest}
+    >
+      {children}
+    </h3>
+  )
+}
+
+export function CardDescription({
+  className = '',
+  children,
+  ...rest
+}: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={`text-sm text-[var(--muted-foreground)] ${className}`} {...rest}>
+      {children}
+    </p>
+  )
+}
+
+export function CardContent({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={className} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export function CardFooter({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`flex items-center justify-end gap-2 pt-4 ${className}`} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export { card as cardVariants }

package/src/components/ui/DataTable.tsx

@@ -161,7 +161,7 @@ function RowActionsMenu({ actions, row }: { actions: RowAction[]; row: Row }) {
         <MoreVerticalIcon />
       </button>
       {open && (
-        <div className="absolute right-0 top-full z-50 mt-1 w-40 rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
+        <div className="absolute top-full right-0 z-50 mt-1 w-40 rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
           {actions.map((action) => (
             <button
               key={action.key}

package/src/components/ui/Input.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const input = cv(
+  'focus-visible:ring-offset-background flex w-full rounded-[var(--radius)] border bg-[var(--background)] text-[var(--foreground)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--muted-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-2.5 text-xs',
+        md: 'h-9 px-3 text-sm',
+        lg: 'h-10 px-4 text-base',
+      },
+      state: {
+        default: 'border-[var(--border)]',
+        invalid: 'border-[var(--destructive)] focus-visible:ring-[var(--destructive)]',
+        valid: 'border-emerald-500 focus-visible:ring-emerald-500',
+      },
+    },
+    defaultVariants: { size: 'md', state: 'default' },
+  },
+)
+
+export type InputVariants = VariantProps<typeof input>
+
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, InputVariants {}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { size, state, className, ...rest },
+  ref,
+) {
+  return <input ref={ref} className={input({ size, state, class: className })} {...rest} />
+})
+
+export { input as inputVariants }

package/src/components/ui/SearchInput.tsx

@@ -10,7 +10,7 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
   return (
     <div className="relative flex-1">
       <svg
-        className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+        className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -27,12 +27,12 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pl-9 pr-8 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pr-8 pl-9 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
       />
       {value && (
         <button
           onClick={() => onChange('')}
-          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          className="absolute top-1/2 right-2 -translate-y-1/2 rounded p-0.5 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
           aria-label="Clear search"
         >
           <svg
@@ -46,7 +46,7 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
           </svg>
         </button>
       )}
-      <kbd className="pointer-events-none absolute right-8 top-1/2 hidden -translate-y-1/2 rounded border border-[var(--border)] px-1.5 py-0.5 text-[10px] text-[var(--muted-foreground)] sm:inline-block">
+      <kbd className="pointer-events-none absolute top-1/2 right-8 hidden -translate-y-1/2 rounded border border-[var(--border)] px-1.5 py-0.5 text-[10px] text-[var(--muted-foreground)] sm:inline-block">
         ⌘K
       </kbd>
     </div>

package/src/components/ui/Select.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, type SelectHTMLAttributes, type ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const select = cv(
+  // Shares geometry with Input so they line up in forms.
+  'focus-visible:ring-offset-background flex w-full appearance-none rounded-[var(--radius)] border bg-[var(--background)] pr-8 text-[var(--foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 pr-7 pl-2.5 text-xs',
+        md: 'h-9 pr-8 pl-3 text-sm',
+        lg: 'h-10 pr-9 pl-4 text-base',
+      },
+      state: {
+        default: 'border-[var(--border)]',
+        invalid: 'border-[var(--destructive)] focus-visible:ring-[var(--destructive)]',
+        valid: 'border-emerald-500 focus-visible:ring-emerald-500',
+      },
+    },
+    defaultVariants: { size: 'md', state: 'default' },
+  },
+)
+
+export type SelectVariants = VariantProps<typeof select>
+
+export interface SelectProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>, SelectVariants {
+  children?: ReactNode
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { size, state, className, children, ...rest },
+  ref,
+) {
+  return (
+    <div className="relative">
+      <select ref={ref} className={select({ size, state, class: className })} {...rest}>
+        {children}
+      </select>
+      <svg
+        aria-hidden
+        className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </div>
+  )
+})
+
+export { select as selectVariants }

package/src/components/ui/Toast.tsx

@@ -45,7 +45,7 @@ export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
   if (toasts.length === 0) return null
 
   return (
-    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
+    <div className="fixed right-4 bottom-4 z-[100] flex flex-col gap-2">
       {toasts.map((toast) => (
         <div
           key={toast.id}

package/src/components/ui/index.ts

@@ -1,7 +1,21 @@
-export { Button } from './Button.js'
-export type { ButtonProps } from './Button.js'
-export { Badge } from './Badge.js'
-export type { BadgeProps } from './Badge.js'
+export { Button, buttonVariants } from './Button.js'
+export type { ButtonProps, ButtonVariants } from './Button.js'
+export { Badge, badgeVariants, STATUS_TONE, STATUS_LABEL } from './Badge.js'
+export type { BadgeProps, BadgeVariants, DocumentStatus } from './Badge.js'
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  cardVariants,
+} from './Card.js'
+export type { CardProps, CardVariants } from './Card.js'
+export { Input, inputVariants } from './Input.js'
+export type { InputProps, InputVariants } from './Input.js'
+export { Select, selectVariants } from './Select.js'
+export type { SelectProps, SelectVariants } from './Select.js'
 export { Avatar } from './Avatar.js'
 export type { AvatarProps } from './Avatar.js'
 export { EmptyState } from './EmptyState.js'

package/src/fields/BlockBuilderField.tsx

@@ -74,7 +74,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
         <select
           value={(value as string) ?? ''}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)]"
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)]"
         >
           <option value="">Select...</option>
           {field.options.map((opt) => (
@@ -98,7 +98,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
           value={(value as string) ?? ''}
           onChange={(e) => onChange(e.target.value)}
           rows={4}
-          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)]"
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)]"
         />
       </div>
     )
@@ -134,7 +134,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
         value={(value as string) ?? ''}
         onChange={(e) => onChange(e.target.value)}
         required={field.required}
-        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)]"
+        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)]"
       />
     </div>
   )

package/src/fields/DateField.tsx

@@ -25,7 +25,7 @@ export function DateField({ label, value = '', onChange, required, helpText }: D
         />
         <button
           type="button"
-          className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
+          className="absolute top-1/2 right-2 -translate-y-1/2 text-[var(--muted-foreground)]"
           aria-label="Open calendar"
         >
           <svg

package/src/fields/RelationshipField.tsx

@@ -158,12 +158,12 @@ export function RelationshipField({
         onClick={() => handleToggle(opt.id)}
         className={`flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-[var(--accent)] ${isSelected ? 'font-medium' : ''}`}
       >
-        <div className="flex-1 min-w-0 text-left">
+        <div className="min-w-0 flex-1 text-left">
           <div className="flex items-center gap-2">
             <span className="truncate">{getDocTitle(opt)}</span>
             {isSelected && <span className="shrink-0 text-[var(--primary)]">&#10003;</span>}
           </div>
-          <div className="flex items-center gap-2 mt-0.5">
+          <div className="mt-0.5 flex items-center gap-2">
             <span className="text-[10px] text-[var(--muted-foreground)]">{collection}</span>
             {opt.updatedAt && (
               <span className="text-[10px] text-[var(--muted-foreground)]">
@@ -201,7 +201,7 @@ export function RelationshipField({
                 onClick={() => handleRemove(item.id)}
                 className="hover:text-[var(--destructive)]"
               >
-                <X className="w-3 h-3" />
+                <X className="h-3 w-3" />
               </button>
             </span>
           ))}
@@ -209,26 +209,26 @@ export function RelationshipField({
       )}
 
       <div className="relative">
-        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)] pointer-events-none" />
+        <Search className="pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]" />
         <input
           type="text"
           value={searchTerm}
           onChange={(e) => handleSearch(e.target.value)}
           onFocus={() => setOpen(true)}
           placeholder={`Search ${relationTo}...`}
-          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] pl-8 pr-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pr-3 pl-8 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
         />
         {loading && (
-          <Loader2 className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-[var(--muted-foreground)]" />
+          <Loader2 className="absolute top-1/2 right-2.5 h-4 w-4 -translate-y-1/2 animate-spin text-[var(--muted-foreground)]" />
         )}
 
         {open && (
-          <ul className="absolute z-50 mt-1 w-full max-h-60 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
+          <ul className="absolute z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
             {unselectedItems.map((opt) => (
               <li key={opt.id}>{renderOption(opt, false)}</li>
             ))}
             {selectedItems.length > 0 && unselectedItems.length > 0 && (
-              <li className="border-t border-[var(--border)] my-1" />
+              <li className="my-1 border-t border-[var(--border)]" />
             )}
             {selectedItems.map((opt) => (
               <li key={opt.id}>{renderOption(opt, true)}</li>
@@ -236,7 +236,7 @@ export function RelationshipField({
             {options.length === 0 && !loading && (
               <li className="px-3 py-2 text-sm text-[var(--muted-foreground)]">No results</li>
             )}
-            <li className="border-t border-[var(--border)] mt-1">
+            <li className="mt-1 border-t border-[var(--border)]">
               <button
                 type="button"
                 onClick={() => {
@@ -245,7 +245,7 @@ export function RelationshipField({
                 }}
                 className="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--primary)] hover:bg-[var(--accent)]"
               >
-                <Plus className="w-3.5 h-3.5" />
+                <Plus className="h-3.5 w-3.5" />
                 Create New
               </button>
             </li>

package/src/fields/TextField.tsx

@@ -43,7 +43,7 @@ export function TextField({
         onChange={(e) => onChange(e.target.value)}
         required={required}
         maxLength={maxLength}
-        className={`w-full rounded-md border bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)] ${
+        className={`w-full rounded-md border bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)] ${
           hasError ? 'border-[var(--destructive)]' : 'border-[var(--border)]'
         }`}
       />

package/src/index.ts

@@ -8,6 +8,34 @@ export type { SidebarProps } from './layout/Sidebar.js'
 export { Header } from './layout/Header.js'
 export type { HeaderProps } from './layout/Header.js'
 
+// Layout primitives — the sanctioned way to compose admin views.
+// Always prefer these to hand-rolled flex/grid utilities.
+export {
+  AdminShell,
+  PageContainer,
+  Stack,
+  Cluster,
+  Grid,
+  Split,
+  Box,
+  tokens,
+} from './layout/primitives/index.js'
+export type {
+  AdminShellProps,
+  PageContainerProps,
+  StackProps,
+  StackSpace,
+  ClusterProps,
+  ClusterAlign,
+  ClusterJustify,
+  GridProps,
+  GridResponsive,
+  SplitProps,
+  BoxProps,
+  SpaceToken,
+  RadiusToken,
+} from './layout/primitives/index.js'
+
 export { Dashboard } from './views/Dashboard.js'
 export { Posts } from './views/Posts.js'
 export { Pages } from './views/Pages.js'
@@ -60,6 +88,10 @@ export type { SEOData, SEOPanelProps } from './components/SEOPanel.js'
 export { LivePreview } from './components/LivePreview.js'
 export { VersionHistory } from './components/VersionHistory.js'
 export type { VersionHistoryProps } from './components/VersionHistory.js'
+export { SchedulePublishDialog } from './components/SchedulePublishDialog.js'
+export type { SchedulePublishDialogProps } from './components/SchedulePublishDialog.js'
+export { SharePreviewLinkDialog } from './components/SharePreviewLinkDialog.js'
+export type { SharePreviewLinkDialogProps } from './components/SharePreviewLinkDialog.js'
 export { MediaPickerModal } from './components/MediaPickerModal.js'
 export type { MediaPickerModalProps } from './components/MediaPickerModal.js'
 export { ThemeProvider, useTheme } from './components/ThemeProvider.js'