@multiplatform.one/frappe-ui 7.23.2 → 7.24.0

package/dist/cjs/record/RecordHero.native.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var RecordHero_exports = {};
+__export(RecordHero_exports, {
+  RecordBreadcrumbBone: () => RecordBreadcrumbBone,
+  RecordHeroArtColumn: () => RecordHeroArtColumn,
+  RecordHeroFrame: () => RecordHeroFrame,
+  RecordHeroIdentityColumn: () => RecordHeroIdentityColumn,
+  RecordHeroRow: () => RecordHeroRow,
+  RecordSkeleton: () => RecordSkeleton,
+  RecordVitals: () => RecordVitals,
+  recordHeroArtBasis: () => recordHeroArtBasis,
+  recordHeroArtMax: () => recordHeroArtMax,
+  recordHeroIdentityBasis: () => recordHeroIdentityBasis
+});
+module.exports = __toCommonJS(RecordHero_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react_i18next = require("react-i18next");
+var recordHeroArtBasis = 380;
+var recordHeroArtMax = 480;
+var recordHeroIdentityBasis = 320;
+function RecordHeroFrame(param) {
+  var {
+    tint,
+    children,
+    ...rest
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    ...knobProps.borderRadius,
+    ...knobProps.panelPadding,
+    backgroundColor: tint ? `$${tint}2` : "$color3",
+    width: "100%",
+    ...rest,
+    children
+  });
+}
+function RecordHeroRow(param) {
+  var {
+    children
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    ...knobProps.gapLg,
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    children
+  });
+}
+function RecordHeroArtColumn(param) {
+  var {
+    children,
+    ...rest
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    flexGrow: 1,
+    flexBasis: recordHeroArtBasis,
+    maxWidth: recordHeroArtMax,
+    minWidth: 0,
+    ...knobProps.gap,
+    ...rest,
+    children
+  });
+}
+function RecordHeroIdentityColumn(param) {
+  var {
+    children,
+    ...rest
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    flexGrow: 999,
+    flexBasis: recordHeroIdentityBasis,
+    minWidth: 0,
+    ...knobProps.gap,
+    ...rest,
+    children
+  });
+}
+function RecordVitals(param) {
+  var {
+    tiles
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  if (tiles.length === 0) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    ...knobProps.gap,
+    flexWrap: "wrap",
+    children: tiles.map(function (tile) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.borderRadius,
+        ...knobProps.panelPadding,
+        backgroundColor: "$color2",
+        borderWidth: 0,
+        flexGrow: 1,
+        flexBasis: 140,
+        gap: "$1",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          ...knobProps.label,
+          ...knobProps.body,
+          color: "$color10",
+          children: tile.label
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$5",
+          fontWeight: "700",
+          children: tile.value
+        }), tile.percent === void 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Progress, {
+          value: tile.percent,
+          max: 100,
+          size: "$2",
+          intent: "accent",
+          progressProps: {
+            "aria-label": tile.label
+          }
+        })]
+      }, tile.id);
+    })
+  });
+}
+var bone = function bone2(px) {
+  return (0, import_theme.sizeRecipeEscape)(px, "loading bones sized to the record page they stand in for");
+};
+function RecordBreadcrumbBone() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    alignItems: "center",
+    minHeight: bone(20),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+      width: bone(180),
+      height: bone(14)
+    })
+  });
+}
+function RecordSkeleton(param) {
+  var {
+    testID
+  } = param;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gapLg,
+    testID,
+    "data-async-skeleton": "record",
+    "aria-busy": true,
+    "aria-label": t("Loading"),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RecordHeroFrame, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(RecordHeroRow, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RecordHeroArtColumn, {
+          "data-skeleton-part": "art",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+            variant: "rounded",
+            width: "100%",
+            aspectRatio: 1
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(RecordHeroIdentityColumn, {
+          "data-skeleton-part": "identity",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+            width: bone(72),
+            height: bone(16)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+            width: bone(280),
+            height: bone(56)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+            width: bone(160),
+            height: bone(18)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            gap: "$1.5",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+              variant: "rounded",
+              width: bone(64),
+              height: bone(22)
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+              variant: "rounded",
+              width: bone(64),
+              height: bone(22)
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+            ...knobProps.gap,
+            flexWrap: "wrap",
+            children: [0, 1, 2].map(function (tile) {
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+                variant: "rounded",
+                flexGrow: 1,
+                flexBasis: 140,
+                height: bone(64)
+              }, tile);
+            })
+          })]
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        ...knobProps.gap,
+        "data-skeleton-part": "tabs",
+        children: [104, 88, 96].map(function (width, tab) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+            variant: "rounded",
+            width: bone(width),
+            height: bone(44)
+          }, tab);
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton.Text, {
+        lines: 4
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=RecordHero.native.js.map

package/dist/cjs/record/RecordHero.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","RecordHero_exports","__export","RecordBreadcrumbBone","RecordHeroArtColumn","RecordHeroFrame","RecordHeroIdentityColumn","RecordHeroRow","RecordSkeleton","RecordVitals","recordHeroArtBasis","recordHeroArtMax","recordHeroIdentityBasis","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react_i18next","param","tint","children","rest","knobProps","useResolvedKnobs","jsx","YStack","borderRadius","panelPadding","backgroundColor","width","XStack","gapLg","flexWrap","alignItems","flexGrow","flexBasis","maxWidth","minWidth","gap","tiles","compact","length","map","tile","jsxs","borderWidth","Text","label","body","color","fontSize","fontWeight","percent","Progress","max","size","intent","progressProps","id","bone","bone2","px","sizeRecipeEscape","minHeight","Skeleton","height","testID","t","useTranslation","variant","aspectRatio"],"sources":["../../../src/record/RecordHero.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,kBAAA;AAAAC,QAAA,CAAAD,kBAAA;EAAAE,oBAAA,EAAAA,CAAA,KAAAA,oBAAA;EAAAC,mBAAA,EAAAA,CAAA,KAAAA,mBAAA;EAAAC,eAAA,EAAAA,CAAA,KAAAA,eAAA;EAAAC,wBAAA,EAAAA,CAAA,KAAAA,wBAAA;EAAAC,aAAA,EAAAA,CAAA,KAAAA,aAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,YAAA,EAAAA,CAAA,KAAAA,YAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAA,kBAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,uBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAlB,YAAiE,CAAAK,kBAAA;AACjE,IAAAc,kBAAyB,GAAAC,OAAA;AACzB,IAAAC,iBAAmD,GAAAD,OAAA;AAEnD,IAAAE,YAAA,GAAAF,OAAA,CAA+B;AAmB3B,IAAAG,YAAA,GAAAH,OAAA;AAbG,IAAAI,oBAAM,GAAqBJ,OAAA;AAC3B,IAAAN,kBAAM,GAAmB;AACzB,IAAAC,gBAAM;AAQN,IAAAC,uBAA2B,MAAM;AACtC,SAAMP,eAAYA,CAAAgB,KAAI;EACtB;IAAAC,IACE;IAAAC,QAAA;IAAA,GAAAC;EAAA,IAAAH,KAAA;EAAA,IAAC;IAAAI;EAAA,QAAAN,YAAA,CAAAO,gBAAA;EAAA,0BAAAX,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAW,MAAA;IAAA,GACEH,SAAG,CAAAI,YAAU;IAAA,GACbJ,SAAG,CAAAK,YAAU;IAAAC,eACd,EAAAT,IAAiB,OAAQA,IAAI,GAAI,YAAgB;IAAAU,KACjD,QAAM;IAAA,GACLR,IAAG;IAAAD;EAEH;AAAA;AAGP,SAAAhB,cAAAc,KAAA;EAEO;IAAAE;EAAS,IAAAF,KAAgB;EAC9B;IAAMI;EAAE,IAAU,IAAAN,YAAI,CAAAO,gBAAA;EACtB,OACE,mBAAAX,kBAAA,CAAAY,GAAA,EAACV,iBAAA,CAAAgB,MAAA;IAIL,GAAAR,SAAA,CAAAS,KAAA;IAEOC,QAAS;IACdC,UAAQ,cAAc;IACtBb;EACE,EAAC;AAAA;AAAA,SACCnB,mBAAUA,CAAAiB,KAAA;EAAA,IACV;IAAAE,QAAA;IAAW,GAAAC;EAAA,IAAAH,KAAA;EAAA,IACX;IAAAI;EAAU,QAAAN,YAAA,CAAAO,gBAAA;EAAA,OACV,eAAU,IAAAX,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAW,MAAA;IAAAS,QACN;IAAUC,SACV,EAAA5B,kBAAA;IAAA6B,QAEH,EAAA5B,gBAAA;IAAA6B,QAAA;IACH,GAAAf,SAAA,CAAAgB,GAAA;IAEJ,GAAAjB,IAAA;IAEOD;EACL;AAAA;AAEF,SAA0CjB,yBAAAe,KAAA;EACxC;IAAME,QAAE;IAAA,GAAUC;EAAA,IAAIH,KAAA;EACtB;IAAAI;EACE,QAAAN,YAAA,CAAAO,gBAAA;EAAA,OAAC,mBAAAX,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAW,MAAA;IAAAS,QAAA;IAAAC,SACC,EAAA1B,uBAAU;IAAA4B,QACV;IAAW,GACXf,SAAU,CAAAgB,GAAA;IAAA,GACTjB,IAAG;IAAUD;EACV;AAEH;AAAA,SACHd,aAAAY,KAAA;EAEJ;IAAAqB;EAAA,IAAArB,KAAA;EAWO;IAAAI;EAAS,IAAa,EAAE,EAAAN,YAAgD,CAAAO,gBAAA;IAC7EiB,OAAQ;EACR;EACA,IAAAD,KACE,CAAAE,MAAA;EAEI,OAAC,mBAAA7B,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAgB,MAAA;IAAA,GAAAR,SAAA,CAAAgB,GAAA;IAAAN,QAEK,QAAU;IAAAZ,QACV,EAAAmB,KAAU,CAAAG,GAAA,WAAAC,IAAA;MACd,sBAAgB,IAAA/B,kBAAA,CAAAgC,IAAA,EAAA9B,iBAAA,CAAAW,MAAA;QAChB,GAAAH,SAAa,CAAAI,YAAA;QACb,GAAAJ,SAAU,CAAAK,YAAA;QACVC,eAAW;QACXiB,WAAI;QAEJX,QAAA;QAAAC,SAAA;QAGAG,GAAA;QAGClB,QAAK,GACH,mBAAAR,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAgC,IAAA;UAAA,GAAAxB,SAAA,CAAAyB,KAAA;UACC,GAAAzB,SAAY,CAAA0B,IAAA;UACZC,KAAK;UACL7B,QAAK,EAAAuB,IAAA,CAAAI;QAAA,EACL,EAAO,eACP,CAAe,GAAEnC,kBAAmB,CAAAY,GAAA,EAAMV,iBAAA,CAAAgC,IAAA;UAAAI,QAAA;UAC5CC,UAAA;UAAA/B,QAAA,EAAAuB,IAAA,CAAA9C;QAAA,IAtBQ8C,IAAA,CAAAS,OAAA,wCAAAxC,kBAAA,CAAAY,GAAA,EAAAT,YAAA,CAAAsC,QAAA;UA0BhBxD,KAAA,EAAA8C,IAAA,CAAAS,OAAA;UAEJE,GAAA;UAEMC,IAAQ;UAIEC,MAAA;UAEZC,aAAA;YAIJ,cAAAd,IAAA,CAAAI;UAGgB;QACN,EAAE;MAEV,GACEJ,IAAA,CAAAe,EAAA;IAAC;EAAA;AAAA;AACe,IAAAC,IACd,YAAAC,MAAAC,EAAA;EAAA,OACA,IAAA7C,YAAA,CAAA8C,gBAAoB,EAAAD,EAAA;AAAA;AACX,SACT7D,oBAAcA,CAAA,EAAS;EAAA,OAEvB,mBAAAY,kBAAA,CAAAY,GAAA,EAAAV,iBAAA,CAAAgB,MAAA;IAAAG,UAAA;IAEI8B,SAAA,EAAAJ,IAAA;IAEAvC,QACA,qBAAAR,kBAAA,CAAAY,GAAC,EAAAV,iBAAA,CAAAkD,QAA0B,EAAG;MAC5BnC,KAAA,EAAA8B,IAAA;MAA6CM,MAC7C,EAAAN,IAAA;IAA8C;EACA;AAE5C;AAA+D,SAAAtD,cAC/DA,CAAAa,KAAA;EAA+D;IAAAgD;EACjE,IAAAhD,KAAA;EAAA;IAAAiD;EAAA,IACA,IAAAlD,oBAAA,CAAAmD,cAAA,GAAC;EAEG;IAAA9C;EAAC,QAAAN,YAAA,CAAAO,gBAAA;EAAA,0BAAAX,kBAAA,CAAAgC,IAAA,EAAA9B,iBAAA,CAAAW,MAAA;IAAA,GAAAH,SAEC,CAAAS,KAAA;IAAQmC,MAAA;IACE,qBACV,EAAW;IAAA,aACX;IAAe,cAAAC,CAAA;IAAA/C,QAAA,EAJV,gBAOX,IAAAR,kBAAA,CAAAY,GAAA,EAAAtB,eAAA;MAAAkB,QACF,qBAAAR,kBAAA,CAAAgC,IAAA,EAAAxC,aAAA;QAAAgB,QAEJ,GACA,mBAAAR,kBAAA,CAAAY,GAAC,EAAAvB,mBAAA;UACC;UAKAmB,QAAA,qBAAAR,kBAAC,CAAAY,GAAA,EAAAV,iBAAS,CAAAkD,QAAK,EAAO;YACxBK,OAAA;YAAAxC,KAAA;YAAAyC,WAAA;UACF;QAEJ,I","ignoreList":[]}

package/dist/cjs/record/RecordPage.cjs

@@ -0,0 +1,330 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var RecordPage_exports = {};
+__export(RecordPage_exports, {
+  RecordPage: () => RecordPage
+});
+module.exports = __toCommonJS(RecordPage_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react_i18next = require("react-i18next");
+var import_frappeNavigation = require("../frappeNavigation.cjs");
+var import_insightsRecord = require("../insights/insightsRecord.cjs");
+var import_FacetBadge = require("../list/FacetBadge.cjs");
+var import_favorites = require("../list/favorites.cjs");
+var import_recordLook = require("../list/recordLook.cjs");
+var import_recordData = require("./recordData.cjs");
+var import_RecordBars = require("./RecordBars.cjs");
+var import_RecordGallery = require("./RecordGallery.cjs");
+var import_RecordHero = require("./RecordHero.cjs");
+var import_RecordPager = require("./RecordPager.cjs");
+var import_RecordRows = require("./RecordRows.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function RecordPage({
+  doc,
+  linked,
+  doctype,
+  route,
+  listName,
+  listRows,
+  look,
+  titleField,
+  facet,
+  metrics,
+  summary,
+  tabs,
+  favorites,
+  actions,
+  history,
+  slug,
+  baseURL,
+  navigate,
+  canEdit
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    knobProps: nested
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const row = doc;
+  const name = String(row.name ?? "");
+  const {
+    isFavorite,
+    toggle
+  } = (0, import_favorites.useFavorites)(favorites ? typeof favorites === "string" ? favorites : (0, import_favorites.favoritesKey)(doctype) : void 0);
+  const title = (0, import_recordLook.recordTitle)(doc, look, titleField);
+  const code = look?.code?.(doc);
+  const values = facet ? (0, import_recordData.recordFacetValues)(facet, row, linked) : [];
+  const tints = values.slice(0, 2).map(value => facet?.tint?.(value));
+  const images = look?.images?.(doc, baseURL) ?? [];
+  const slides = (look?.gallery?.(doc, baseURL) ?? []).filter(slide => slide.src && slide.src !== images[0]);
+  const favorite = favorites ? isFavorite(name) : false;
+  const favoriteLabel = favorite ? t("Remove {{name}} from favorites", {
+    name: title
+  }) : t("Add {{name}} to favorites", {
+    name: title
+  });
+  const {
+    prev,
+    next
+  } = (0, import_recordData.adjacentRecords)(listRows, name);
+  const pagerEntry = neighbor => neighbor?.name ? {
+    title: (0, import_recordLook.recordTitle)(neighbor, look, titleField),
+    code: look?.code?.(neighbor),
+    image: look?.images?.(neighbor, baseURL)[0],
+    onPress: () => navigate((0, import_frappeNavigation.frappeRouteHref)(route, {
+      mode: "view",
+      name: neighbor.name
+    }))
+  } : null;
+  const entries = history ? (0, import_recordData.recordHistory)(row).map(entry => entry.kind === "modified" ? {
+    id: `${name}-modified`,
+    type: "version",
+    author: entry.author,
+    timestamp: entry.timestamp
+  } : {
+    id: `${name}-created`,
+    type: "info",
+    author: entry.author,
+    content: t("Created this {{doctype}}", {
+      doctype
+    }),
+    timestamp: entry.timestamp
+  }) : [];
+  const drawSection = (section, index) => {
+    if (section.kind === "bars") {
+      const tableRows = Array.isArray(row[section.table]) ? row[section.table] : [];
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordBars.RecordBars, {
+        rows: tableRows,
+        section,
+        testID: `${slug}-${section.id}-chart`
+      }, `bars-${section.id}`);
+    }
+    const rows = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordRows.RecordRows, {
+      rows: linked[section.doctype] ?? [],
+      section
+    });
+    if (!section.title) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gap,
+        children: [section.description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          ...nested.label,
+          color: "$color10",
+          children: section.description
+        }) : null, rows]
+      }, `rows-${index}`);
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageSection, {
+      title: section.title,
+      description: section.description,
+      divider: false,
+      children: rows
+    }, `rows-${index}`);
+  };
+  const quote = summary?.(doc);
+  const tabItems = tabs.map((tab, index) => {
+    const count = tab.count ? (linked[tab.count] ?? []).length : 0;
+    const Icon = tab.icon;
+    return {
+      value: tab.value,
+      label: tab.label,
+      icon: Icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+        size: 16
+      }) : void 0,
+      badge: count > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+        size: "$2",
+        children: count
+      }) : void 0,
+      content: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gapLg,
+        children: [index === 0 && quote ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Quote, {
+          marginVertical: 0,
+          cite: quote.cite,
+          children: quote.text
+        }) : null, tab.sections.map(drawSection), index === 0 && entries.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageSection, {
+          title: t("Record history"),
+          surface: true,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Timeline, {
+            entries,
+            labels: {
+              madeChanges: t("last updated this record")
+            }
+          })
+        }) : null]
+      })
+    };
+  });
+  const toolbar = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScreenToolbar, {
+    leading: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      outlined: true,
+      minHeight: knobProps.sizeToken,
+      onPress: () => navigate(route),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowLeftIcon, {
+        size: 16
+      }),
+      testID: `${slug}-detail-back`,
+      children: t("Back")
+    }),
+    trailing: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gap,
+      alignItems: "center",
+      children: [favorites || actions.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        ...knobProps.borderRadius,
+        backgroundColor: "$color2",
+        alignItems: "center",
+        children: [favorites ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: favoriteLabel,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            circular: true,
+            chromeless: true,
+            minWidth: knobProps.sizeToken,
+            minHeight: knobProps.sizeToken,
+            onPress: () => toggle(name),
+            col: favorite ? "$red9" : "$color10",
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+              size: 22,
+              weight: favorite ? "fill" : "regular"
+            }),
+            "aria-label": favoriteLabel,
+            "aria-pressed": favorite,
+            render: "button",
+            type: "button",
+            testID: `${slug}-detail-favorite`
+          })
+        }) : null, actions.map(action => {
+          const Icon = action.icon;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+            content: action.label,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              circular: true,
+              chromeless: true,
+              minWidth: knobProps.sizeToken,
+              minHeight: knobProps.sizeToken,
+              onPress: () => navigate(action.href(doc)),
+              col: "$color10",
+              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+                size: 20
+              }),
+              "aria-label": action.label,
+              testID: action.testID
+            })
+          }, action.label);
+        })]
+      }) : null, canEdit ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        theme: "accent",
+        minHeight: knobProps.sizeToken,
+        onPress: () => navigate((0, import_frappeNavigation.frappeRouteHref)(route, {
+          mode: "edit",
+          name
+        })),
+        testID: `${slug}-detail-edit`,
+        children: t("Edit")
+      }) : null]
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Screen, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Breadcrumbs, {
+        items: [{
+          label: listName,
+          href: route
+        }, {
+          label: code ? `${code} ${title}` : title
+        }],
+        onNavigate: href => navigate(href)
+      }), toolbar]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordHero.RecordHeroFrame, {
+      tint: tints[0],
+      testID: `${slug}-detail-stage`,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_RecordHero.RecordHeroRow, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordHero.RecordHeroArtColumn, {
+          testID: `${slug}-hero-art`,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordGallery.RecordGallery, {
+            images,
+            slides,
+            alt: title,
+            tints
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_RecordHero.RecordHeroIdentityColumn, {
+          testID: `${slug}-hero-identity`,
+          children: [code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            ...nested.label,
+            fontWeight: "700",
+            color: tints[0] ? `$${tints[0]}11` : "$color11",
+            letterSpacing: 1,
+            children: code
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageHeader, {
+            heading: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.H1, {
+              margin: 0,
+              size: "$10",
+              "$max-sm": {
+                size: "$9"
+              },
+              children: title
+            }),
+            subtitle: look?.subtitle?.(doc) || void 0,
+            divider: false
+          }), values.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+            gap: "$2",
+            flexWrap: "wrap",
+            children: values.map(value => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
+              label: facet?.optionLabel?.(value) ?? value,
+              tint: facet?.tint?.(value)
+            }, value))
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordHero.RecordVitals, {
+            tiles: metrics.map(metric => {
+              const value = (0, import_insightsRecord.metricValue)(doc, metric.field);
+              return {
+                id: metric.field,
+                label: metric.label,
+                value: metric.format ? metric.format(value) : String(value),
+                percent: metric.max ? Math.min(value / metric.max * 100, 100) : void 0
+              };
+            })
+          })]
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...knobProps.gapLg,
+      paddingBottom: "$6",
+      children: [tabItems.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tabs, {
+        defaultValue: tabItems[0]?.value,
+        lazyMount: true,
+        items: tabItems
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordPager.RecordPager, {
+        prev: pagerEntry(prev),
+        next: pagerEntry(next),
+        testID: slug
+      })]
+    })]
+  });
+}