@macrostrat/column-views 3.2.0 → 3.2.2

package/CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.2.2] - 2026-02-09
+
+- Move `AgeField` and `AgeRange` to separate exports
+- Improve handling of interval ranges
+
+## [3.2.1] - 2026-02-08
+
+- Export `ThicknessField` for unit details panels
+
 ## [3.2.0] - 2026-02-06
 
 - Update Mapbox dependency to v3

package/dist/age-axis.cjs

@@ -5,7 +5,7 @@ const columnComponents = require("@macrostrat/column-components");
 require("react");
 const ageAxis_module = require("./age-axis.module.sass.cjs");
 const dataComponents = require("@macrostrat/data-components");
-const panel = require("./unit-details/panel.cjs");
+const ageRange = require("./unit-details/age-range.cjs");
 const store = require("./data-provider/store.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const h__default = /* @__PURE__ */ _interopDefault(h$1);
@@ -114,7 +114,7 @@ function AgeCursor({ age }) {
         top: heightPx
       }
     },
-    [h("div.line"), h(panel.AgeLabel, { age, className: "label" })]
+    [h("div.line"), h(ageRange.AgeLabel, { age, className: "label" })]
   );
 }
 exports.AgeCursor = AgeCursor;

package/dist/age-axis.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"age-axis.cjs","sources":["../src/age-axis.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n  SVG,\n  ColumnAxis,\n  ColumnContext,\n  ColumnAxisType,\n  AgeAxis,\n} from \"@macrostrat/column-components\";\nimport { useContext } from \"react\";\nimport styles from \"./age-axis.module.sass\";\nimport { useCompositeScale, useMacrostratColumnData } from \"./data-provider\";\nimport { Parenthetical } from \"@macrostrat/data-components\";\nimport { AgeLabel } from \"./unit-details\";\nimport { PackageScaleLayoutData } from \"./prepare-units\";\n\nconst h = hyper.styled(styles);\n\nconst AgeAxisCore = ({ ticks, tickSpacing = 40, showDomain = false }) => {\n  const { pixelHeight } = useContext(ColumnContext);\n  // A tick roughly every 40 pixels\n  let v = Math.max(Math.round(pixelHeight / tickSpacing), 1);\n\n  return h(\"g.axis\", { transform: \"translate(20 0)\" }, [\n    h(ColumnAxis, {\n      ticks: v,\n      showDomain,\n    }),\n  ]);\n};\n\nexport function VerticalAxisLabel(props) {\n  const { label = \"Age\", unit = \"Ma\", className, height } = props;\n  return h(\n    \"div.column-axis-label.age-axis-label\",\n    { className, style: { height } },\n    [\n      label,\n      \" \",\n      h.if(unit)(Parenthetical, { className: \"age-axis-unit\" }, unit),\n    ],\n  );\n}\n\ninterface CompositeAgeAxisProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function CompositeAgeAxis(rest: CompositeAgeAxisProps) {\n  const { axisType, sections, totalHeight } = useMacrostratColumnData();\n\n  const packages = sections.map((section) => {\n    return {\n      key: `section-${section.section_id}`,\n      ...section.scaleInfo,\n    };\n  });\n\n  return h(CompositeAgeAxisCore, {\n    axisType,\n    packages,\n    totalHeight,\n    ...rest,\n  });\n}\n\nexport function ApproximateHeightAxis(rest: CompositeAgeAxisProps) {\n  /** Axis to show approximate height based on dynamic column scales */\n  const { axisType, sections, totalHeight } = useMacrostratColumnData();\n\n  const packages = sections.map((section) => {\n    const { scaleInfo } = section;\n    if (scaleInfo.heightScale == null) {\n      throw new Error(\"No height scale available for section\");\n    }\n    return {\n      key: `section-${section.section_id}`,\n      ...scaleInfo,\n      scale: scaleInfo.heightScale, // Use height scale instead of age scale\n      // This only works with dynamic columns\n    };\n  });\n\n  return h(CompositeAgeAxisCore, {\n    axisType,\n    axisLabel: \"Approx. height\",\n    axisUnit: \"m\",\n    packages,\n    totalHeight,\n    ...rest,\n  });\n}\n\nexport interface CompositeStratigraphicScaleInfo extends CompositeAgeAxisProps {\n  axisType: ColumnAxisType;\n  axisLabel?: string;\n  axisUnit?: string;\n  totalHeight: number;\n  packages: PackageScaleLayoutData[];\n}\n\nexport function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {\n  const { axisType, axisLabel, axisUnit, totalHeight, packages, ...rest } =\n    props;\n\n  if (axisType == ColumnAxisType.ORDINAL) {\n    return null;\n  }\n\n  let _axisLabel: string = axisLabel ?? \"Age\";\n  let _axisUnit = axisUnit ?? \"Ma\";\n  if (axisType == ColumnAxisType.DEPTH) {\n    _axisLabel = \"Depth\";\n    _axisUnit = \"m\";\n  } else if (axisType == ColumnAxisType.HEIGHT) {\n    _axisLabel = \"Height\";\n    _axisUnit = \"m\";\n  }\n\n  return h(\"div.composite-age-axis\", rest, [\n    h(VerticalAxisLabel, {\n      label: _axisLabel,\n      unit: _axisUnit,\n      height: totalHeight,\n    }),\n    h(\n      SVG,\n      {\n        className: \"age-axis-column\",\n        style: { width: `22px`, height: `${totalHeight}px` },\n        width: 22,\n        height: totalHeight,\n      },\n      packages.map((group, i) => {\n        const { key, scale } = group;\n\n        return h(AgeAxis, {\n          key,\n          className: \"age-axis\",\n          scale,\n          tickSizeOuter: 3,\n        });\n      }),\n    ),\n  ]);\n}\n\nexport function AgeCursor({ age }) {\n  /** A cursor that shows the age at a specific point on the age axis. */\n  const scale = useCompositeScale();\n  const heightPx = scale(age);\n\n  if (age == null || heightPx == null) {\n    return null;\n  }\n\n  return h(\n    \"div.age-cursor\",\n    {\n      style: {\n        top: heightPx,\n      },\n    },\n    [h(\"div.line\"), h(AgeLabel, { age, className: \"label\" })],\n  );\n}\n"],"names":["hyper","styles","Parenthetical","useMacrostratColumnData","ColumnAxisType","SVG","AgeAxis","useCompositeScale","AgeLabel"],"mappings":";;;;;;;;;;;AAeA,MAAM,IAAIA,WAAAA,QAAM,OAAOC,sBAAM;AAetB,SAAS,kBAAkB,OAAO;AACvC,QAAM,EAAE,QAAQ,OAAO,OAAO,MAAM,WAAW,WAAW;AAC1D,SAAO;AAAA,IACL;AAAA,IACA,EAAE,WAAW,OAAO,EAAE,SAAO;AAAA,IAC7B;AAAA,MACE;AAAA,MACA;AAAA,MACA,EAAE,GAAG,IAAI,EAAEC,eAAAA,eAAe,EAAE,WAAW,gBAAA,GAAmB,IAAI;AAAA,IAAA;AAAA,EAChE;AAEJ;AAOO,SAAS,iBAAiB,MAA6B;AAC5D,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgBC,MAAAA,wBAAA;AAE5C,QAAM,WAAW,SAAS,IAAI,CAAC,YAAY;AACzC,WAAO;AAAA,MACL,KAAK,WAAW,QAAQ,UAAU;AAAA,MAClC,GAAG,QAAQ;AAAA,IAAA;AAAA,EAEf,CAAC;AAED,SAAO,EAAE,sBAAsB;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AACH;AAEO,SAAS,sBAAsB,MAA6B;AAEjE,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgBA,MAAAA,wBAAA;AAE5C,QAAM,WAAW,SAAS,IAAI,CAAC,YAAY;AACzC,UAAM,EAAE,cAAc;AACtB,QAAI,UAAU,eAAe,MAAM;AACjC,YAAM,IAAI,MAAM,uCAAuC;AAAA,IACzD;AACA,WAAO;AAAA,MACL,KAAK,WAAW,QAAQ,UAAU;AAAA,MAClC,GAAG;AAAA,MACH,OAAO,UAAU;AAAA;AAAA;AAAA,IAAA;AAAA,EAGrB,CAAC;AAED,SAAO,EAAE,sBAAsB;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AACH;AAUO,SAAS,qBAAqB,OAAwC;AAC3E,QAAM,EAAE,UAAU,WAAW,UAAU,aAAa,UAAU,GAAG,SAC/D;AAEF,MAAI,YAAYC,iBAAAA,eAAe,SAAS;AACtC,WAAO;AAAA,EACT;AAEA,MAAI,aAAqB,aAAa;AACtC,MAAI,YAAY,YAAY;AAC5B,MAAI,YAAYA,iBAAAA,eAAe,OAAO;AACpC,iBAAa;AACb,gBAAY;AAAA,EACd,WAAW,YAAYA,iBAAAA,eAAe,QAAQ;AAC5C,iBAAa;AACb,gBAAY;AAAA,EACd;AAEA,SAAO,EAAE,0BAA0B,MAAM;AAAA,IACvC,EAAE,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA,CACT;AAAA,IACD;AAAA,MACEC,iBAAAA;AAAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,OAAO,EAAE,OAAO,QAAQ,QAAQ,GAAG,WAAW,KAAA;AAAA,QAC9C,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAEV,SAAS,IAAI,CAAC,OAAO,MAAM;AACzB,cAAM,EAAE,KAAK,MAAA,IAAU;AAEvB,eAAO,EAAEC,iBAAAA,SAAS;AAAA,UAChB;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA,eAAe;AAAA,QAAA,CAChB;AAAA,MACH,CAAC;AAAA,IAAA;AAAA,EACH,CACD;AACH;AAEO,SAAS,UAAU,EAAE,OAAO;AAEjC,QAAM,QAAQC,MAAAA,kBAAA;AACd,QAAM,WAAW,MAAM,GAAG;AAE1B,MAAI,OAAO,QAAQ,YAAY,MAAM;AACnC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,OAAO;AAAA,QACL,KAAK;AAAA,MAAA;AAAA,IACP;AAAA,IAEF,CAAC,EAAE,UAAU,GAAG,EAAEC,MAAAA,UAAU,EAAE,KAAK,WAAW,SAAS,CAAC;AAAA,EAAA;AAE5D;;;;;;"}
+{"version":3,"file":"age-axis.cjs","sources":["../src/age-axis.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n  SVG,\n  ColumnAxis,\n  ColumnContext,\n  ColumnAxisType,\n  AgeAxis,\n} from \"@macrostrat/column-components\";\nimport { useContext } from \"react\";\nimport styles from \"./age-axis.module.sass\";\nimport { useCompositeScale, useMacrostratColumnData } from \"./data-provider\";\nimport { Parenthetical } from \"@macrostrat/data-components\";\nimport { AgeLabel } from \"./unit-details\";\nimport { PackageScaleLayoutData } from \"./prepare-units\";\n\nconst h = hyper.styled(styles);\n\nconst AgeAxisCore = ({ ticks, tickSpacing = 40, showDomain = false }) => {\n  const { pixelHeight } = useContext(ColumnContext);\n  // A tick roughly every 40 pixels\n  let v = Math.max(Math.round(pixelHeight / tickSpacing), 1);\n\n  return h(\"g.axis\", { transform: \"translate(20 0)\" }, [\n    h(ColumnAxis, {\n      ticks: v,\n      showDomain,\n    }),\n  ]);\n};\n\nexport function VerticalAxisLabel(props) {\n  const { label = \"Age\", unit = \"Ma\", className, height } = props;\n  return h(\n    \"div.column-axis-label.age-axis-label\",\n    { className, style: { height } },\n    [\n      label,\n      \" \",\n      h.if(unit)(Parenthetical, { className: \"age-axis-unit\" }, unit),\n    ],\n  );\n}\n\ninterface CompositeAgeAxisProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function CompositeAgeAxis(rest: CompositeAgeAxisProps) {\n  const { axisType, sections, totalHeight } = useMacrostratColumnData();\n\n  const packages = sections.map((section) => {\n    return {\n      key: `section-${section.section_id}`,\n      ...section.scaleInfo,\n    };\n  });\n\n  return h(CompositeAgeAxisCore, {\n    axisType,\n    packages,\n    totalHeight,\n    ...rest,\n  });\n}\n\nexport function ApproximateHeightAxis(rest: CompositeAgeAxisProps) {\n  /** Axis to show approximate height based on dynamic column scales */\n  const { axisType, sections, totalHeight } = useMacrostratColumnData();\n\n  const packages = sections.map((section) => {\n    const { scaleInfo } = section;\n    if (scaleInfo.heightScale == null) {\n      throw new Error(\"No height scale available for section\");\n    }\n    return {\n      key: `section-${section.section_id}`,\n      ...scaleInfo,\n      scale: scaleInfo.heightScale, // Use height scale instead of age scale\n      // This only works with dynamic columns\n    };\n  });\n\n  return h(CompositeAgeAxisCore, {\n    axisType,\n    axisLabel: \"Approx. height\",\n    axisUnit: \"m\",\n    packages,\n    totalHeight,\n    ...rest,\n  });\n}\n\nexport interface CompositeStratigraphicScaleInfo extends CompositeAgeAxisProps {\n  axisType: ColumnAxisType;\n  axisLabel?: string;\n  axisUnit?: string;\n  totalHeight: number;\n  packages: PackageScaleLayoutData[];\n}\n\nexport function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {\n  const { axisType, axisLabel, axisUnit, totalHeight, packages, ...rest } =\n    props;\n\n  if (axisType == ColumnAxisType.ORDINAL) {\n    return null;\n  }\n\n  let _axisLabel: string = axisLabel ?? \"Age\";\n  let _axisUnit = axisUnit ?? \"Ma\";\n  if (axisType == ColumnAxisType.DEPTH) {\n    _axisLabel = \"Depth\";\n    _axisUnit = \"m\";\n  } else if (axisType == ColumnAxisType.HEIGHT) {\n    _axisLabel = \"Height\";\n    _axisUnit = \"m\";\n  }\n\n  return h(\"div.composite-age-axis\", rest, [\n    h(VerticalAxisLabel, {\n      label: _axisLabel,\n      unit: _axisUnit,\n      height: totalHeight,\n    }),\n    h(\n      SVG,\n      {\n        className: \"age-axis-column\",\n        style: { width: `22px`, height: `${totalHeight}px` },\n        width: 22,\n        height: totalHeight,\n      },\n      packages.map((group, i) => {\n        const { key, scale } = group;\n\n        return h(AgeAxis, {\n          key,\n          className: \"age-axis\",\n          scale,\n          tickSizeOuter: 3,\n        });\n      }),\n    ),\n  ]);\n}\n\nexport function AgeCursor({ age }) {\n  /** A cursor that shows the age at a specific point on the age axis. */\n  const scale = useCompositeScale();\n  const heightPx = scale(age);\n\n  if (age == null || heightPx == null) {\n    return null;\n  }\n\n  return h(\n    \"div.age-cursor\",\n    {\n      style: {\n        top: heightPx,\n      },\n    },\n    [h(\"div.line\"), h(AgeLabel, { age, className: \"label\" })],\n  );\n}\n"],"names":["hyper","styles","Parenthetical","useMacrostratColumnData","ColumnAxisType","SVG","AgeAxis","useCompositeScale","AgeLabel"],"mappings":"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"}

package/dist/age-axis.js

@@ -3,7 +3,7 @@ import { ColumnAxisType, SVG, AgeAxis } from "@macrostrat/column-components";
 import "react";
 import h$2 from "./age-axis.module.sass.js";
 import { Parenthetical } from "@macrostrat/data-components";
-import { AgeLabel } from "./unit-details/panel.js";
+import { AgeLabel } from "./unit-details/age-range.js";
 import { useCompositeScale, useMacrostratColumnData } from "./data-provider/store.js";
 const h = h$1.styled(h$2);
 function VerticalAxisLabel(props) {

package/dist/column-views.css

@@ -74,138 +74,23 @@
   position: relative;
   display: flex;
   flex-direction: row;
-}._legend-panel-header_128wy_1 {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5em;
-  border-bottom: 1px solid var(--panel-rule-color);
-  position: sticky;
-  top: 0;
-  background-color: var(--panel-secondary-background-color);
-  padding: 0.5em 1em;
-  z-index: 50;
-  min-height: 45px;
-  overflow: hidden;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15 {
+}._interval-proportions_1ibvp_1 {
+  display: inline-flex;
+  flex-flow: row wrap;
   gap: 0.5em;
+  text-align: right;
   align-items: baseline;
-  margin: 0;
-  flex-grow: 1;
-  z-index: 5;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15:hover ._hidden-actions-container_128wy_22 {
-  visibility: visible;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15 h1, ._legend-panel-header_128wy_1 ._title-container_128wy_15 h2, ._legend-panel-header_128wy_1 ._title-container_128wy_15 h3 {
-  display: inline;
-  margin: 0;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15 ._hidden-actions-container_128wy_22 {
-  visibility: hidden;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15 button {
-  transform: translateY(0px);
-}
-._legend-panel-header_128wy_1 code {
-  font-size: 0.9em;
-  color: var(--secondary-color);
-}
-._legend-panel-header_128wy_1 ._unit-id_128wy_39:before {
-  content: "#";
-  color: var(--secondary-color);
-}
-._legend-panel-header_128wy_1 ._spacer_128wy_43 {
-  flex: 1;
-}
-
-._unit-details-panel_128wy_47 {
-  display: flex;
-  flex-direction: column;
-}
-._unit-details-panel_128wy_47 ._unit-details-content-holder_128wy_51 {
-  flex: 1;
-  overflow-y: scroll;
-}
-
-._unit-details-content_128wy_51 {
-  position: relative;
-  margin: 1em;
-}
-
-._units-list_128wy_61 ._item_128wy_61:after {
-  content: ", ";
-}
-._units-list_128wy_61 ._item_128wy_61:last-child:after {
-  content: "";
 }
 
-._proportion_128wy_68, ._sep_128wy_68, ._no-units_128wy_68, ._strat-name-text_128wy_68 {
-  color: var(--secondary-color);
-  font-style: italic;
-}
-
-._strat-name-id_128wy_73, ._identifier_128wy_73 {
-  font-family: var(--monospace-font);
-  color: var(--secondary-color);
-}
-._strat-name-id_128wy_73::before, ._identifier_128wy_73::before {
-  content: "#";
-  color: var(--tertiary-color);
-}
-
-._color-swatch_128wy_82 {
-  width: 1em;
-  height: 1em;
-  border-radius: 0.2em;
-  margin-right: 0.2em;
-  border: 1px solid var(--panel-rule-color);
-  display: inline-block;
-}
-
-._refs_128wy_91 {
-  list-style: none;
-  margin: 0;
-  padding-left: 0;
-}
-
-._interval-proportions_128wy_97 {
-  flex-grow: 1;
-  width: 100%;
-  text-align: right;
-}
-._interval-proportions_128wy_97 ._discourage-break_128wy_102 {
+._interval-proportions_1ibvp_1, ._discourage-break_1ibvp_9 {
+  align-items: baseline;
   white-space: nowrap;
-}
-._interval-proportions_128wy_97 ._sep_128wy_68 {
-  margin: 0 0.3em;
-}
-
-._clickable_128wy_109 {
-  cursor: pointer;
-}
-
-._hidden-actions-container_128wy_22 {
-  min-width: 0;
-  display: inline-block;
-  width: 0;
-  position: relative;
+  display: inline-flex;
+  gap: 0.5em;
 }
 
-._hidden-actions_128wy_22 {
-  padding-left: 1em;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-  background-color: var(--panel-secondary-background-color);
-  z-index: 50;
-  position: relative;
-  bottom: 0;
-}
-._hidden-actions_128wy_22 button {
-  color: var(--secondary-color) !important;
+._sep_1ibvp_16 {
+  color: var(--secondary-color);
 }._column-container_15bga_1, body.light-mode ._column-container_15bga_1 {
   --column-background-color: var(--background-color, #fff);
   --column-stroke-color: var(--text-emphasized-color, #000);
@@ -428,6 +313,126 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
 ._legend-json-view_4jzei_30 {
   padding-left: 0;
   margin-left: -0.5em;
+}._legend-panel-header_ue390_1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5em;
+  border-bottom: 1px solid var(--panel-rule-color);
+  position: sticky;
+  top: 0;
+  background-color: var(--panel-secondary-background-color);
+  padding: 0.5em 1em;
+  z-index: 50;
+  min-height: 45px;
+  overflow: hidden;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15 {
+  gap: 0.5em;
+  align-items: baseline;
+  margin: 0;
+  flex-grow: 1;
+  z-index: 5;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15:hover ._hidden-actions-container_ue390_22 {
+  visibility: visible;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15 h1, ._legend-panel-header_ue390_1 ._title-container_ue390_15 h2, ._legend-panel-header_ue390_1 ._title-container_ue390_15 h3 {
+  display: inline;
+  margin: 0;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15 ._hidden-actions-container_ue390_22 {
+  visibility: hidden;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15 button {
+  transform: translateY(0px);
+}
+._legend-panel-header_ue390_1 code {
+  font-size: 0.9em;
+  color: var(--secondary-color);
+}
+._legend-panel-header_ue390_1 ._unit-id_ue390_39:before {
+  content: "#";
+  color: var(--secondary-color);
+}
+._legend-panel-header_ue390_1 ._spacer_ue390_43 {
+  flex: 1;
+}
+
+._unit-details-panel_ue390_47 {
+  display: flex;
+  flex-direction: column;
+}
+._unit-details-panel_ue390_47 ._unit-details-content-holder_ue390_51 {
+  flex: 1;
+  overflow-y: scroll;
+}
+
+._unit-details-content_ue390_51 {
+  position: relative;
+  margin: 1em;
+}
+
+._units-list_ue390_61 ._item_ue390_61:after {
+  content: ", ";
+}
+._units-list_ue390_61 ._item_ue390_61:last-child:after {
+  content: "";
+}
+
+._proportion_ue390_68, ._sep_ue390_68, ._no-units_ue390_68, ._strat-name-text_ue390_68 {
+  color: var(--secondary-color);
+  font-style: italic;
+}
+
+._strat-name-id_ue390_73, ._identifier_ue390_73 {
+  font-family: var(--monospace-font);
+  color: var(--secondary-color);
+}
+._strat-name-id_ue390_73::before, ._identifier_ue390_73::before {
+  content: "#";
+  color: var(--tertiary-color);
+}
+
+._color-swatch_ue390_82 {
+  width: 1em;
+  height: 1em;
+  border-radius: 0.2em;
+  margin-right: 0.2em;
+  border: 1px solid var(--panel-rule-color);
+  display: inline-block;
+}
+
+._refs_ue390_91 {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+._clickable_ue390_97 {
+  cursor: pointer;
+}
+
+._hidden-actions-container_ue390_22 {
+  min-width: 0;
+  display: inline-block;
+  width: 0;
+  position: relative;
+}
+
+._hidden-actions_ue390_22 {
+  padding-left: 1em;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  background-color: var(--panel-secondary-background-color);
+  z-index: 50;
+  position: relative;
+  bottom: 0;
+}
+._hidden-actions_ue390_22 button {
+  color: var(--secondary-color) !important;
 }._boundary-age-model_16scl_1 {
   top: 0;
   left: 0;

package/dist/index.cjs

@@ -6,9 +6,10 @@ const index$6 = require("./prepare-units/index.cjs");
 const column = require("./column.cjs");
 const ageModelOverlay = require("./age-model-overlay.cjs");
 const notes = require("./notes.cjs");
-const panel = require("./unit-details/panel.cjs");
+const ageRange = require("./unit-details/age-range.cjs");
 const composite = require("./units/composite.cjs");
 const base = require("./facets/measurements/base.cjs");
+const panel = require("./unit-details/panel.cjs");
 const layers = require("./maps/column-navigation/svg/layers.cjs");
 const core = require("./maps/column-correlation/core.cjs");
 const state = require("./maps/column-correlation/state.cjs");
@@ -56,14 +57,12 @@ exports.ColumnContainer = column.ColumnContainer;
 exports.BoundaryAgeModelOverlay = ageModelOverlay.BoundaryAgeModelOverlay;
 exports.ComputedSurfacesOverlay = ageModelOverlay.ComputedSurfacesOverlay;
 exports.ColumnNotes = notes.ColumnNotes;
-exports.AgeLabel = panel.AgeLabel;
-exports.ClickableText = panel.ClickableText;
-exports.Duration = panel.Duration;
-exports.Identifier = panel.Identifier;
-exports.LegendPanelHeader = panel.LegendPanelHeader;
-exports.ReferencesField = panel.ReferencesField;
-exports.UnitDetailsFeature = panel.UnitDetailsFeature;
-exports.UnitDetailsPanel = panel.UnitDetailsPanel;
+exports.AgeField = ageRange.AgeField;
+exports.AgeLabel = ageRange.AgeLabel;
+exports.Duration = ageRange.Duration;
+exports.IntervalProportions = ageRange.IntervalProportions;
+exports.getAge = ageRange.getAge;
+exports.getAgeRange = ageRange.getAgeRange;
 exports.AnnotatedUnitsColumn = composite.AnnotatedUnitsColumn;
 exports.ColumnNotesProvider = composite.ColumnNotesProvider;
 exports.CompositeUnitComponent = composite.CompositeUnitComponent;
@@ -76,6 +75,13 @@ exports.TruncatedList = base.TruncatedList;
 exports.groupNotesByPixelDistance = base.groupNotesByPixelDistance;
 exports.mergeHeightRanges = base.mergeHeightRanges;
 exports.standardizeMeasurementHeight = base.standardizeMeasurementHeight;
+exports.ClickableText = panel.ClickableText;
+exports.Identifier = panel.Identifier;
+exports.LegendPanelHeader = panel.LegendPanelHeader;
+exports.ReferencesField = panel.ReferencesField;
+exports.ThicknessField = panel.ThicknessField;
+exports.UnitDetailsFeature = panel.UnitDetailsFeature;
+exports.UnitDetailsPanel = panel.UnitDetailsPanel;
 exports.ColumnCenters = layers.ColumnCenters;
 exports.ColumnFeatures = layers.ColumnFeatures;
 exports.ColumnKeyboardNavigation = layers.ColumnKeyboardNavigation;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -4,9 +4,10 @@ import { prepareColumnUnits, usePreparedColumnUnits } from "./prepare-units/inde
 import { Column, ColumnBasicInfo, ColumnContainer } from "./column.js";
 import { BoundaryAgeModelOverlay, ComputedSurfacesOverlay } from "./age-model-overlay.js";
 import { ColumnNotes } from "./notes.js";
-import { AgeLabel, ClickableText, Duration, Identifier, LegendPanelHeader, ReferencesField, UnitDetailsFeature, UnitDetailsPanel } from "./unit-details/panel.js";
+import { AgeField, AgeLabel, Duration, IntervalProportions, getAge, getAgeRange } from "./unit-details/age-range.js";
 import { AnnotatedUnitsColumn, ColumnNotesProvider, CompositeUnitComponent, CompositeUnitsColumn, LabelTrackerProvider, SectionLabelsColumn, TrackedLabeledUnit } from "./units/composite.js";
 import { BaseMeasurementsColumn, TruncatedList, groupNotesByPixelDistance, mergeHeightRanges, standardizeMeasurementHeight } from "./facets/measurements/base.js";
+import { ClickableText, Identifier, LegendPanelHeader, ReferencesField, ThicknessField, UnitDetailsFeature, UnitDetailsPanel } from "./unit-details/panel.js";
 import { ColumnCenters, ColumnFeatures, ColumnKeyboardNavigation, Columns, CurrentColumn, MeasurementsLayer } from "./maps/column-navigation/svg/layers.js";
 import { ColumnCorrelationMap } from "./maps/column-correlation/core.js";
 import { ColumnCorrelationProvider, useCorrelationMapStore } from "./maps/column-correlation/state.js";
@@ -35,6 +36,7 @@ import { parseLineFromString, stringifyLine } from "./correlation-chart/hash-str
 import { preprocessUnits } from "./prepare-units/helpers.js";
 export {
   AgeCursor,
+  AgeField,
   AgeLabel,
   AnnotatedUnitsColumn,
   ApproximateHeightAxis,
@@ -73,6 +75,7 @@ export {
   HybridScaleType,
   Identifier,
   InsetMap,
+  IntervalProportions,
   IsotopesColumn,
   IsotopesDataset,
   LabelTrackerProvider,
@@ -93,6 +96,7 @@ export {
   SGPMeasurementsColumn,
   SectionLabelsColumn,
   SimpleUnitsColumn,
+  ThicknessField,
   TrackedLabeledUnit,
   TruncatedList,
   UnitComponent,
@@ -116,6 +120,8 @@ export {
   ensureArray,
   ensureRealFloat,
   flattenLithologies,
+  getAge,
+  getAgeRange,
   getMixedColorForData,
   getMixedUnitColor,
   getPositionWithinUnit,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/section.cjs

@@ -9,7 +9,7 @@ const dataProvider = require("@macrostrat/data-provider");
 const dataComponents = require("@macrostrat/data-components");
 const store = require("./data-provider/store.cjs");
 const composite = require("./units/composite.cjs");
-const panel = require("./unit-details/panel.cjs");
+const ageRange = require("./unit-details/age-range.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const h__default = /* @__PURE__ */ _interopDefault(h$1);
 const h = h__default.default.styled(column_module.default);
@@ -254,7 +254,7 @@ function Unconformity({
     const _txt = ageGap.toLocaleString("en-US", { maximumFractionDigits });
     val = h(dataComponents.Value, { value: _txt, unit: "m" });
   } else {
-    val = h(panel.Duration, { value: ageGap, maximumFractionDigits });
+    val = h(ageRange.Duration, { value: ageGap, maximumFractionDigits });
   }
   let prefix = null;
   if (verbose) {

package/dist/section.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"section.cjs","sources":["../src/section.ts"],"sourcesContent":["import {\n  CompositeUnitsColumn,\n  LabelTrackerProvider,\n  SectionLabelsColumn,\n} from \"./units\";\nimport { ReactNode, FunctionComponent, useMemo } from \"react\";\nimport {\n  Timescale,\n  TimescaleOrientation,\n  useMacrostratIntervals,\n} from \"@macrostrat/timescale\";\nimport { ColumnAxisType, SVG } from \"@macrostrat/column-components\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./column.module.sass\";\nimport {\n  useMacrostratColumnData,\n  useMacrostratUnits,\n  MacrostratColumnProvider,\n} from \"./data-provider\";\nimport { useMacrostratBaseURL } from \"@macrostrat/data-provider\";\nimport { Duration } from \"./unit-details\";\nimport { Value } from \"@macrostrat/data-components\";\nimport type { ExtUnit, PackageScaleLayoutData } from \"./prepare-units/types\";\n\nconst h = hyper.styled(styles);\n\nexport interface SectionSharedProps {\n  unitComponent?: FunctionComponent<any>;\n  unitComponentProps?: any;\n  showLabels?: boolean;\n  width?: number;\n  columnWidth?: number;\n  children?: ReactNode;\n  showLabelColumn?: boolean;\n  axisType?: ColumnAxisType;\n  className?: string;\n  clipUnits?: boolean;\n  maxInternalColumns?: number;\n  // Space between sections\n  verticalSpacing?: number;\n  // Whether to render unconformity labels\n  unconformityLabels?: boolean;\n}\n\nexport interface SectionProps extends SectionSharedProps {\n  units: ExtUnit[];\n  scaleInfo: PackageScaleLayoutData;\n}\n\nexport function SectionsColumn(props: SectionSharedProps) {\n  const {\n    unconformityLabels = true,\n    unitComponent,\n    unitComponentProps,\n    showLabels = true,\n    width = 300,\n    columnWidth = 150,\n    showLabelColumn = true,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const units = useMacrostratUnits();\n\n  // Get a unique key for the column\n  const key = units[0]?.col_id;\n\n  return h(LabelTrackerProvider, { units, key }, [\n    h(SectionUnitsColumn, {\n      width: columnWidth,\n      unitComponent,\n      unitComponentProps,\n      showLabels,\n      clipUnits,\n      maxInternalColumns,\n      unconformityLabels,\n    }),\n    h.if(showLabelColumn)(SectionLabelsColumn, {\n      width: width - columnWidth,\n    }),\n  ]);\n}\n\nfunction SectionUnitsColumn(props: SectionSharedProps) {\n  const {\n    width,\n    showLabels,\n    unitComponent,\n    unitComponentProps,\n    clipUnits,\n    maxInternalColumns,\n    axisType,\n    unconformityLabels = true,\n  } = props;\n\n  const { sections, totalHeight } = useMacrostratColumnData();\n\n  const scaleData: PackageScaleLayoutData[] = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  const innerWidth = width - 2;\n\n  return h(\"div.section-units-container\", { style: { width } }, [\n    h(\n      SVG,\n      {\n        className: \"sections\",\n        height: totalHeight,\n        innerWidth,\n        paddingH: 1,\n      },\n      sections.map((group) => {\n        const { units, scaleInfo, section_id } = group;\n\n        const key = `section-${section_id}`;\n        return h(\n          SectionUnits,\n          {\n            units,\n            scaleInfo,\n            key,\n            unitComponent,\n            unitComponentProps,\n            showLabels,\n            width: innerWidth,\n            clipUnits,\n            maxInternalColumns,\n          }, // This unconformity is with the section _above_\n        );\n      }),\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width,\n      sections: scaleData,\n      verbose: false,\n    }),\n  ]);\n}\n\nfunction SectionUnits(props: SectionProps) {\n  // Section with \"squishy\" timescale\n  const {\n    units,\n    scaleInfo,\n    unitComponent,\n    showLabels = true,\n    width = 300,\n    unitComponentProps,\n    className,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const { domain, pixelScale, pixelHeight, scale } = scaleInfo;\n\n  /** Ensure that we can arrange units into the maximum number\n   * of columns defined by unitComponentProps, but that we don't\n   * use more than necessary.\n   */\n  const _unitComponentProps = useMemo(() => {\n    return {\n      ...unitComponentProps,\n      nColumns: Math.min(\n        maxInternalColumns ?? Math.floor(width / 10),\n        unitComponentProps?.nColumns ?? Infinity,\n        Math.max(...units.map((d) => d.column)) + 1,\n      ),\n      //axisType,\n    };\n  }, [units, unitComponentProps, maxInternalColumns, width]);\n\n  const style = {\n    \"--section-height\": `${pixelHeight}px`,\n    \"--section-width\": `${width}px`,\n  };\n\n  return h(\n    \"g.section\",\n    { className, style, transform: `translate(0 ${scaleInfo.offset})` },\n    h(\n      MacrostratColumnProvider,\n      {\n        units,\n        domain,\n        pixelScale, // Actually pixels per myr,\n        scale,\n      },\n      h(CompositeUnitsColumn, {\n        width,\n        showLabels,\n        unitComponent,\n        unitComponentProps: _unitComponentProps,\n        clipToFrame: clipUnits,\n      }),\n    ),\n  );\n}\n\ninterface CompositeTimescaleProps {\n  levels?: [number, number] | number;\n  unconformityLabels?: boolean;\n}\n\nexport function CompositeTimescale(props: CompositeTimescaleProps) {\n  const { sections } = useMacrostratColumnData();\n  const sectionScales = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  return h(CompositeTimescaleCore, {\n    packages: sectionScales,\n    ...props,\n  });\n}\n\ntype CompositeTimescaleCoreProps = CompositeTimescaleProps & {\n  packages: PackageScaleLayoutData[];\n};\n\nexport function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {\n  const { levels = 3, packages, unconformityLabels = false } = props;\n\n  // Use intervals from Macrostrat API\n  const baseURL = useMacrostratBaseURL();\n  const intervals = useMacrostratIntervals(baseURL);\n\n  let _levels: [number, number];\n  if (typeof levels === \"number\") {\n    // If levels is a number, use the most common starting level\n    _levels = [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];\n  } else {\n    _levels = levels;\n  }\n\n  const nCols = _levels[1] - _levels[0] + 1;\n\n  return h(\"div.timescale-column\", [\n    h(\n      \"div.timescales\",\n      packages.map((group) => {\n        const { pixelHeight, paddingTop, key, scale } = group;\n        return h(\n          \"div.timescale-container\",\n          { style: { paddingTop, \"--timescale-level-count\": nCols }, key },\n          [\n            h(Timescale, {\n              orientation: TimescaleOrientation.VERTICAL,\n              length: pixelHeight,\n              levels: _levels,\n              absoluteAgeScale: true,\n              showAgeAxis: false,\n              scale,\n              intervals,\n            }),\n          ],\n        );\n      }),\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width: \"100%\",\n      sections: packages,\n      className: \"unconformity-labels\",\n      axisType: ColumnAxisType.AGE,\n    }),\n  ]);\n}\n\nexport function UnconformityLabels(props: {\n  width: string | number;\n  sections: PackageScaleLayoutData[];\n  axisType?: ColumnAxisType;\n  className?: string;\n  verbose?: boolean;\n}) {\n  const { width, sections, className, axisType, verbose } = props;\n\n  return h(\n    \"div.unconformity-labels\",\n    {\n      style: {\n        width,\n      },\n      className,\n    },\n    sections.map((scaleInfo, i) => {\n      const lastGroup = sections[i - 1];\n      const top = scaleInfo.offset - scaleInfo.paddingTop;\n      const upperAge = lastGroup?.domain[0];\n      const lowerAge = scaleInfo.domain[1];\n      return h(Unconformity, {\n        axisType,\n        upperAge,\n        lowerAge,\n        style: {\n          width,\n          height: scaleInfo.paddingTop,\n          top,\n        },\n        verbose,\n      });\n    }),\n  );\n}\n\nfunction Unconformity({\n  upperAge,\n  lowerAge,\n  style,\n  axisType,\n  verbose = false,\n}) {\n  if (upperAge == null || lowerAge == null) {\n    return null;\n  }\n\n  const ageGap = Math.abs(upperAge - lowerAge);\n\n  let maximumFractionDigits = 0;\n\n  let className: string = null;\n  if (ageGap > 1000) {\n    className = \"giga\";\n  } else if (ageGap > 100) {\n    className = \"mega\";\n  } else if (ageGap > 10) {\n    className = \"large\";\n  } else if (ageGap < 1) {\n    className = \"small\";\n    maximumFractionDigits = 2;\n  } else {\n    maximumFractionDigits = 1;\n  }\n\n  let val: ReactNode;\n  if (axisType === ColumnAxisType.DEPTH || axisType === ColumnAxisType.HEIGHT) {\n    const _txt = ageGap.toLocaleString(\"en-US\", { maximumFractionDigits });\n    val = h(Value, { value: _txt, unit: \"m\" });\n  } else {\n    val = h(Duration, { value: ageGap, maximumFractionDigits });\n  }\n\n  let prefix: ReactNode = null;\n  if (verbose) {\n    prefix = h([\" \", h(\"span.prefix\", \" gap\")]);\n  }\n\n  return h(\"div.unconformity\", { style, className }, [\n    h(\"div.unconformity-inner\", h(\"div.unconformity-text\", [val, prefix])),\n  ]);\n}\n"],"names":["hyper","styles","useMacrostratUnits","LabelTrackerProvider","SectionLabelsColumn","useMacrostratColumnData","SVG","useMemo","MacrostratColumnProvider","CompositeUnitsColumn","useMacrostratBaseURL","useMacrostratIntervals","Timescale","TimescaleOrientation","ColumnAxisType","Value","Duration"],"mappings":"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"}
+{"version":3,"file":"section.cjs","sources":["../src/section.ts"],"sourcesContent":["import {\n  CompositeUnitsColumn,\n  LabelTrackerProvider,\n  SectionLabelsColumn,\n} from \"./units\";\nimport { ReactNode, FunctionComponent, useMemo } from \"react\";\nimport {\n  Timescale,\n  TimescaleOrientation,\n  useMacrostratIntervals,\n} from \"@macrostrat/timescale\";\nimport { ColumnAxisType, SVG } from \"@macrostrat/column-components\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./column.module.sass\";\nimport {\n  useMacrostratColumnData,\n  useMacrostratUnits,\n  MacrostratColumnProvider,\n} from \"./data-provider\";\nimport { useMacrostratBaseURL } from \"@macrostrat/data-provider\";\nimport { Duration } from \"./unit-details\";\nimport { Value } from \"@macrostrat/data-components\";\nimport type { ExtUnit, PackageScaleLayoutData } from \"./prepare-units/types\";\n\nconst h = hyper.styled(styles);\n\nexport interface SectionSharedProps {\n  unitComponent?: FunctionComponent<any>;\n  unitComponentProps?: any;\n  showLabels?: boolean;\n  width?: number;\n  columnWidth?: number;\n  children?: ReactNode;\n  showLabelColumn?: boolean;\n  axisType?: ColumnAxisType;\n  className?: string;\n  clipUnits?: boolean;\n  maxInternalColumns?: number;\n  // Space between sections\n  verticalSpacing?: number;\n  // Whether to render unconformity labels\n  unconformityLabels?: boolean;\n}\n\nexport interface SectionProps extends SectionSharedProps {\n  units: ExtUnit[];\n  scaleInfo: PackageScaleLayoutData;\n}\n\nexport function SectionsColumn(props: SectionSharedProps) {\n  const {\n    unconformityLabels = true,\n    unitComponent,\n    unitComponentProps,\n    showLabels = true,\n    width = 300,\n    columnWidth = 150,\n    showLabelColumn = true,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const units = useMacrostratUnits();\n\n  // Get a unique key for the column\n  const key = units[0]?.col_id;\n\n  return h(LabelTrackerProvider, { units, key }, [\n    h(SectionUnitsColumn, {\n      width: columnWidth,\n      unitComponent,\n      unitComponentProps,\n      showLabels,\n      clipUnits,\n      maxInternalColumns,\n      unconformityLabels,\n    }),\n    h.if(showLabelColumn)(SectionLabelsColumn, {\n      width: width - columnWidth,\n    }),\n  ]);\n}\n\nfunction SectionUnitsColumn(props: SectionSharedProps) {\n  const {\n    width,\n    showLabels,\n    unitComponent,\n    unitComponentProps,\n    clipUnits,\n    maxInternalColumns,\n    axisType,\n    unconformityLabels = true,\n  } = props;\n\n  const { sections, totalHeight } = useMacrostratColumnData();\n\n  const scaleData: PackageScaleLayoutData[] = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  const innerWidth = width - 2;\n\n  return h(\"div.section-units-container\", { style: { width } }, [\n    h(\n      SVG,\n      {\n        className: \"sections\",\n        height: totalHeight,\n        innerWidth,\n        paddingH: 1,\n      },\n      sections.map((group) => {\n        const { units, scaleInfo, section_id } = group;\n\n        const key = `section-${section_id}`;\n        return h(\n          SectionUnits,\n          {\n            units,\n            scaleInfo,\n            key,\n            unitComponent,\n            unitComponentProps,\n            showLabels,\n            width: innerWidth,\n            clipUnits,\n            maxInternalColumns,\n          }, // This unconformity is with the section _above_\n        );\n      }),\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width,\n      sections: scaleData,\n      verbose: false,\n    }),\n  ]);\n}\n\nfunction SectionUnits(props: SectionProps) {\n  // Section with \"squishy\" timescale\n  const {\n    units,\n    scaleInfo,\n    unitComponent,\n    showLabels = true,\n    width = 300,\n    unitComponentProps,\n    className,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const { domain, pixelScale, pixelHeight, scale } = scaleInfo;\n\n  /** Ensure that we can arrange units into the maximum number\n   * of columns defined by unitComponentProps, but that we don't\n   * use more than necessary.\n   */\n  const _unitComponentProps = useMemo(() => {\n    return {\n      ...unitComponentProps,\n      nColumns: Math.min(\n        maxInternalColumns ?? Math.floor(width / 10),\n        unitComponentProps?.nColumns ?? Infinity,\n        Math.max(...units.map((d) => d.column)) + 1,\n      ),\n      //axisType,\n    };\n  }, [units, unitComponentProps, maxInternalColumns, width]);\n\n  const style = {\n    \"--section-height\": `${pixelHeight}px`,\n    \"--section-width\": `${width}px`,\n  };\n\n  return h(\n    \"g.section\",\n    { className, style, transform: `translate(0 ${scaleInfo.offset})` },\n    h(\n      MacrostratColumnProvider,\n      {\n        units,\n        domain,\n        pixelScale, // Actually pixels per myr,\n        scale,\n      },\n      h(CompositeUnitsColumn, {\n        width,\n        showLabels,\n        unitComponent,\n        unitComponentProps: _unitComponentProps,\n        clipToFrame: clipUnits,\n      }),\n    ),\n  );\n}\n\ninterface CompositeTimescaleProps {\n  levels?: [number, number] | number;\n  unconformityLabels?: boolean;\n}\n\nexport function CompositeTimescale(props: CompositeTimescaleProps) {\n  const { sections } = useMacrostratColumnData();\n  const sectionScales = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  return h(CompositeTimescaleCore, {\n    packages: sectionScales,\n    ...props,\n  });\n}\n\ntype CompositeTimescaleCoreProps = CompositeTimescaleProps & {\n  packages: PackageScaleLayoutData[];\n};\n\nexport function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {\n  const { levels = 3, packages, unconformityLabels = false } = props;\n\n  // Use intervals from Macrostrat API\n  const baseURL = useMacrostratBaseURL();\n  const intervals = useMacrostratIntervals(baseURL);\n\n  let _levels: [number, number];\n  if (typeof levels === \"number\") {\n    // If levels is a number, use the most common starting level\n    _levels = [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];\n  } else {\n    _levels = levels;\n  }\n\n  const nCols = _levels[1] - _levels[0] + 1;\n\n  return h(\"div.timescale-column\", [\n    h(\n      \"div.timescales\",\n      packages.map((group) => {\n        const { pixelHeight, paddingTop, key, scale } = group;\n        return h(\n          \"div.timescale-container\",\n          { style: { paddingTop, \"--timescale-level-count\": nCols }, key },\n          [\n            h(Timescale, {\n              orientation: TimescaleOrientation.VERTICAL,\n              length: pixelHeight,\n              levels: _levels,\n              absoluteAgeScale: true,\n              showAgeAxis: false,\n              scale,\n              intervals,\n            }),\n          ],\n        );\n      }),\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width: \"100%\",\n      sections: packages,\n      className: \"unconformity-labels\",\n      axisType: ColumnAxisType.AGE,\n    }),\n  ]);\n}\n\nexport function UnconformityLabels(props: {\n  width: string | number;\n  sections: PackageScaleLayoutData[];\n  axisType?: ColumnAxisType;\n  className?: string;\n  verbose?: boolean;\n}) {\n  const { width, sections, className, axisType, verbose } = props;\n\n  return h(\n    \"div.unconformity-labels\",\n    {\n      style: {\n        width,\n      },\n      className,\n    },\n    sections.map((scaleInfo, i) => {\n      const lastGroup = sections[i - 1];\n      const top = scaleInfo.offset - scaleInfo.paddingTop;\n      const upperAge = lastGroup?.domain[0];\n      const lowerAge = scaleInfo.domain[1];\n      return h(Unconformity, {\n        axisType,\n        upperAge,\n        lowerAge,\n        style: {\n          width,\n          height: scaleInfo.paddingTop,\n          top,\n        },\n        verbose,\n      });\n    }),\n  );\n}\n\nfunction Unconformity({\n  upperAge,\n  lowerAge,\n  style,\n  axisType,\n  verbose = false,\n}) {\n  if (upperAge == null || lowerAge == null) {\n    return null;\n  }\n\n  const ageGap = Math.abs(upperAge - lowerAge);\n\n  let maximumFractionDigits = 0;\n\n  let className: string = null;\n  if (ageGap > 1000) {\n    className = \"giga\";\n  } else if (ageGap > 100) {\n    className = \"mega\";\n  } else if (ageGap > 10) {\n    className = \"large\";\n  } else if (ageGap < 1) {\n    className = \"small\";\n    maximumFractionDigits = 2;\n  } else {\n    maximumFractionDigits = 1;\n  }\n\n  let val: ReactNode;\n  if (axisType === ColumnAxisType.DEPTH || axisType === ColumnAxisType.HEIGHT) {\n    const _txt = ageGap.toLocaleString(\"en-US\", { maximumFractionDigits });\n    val = h(Value, { value: _txt, unit: \"m\" });\n  } else {\n    val = h(Duration, { value: ageGap, maximumFractionDigits });\n  }\n\n  let prefix: ReactNode = null;\n  if (verbose) {\n    prefix = h([\" \", h(\"span.prefix\", \" gap\")]);\n  }\n\n  return h(\"div.unconformity\", { style, className }, [\n    h(\"div.unconformity-inner\", h(\"div.unconformity-text\", [val, prefix])),\n  ]);\n}\n"],"names":["hyper","styles","useMacrostratUnits","LabelTrackerProvider","SectionLabelsColumn","useMacrostratColumnData","SVG","useMemo","MacrostratColumnProvider","CompositeUnitsColumn","useMacrostratBaseURL","useMacrostratIntervals","Timescale","TimescaleOrientation","ColumnAxisType","Value","Duration"],"mappings":"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"}

package/dist/section.js

@@ -7,7 +7,7 @@ import { useMacrostratBaseURL } from "@macrostrat/data-provider";
 import { Value } from "@macrostrat/data-components";
 import { useMacrostratColumnData, useMacrostratUnits, MacrostratColumnProvider } from "./data-provider/store.js";
 import { LabelTrackerProvider, SectionLabelsColumn, CompositeUnitsColumn } from "./units/composite.js";
-import { Duration } from "./unit-details/panel.js";
+import { Duration } from "./unit-details/age-range.js";
 const h = h$1.styled(h$2);
 function SectionsColumn(props) {
   const {