@multiplatform.one/frappe-ui 6.4.3 → 6.7.0

package/src/FrappeCalendar.stories.tsx

@@ -32,7 +32,12 @@ interface CalEvent {
 }
 
 const today = new Date();
-const formatDate = (date: Date) => date.toISOString().split("T")[0];
+// LOCAL parts, matching FrappeCalendar's own `datePart`: a `toISOString()` date
+// is UTC, so east of Greenwich the fixture names yesterday for the hour after
+// local midnight and no event lands on the view's "today".
+const pad2 = (n: number) => String(n).padStart(2, "0");
+const formatDate = (date: Date) =>
+  `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
 
 // Fixture doc colors come from the sanctioned categorical palette (chart
 // palette precedent) instead of raw brand hexes — Frappe docs store one color
@@ -287,6 +292,72 @@ Live.parameters = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Frappe `Date` fields — date-only wire values, no time component
+// ---------------------------------------------------------------------------
+
+interface LeaveRequest {
+  name: string;
+  doctype: string;
+  subject: string;
+  from_date: string;
+  to_date: string;
+  color: string;
+}
+
+const dateOnlyFixtures: LeaveRequest[] = [
+  {
+    name: "LEAVE-001",
+    doctype: "LeaveApplication",
+    subject: "Annual leave",
+    from_date: formatDate(today),
+    to_date: formatDate(new Date(today.getTime() + 2 * 86400000)),
+    color: green,
+  },
+  {
+    name: "LEAVE-002",
+    doctype: "LeaveApplication",
+    subject: "Conference travel",
+    from_date: formatDate(new Date(today.getTime() + 4 * 86400000)),
+    to_date: formatDate(new Date(today.getTime() + 5 * 86400000)),
+    color: orange,
+  },
+];
+
+/**
+ * Frappe `Date` fields arrive as bare "YYYY-MM-DD" — a calendar date carrying
+ * no timezone, the shape every other fixture story here omits by always
+ * sending a time. They parse to LOCAL midnight (`parseCalendarDate`); read as
+ * UTC they render a day early in every negative-offset zone, so this is the
+ * story that makes that class of regression visible.
+ */
+export const DateOnlyFields = () => (
+  <FrappeProvider
+    baseURL="https://demo.frappe.cloud"
+    fixtures={new InMemoryFixtureProvider({ LeaveApplication: dateOnlyFixtures })}
+  >
+    <FrappeCalendar<LeaveRequest>
+      doctype="LeaveApplication"
+      dateField="from_date"
+      endDateField="to_date"
+      titleField="subject"
+      colorField="color"
+      defaultView="month"
+      onEventClick={action("onEventClick")}
+      onDateClick={action("onDateClick")}
+      height={600}
+    />
+  </FrappeProvider>
+);
+DateOnlyFields.parameters = {
+  docs: {
+    description: {
+      story:
+        "Date-only Frappe `Date` fields (no time component). The leave block starts on today's cell in every timezone — read as UTC midnight it would sit on yesterday west of Greenwich.",
+    },
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Named Frappe colors (P-15): palette references resolve to sanctioned ramps,
 // literals pass through, unknown names fall back to the identity slot

package/src/FrappeCalendar.tsx

@@ -9,7 +9,7 @@ import { Spinner } from "@multiplatform.one/forms";
 import React, { useMemo, useCallback, useState, type ReactNode } from "react";
 import { Text, YStack, type YStackProps } from "tamagui";
 import { useTranslation } from "react-i18next";
-import { useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
+import { parseCalendarDate, useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
 import { useFrappeConfig } from "./FrappeProvider";
 import { describeSyncError } from "./syncError";
@@ -57,16 +57,6 @@ export interface FrappeCalendarProps<TDoc extends { name: string; doctype: strin
   firstDayOfWeek?: 0 | 1;
 }
 
-/**
- * Parse a date string from Frappe (YYYY-MM-DD or YYYY-MM-DD HH:MM:SS).
- */
-function parseDate(dateStr: string | Date | undefined): Date | null {
-  if (!dateStr) return null;
-  if (dateStr instanceof Date) return dateStr;
-  const parsed = new Date(dateStr.replace(" ", "T"));
-  return isNaN(parsed.getTime()) ? null : parsed;
-}
-
 /**
  * Format a moved date back into the same shape the document field used:
  * Date stays Date, "YYYY-MM-DD HH:MM:SS" keeps its time part, plain
@@ -195,9 +185,9 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
   const events = useMemo((): CalendarEvent[] => {
     return docs
       .map((doc) => {
-        const startDate = parseDate((doc as any)[dateField]);
+        const startDate = parseCalendarDate((doc as any)[dateField]);
         if (!startDate) return null;
-        const endDate = endDateField ? parseDate((doc as any)[endDateField]) : undefined;
+        const endDate = endDateField ? parseCalendarDate((doc as any)[endDateField]) : undefined;
         const title = titleField ? String((doc as any)[titleField] || doc.name) : doc.name;
         const color = colorField
           ? resolveFrappeEventColor((doc as any)[colorField], chartPalette)

package/src/FrappeConnectionIndicator.tsx

@@ -2,7 +2,7 @@ import { useFrappeConnection, type UseFrappeCollectionConfig } from "@multiplatf
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Text, XStack, YStack } from "tamagui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
 
 export interface FrappeConnectionIndicatorProps {
   /** The same connection config the sibling collection hooks use. */
@@ -37,7 +37,13 @@ export function FrappeConnectionIndicator({ config }: FrappeConnectionIndicatorP
       borderColor="$yellow7"
       borderWidth={1}
     >
-      <YStack width={8} height={8} borderRadius={4} backgroundColor="$yellow10" />
+      <YStack
+        {...radiusClassProps("R-PILL", "connection status dot")}
+        width={8}
+        height={8}
+        borderRadius={4}
+        backgroundColor="$yellow10"
+      />
       <Text fontSize="$2" color="$yellow11">
         {t("Reconnecting…")}
       </Text>

package/src/FrappeDashboard.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from "react-i18next";
 import { Spinner } from "@multiplatform.one/forms";
 import { Button, Text, XStack, YStack, type YStackProps, H3 } from "tamagui";
 import {
+  formatTimeOfDay,
   MIN_PRESS_TARGET,
   pressTargetHitSlop,
   pressTargetStyle,
@@ -217,7 +218,7 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
               {isLiveStale && <Spinner size="small" aria-label={t("Updating")} />}
               <Text fontSize="$1" color="$color10">
                 {t("Last updated: {{time}}", {
-                  time: (dataUpdatedAt ?? lastRefresh).toLocaleTimeString(),
+                  time: formatTimeOfDay(dataUpdatedAt ?? lastRefresh),
                 })}
               </Text>
               <Button
@@ -328,7 +329,7 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
             <XStack {...knobProps.gap} alignItems="center">
               {autoRefresh && (
                 <Text fontSize="$1" color="$color10">
-                  {t("Last updated: {{time}}", { time: lastRefresh.toLocaleTimeString() })}
+                  {t("Last updated: {{time}}", { time: formatTimeOfDay(lastRefresh) })}
                 </Text>
               )}
               <Button

package/src/FrappeForm.stories.tsx

@@ -2,6 +2,7 @@ import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
 import { YStack } from "tamagui";
 import { Data } from "./fields/Data";
+import { RadioGroupField } from "./fields/RadioGroup";
 import { Select } from "./fields/Select";
 import { Check } from "./fields/Check";
 import { Date } from "./fields/Date";
@@ -51,7 +52,8 @@ function contactMeta() {
         fieldname: "status",
         fieldtype: "Select",
         label: "Status",
-        options: "Active\nLead\nInactive",
+        // >5 options: shorter single-select lists trip `select-too-few-options` (DG-CTRL-01).
+        options: "Active\nLead\nProspect\nCustomer\nInactive\nArchived",
       },
     ],
     permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
@@ -72,7 +74,8 @@ function salesOrderMeta() {
         fieldname: "status",
         fieldtype: "Select",
         label: "Status",
-        options: "Draft\nSubmitted\nCompleted\nCancelled",
+        // >5 options: shorter single-select lists trip `select-too-few-options` (DG-CTRL-01).
+        options: "Draft\nSubmitted\nIn Progress\nOn Hold\nCompleted\nCancelled",
       },
       { fieldname: "is_paid", fieldtype: "Check", label: "Payment Received" },
       { fieldname: "notes", fieldtype: "Small Text", label: "Notes" },
@@ -172,7 +175,7 @@ export const CreateForm = () => (
             label="Status"
             value={doc.status || ""}
             onChange={(v) => setValue("status", v)}
-            options={["Active", "Lead", "Inactive"]}
+            options={["Active", "Lead", "Prospect", "Customer", "Inactive", "Archived"]}
           />
         </YStack>
       )}
@@ -227,7 +230,7 @@ export const EditForm = () => (
             label="Status"
             value={doc.status || ""}
             onChange={(v) => setValue("status", v)}
-            options={["Active", "Lead", "Inactive"]}
+            options={["Active", "Lead", "Prospect", "Customer", "Inactive", "Archived"]}
           />
         </YStack>
       )}
@@ -359,7 +362,7 @@ export const ComplexForm = () => (
             label="Status"
             value={doc.status || ""}
             onChange={(v) => setValue("status", v)}
-            options={["Draft", "Submitted", "Completed", "Cancelled"]}
+            options={["Draft", "Submitted", "In Progress", "On Hold", "Completed", "Cancelled"]}
           />
           <Check
             label="Payment Received"
@@ -438,18 +441,29 @@ export const Live = (args: { name?: string }) => (
             error={errors.description}
             disabled={disabled}
           />
-          <Select
+          {/* The real ToDo doctype pins 3-option enums; DG-CTRL-01 routes short
+              single choices to RadioGroup, so the live arm composes the honest
+              control instead of tripping `select-too-few-options` at rest. */}
+          <RadioGroupField
             label="Status"
             value={doc.status || ""}
             onChange={(v) => setValue("status", v)}
-            options={["Open", "Closed", "Cancelled"]}
+            options={[
+              { label: "Open", value: "Open" },
+              { label: "Closed", value: "Closed" },
+              { label: "Cancelled", value: "Cancelled" },
+            ]}
             disabled={disabled}
           />
-          <Select
+          <RadioGroupField
             label="Priority"
             value={doc.priority || ""}
             onChange={(v) => setValue("priority", v)}
-            options={["Low", "Medium", "High"]}
+            options={[
+              { label: "Low", value: "Low" },
+              { label: "Medium", value: "Medium" },
+              { label: "High", value: "High" },
+            ]}
             disabled={disabled}
           />
         </YStack>

package/src/FrappeGantt.stories.tsx

@@ -31,7 +31,12 @@ interface ProjectTask {
 }
 
 const today = new Date();
-const formatDate = (date: Date) => date.toISOString().split("T")[0];
+// LOCAL parts, matching FrappeGantt's own `datePart`: a `toISOString()` date is
+// UTC, so east of Greenwich the fixture names yesterday for the hour after
+// local midnight and every bar sits a day off the view's "today" marker.
+const pad2 = (n: number) => String(n).padStart(2, "0");
+const formatDate = (date: Date) =>
+  `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
 const dayOffset = (days: number) => formatDate(new Date(today.getTime() + days * 86400000));
 
 // Fixture doc colors come from the sanctioned categorical palette (LC-27

package/src/FrappeGantt.tsx

@@ -8,7 +8,7 @@ import {
 import React, { useCallback, useMemo, useState, type ReactNode } from "react";
 import { Text, YStack, type YStackProps } from "tamagui";
 import { useTranslation } from "react-i18next";
-import { useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
+import { parseCalendarDate, useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
 import { useFrappeConfig } from "./FrappeProvider";
 import { describeSyncError } from "./syncError";
@@ -56,16 +56,6 @@ export interface FrappeGanttProps<TDoc extends { name: string; doctype: string }
   initialDate?: Date;
 }
 
-/**
- * Parse a date string from Frappe (YYYY-MM-DD or YYYY-MM-DD HH:MM:SS).
- */
-function parseDate(dateStr: string | Date | undefined): Date | null {
-  if (!dateStr) return null;
-  if (dateStr instanceof Date) return dateStr;
-  const parsed = new Date(dateStr.replace(" ", "T"));
-  return isNaN(parsed.getTime()) ? null : parsed;
-}
-
 /**
  * Format a moved date back into the same shape the document field used:
  * Date stays Date, "YYYY-MM-DD HH:MM:SS" keeps its time part, plain
@@ -195,9 +185,9 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
   const tasks = useMemo((): GanttTask[] => {
     return docs
       .map((doc) => {
-        const start = parseDate((doc as any)[startField]);
+        const start = parseCalendarDate((doc as any)[startField]);
         if (!start) return null;
-        const end = parseDate((doc as any)[endField]) ?? start;
+        const end = parseCalendarDate((doc as any)[endField]) ?? start;
         const title = String((doc as any)[titleField] || doc.name);
         const color = colorField
           ? resolveFrappeEventColor((doc as any)[colorField], chartPalette)

package/src/FrappeKanban.tsx

@@ -4,10 +4,11 @@ import {
   type KanbanColumn as GenericKanbanColumn,
   type KanbanProps,
 } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
 import { PlusIcon } from "@phosphor-icons/react";
 import React, { useMemo, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Text, XStack, YStack } from "tamagui";
+import { Text, XStack, YStack } from "tamagui";
 
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
@@ -48,6 +49,8 @@ export interface FrappeKanbanProps<TDoc extends { name: string; doctype: string
   renderCard?: (item: Partial<TDoc>) => React.ReactNode;
   onCardClick?: (card: Partial<TDoc>) => void;
   onCardMove?: (cardName: string, fromStatus: string, toStatus: string) => void | Promise<void>;
+  /** Disable card dragging (the board stays a read-only visualization). */
+  readOnly?: boolean;
   enableCardCreation?: boolean;
   onCreateCard?: (status: string) => void;
   loading?: React.ReactNode;
@@ -75,10 +78,12 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
   renderCard,
   onCardClick,
   onCardMove,
+  readOnly = false,
   enableCardCreation = false,
   onCreateCard,
   loading,
   error,
+  renderColumnActions,
   ...kanbanProps
 }: FrappeKanbanProps<TDoc>) {
   const config = useFrappeConfig();
@@ -234,6 +239,37 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
     [onCardClick],
   );
 
+  // Desk parity: the quick-add "+" is anchored IN its column header (never a
+  // detached button strip) and names its column in the accessible label. The
+  // synthetic "Unassigned" bucket has no field value to prefill, so it gets
+  // no add affordance. Consumer-provided column actions compose after it.
+  const effectiveRenderColumnActions = useMemo(() => {
+    const canQuickAdd = enableCardCreation && Boolean(onCreateCard);
+    if (!canQuickAdd && !renderColumnActions) return undefined;
+    return (column: GenericKanbanColumn<Partial<TDoc>>) => (
+      <XStack alignItems="center" gap="$1">
+        {canQuickAdd && column.id !== "__unassigned__" && (
+          <Button
+            size="$2"
+            circular
+            chromeless
+            icon={<PlusIcon size={14} />}
+            aria-label={t("Add card to {{column}}", { column: column.title })}
+            onPress={() => {
+              setActionError(null);
+              try {
+                onCreateCard?.(column.id);
+              } catch (err) {
+                setActionError(err instanceof Error ? err : new Error(String(err)));
+              }
+            }}
+          />
+        )}
+        {renderColumnActions?.(column)}
+      </XStack>
+    );
+  }, [enableCardCreation, onCreateCard, renderColumnActions, t]);
+
   // Custom loading slot only — default path keeps empty columns visible so
   // fixture-less demos still render the board (Kanban owns isLoading chrome).
   if (isLoading && cards.length === 0 && loading) {
@@ -271,33 +307,15 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
           </Text>
         </YStack>
       )}
-      {enableCardCreation && onCreateCard && (
-        <XStack {...knobProps.gap} flexWrap="wrap" paddingHorizontal="$2">
-          {columns.map((col) => (
-            <Button
-              key={col.value}
-              size="$2"
-              chromeless
-              icon={PlusIcon}
-              onPress={() => {
-                setActionError(null);
-                try {
-                  onCreateCard(col.value);
-                } catch (err) {
-                  setActionError(err instanceof Error ? err : new Error(String(err)));
-                }
-              }}
-              aria-label={t("Add card to {{column}}", { column: col.title })}
-            />
-          ))}
-        </XStack>
-      )}
       <Kanban
         {...knobProps.gap}
         columns={genericColumns}
         renderCard={effectiveRenderCard}
-        onCardMove={handleCardMove}
+        // The generic Kanban enables drag when a move handler exists —
+        // readOnly withholds it so the board stays a visualization.
+        onCardMove={readOnly ? undefined : handleCardMove}
         onCardSelect={handleCardSelect}
+        renderColumnActions={effectiveRenderColumnActions}
         isLoading={isLoading}
         error={boardError}
         getItemKey={(item, index) => item.name ?? index}

package/src/FrappeLikedBy.tsx

@@ -13,11 +13,12 @@
  */
 import { AsyncBoundary, Avatar } from "@multiplatform.one/components";
 import { HttpClient, useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+import { Button } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { HeartIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Text, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
+import { Text, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 import { useFrappeUsers } from "./frappeUsers";

package/src/FrappeList.tsx

@@ -94,8 +94,14 @@ export function FrappeList<TDoc extends { name: string; doctype: string }>({
   return (
     <YStack {...knobProps.gap} flex={1}>
       <FrappeReconnectIndicator config={connectionConfig} />
+      {/*
+        No chrome fragment rides this passthrough (LC-55 FRAGMENT-LICENSE):
+        List forwards its stack props straight to AsyncBoundary, a state-switch
+        wrapper that declares no surface class and paints no fill, border, or
+        clip. Rows and the error/empty panels own their own chrome; the error
+        branch above renders a bare AsyncBoundary, so both paths now match.
+      */}
       <List
-        {...knobProps.borderRadius}
         items={items}
         isLoading={isLoading}
         renderItem={renderItem}

package/src/FrappeListView.tsx

@@ -4,19 +4,9 @@ import { ArrowsClockwiseIcon, PlusIcon } from "@phosphor-icons/react";
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { SearchInput, Spinner } from "@multiplatform.one/forms";
-import {
-  Button,
-  Image,
-  Text,
-  View,
-  XStack,
-  YStack,
-  isWeb,
-  useTheme,
-  type YStackProps,
-} from "tamagui";
+import { Button, Text, View, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
 import { SavedFilterDropdown, useSavedFilters, type ParsedFilter } from "@multiplatform.one/table";
-import { ViewSwitcher } from "@multiplatform.one/components";
+import { Avatar, ViewSwitcher } from "@multiplatform.one/components";
 import {
   MIN_PRESS_TARGET,
   pressTargetHitSlop,
@@ -311,15 +301,13 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
       return (
         <XStack alignItems="center" gap="$3" paddingVertical="$2" paddingHorizontal="$3">
           {imageUrl ? (
-            <Image
-              src={imageUrl}
-              alt={typeof title === "string" ? title : ""}
-              width={40}
-              height={40}
-              borderRadius={1000}
-              backgroundColor="$color3"
-              objectFit="cover"
-            />
+            <Avatar circular size={40} backgroundColor="$color3">
+              <Avatar.Image
+                src={imageUrl}
+                alt={typeof title === "string" ? title : ""}
+                objectFit="cover"
+              />
+            </Avatar>
           ) : null}
           <YStack flex={1} gap="$0.5">
             <Text fontSize="$4" fontWeight="500" numberOfLines={1}>
@@ -503,7 +491,13 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
             {...refreshPressFloorProps}
           />
           {onAdd && (
-            <Button size="$3" theme="accent" icon={PlusIcon} onPress={onAdd}>
+            <Button
+              size="$3"
+              theme="accent"
+              icon={PlusIcon}
+              onPress={onAdd}
+              {...pressTargetStyle()}
+            >
               {t("Add {{doctype}}", { doctype })}
             </Button>
           )}

package/src/FrappeTable.tsx

@@ -556,6 +556,16 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
               onPress={() => onRowClick(props.row.original)}
               cursor="pointer"
               hoverStyle={{ backgroundColor: "$color2" }}
+              // Cell containment (LC-06/LC-10): a bare View defaults to
+              // flexShrink 0 and hugs its content, so long cell content
+              // (e.g. a ToDo description) painted PAST the column bounds and
+              // under the neighbor cells (the td itself doesn't clip).
+              // Shrink with the cell, cap at its box, clip the excess — the
+              // inner one-line Texts then ellipsize in-column.
+              minWidth={0}
+              maxWidth="100%"
+              flexShrink={1}
+              overflow="hidden"
             >
               {/* raw strings crash native (text must be inside <Text>) */}
               {typeof content === "string" || typeof content === "number" ? (

package/src/components/timeline.stories.tsx

@@ -1,5 +1,6 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
+import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
 import { FrappeProvider } from "../FrappeProvider";
 import { Timeline, type FrappeComment, type FrappeVersion } from "./timeline";
 
@@ -138,14 +139,18 @@ export const ReadOnly = () => (
   </FrappeProvider>
 );
 
-/** Absolute timestamps via a custom formatTimestamp override the relative default. */
+/**
+ * The formatTimestamp eject overrides the per-class register defaults —
+ * demoed with the house absolute register pinned to always show the year
+ * (LC-12: even an ejected formatter speaks a human register, never raw ISO).
+ */
 export const AbsoluteTimestamps = () => (
   <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
     <Timeline
       doctype="Task"
       docname="TASK-001"
       label="Activity"
-      formatTimestamp={(ts) => new Date(ts).toISOString()}
+      formatTimestamp={(ts) => formatAbsoluteDateTime(ts, { year: "always" })}
     />
   </FrappeProvider>
 );

package/src/fields/Barcode/Barcode.stories.tsx

@@ -46,7 +46,7 @@ export const States = (args: StoryProps) => (
     <Controlled {...args} label="Disabled" disabled />
     <Controlled {...args} label="Disabled + error" disabled error="Broken while disabled" />
     <Controlled {...args} label="Required" required />
-    <Controlled {...args} label="Error" error="This field has an error" />
+    <Controlled {...args} label="Error" error="Value does not match the required format" />
     <Controlled {...args} label="Helper text" helperText="Some helpful context" />
   </YStack>
 );

package/src/fields/CodeEditor/CodeEditor.stories.tsx

@@ -118,7 +118,7 @@ ReadOnly.args = {
 
 export const States = (args: StoryProps) => (
   <YStack gap="$5">
-    <Controlled {...args} label="Error" error="Script has a syntax error" />
+    <Controlled {...args} label="Error" error="Script fails to parse at line 3" />
     <Controlled {...args} label="Disabled" disabled />
     <Controlled {...args} label="Compact" compact />
     <CodeEditorField label="Skeleton" skeleton onChange={() => {}} />

package/src/fields/Color/Color.stories.tsx

@@ -52,7 +52,7 @@ export const AllStates = () => (
     <ControlledColor label="Default" />
     <ControlledColor label="With Value" value="#10B981" />
     <ControlledColor label="Required" required />
-    <ControlledColor label="With Error" value="invalid" error="Invalid color" />
+    <ControlledColor label="With Error" value="invalid" error="Color must be a recognized value" />
     <ControlledColor label="Disabled" value="#F59E0B" disabled />
     <ControlledColor label="No Presets" showPresets={false} />
     <ControlledColor