@multiplatform.one/frappe-ui 7.23.2 → 7.24.0

package/dist/esm/record/RecordPage.mjs

@@ -0,0 +1,305 @@
+import { Breadcrumbs, Chip, H1, PageHeader, PageSection, Quote, Screen, ScreenToolbar, Tabs, Text, Timeline, Tooltip, XStack, YStack } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ArrowLeftIcon, HeartIcon } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
+import { frappeRouteHref } from "../frappeNavigation.mjs";
+import { metricValue } from "../insights/insightsRecord.mjs";
+import { FacetBadge } from "../list/FacetBadge.mjs";
+import { favoritesKey, useFavorites } from "../list/favorites.mjs";
+import { recordTitle } from "../list/recordLook.mjs";
+import { adjacentRecords, recordFacetValues, recordHistory } from "./recordData.mjs";
+import { RecordBars } from "./RecordBars.mjs";
+import { RecordGallery } from "./RecordGallery.mjs";
+import { RecordHeroArtColumn, RecordHeroFrame, RecordHeroIdentityColumn, RecordHeroRow, RecordVitals } from "./RecordHero.mjs";
+import { RecordPager } from "./RecordPager.mjs";
+import { RecordRows } from "./RecordRows.mjs";
+import { jsx, jsxs } from "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
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const {
+    knobProps: nested
+  } = useResolvedKnobs({
+    compact: true
+  });
+  const row = doc;
+  const name = String(row.name ?? "");
+  const {
+    isFavorite,
+    toggle
+  } = useFavorites(favorites ? typeof favorites === "string" ? favorites : favoritesKey(doctype) : void 0);
+  const title = recordTitle(doc, look, titleField);
+  const code = look?.code?.(doc);
+  const values = facet ? 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
+  } = adjacentRecords(listRows, name);
+  const pagerEntry = neighbor => neighbor?.name ? {
+    title: recordTitle(neighbor, look, titleField),
+    code: look?.code?.(neighbor),
+    image: look?.images?.(neighbor, baseURL)[0],
+    onPress: () => navigate(frappeRouteHref(route, {
+      mode: "view",
+      name: neighbor.name
+    }))
+  } : null;
+  const entries = history ? 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__ */jsx(RecordBars, {
+        rows: tableRows,
+        section,
+        testID: `${slug}-${section.id}-chart`
+      }, `bars-${section.id}`);
+    }
+    const rows = /* @__PURE__ */jsx(RecordRows, {
+      rows: linked[section.doctype] ?? [],
+      section
+    });
+    if (!section.title) {
+      return /* @__PURE__ */jsxs(YStack, {
+        ...knobProps.gap,
+        children: [section.description ? /* @__PURE__ */jsx(Text, {
+          ...nested.label,
+          color: "$color10",
+          children: section.description
+        }) : null, rows]
+      }, `rows-${index}`);
+    }
+    return /* @__PURE__ */jsx(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__ */jsx(Icon, {
+        size: 16
+      }) : void 0,
+      badge: count > 0 ? /* @__PURE__ */jsx(Chip, {
+        size: "$2",
+        children: count
+      }) : void 0,
+      content: /* @__PURE__ */jsxs(YStack, {
+        ...knobProps.gapLg,
+        children: [index === 0 && quote ? /* @__PURE__ */jsx(Quote, {
+          marginVertical: 0,
+          cite: quote.cite,
+          children: quote.text
+        }) : null, tab.sections.map(drawSection), index === 0 && entries.length > 0 ? /* @__PURE__ */jsx(PageSection, {
+          title: t("Record history"),
+          surface: true,
+          children: /* @__PURE__ */jsx(Timeline, {
+            entries,
+            labels: {
+              madeChanges: t("last updated this record")
+            }
+          })
+        }) : null]
+      })
+    };
+  });
+  const toolbar = /* @__PURE__ */jsx(ScreenToolbar, {
+    leading: /* @__PURE__ */jsx(Button, {
+      outlined: true,
+      minHeight: knobProps.sizeToken,
+      onPress: () => navigate(route),
+      icon: /* @__PURE__ */jsx(ArrowLeftIcon, {
+        size: 16
+      }),
+      testID: `${slug}-detail-back`,
+      children: t("Back")
+    }),
+    trailing: /* @__PURE__ */jsxs(XStack, {
+      ...knobProps.gap,
+      alignItems: "center",
+      children: [favorites || actions.length > 0 ? /* @__PURE__ */jsxs(XStack, {
+        ...knobProps.borderRadius,
+        backgroundColor: "$color2",
+        alignItems: "center",
+        children: [favorites ? /* @__PURE__ */jsx(Tooltip, {
+          content: favoriteLabel,
+          children: /* @__PURE__ */jsx(Button, {
+            circular: true,
+            chromeless: true,
+            minWidth: knobProps.sizeToken,
+            minHeight: knobProps.sizeToken,
+            onPress: () => toggle(name),
+            col: favorite ? "$red9" : "$color10",
+            icon: /* @__PURE__ */jsx(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__ */jsx(Tooltip, {
+            content: action.label,
+            children: /* @__PURE__ */jsx(Button, {
+              circular: true,
+              chromeless: true,
+              minWidth: knobProps.sizeToken,
+              minHeight: knobProps.sizeToken,
+              onPress: () => navigate(action.href(doc)),
+              col: "$color10",
+              icon: /* @__PURE__ */jsx(Icon, {
+                size: 20
+              }),
+              "aria-label": action.label,
+              testID: action.testID
+            })
+          }, action.label);
+        })]
+      }) : null, canEdit ? /* @__PURE__ */jsx(Button, {
+        theme: "accent",
+        minHeight: knobProps.sizeToken,
+        onPress: () => navigate(frappeRouteHref(route, {
+          mode: "edit",
+          name
+        })),
+        testID: `${slug}-detail-edit`,
+        children: t("Edit")
+      }) : null]
+    })
+  });
+  return /* @__PURE__ */jsxs(Screen, {
+    children: [/* @__PURE__ */jsxs(YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */jsx(Breadcrumbs, {
+        items: [{
+          label: listName,
+          href: route
+        }, {
+          label: code ? `${code} ${title}` : title
+        }],
+        onNavigate: href => navigate(href)
+      }), toolbar]
+    }), /* @__PURE__ */jsx(RecordHeroFrame, {
+      tint: tints[0],
+      testID: `${slug}-detail-stage`,
+      children: /* @__PURE__ */jsxs(RecordHeroRow, {
+        children: [/* @__PURE__ */jsx(RecordHeroArtColumn, {
+          testID: `${slug}-hero-art`,
+          children: /* @__PURE__ */jsx(RecordGallery, {
+            images,
+            slides,
+            alt: title,
+            tints
+          })
+        }), /* @__PURE__ */jsxs(RecordHeroIdentityColumn, {
+          testID: `${slug}-hero-identity`,
+          children: [code ? /* @__PURE__ */jsx(Text, {
+            ...nested.label,
+            fontWeight: "700",
+            color: tints[0] ? `$${tints[0]}11` : "$color11",
+            letterSpacing: 1,
+            children: code
+          }) : null, /* @__PURE__ */jsx(PageHeader, {
+            heading: /* @__PURE__ */jsx(H1, {
+              margin: 0,
+              size: "$10",
+              "$max-sm": {
+                size: "$9"
+              },
+              children: title
+            }),
+            subtitle: look?.subtitle?.(doc) || void 0,
+            divider: false
+          }), values.length > 0 ? /* @__PURE__ */jsx(XStack, {
+            gap: "$2",
+            flexWrap: "wrap",
+            children: values.map(value => /* @__PURE__ */jsx(FacetBadge, {
+              label: facet?.optionLabel?.(value) ?? value,
+              tint: facet?.tint?.(value)
+            }, value))
+          }) : null, /* @__PURE__ */jsx(RecordVitals, {
+            tiles: metrics.map(metric => {
+              const value = 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__ */jsxs(YStack, {
+      ...knobProps.gapLg,
+      paddingBottom: "$6",
+      children: [tabItems.length > 0 ? /* @__PURE__ */jsx(Tabs, {
+        defaultValue: tabItems[0]?.value,
+        lazyMount: true,
+        items: tabItems
+      }) : null, /* @__PURE__ */jsx(RecordPager, {
+        prev: pagerEntry(prev),
+        next: pagerEntry(next),
+        testID: slug
+      })]
+    })]
+  });
+}
+export { RecordPage };
+//# sourceMappingURL=RecordPage.mjs.map

package/dist/esm/record/RecordPage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Breadcrumbs","Chip","H1","PageHeader","PageSection","Quote","Screen","ScreenToolbar","Tabs","Text","Timeline","Tooltip","XStack","YStack","Button","useResolvedKnobs","ArrowLeftIcon","HeartIcon","useTranslation","frappeRouteHref","metricValue","FacetBadge","favoritesKey","useFavorites","recordTitle","adjacentRecords","recordFacetValues","recordHistory","RecordBars","RecordGallery","RecordHeroArtColumn","RecordHeroFrame","RecordHeroIdentityColumn","RecordHeroRow","RecordVitals","RecordPager","RecordRows","jsx","jsxs","RecordPage","doc","linked","doctype","route","listName","listRows","look","titleField","facet","metrics","summary","tabs","favorites","actions","history","slug","baseURL","navigate","canEdit","t","knobProps","nested","compact","row","name","String","isFavorite","toggle","title","code","values","tints","slice","map","value","tint","images","slides","gallery","filter","slide","src","favorite","favoriteLabel","prev","next","pagerEntry","neighbor","image","onPress","mode","entries","entry","kind","id","type","author","timestamp","content","drawSection","section","index","tableRows","Array","isArray","table","rows","testID","gap","children","description","label","color","divider","quote","tabItems","tab","count","length","Icon","icon","size","badge","gapLg","marginVertical","cite","text","sections","surface","labels","madeChanges","toolbar","leading","outlined","minHeight","sizeToken","trailing","alignItems","borderRadius","backgroundColor","circular","chromeless","minWidth","col","weight","render","action","href","theme","items","onNavigate","alt","fontWeight","letterSpacing","heading","margin","subtitle","flexWrap","optionLabel","tiles","metric","field","format","percent","max","Math","min","paddingBottom","defaultValue","lazyMount"],"sources":["../../../src/record/RecordPage.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,336 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumbs, Chip, H1, PageHeader, PageSection, Quote, Screen, ScreenToolbar, Tabs, Text, Timeline, Tooltip, XStack, YStack } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ArrowLeftIcon, HeartIcon } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
+import { frappeRouteHref } from "../frappeNavigation.native.js";
+import { metricValue } from "../insights/insightsRecord.native.js";
+import { FacetBadge } from "../list/FacetBadge.native.js";
+import { favoritesKey, useFavorites } from "../list/favorites.native.js";
+import { recordTitle } from "../list/recordLook.native.js";
+import { adjacentRecords, recordFacetValues, recordHistory } from "./recordData.native.js";
+import { RecordBars } from "./RecordBars.native.js";
+import { RecordGallery } from "./RecordGallery.native.js";
+import { RecordHeroArtColumn, RecordHeroFrame, RecordHeroIdentityColumn, RecordHeroRow, RecordVitals } from "./RecordHero.native.js";
+import { RecordPager } from "./RecordPager.native.js";
+import { RecordRows } from "./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
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var {
+    knobProps: nested
+  } = useResolvedKnobs({
+    compact: true
+  });
+  var row = doc;
+  var name = String((_row_name = row.name) !== null && _row_name !== void 0 ? _row_name : "");
+  var {
+    isFavorite,
+    toggle
+  } = useFavorites(favorites ? typeof favorites === "string" ? favorites : favoritesKey(doctype) : void 0);
+  var title = 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 ? 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
+  } = adjacentRecords(listRows, name);
+  var pagerEntry = function pagerEntry2(neighbor) {
+    var _look_code2, _look_images2;
+    return (neighbor === null || neighbor === void 0 ? void 0 : neighbor.name) ? {
+      title: 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(frappeRouteHref(route, {
+          mode: "view",
+          name: neighbor.name
+        }));
+      }
+    } : null;
+  };
+  var entries = history ? 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__ */_jsx(RecordBars, {
+        rows: tableRows,
+        section,
+        testID: `${slug}-${section.id}-chart`
+      }, `bars-${section.id}`);
+    }
+    var rows = /* @__PURE__ */_jsx(RecordRows, {
+      rows: (_linked_section_doctype = linked[section.doctype]) !== null && _linked_section_doctype !== void 0 ? _linked_section_doctype : [],
+      section
+    });
+    if (!section.title) {
+      return /* @__PURE__ */_jsxs(YStack, {
+        ...knobProps.gap,
+        children: [section.description ? /* @__PURE__ */_jsx(Text, {
+          ...nested.label,
+          color: "$color10",
+          children: section.description
+        }) : null, rows]
+      }, `rows-${index}`);
+    }
+    return /* @__PURE__ */_jsx(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__ */_jsx(Icon, {
+        size: 16
+      }) : void 0,
+      badge: count > 0 ? /* @__PURE__ */_jsx(Chip, {
+        size: "$2",
+        children: count
+      }) : void 0,
+      content: /* @__PURE__ */_jsxs(YStack, {
+        ...knobProps.gapLg,
+        children: [index === 0 && quote ? /* @__PURE__ */_jsx(Quote, {
+          marginVertical: 0,
+          cite: quote.cite,
+          children: quote.text
+        }) : null, tab.sections.map(drawSection), index === 0 && entries.length > 0 ? /* @__PURE__ */_jsx(PageSection, {
+          title: t("Record history"),
+          surface: true,
+          children: /* @__PURE__ */_jsx(Timeline, {
+            entries,
+            labels: {
+              madeChanges: t("last updated this record")
+            }
+          })
+        }) : null]
+      })
+    };
+  });
+  var toolbar = /* @__PURE__ */_jsx(ScreenToolbar, {
+    leading: /* @__PURE__ */_jsx(Button, {
+      outlined: true,
+      minHeight: knobProps.sizeToken,
+      onPress: function onPress() {
+        return navigate(route);
+      },
+      icon: /* @__PURE__ */_jsx(ArrowLeftIcon, {
+        size: 16
+      }),
+      testID: `${slug}-detail-back`,
+      children: t("Back")
+    }),
+    trailing: /* @__PURE__ */_jsxs(XStack, {
+      ...knobProps.gap,
+      alignItems: "center",
+      children: [favorites || actions.length > 0 ? /* @__PURE__ */_jsxs(XStack, {
+        ...knobProps.borderRadius,
+        backgroundColor: "$color2",
+        alignItems: "center",
+        children: [favorites ? /* @__PURE__ */_jsx(Tooltip, {
+          content: favoriteLabel,
+          children: /* @__PURE__ */_jsx(Button, {
+            circular: true,
+            chromeless: true,
+            minWidth: knobProps.sizeToken,
+            minHeight: knobProps.sizeToken,
+            onPress: function onPress() {
+              return toggle(name);
+            },
+            col: favorite ? "$red9" : "$color10",
+            icon: /* @__PURE__ */_jsx(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__ */_jsx(Tooltip, {
+            content: action.label,
+            children: /* @__PURE__ */_jsx(Button, {
+              circular: true,
+              chromeless: true,
+              minWidth: knobProps.sizeToken,
+              minHeight: knobProps.sizeToken,
+              onPress: function onPress() {
+                return navigate(action.href(doc));
+              },
+              col: "$color10",
+              icon: /* @__PURE__ */_jsx(Icon, {
+                size: 20
+              }),
+              "aria-label": action.label,
+              testID: action.testID
+            })
+          }, action.label);
+        })]
+      }) : null, canEdit ? /* @__PURE__ */_jsx(Button, {
+        theme: "accent",
+        minHeight: knobProps.sizeToken,
+        onPress: function onPress() {
+          return navigate(frappeRouteHref(route, {
+            mode: "edit",
+            name
+          }));
+        },
+        testID: `${slug}-detail-edit`,
+        children: t("Edit")
+      }) : null]
+    })
+  });
+  return /* @__PURE__ */_jsxs(Screen, {
+    children: [/* @__PURE__ */_jsxs(YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */_jsx(Breadcrumbs, {
+        items: [{
+          label: listName,
+          href: route
+        }, {
+          label: code ? `${code} ${title}` : title
+        }],
+        onNavigate: function onNavigate(href) {
+          return navigate(href);
+        }
+      }), toolbar]
+    }), /* @__PURE__ */_jsx(RecordHeroFrame, {
+      tint: tints[0],
+      testID: `${slug}-detail-stage`,
+      children: /* @__PURE__ */_jsxs(RecordHeroRow, {
+        children: [/* @__PURE__ */_jsx(RecordHeroArtColumn, {
+          testID: `${slug}-hero-art`,
+          children: /* @__PURE__ */_jsx(RecordGallery, {
+            images,
+            slides,
+            alt: title,
+            tints
+          })
+        }), /* @__PURE__ */_jsxs(RecordHeroIdentityColumn, {
+          testID: `${slug}-hero-identity`,
+          children: [code ? /* @__PURE__ */_jsx(Text, {
+            ...nested.label,
+            fontWeight: "700",
+            color: tints[0] ? `$${tints[0]}11` : "$color11",
+            letterSpacing: 1,
+            children: code
+          }) : null, /* @__PURE__ */_jsx(PageHeader, {
+            heading: /* @__PURE__ */_jsx(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__ */_jsx(XStack, {
+            gap: "$2",
+            flexWrap: "wrap",
+            children: values.map(function (value) {
+              var _ref2;
+              var _facet_optionLabel, _facet_tint;
+              return /* @__PURE__ */_jsx(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__ */_jsx(RecordVitals, {
+            tiles: metrics.map(function (metric) {
+              var value = 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__ */_jsxs(YStack, {
+      ...knobProps.gapLg,
+      paddingBottom: "$6",
+      children: [tabItems.length > 0 ? /* @__PURE__ */_jsx(Tabs, {
+        defaultValue: (_tabItems_ = tabItems[0]) === null || _tabItems_ === void 0 ? void 0 : _tabItems_.value,
+        lazyMount: true,
+        items: tabItems
+      }) : null, /* @__PURE__ */_jsx(RecordPager, {
+        prev: pagerEntry(prev),
+        next: pagerEntry(next),
+        testID: slug
+      })]
+    })]
+  });
+}
+export { RecordPage };
+//# sourceMappingURL=RecordPage.native.js.map