@nixxie-cms/core 2.0.0 → 2.2.0

package/src/admin-ui/components/Navigation.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, type PropsWithChildren, useState, type ChangeEvent } from 'react'
 import { useRouter } from 'next/router'
 
-import { css } from '@keystar/ui/style'
+import { css, tokenSchema } from '@keystar/ui/style'
 
 import type { CollectionMeta } from '../../types'
 import { useNixxie } from '../context'
@@ -27,10 +27,12 @@ type NavItemProps = {
 
 export function NavItem({ href, children, onClick, indent }: NavItemProps) {
   const router = useRouter()
-  const segment = href.split('/')[1]
+  // Active on an exact match, or when the current route is nested under `href`
+  // (prefix match on a path boundary). Dashboard ('/') is only active on an
+  // exact match so it doesn't light up for every nested route.
   const isActive =
     router.pathname === href ||
-    (segment && router.pathname.split('/')[1] === segment && href !== '/')
+    (href !== '/' && router.pathname.startsWith(href + '/'))
 
   return (
     <a
@@ -49,8 +51,8 @@ export function NavItem({ href, children, onClick, indent }: NavItemProps) {
         paddingBlock: '7px',
         fontSize: 13,
         fontWeight: isActive ? 500 : 400,
-        color: isActive ? '#0a0a0a' : '#636363',
-        backgroundColor: isActive ? '#f5f5f5' : 'transparent',
+        color: isActive ? tokenSchema.color.foreground.neutralEmphasis : tokenSchema.color.foreground.neutralSecondary,
+        backgroundColor: isActive ? tokenSchema.color.background.surfaceSecondary : 'transparent',
         textDecoration: 'none',
         borderRadius: '0 6px 6px 0',
         marginRight: '12px',
@@ -60,8 +62,8 @@ export function NavItem({ href, children, onClick, indent }: NavItemProps) {
         transition: 'color 120ms, background-color 120ms',
 
         '&:hover': {
-          color: '#0a0a0a',
-          backgroundColor: '#f5f5f5',
+          color: tokenSchema.color.foreground.neutralEmphasis,
+          backgroundColor: tokenSchema.color.background.surfaceSecondary,
         },
       })}
     >
@@ -75,7 +77,7 @@ export function NavItem({ href, children, onClick, indent }: NavItemProps) {
             bottom: '20%',
             width: 2,
             borderRadius: '0 2px 2px 0',
-            backgroundColor: '#000000',
+            backgroundColor: tokenSchema.color.scale.black,
           })}
         />
       )}
@@ -113,7 +115,7 @@ function SectionLabel({ children, action }: { children: ReactNode; action?: Reac
           fontWeight: 600,
           letterSpacing: '0.10em',
           textTransform: 'uppercase',
-          color: '#b8b8b8',
+          color: tokenSchema.color.foreground.neutralSecondary,
         })}
       >
         {children}
@@ -134,7 +136,7 @@ function NavDivider() {
         height: 1,
         marginInline: '16px',
         marginBlock: '6px',
-        backgroundColor: '#f2f2f2',
+        backgroundColor: tokenSchema.color.border.muted,
       })}
     />
   )
@@ -158,21 +160,21 @@ function SearchTrigger({ onClick }: { onClick?: () => void }) {
         paddingInline: '10px',
         paddingBlock: '7px',
         borderRadius: 6,
-        border: '1px solid #ebebeb',
-        backgroundColor: '#f5f5f5',
-        color: '#a3a3a3',
+        border: `1px solid ${tokenSchema.color.border.muted}`,
+        backgroundColor: tokenSchema.color.background.surfaceSecondary,
+        color: tokenSchema.color.foreground.neutralSecondary,
         fontSize: 12.5,
         cursor: 'pointer',
         textAlign: 'left',
         transition: 'border-color 140ms, background 140ms, color 140ms',
 
         '&:hover': {
-          borderColor: '#dedede',
-          backgroundColor: '#efefef',
-          color: '#737373',
+          borderColor: tokenSchema.color.border.emphasis,
+          backgroundColor: tokenSchema.color.background.surfaceSecondary,
+          color: tokenSchema.color.foreground.neutralSecondary,
         },
         '&:focus-visible': {
-          outline: '2px solid #000',
+          outline: `2px solid ${tokenSchema.color.scale.black}`,
           outlineOffset: 2,
         },
       })}
@@ -185,7 +187,7 @@ function SearchTrigger({ onClick }: { onClick?: () => void }) {
       <kbd
         className={css({
           fontSize: 10.5,
-          color: '#c8c8c8',
+          color: tokenSchema.color.foreground.neutralSecondary,
           fontFamily: 'inherit',
           letterSpacing: '0.02em',
         })}
@@ -213,15 +215,15 @@ function NavSearch({ value, onChange }: { value: string; onChange: (v: string) =
           paddingInline: '10px',
           paddingBlock: '5px',
           fontSize: 12.5,
-          border: '1px solid #ebebeb',
+          border: `1px solid ${tokenSchema.color.border.muted}`,
           borderRadius: 5,
-          backgroundColor: '#f5f5f5',
-          color: '#0a0a0a',
+          backgroundColor: tokenSchema.color.background.surfaceSecondary,
+          color: tokenSchema.color.foreground.neutralEmphasis,
           outline: 'none',
           boxSizing: 'border-box',
           transition: 'border-color 140ms',
-          '&:focus': { borderColor: '#b0b0b0' },
-          '&::placeholder': { color: '#c8c8c8' },
+          '&:focus': { borderColor: tokenSchema.color.alias.borderHovered },
+          '&::placeholder': { color: tokenSchema.color.foreground.neutralTertiary },
           '&::-webkit-search-cancel-button': { display: 'none' },
         })}
       />
@@ -257,7 +259,13 @@ function CollectionsSection({
       {showSearch && <NavSearch value={search} onChange={setSearch} />}
 
       {filtered.length === 0 ? (
-        <p className={css({ margin: '4px 16px', fontSize: 12.5, color: '#c8c8c8' })}>
+        <p
+          className={css({
+            margin: '4px 16px',
+            fontSize: 12.5,
+            color: tokenSchema.color.foreground.neutralSecondary,
+          })}
+        >
           No results
         </p>
       ) : (
@@ -270,7 +278,7 @@ function CollectionsSection({
                   marginLeft: 6,
                   fontSize: 10,
                   fontWeight: 500,
-                  color: '#c8c8c8',
+                  color: tokenSchema.color.foreground.neutralSecondary,
                   letterSpacing: '0.04em',
                   textTransform: 'uppercase',
                 })}
@@ -326,7 +334,13 @@ export function Navigation({ onNavItemClick, onCmdK }: InternalNavigationProps)
         {visibleLists.length > 0 ? (
           <CollectionsSection lists={visibleLists} onNavItemClick={onNavItemClick} />
         ) : (
-          <p className={css({ margin: '8px 16px', fontSize: 12.5, color: '#c8c8c8' })}>
+          <p
+            className={css({
+              margin: '8px 16px',
+              fontSize: 12.5,
+              color: tokenSchema.color.foreground.neutralSecondary,
+            })}
+          >
             No collections
           </p>
         )}
@@ -374,7 +388,7 @@ export function NavFooter({ children }: PropsWithChildren) {
       className={css({
         paddingInline: '12px',
         paddingBlock: '10px',
-        borderTop: '1px solid #f2f2f2',
+        borderTop: `1px solid ${tokenSchema.color.border.muted}`,
         marginTop: 'auto',
       })}
     >

package/src/admin-ui/components/PageContainer.tsx

@@ -1,7 +1,13 @@
 import NextHead from 'next/head'
-import { type HTMLAttributes, type ReactNode, useEffect, useState } from 'react'
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
-import { css } from '@keystar/ui/style'
+import { css, tokenSchema } from '@keystar/ui/style'
 
 import { Logo } from './Logo'
 import { Navigation } from './Navigation'
@@ -17,7 +23,7 @@ export function PageWrapper(props: HTMLAttributes<HTMLElement>) {
         display: 'flex',
         height: '100vh',
         overflow: 'hidden',
-        backgroundColor: '#fafafa',
+        backgroundColor: tokenSchema.color.background.surface,
         fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
       })}
       {...props}
@@ -25,6 +31,51 @@ export function PageWrapper(props: HTMLAttributes<HTMLElement>) {
   )
 }
 
+// ---- Skip to content (WCAG 2.4.1 Bypass Blocks) ----
+function SkipLink() {
+  return (
+    <a
+      href="#main-content"
+      className={css({
+        // Visually hidden, off-screen by default — kept out of the layout for mouse users.
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: 'hidden',
+        clip: 'rect(0 0 0 0)',
+        whiteSpace: 'nowrap',
+        border: 0,
+        zIndex: 60,
+
+        // Reveal on keyboard focus.
+        '&:focus, &:focus-visible': {
+          width: 'auto',
+          height: 'auto',
+          padding: '10px 16px',
+          margin: 8,
+          clip: 'auto',
+          overflow: 'visible',
+          backgroundColor: tokenSchema.color.background.canvas,
+          color: tokenSchema.color.foreground.neutralEmphasis,
+          borderRadius: 6,
+          boxShadow: `0 2px 8px ${tokenSchema.color.shadow.regular}`,
+          outline: `2px solid ${tokenSchema.color.foreground.neutralEmphasis}`,
+          outlineOffset: 2,
+          textDecoration: 'none',
+          fontSize: 14,
+          fontWeight: 500,
+        },
+      })}
+    >
+      Skip to content
+    </a>
+  )
+}
+
 // ---- Mobile overlay ----
 function Backdrop({ isVisible, onClick }: { isVisible: boolean; onClick: () => void }) {
   return (
@@ -34,7 +85,7 @@ function Backdrop({ isVisible, onClick }: { isVisible: boolean; onClick: () => v
       className={css({
         position: 'fixed',
         inset: 0,
-        backgroundColor: 'rgba(10,10,10,0.35)',
+        backgroundColor: tokenSchema.color.alias.blanket,
         zIndex: 40,
         transition: 'opacity 200ms',
         opacity: isVisible ? 1 : 0,
@@ -47,6 +98,9 @@ function Backdrop({ isVisible, onClick }: { isVisible: boolean; onClick: () => v
 }
 
 // ---- Sidebar — pure white, precise ----
+const FOCUSABLE_SELECTOR =
+  'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex="-1"])'
+
 function Sidebar({
   isOpen,
   onClose,
@@ -56,10 +110,93 @@ function Sidebar({
   onClose: () => void
   onCmdK: () => void
 }) {
+  const asideRef = useRef<HTMLElement>(null)
+  // Element to restore focus to (the hamburger) once the drawer closes.
+  const lastFocusedRef = useRef<HTMLElement | null>(null)
+
+  // Mobile drawer a11y: focus trap, Escape-to-close, initial focus, and focus
+  // restore. `isOpen` is only ever true on mobile (the resize handler forces it
+  // false at >=768px), so gating on it doubles as a mobile gate.
+  useEffect(() => {
+    if (!isOpen) return
+
+    const aside = asideRef.current
+    if (!aside) return
+
+    // Save the currently focused element so we can restore it on close.
+    try {
+      const active = document.activeElement
+      lastFocusedRef.current = active instanceof HTMLElement ? active : null
+    } catch {
+      lastFocusedRef.current = null
+    }
+
+    const getFocusable = (): HTMLElement[] => {
+      try {
+        return Array.from(
+          aside.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+        ).filter(el => el.offsetParent !== null || el === document.activeElement)
+      } catch {
+        return []
+      }
+    }
+
+    // Move initial focus into the drawer.
+    try {
+      getFocusable()[0]?.focus()
+    } catch {
+      /* noop */
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onClose()
+        return
+      }
+      if (e.key !== 'Tab') return
+
+      const focusable = getFocusable()
+      if (focusable.length === 0) {
+        // Nothing focusable inside — keep focus from escaping anyway.
+        e.preventDefault()
+        return
+      }
+
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+      const current = document.activeElement
+
+      if (e.shiftKey) {
+        if (current === first || !aside?.contains(current)) {
+          e.preventDefault()
+          last.focus()
+        }
+      } else if (current === last || !aside?.contains(current)) {
+        e.preventDefault()
+        first.focus()
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown, true)
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true)
+      // Restore focus to the trigger that opened the drawer.
+      try {
+        lastFocusedRef.current?.focus()
+      } catch {
+        /* noop */
+      }
+    }
+  }, [isOpen, onClose])
+
   return (
     <>
       <Backdrop isVisible={isOpen} onClick={onClose} />
       <aside
+        id="nixxie-sidebar"
+        ref={asideRef}
         className={css({
           position: 'fixed',
           top: 0,
@@ -69,14 +206,19 @@ function Sidebar({
           zIndex: 50,
           display: 'flex',
           flexDirection: 'column',
-          backgroundColor: '#ffffff',
-          borderRight: '1px solid #ebebeb',
+          backgroundColor: tokenSchema.color.background.canvas,
+          borderRight: `1px solid ${tokenSchema.color.border.muted}`,
           transform: isOpen ? 'translateX(0)' : `translateX(-${SIDEBAR_WIDTH}px)`,
+          // Closed off-canvas drawer must leave the tab order / AT tree on
+          // mobile; `visibility:hidden` removes its descendants from both.
+          visibility: isOpen ? 'visible' : 'hidden',
           transition: 'transform 220ms cubic-bezier(0.4,0,0.2,1)',
 
           '@media (min-width: 768px)': {
             position: 'relative',
             transform: 'translateX(0)',
+            // Persistent desktop rail is always reachable.
+            visibility: 'visible',
             flexShrink: 0,
           },
         })}
@@ -88,7 +230,7 @@ function Sidebar({
             alignItems: 'center',
             height: TOPBAR_HEIGHT,
             paddingInline: '16px',
-            borderBottom: '1px solid #f2f2f2',
+            borderBottom: `1px solid ${tokenSchema.color.border.muted}`,
             flexShrink: 0,
           })}
         >
@@ -103,7 +245,10 @@ function Sidebar({
             overflowX: 'hidden',
             WebkitOverflowScrolling: 'touch',
             '&::-webkit-scrollbar': { width: 3 },
-            '&::-webkit-scrollbar-thumb': { background: '#ebebeb', borderRadius: 3 },
+            '&::-webkit-scrollbar-thumb': {
+              background: tokenSchema.color.border.muted,
+              borderRadius: 3,
+            },
           })}
         >
           <Navigation onNavItemClick={onClose} onCmdK={onCmdK} />
@@ -131,8 +276,8 @@ function TopBar({
         height: TOPBAR_HEIGHT,
         paddingInline: '24px',
         gap: '14px',
-        backgroundColor: '#ffffff',
-        borderBottom: '1px solid #ebebeb',
+        backgroundColor: tokenSchema.color.background.canvas,
+        borderBottom: `1px solid ${tokenSchema.color.border.muted}`,
         flexShrink: 0,
         zIndex: 30,
       })}
@@ -142,6 +287,7 @@ function TopBar({
         onClick={onMenuClick}
         aria-label={isSidebarOpen ? 'Close menu' : 'Open menu'}
         aria-expanded={isSidebarOpen}
+        aria-controls="nixxie-sidebar"
         className={css({
           display: 'inline-flex',
           alignItems: 'center',
@@ -149,13 +295,16 @@ function TopBar({
           width: 32,
           height: 32,
           borderRadius: 6,
-          border: '1px solid #ebebeb',
+          border: `1px solid ${tokenSchema.color.border.muted}`,
           background: 'transparent',
           cursor: 'pointer',
           flexShrink: 0,
-          color: '#a3a3a3',
+          color: tokenSchema.color.foreground.neutralTertiary,
           transition: 'color 130ms, background 130ms',
-          '&:hover': { background: '#f5f5f5', color: '#0a0a0a' },
+          '&:hover': {
+            background: tokenSchema.color.background.surfaceSecondary,
+            color: tokenSchema.color.foreground.neutralEmphasis,
+          },
           '@media (min-width: 768px)': { display: 'none' },
         })}
       >
@@ -222,6 +371,8 @@ function TopBar({
 function MainContent(props: HTMLAttributes<HTMLElement>) {
   return (
     <main
+      id="main-content"
+      tabIndex={-1}
       className={css({
         flex: 1,
         display: 'flex',
@@ -245,8 +396,11 @@ function ContentScroller(props: HTMLAttributes<HTMLDivElement>) {
         overflowX: 'hidden',
         WebkitOverflowScrolling: 'touch',
         '&::-webkit-scrollbar': { width: 5 },
-        '&::-webkit-scrollbar-thumb': { background: '#e8e8e8', borderRadius: 4 },
-        '&::-webkit-scrollbar-thumb:hover': { background: '#d4d4d4' },
+        '&::-webkit-scrollbar-thumb': {
+          background: tokenSchema.color.border.muted,
+          borderRadius: 4,
+        },
+        '&::-webkit-scrollbar-thumb:hover': { background: tokenSchema.color.border.emphasis },
       })}
       {...props}
     />
@@ -290,6 +444,8 @@ export function PageContainer({ children, header, title }: PageContainerProps) {
         <title key="title">{title ? `Nixxie – ${title}` : 'Nixxie'}</title>
       </NextHead>
 
+      <SkipLink />
+
       <Sidebar
         isOpen={isSidebarOpen}
         onClose={() => setSidebarOpen(false)}

package/src/admin-ui/components/WelcomeDialog.tsx

@@ -20,7 +20,7 @@ function validateEmail(value: string) {
 }
 
 export function WelcomeDialog() {
-  const [subscribe, setSubscribe] = useState(['nixxie'])
+  const [subscribe, setSubscribe] = useState<string[]>([])
   const [email, setEmail] = useState('')
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
@@ -33,25 +33,26 @@ export function WelcomeDialog() {
 
     // Check if user wants to subscribe and a valid email address
     if (subscribe.length) {
-      setLoading(true)
-
+      // Synchronous validation should not show pending state
       if (!validateEmail(email)) {
         setError(emailValidationMessage)
         return
       }
 
+      setLoading(true)
+
       const tags = ['source:@nixxie-cms/auth']
       subscribe.forEach(list => tags.push(`list:${list}`))
 
-      const res = await fetch(newsletterUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ email, tags }),
-      })
-
       try {
+        const res = await fetch(newsletterUrl, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ email, tags }),
+        })
+
         if (res.status !== 200) {
           const { error } = await res.json()
           setError(error)
@@ -61,9 +62,9 @@ export function WelcomeDialog() {
         // network errors or failed parse
         setError(e.message.toString())
         return
+      } finally {
+        setLoading(false)
       }
-
-      setLoading(false)
     }
 
     dialog.dismiss()
@@ -101,7 +102,6 @@ export function WelcomeDialog() {
               />
               <CheckboxGroup onChange={setSubscribe} value={subscribe}>
                 <Checkbox value="nixxie">Nixxie news</Checkbox>
-                <Checkbox value="nixxie">Nixxie news</Checkbox>
               </CheckboxGroup>
             </VStack>
           </form>

package/src/admin-ui/context.tsx

@@ -142,8 +142,7 @@ function InternalNixxieProvider({
   useEffect(() => {
     injectGlobal({
       body: {
-        fontFamily:
-          "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        fontFamily: tokenSchema.typography.fontFamily.base,
         WebkitFontSmoothing: 'antialiased',
         MozOsxFontSmoothing: 'grayscale',
       },
@@ -165,6 +164,10 @@ function InternalNixxieProvider({
   if (loading) return null
   //   if (!meta) return null
   return (
+    // The app is intentionally pinned to the light color scheme for now. Now
+    // that the rest of the chrome is token-based, enabling system/dark is a
+    // one-line change (drop `colorScheme="light"` here and the
+    // `[data-nixxie-content]` override below) pending a visual-QA pass.
     <KeystarProvider router={keystarRouter} colorScheme="light">
       <ClientSideOnlyDocumentElement bodyBackground="canvas" />
       <NextHead>

package/src/admin-ui/utils/useCreateItem.ts

@@ -14,6 +14,22 @@ import type { CollectionMeta } from '../../types'
 import { type ErrorLike, gql, type TypedDocumentNode, useMutation } from '../apollo'
 import { usePreventNavigation } from './usePreventNavigation'
 
+// 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
+    }
+  })
+}
+
 type CreateItemHookResult = {
   state: 'editing' | 'loading' | 'created'
   shouldPreventNavigation: boolean
@@ -81,7 +97,11 @@ export function useCreateItem(list: CollectionMeta): CreateItemHookResult {
       const newForceValidation = invalidFields.size !== 0
       setForceValidation(newForceValidation)
 
-      if (newForceValidation) return
+      if (newForceValidation) {
+        toastQueue.critical('Please fix the highlighted field(s) before saving.')
+        focusFirstInvalidField()
+        return
+      }
 
       let outputData: { item: { id: string; label: string | null } }
       try {

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

@@ -6,7 +6,12 @@ import { TextField } from '@keystar/ui/text-field'
 import { Heading, Text } from '@keystar/ui/typography'
 
 import type { SimpleFieldTypeInfo } from '../../../../types'
-import type { FieldController, FieldControllerConfig, FieldProps } from '../../../../types'
+import type {
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+} from '../../../../types'
 import { entriesTyped } from '../../../../lib/core/utils'
 
 const TYPE_OPERATOR_MAP = {
@@ -252,3 +257,7 @@ export function Field({
     />
   )
 }
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value != null && value !== '' ? <Text>{value}</Text> : null
+}

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

@@ -1,10 +1,12 @@
 import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
 import { useState } from 'react'
 
 import type { TextFieldMeta } from '..'
 import { NullableFieldWrapper } from '../../../../admin-ui/components'
 import { entriesTyped } from '../../../../lib/core/utils'
 import type {
+  CellComponent,
   FieldController,
   FieldControllerConfig,
   FieldProps,
@@ -44,7 +46,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}
@@ -71,6 +80,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>
 
 function validate(value: TextValue, isRequired: boolean, fieldLabel: string): string[] {

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

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