@multiplatform.one/frappe-ui 7.23.2 → 7.25.0

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
+      })]
+    })]
+  });
+}

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

@@ -0,0 +1,364 @@
+"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 RecordPage_exports = {};
+__export(RecordPage_exports, {
+  RecordPage: () => RecordPage
+});
+module.exports = __toCommonJS(RecordPage_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 = require("@phosphor-icons/react");
+var import_react_i18next = require("react-i18next");
+var import_frappeNavigation = require("../frappeNavigation.native.js");
+var import_insightsRecord = require("../insights/insightsRecord.native.js");
+var import_FacetBadge = require("../list/FacetBadge.native.js");
+var import_favorites = require("../list/favorites.native.js");
+var import_recordLook = require("../list/recordLook.native.js");
+var import_recordData = require("./recordData.native.js");
+var import_RecordBars = require("./RecordBars.native.js");
+var import_RecordGallery = require("./RecordGallery.native.js");
+var import_RecordHero = require("./RecordHero.native.js");
+var import_RecordPager = require("./RecordPager.native.js");
+var import_RecordRows = require("./RecordRows.native.js");
+function RecordPage(param) {
+  var {
+    doc,
+    linked,
+    doctype,
+    route,
+    listName,
+    listRows,
+    look,
+    titleField,
+    facet,
+    metrics,
+    summary,
+    tabs,
+    favorites,
+    actions,
+    history,
+    slug,
+    baseURL,
+    navigate,
+    canEdit
+  } = param;
+  var _row_name, _ref, _ref1;
+  var _look_code, _look_images, _look_gallery, _look_subtitle, _tabItems_;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var {
+    knobProps: nested
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  var row = doc;
+  var name = String((_row_name = row.name) !== null && _row_name !== void 0 ? _row_name : "");
+  var {
+    isFavorite,
+    toggle
+  } = (0, import_favorites.useFavorites)(favorites ? typeof favorites === "string" ? favorites : (0, import_favorites.favoritesKey)(doctype) : void 0);
+  var title = (0, import_recordLook.recordTitle)(doc, look, titleField);
+  var code = look === null || look === void 0 ? void 0 : (_look_code = look.code) === null || _look_code === void 0 ? void 0 : _look_code.call(look, doc);
+  var values = facet ? (0, import_recordData.recordFacetValues)(facet, row, linked) : [];
+  var tints = values.slice(0, 2).map(function (value) {
+    var _facet_tint;
+    return facet === null || facet === void 0 ? void 0 : (_facet_tint = facet.tint) === null || _facet_tint === void 0 ? void 0 : _facet_tint.call(facet, value);
+  });
+  var images = (_ref = look === null || look === void 0 ? void 0 : (_look_images = look.images) === null || _look_images === void 0 ? void 0 : _look_images.call(look, doc, baseURL)) !== null && _ref !== void 0 ? _ref : [];
+  var slides = ((_ref1 = look === null || look === void 0 ? void 0 : (_look_gallery = look.gallery) === null || _look_gallery === void 0 ? void 0 : _look_gallery.call(look, doc, baseURL)) !== null && _ref1 !== void 0 ? _ref1 : []).filter(function (slide) {
+    return slide.src && slide.src !== images[0];
+  });
+  var favorite = favorites ? isFavorite(name) : false;
+  var favoriteLabel = favorite ? t("Remove {{name}} from favorites", {
+    name: title
+  }) : t("Add {{name}} to favorites", {
+    name: title
+  });
+  var {
+    prev,
+    next
+  } = (0, import_recordData.adjacentRecords)(listRows, name);
+  var pagerEntry = function pagerEntry2(neighbor) {
+    var _look_code2, _look_images2;
+    return (neighbor === null || neighbor === void 0 ? void 0 : neighbor.name) ? {
+      title: (0, import_recordLook.recordTitle)(neighbor, look, titleField),
+      code: look === null || look === void 0 ? void 0 : (_look_code2 = look.code) === null || _look_code2 === void 0 ? void 0 : _look_code2.call(look, neighbor),
+      image: look === null || look === void 0 ? void 0 : (_look_images2 = look.images) === null || _look_images2 === void 0 ? void 0 : _look_images2.call(look, neighbor, baseURL)[0],
+      onPress: function onPress() {
+        return navigate((0, import_frappeNavigation.frappeRouteHref)(route, {
+          mode: "view",
+          name: neighbor.name
+        }));
+      }
+    } : null;
+  };
+  var entries = history ? (0, import_recordData.recordHistory)(row).map(function (entry) {
+    return 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
+    };
+  }) : [];
+  var drawSection = function drawSection2(section, index) {
+    var _linked_section_doctype;
+    if (section.kind === "bars") {
+      var 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}`);
+    }
+    var rows = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordRows.RecordRows, {
+      rows: (_linked_section_doctype = linked[section.doctype]) !== null && _linked_section_doctype !== void 0 ? _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}`);
+  };
+  var quote = summary === null || summary === void 0 ? void 0 : summary(doc);
+  var tabItems = tabs.map(function (tab, index) {
+    var _linked_tab_count;
+    var count = tab.count ? ((_linked_tab_count = linked[tab.count]) !== null && _linked_tab_count !== void 0 ? _linked_tab_count : []).length : 0;
+    var 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]
+      })
+    };
+  });
+  var 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: function onPress() {
+        return 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: function onPress() {
+              return 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(function (action) {
+          var 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: function onPress() {
+                return 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: function onPress() {
+          return 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: function onNavigate(href) {
+          return 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 === null || look === void 0 ? void 0 : (_look_subtitle = look.subtitle) === null || _look_subtitle === void 0 ? void 0 : _look_subtitle.call(look, doc)) || void 0,
+            divider: false
+          }), values.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+            gap: "$2",
+            flexWrap: "wrap",
+            children: values.map(function (value) {
+              var _ref2;
+              var _facet_optionLabel, _facet_tint;
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
+                label: (_ref2 = facet === null || facet === void 0 ? void 0 : (_facet_optionLabel = facet.optionLabel) === null || _facet_optionLabel === void 0 ? void 0 : _facet_optionLabel.call(facet, value)) !== null && _ref2 !== void 0 ? _ref2 : value,
+                tint: facet === null || facet === void 0 ? void 0 : (_facet_tint = facet.tint) === null || _facet_tint === void 0 ? void 0 : _facet_tint.call(facet, value)
+              }, value);
+            })
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordHero.RecordVitals, {
+            tiles: metrics.map(function (metric) {
+              var 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_ = tabItems[0]) === null || _tabItems_ === void 0 ? void 0 : _tabItems_.value,
+        lazyMount: true,
+        items: tabItems
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordPager.RecordPager, {
+        prev: pagerEntry(prev),
+        next: pagerEntry(next),
+        testID: slug
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=RecordPage.native.js.map