convex-cms 0.0.15 → 0.0.16

package/admin/src/components/fields/MultiSelectField.tsx

@@ -1,10 +1,10 @@
 import { useId } from 'react'
 import { FieldWrapper } from './FieldWrapper'
 import type { BaseFieldProps } from './types'
-import { Checkbox } from '~/components/ui/checkbox'
-import { Button } from '~/components/ui/button'
-import { Label } from '~/components/ui/label'
-import { cn } from '~/lib/cn'
+import { Checkbox } from '../ui/checkbox'
+import { Button } from '../ui/button'
+import { Field, FieldLabel, FieldSet, FieldLegend } from '../ui/field'
+import { cn } from '../../lib/cn'
 
 export interface MultiSelectFieldProps extends BaseFieldProps<string[]> {
   placeholder?: string
@@ -49,69 +49,74 @@ export function MultiSelectField({
           'rounded-md border border-input p-3',
           error && 'border-destructive'
         )}
-        role="group"
-        aria-labelledby={`${fieldId}-label`}
       >
-        {options.length > 3 && (
-          <div className="mb-3 flex gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={handleSelectAll}
-              disabled={disabled || readOnly}
-            >
-              Select all
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={handleClearAll}
-              disabled={disabled || readOnly || selectedValues.length === 0}
-            >
-              Clear
-            </Button>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {options.map((option) => {
-            const optionId = `${fieldId}-${option.value}`
-            const isChecked = selectedValues.includes(option.value)
+        <FieldSet aria-labelledby={`${fieldId}-label`}>
+          <FieldLegend variant="label" className="sr-only">
+            {field.label}
+          </FieldLegend>
 
-            return (
-              <div
-                key={option.value}
-                className={cn(
-                  'flex items-center space-x-2 rounded-md p-2',
-                  isChecked && 'bg-accent'
-                )}
+          {options.length > 3 && (
+            <div className="flex gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleSelectAll}
+                disabled={disabled || readOnly}
               >
-                <Checkbox
-                  id={optionId}
-                  checked={isChecked}
-                  onCheckedChange={(checked) =>
-                    handleChange(option.value, checked === true)
-                  }
-                  disabled={disabled || readOnly}
-                />
-                <Label
-                  htmlFor={optionId}
-                  className="cursor-pointer text-sm font-normal"
-                >
-                  {option.label}
-                </Label>
-              </div>
-            )
-          })}
-        </div>
+                Select all
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleClearAll}
+                disabled={disabled || readOnly || selectedValues.length === 0}
+              >
+                Clear
+              </Button>
+            </div>
+          )}
 
-        {selectedValues.length > 0 && (
-          <div className="mt-2 text-xs text-muted-foreground">
-            {selectedValues.length} of {options.length} selected
+          <div className="flex flex-col gap-2">
+            {options.map((option) => {
+              const optionId = `${fieldId}-${option.value}`
+              const isChecked = selectedValues.includes(option.value)
+
+              return (
+                <Field
+                  key={option.value}
+                  orientation="horizontal"
+                  className={cn(
+                    'rounded-md p-2',
+                    isChecked && 'bg-accent'
+                  )}
+                >
+                  <Checkbox
+                    id={optionId}
+                    checked={isChecked}
+                    onCheckedChange={(checked) =>
+                      handleChange(option.value, checked === true)
+                    }
+                    disabled={disabled || readOnly}
+                  />
+                  <FieldLabel
+                    htmlFor={optionId}
+                    className="cursor-pointer font-normal"
+                  >
+                    {option.label}
+                  </FieldLabel>
+                </Field>
+              )
+            })}
           </div>
-        )}
+
+          {selectedValues.length > 0 && (
+            <div className="text-xs text-muted-foreground">
+              {selectedValues.length} of {options.length} selected
+            </div>
+          )}
+        </FieldSet>
       </div>
     </FieldWrapper>
   )

package/admin/src/components/fields/NumberField.tsx

@@ -1,8 +1,14 @@
-import { useId, type ChangeEvent } from 'react'
+import { useId, useState, useEffect, type ChangeEvent, type KeyboardEvent, type ClipboardEvent } from 'react'
 import { FieldWrapper } from './FieldWrapper'
 import type { NumberFieldProps } from './types'
-import { Input } from '~/components/ui/input'
-import { cn } from '~/lib/cn'
+import { Input } from '../ui/input'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from '../ui/input-group'
+import { cn } from '../../lib/cn'
 
 export function NumberField({
   field,
@@ -18,18 +24,94 @@ export function NumberField({
   const generatedId = useId()
   const id = providedId ?? `field-${field.name}-${generatedId}`
 
+  const { min, max, precision, prefix, suffix } = (field.options ?? {}) as {
+    min?: number
+    max?: number
+    precision?: number
+    prefix?: string
+    suffix?: string
+  }
+
+  const allowDecimal = precision === undefined || precision > 0
+  const allowNegative = min === undefined || min < 0
+
+  // Local string state so partial values like "3." work during typing
+  const [localValue, setLocalValue] = useState(() => {
+    if (value == null) return ''
+    if (precision !== undefined && precision >= 0) {
+      return value.toFixed(precision)
+    }
+    return String(value)
+  })
+
+  // Sync from parent when value changes externally (e.g. undo, load)
+  useEffect(() => {
+    if (value == null) {
+      if (localValue !== '') setLocalValue('')
+      return
+    }
+    const localNum = parseFloat(localValue)
+    if (!isNaN(localNum) && localNum === value) return
+    if (precision !== undefined && precision >= 0) {
+      setLocalValue(value.toFixed(precision))
+    } else {
+      setLocalValue(String(value))
+    }
+  }, [value, precision]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value
+    const raw = e.target.value
+    setLocalValue(raw)
 
-    if (inputValue === '') {
+    if (raw === '') {
       onChange(null)
       return
     }
 
-    const numValue = parseFloat(inputValue)
+    const numValue = parseFloat(raw)
+    if (!isNaN(numValue)) {
+      if (precision !== undefined && precision >= 0) {
+        const factor = Math.pow(10, precision)
+        onChange(Math.round(numValue * factor) / factor)
+      } else {
+        onChange(numValue)
+      }
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    const allowedKeys = [
+      'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+      'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End',
+    ]
+    if (allowedKeys.includes(e.key)) return
+    if ((e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x', 'z'].includes(e.key)) return
+    if (e.key >= '0' && e.key <= '9') return
+    if (e.key === '.' && allowDecimal && !localValue.includes('.')) return
+    if (e.key === '-' && allowNegative && (e.currentTarget.selectionStart === 0) && !localValue.includes('-')) return
+    e.preventDefault()
+  }
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    const text = e.clipboardData.getData('text')
+    const pattern = allowDecimal ? /[^\d.\-]/g : /[^\d\-]/g
+    const sanitized = text.replace(pattern, '')
+    // Only keep the first decimal point and first minus sign
+    const parts = sanitized.split('.')
+    const clean = parts.length > 1 ? parts[0] + '.' + parts.slice(1).join('') : sanitized
+
+    if (clean === '') return
+
+    const input = e.currentTarget
+    const start = input.selectionStart ?? 0
+    const end = input.selectionEnd ?? 0
+    const next = localValue.slice(0, start) + clean + localValue.slice(end)
 
+    setLocalValue(next)
+
+    const numValue = parseFloat(next)
     if (!isNaN(numValue)) {
-      const { precision } = field.options ?? {}
       if (precision !== undefined && precision >= 0) {
         const factor = Math.pow(10, precision)
         onChange(Math.round(numValue * factor) / factor)
@@ -39,30 +121,61 @@ export function NumberField({
     }
   }
 
-  const { min, max, step, precision } = field.options ?? {}
-  const computedStep = step ?? (precision !== undefined ? Math.pow(10, -precision) : 'any')
+  const handleBlur = () => {
+    if (localValue === '') return
+    const num = parseFloat(localValue)
+    if (isNaN(num)) return
+    if (precision !== undefined && precision >= 0) {
+      setLocalValue(num.toFixed(precision))
+    } else {
+      // Clean up trailing dots or leading zeros
+      setLocalValue(String(num))
+    }
+  }
+
+  const inputMode = allowDecimal ? 'decimal' : 'numeric'
+  const hasGroup = !!(prefix || suffix)
+
+  const inputProps = {
+    type: 'text' as const,
+    inputMode: inputMode as 'decimal' | 'numeric',
+    id,
+    name: field.name,
+    value: localValue,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur,
+    onPaste: handlePaste,
+    disabled,
+    readOnly,
+    required: field.required,
+    placeholder,
+    'aria-invalid': !!error || undefined,
+    'aria-describedby': error ? `${id}-error` : field.description ? `${id}-description` : undefined,
+  }
 
   return (
     <FieldWrapper field={field} error={error} className={className} id={id}>
-      <Input
-        type="number"
-        id={id}
-        name={field.name}
-        value={value ?? ''}
-        onChange={handleChange}
-        disabled={disabled}
-        readOnly={readOnly}
-        required={field.required}
-        min={min}
-        max={max}
-        step={computedStep}
-        placeholder={placeholder}
-        className={cn(error && 'border-destructive focus-visible:ring-destructive')}
-        aria-invalid={!!error}
-        aria-describedby={
-          error ? `${id}-error` : field.description ? `${id}-description` : undefined
-        }
-      />
+      {hasGroup ? (
+        <InputGroup data-disabled={disabled || undefined}>
+          {prefix && (
+            <InputGroupAddon align="inline-start">
+              <InputGroupText>{prefix}</InputGroupText>
+            </InputGroupAddon>
+          )}
+          <InputGroupInput {...inputProps} />
+          {suffix && (
+            <InputGroupAddon align="inline-end">
+              <InputGroupText className="text-xs font-medium">{suffix}</InputGroupText>
+            </InputGroupAddon>
+          )}
+        </InputGroup>
+      ) : (
+        <Input
+          {...inputProps}
+          className={cn(error && 'border-destructive focus-visible:ring-destructive')}
+        />
+      )}
       {(min !== undefined || max !== undefined) && (
         <span className="mt-1 block text-xs text-muted-foreground">
           {min !== undefined && max !== undefined

package/admin/src/components/fields/ReferenceField.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo } from 'react'
 import { useQuery } from 'convex/react'
-import { useApi } from '~/embed/contexts/ApiContext'
+import { useApi } from '../../embed/contexts/ApiContext'
 import { FieldWrapper } from './FieldWrapper'
 import type { BaseFieldProps } from './types'
 import {
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '~/components/ui/dialog'
+} from '../ui/dialog'
 import {
   Command,
   CommandEmpty,
@@ -17,19 +17,19 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '~/components/ui/command'
+} from '../ui/command'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '~/components/ui/select'
-import { Badge } from '~/components/ui/badge'
-import { CmsButton } from '~/components/cmsds/CmsButton'
-import { CmsStatusBadge, type ContentStatus } from '~/components/cmsds/CmsStatusBadge'
-import { CmsEmptyState } from '~/components/cmsds/CmsEmptyState'
-import { cn } from '~/lib/cn'
+} from '../ui/select'
+import { Badge } from '../ui/badge'
+import { CmsButton } from '../cmsds/CmsButton'
+import { CmsStatusBadge, type ContentStatus } from '../cmsds/CmsStatusBadge'
+import { CmsEmptyState } from '../cmsds/CmsEmptyState'
+import { cn } from '../../lib/cn'
 import { FileText, Link2, X, Check, Plus } from 'lucide-react'
 
 export interface ReferenceFieldProps extends BaseFieldProps<string | string[] | null> {
@@ -218,13 +218,13 @@ export function ReferenceField({
 
   return (
     <FieldWrapper field={field} error={error} className={className} id={fieldId}>
-      <div className="space-y-2">
+      <div className="flex flex-col gap-2">
         {selectedIds.length > 0 ? (
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             {selectedIds.length === 1 && selectedEntry && renderSelectedEntry(selectedEntry)}
 
             {selectedIds.length > 1 && multipleSelectedEntries.length > 0 && (
-              <div className="space-y-2">
+              <div className="flex flex-col gap-2">
                 {multipleSelectedEntries.map((entry) => renderSelectedEntry(entry))}
               </div>
             )}

package/admin/src/components/fields/RichTextField.tsx

@@ -1,10 +1,10 @@
 import { useId, type ChangeEvent, useState, useCallback } from 'react'
 import { FieldWrapper } from './FieldWrapper'
 import type { RichTextFieldProps } from './types'
-import { Textarea } from '~/components/ui/textarea'
-import { Button } from '~/components/ui/button'
-import { Separator } from '~/components/ui/separator'
-import { cn } from '~/lib/cn'
+import { Textarea } from '../ui/textarea'
+import { Button } from '../ui/button'
+import { Separator } from '../ui/separator'
+import { cn } from '../../lib/cn'
 import { Bold, Italic, Heading2, Link, List, Quote, Code } from 'lucide-react'
 
 interface ToolbarAction {

package/admin/src/components/fields/SelectField.tsx

@@ -4,11 +4,12 @@ import type { BaseFieldProps } from './types'
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '~/components/ui/select'
-import { cn } from '~/lib/cn'
+} from '../ui/select'
+import { cn } from '../../lib/cn'
 
 export interface SelectFieldProps extends BaseFieldProps<string> {
   placeholder?: string
@@ -50,11 +51,13 @@ export function SelectField({
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>
-          {options.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
+          <SelectGroup>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
         </SelectContent>
       </Select>
     </FieldWrapper>

package/admin/src/components/fields/TagField.tsx

@@ -1,13 +1,14 @@
 import { useState, useCallback, useRef, useEffect, useId } from 'react'
 import { useQuery, useMutation } from 'convex/react'
-import { useApi } from '~/embed/contexts/ApiContext'
+import { useApi } from '../../embed/contexts/ApiContext'
+import { useTaxonomyId } from '../../hooks/useTaxonomyId'
 import { FieldWrapper } from './FieldWrapper'
 import type { BaseFieldProps } from './types'
-import { asTaxonomyId, asTaxonomyTermIds } from '../../types'
-import { Badge } from '~/components/ui/badge'
-import { Input } from '~/components/ui/input'
-import { Button } from '~/components/ui/button'
-import { cn } from '~/lib/cn'
+import { asTaxonomyId } from '../../types'
+import { Badge } from '../ui/badge'
+import { Input } from '../ui/input'
+import { Button } from '../ui/button'
+import { cn } from '../../lib/cn'
 import { X, Plus, Loader2 } from 'lucide-react'
 
 interface TaxonomyTermDisplay {
@@ -37,7 +38,7 @@ export function TagField({
   const api = useApi()
   const generatedId = useId()
   const fieldId = id ?? `field-${field.name}-${generatedId}`
-  const taxonomyId = field.options?.taxonomyId
+  const taxonomyId = useTaxonomyId(field.options)
   const allowCreate = field.options?.allowCreate ?? false
   const maxTags = field.options?.maxTags
   const minTags = field.options?.minTags
@@ -58,7 +59,7 @@ export function TagField({
           taxonomyId: asTaxonomyId(taxonomyId),
           query: inputValue,
           limit: 10,
-          excludeIds: asTaxonomyTermIds(value || []),
+          excludeIds: value || [],
         }
       : 'skip'
   )
@@ -215,7 +216,8 @@ export function TagField({
         <div className="flex flex-wrap items-center gap-1.5 p-2">
           {(value || []).map((termId) => {
             const term = selectedTermsMap.get(termId)
-            const tagName = term?.name ?? 'Loading...'
+            // If the term wasn't found (e.g. legacy string label), display the raw value
+            const tagName = term?.name ?? (selectedTermsResult ? termId : 'Loading...')
             const tagColor = term?.color
 
             return (

package/admin/src/components/fields/TextAreaField.tsx

@@ -1,8 +1,8 @@
 import { useId, type ChangeEvent, useRef, useEffect } from 'react'
 import { FieldWrapper } from './FieldWrapper'
 import type { TextAreaFieldProps } from './types'
-import { Textarea } from '~/components/ui/textarea'
-import { cn } from '~/lib/cn'
+import { Textarea } from '../ui/textarea'
+import { cn } from '../../lib/cn'
 
 export function TextAreaField({
   field,

package/admin/src/components/fields/TextField.tsx

@@ -1,8 +1,8 @@
 import { useId, type ChangeEvent } from 'react'
 import { FieldWrapper } from './FieldWrapper'
 import type { TextFieldProps } from './types'
-import { Input } from '~/components/ui/input'
-import { cn } from '~/lib/cn'
+import { Input } from '../ui/input'
+import { cn } from '../../lib/cn'
 
 export function TextField({
   field,

package/admin/src/components/fields/index.ts

@@ -13,6 +13,8 @@ export { FieldRenderer } from './FieldRenderer';
 export { TextField } from './TextField';
 export { TextAreaField } from './TextAreaField';
 export { NumberField } from './NumberField';
+export { MoneyField } from './MoneyField';
+export { ArrayObjectField } from './ArrayObjectField';
 export { BooleanField } from './BooleanField';
 export { DateField } from './DateField';
 export { RichTextField } from './RichTextField';
@@ -47,6 +49,8 @@ export type {
   TextFieldProps,
   TextAreaFieldProps,
   NumberFieldProps,
+  MoneyFieldProps,
+  ArrayObjectFieldProps,
   BooleanFieldProps,
   DateFieldProps,
   RichTextFieldProps,

package/admin/src/components/fields/registry.ts

@@ -27,6 +27,8 @@ const BUILT_IN_RENDERERS = new Set([
   "reference",
   "tags",
   "category",
+  "money",
+  "arrayObject",
 ]);
 
 export function registerFieldRenderer(fieldType: string, renderer: FieldRendererComponent): void {

package/admin/src/components/fields/types.ts

@@ -78,6 +78,21 @@ export interface FieldOptions {
 
   // Category fields
   allowMultiple?: boolean;
+
+  // Number field display
+  prefix?: string;
+  suffix?: string;
+
+  // Money fields
+  defaultCurrency?: string;
+
+  // ArrayObject fields
+  subFields?: FieldDefinition[];
+  itemLabel?: string;
+  maxItems?: number;
+
+  // Generic
+  [key: string]: unknown;
 }
 
 /**
@@ -102,6 +117,8 @@ export interface FieldDefinition {
   defaultValue?: unknown;
   /** Type-specific options */
   options?: FieldOptions;
+  /** Group name for organizing fields into sections in the editor */
+  group?: string;
 }
 
 /**
@@ -166,6 +183,23 @@ export interface NumberFieldProps extends BaseFieldProps<number | null> {
   placeholder?: string;
 }
 
+/**
+ * Props for money input field.
+ * Value is { amount: number (minor units), currency: string (ISO 4217) }.
+ */
+export interface MoneyFieldProps
+  extends BaseFieldProps<{ amount: number; currency: string } | null> {
+  /** Placeholder text */
+  placeholder?: string;
+}
+
+/**
+ * Props for array-of-objects repeater field.
+ * Value is an array of records, each rendered as a card with sub-fields.
+ */
+export interface ArrayObjectFieldProps
+  extends BaseFieldProps<Record<string, unknown>[] | null> {}
+
 /**
  * Props for boolean toggle field.
  */

package/admin/src/components/filters/TaxonomyFilter.tsx

@@ -1,12 +1,12 @@
 import { useState, useCallback, useMemo } from 'react'
 import { useQuery } from 'convex/react'
-import { useApi } from '~/embed/contexts/ApiContext'
-import { CmsButton } from '~/components/cmsds/CmsButton'
+import { useApi } from '../../embed/contexts/ApiContext'
+import { CmsButton } from '../cmsds/CmsButton'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '~/components/ui/popover'
+} from '../ui/popover'
 import {
   Command,
   CommandEmpty,
@@ -15,10 +15,10 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from '~/components/ui/command'
-import { Badge } from '~/components/ui/badge'
-import { Checkbox } from '~/components/ui/checkbox'
-import { cn } from '~/lib/cn'
+} from '../ui/command'
+import { Badge } from '../ui/badge'
+import { Checkbox } from '../ui/checkbox'
+import { cn } from '../../lib/cn'
 import { Tags, ChevronDown, X, Check } from 'lucide-react'
 
 interface TaxonomyTerm {

package/admin/src/components/media/MediaAssetActions.tsx

@@ -4,8 +4,8 @@ import {
 	DropdownMenuItem,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
-import { CmsButton } from "~/components/cmsds/CmsButton";
+} from "../ui/dropdown-menu";
+import { CmsButton } from "../cmsds/CmsButton";
 import {
 	Eye,
 	Pencil,