@multiplatform.one/frappe-ui 7.28.1 → 7.29.0

package/src/FrappeReportView.tsx

@@ -14,8 +14,10 @@
  *     server-appended total row (`add_total_row`) is a plain array — rows are
  *     therefore re-keyed defensively here (`normalizeReportRows`).
  *
- * Transport rides the existing whitelisted-method caller (`CallModule` from
- * `@multiplatform.one/frappe`) — no bespoke fetch path.
+ * The payload, filter and column shapes are the one query-report model in
+ * `./report/queryReport` (MPO-15, GL-28), and the transport is
+ * `./report/useFrappeReport`, the same caller the desk's QueryReportScreen
+ * runs its reports through. This file owns rendering only.
  *
  * Filter bar: built from the report's DB-defined filters (the Report doc's
  * `filters` child table, fetched via `frappe.desk.query_report.get_script`).
@@ -37,8 +39,7 @@
  * (no new export machinery), capability-gated like FrappeReportBuilder (B12):
  * hidden where the web download pipeline does not exist.
  */
-import { AsyncDebouncer, CallModule, HttpClient, type AuthConfig } from "@multiplatform.one/frappe";
-import { AsyncBoundary } from "@multiplatform.one/components";
+import { AsyncBoundary, EmptyState } from "@multiplatform.one/components";
 import { Button, DatePicker, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import {
   DataTable,
@@ -57,177 +58,54 @@ import { useFrappeConfig } from "./FrappeProvider";
 import { Check } from "./fields/Check";
 import { Data } from "./fields/Data";
 import { Select } from "./fields/Select";
-import { toLiveLoadError } from "./liveErrors";
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-/** A report column definition as returned by `query_report.run`. */
-export interface FrappeReportColumn {
-  fieldname: string;
-  label: string;
+import { isPermissionError, refusalReason, toLiveLoadError } from "./liveErrors";
+import {
+  humanizeFrappeError,
+  normalizeFilterMeta,
+  scrubFieldname,
+  type FrappeReportColumn,
+  type FrappeReportFilterDef,
+  type FrappeReportRow,
+  type FrappeReportValues,
+  type QueryReportFilterMeta,
+} from "./report/queryReport";
+import {
+  useFrappeReport,
+  type FrappeReportConnection,
+  type FrappeReportFixture,
+} from "./report/useFrappeReport";
+
+export {
+  compactFilterValues,
+  normalizeReportColumn,
+  normalizeReportPayload,
+  normalizeReportRows,
+  scrubFieldname,
+  type FrappeReportColumn,
+  type FrappeReportFilterDef,
+  type FrappeReportPayload,
+  type FrappeReportRow,
+  type FrappeReportRunResponse,
+  type FrappeReportValues,
+} from "./report/queryReport";
+export {
+  useFrappeReport,
+  type FrappeReportConnection,
+  type FrappeReportFixture,
+  type UseFrappeReportOptions,
+  type UseFrappeReportResult,
+} from "./report/useFrappeReport";
+
+/** A column as the render helpers take it: normalized, or with the wire's string width. */
+type RenderableReportColumn = Omit<FrappeReportColumn, "fieldtype" | "width"> & {
   fieldtype?: string;
-  /** Link/Select target or option list (Frappe semantics per fieldtype). */
-  options?: string;
-  /** Column width in px (the server sends numbers or numeric strings). */
   width?: number | string;
-  precision?: number;
-}
-
-/** One row of report data, keyed by column fieldname. */
-export type FrappeReportRow = Record<string, unknown>;
+};
 
 // Generic JSX (`<DataTable<FrappeReportRow> …/>`) breaks one-dev's source
 // annotation transform; instantiate the type argument outside JSX instead.
 const ReportDataTable = DataTable<FrappeReportRow>;
 
-/** Current filter values, keyed by filter fieldname. */
-export type FrappeReportValues = Record<string, unknown>;
-
-/**
- * A report filter definition — the Report doctype's `filters` child table
- * shape (Report Filter rows), also the shape of the `filterFields` prop.
- */
-export interface FrappeReportFilterDef {
-  fieldname: string;
-  label: string;
-  /** "Data" | "Select" | "Date" | "Datetime" | "Check" | "Int" | … */
-  fieldtype: string;
-  /** Newline-separated choices for Select, Link target for Link. */
-  options?: string;
-  default?: unknown;
-  mandatory?: number | boolean;
-  wildcard_filter?: number | boolean;
-}
-
-/** Raw `frappe.desk.query_report.run` response body (`message`). */
-export interface FrappeReportRunResponse {
-  columns?: Array<FrappeReportColumn | string>;
-  result?: Array<FrappeReportRow | unknown[]>;
-  message?: string | string[] | null;
-  chart?: unknown;
-  report_summary?: unknown;
-  add_total_row?: number | boolean;
-  skip_total_row?: number | boolean;
-  status?: string | null;
-  execution_time?: number;
-  /**
-   * Fixture extension: report filter definitions. The live endpoint does not
-   * include filters in `run`; fixtures may carry them so fixture-backed
-   * stories/tests get a filter bar without a second fixture surface.
-   */
-  filters?: FrappeReportFilterDef[];
-}
-
-/** Normalized report payload consumed by the table. */
-export interface FrappeReportPayload {
-  columns: FrappeReportColumn[];
-  rows: FrappeReportRow[];
-  /** Server-side report message (already user-facing). */
-  message?: string;
-  /** True when the last row is the server-computed total row. */
-  addTotalRow: boolean;
-  /** Fixture-provided filter definitions (see FrappeReportRunResponse). */
-  filters?: FrappeReportFilterDef[];
-  /** Untouched response for chart / report_summary consumers. */
-  raw: FrappeReportRunResponse;
-}
-
-/** Fixture payload or loader — renders the report without any network. */
-export type FrappeReportFixture =
-  | FrappeReportRunResponse
-  | ((args: {
-      reportName: string;
-      filters: FrappeReportValues;
-    }) => FrappeReportRunResponse | Promise<FrappeReportRunResponse>);
-
-// ---------------------------------------------------------------------------
-// Pure helpers (unit-tested)
-// ---------------------------------------------------------------------------
-
-/** Frappe's `scrub`: label → fieldname (lowercase, spaces/dashes → "_"). */
-export function scrubFieldname(label: string): string {
-  return label
-    .trim()
-    .replace(/[\s-]+/g, "_")
-    .toLowerCase();
-}
-
-/**
- * Normalize a report column to the dict shape. Mirrors the server's
- * `get_column_as_dict`: legacy string columns are
- * `"Label:Fieldtype/Options:Width"`, dict columns may lack `fieldname`.
- */
-export function normalizeReportColumn(col: FrappeReportColumn | string): FrappeReportColumn {
-  if (typeof col === "string") {
-    const parts = col.split(":");
-    const label = parts[0] ?? "";
-    const out: FrappeReportColumn = { label, fieldname: scrubFieldname(label) };
-    if (parts.length > 1 && parts[1]) {
-      const [fieldtype, options] = parts[1].split("/");
-      if (fieldtype) out.fieldtype = fieldtype;
-      if (options) out.options = options;
-    }
-    if (parts.length === 3 && parts[2]) out.width = parts[2];
-    return out;
-  }
-  return {
-    ...col,
-    fieldname: col.fieldname || scrubFieldname(col.label ?? ""),
-    label: col.label ?? col.fieldname,
-  };
-}
-
-/**
- * Re-key report rows by column fieldname. The server normalizes rows to
- * dicts, but the appended total row (and legacy prepared payloads) are
- * arrays — both shapes must render (mixed within one result).
- */
-export function normalizeReportRows(
-  columns: FrappeReportColumn[],
-  result: Array<FrappeReportRow | unknown[]> | undefined,
-): FrappeReportRow[] {
-  if (!result?.length) return [];
-  return result.map((row) => {
-    if (Array.isArray(row)) {
-      const obj: FrappeReportRow = {};
-      columns.forEach((col, idx) => {
-        obj[col.fieldname] = row[idx];
-      });
-      return obj;
-    }
-    return row;
-  });
-}
-
-/** Normalize the raw `run` response into the payload the table consumes. */
-export function normalizeReportPayload(raw: FrappeReportRunResponse): FrappeReportPayload {
-  const columns = (raw.columns ?? []).map(normalizeReportColumn);
-  const rows = normalizeReportRows(columns, raw.result);
-  const message = Array.isArray(raw.message)
-    ? raw.message.filter(Boolean).join(" ")
-    : (raw.message ?? undefined);
-  return {
-    columns,
-    rows,
-    message: message || undefined,
-    addTotalRow: Boolean(raw.add_total_row) && !raw.skip_total_row,
-    filters: raw.filters,
-    raw,
-  };
-}
-
-/** Drop empty filter values so cleared fields never reach the API. */
-export function compactFilterValues(values: FrappeReportValues | undefined): FrappeReportValues {
-  const out: FrappeReportValues = {};
-  for (const [key, value] of Object.entries(values ?? {})) {
-    if (value === undefined || value === null || value === "") continue;
-    out[key] = value;
-  }
-  return out;
-}
-
 /** Parse a Select column/filter option string (newline-separated). */
 function parseSelectOptions(options: string | undefined): Array<{ label: string; value: string }> {
   return (options ?? "")
@@ -242,7 +120,7 @@ function parseSelectOptions(options: string | undefined): Array<{ label: string;
  * forms `FieldDisplay` pipeline formats the value and DG-TBL-01
  * align-by-type defaults apply (numerics → right, Check → center).
  */
-export function reportFieldtypeToTableField(column: FrappeReportColumn): {
+export function reportFieldtypeToTableField(column: RenderableReportColumn): {
   field: DataTableField;
   fieldProps?: Record<string, unknown>;
 } {
@@ -283,7 +161,7 @@ export function reportFieldtypeToTableField(column: FrappeReportColumn): {
  * renderers included (DataTable's aligned cell wrapper reads it).
  */
 export function reportColumnToDataTableColumn(
-  column: FrappeReportColumn,
+  column: RenderableReportColumn,
 ): DataTableColumn<FrappeReportRow> {
   const { field, fieldProps } = reportFieldtypeToTableField(column);
   const width = column.width != null ? Number(column.width) : undefined;
@@ -331,237 +209,19 @@ function canDownloadFiles(): boolean {
   );
 }
 
-// ---------------------------------------------------------------------------
-// Data hook
-// ---------------------------------------------------------------------------
-
-export interface FrappeReportConnection {
-  baseURL: string;
-  auth?: {
-    useToken?: boolean;
-    token?: string | (() => string | Promise<string>);
-    type?: string;
-  };
-}
-
-// One whitelisted-method caller per connection — report views sharing a
-// bench share it (same pattern as useFrappeAggregate's DbModule cache).
-const callCache = new Map<string, CallModule>();
-
-function getCall(connection: FrappeReportConnection): CallModule {
-  const key = `${connection.baseURL}:${connection.auth?.useToken ? "t" : ""}:${connection.auth?.token ?? ""}:${connection.auth?.type ?? ""}`;
-  let call = callCache.get(key);
-  if (!call) {
-    const authConfig: AuthConfig | undefined = connection.auth
-      ? {
-          useToken: connection.auth.useToken,
-          token: connection.auth.token,
-          type: connection.auth.type as AuthConfig["type"],
-        }
-      : undefined;
-    call = new CallModule(new HttpClient(connection.baseURL, authConfig));
-    callCache.set(key, call);
-  }
-  return call;
-}
-
-const DEFAULT_DEBOUNCE_MS = 400;
-
-export interface UseFrappeReportOptions {
-  reportName: string;
-  /** Current filter values (already compacted values are fine too). */
-  filters?: FrappeReportValues;
-  /** Fixture payload / loader — no network is touched when set. */
-  fixture?: FrappeReportFixture;
-  /**
-   * Fetch the report's DB-defined filter definitions (`get_script`).
-   * Off when the consumer supplies `filterFields` explicitly.
-   */
-  fetchFilterDefs?: boolean;
-  /** Bypass the prepared-report cache and execute the report now. */
-  ignorePreparedReport?: boolean;
-  /** Debounce for filter-change refetches in ms (default 400). */
-  debounceMs?: number;
-  enabled?: boolean;
-}
-
-export interface UseFrappeReportResult {
-  payload: FrappeReportPayload | undefined;
-  /** DB-defined filter defs (`get_script`); undefined while unknown. */
-  scriptFilters: FrappeReportFilterDef[] | undefined;
-  /** First run in flight — nothing to show yet. */
-  isLoading: boolean;
-  /** Any run in flight (filter-change / refresh refetches included). */
-  isFetching: boolean;
-  error: Error | undefined;
-  /** Immediate re-run (skips the debounce window). */
-  refresh: () => void;
-}
-
-/**
- * Run a named server-side report (`frappe.desk.query_report.run`) with the
- * given filters. Filter-value changes are debounced; report changes and
- * explicit `refresh()` run immediately.
- */
-export function useFrappeReport(
-  connection: FrappeReportConnection | undefined,
-  {
-    reportName,
-    filters,
-    fixture,
-    fetchFilterDefs = false,
-    ignorePreparedReport = false,
-    debounceMs = DEFAULT_DEBOUNCE_MS,
-    enabled = true,
-  }: UseFrappeReportOptions,
-): UseFrappeReportResult {
-  const isEnabled = enabled && !!reportName && (!!connection || !!fixture);
-
-  const [payload, setPayload] = useState<FrappeReportPayload | undefined>(undefined);
-  const [scriptFilters, setScriptFilters] = useState<FrappeReportFilterDef[] | undefined>(
-    undefined,
-  );
-  const [isLoading, setIsLoading] = useState(isEnabled);
-  const [isFetching, setIsFetching] = useState(false);
-  const [error, setError] = useState<Error | undefined>(undefined);
-
-  const compactedFilters = useMemo(() => compactFilterValues(filters), [filters]);
-  const filtersKey = JSON.stringify(compactedFilters);
-  const runKey = JSON.stringify([
-    connection?.baseURL,
-    !!fixture,
-    reportName,
-    filtersKey,
-    ignorePreparedReport,
-  ]);
-
-  const fetchSeq = useRef(0);
-  const argsRef = useRef({ reportName, filters: compactedFilters, fixture, ignorePreparedReport });
-  argsRef.current = { reportName, filters: compactedFilters, fixture, ignorePreparedReport };
-  const connectionRef = useRef(connection);
-  connectionRef.current = connection;
-
-  const runFetch = useCallback(async () => {
-    const {
-      reportName: name,
-      filters: values,
-      fixture: fx,
-      ignorePreparedReport: skipPrepared,
-    } = argsRef.current;
-    const conn = connectionRef.current;
-    if (!name || (!conn && !fx)) return;
-    const seq = ++fetchSeq.current;
-    setIsFetching(true);
-    try {
-      let raw: FrappeReportRunResponse | undefined;
-      if (fx) {
-        raw = typeof fx === "function" ? await fx({ reportName: name, filters: values }) : fx;
-      } else if (conn) {
-        const res = await getCall(conn).post<{ message: FrappeReportRunResponse }>(
-          "frappe.desk.query_report.run",
-          {
-            report_name: name,
-            filters: values,
-            ignore_prepared_report: skipPrepared ? 1 : 0,
-            // Desk parity: only let the server substitute saved custom
-            // filters when the caller sent no filter values at all.
-            are_default_filters: Object.keys(values).length ? 0 : 1,
-          },
-        );
-        raw = res.payload.message;
-      }
-      if (seq !== fetchSeq.current) return; // stale response — a newer run won
-      setPayload(normalizeReportPayload(raw ?? {}));
-      setError(undefined);
-    } catch (err) {
-      if (seq !== fetchSeq.current) return;
-      setError(err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      if (seq === fetchSeq.current) {
-        setIsLoading(false);
-        setIsFetching(false);
-      }
-    }
-  }, []);
-
-  // Debouncer coalescing filter keystrokes into one refetch.
-  const debouncerRef = useRef<AsyncDebouncer<() => Promise<void>> | undefined>(undefined);
-  if (!debouncerRef.current) {
-    debouncerRef.current = new AsyncDebouncer(() => runFetch(), {
-      wait: debounceMs,
-    });
-  }
-  useEffect(() => {
-    debouncerRef.current?.setOptions({ wait: debounceMs });
-  }, [debounceMs]);
-  useEffect(() => () => debouncerRef.current?.cancel(), []);
-
-  // Report identity changes (and first mount) run immediately; filter-value
-  // changes ride the debouncer so per-keystroke Data filters cost one run.
-  // The run key guards actual query changes; captured args ride argsRef.
-  const lastRunKeyRef = useRef<string | undefined>(undefined);
-  const lastReportRef = useRef<string | undefined>(undefined);
-  useEffect(() => {
-    if (!isEnabled || lastRunKeyRef.current === runKey) return;
-    lastRunKeyRef.current = runKey;
-    const reportChanged = lastReportRef.current !== argsRef.current.reportName;
-    lastReportRef.current = argsRef.current.reportName;
-    setError(undefined);
-    if (reportChanged) {
-      setIsLoading(true);
-      debouncerRef.current?.cancel();
-      void runFetch();
-    } else if (debounceMs <= 0) {
-      void runFetch();
-    } else {
-      void debouncerRef.current?.maybeExecute();
-    }
-  }, [isEnabled, runKey, debounceMs, runFetch]);
-
-  // DB-defined filter definitions (Report doc `filters` child table) via
-  // get_script — live mode only; fixtures carry defs on the payload itself.
-  useEffect(() => {
-    if (!isEnabled || !fetchFilterDefs || fixture || !connection) {
-      return;
-    }
-    let cancelled = false;
-    void (async () => {
-      try {
-        const res = await getCall(connection).get<{
-          message: { filters?: FrappeReportFilterDef[] };
-        }>("frappe.desk.query_report.get_script", { report_name: reportName });
-        if (!cancelled) setScriptFilters(res.payload.message?.filters ?? []);
-      } catch {
-        // Filter defs are progressive enhancement — a failing get_script
-        // must not take the report down (run() surfaces real errors).
-        if (!cancelled) setScriptFilters([]);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [isEnabled, fetchFilterDefs, fixture, connection, reportName]);
-
-  const refresh = useCallback(() => {
-    debouncerRef.current?.cancel();
-    void runFetch();
-  }, [runFetch]);
-
-  return { payload, scriptFilters, isLoading, isFetching, error, refresh };
-}
-
 // ---------------------------------------------------------------------------
 // Filter bar
 // ---------------------------------------------------------------------------
 
 interface ReportFilterFieldProps {
-  def: FrappeReportFilterDef;
+  def: QueryReportFilterMeta;
   value: unknown;
   onChange: (value: unknown) => void;
 }
 
 function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
   const { t } = useTranslation();
+  const label = def.label || def.fieldname;
   switch (def.fieldtype) {
     case "Select": {
       const options = parseSelectOptions(def.options).map((opt) =>
@@ -569,7 +229,7 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       );
       return (
         <Select
-          label={def.label}
+          label={label}
           compact
           options={options}
           value={value == null ? "" : String(value)}
@@ -581,7 +241,7 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
     case "Datetime":
       return (
         <DatePicker
-          label={def.label}
+          label={label}
           compact
           value={value == null ? null : String(value)}
           onChange={(date) => onChange(date ? formatCalendarDate(date) : "")}
@@ -590,7 +250,7 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
     case "Check":
       return (
         <Check
-          label={def.label}
+          label={label}
           compact
           value={Boolean(value)}
           // Wire shape parity with desk: checkboxes travel as 1 / 0.
@@ -601,11 +261,11 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       // Data / Link / Dynamic Link / Int / Float / …: free-text entry.
       return (
         <Data
-          label={def.label}
+          label={label}
           compact
           value={value == null ? "" : String(value)}
           onChange={onChange}
-          placeholder={def.label}
+          placeholder={label}
         />
       );
   }
@@ -726,11 +386,14 @@ export function FrappeReportView({
     },
   );
 
-  // Filter bar definitions: explicit prop > fixture payload > get_script.
+  // Filter bar definitions: explicit prop > fixture payload > get_script,
+  // normalized through the one filter model (hidden filters apply their
+  // defaults and never render, desk parity).
   const filterDefs = useMemo(
-    () => filterFields ?? payload?.filters ?? scriptFilters ?? [],
+    () => normalizeFilterMeta(filterFields ?? payload?.filters ?? scriptFilters ?? []),
     [filterFields, payload?.filters, scriptFilters],
   );
+  const shownFilterDefs = useMemo(() => filterDefs.filter((def) => def.hidden !== 1), [filterDefs]);
 
   // Seed DB-defined defaults once per report (uncontrolled mode only —
   // controlled callers own their values).
@@ -741,7 +404,7 @@ export function FrappeReportView({
     setInternalFilters((prev) => {
       const seeded: FrappeReportValues = {};
       for (const def of filterDefs) {
-        if (def.default != null && def.default !== "" && prev[def.fieldname] == null) {
+        if (def.default !== undefined && def.default !== "" && prev[def.fieldname] == null) {
           seeded[def.fieldname] = def.default;
         }
       }
@@ -766,27 +429,32 @@ export function FrappeReportView({
   );
 
   const exportEnabled = showExport && canDownloadFiles();
-  const hasToolbar = filterDefs.length > 0 || showRefresh || exportEnabled;
+  const refused = error !== undefined && isPermissionError(error);
+  const refreshShown = showRefresh && !refused;
+  const hasToolbar = shownFilterDefs.length > 0 || refreshShown || exportEnabled;
 
   if (error && errorRenderer) {
     return <>{errorRenderer(error)}</>;
   }
 
-  const normalizedError = error
-    ? toLiveLoadError(error, {
-        permissionMessage: t("You do not have permission to run {{reportName}}", { reportName }),
-        genericMessage: t("Error running {{reportName}}", { reportName }),
-      })
-    : null;
+  const normalizedError =
+    error && !refused
+      ? toLiveLoadError(error, {
+          permissionMessage: t("You do not have permission to run {{reportName}}", { reportName }),
+          genericMessage: t("Error running {{reportName}}", { reportName }),
+        })
+      : null;
 
   // Honest states via AsyncBoundary (DG-ST-01: error > loading > empty).
-  const boundaryState = normalizedError
-    ? { error: normalizedError }
-    : isLoading
-      ? { loading: loading ?? true }
-      : rows.length === 0
-        ? { empty: true }
-        : null;
+  const boundaryState = refused
+    ? null
+    : normalizedError
+      ? { error: normalizedError }
+      : isLoading
+        ? { loading: loading ?? true }
+        : rows.length === 0
+          ? { empty: true }
+          : null;
 
   return (
     <YStack {...knobProps.gap} flex={1} {...stackProps}>
@@ -794,7 +462,7 @@ export function FrappeReportView({
           bad filter can always be corrected. */}
       {hasToolbar && (
         <XStack {...knobProps.gap} alignItems="flex-end" flexWrap="wrap">
-          {filterDefs.map((def) => (
+          {shownFilterDefs.map((def) => (
             <YStack key={def.fieldname} minWidth={180} maxWidth={280} flexShrink={1}>
               <ReportFilterField
                 def={def}
@@ -812,7 +480,7 @@ export function FrappeReportView({
               </Text>
             </XStack>
           )}
-          {showRefresh && (
+          {refreshShown && (
             <Button
               size="$2"
               icon={ArrowClockwiseIcon}
@@ -859,7 +527,13 @@ export function FrappeReportView({
         </Text>
       )}
 
-      {boundaryState ? (
+      {refused ? (
+        <EmptyState
+          testID="frappe-report-not-permitted"
+          title={t("You can't run {{reportName}}", { reportName })}
+          description={refusalReason(humanizeFrappeError(error))}
+        />
+      ) : boundaryState ? (
         <AsyncBoundary
           layout="table"
           errorTitle={t("Error running {{reportName}}", { reportName })}

package/src/dependsOn.ts

@@ -164,7 +164,10 @@ const COERCE_FUNCTIONS: Record<string, (value: unknown) => unknown> = {
 
 class Parser {
   private pos = 0;
-  constructor(private readonly tokens: Token[]) {}
+  private readonly tokens: Token[];
+  constructor(tokens: Token[]) {
+    this.tokens = tokens;
+  }
 
   parse(): DependsEvaluator | undefined {
     const node = this.parseOr();

package/src/fields/shared/EditorPreviewPanes.tsx

@@ -9,10 +9,10 @@
  * a narrow column stays tabbed on a wide screen.
  */
 
-import { Tabs } from "@multiplatform.one/components";
+import { Tabs, ScrollView } from "@multiplatform.one/components";
 import { layoutBreakpoints, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState, type ReactNode } from "react";
-import { ScrollView, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 
 export interface PreviewSurfaceProps {
   compact?: boolean;