@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/src/FrappeReportBuilder.tsx

@@ -42,7 +42,7 @@ import { Button } from "@multiplatform.one/forms";
 import { downloadBlob } from "@multiplatform.one/platform";
 import { storage } from "@multiplatform.one/store";
 import { DataTablePagination } from "@multiplatform.one/table";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { YStackProps } from "tamagui";
@@ -61,6 +61,7 @@ import {
   computeTotals,
   defaultReportFieldnames,
   orderReportRows,
+  phoneReportFieldnames,
   reportColumnsFromMeta,
   resolveSelectedColumns,
   type ReportFilters,
@@ -348,12 +349,24 @@ function FrappeReportBuilderBody({
     const own = new Set(layoutMeta.fields.map((field) => field.fieldname));
     return columns.filter((column) => column.fieldname === "name" || own.has(column.fieldname));
   }, [layoutMeta, readsWithoutMeta]);
+  // A phone opens on four columns that fit the screen (FZ-7684); the
+  // picker holds the rest.
+  const compact = useLayoutSizeClass() === "compact";
   const defaultFieldnames = useMemo(
     () =>
       readsWithoutMeta && layoutMeta
         ? ["name", ...layoutMeta.fields.map((field) => field.fieldname)]
-        : defaultReportFieldnames(layoutMeta),
-    [layoutMeta, readsWithoutMeta],
+        : compact
+          ? phoneReportFieldnames(layoutMeta)
+          : defaultReportFieldnames(layoutMeta),
+    [layoutMeta, readsWithoutMeta, compact],
+  );
+  const fileUrl = useCallback(
+    (path: string) =>
+      /^(?:https?:|data:|blob:)/.test(path) || !connection.baseURL
+        ? path
+        : `${connection.baseURL.replace(/\/$/, "")}${path.startsWith("/") ? "" : "/"}${path}`,
+    [connection.baseURL],
   );
   const initialColumnsKey = JSON.stringify(initialFieldnames(initialColumns));
   const startFieldnames = useMemo(
@@ -512,8 +525,17 @@ function FrappeReportBuilderBody({
     for (const column of selectedColumns) fields.add(column.fieldname);
     if (groupBy) fields.add(groupBy);
     if (chartConfig?.aggregationField) fields.add(chartConfig.aggregationField);
+    // The phone title cell draws the record's image.
+    if (compact && layoutMeta?.image_field) fields.add(layoutMeta.image_field);
     return [...fields];
-  }, [selectedColumns, sort.field, groupBy, chartConfig?.aggregationField]);
+  }, [
+    selectedColumns,
+    sort.field,
+    groupBy,
+    chartConfig?.aggregationField,
+    compact,
+    layoutMeta?.image_field,
+  ]);
 
   const orderBy = useMemo(
     () => [{ field: sort.field, order: sort.order === "asc" ? Order.Asc : Order.Desc }],
@@ -838,6 +860,9 @@ function FrappeReportBuilderBody({
           onOpenLink={onOpenLink}
           totals={totals}
           groupByColumn={groupByColumn}
+          imageField={layoutMeta?.image_field}
+          titleField={layoutMeta?.title_field}
+          fileUrl={fileUrl}
         />
       </YStack>
     );
@@ -887,7 +912,7 @@ function FrappeReportBuilderBody({
               setPageSize(next.pageSize);
             }}
             pageSizeOptions={[...REPORT_PAGE_SIZES]}
-            compact
+            size="$3"
           />
         </YStack>
       )}

package/src/FrappeReportView.tsx

@@ -230,7 +230,6 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       return (
         <Select
           label={label}
-          compact
           options={options}
           value={value == null ? "" : String(value)}
           onChange={onChange}
@@ -242,7 +241,6 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       return (
         <DatePicker
           label={label}
-          compact
           value={value == null ? null : String(value)}
           onChange={(date) => onChange(date ? formatCalendarDate(date) : "")}
         />
@@ -251,7 +249,6 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       return (
         <Check
           label={label}
-          compact
           value={Boolean(value)}
           // Wire shape parity with desk: checkboxes travel as 1 / 0.
           onChange={(checked) => onChange(checked ? 1 : 0)}
@@ -262,7 +259,6 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       return (
         <Data
           label={label}
-          compact
           value={value == null ? "" : String(value)}
           onChange={onChange}
           placeholder={label}

package/src/FrappeTable.tsx

@@ -136,11 +136,6 @@ export interface FrappeTableProps<TDoc extends { name: string; doctype: string }
    * refresh generation).
    */
   refreshToken?: unknown;
-  /**
-   * Density. DataTableRoot accepts this; it is not on DataTableProps, so
-   * FrappeTable has to name it or callers (backoffice list) fail the build.
-   */
-  compact?: boolean;
   /**
    * Filters the toolbar offers. Omitted, the list is derived from the
    * doctype's meta: under a provider carrying `fixtures` that is the

package/src/SyncErrorNotice.stories.tsx

@@ -31,7 +31,7 @@ export const Default = () => (
 Default.storyName = "Main";
 
 export const AllStates = () => (
-  <YStack gap="$4" width={480}>
+  <YStack gap="$4" width={480} maxWidth="100%">
     <SyncErrorNotice
       message="Could not add comment"
       onRetry={action("onRetry")}

package/src/components/timeline.stories.tsx

@@ -246,7 +246,7 @@ export const AbsoluteTimestamps = () => (
 /** Compact mode forwards to the base component. */
 export const Compact = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
-    <Timeline doctype="Task" docname="TASK-001" label="Activity" compact />
+    <Timeline doctype="Task" docname="TASK-001" label="Activity" size="$3" />
   </FrappeProvider>
 );
 

package/src/desk/Awesomebar.stories.tsx

@@ -70,7 +70,7 @@ const doctypeList = [
 
 export const Main = (args: Record<string, unknown>) => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack width={560} padding="$4">
+    <YStack width={560} maxWidth="100%" padding="$4">
       <Awesomebar onNavigate={action("onNavigate")} {...args} />
     </YStack>
   </FrappeProvider>
@@ -85,7 +85,7 @@ Main.storyName = "Main";
  */
 export const SearchUnavailable = () => (
   <FrappeProvider baseURL={ERR_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack width={560} padding="$4">
+    <YStack width={560} maxWidth="100%" padding="$4">
       <Awesomebar onNavigate={action("onNavigate")} />
     </YStack>
   </FrappeProvider>
@@ -93,7 +93,7 @@ export const SearchUnavailable = () => (
 
 /** No provider: math and commands still work locally; remote result groups stay empty. */
 export const WithoutProvider = () => (
-  <YStack width={560} padding="$4">
+  <YStack width={560} maxWidth="100%" padding="$4">
     <Awesomebar onNavigate={action("onNavigate")} />
   </YStack>
 );

package/src/desk/DeskFormSidebar.stories.tsx

@@ -155,7 +155,7 @@ function makeBareFixtures() {
 
 export const Default = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
-    <YStack width={320} height={520}>
+    <YStack width={320} maxWidth="100%" height={520}>
       <DeskFormSidebar doctype="Todo" name="TODO-001" />
     </YStack>
   </FrappeProvider>
@@ -164,7 +164,7 @@ Default.storyName = "Main";
 
 export const EmptySections = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={makeBareFixtures()}>
-    <YStack width={320} height={520}>
+    <YStack width={320} maxWidth="100%" height={520}>
       <DeskFormSidebar doctype="Todo" name="TODO-002" />
     </YStack>
   </FrappeProvider>
@@ -181,7 +181,7 @@ EmptySections.parameters = {
 
 export const Loading = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
-    <YStack width={320} height={200}>
+    <YStack width={320} maxWidth="100%" height={200}>
       <DeskFormSidebar doctype="Todo" name="TODO-MISSING" />
     </YStack>
   </FrappeProvider>

package/src/desk/DeskShell.tsx

@@ -34,7 +34,12 @@ import {
   useDocumentTitle,
   type BreadcrumbItem,
 } from "@multiplatform.one/components";
-import { NARROW_BREAKPOINT, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  NARROW_BREAKPOINT,
+  Surface,
+  useLayoutSizeClass,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { Awesomebar } from "./awesomebar";
 import { DeskSidebar } from "./DeskSidebar";
 
@@ -75,13 +80,6 @@ function useIsNarrowDesk(): boolean {
   return useLayoutSizeClass() === "compact";
 }
 
-/** Size token is a HEIGHT key — map the banner min-height from it, never fontSize. */
-function bannerMinHeight(sizeToken: string): "$5" | "$6" | "$7" {
-  if (sizeToken === "$5") return "$7";
-  if (sizeToken === "$3") return "$5";
-  return "$6";
-}
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -176,17 +174,19 @@ export function DeskShell({
           role="banner"
           {...knobProps.surface}
           {...knobProps.gap}
-          {...knobProps.panelPadding}
+          // B5: the one top-bar fragment (Navbar, BackofficeShell share it).
+          {...knobProps.bar.frame}
           {...chromeBorder}
-          minHeight={bannerMinHeight(knobProps.sizeToken)}
           alignItems="center"
           flexShrink={0}
         >
-          {toggleButton}
-          <SizableText {...knobProps.heading} {...knobProps.controlType} flexShrink={0}>
-            {t("Desk")}
-          </SizableText>
-          <Awesomebar onNavigate={handleNavigate} flex={1} minWidth={0} />
+          <Surface size={knobProps.bar.sizeToken}>
+            {toggleButton}
+            <SizableText {...knobProps.heading} {...knobProps.controlType} flexShrink={0}>
+              {t("Desk")}
+            </SizableText>
+            <Awesomebar onNavigate={handleNavigate} flex={1} minWidth={0} />
+          </Surface>
         </XStack>
       )}
 
@@ -195,12 +195,12 @@ export function DeskShell({
         <XStack
           {...knobProps.surface}
           {...knobProps.gap}
-          {...knobProps.panelPadding}
+          {...knobProps.bar.frame}
           {...chromeBorder}
           alignItems="center"
           flexShrink={0}
         >
-          {toggleButton}
+          <Surface size={knobProps.bar.sizeToken}>{toggleButton}</Surface>
         </XStack>
       )}
 

package/src/desk/awesomebar.tsx

@@ -136,7 +136,10 @@ function matchingCommands(query: string): Array<{ label: string; path: string }>
 
 export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: AwesomebarProps) {
   const { t } = useTranslation();
-  const { knobProps, control } = useResolvedKnobs();
+  // B5: the awesomebar lives in a top bar, so it renders at the bar
+  // fragment's size token (clamped to any Surface ceiling).
+  const barSize = useResolvedKnobs().knobProps.bar.sizeToken;
+  const { knobProps, control } = useResolvedKnobs({ size: barSize });
   const config = useFrappeConfig();
   const [query, setQuery] = useState("");
   const [docResults, setDocResults] = useState<DocSearchResult[]>([]);
@@ -326,7 +329,7 @@ export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: Aw
     { conflictBehavior: "allow" },
   );
 
-  // Height from the LC-65 size recipe (not a private px map). Combobox's
+  // Height from the LC-65 size recipe at the bar's size token (not a private px map). Combobox's
   // custom-trigger wrapper used to collapse Tamagui `height` — pin via style
   // + outer shell (SB-M-1703).
   const triggerHeight = knobProps.control.height;

package/src/fieldRegistry.spec.tsx

@@ -86,15 +86,13 @@ describe("fieldtypeToTableField (cell context)", () => {
     expect(element.type).toBe(Rating);
     expect(element.props.value).toBe(0.8);
     expect(element.props.maxStars).toBeUndefined();
-    expect(element.props.compact).toBe(true);
   });
 
-  it("maps Icon to the Icon picker cell (compact), honoring render context", () => {
+  it("maps Icon to the Icon picker cell, honoring render context", () => {
     const render = customRenderOf(fieldtypeToTableField("Icon"));
     const element = render("mail", {}, () => {});
     expect(element.type).toBe(Icon);
     expect(element.props.value).toBe("mail");
-    expect(element.props.compact).toBe(true);
     const readOnlyElement = render("mail", {}, () => {}, { readOnly: true, disabled: false });
     expect(readOnlyElement.props.readOnly).toBe(true);
   });
@@ -110,7 +108,6 @@ describe("fieldtypeToTableField (cell context)", () => {
     const element = render("Administrator", {}, () => {});
     expect(element.type).toBe(Link);
     expect(element.props.doctype).toBe("User");
-    expect(element.props.compact).toBe(true);
   });
 
   it("maps Dynamic Link to a Link combobox whose doctype resolves from the row", () => {

package/src/fieldRegistry.ts

@@ -103,8 +103,6 @@ export interface FieldRenderProps {
   readOnly?: boolean;
   /** Render a skeleton placeholder instead of the live field. */
   skeleton?: boolean;
-  /** Use compact sizing. */
-  compact?: boolean;
   /** Helper / description text (falls back to fieldMeta.description in adapters). */
   helperText?: string;
   required?: boolean;
@@ -153,14 +151,13 @@ export function getFieldComponent(fieldtype: string): ComponentType<FieldRenderP
 
 /**
  * Thin-adapter contract props shared by every field wrapper: forwards
- * readOnly / skeleton / compact plus helper text (df `description` fallback).
+ * readOnly / skeleton plus helper text (df `description` fallback).
  */
 function passthroughProps(props: FieldRenderProps) {
   return {
     helperText: props.helperText ?? props.fieldMeta?.description,
     readOnly: props.readOnly,
     skeleton: props.skeleton,
-    compact: props.compact,
   };
 }
 
@@ -225,10 +222,26 @@ function AutocompleteAdapter(props: FieldRenderProps) {
   });
 }
 
+/**
+ * A hugging number's label "Height (dm)" as the label "Height" and the unit
+ * "dm": a short unit in trailing parentheses moves after the value.
+ */
+export function splitUnitLabel(label: unknown): { label: unknown; unit?: string } {
+  if (typeof label !== "string") return { label };
+  const match = /^(.*\S)\s*\(([^()\s]{1,6})\)$/.exec(label);
+  return match ? { label: match[1], unit: match[2] } : { label };
+}
+
 function NumericAdapter(type: "Int" | "Float" | "Currency" | "Percent") {
   return function NumericAdapter(props: FieldRenderProps) {
+    const hug = props.hug === true;
+    const explicitUnit = typeof props.unit === "string" ? props.unit : undefined;
+    const split =
+      hug && explicitUnit === undefined && type !== "Currency" && type !== "Percent"
+        ? splitUnitLabel(props.label)
+        : { label: props.label };
     return React.createElement(Numeric, {
-      label: props.label,
+      label: split.label as string | undefined,
       value:
         typeof props.value === "number"
           ? props.value
@@ -243,6 +256,11 @@ function NumericAdapter(type: "Int" | "Float" | "Currency" | "Percent") {
       ...passthroughProps(props),
       ...disabledInputBlock(props),
       precision: props.fieldMeta?.precision,
+      // Host overrides: a unit after the value, and a field sized to it.
+      unit: explicitUnit ?? split.unit,
+      hug,
+      min: typeof props.min === "number" ? props.min : undefined,
+      max: typeof props.max === "number" ? props.max : undefined,
     });
   };
 }
@@ -697,7 +715,6 @@ function ButtonAdapter(props: FieldRenderProps) {
     disabled,
     disabledReason: disabled ? String(reason ?? "Unavailable") : undefined,
     skeleton: props.skeleton,
-    compact: props.compact,
     onPress: disabled ? undefined : props.onPress,
     children: props.label,
   });
@@ -1031,7 +1048,6 @@ export function fieldtypeToTableField(
             React.createElement(Icon, {
               value: value === null || value === undefined ? "" : String(value),
               onChange: onCellChange,
-              compact: true,
               readOnly: context?.readOnly,
               disabled: context?.disabled,
             }),
@@ -1056,7 +1072,6 @@ export function fieldtypeToTableField(
               value: typeof value === "number" ? value : Number(value) || 0,
               onChange: onCellChange,
               maxStars,
-              compact: true,
               // D-18.4: read-only cells block commits, so the stars must not
               // look pressable.
               readOnly: context?.readOnly,
@@ -1113,7 +1128,6 @@ export function fieldtypeToTableField(
               value: value === null || value === undefined ? "" : String(value),
               onChange: onCellChange,
               doctype: linkDoctype,
-              compact: true,
               // D-18.4: read-only cells block commits, so the combobox must
               // render its non-interactive representation.
               readOnly: context?.readOnly,
@@ -1169,7 +1183,6 @@ export function fieldtypeToTableField(
               value: value === null || value === undefined ? "" : String(value),
               onChange: onCellChange,
               doctype: rowDoctype,
-              compact: true,
               disabled: Boolean(!rowDoctype || context?.disabled),
               // D-18.4: read-only cells block commits, so the combobox must
               // render its non-interactive representation.

package/src/fields/Barcode/index.tsx

@@ -34,7 +34,6 @@ export type BarcodeProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     enableScan?: boolean;
     formats?: string[];
   };
@@ -71,7 +70,6 @@ export function Barcode<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Check/Check.stories.tsx

@@ -46,7 +46,7 @@ Default.args = {
 
 Default.storyName = "Main";
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledCheck label="Unchecked (Default)" value={false} />
     <ControlledCheck label="Checked" value={true} />
     <ControlledCheck label="With Error" value={false} error="This field is required" />

package/src/fields/Check/index.tsx

@@ -41,7 +41,6 @@ export type CheckProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     checkboxProps?: Record<string, unknown>;
   };
 
@@ -76,7 +75,6 @@ export function Check<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/CodeEditor/CodeEditor.spec.tsx

@@ -188,14 +188,13 @@ describe("registry resolution (Code / JSON fieldtypes)", () => {
     expect(element.props.language).toBe("json");
   });
 
-  it("adapter passes helperText / readOnly / skeleton / compact through (passthrough parity)", () => {
+  it("adapter passes helperText / readOnly / skeleton through (passthrough parity)", () => {
     const Component = getFieldComponent("Code")!;
     const element = (Component as Function)(
-      propsFor({ helperText: "Server script", readOnly: true, skeleton: true, compact: true }),
+      propsFor({ helperText: "Server script", readOnly: true, skeleton: true }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("Server script");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

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

@@ -52,7 +52,6 @@ export default {
     disabled: { control: "boolean" },
     readOnly: { control: "boolean" },
     skeleton: { control: "boolean" },
-    compact: { control: "boolean" },
     minRows: { control: "number" },
     maxRows: { control: "number" },
   },
@@ -141,7 +140,7 @@ export const States = {
     <YStack gap="$5">
       <Controlled {...args} label="Error" error="Script fails to parse at line 3" />
       <Controlled {...args} label="Disabled" disabled />
-      <Controlled {...args} label="Compact" compact />
+      <Controlled {...args} label="Compact" size="$3" />
       <CodeEditorField label="Skeleton" skeleton onChange={() => {}} />
     </YStack>
   ),

package/src/fields/CodeEditor/index.tsx

@@ -29,7 +29,7 @@ import {
   useResolvedValidators,
   type AnyFormApi,
 } from "@multiplatform.one/forms";
-import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { useEffect, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
@@ -74,19 +74,18 @@ export function frappeCodeLanguage(options?: string | null): string {
 interface CodePreviewProps {
   value: string;
   language: string;
-  compact?: boolean;
 }
 
-function CodePreview({ value, language, compact }: CodePreviewProps) {
+function CodePreview({ value, language }: CodePreviewProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact });
+  const { knobProps } = useResolvedKnobs();
   const tokens = useShikiTokens(value, language);
   const lineCount = value ? value.split("\n").length : 0;
-  // Content type scale follows the size knob (same idiom as CodeBlock).
+  // Content type scale follows the size token (same idiom as CodeBlock).
   const textSize = knobProps.sizeToken as FontSizeTokens;
 
   return (
-    <PreviewSurface compact={compact} horizontalScroll>
+    <PreviewSurface horizontalScroll>
       {!value ? (
         <Paragraph color={formCommonColors.muted} size={textSize}>
           {t("Nothing to preview")}
@@ -119,7 +118,6 @@ export interface CodeEditorFieldProps {
   disabled?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   size?: SizeTokens;
   id?: string;
   value?: string;
@@ -152,7 +150,6 @@ export function CodeEditorField({
   disabled,
   readOnly,
   skeleton,
-  compact,
   size,
   id: idProp,
   value,
@@ -166,7 +163,8 @@ export function CodeEditorField({
   "aria-label": ariaLabel,
 }: CodeEditorFieldProps) {
   const { t } = useTranslation();
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const inTableCell = useIsInTableCell();
 
@@ -190,7 +188,7 @@ export function CodeEditorField({
             height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
           />
         )}
-        <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
+        <Skeleton variant="rounded" width="100%" height={small ? 120 : 200} />
       </YStack>
     );
   }
@@ -213,7 +211,6 @@ export function CodeEditorField({
       readOnly={readOnly}
       required={required}
       error={hasError ? true : undefined}
-      compact={compact}
       size={size}
       minRows={minRows}
       maxRows={maxRows}
@@ -242,10 +239,9 @@ export function CodeEditorField({
     return (
       <EditorPreviewPanes
         editor={renderSource(textValue, handleChange, hasError)}
-        preview={<CodePreview value={textValue} language={language} compact={compact} />}
+        preview={<CodePreview value={textValue} language={language} />}
         editTabLabel={t("Code")}
         previewTabLabel={t("Preview")}
-        compact={compact}
         defaultPreview={!!readOnly}
       />
     );

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

@@ -53,7 +53,7 @@ Default.args = {
 
 Default.storyName = "Main";
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledColor label="Default" />
     <ControlledColor label="With Value" value="#10B981" />
     <ControlledColor label="Required" required />

package/src/fields/Color/index.tsx

@@ -42,7 +42,6 @@ export type ColorProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     showPresets?: boolean;
     presetColors?: string[];
   };
@@ -83,7 +82,6 @@ export function Color<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Data/Data.stories.tsx

@@ -56,7 +56,7 @@ Default.args = {
 
 Default.storyName = "Main";
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledData label="Default" placeholder="Enter text" />
     <ControlledData label="With Value" value="Some entered text" />
     <ControlledData label="Required Field" required placeholder="Required" />

package/src/fields/Data/index.tsx

@@ -43,7 +43,6 @@ export type DataProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     maxLength?: number;
     inputProps?: Record<string, unknown>;
   };
@@ -83,7 +82,6 @@ export function Data<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}