@nixxie-cms/core 2.1.0 → 2.2.0

package/src/fields/types/decimal/views/index.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
 
 import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
 
 import {
+  type CellComponent,
   type FieldController,
   type FieldControllerConfig,
   type FieldProps,
@@ -205,7 +207,7 @@ export function Field({
       errorMessage={(forceValidation || isDirty) && validate(value)}
       isReadOnly={isReadOnly}
       isRequired={isRequired}
-      inputMode="numeric"
+      inputMode="decimal"
       width="alias.singleLineWidth"
       onBlur={() => setDirty(true)}
       onChange={x => onChange?.({ ...value, value: x === '' ? null : x })}
@@ -213,3 +215,7 @@ export function Field({
     />
   )
 }
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value != null && value !== '' ? <Text>{value}</Text> : null
+}

package/src/fields/types/file/views/Field.tsx

@@ -164,7 +164,7 @@ function FileDetails(props: PropsWithChildren<FileData>) {
       gap="medium"
       padding="medium"
     >
-      <a href={props.href} download={props.name}>
+      <a href={props.href} download={props.name} aria-label={`Download ${props.name}`}>
         <HStack
           alignItems="center"
           backgroundColor="surfaceTertiary"

package/src/fields/types/float/views/index.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
 
 import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
 
 import type {
+  CellComponent,
   FieldController,
   FieldControllerConfig,
   FieldProps,
@@ -205,7 +207,7 @@ export function Field({
       errorMessage={(forceValidation || isDirty) && validate(value)}
       isReadOnly={isReadOnly}
       isRequired={isRequired}
-      inputMode="numeric"
+      inputMode="decimal"
       width="alias.singleLineWidth"
       onBlur={() => setDirty(true)}
       onChange={x => onChange?.({ ...value, value: x === '' ? null : x })}
@@ -213,3 +215,7 @@ export function Field({
     />
   )
 }
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value != null && value !== '' ? <Text>{value}</Text> : null
+}

package/src/fields/types/image/views/index.tsx

@@ -15,7 +15,7 @@ export const Cell: CellComponent<typeof controller> = ({ value }) => {
         width: 24,
       }}
     >
-      <img style={{ maxHeight: '100%', maxWidth: '100%' }} src={value.url} />
+      <img alt="" style={{ maxHeight: '100%', maxWidth: '100%' }} src={value.url} />
     </div>
   )
 }

package/src/fields/types/integer/views/index.tsx

@@ -7,6 +7,7 @@ import { NumberField } from '@keystar/ui/number-field'
 import { Heading, Text } from '@keystar/ui/typography'
 
 import type {
+  CellComponent,
   FieldController,
   FieldControllerConfig,
   FieldProps,
@@ -253,3 +254,7 @@ export function Field({
     />
   )
 }
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return typeof value === 'number' && Number.isFinite(value) ? <Text>{value}</Text> : null
+}

package/src/fields/types/json/views/index.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { css, tokenSchema } from '@keystar/ui/style'
 import { TextArea } from '@keystar/ui/text-field'
 import { Text } from '@keystar/ui/typography'
@@ -12,7 +14,9 @@ import type {
 
 export const Field = (props: FieldProps<typeof controller>) => {
   const { autoFocus, field, forceValidation, onChange, value } = props
-  const errorMessage = forceValidation ? 'Invalid JSON' : undefined
+  const [isDirty, setDirty] = useState(false)
+  const errorMessage =
+    (isDirty || forceValidation) && !isValidJSON(value) ? 'Invalid JSON' : undefined
 
   return (
     <TextArea
@@ -22,6 +26,7 @@ export const Field = (props: FieldProps<typeof controller>) => {
       isReadOnly={onChange === undefined}
       label={field.label}
       onChange={onChange}
+      onBlur={() => setDirty(true)}
       value={value}
       UNSAFE_className={css({
         textarea: {
@@ -33,8 +38,21 @@ export const Field = (props: FieldProps<typeof controller>) => {
   )
 }
 
+function isValidJSON(value: string) {
+  if (!value) return true
+  try {
+    JSON.parse(value)
+    return true
+  } catch {
+    return false
+  }
+}
+
 export const Cell: CellComponent<typeof controller> = ({ value }) => {
-  return value ? <Text>{JSON.stringify(value)}</Text> : null
+  if (value == null) return null
+  const stringified = JSON.stringify(value)
+  const truncated = stringified.length > 100 ? `${stringified.slice(0, 100)}…` : stringified
+  return <Text>{truncated}</Text>
 }
 
 type Config = FieldControllerConfig<{ defaultValue: JSONValue }>

package/src/fields/types/multiselect/views/index.tsx

@@ -89,7 +89,7 @@ function CheckboxesModeField(props: FieldProps<typeof controller>) {
 
 export const Cell: CellComponent<typeof controller> = ({ value = [], field }) => {
   const listFormatter = useListFormatter({ style: 'short', type: 'conjunction' })
-  const labels = (value as string[]).map(x => field.valuesToOptionsWithStringValues[x].label)
+  const labels = (value as string[]).map(x => field.valuesToOptionsWithStringValues[x]?.label ?? x)
 
   const cellContent =
     value.length > 3
@@ -135,12 +135,16 @@ export function controller(config: Config): FieldController<Value, Option[]> & {
     type: config.fieldMeta.type,
     options: optionsWithStringValues,
     valuesToOptionsWithStringValues,
-    defaultValue: config.fieldMeta.defaultValue.map(x => valuesToOptionsWithStringValues[x]),
+    defaultValue: config.fieldMeta.defaultValue.map(
+      x => valuesToOptionsWithStringValues[x] ?? { label: x.toString(), value: x.toString() }
+    ),
     deserialize: data => {
       // if we get null from the GraphQL API (which will only happen if field read access control failed)
       // we'll just show it as nothing being selected for now.
       const values: readonly string[] | readonly number[] = data[config.fieldKey] ?? []
-      const selectedOptions = values.map(x => valuesToOptionsWithStringValues[x])
+      const selectedOptions = values.map(
+        x => valuesToOptionsWithStringValues[x] ?? { label: x.toString(), value: x.toString() }
+      )
       return selectedOptions
     },
     serialize: value => ({ [config.fieldKey]: value.map(x => parseValue(x.value)) }),

package/src/fields/types/password/views/index.tsx

@@ -181,7 +181,7 @@ export function Field(props: FieldProps<typeof controller>) {
 
           <Flex gap="regular">
             <ToggleButton
-              aria-label="show"
+              aria-label={secureTextEntry ? 'Show password' : 'Hide password'}
               isSelected={!secureTextEntry}
               onPress={() => setSecureTextEntry(bool => !bool)}
             >

package/src/fields/types/relationship/views/index.tsx

@@ -58,6 +58,7 @@ export function Field(props: FieldProps<typeof controller>) {
       <HStack gap="small" alignItems="end">
         {textField}
         <ActionButton
+          aria-label={`Go to ${field.label}`}
           href={`/${foreignList.path}?${buildQueryForRelationshipFieldWithForeignField(foreignList, field.refFieldKey, value.id)}`}
         >
           <Icon src={arrowUpRightIcon} />

package/src/fields/types/select/views/index.tsx

@@ -148,8 +148,9 @@ export function Field(props: FieldProps<typeof controller>) {
 }
 
 export const Cell: CellComponent<typeof controller> = ({ value, field }) => {
+  if (value == null) return null
   const label = field.options.find(x => x.value === value)?.label
-  return <Text>{label}</Text>
+  return <Text>{label ?? String(value)}</Text>
 }
 
 export type AdminSelectFieldMeta = {

package/src/fields/types/text/views/index.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react'
 import { TextArea, TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
 
 import type { TextFieldMeta } from '..'
 import { NullableFieldWrapper } from '../../../../admin-ui/components'
 import { entriesTyped } from '../../../../lib/core/utils'
 import type {
+  CellComponent,
   FieldController,
   FieldControllerConfig,
   FieldProps,
@@ -46,7 +48,14 @@ export function Field(props: FieldProps<typeof controller>) {
         label={field.label}
         errorMessage={
           !!validationMessages.length && (shouldShowErrors || forceValidation)
-            ? validationMessages.join('. ')
+            ? validationMessages.length === 1
+              ? validationMessages[0]
+              : validationMessages.map((message, i) => (
+                  <Text key={i}>
+                    {i > 0 && <br />}
+                    {message}
+                  </Text>
+                ))
             : undefined
         }
         isDisabled={isNull}
@@ -73,6 +82,10 @@ export function Field(props: FieldProps<typeof controller>) {
   )
 }
 
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value ? <Text truncate>{value}</Text> : null
+}
+
 type Config = FieldControllerConfig<TextFieldMeta>
 
 type Validation = {

package/src/fields/types/timestamp/views/index.tsx

@@ -44,12 +44,13 @@ export function Field(props: FieldProps<typeof controller>) {
           description={field.description}
           isDisabled={!parsedValue}
           isReadOnly
+          placeholder="yyyy-mm-dd --:--:--"
           value={
             parsedValue
               ? isReadonlyUTC
                 ? parsedValue.toAbsoluteString()
                 : dateFormatter.format(parsedValue.toDate())
-              : 'yyyy-mm-dd --:--:--'
+              : ''
           }
         />
         {!!parsedValue && (

package/src/fields/types/virtual/views/index.tsx

@@ -1,4 +1,4 @@
-import { TextField } from '@keystar/ui/text-field'
+import { TextArea, TextField } from '@keystar/ui/text-field'
 import { Text } from '@keystar/ui/typography'
 import type {
   CellComponent,
@@ -21,13 +21,28 @@ export function Field(props: FieldProps<typeof controller>) {
   const { autoFocus, field, value } = props
   if (value === createViewValue) return null
 
+  const stringified = stringify(value)
+  // multi-line values (e.g. pretty-printed JSON) get clipped in a single-line
+  // TextField, so render them in a read-only TextArea instead
+  if (stringified.includes('\n')) {
+    return (
+      <TextArea
+        autoFocus={autoFocus}
+        description={field.description}
+        label={field.label}
+        isReadOnly={true}
+        value={stringified}
+      />
+    )
+  }
+
   return (
     <TextField
       autoFocus={autoFocus}
       description={field.description}
       label={field.label}
       isReadOnly={true}
-      value={stringify(value)}
+      value={stringified}
     />
   )
 }

package/src/internal-unstable/admin-ui/pages/HomePage/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 
-import { css } from '@keystar/ui/style'
+import { css, tokenSchema } from '@keystar/ui/style'
 import { Heading } from '@keystar/ui/typography'
 
 import { gql, type TypedDocumentNode, useQuery } from '../../../../admin-ui/apollo'
@@ -24,14 +24,14 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
     <div
       className={css({
         position: 'relative',
-        backgroundColor: '#ffffff',
-        border: '1px solid #ebebeb',
+        backgroundColor: tokenSchema.color.background.canvas,
+        border: `1px solid ${tokenSchema.color.border.muted}`,
         borderRadius: 8,
         overflow: 'hidden',
         transition: 'box-shadow 180ms, border-color 180ms',
         '&:hover': {
-          boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
-          borderColor: '#d8d8d8',
+          boxShadow: `0 2px 12px ${tokenSchema.color.shadow.muted}`,
+          borderColor: tokenSchema.color.border.emphasis,
         },
       })}
     >
@@ -44,7 +44,7 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
             fontWeight: 600,
             letterSpacing: '0.09em',
             textTransform: 'uppercase',
-            color: '#a3a3a3',
+            color: tokenSchema.color.foreground.neutralSecondary,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -69,11 +69,11 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                width: 22,
-                height: 22,
+                width: 28,
+                height: 28,
                 borderRadius: 5,
-                border: '1px solid #ebebeb',
-                color: '#a3a3a3',
+                border: `1px solid ${tokenSchema.color.border.muted}`,
+                color: tokenSchema.color.foreground.neutralSecondary,
                 textDecoration: 'none',
                 fontSize: 14,
                 lineHeight: 1,
@@ -81,9 +81,9 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
                 marginLeft: 6,
                 transition: 'border-color 130ms, color 130ms, background 130ms',
                 '&:hover': {
-                  borderColor: '#000000',
-                  color: '#000000',
-                  background: '#f5f5f5',
+                  borderColor: tokenSchema.color.scale.black,
+                  color: tokenSchema.color.foreground.neutralEmphasis,
+                  background: tokenSchema.color.background.surfaceSecondary,
                 },
               })}
             >
@@ -111,7 +111,10 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
               fontSize: 34,
               fontWeight: 700,
               letterSpacing: '-0.05em',
-              color: count === null ? '#e8e8e8' : '#000000',
+              color:
+                count === null
+                  ? tokenSchema.color.border.muted
+                  : tokenSchema.color.foreground.neutralEmphasis,
               lineHeight: 1,
               fontVariantNumeric: 'tabular-nums',
             })}
@@ -123,12 +126,12 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
             className={css({
               margin: 0,
               fontSize: 12,
-              color: '#c8c8c8',
+              color: tokenSchema.color.foreground.neutralSecondary,
               display: 'flex',
               alignItems: 'center',
               gap: 4,
               transition: 'color 130ms',
-              'a:hover &': { color: '#636363' },
+              'a:hover &': { color: tokenSchema.color.foreground.neutralEmphasis },
             })}
           >
             {list.isSingleton ? 'Open' : 'View all'}
@@ -167,7 +170,7 @@ function QuickCreate() {
           fontWeight: 600,
           letterSpacing: '0.10em',
           textTransform: 'uppercase',
-          color: '#b8b8b8',
+          color: tokenSchema.color.foreground.neutralSecondary,
         })}
       >
         Quick Create
@@ -184,18 +187,18 @@ function QuickCreate() {
               paddingInline: '12px',
               paddingBlock: '6px',
               borderRadius: 6,
-              border: '1px solid #e8e8e8',
-              backgroundColor: '#ffffff',
+              border: `1px solid ${tokenSchema.color.border.muted}`,
+              backgroundColor: tokenSchema.color.background.canvas,
               fontSize: 12.5,
               fontWeight: 500,
-              color: '#525252',
+              color: tokenSchema.color.foreground.neutral,
               textDecoration: 'none',
               transition: 'border-color 130ms, color 130ms, background 130ms',
 
               '&:hover': {
-                borderColor: '#000000',
-                color: '#000000',
-                background: '#fafafa',
+                borderColor: tokenSchema.color.scale.black,
+                color: tokenSchema.color.foreground.neutralEmphasis,
+                background: tokenSchema.color.background.surface,
               },
             })}
           >
@@ -260,18 +263,24 @@ export function HomePage() {
 
         {/* Page title */}
         <div className={css({ marginBottom: 28 })}>
-          <h1
+          <h2
             className={css({
               margin: '0 0 4px',
               fontSize: 20,
               fontWeight: 700,
               letterSpacing: '-0.03em',
-              color: '#0a0a0a',
+              color: tokenSchema.color.foreground.neutralEmphasis,
             })}
           >
             Overview
-          </h1>
-          <p className={css({ margin: 0, fontSize: 13, color: '#a3a3a3' })}>
+          </h2>
+          <p
+            className={css({
+              margin: 0,
+              fontSize: 13,
+              color: tokenSchema.color.foreground.neutralSecondary,
+            })}
+          >
             {visibleLists.length} collection{visibleLists.length !== 1 ? 's' : ''}
           </p>
         </div>
@@ -305,7 +314,7 @@ export function HomePage() {
           className={css({
             marginTop: 48,
             fontSize: 11.5,
-            color: '#d4d4d4',
+            color: tokenSchema.color.foreground.neutralSecondary,
             display: 'flex',
             alignItems: 'center',
             gap: 6,
@@ -315,12 +324,12 @@ export function HomePage() {
             className={css({
               display: 'inline-flex',
               padding: '1px 6px',
-              background: '#ffffff',
-              border: '1px solid #ebebeb',
+              background: tokenSchema.color.background.canvas,
+              border: `1px solid ${tokenSchema.color.border.muted}`,
               borderRadius: 4,
               fontSize: 10.5,
               fontFamily: 'inherit',
-              color: '#a3a3a3',
+              color: tokenSchema.color.foreground.neutralSecondary,
             })}
           >
             ⌘K

package/src/internal-unstable/admin-ui/pages/ItemPage/index.tsx

@@ -38,6 +38,7 @@ import {
   useInvalidFields,
 } from '../../../../admin-ui/utils'
 import { pick } from '../../../../admin-ui/utils/pick'
+import { usePreventNavigation } from '../../../../admin-ui/utils/usePreventNavigation'
 import type {
   ActionMeta,
   BaseCollectionTypeInfo,
@@ -62,6 +63,22 @@ function useEventCallback<Func extends (...args: any[]) => unknown>(callback: Fu
   return cb as any
 }
 
+// after forcing validation, move focus to the first invalid field so the user
+// can see and fix it. runs on the next frame so the DOM reflects the new
+// aria-invalid state, and is fully defensive so it can never throw.
+function focusFirstInvalidField() {
+  requestAnimationFrame(() => {
+    try {
+      const el = document.querySelector<HTMLElement>('[aria-invalid="true"]')
+      if (!el) return
+      el.focus({ preventScroll: false })
+      el.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    } catch {
+      // ignore — focusing is a best-effort enhancement
+    }
+  })
+}
+
 function DeleteButton({
   list,
   itemId,
@@ -155,7 +172,6 @@ function ResetButton(props: { onReset: () => void; hasChanges?: boolean }) {
         title="Reset changes"
         cancelLabel="Cancel"
         primaryActionLabel="Yes, reset"
-        autoFocusButton="primary"
         onPrimaryAction={props.onReset}
       >
         Are you sure? Any unsaved changes will be lost and cannot be recovered.
@@ -211,7 +227,11 @@ function ItemForm({
     e.preventDefault()
     const newForceValidation = invalidFields.size !== 0
     setForceValidation(newForceValidation)
-    if (newForceValidation) return
+    if (newForceValidation) {
+      toastQueue.critical('Please fix the highlighted field(s) before saving.')
+      focusFirstInvalidField()
+      return
+    }
 
     const { error: _error } = await update({
       variables: {
@@ -236,10 +256,18 @@ function ItemForm({
       timeout: 5000,
     })
 
+    // reset the navigation guard before refetch so saving and then navigating
+    // away doesn't prompt for unsaved changes
+    shouldPreventNavigationRef.current = false
     onSaveSuccess()
   })
 
   const hasChangedFields = useHasChanges('update', list.fields, value, initialValue)
+  const shouldPreventNavigationRef = useRef(hasChangedFields)
+  useEffect(() => {
+    shouldPreventNavigationRef.current = hasChangedFields
+  }, [hasChangedFields])
+  usePreventNavigation(shouldPreventNavigationRef)
 
   return (
     <Fragment>
@@ -324,7 +352,12 @@ function ItemPage({ listKey }: ItemPageProps) {
   const itemLabel_ = item?.[list.labelField] ?? item?.id
   const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : (itemId ?? '')
 
-  const pageLoading = loading || itemId === undefined
+  // Only show the full-page spinner on the INITIAL load (no data yet). On a
+  // post-save refetch Apollo keeps `data` populated while `loading` flips back
+  // to true; gating on `!data` keeps the form mounted (no scroll reset / flash)
+  // during background refetches while still showing the spinner before the
+  // first result arrives.
+  const pageLoading = (loading && !data) || itemId === undefined
   const pageLabel = itemLabel || itemId
   const pageTitle = list.isSingleton || typeof pageLabel !== 'string' ? list.label : pageLabel
   const initialValue = useMemo(() => {

package/src/internal-unstable/admin-ui/pages/ListPage/PaginationControls.tsx

@@ -4,17 +4,11 @@ import { chevronLeftIcon } from '@keystar/ui/icon/icons/chevronLeftIcon'
 import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'
 import { undo2Icon } from '@keystar/ui/icon/icons/undo2Icon'
 import { HStack } from '@keystar/ui/layout'
-import { Picker } from '@keystar/ui/picker'
-import { Item } from '@keystar/ui/tag'
+import { NumberField } from '@keystar/ui/number-field'
+import { Item, Picker } from '@keystar/ui/picker'
 import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'
 import { Text } from '@keystar/ui/typography'
 import type { ReactNode } from 'react'
-import { useMemo } from 'react'
-
-type PageItem = {
-  label: string
-  id: number
-}
 
 export function PaginationControls(props: {
   singular: string
@@ -34,16 +28,11 @@ export function PaginationControls(props: {
   const prevPage = currentPage - 1
   const lastPage = Math.max(Math.ceil(total / pageSize), 1)
 
-  const pageItems = useMemo(() => {
-    const result: PageItem[] = []
-    for (let page = 1; page <= lastPage; page++) {
-      result.push({
-        id: page,
-        label: String(page),
-      })
-    }
-    return result
-  }, [lastPage])
+  const goToPage = (value: number) => {
+    if (!Number.isFinite(value)) return
+    const page = Math.min(Math.max(Math.round(value), 1), lastPage)
+    if (page !== currentPage) props.onChangePage(page)
+  }
 
   return (
     <HStack
@@ -90,24 +79,22 @@ export function PaginationControls(props: {
 
       {/*
         right-side
-        mobile: next/prev
-        desktop^: current page (picker), next/prev
+        mobile: page jump, next/prev
+        desktop^: page jump, next/prev
       */}
       <HStack gap="large" alignItems="center">
-        <HStack isHidden={{ below: 'desktop' }} gap="regular" alignItems="center">
-          <Picker
-            // prominence="low"
-            aria-label={`Page number, of ${lastPage} pages`}
-            items={pageItems}
-            onSelectionChange={page => {
-              props.onChangePage(Number(page))
-            }}
-            selectedKey={currentPage}
+        <HStack gap="regular" alignItems="center">
+          <NumberField
+            aria-label="Go to page"
+            hideStepper
+            minValue={1}
+            maxValue={lastPage}
+            step={1}
+            value={currentPage}
+            onChange={goToPage}
             width="scale.1000"
-          >
-            {item => <Item>{item.label}</Item>}
-          </Picker>
-          <Text>of {lastPage} pages</Text>
+          />
+          <Text>of {lastPage}</Text>
         </HStack>
         <HStack gap="regular">
           <ActionButton