@hanzo/ui 8.0.24 → 8.0.25

package/dist/framework/index.js

@@ -0,0 +1,1119 @@
+'use client';
+import { SelectMenu } from '../chunk-5CZOYONP.js';
+import { PrimaryButton, classifyBackend, FieldSwitch, PageHeader, BackendStateCard, EmptyState } from '../chunk-GVCOAJLO.js';
+import '../chunk-FVQXROBK.js';
+import { BUILDER_FIELD_TYPES, fieldsFromDocType, starterFields, validateBuilder, blankField, moveField, toDocType, fieldNameFromLabel, fieldNeedsOptions, moduleDoctypes, mediaFileField, mediaDocPayload, titleOf, looksLikeImage, loadLinkOptions, hasProjectField, PROJECT_FIELD, enrichLinks, toRecord, docTypeToFields, makeFieldOptions, listHiddenFields, cardFields, savePayload, isMediaDoctype, newDraft, isDraft, statusField, SUBMITTED, CANCELLED } from '../chunk-P2QU5MN5.js';
+export { BUILDER_FIELD_TYPES, CANCELLED, DRAFT, PROJECT_FIELD, REDACTED_MARKER, SUBMITTED, autonameSource, blankField, cardFields, createFrameworkClient, createMediaUploader, docTypeToFields, enrichLinks, fieldNameFromLabel, fieldNeedsOptions, fieldTypeLabel, fieldsFromDocType, hasProjectField, humanize, imageDimensions, isDraft, isMediaDoctype, isRef, isValidDoctypeName, joinKey, linkFields, listHiddenFields, listQuery, listedFieldNames, loadLinkOptions, looksLikeImage, makeFieldOptions, mediaDocPayload, mediaFileField, mediaKey, mediaRef, moduleDoctypes, moveField, newDraft, newKey, parseRef, rows, savePayload, slugify, starterFields, statusField, titleOf, toDocField, toDocType, toRecord, validateBuilder } from '../chunk-P2QU5MN5.js';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { Button, XStack, Card, Text, Spinner, YStack, Input } from '@hanzo/gui';
+import { TriangleAlert, GripVertical, ArrowDown, Plus, Boxes, Image, Upload, Trash2, Search, ChevronRight, X, Save, Ban, Send, PenOff, Globe, Pencil, ArrowUp, ArrowLeft, RefreshCw } from '@hanzogui/lucide-icons-2';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { searchRecords, FieldDisplay, RecordsView, RecordForm, RecordDetail } from '@hanzo/data';
+
+var TABLE_MIN = 720;
+var GRID_MIN = 560;
+var TAP = 44;
+function layoutFor(width, tableMin = TABLE_MIN) {
+  return width > 0 && width >= tableMin ? "desktop" : "phone";
+}
+function useContainerLayout(tableMin = TABLE_MIN) {
+  const [width, setWidth] = useState(0);
+  const onLayout = useCallback((e) => {
+    const w = Math.round(e?.nativeEvent?.layout?.width ?? 0);
+    setWidth((prev) => w > 0 && w !== prev ? w : prev);
+  }, []);
+  const layout = layoutFor(width, tableMin);
+  const phone = layout === "phone";
+  return {
+    layout,
+    phone,
+    wideEnoughForGrid: width >= GRID_MIN,
+    width,
+    onLayout
+  };
+}
+function Action({ children, icon, onPress, disabled, primary, danger, phone, label }) {
+  const Cmp = primary ? PrimaryButton : Button;
+  return /* @__PURE__ */ jsx(
+    Cmp,
+    {
+      size: phone ? "$4" : "$2",
+      minH: phone ? TAP : void 0,
+      grow: phone ? 1 : 0,
+      flexBasis: phone ? 0 : "auto",
+      minW: phone ? 140 : void 0,
+      icon,
+      disabled,
+      onPress,
+      "aria-label": label,
+      ...danger ? { theme: "red" } : {},
+      children
+    }
+  );
+}
+function Actions({ children, phone }) {
+  return /* @__PURE__ */ jsx(XStack, { gap: "$2", items: "center", flexWrap: "wrap", width: phone ? "100%" : void 0, children });
+}
+function ErrorBar({ message }) {
+  return /* @__PURE__ */ jsx(Card, { borderWidth: 1, borderColor: "$red7", bg: "$red2", p: "$3", maxW: 620, children: /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "flex-start", children: [
+    /* @__PURE__ */ jsx(TriangleAlert, { size: 15 }),
+    /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$red11", flex: 1, children: message })
+  ] }) });
+}
+function Loading({ label, size = "small" }) {
+  return /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "center", gap: "$3", py: "$8", children: [
+    /* @__PURE__ */ jsx(Spinner, { size }),
+    label ? /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", children: label }) : null
+  ] });
+}
+function Meta({ children }) {
+  return /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", numberOfLines: 1, children });
+}
+var WRAP_ANYWHERE = { overflowWrap: "anywhere", wordBreak: "break-word" };
+function Panel({ children, phone }) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      p: phone ? "$3" : "$4",
+      maxW: 760,
+      width: "100%",
+      style: WRAP_ANYWHERE,
+      children: /* @__PURE__ */ jsx(YStack, { gap: "$3", children })
+    }
+  );
+}
+var TYPE_OPTIONS = BUILDER_FIELD_TYPES.map((t) => ({ key: t.type, label: t.label }));
+function CollectionBuilder({ client, module, existing, onSaved, onCancel }) {
+  const editing = Boolean(existing);
+  const [name, setName] = useState(existing?.name ?? "");
+  const [fields, setFields] = useState(
+    () => existing ? fieldsFromDocType(existing) : starterFields()
+  );
+  const [busy, setBusy] = useState(false);
+  const [saveError, setSaveError] = useState(null);
+  const [showErrors, setShowErrors] = useState(false);
+  const { phone, onLayout } = useContainerLayout();
+  const validation = useMemo(() => validateBuilder(name, fields), [name, fields]);
+  const patch = useCallback((key, next) => {
+    setFields((fs) => fs.map((f) => f.key === key ? { ...f, ...next } : f));
+  }, []);
+  const addField = useCallback(() => setFields((fs) => [...fs, blankField()]), []);
+  const removeField = useCallback((key) => setFields((fs) => fs.filter((f) => f.key !== key)), []);
+  const move = useCallback((key, dir) => setFields((fs) => moveField(fs, key, dir)), []);
+  const save = useCallback(async () => {
+    setShowErrors(true);
+    if (!validation.ok) return;
+    setBusy(true);
+    setSaveError(null);
+    try {
+      const dt = toDocType(name, module, fields);
+      if (editing) await client.doctypes.update(name, dt);
+      else await client.doctypes.create(dt);
+      onSaved(name);
+    } catch (e) {
+      setSaveError(classifyBackend(e).message);
+    } finally {
+      setBusy(false);
+    }
+  }, [client, editing, fields, module, name, onSaved, validation.ok]);
+  const iconBtn = (icon, label, onPress, disabled, danger) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: phone ? "$3" : "$1",
+      circular: true,
+      minW: phone ? TAP : void 0,
+      minH: phone ? TAP : void 0,
+      "aria-label": label,
+      icon,
+      disabled,
+      onPress,
+      ...danger ? { theme: "red" } : {}
+    }
+  );
+  return /* @__PURE__ */ jsxs(Card, { onLayout, borderWidth: 1, borderColor: "$borderColor", p: phone ? "$3" : "$4", gap: "$4", maxW: 820, width: "100%", children: [
+    /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "$5", fontWeight: "800", children: editing ? `Edit ${name}` : "New collection" }),
+      /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "A content type on the Hanzo Framework \u2014 name it and define its fields. Every field type is available; a rich-text field gives a full WYSIWYG body." })
+    ] }),
+    /* @__PURE__ */ jsxs(YStack, { gap: "$1.5", width: "100%", children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color11", textTransform: "uppercase", letterSpacing: 0.4, children: "Collection" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          width: "100%",
+          minH: phone ? TAP : void 0,
+          size: phone ? "$4" : "$3",
+          placeholder: "e.g. Recipe or LandingPage",
+          value: name,
+          onChangeText: setName,
+          disabled: busy || editing,
+          autoCapitalize: "none"
+        }
+      ),
+      editing ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color9", children: "A collection\u2019s name is its identity and can\u2019t change." }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(YStack, { gap: "$2", width: "100%", children: [
+      /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: "$3", fontWeight: "700", color: "$color11", children: "Fields" }),
+        /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color9", children: [
+          fields.length,
+          " field",
+          fields.length === 1 ? "" : "s"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(YStack, { gap: "$2", width: "100%", children: fields.map((f, i) => {
+        const err = showErrors ? validation.fieldErrors[f.key] : void 0;
+        const fname = f.label.trim() ? fieldNameFromLabel(f.label) : "";
+        return /* @__PURE__ */ jsxs(
+          YStack,
+          {
+            borderWidth: 1,
+            borderColor: err ? "$red7" : "$borderColor",
+            rounded: "$4",
+            p: "$3",
+            gap: "$2",
+            bg: "$color1",
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", width: "100%", children: [
+                phone ? null : /* @__PURE__ */ jsx(GripVertical, { size: 15, opacity: 0.5 }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    flex: 1,
+                    minW: 0,
+                    minH: phone ? TAP : void 0,
+                    size: phone ? "$4" : "$3",
+                    placeholder: "Field name (e.g. Title)",
+                    value: f.label,
+                    onChangeText: (v) => patch(f.key, { label: v }),
+                    disabled: busy,
+                    autoCapitalize: "none"
+                  }
+                ),
+                phone ? null : /* @__PURE__ */ jsx(YStack, { minW: 150, children: /* @__PURE__ */ jsx(
+                  SelectMenu,
+                  {
+                    required: true,
+                    ariaLabel: "Field type",
+                    options: TYPE_OPTIONS,
+                    value: f.type,
+                    onChange: (v) => v && patch(f.key, { type: v }),
+                    disabled: busy,
+                    minWidth: 150
+                  }
+                ) })
+              ] }),
+              phone ? /* @__PURE__ */ jsx(YStack, { width: "100%", children: /* @__PURE__ */ jsx(
+                SelectMenu,
+                {
+                  required: true,
+                  ariaLabel: "Field type",
+                  options: TYPE_OPTIONS,
+                  value: f.type,
+                  onChange: (v) => v && patch(f.key, { type: v }),
+                  disabled: busy,
+                  minWidth: 0,
+                  minHeight: TAP
+                }
+              ) }) : null,
+              /* @__PURE__ */ jsxs(XStack, { gap: "$4", items: "center", justify: "space-between", flexWrap: "wrap", width: "100%", children: [
+                /* @__PURE__ */ jsxs(XStack, { gap: "$4", items: "center", children: [
+                  /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", minH: phone ? TAP : void 0, children: [
+                    /* @__PURE__ */ jsx(FieldSwitch, { checked: f.required, onChange: (v) => patch(f.key, { required: v }), disabled: busy }),
+                    /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "Required" })
+                  ] }),
+                  /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", minH: phone ? TAP : void 0, children: [
+                    /* @__PURE__ */ jsx(FieldSwitch, { checked: f.inListView, onChange: (v) => patch(f.key, { inListView: v }), disabled: busy }),
+                    /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "In list" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(XStack, { gap: "$2", children: [
+                  iconBtn(/* @__PURE__ */ jsx(ArrowUp, { size: 14 }), "Move field up", () => move(f.key, -1), busy || i === 0),
+                  iconBtn(/* @__PURE__ */ jsx(ArrowDown, { size: 14 }), "Move field down", () => move(f.key, 1), busy || i === fields.length - 1),
+                  iconBtn(/* @__PURE__ */ jsx(Trash2, { size: 14 }), "Remove field", () => removeField(f.key), busy, true)
+                ] })
+              ] }),
+              fieldNeedsOptions(f.type) ? /* @__PURE__ */ jsxs(YStack, { gap: "$1.5", width: "100%", children: [
+                /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", textTransform: "uppercase", letterSpacing: 0.4, children: f.type === "Select" ? "Options" : f.type === "Link" ? "Relates to" : "Child type" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    width: "100%",
+                    minH: phone ? TAP : void 0,
+                    size: phone ? "$4" : "$2",
+                    placeholder: f.type === "Select" ? "One per line \u2014 Draft / Published" : "Collection name (e.g. Author)",
+                    value: f.options,
+                    onChangeText: (v) => patch(f.key, { options: v }),
+                    multiline: f.type === "Select",
+                    numberOfLines: f.type === "Select" ? 3 : 1,
+                    disabled: busy,
+                    autoCapitalize: "none"
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", flexWrap: "wrap", children: [
+                fname ? /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color8", children: [
+                  "field: ",
+                  fname
+                ] }) : /* @__PURE__ */ jsx(YStack, {}),
+                err ? /* @__PURE__ */ jsxs(XStack, { gap: "$1", items: "center", children: [
+                  /* @__PURE__ */ jsx(TriangleAlert, { size: 12 }),
+                  /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$red11", children: err })
+                ] }) : null
+              ] })
+            ]
+          },
+          f.key
+        );
+      }) }),
+      /* @__PURE__ */ jsx(XStack, { width: phone ? "100%" : void 0, children: /* @__PURE__ */ jsx(Action, { phone, icon: /* @__PURE__ */ jsx(Plus, { size: 14 }), onPress: addField, disabled: busy, children: "Add field" }) })
+    ] }),
+    showErrors && validation.formError ? /* @__PURE__ */ jsx(ErrorBar, { message: validation.formError }) : null,
+    saveError ? /* @__PURE__ */ jsx(ErrorBar, { message: saveError }) : null,
+    /* @__PURE__ */ jsxs(Actions, { phone, children: [
+      /* @__PURE__ */ jsx(Action, { phone, disabled: busy, onPress: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Action, { phone, primary: true, disabled: busy, onPress: save, children: busy ? "Saving\u2026" : editing ? "Save collection" : "Create collection" })
+    ] })
+  ] });
+}
+function CollectionsBrowser({
+  client,
+  module,
+  label,
+  subtitle,
+  onOpen,
+  setupDescription,
+  setupBullets,
+  renderBuilder,
+  icon = Boxes
+}) {
+  const [state, setState] = useState({ phase: "loading" });
+  const [busy, setBusy] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [actionError, setActionError] = useState(null);
+  const { phone, onLayout } = useContainerLayout();
+  const load = useCallback(
+    async (signal) => {
+      setState({ phase: "loading" });
+      try {
+        const [dts, mod] = await Promise.all([
+          client.doctypes.list(),
+          client.modules.get(module).catch(() => null)
+          // lane may not be registered on an older engine
+        ]);
+        if (signal.cancelled) return;
+        setState({
+          phase: "ready",
+          collections: moduleDoctypes(dts, module),
+          registered: Boolean(mod && mod.doctypes.length)
+        });
+      } catch (e) {
+        if (!signal.cancelled) setState({ phase: "error", error: classifyBackend(e) });
+      }
+    },
+    [client, module]
+  );
+  useEffect(() => {
+    const signal = { cancelled: false };
+    void load(signal);
+    return () => {
+      signal.cancelled = true;
+    };
+  }, [load]);
+  const reload = useCallback(() => void load({ cancelled: false }), [load]);
+  const install = useCallback(async () => {
+    setBusy(true);
+    setActionError(null);
+    try {
+      await client.modules.install(module);
+      reload();
+    } catch (e) {
+      setActionError(classifyBackend(e).message);
+    } finally {
+      setBusy(false);
+    }
+  }, [client, module, reload]);
+  if (state.phase === "loading") {
+    return /* @__PURE__ */ jsx(YStack, { onLayout, width: "100%", children: /* @__PURE__ */ jsx(Loading, { label: `Loading ${label}\u2026` }) });
+  }
+  if (state.phase === "error") {
+    return /* @__PURE__ */ jsxs(YStack, { onLayout, gap: "$3", width: "100%", children: [
+      /* @__PURE__ */ jsx(PageHeader, { title: label, subtitle }),
+      /* @__PURE__ */ jsx(BackendStateCard, { state: state.error, onRetry: reload, hint: "framework \xB7 GET /v1/framework/doctypes" })
+    ] });
+  }
+  const { collections } = state;
+  return /* @__PURE__ */ jsxs(YStack, { onLayout, gap: "$3", width: "100%", children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: label,
+        subtitle,
+        actions: collections.length && !creating ? /* @__PURE__ */ jsx(
+          Action,
+          {
+            phone,
+            primary: true,
+            icon: /* @__PURE__ */ jsx(Plus, { size: 15 }),
+            onPress: () => {
+              setCreating(true);
+              setActionError(null);
+            },
+            children: "New collection"
+          }
+        ) : void 0
+      }
+    ),
+    actionError ? /* @__PURE__ */ jsx(ErrorBar, { message: actionError }) : null,
+    creating ? (renderBuilder ?? ((p) => /* @__PURE__ */ jsx(CollectionBuilder, { client, module, ...p })))({
+      onSaved: (name) => {
+        setCreating(false);
+        onOpen(name);
+      },
+      onCancel: () => setCreating(false)
+    }) : null,
+    collections.length === 0 && !creating ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon,
+        title: `Set up ${label}`,
+        description: setupDescription ?? `${label} is a set of collections on the Hanzo Framework \u2014 typed documents, per organization.`,
+        bullets: setupBullets ?? [
+          `Installs the default ${label} collections into your organization`,
+          "Every record is a document on the framework \u2014 versioned, permissioned, per-org",
+          "Add your own collections and fields any time"
+        ],
+        primary: state.registered ? { label: busy ? "Setting up\u2026" : `Set up ${label}`, onPress: install } : void 0,
+        secondary: { label: "New collection", onPress: () => setCreating(true) }
+      }
+    ) : !creating ? (
+      // A fixed 240px card is a 240px column on a 390px phone with dead space
+      // beside it. `flexBasis` + `flexGrow` makes each card fill the row on a
+      // phone and settle back to a 240px tile once the box can hold several.
+      /* @__PURE__ */ jsx(XStack, { gap: "$3", flexWrap: "wrap", width: "100%", children: collections.map((dt) => /* @__PURE__ */ jsxs(
+        YStack,
+        {
+          onPress: () => onOpen(dt.name),
+          hoverStyle: { borderColor: "$color8" },
+          pressStyle: { bg: "$color3" },
+          cursor: "pointer",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          rounded: "$4",
+          p: "$4",
+          gap: "$2",
+          minH: 88,
+          grow: phone ? 1 : 0,
+          flexBasis: phone ? "100%" : 240,
+          maxW: phone ? void 0 : 240,
+          children: [
+            /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", children: [
+              /* @__PURE__ */ jsx(Boxes, { size: 16 }),
+              /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "700", flex: 1, minW: 0, numberOfLines: 1, children: dt.name })
+            ] }),
+            /* @__PURE__ */ jsxs(Meta, { children: [
+              dt.fields?.length ?? 0,
+              " field",
+              (dt.fields?.length ?? 0) === 1 ? "" : "s",
+              dt.isSubmittable ? " \xB7 submittable" : ""
+            ] })
+          ]
+        },
+        dt.name
+      )) })
+    ) : null
+  ] });
+}
+function MediaGrid({
+  client,
+  dt,
+  docs,
+  media,
+  onOpen,
+  onChanged,
+  toolbarExtra,
+  accept = "image/*,application/pdf,video/*,audio/*"
+}) {
+  const fileField = mediaFileField(dt);
+  const inputRef = useRef(null);
+  const [busy, setBusy] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const [error, setError] = useState(null);
+  const { phone, onLayout } = useContainerLayout();
+  const upload = useCallback(
+    async (files) => {
+      const list = Array.from(files);
+      if (list.length === 0) return;
+      setBusy(true);
+      setError(null);
+      setProgress({ done: 0, total: list.length });
+      try {
+        for (let i = 0; i < list.length; i += 1) {
+          const facts = await media.upload(list[i]);
+          await client.records.create(dt.name, mediaDocPayload(dt, facts));
+          setProgress({ done: i + 1, total: list.length });
+        }
+        onChanged();
+      } catch (e) {
+        setError(classifyBackend(e).message);
+      } finally {
+        setBusy(false);
+        setProgress(null);
+      }
+    },
+    [client, dt, media, onChanged]
+  );
+  const pick = () => inputRef.current?.click();
+  const onInput = (e) => {
+    if (e.target.files) void upload(e.target.files);
+    e.target.value = "";
+  };
+  const HiddenInput = /* @__PURE__ */ jsx("input", { ref: inputRef, type: "file", multiple: true, accept, style: { display: "none" }, onChange: onInput });
+  const uploadLabel = busy ? progress ? `Uploading ${progress.done}/${progress.total}\u2026` : "Uploading\u2026" : "Upload";
+  if (docs.length === 0) {
+    return /* @__PURE__ */ jsxs(YStack, { onLayout, gap: "$3", width: "100%", children: [
+      HiddenInput,
+      toolbarExtra ? /* @__PURE__ */ jsx(XStack, { justify: phone ? "flex-start" : "flex-end", gap: "$2", width: "100%", children: toolbarExtra }) : null,
+      error ? /* @__PURE__ */ jsx(ErrorBar, { message: error }) : null,
+      /* @__PURE__ */ jsx(DropZone, { busy, onDrop: upload, children: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: Image,
+          title: "No media yet",
+          description: "Drag files here, or upload \u2014 images and files go to your organization's object storage and become reusable media you can attach to any record.",
+          primary: { label: uploadLabel, onPress: pick }
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(YStack, { onLayout, gap: "$3", width: "100%", children: [
+    HiddenInput,
+    /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", justify: phone ? "flex-start" : "flex-end", width: "100%", children: [
+      toolbarExtra,
+      /* @__PURE__ */ jsx(Action, { phone, primary: true, icon: /* @__PURE__ */ jsx(Upload, { size: 15 }), disabled: busy, onPress: pick, children: uploadLabel })
+    ] }),
+    error ? /* @__PURE__ */ jsx(ErrorBar, { message: error }) : null,
+    /* @__PURE__ */ jsx(DropZone, { busy, onDrop: upload, children: /* @__PURE__ */ jsx(XStack, { gap: "$3", flexWrap: "wrap", width: "100%", children: docs.map((d) => /* @__PURE__ */ jsx(
+      MediaCard,
+      {
+        doc: d,
+        dt,
+        fileField,
+        media,
+        phone,
+        onOpen: () => onOpen(String(d.name)),
+        onDelete: async () => {
+          setBusy(true);
+          setError(null);
+          try {
+            await media.remove(d[fileField]);
+            await client.records.remove(dt.name, String(d.name));
+            onChanged();
+          } catch (e) {
+            setError(classifyBackend(e).message);
+          } finally {
+            setBusy(false);
+          }
+        },
+        disabled: busy
+      },
+      String(d.name)
+    )) }) })
+  ] });
+}
+function MediaCard({
+  doc,
+  dt,
+  fileField,
+  media,
+  phone,
+  onOpen,
+  onDelete,
+  disabled
+}) {
+  const [url, setUrl] = useState("");
+  const [confirming, setConfirming] = useState(false);
+  const raw = String(doc[fileField] ?? "");
+  const title = titleOf(doc, dt);
+  useEffect(() => {
+    let cancelled = false;
+    void media.resolveUrl(raw).then((u) => {
+      if (!cancelled) setUrl(u);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [raw, media]);
+  return /* @__PURE__ */ jsxs(
+    YStack,
+    {
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      rounded: "$4",
+      grow: 0,
+      flexBasis: phone ? "47%" : 200,
+      maxW: phone ? void 0 : 200,
+      minW: 140,
+      overflow: "hidden",
+      hoverStyle: { borderColor: "$color8" },
+      children: [
+        /* @__PURE__ */ jsx(
+          YStack,
+          {
+            height: phone ? 110 : 130,
+            bg: "$color3",
+            items: "center",
+            justify: "center",
+            overflow: "hidden",
+            cursor: "pointer",
+            pressStyle: { opacity: 0.8 },
+            onPress: onOpen,
+            children: url && (looksLikeImage(raw) || looksLikeImage(url)) ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx("img", { src: url, alt: String(doc.alt ?? title), style: { width: "100%", height: "100%", objectFit: "cover" } })
+            ) : /* @__PURE__ */ jsx(Image, { size: 28 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(YStack, { p: "$3", gap: "$1", children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "$3", fontWeight: "700", numberOfLines: 1, children: title }),
+          /* @__PURE__ */ jsxs(XStack, { justify: "space-between", items: "center", gap: "$2", children: [
+            /* @__PURE__ */ jsx(Meta, { children: String(doc.mime ?? "file") }),
+            confirming ? /* @__PURE__ */ jsxs(XStack, { gap: "$1", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: phone ? "$3" : "$1",
+                  minH: phone ? TAP : void 0,
+                  theme: "red",
+                  disabled,
+                  onPress: () => {
+                    setConfirming(false);
+                    void onDelete();
+                  },
+                  children: "Delete"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { size: phone ? "$3" : "$1", minH: phone ? TAP : void 0, disabled, onPress: () => setConfirming(false), children: "No" })
+            ] }) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: phone ? "$3" : "$1",
+                circular: true,
+                chromeless: true,
+                minW: phone ? TAP : void 0,
+                minH: phone ? TAP : void 0,
+                "aria-label": `Delete ${title}`,
+                icon: /* @__PURE__ */ jsx(Trash2, { size: phone ? 16 : 13 }),
+                disabled,
+                onPress: () => setConfirming(true)
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function DropZone({
+  children,
+  busy,
+  onDrop
+}) {
+  const [over, setOver] = useState(false);
+  return /* @__PURE__ */ jsx(
+    YStack,
+    {
+      width: "100%",
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!busy) setOver(true);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setOver(false);
+        if (!busy && e.dataTransfer?.files?.length) void onDrop(e.dataTransfer.files);
+      },
+      rounded: "$4",
+      p: over ? "$3" : 0,
+      borderWidth: over ? 2 : 0,
+      borderColor: "$color8",
+      style: { borderStyle: "dashed" },
+      children
+    }
+  );
+}
+function headline(record, titleField) {
+  const t = titleField ? record[titleField] : void 0;
+  if (typeof t === "string" && t.trim()) return t;
+  if (typeof t === "number") return String(t);
+  const name = record.name ?? record.id;
+  return typeof name === "string" && name ? name : "Untitled";
+}
+function RecordCards({
+  titleField,
+  fields,
+  cardFields: cardFields2,
+  records,
+  loading,
+  empty,
+  onOpen,
+  onCreate,
+  createLabel = "New record",
+  toolbarExtra
+}) {
+  const [query, setQuery] = useState("");
+  const visible = useMemo(() => searchRecords(records, query, fields), [records, query, fields]);
+  return /* @__PURE__ */ jsxs(YStack, { testID: "doctype-cards", gap: "$3", width: "100%", children: [
+    /* @__PURE__ */ jsxs(YStack, { gap: "$2", width: "100%", children: [
+      /* @__PURE__ */ jsxs(
+        XStack,
+        {
+          items: "center",
+          gap: "$2",
+          px: "$3",
+          minH: 44,
+          rounded: "$3",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsx(Search, { size: 15, opacity: 0.6 }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                unstyled: true,
+                flex: 1,
+                minW: 0,
+                height: 42,
+                fontSize: "$3",
+                color: "$color12",
+                placeholder: "Search",
+                value: query,
+                onChangeText: setQuery,
+                autoCapitalize: "none"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", width: "100%", children: [
+        onCreate ? /* @__PURE__ */ jsx(Action, { phone: true, primary: true, onPress: onCreate, children: createLabel }) : null,
+        toolbarExtra
+      ] })
+    ] }),
+    loading ? /* @__PURE__ */ jsx(Loading, { label: "Loading records\u2026" }) : null,
+    !loading && visible.length === 0 ? /* @__PURE__ */ jsx(Card, { borderWidth: 1, borderColor: "$borderColor", p: "$4", width: "100%", children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color10", children: query ? `No records match \u201C${query}\u201D.` : empty ?? "No records yet." }) }) : null,
+    /* @__PURE__ */ jsx(YStack, { gap: "$2", width: "100%", children: visible.map((rec, i) => {
+      const key = String(rec.name ?? rec.id ?? i);
+      return /* @__PURE__ */ jsx(
+        Card,
+        {
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          rounded: "$3",
+          p: "$3",
+          width: "100%",
+          cursor: onOpen ? "pointer" : void 0,
+          pressStyle: onOpen ? { bg: "$color3" } : void 0,
+          hoverStyle: onOpen ? { borderColor: "$color8" } : void 0,
+          onPress: onOpen ? () => onOpen(rec) : void 0,
+          style: WRAP_ANYWHERE,
+          children: /* @__PURE__ */ jsxs(YStack, { gap: "$2", width: "100%", children: [
+            /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", width: "100%", children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "700", flex: 1, minW: 0, numberOfLines: 2, children: headline(rec, titleField) }),
+              onOpen ? /* @__PURE__ */ jsx(ChevronRight, { size: 16, opacity: 0.5 }) : null
+            ] }),
+            cardFields2.map((f) => (
+              // Label above value: a two-column row forces the value into a
+              // sliver at 390px. Stacked, every field type gets the full width.
+              /* @__PURE__ */ jsxs(YStack, { gap: "$0.5", width: "100%", children: [
+                /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", textTransform: "uppercase", letterSpacing: 0.4, children: f.label }),
+                /* @__PURE__ */ jsx(XStack, { width: "100%", flexWrap: "wrap", children: /* @__PURE__ */ jsx(FieldDisplay, { field: f, value: rec[f.name] }) })
+              ] }, f.name)
+            ))
+          ] })
+        },
+        key
+      );
+    }) }),
+    visible.length ? /* @__PURE__ */ jsxs(Meta, { children: [
+      visible.length,
+      " of ",
+      records.length,
+      " record",
+      records.length === 1 ? "" : "s"
+    ] }) : null
+  ] });
+}
+function DocTypeRecords({
+  client,
+  doctype,
+  onOpen,
+  onCreate,
+  project,
+  title,
+  media,
+  renderMedia,
+  limit = 200
+}) {
+  const [state, setState] = useState({ phase: "loading" });
+  const [mutationError, setMutationError] = useState(null);
+  const { phone, onLayout } = useContainerLayout();
+  const load = useCallback(
+    async (signal) => {
+      setState({ phase: "loading" });
+      try {
+        const dt = await client.doctypes.get(doctype);
+        const linkOptions = await loadLinkOptions(client, dt);
+        const filters = project && hasProjectField(dt) ? { [PROJECT_FIELD]: project } : void 0;
+        const docs = await client.records.list(doctype, { limit, ...filters ? { filters } : {} });
+        if (signal.cancelled) return;
+        const records = docs.map((d) => enrichLinks(toRecord(d, dt), dt, linkOptions));
+        setState({ phase: "ready", dt, fields: docTypeToFields(dt), docs, records, linkOptions });
+      } catch (e) {
+        if (!signal.cancelled) setState({ phase: "error", error: classifyBackend(e) });
+      }
+    },
+    [client, doctype, project, limit]
+  );
+  useEffect(() => {
+    const signal = { cancelled: false };
+    void load(signal);
+    return () => {
+      signal.cancelled = true;
+    };
+  }, [load]);
+  const reload = useCallback(() => void load({ cancelled: false }), [load]);
+  const ready = state.phase === "ready" ? state : void 0;
+  const fieldOptions = useMemo(
+    () => ready ? makeFieldOptions(ready.linkOptions) : void 0,
+    [ready]
+  );
+  const [view, setView] = useState(void 0);
+  const dtName = ready?.dt.name;
+  useEffect(() => {
+    if (!ready) return;
+    setView({
+      id: `doctype:${ready.dt.name}`,
+      name: ready.dt.name,
+      kind: "table",
+      filters: [],
+      sorts: [],
+      hiddenFields: listHiddenFields(ready.dt)
+    });
+  }, [dtName]);
+  const cards = useMemo(
+    () => ready ? cardFields(ready.dt, ready.fields) : [],
+    [ready]
+  );
+  const onEditCommit = useCallback(
+    async (record, field, value) => {
+      if (state.phase !== "ready") return;
+      const name = typeof record.name === "string" ? record.name : "";
+      if (!name) return;
+      setMutationError(null);
+      try {
+        const body = savePayload({ ...record, [field.name]: value }, state.dt);
+        const saved = await client.records.update(doctype, name, body);
+        const next = enrichLinks(toRecord(saved, state.dt), state.dt, state.linkOptions);
+        setState((s) => s.phase === "ready" ? { ...s, records: s.records.map((r) => r.name === name ? next : r) } : s);
+      } catch (e) {
+        setMutationError(classifyBackend(e).message);
+        throw e;
+      }
+    },
+    [client, doctype, state]
+  );
+  if (state.phase === "error") {
+    return /* @__PURE__ */ jsx(YStack, { onLayout, width: "100%", children: /* @__PURE__ */ jsx(BackendStateCard, { state: state.error, onRetry: reload, hint: `framework \xB7 GET /v1/framework/${doctype}` }) });
+  }
+  const refresh = phone ? /* @__PURE__ */ jsx(Action, { phone: true, icon: /* @__PURE__ */ jsx(RefreshCw, { size: 15 }), onPress: reload, children: "Refresh" }) : /* @__PURE__ */ jsx(Button, { size: "$2", minH: TAP - 12, icon: /* @__PURE__ */ jsx(RefreshCw, { size: 15 }), onPress: reload, children: "Refresh" });
+  if (ready && (media || renderMedia) && isMediaDoctype(ready.dt)) {
+    return /* @__PURE__ */ jsx(YStack, { onLayout, width: "100%", children: renderMedia ? renderMedia({ dt: ready.dt, docs: ready.docs, onOpen, onChanged: reload, toolbarExtra: refresh }) : /* @__PURE__ */ jsx(
+      MediaGrid,
+      {
+        client,
+        dt: ready.dt,
+        docs: ready.docs,
+        media,
+        onOpen,
+        onChanged: reload,
+        toolbarExtra: refresh
+      }
+    ) });
+  }
+  const openByKey = (r) => onOpen(String(r.name ?? r.id ?? ""));
+  return /* @__PURE__ */ jsxs(YStack, { onLayout, gap: "$3", width: "100%", children: [
+    mutationError ? /* @__PURE__ */ jsx(ErrorBar, { message: mutationError }) : null,
+    phone ? /* @__PURE__ */ jsx(
+      RecordCards,
+      {
+        titleField: ready?.dt.titleField,
+        fields: ready?.fields ?? [],
+        cardFields: cards,
+        records: ready?.records ?? [],
+        loading: state.phase === "loading",
+        empty: `No records in ${doctype} yet.`,
+        onOpen: openByKey,
+        onCreate,
+        toolbarExtra: refresh
+      }
+    ) : /* @__PURE__ */ jsx(YStack, { testID: "doctype-table", width: "100%", children: /* @__PURE__ */ jsx(
+      RecordsView,
+      {
+        title,
+        fields: ready?.fields ?? [],
+        records: ready?.records ?? [],
+        loading: state.phase === "loading",
+        view,
+        onViewChange: setView,
+        onOpen: openByKey,
+        onCreate,
+        createLabel: "New record",
+        onEditCommit,
+        fieldOptions,
+        toolbarExtra: refresh,
+        titleField: ready?.dt.titleField,
+        empty: `No records in ${doctype} yet.`
+      }
+    ) })
+  ] });
+}
+function DocTypeDetail({ client, doctype, name, project, onBack, onView }) {
+  const isNew = name === "new";
+  const [state, setState] = useState({ phase: "loading" });
+  const [editing, setEditing] = useState(isNew);
+  const [draft, setDraft] = useState({});
+  const [busy, setBusy] = useState(false);
+  const [saveError, setSaveError] = useState(null);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+  const { phone, onLayout } = useContainerLayout();
+  const load = useCallback(
+    async (signal) => {
+      setState({ phase: "loading" });
+      try {
+        const dt2 = await client.doctypes.get(doctype);
+        const linkOptions = await loadLinkOptions(client, dt2);
+        const doc = isNew ? null : await client.records.get(doctype, name);
+        if (signal.cancelled) return;
+        const record2 = doc ? enrichLinks(toRecord(doc, dt2), dt2, linkOptions) : null;
+        setState({ phase: "ready", dt: dt2, record: record2, linkOptions });
+        const seed = newDraft(dt2);
+        if (record2 == null && project && hasProjectField(dt2)) seed[PROJECT_FIELD] = project;
+        setDraft(record2 ? { ...record2 } : seed);
+        setEditing(isNew);
+        setSaveError(null);
+        setConfirmingDelete(false);
+      } catch (e) {
+        if (!signal.cancelled) setState({ phase: "error", error: classifyBackend(e) });
+      }
+    },
+    [client, doctype, name, isNew, project]
+  );
+  useEffect(() => {
+    const signal = { cancelled: false };
+    void load(signal);
+    return () => {
+      signal.cancelled = true;
+    };
+  }, [load]);
+  const reload = useCallback(() => void load({ cancelled: false }), [load]);
+  const ready = state.phase === "ready" ? state : void 0;
+  const dt = ready?.dt;
+  const record = ready?.record ?? null;
+  const fields = useMemo(() => dt ? docTypeToFields(dt, { editing: !isNew }) : [], [dt, isNew]);
+  const fieldOptions = useMemo(() => ready ? makeFieldOptions(ready.linkOptions) : void 0, [ready]);
+  const title = dt ? isNew ? `New ${doctype}` : titleOf(record ?? {}, dt) : doctype;
+  const onChange = useCallback((field, value) => {
+    setDraft((d) => ({ ...d, [field]: value }));
+  }, []);
+  const reflect = useCallback(
+    (saved) => {
+      if (!dt || !ready) return;
+      const next = enrichLinks(toRecord(saved, dt), dt, ready.linkOptions);
+      setState({ phase: "ready", dt, record: next, linkOptions: ready.linkOptions });
+      setDraft({ ...next });
+    },
+    [dt, ready]
+  );
+  const save = useCallback(async () => {
+    if (!dt) return;
+    setBusy(true);
+    setSaveError(null);
+    try {
+      const body = savePayload(draft, dt);
+      if (isNew) {
+        const created = await client.records.create(doctype, body);
+        if (created.name) onView(String(created.name));
+        else onBack();
+        return;
+      }
+      if (!record?.name) throw new Error("This record has no name to update.");
+      reflect(await client.records.update(doctype, String(record.name), body));
+      setEditing(false);
+    } catch (e) {
+      setSaveError(classifyBackend(e).message);
+    } finally {
+      setBusy(false);
+    }
+  }, [client, doctype, draft, dt, isNew, onBack, onView, record, reflect]);
+  const run = useCallback(
+    async (op) => {
+      setBusy(true);
+      setSaveError(null);
+      try {
+        const saved = await op();
+        if (saved) reflect(saved);
+      } catch (e) {
+        setSaveError(classifyBackend(e).message);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [reflect]
+  );
+  const remove = useCallback(async () => {
+    if (!record?.name) return;
+    setBusy(true);
+    setSaveError(null);
+    try {
+      await client.records.remove(doctype, String(record.name));
+      onBack();
+    } catch (e) {
+      setSaveError(classifyBackend(e).message);
+      setBusy(false);
+      setConfirmingDelete(false);
+    }
+  }, [client, doctype, onBack, record]);
+  const backButton = /* @__PURE__ */ jsx(Action, { phone, icon: /* @__PURE__ */ jsx(ArrowLeft, { size: 15 }), onPress: onBack, children: "Back" });
+  if (state.phase === "loading") {
+    return /* @__PURE__ */ jsx(YStack, { onLayout, width: "100%", children: /* @__PURE__ */ jsx(Loading, { label: `Loading ${doctype}\u2026` }) });
+  }
+  if (state.phase === "error") {
+    return /* @__PURE__ */ jsxs(YStack, { onLayout, gap: "$3", width: "100%", children: [
+      /* @__PURE__ */ jsx(XStack, { children: backButton }),
+      /* @__PURE__ */ jsx(BackendStateCard, { state: state.error, onRetry: reload, hint: `framework \xB7 ${doctype}/${name}` })
+    ] });
+  }
+  if (!dt) {
+    return /* @__PURE__ */ jsx(YStack, { onLayout, gap: "$3", width: "100%", children: /* @__PURE__ */ jsx(XStack, { children: backButton }) });
+  }
+  const draftDoc = isDraft(record);
+  const statusF = statusField(dt);
+  const status = record ? String(record[statusF] ?? "") : "";
+  const docstatus = record ? Number(record.docstatus ?? 0) : 0;
+  const canEdit = !editing && !isNew && draftDoc;
+  const canDelete = !editing && !isNew && draftDoc;
+  const canPublish = canEdit && Boolean(statusF);
+  const canSubmit = !editing && !isNew && Boolean(dt.isSubmittable) && draftDoc;
+  const canCancel = !editing && !isNew && Boolean(dt.isSubmittable) && docstatus === SUBMITTED;
+  const lifecycle = docstatus === SUBMITTED ? " \xB7 submitted" : docstatus === CANCELLED ? " \xB7 cancelled" : "";
+  return /* @__PURE__ */ jsxs(YStack, { onLayout, gap: "$3", width: "100%", children: [
+    /* @__PURE__ */ jsxs(YStack, { gap: "$3", width: "100%", children: [
+      /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$3", width: "100%", flexWrap: "wrap", children: [
+        phone ? null : backButton,
+        /* @__PURE__ */ jsxs(YStack, { flex: 1, minW: 200, children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "$6", fontWeight: "800", numberOfLines: 2, children: title }),
+          /* @__PURE__ */ jsxs(Text, { fontSize: "$2", color: "$color10", numberOfLines: 1, children: [
+            doctype,
+            status ? ` \xB7 ${status}` : "",
+            lifecycle
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Actions, { phone, children: [
+        phone ? backButton : null,
+        editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          !isNew ? /* @__PURE__ */ jsx(
+            Action,
+            {
+              phone,
+              icon: /* @__PURE__ */ jsx(X, { size: 15 }),
+              disabled: busy,
+              onPress: () => {
+                setDraft(record ? { ...record } : {});
+                setEditing(false);
+                setSaveError(null);
+              },
+              children: "Cancel"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Action, { phone, primary: true, icon: /* @__PURE__ */ jsx(Save, { size: 15 }), disabled: busy, onPress: save, children: busy ? "Saving\u2026" : isNew ? "Create" : "Save" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          canDelete ? /* @__PURE__ */ jsx(Action, { phone, danger: true, icon: /* @__PURE__ */ jsx(Trash2, { size: 15 }), disabled: busy, onPress: () => setConfirmingDelete(true), children: "Delete" }) : null,
+          canCancel ? /* @__PURE__ */ jsx(
+            Action,
+            {
+              phone,
+              icon: /* @__PURE__ */ jsx(Ban, { size: 15 }),
+              disabled: busy,
+              onPress: () => run(() => client.records.cancel(doctype, String(record.name))),
+              children: "Cancel doc"
+            }
+          ) : null,
+          canSubmit ? /* @__PURE__ */ jsx(
+            Action,
+            {
+              phone,
+              icon: /* @__PURE__ */ jsx(Send, { size: 15 }),
+              disabled: busy,
+              onPress: () => run(() => client.records.submit(doctype, String(record.name))),
+              children: "Submit"
+            }
+          ) : null,
+          canPublish ? status === "Published" ? /* @__PURE__ */ jsx(
+            Action,
+            {
+              phone,
+              icon: /* @__PURE__ */ jsx(PenOff, { size: 15 }),
+              disabled: busy,
+              onPress: () => run(
+                async () => client.records.update(doctype, String(record.name), savePayload({ ...record, [statusF]: "Draft" }, dt))
+              ),
+              children: "Unpublish"
+            }
+          ) : /* @__PURE__ */ jsx(
+            Action,
+            {
+              phone,
+              primary: true,
+              icon: /* @__PURE__ */ jsx(Globe, { size: 15 }),
+              disabled: busy,
+              onPress: () => run(
+                async () => client.records.update(
+                  doctype,
+                  String(record.name),
+                  savePayload({ ...record, [statusF]: "Published" }, dt)
+                )
+              ),
+              children: "Publish"
+            }
+          ) : null,
+          canEdit ? /* @__PURE__ */ jsx(Action, { phone, primary: true, icon: /* @__PURE__ */ jsx(Pencil, { size: 15 }), onPress: () => setEditing(true), children: "Edit" }) : null
+        ] })
+      ] })
+    ] }),
+    !editing && !isNew && !draftDoc ? /* @__PURE__ */ jsx(Card, { borderWidth: 1, borderColor: "$borderColor", bg: "$color2", p: "$3", maxW: 620, children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: docstatus === SUBMITTED ? "This document is submitted. Cancel it to make further changes \u2014 the engine refuses edits and deletes on a submitted document." : "This document is cancelled. It is kept as a record and can no longer be edited or deleted." }) }) : null,
+    confirmingDelete ? /* @__PURE__ */ jsxs(Card, { borderWidth: 1, borderColor: "$red7", bg: "$red2", p: "$3", gap: "$3", maxW: 620, children: [
+      /* @__PURE__ */ jsxs(Text, { fontSize: "$3", fontWeight: "700", children: [
+        "Delete \u201C",
+        title,
+        "\u201D? This cannot be undone."
+      ] }),
+      /* @__PURE__ */ jsxs(Actions, { phone, children: [
+        /* @__PURE__ */ jsx(Action, { phone, danger: true, disabled: busy, onPress: remove, children: busy ? "Deleting\u2026" : "Confirm delete" }),
+        /* @__PURE__ */ jsx(Action, { phone, disabled: busy, onPress: () => setConfirmingDelete(false), children: "Keep" })
+      ] })
+    ] }) : null,
+    saveError ? /* @__PURE__ */ jsx(ErrorBar, { message: saveError }) : null,
+    /* @__PURE__ */ jsx(Panel, { phone, children: editing ? /* @__PURE__ */ jsx(RecordForm, { fields, values: draft, onChange, fieldOptions }) : record ? /* @__PURE__ */ jsx(RecordDetail, { title, fields, record, fieldOptions }) : null })
+  ] });
+}
+
+export { Action, Actions, CollectionBuilder, CollectionsBrowser, DocTypeDetail, DocTypeRecords, ErrorBar, GRID_MIN, Loading, MediaGrid, Meta, Panel, RecordCards, TABLE_MIN, TAP, layoutFor, useContainerLayout };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map