@actuate-media/cms-admin 0.10.0 → 0.12.0

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/ComponentBlockField.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+/**
+ * Top-level admin field for component-aware blocks. Consumes a
+ * {@link Manifest} produced by `@actuate-media/component-blocks`,
+ * renders a component picker (when more than one component is allowed)
+ * and a recursive props form via {@link PropInput}.
+ *
+ * Storage shape:
+ *   { component: 'Hero', props: { title: 'Welcome', alignment: 'center' } }
+ *
+ * Live validation runs through `validateComponentBlockValue` from
+ * `@actuate-media/cms-core`. The whole-value error is shown at the top
+ * of the form, and the per-prop error map (parsed out of the message
+ * string) is forwarded into `PropInput` so each input can render its
+ * own inline error.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import type { Manifest } from '@actuate-media/component-blocks'
+
+import {
+  buildClientValidator,
+  getAllowedComponents,
+  parsePerPropErrors,
+  seedPropsForComponent,
+} from './component-block-helpers.js'
+import { PropInput } from './PropInput.js'
+
+export interface ComponentBlockValue {
+  component: string
+  props: Record<string, unknown>
+}
+
+export interface ComponentBlockFieldProps {
+  label?: string
+  manifest: Manifest
+  /** Optional whitelist of component names. */
+  allow?: string[]
+  /** Default component picked when the field is first used. */
+  defaultComponent?: string
+  value?: ComponentBlockValue
+  onChange: (value: ComponentBlockValue) => void
+  /**
+   * Optional async validator hook. Receives the proposed value and the
+   * field config; should return `true` for ok or a string error.
+   * Falls back to a built-in structural validator when not provided —
+   * which is what cms-core would do server-side at save time anyway.
+   */
+  validate?: (value: ComponentBlockValue) => string | true
+  helpText?: string
+}
+
+export function ComponentBlockField({
+  label,
+  manifest,
+  allow,
+  defaultComponent,
+  value,
+  onChange,
+  validate,
+  helpText,
+}: ComponentBlockFieldProps) {
+  const allowedComponents = useMemo(() => getAllowedComponents(manifest, allow), [manifest, allow])
+  // Track the initial seed application so we don't repeatedly stomp
+  // the editor's prop values on every render. The defaultComponent
+  // seed only fires once, when value is undefined on mount.
+  const seededRef = useRef(false)
+
+  useEffect(() => {
+    if (seededRef.current) return
+    if (value) {
+      seededRef.current = true
+      return
+    }
+    const picked =
+      allowedComponents.find((c) => c.name === defaultComponent) ?? allowedComponents[0]
+    if (!picked) return
+    seededRef.current = true
+    onChange({ component: picked.name, props: seedPropsForComponent(picked) })
+  }, [allowedComponents, defaultComponent, value, onChange])
+
+  const currentSpec =
+    (value && manifest.components.find((c) => c.name === value.component)) ?? allowedComponents[0]
+
+  // Pure structural validation when caller didn't provide their own.
+  // Keeps the form usable even without a live validator wired in.
+  const builtinValidate = useMemo(() => buildClientValidator(manifest, allow), [manifest, allow])
+  const validator = validate ?? builtinValidate
+
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const perPropErrors = useMemo(() => parsePerPropErrors(errorMessage), [errorMessage])
+
+  useEffect(() => {
+    if (!value) {
+      setErrorMessage(null)
+      return
+    }
+    const result = validator(value)
+    setErrorMessage(result === true ? null : result)
+  }, [value, validator])
+
+  function handleComponentChange(componentName: string) {
+    const spec = manifest.components.find((c) => c.name === componentName)
+    if (!spec) return
+    onChange({ component: spec.name, props: seedPropsForComponent(spec) })
+  }
+
+  function handlePropChange(propName: string, next: unknown) {
+    if (!value) return
+    onChange({
+      ...value,
+      props: { ...value.props, [propName]: next },
+    })
+  }
+
+  if (!currentSpec) {
+    return (
+      <div className="rounded-md border border-[var(--destructive)] bg-red-50 p-3 text-sm text-[var(--destructive)]">
+        Component block has no components to choose from.
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {label ? <label className="block text-sm font-medium">{label}</label> : null}
+
+      {allowedComponents.length > 1 ? (
+        <label className="block text-sm">
+          <div className="mb-1 text-xs tracking-wide text-[var(--muted-foreground)] uppercase">
+            Component
+          </div>
+          <select
+            value={currentSpec.name}
+            onChange={(e) => handleComponentChange(e.target.value)}
+            className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+          >
+            {allowedComponents.map((spec) => (
+              <option key={spec.name} value={spec.name}>
+                {spec.displayName}
+              </option>
+            ))}
+          </select>
+        </label>
+      ) : null}
+
+      {errorMessage ? (
+        <div className="rounded-md border border-[var(--destructive)] bg-red-50 px-3 py-2 text-xs text-[var(--destructive)]">
+          {errorMessage}
+        </div>
+      ) : null}
+
+      <fieldset className="rounded-md border border-[var(--border)] bg-[var(--card)] p-4">
+        <legend className="px-1 text-xs tracking-wide text-[var(--muted-foreground)] uppercase">
+          {currentSpec.displayName}
+        </legend>
+        {currentSpec.description ? (
+          <p className="mb-3 text-xs text-[var(--muted-foreground)]">{currentSpec.description}</p>
+        ) : null}
+        <div className="space-y-4">
+          {currentSpec.props.map((prop) => (
+            <PropInput
+              key={prop.name}
+              prop={prop}
+              value={value?.props?.[prop.name]}
+              onChange={(next) => handlePropChange(prop.name, next)}
+              errors={perPropErrors}
+              path={prop.name}
+            />
+          ))}
+        </div>
+      </fieldset>
+
+      {helpText ? <p className="text-xs text-[var(--muted-foreground)]">{helpText}</p> : null}
+    </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/FieldRenderer.tsx

@@ -13,6 +13,7 @@ import { BlockBuilderField } from './BlockBuilderField.js'
 import { GroupField } from './GroupField.js'
 import { NavBuilderField } from './NavBuilderField.js'
 import { NumberField } from './NumberField.js'
+import { ComponentBlockField } from './ComponentBlockField.js'
 
 export interface FieldDefinition {
   name: string
@@ -28,6 +29,9 @@ export interface FieldDefinition {
   multi?: boolean
   fields?: FieldDefinition[]
   blocks?: any[]
+  manifest?: unknown
+  allow?: string[]
+  defaultComponent?: string
 }
 
 export interface FieldRendererProps {
@@ -50,6 +54,7 @@ const FIELD_MAP: Record<string, React.ComponentType<any>> = {
   group: GroupField,
   nav: NavBuilderField,
   number: NumberField,
+  componentBlock: ComponentBlockField,
 }
 
 export function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
@@ -79,6 +84,9 @@ export function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
       fields={field.fields}
       blocks={field.blocks}
       name={field.name}
+      manifest={field.manifest}
+      allow={field.allow}
+      defaultComponent={field.defaultComponent}
     />
   )
 }