@hanzo/ui 8.0.26 → 8.0.28

package/dist/framework/index.js

@@ -1,1118 +1,36 @@
-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
+'use client';// @hanzo/ui/framework — the ONE renderer for the Hanzo Framework DocType engine.
+//
+// The engine (`hanzoai/cloud clients/framework`, live at `/v1/framework/*`, also
+// published as github.com/hanzoai/framework) is metadata-driven: a CMS Page, an
+// ERP Sales Order, a Helpdesk Ticket and a CRM Company are the same kind of thing
+// — a DocType with typed fields. So they get the same renderer. An "app lane" is a
+// `module` filter over the DocType registry plus its own copy; there is no
+// per-lane list, form, detail or builder to drift.
+//
+//   import { CollectionsBrowser, DocTypeRecords, DocTypeDetail } from '@hanzo/ui/framework'
+//
+// HOST-AGNOSTIC. Nothing here picks an origin, a credential or a router: the host
+// injects a `FrameworkTransport` (→ `createFrameworkClient`), an optional
+// `MediaStore` (→ `createMediaUploader`) and plain `onOpen`/`onCreate`/`onBack`
+// callbacks. The console mounts it on its user-bearer `/v1` proxy; anything else
+// mounts it elsewhere.
+//
+// MOBILE FIRST. The phone layout is the DEFAULT, not the fallback: the first paint
+// (SSR included) is the stacked card list, and the desktop table is the
+// enhancement applied once the container measures wide enough (`responsive.ts`).
+// Every control meets the 44px tap floor at phone width.
+// The wire contract + the pure mapping. Its own entry too (`@hanzo/ui/framework/core`)
+// so a data layer can bind the engine without loading a component tree.
+export * from './core.js';
+export * from './responsive.js';
+// The views.
+export * from './CollectionsBrowser.js';
+export * from './DocTypeRecords.js';
+export * from './RecordCards.js';
+export * from './DocTypeDetail.js';
+export * from './CollectionBuilder.js';
+export * from './MediaGrid.js';
+// The shared pieces, exported so a lane can build one more surface in the same
+// idiom instead of inventing a second button.
+export { Action, Actions, ErrorBar, Loading, Meta, Panel } from './parts.js';
 //# sourceMappingURL=index.js.map