@lotics/ui 1.14.0 → 1.16.0

package/src/mime.ts

@@ -13,3 +13,49 @@ export function isVideoMimeType(mimeType: string): boolean {
 export function isAudioMimeType(mimeType: string): boolean {
   return mimeType.toLowerCase().startsWith("audio/");
 }
+
+const EXCEL_MIME_TYPES = [
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/wps-office.xlsx",
+  "application/wps-office.xls",
+  "application/vnd.ms-excel",
+];
+
+const LEGACY_EXCEL_MIME_TYPES = ["application/vnd.ms-excel", "application/wps-office.xls"];
+
+const DOCX_MIME_TYPES = [
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/wps-office.docx",
+];
+
+export function isPdfMimeType(mimeType: string): boolean {
+  return mimeType.toLowerCase() === "application/pdf";
+}
+
+export function isExcelMimeType(mimeType: string): boolean {
+  return EXCEL_MIME_TYPES.includes(mimeType.toLowerCase());
+}
+
+/** Legacy .xls (BIFF) — not parseable in-app; excluded from previewable. */
+export function isLegacyExcelMimeType(mimeType: string): boolean {
+  return LEGACY_EXCEL_MIME_TYPES.includes(mimeType.toLowerCase());
+}
+
+export function isCsvMimeType(mimeType: string): boolean {
+  const mt = mimeType.toLowerCase();
+  return mt === "text/csv" || mt === "text/tab-separated-values";
+}
+
+export function isDocxMimeType(mimeType: string): boolean {
+  return DOCX_MIME_TYPES.includes(mimeType.toLowerCase());
+}
+
+/** PDF, modern Excel (.xlsx), Word (.docx), or CSV — types FilePreview renders inline. */
+export function isPreviewableMimeType(mimeType: string): boolean {
+  return (
+    (isExcelMimeType(mimeType) && !isLegacyExcelMimeType(mimeType)) ||
+    isCsvMimeType(mimeType) ||
+    isPdfMimeType(mimeType) ||
+    isDocxMimeType(mimeType)
+  );
+}

package/src/picker_menu.tsx

@@ -10,6 +10,7 @@ import { MenuButton } from "./menu_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { PickerOption, PickerValue, PickerOnValueChange, PickerOnClose } from "./picker";
 import { useScreenSize } from "./use_screen_size";
+import { customOptionFor } from "./custom_option";
 
 export interface PickerMenuProps<T extends string = string, MULTI extends boolean = false> {
   testID?: string;
@@ -22,6 +23,14 @@ export interface PickerMenuProps<T extends string = string, MULTI extends boolea
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
   /** Enable search input to filter options */
   enableSearch?: boolean;
+  /** Single-select + search only: when the typed query matches no option, append
+   *  a trailing row that selects the raw query as a custom value (free entry).
+   *  `onValueChange` then receives the typed string. */
+  allowCustom?: boolean;
+  /** Label for the free-entry row (default: the raw query). Return `null` to
+   *  suppress the row for a given query — e.g. while it is still incomplete or
+   *  invalid — so "add" only appears when it is a meaningful thing to add. */
+  customOptionLabel?: (query: string) => string | null;
   enableSelectAll?: boolean;
   includeEmptyOption?: boolean;
   /** Called whenever the search text changes. Provide it to drive server-side
@@ -61,6 +70,8 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
     onRequestClose,
     enableSelectAll,
     enableSearch,
+    allowCustom,
+    customOptionLabel,
     includeEmptyOption,
     onSearchChange,
     serverFiltered,
@@ -92,6 +103,13 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
 
   const [searchQuery, setSearchQuery] = useState("");
 
+  // Free entry: a trailing selectable row carrying the raw query as its value
+  // (recognised below for distinct styling). See `customOptionFor` for the rules.
+  const customOpt = useMemo(
+    () => customOptionFor({ allowCustom, multi, query: searchQuery, options, customOptionLabel }),
+    [allowCustom, multi, searchQuery, options, customOptionLabel],
+  );
+
   const filteredOptions = useMemo(() => {
     let result = options;
     // Skip the local filter in server-driven mode — `options` already reflect
@@ -107,8 +125,11 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
       };
       result = [emptyOption, ...result];
     }
+    if (customOpt) {
+      result = [...result, customOpt];
+    }
     return result;
-  }, [options, enableSearch, searchQuery, includeEmptyOption, serverFiltered]);
+  }, [options, enableSearch, searchQuery, includeEmptyOption, serverFiltered, customOpt]);
 
   const [focusedIndex, setFocusedIndex] = useState<number>(() => {
     const selectedIndex = filteredOptions.findIndex((opt) => {
@@ -297,23 +318,26 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
             ? Array.isArray(multiValue) && multiValue.includes(item.value)
             : item.value === singleValue;
           const isFocused = index === focusedIndex;
+          const isCustom = !!customOpt && item.value === customOpt.value;
 
           return (
             <MenuButton
               key={item.value}
-              testID={item.testID || `picker-option-${item.value}`}
+              testID={isCustom ? "picker-custom-option" : item.testID || `picker-option-${item.value}`}
               icon={multi ? <Checkbox checked={isSelected} /> : undefined}
               title={
-                renderOptionContent ? (
+                renderOptionContent && !isCustom ? (
                   renderOptionContent(item)
                 ) : (
-                  <Text userSelect="none" numberOfLines={1}>
+                  <Text userSelect="none" numberOfLines={1} color={isCustom ? "zinc-500" : undefined}>
                     {item.label}
                   </Text>
                 )
               }
               right={
-                !multi && isSelected ? (
+                isCustom ? (
+                  <Icon name="plus" size={16} color={colors.zinc["400"]} />
+                ) : !multi && isSelected ? (
                   <Icon name="check" size={18} color={colors.zinc["950"]} />
                 ) : undefined
               }

package/src/search_select.tsx

@@ -9,9 +9,8 @@ import {
 import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
 import { colors } from "./colors";
 import { Text } from "./text";
-import { Icon } from "./icon";
 import { TextInputField } from "./text_input_field";
-import { MenuButton } from "./menu_button";
+import { MenuListItem } from "./menu_list_item";
 import { ActivityIndicator } from "./activity_indicator";
 import { Popover, PopoverContent } from "./popover";
 import type { PickerOption } from "./picker";
@@ -30,13 +29,20 @@ export interface SearchSelectProps<T extends string = string, D = unknown> {
   /** Shown — under a heading — when the box is focused but empty (e.g. the
    *  output of `useRecents`). Omit for no recents. */
   recentOptions?: PickerOption<T, D>[];
-  /** Render a rich row from the option (use its `data` payload). Falls back to
-   *  `option.label`. */
-  renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
-  /** Marks the matching row as the current selection (check + highlight). The
-   *  box itself stays a search affordance — the selection is shown by the host. */
+  /** Row subtitle, read from the option's `data` payload. The row's structure
+   *  and height are owned by the component (a MenuListItem) so every result
+   *  reads consistently — consumers supply data, not markup. */
+  getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
+  /** Leading accessory (e.g. a status dot / avatar). */
+  renderOptionIcon?: (option: PickerOption<T, D>) => ReactNode;
+  /** Trailing accessory (e.g. a `Badge`). */
+  renderOptionRight?: (option: PickerOption<T, D>) => ReactNode;
+  /** Marks the matching row as the current selection (a highlight). The box
+   *  itself stays a search affordance — the selection is shown by the host. */
   selectedValue?: T | null;
-  /** Show a spinner while results are in flight. */
+  /** True only on the initial load (no results yet) — show a spinner. During
+   *  revalidation / typing, pass the query's (SWR-style) `loading`, which stays
+   *  false while previous rows are kept, so the list never blanks. */
   loading?: boolean;
   /** Debounce for `onSearchChange`, in ms. Default 200. */
   searchDebounceMs?: number;
@@ -53,14 +59,15 @@ export interface SearchSelectProps<T extends string = string, D = unknown> {
   style?: StyleProp<ViewStyle>;
 }
 
-const OPTION_HEIGHT = 44;
+// Approximate row height (MenuListItem: title + description) for scroll-into-view.
+const OPTION_HEIGHT = 52;
 
 /**
- * Search-first combobox: an always-visible search input (the "panel") whose
- * typing drives a debounced, server-side search; results drop into a Popover
- * listbox below. Focused while empty, it offers `recentOptions`. Picking a row
- * fires `onValueChange` and clears the box for the next search — the selection
- * itself is rendered by the host (a summary above, details below).
+ * Search-first combobox: an always-visible white search panel whose typing
+ * drives a debounced, server-side search; results drop into a Popover listbox
+ * of MenuListItem rows below. Focused while empty, it offers `recentOptions`.
+ * Picking a row fires `onValueChange` and clears the box for the next search —
+ * the selection itself is rendered by the host (a summary above, details below).
  *
  * Focus stays on the input the whole time (Popover `manageFocus={false}`); the
  * input owns the keyboard (↑/↓ move the active row via `aria-activedescendant`,
@@ -74,7 +81,9 @@ export function SearchSelect<T extends string = string, D = unknown>(
     onSearchChange,
     onValueChange,
     recentOptions,
-    renderOptionContent,
+    getOptionDescription,
+    renderOptionIcon,
+    renderOptionRight,
     selectedValue = null,
     loading = false,
     searchDebounceMs = 200,
@@ -185,6 +194,7 @@ export function SearchSelect<T extends string = string, D = unknown>(
           autoFocus={autoFocus}
           autoCapitalize="none"
           autoCorrect={false}
+          style={styles.input}
           role="combobox"
           aria-expanded={showList}
           aria-controls={listboxId}
@@ -224,7 +234,7 @@ export function SearchSelect<T extends string = string, D = unknown>(
               // react-native-web forwards it verbatim for assistive tech.
               role={"listbox" as "list"}
             >
-              {loading && searching ? (
+              {loading ? (
                 <View style={styles.statusRow}>
                   <ActivityIndicator />
                 </View>
@@ -235,37 +245,23 @@ export function SearchSelect<T extends string = string, D = unknown>(
                   </Text>
                 </View>
               ) : (
-                list.map((opt, i) => {
-                  const isSelected = opt.value === selectedValue;
-                  return (
-                    <MenuButton
-                      key={opt.value}
-                      nativeID={optionId(i)}
-                      testID={`search-option-${opt.value}`}
-                      role="option"
-                      title={
-                        renderOptionContent ? (
-                          renderOptionContent(opt)
-                        ) : (
-                          <Text userSelect="none" numberOfLines={1}>
-                            {opt.label ?? opt.value}
-                          </Text>
-                        )
-                      }
-                      accessibilityLabel={opt.label ?? opt.value}
-                      focused={i === activeIndex}
-                      selected={isSelected}
-                      right={
-                        isSelected ? (
-                          <Icon name="check" size={18} color={colors.zinc["950"]} />
-                        ) : undefined
-                      }
-                      disabled={opt.disabled}
-                      onPress={() => handleSelect(i)}
-                      onHoverIn={() => setActiveIndex(i)}
-                    />
-                  );
-                })
+                list.map((opt, i) => (
+                  <MenuListItem
+                    key={opt.value}
+                    nativeID={optionId(i)}
+                    testID={`search-option-${opt.value}`}
+                    role="option"
+                    icon={renderOptionIcon?.(opt)}
+                    title={opt.label ?? opt.value}
+                    description={getOptionDescription?.(opt)}
+                    right={renderOptionRight?.(opt)}
+                    focused={i === activeIndex}
+                    selected={opt.value === selectedValue}
+                    disabled={opt.disabled}
+                    onPress={() => handleSelect(i)}
+                    onHoverIn={() => setActiveIndex(i)}
+                  />
+                ))
               )}
             </ScrollView>
           </View>
@@ -276,6 +272,10 @@ export function SearchSelect<T extends string = string, D = unknown>(
 }
 
 const styles = StyleSheet.create({
+  input: {
+    backgroundColor: colors.background,
+    boxShadow: colors.border_shadow,
+  },
   menu: {
     gap: 2,
   },

package/src/spreadsheet_view.tsx

@@ -0,0 +1,304 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View, StyleSheet, Pressable } from "react-native";
+import { Text } from "./text";
+import { Button } from "./button";
+import { colors } from "./colors";
+import { isExcelMimeType } from "./mime";
+import { downloadFileFromUrl } from "./download";
+import { type PreviewLabels } from "./file_preview_types";
+import type { DisplayFile } from "./file_thumbnail";
+import type { WorkbookModel } from "@lotics/xlsx/workbook_model";
+import type { RenderConfig } from "@lotics/xlsx/canvas_renderer";
+import type { MergedCellRange } from "@lotics/xlsx/types";
+import type { LayoutConfig } from "@lotics/xlsx/canvas_layout";
+
+// All of @lotics/xlsx (parser, formula engine, canvas renderer) is dynamic-
+// imported so a consumer that never opens a spreadsheet doesn't bundle the
+// engine. Only `import type` is static here. Functions are captured on mount.
+interface XlsxApi {
+  loadWorkbookFromSnapshot: typeof import("@lotics/xlsx/workbook_model").loadWorkbookFromSnapshot;
+  recomputeIfStale: typeof import("@lotics/xlsx/formula_engine").recomputeIfStale;
+  drawSpreadsheet: typeof import("@lotics/xlsx/canvas_renderer").drawSpreadsheet;
+  LayoutEngine: typeof import("@lotics/xlsx/canvas_layout").LayoutEngine;
+  rowColToRef: typeof import("@lotics/xlsx/excel_utils").rowColToRef;
+  refToRowCol: typeof import("@lotics/xlsx/excel_utils").refToRowCol;
+  parseExcelBuffer: typeof import("@lotics/xlsx/excel_parser").parseExcelBuffer;
+  parseCsvFile: typeof import("@lotics/xlsx/csv_parser").parseCsvFile;
+}
+
+async function loadXlsx(): Promise<XlsxApi> {
+  const [model, formula, renderer, layout, utils, excel, csv] = await Promise.all([
+    import("@lotics/xlsx/workbook_model"),
+    import("@lotics/xlsx/formula_engine"),
+    import("@lotics/xlsx/canvas_renderer"),
+    import("@lotics/xlsx/canvas_layout"),
+    import("@lotics/xlsx/excel_utils"),
+    import("@lotics/xlsx/excel_parser"),
+    import("@lotics/xlsx/csv_parser"),
+  ]);
+  return {
+    loadWorkbookFromSnapshot: model.loadWorkbookFromSnapshot,
+    recomputeIfStale: formula.recomputeIfStale,
+    drawSpreadsheet: renderer.drawSpreadsheet,
+    LayoutEngine: layout.LayoutEngine,
+    rowColToRef: utils.rowColToRef,
+    refToRowCol: utils.refToRowCol,
+    parseExcelBuffer: excel.parseExcelBuffer,
+    parseCsvFile: csv.parseCsvFile,
+  };
+}
+
+async function fetchArrayBuffer(url: string, signal: AbortSignal): Promise<ArrayBuffer> {
+  const response = await fetch(url, { signal });
+  if (!response.ok) throw new Error(`Spreadsheet fetch failed (${response.status})`);
+  return response.arrayBuffer();
+}
+
+interface SpreadsheetViewProps {
+  file: DisplayFile;
+  labels: PreviewLabels;
+  onError?: (error: unknown, meta: { fileId: string; mimeType: string }) => void;
+}
+
+interface ParseState {
+  loading: boolean;
+  workbook: WorkbookModel | undefined;
+  error: string | undefined;
+}
+
+/**
+ * Read-only spreadsheet preview: parses Excel/CSV into a `WorkbookModel` and
+ * paints it with the `@lotics/xlsx` canvas renderer. Virtual-scroll — a
+ * transparent scroll layer (sized to the sheet) sits over a viewport-sized
+ * canvas that redraws on scroll. No editing, ribbon, or selection.
+ */
+export function SpreadsheetView({ file, labels, onError }: SpreadsheetViewProps) {
+  const apiRef = useRef<XlsxApi | null>(null);
+  const [state, setState] = useState<ParseState>({ loading: true, workbook: undefined, error: undefined });
+  const [sheetIndex, setSheetIndex] = useState(0);
+
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const [viewport, setViewport] = useState({ w: 0, h: 0 });
+  const [scroll, setScroll] = useState({ x: 0, y: 0 });
+
+  // Parse the file into a workbook (loads the engine on first spreadsheet open).
+  useEffect(() => {
+    const controller = new AbortController();
+    setState({ loading: true, workbook: undefined, error: undefined });
+    const run = async () => {
+      const api = apiRef.current ?? (apiRef.current = await loadXlsx());
+      const parsed = isExcelMimeType(file.mimeType)
+        ? api.parseExcelBuffer(await fetchArrayBuffer(file.url, controller.signal))
+        : await api.parseCsvFile(file.url, controller.signal);
+      if (controller.signal.aborted) return;
+      const wb = api.loadWorkbookFromSnapshot(parsed);
+      api.recomputeIfStale(wb);
+      if (controller.signal.aborted) return;
+      setSheetIndex(wb.activeSheetIndex);
+      setState({ loading: false, workbook: wb, error: undefined });
+    };
+    run().catch((err: unknown) => {
+      if (controller.signal.aborted) return;
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      const passwordProtected = err instanceof Error && err.name === "PasswordProtectedError";
+      onError?.(err, { fileId: file.id, mimeType: file.mimeType });
+      setState({
+        loading: false,
+        workbook: undefined,
+        error: passwordProtected ? labels.passwordProtected : labels.loadFailed,
+      });
+    });
+    return () => controller.abort();
+  }, [file.url, file.id, file.mimeType, labels.loadFailed, labels.passwordProtected, onError]);
+
+  // Track the viewport size.
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const update = () => setViewport({ w: el.clientWidth, h: el.clientHeight });
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [state.workbook]);
+
+  // Coalesce native scroll (which fires faster than frames) into one redraw per frame.
+  const onScroll = useCallback(() => {
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      const el = scrollRef.current;
+      if (el) setScroll({ x: el.scrollLeft, y: el.scrollTop });
+    });
+  }, []);
+  useEffect(
+    () => () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    },
+    [],
+  );
+
+  const layout = useMemo(() => {
+    const api = apiRef.current;
+    const wb = state.workbook;
+    if (!api || !wb) return null;
+    const s = wb.sheets[sheetIndex];
+    if (!s) return null;
+    const used = s.getUsedRange();
+    const config: LayoutConfig = {
+      colCount: Math.max(used.maxCol + 2, 26),
+      rowCount: Math.max(used.maxRow + 5, 50),
+      colWidths: s.colWidths,
+      rowHeights: s.rowHeights,
+      defaultColWidth: s.defaultColWidth,
+      defaultRowHeight: s.defaultRowHeight,
+      hiddenCols: s.hiddenCols,
+      hiddenRows: s.hiddenRows,
+      freeze: s.freeze,
+    };
+    return new api.LayoutEngine(config);
+  }, [state.workbook, sheetIndex]);
+
+  // Redraw the visible range whenever scroll / size / sheet changes.
+  useEffect(() => {
+    const api = apiRef.current;
+    const wb = state.workbook;
+    const canvas = canvasRef.current;
+    if (!api || !wb || !layout || !canvas || viewport.w === 0 || viewport.h === 0) return;
+    const s = wb.sheets[sheetIndex];
+    if (!s) return;
+    const dpr = window.devicePixelRatio || 1;
+    // Resize only when the viewport actually changes — assigning width/height
+    // reallocates (and clears) the backing store, so doing it per scroll frame
+    // is wasteful. On scroll the size is unchanged; drawSpreadsheet clears via
+    // its own full-viewport fillRect, so a plain redraw suffices.
+    const wPx = Math.round(viewport.w * dpr);
+    const hPx = Math.round(viewport.h * dpr);
+    if (canvas.width !== wPx) canvas.width = wPx;
+    if (canvas.height !== hPx) canvas.height = hPx;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const mergedCells: MergedCellRange[] = s.mergedCells.map((ref) => {
+      const [a, b] = ref.split(":");
+      const start = api.refToRowCol(a ?? "");
+      const end = api.refToRowCol(b ?? a ?? "");
+      return {
+        startRow: start?.row ?? 1,
+        startCol: start?.col ?? 1,
+        endRow: end?.row ?? start?.row ?? 1,
+        endCol: end?.col ?? start?.col ?? 1,
+      };
+    });
+
+    const config: RenderConfig = {
+      layout,
+      scrollX: scroll.x,
+      scrollY: scroll.y,
+      viewWidth: viewport.w,
+      viewHeight: viewport.h,
+      devicePixelRatio: dpr,
+      getCell: (row, col) => {
+        const cell = s.getCell(api.rowColToRef(row, col));
+        if (!cell) return undefined;
+        return {
+          displayValue: cell.displayValue,
+          style: wb.styles.get(cell.styleIndex),
+          richText: cell.richText,
+          isHyperlink: s.hyperlinks.has(api.rowColToRef(row, col)) || undefined,
+        };
+      },
+      mergedCells,
+      freeze: s.freeze,
+      showGridLines: s.view.showGridLines,
+      images: s.images,
+      charts: s.charts,
+      drawings: s.drawings,
+      richText: (row, col) => s.getCell(api.rowColToRef(row, col))?.richText,
+    };
+    api.drawSpreadsheet(ctx, config);
+  }, [state.workbook, sheetIndex, layout, viewport, scroll]);
+
+  if (state.loading) {
+    return (
+      <View style={styles.center}>
+        <Text size="sm" color="muted">
+          …
+        </Text>
+      </View>
+    );
+  }
+  if (state.error !== undefined || !state.workbook) {
+    return (
+      <View style={styles.center}>
+        <Text size="sm" color="muted">
+          {state.error ?? labels.loadFailed}
+        </Text>
+        <View style={{ marginTop: 12 }}>
+          <Button
+            icon="download"
+            title={labels.download}
+            color="secondary"
+            onPress={() => void downloadFileFromUrl(file.url, file.filename)}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  const sheets = state.workbook.sheets;
+  const totalWidth = layout?.totalWidth ?? 0;
+  const totalHeight = layout?.totalHeight ?? 0;
+
+  return (
+    <View style={styles.container}>
+      <div style={viewportStyle} ref={viewportRef}>
+        <canvas ref={canvasRef} style={{ ...canvasStyle, width: viewport.w, height: viewport.h }} />
+        <div ref={scrollRef} onScroll={onScroll} style={scrollLayerStyle}>
+          <div style={{ width: totalWidth, height: totalHeight }} />
+        </div>
+      </div>
+      {sheets.length > 1 ? (
+        <View style={styles.tabs}>
+          {sheets.map((s, i) => (
+            <Pressable
+              key={i}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: i === sheetIndex }}
+              onPress={() => {
+                setSheetIndex(i);
+                setScroll({ x: 0, y: 0 });
+                if (scrollRef.current) scrollRef.current.scrollTo({ left: 0, top: 0 });
+              }}
+              style={[styles.tab, i === sheetIndex ? styles.tabActive : null]}
+            >
+              <Text size="xs" color={i === sheetIndex ? "default" : "muted"} numberOfLines={1}>
+                {s.name}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  center: { flex: 1, justifyContent: "center", alignItems: "center", padding: 48 },
+  tabs: {
+    flexDirection: "row",
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    backgroundColor: colors.zinc[50],
+  },
+  tab: { paddingHorizontal: 14, paddingVertical: 8, borderRightWidth: 1, borderRightColor: colors.border },
+  tabActive: { backgroundColor: colors.background },
+});
+
+const viewportStyle: React.CSSProperties = { position: "relative", flex: 1, overflow: "hidden" };
+const canvasStyle: React.CSSProperties = { position: "absolute", top: 0, left: 0 };
+const scrollLayerStyle: React.CSSProperties = { position: "absolute", inset: 0, overflow: "auto" };