npm - @macrostrat/column-views - Versions diffs - 1.0.1 → 1.0.2 - Mend

@macrostrat/column-views 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,8 +1,12 @@
 # Changelog
-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).
+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).
+## [1.0.2] - 2025-02-16
+Improve column styles
 ## [1.0.1] - 2025-02-15

package/dist/esm/{column.97e31037.js → column.8dd26e1a.js} RENAMED Viewed

@@ -1,10 +1,10 @@
-import $bTsJU$columnmodule9b8ce99djs from "./column.module.9b8ce99d.js";
-import "./column.module.b5e18f0c.css";
+import $bTsJU$columnmodulee632868ajs from "./column.module.e632868a.js";
+import "./column.module.039d872c.css";
 import {TrackedLabeledUnit as $8c8238faa5cde49c$export$f613830566442374} from "./composite.608a4ca2.js";
 import {UnitSelectionProvider as $4d5d1c15f39f6a14$export$f19d75b1d4b676a4, useUnitSelectionDispatch as $4d5d1c15f39f6a14$export$77a278d5ca56e309, UnitKeyboardNavigation as $4d5d1c15f39f6a14$export$70f5ee19650fc7d1} from "./selection.bbf26d0e.js";
 import {UnitSelectionPopover as $80d4db83aa9ba807$export$db1115efab13710d} from "./selection-popover.17d1bd55.js";
 import {MacrostratUnitsProvider as $1fcb9b8d7da394a3$export$e5fe24ae4f287040} from "./store.25eaa168.js";
-import {Section as $7d0f52717c0de7e1$export$6e2c8f0811a474ce} from "./section.2513d610.js";
+import {Section as $7d0f52717c0de7e1$export$6e2c8f0811a474ce} from "./section.cc1b1100.js";
 import {ensureArray as $2c60de495788ce61$export$d0c8ecbd4ed8940c, groupUnitsIntoSections as $2c60de495788ce61$export$dfbd00399d639b4c, _mergeOverlappingSections as $2c60de495788ce61$export$ec445c47b6e5d2d} from "./helpers.8a03cfc7.js";
 import {ColumnLayoutContext as $bTsJU$ColumnLayoutContext} from "@macrostrat/column-components";
 import {hyperStyled as $bTsJU$hyperStyled} from "@macrostrat/hyper";
@@ -27,7 +27,7 @@ function $parcel$interopDefault(a) {
-const $2118f0266dc7e955$var$h = (0, $bTsJU$hyperStyled)((0, ($parcel$interopDefault($bTsJU$columnmodule9b8ce99djs))));
+const $2118f0266dc7e955$var$h = (0, $bTsJU$hyperStyled)((0, ($parcel$interopDefault($bTsJU$columnmodulee632868ajs))));
 function $2118f0266dc7e955$export$48a4cacf2b7a4441({ division: division, nColumns: nColumns = 2, ...rest }) {
     const { width: width } = (0, $bTsJU$useContext)((0, $bTsJU$ColumnLayoutContext));
     //const nCols = Math.min(nColumns, division.overlappingUnits.length+1)
@@ -146,4 +146,4 @@ function $2118f0266dc7e955$var$_Column(props) {
 export {$2118f0266dc7e955$export$48a4cacf2b7a4441 as UnitComponent, $2118f0266dc7e955$export$816b5d811295e6bc as Column};
-//# sourceMappingURL=column.97e31037.js.map
+//# sourceMappingURL=column.8dd26e1a.js.map

package/dist/esm/{column.97e31037.js.map → column.8dd26e1a.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/column-views/src/column.ts"],"sourcesContent":["import {\n ColumnAxisType,\n ColumnLayoutContext,\n ColumnProvider,\n} from \"@macrostrat/column-components\";\nimport { hyperStyled } from \"@macrostrat/hyper\";\nimport { useDarkMode } from \"@macrostrat/ui-components\";\nimport classNames from \"classnames\";\nimport { createRef, RefObject, useContext, useMemo, useState } from \"react\";\nimport styles from \"./column.module.sass\";\nimport {\n TrackedLabeledUnit,\n UnitKeyboardNavigation,\n UnitSelectionProvider,\n useUnitSelectionDispatch,\n} from \"./units\";\nimport { SectionInfo } from \"./section\";\nimport { RectBounds } from \"./units/boxes\";\nimport { UnitSelectionPopover } from \"./selection-popover\";\nimport { MacrostratUnitsProvider } from \"./store\";\nimport { IColumnProps, Section } from \"./section\";\nimport {\n _mergeOverlappingSections,\n ensureArray,\n groupUnitsIntoSections,\n} from \"./helpers\";\n\nconst h = hyperStyled(styles);\n\nexport function UnitComponent({ division, nColumns = 2, ...rest }) {\n const { width } = useContext(ColumnLayoutContext);\n\n //const nCols = Math.min(nColumns, division.overlappingUnits.length+1)\n //console.log(division);\n return h(TrackedLabeledUnit, {\n division,\n ...rest,\n width: division.overlappingUnits.length > 0 ? width / nColumns : width,\n x: (division.column * width) / nColumns,\n });\n}\n\nfunction Unconformity({ upperUnits = [], lowerUnits = [], style }) {\n if (upperUnits.length == 0 \|\| lowerUnits.length == 0) {\n return null;\n }\n\n const ageGap = lowerUnits[0].t_age - upperUnits[upperUnits.length - 1].b_age;\n\n return h(\"div.unconformity\", { style }, [\n h(\"div.unconformity-text\", `${ageGap.toFixed(1)} Ma`),\n ]);\n}\n\nfunction sectionClassName(section: SectionInfo) {\n return `section-${ensureArray(section.section_id).join(\"-\")}`;\n}\n\nexport interface ColumnProps extends IColumnProps {\n unconformityLabels?: boolean;\n className?: string;\n mergeOverlappingSections?: boolean;\n showLabelColumn?: boolean;\n columnRef?: RefObject<HTMLElement>;\n keyboardNavigation?: boolean;\n showUnitPopover?: boolean;\n t_age?: number;\n b_age?: number;\n}\n\nexport function Column(props: ColumnProps) {\n const { showUnitPopover = false, ...rest } = props;\n const ref = createRef<HTMLElement>();\n // Selected item position\n const [position, setPosition] = useState<RectBounds \| null>(null);\n\n if (!showUnitPopover) {\n return h(_Column, rest);\n }\n\n return h(\n UnitSelectionProvider,\n {\n onUnitSelected: (unit, target: SVGElement \| HTMLElement \| null) => {\n if (!showUnitPopover) return;\n\n if (unit == null) {\n setPosition(null);\n return;\n }\n const el: HTMLElement = ref.current;\n if (el == null \|\| target == null) return;\n const rect = el.getBoundingClientRect();\n const targetRect = target.getBoundingClientRect();\n setPosition({\n x: targetRect.left - rect.left,\n y: targetRect.top - rect.top,\n width: targetRect.width,\n height: targetRect.height,\n });\n },\n },\n h(\n _Column,\n { ...rest, columnRef: ref },\n h(UnitSelectionPopover, { position })\n )\n );\n}\n\nfunction _Column(props: Omit<ColumnProps, \"showUnitPopover\">) {\n const {\n data,\n unitComponent = UnitComponent,\n unconformityLabels = true,\n showLabels = true,\n width = 300,\n columnWidth = 150,\n className: baseClassName,\n showLabelColumn = true,\n mergeOverlappingSections = true,\n keyboardNavigation = false,\n columnRef,\n children,\n ...rest\n } = props;\n\n const darkMode = useDarkMode();\n const sectionGroups = useMemo(() => {\n let res = groupUnitsIntoSections(data);\n if (mergeOverlappingSections) {\n res = _mergeOverlappingSections(res);\n }\n return res;\n }, [data, mergeOverlappingSections]);\n\n const className = classNames(baseClassName, {\n \"dark-mode\": darkMode?.isEnabled ?? false,\n });\n\n // Clear unit selection on click outside of units, if we have a dispatch function\n const dispatch = useUnitSelectionDispatch();\n\n return h(\n \"div.column-container\",\n {\n className,\n onClick(evt) {\n dispatch?.(null, null, evt as any);\n },\n },\n h(MacrostratUnitsProvider, { units: data }, [\n h(\"div.column\", { ref: columnRef }, [\n h(\"div.age-axis-label\", \"Age (Ma)\"),\n h(\n \"div.main-column\",\n sectionGroups.map((group, i) => {\n const { section_id: id, units: data } = group;\n const lastGroup = sectionGroups[i - 1];\n return h([\n h.if(unconformityLabels)(Unconformity, {\n upperUnits: lastGroup?.units,\n lowerUnits: data,\n style: { width: showLabels ? columnWidth : width },\n }),\n h(`div.section`, { className: sectionClassName(group) }, [\n h(Section, {\n data,\n unitComponent,\n showLabels,\n width,\n columnWidth,\n showLabelColumn,\n ...rest,\n }),\n ]),\n ]);\n })\n ),\n h.if(keyboardNavigation)(UnitKeyboardNavigation, { units: data }),\n children,\n ]),\n ])\n );\n}\n"],"names":[],"version":3,"file":"column.~~97e31037~~.js.map"}
1	+ {"mappings":"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","sources":["packages/column-views/src/column.ts"],"sourcesContent":["import {\n ColumnAxisType,\n ColumnLayoutContext,\n ColumnProvider,\n} from \"@macrostrat/column-components\";\nimport { hyperStyled } from \"@macrostrat/hyper\";\nimport { useDarkMode } from \"@macrostrat/ui-components\";\nimport classNames from \"classnames\";\nimport { createRef, RefObject, useContext, useMemo, useState } from \"react\";\nimport styles from \"./column.module.sass\";\nimport {\n TrackedLabeledUnit,\n UnitKeyboardNavigation,\n UnitSelectionProvider,\n useUnitSelectionDispatch,\n} from \"./units\";\nimport { SectionInfo } from \"./section\";\nimport { RectBounds } from \"./units/boxes\";\nimport { UnitSelectionPopover } from \"./selection-popover\";\nimport { MacrostratUnitsProvider } from \"./store\";\nimport { IColumnProps, Section } from \"./section\";\nimport {\n _mergeOverlappingSections,\n ensureArray,\n groupUnitsIntoSections,\n} from \"./helpers\";\n\nconst h = hyperStyled(styles);\n\nexport function UnitComponent({ division, nColumns = 2, ...rest }) {\n const { width } = useContext(ColumnLayoutContext);\n\n //const nCols = Math.min(nColumns, division.overlappingUnits.length+1)\n //console.log(division);\n return h(TrackedLabeledUnit, {\n division,\n ...rest,\n width: division.overlappingUnits.length > 0 ? width / nColumns : width,\n x: (division.column * width) / nColumns,\n });\n}\n\nfunction Unconformity({ upperUnits = [], lowerUnits = [], style }) {\n if (upperUnits.length == 0 \|\| lowerUnits.length == 0) {\n return null;\n }\n\n const ageGap = lowerUnits[0].t_age - upperUnits[upperUnits.length - 1].b_age;\n\n return h(\"div.unconformity\", { style }, [\n h(\"div.unconformity-text\", `${ageGap.toFixed(1)} Ma`),\n ]);\n}\n\nfunction sectionClassName(section: SectionInfo) {\n return `section-${ensureArray(section.section_id).join(\"-\")}`;\n}\n\nexport interface ColumnProps extends IColumnProps {\n unconformityLabels?: boolean;\n className?: string;\n mergeOverlappingSections?: boolean;\n showLabelColumn?: boolean;\n columnRef?: RefObject<HTMLElement>;\n keyboardNavigation?: boolean;\n showUnitPopover?: boolean;\n t_age?: number;\n b_age?: number;\n}\n\nexport function Column(props: ColumnProps) {\n const { showUnitPopover = false, ...rest } = props;\n const ref = createRef<HTMLElement>();\n // Selected item position\n const [position, setPosition] = useState<RectBounds \| null>(null);\n\n if (!showUnitPopover) {\n return h(_Column, rest);\n }\n\n return h(\n UnitSelectionProvider,\n {\n onUnitSelected: (unit, target: SVGElement \| HTMLElement \| null) => {\n if (!showUnitPopover) return;\n\n if (unit == null) {\n setPosition(null);\n return;\n }\n const el: HTMLElement = ref.current;\n if (el == null \|\| target == null) return;\n const rect = el.getBoundingClientRect();\n const targetRect = target.getBoundingClientRect();\n setPosition({\n x: targetRect.left - rect.left,\n y: targetRect.top - rect.top,\n width: targetRect.width,\n height: targetRect.height,\n });\n },\n },\n h(\n _Column,\n { ...rest, columnRef: ref },\n h(UnitSelectionPopover, { position })\n )\n );\n}\n\nfunction _Column(props: Omit<ColumnProps, \"showUnitPopover\">) {\n const {\n data,\n unitComponent = UnitComponent,\n unconformityLabels = true,\n showLabels = true,\n width = 300,\n columnWidth = 150,\n className: baseClassName,\n showLabelColumn = true,\n mergeOverlappingSections = true,\n keyboardNavigation = false,\n columnRef,\n children,\n ...rest\n } = props;\n\n const darkMode = useDarkMode();\n const sectionGroups = useMemo(() => {\n let res = groupUnitsIntoSections(data);\n if (mergeOverlappingSections) {\n res = _mergeOverlappingSections(res);\n }\n return res;\n }, [data, mergeOverlappingSections]);\n\n const className = classNames(baseClassName, {\n \"dark-mode\": darkMode?.isEnabled ?? false,\n });\n\n // Clear unit selection on click outside of units, if we have a dispatch function\n const dispatch = useUnitSelectionDispatch();\n\n return h(\n \"div.column-container\",\n {\n className,\n onClick(evt) {\n dispatch?.(null, null, evt as any);\n },\n },\n h(MacrostratUnitsProvider, { units: data }, [\n h(\"div.column\", { ref: columnRef }, [\n h(\"div.age-axis-label\", \"Age (Ma)\"),\n h(\n \"div.main-column\",\n sectionGroups.map((group, i) => {\n const { section_id: id, units: data } = group;\n const lastGroup = sectionGroups[i - 1];\n return h([\n h.if(unconformityLabels)(Unconformity, {\n upperUnits: lastGroup?.units,\n lowerUnits: data,\n style: { width: showLabels ? columnWidth : width },\n }),\n h(`div.section`, { className: sectionClassName(group) }, [\n h(Section, {\n data,\n unitComponent,\n showLabels,\n width,\n columnWidth,\n showLabelColumn,\n ...rest,\n }),\n ]),\n ]);\n })\n ),\n h.if(keyboardNavigation)(UnitKeyboardNavigation, { units: data }),\n children,\n ]),\n ])\n );\n}\n"],"names":[],"version":3,"file":"column.8dd26e1a.js.map"}

package/dist/esm/{column.module.b5e18f0c.css → column.module.039d872c.css} RENAMED Viewed

@@ -1,16 +1,41 @@
-.column-container_afc440 {
+.column-container_afc440, body.light-mode .column-container_afc440 {
   --column-background-color: var(--background-color, #fff);
   --column-stroke-color: var(--text-color, #000);
   --column-text-color: var(--text-color, #000);
 }
 @media (prefers-color-scheme: dark) {
-  .column-container_afc440 {
+  body:not(.light-mode) .column-container_afc440 {
     --column-background-color: var(--background-color, #000);
     --column-stroke-color: var(--text-color, #fff);
     --column-text-color: var(--text-color, #fff);
     color-scheme: dark;
+    color: var(--column-text-color);
   }
+  body:not(.light-mode) .column-container_afc440 .timescale {
+    color: #000;
+  }
+  body:not(.light-mode) .column-container_afc440 g.inner pattern image {
+    filter: invert(80%);
+  }
+}
+body.dark-mode .column-container_afc440 {
+  --column-background-color: var(--background-color, #000);
+  --column-stroke-color: var(--text-color, #fff);
+  --column-text-color: var(--text-color, #fff);
+  color-scheme: dark;
+  color: var(--column-text-color);
+}
+body.dark-mode .column-container_afc440 .timescale {
+  color: #000;
+}
+body.dark-mode .column-container_afc440 g.inner pattern image {
+  filter: invert(80%);
 }
 .column-container_afc440 .column {
@@ -123,16 +148,4 @@
   color: var(--column-stroke-color);
   transform: translateY(-.5em);
 }
-.column-container_afc440.dark-mode_afc440 {
-  color: var(--column-text-color);
-}
-.column-container_afc440.dark-mode_afc440 .timescale {
-  color: #000;
-}
-.column-container_afc440.dark-mode_afc440 g.inner pattern image {
-  filter: invert(80%);
-}
-/*# sourceMappingURL=column.module.b5e18f0c.css.map */
+/*# sourceMappingURL=column.module.039d872c.css.map */

package/dist/esm/column.module.039d872c.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"mappings":"AAAA;;;;;;AAWE;EACE;;;;;;;;EAOI;;;;EAEA;;;;;AAIN;;;;;;;;AAOE;;;;AAIF;;;;;;;;;;AAUI;;;;;;;;;;AAUF;;;;;;AAMA;;;;;;;;;;;AASF;;;;;;;;;;;;AAUF;;;;AAGA;;;;AAIE;;;;AAGF;;;;;;;;;;;;;;;;;;;;;;;AAkBA;;;;AAGA;;;;;;;;AAOE;;;;;AAIF","sources":["packages/column-views/src/column.module.sass"],"sourcesContent":[".column-container, body:global(.light-mode) .column-container\n --column-background-color: var(--background-color, #fff)\n --column-stroke-color: var(--text-color, #000)\n --column-text-color: var(--text-color, #000)\n\n/* We have to duplicate the dark mode styles here\n because we want to set them either if the preferred\n color scheme is dark OR if dark mode is explicitly enabled.\n If dark mode is explicitly enabled, we want to override\n the media query. */\n@media (prefers-color-scheme: dark)\n body:not(:global(.light-mode)) .column-container\n --column-background-color: var(--background-color, #000)\n --column-stroke-color: var(--text-color, #fff)\n --column-text-color: var(--text-color, #fff)\n color-scheme: dark\n color: var(--column-text-color)\n :global\n .timescale\n color: #000\n g.inner pattern image\n filter: invert(80%)\n\nbody:global(.dark-mode) .column-container\n --column-background-color: var(--background-color, #000)\n --column-stroke-color: var(--text-color, #fff)\n --column-text-color: var(--text-color, #fff)\n color-scheme: dark\n color: var(--column-text-color)\n :global\n .timescale\n color: #000\n g.inner pattern image\n filter: invert(80%)\n\n.column-container :global\n .column\n display: flex\n flex-direction: row\n position: relative\n\n .age-axis-label\n writing-mode: vertical-lr\n transform: rotate(180deg)\n font-size: 12px\n text-align: center\n position: sticky\n top: 0\n max-height: 100vh\n\n .tick text\n text-anchor: middle\n font-weight: 400 !important\n transform: rotate(-90deg) translate(8px, -12px)\n\n rect.unit\n stroke: var(--column-stroke-color)\n stroke-width: 1px\n\n g.lithology-column use.frame\n stroke: var(--column-stroke-color)\n stroke-width: 1.5px !important\n pointer-events: none\n\n.column-container :global .unit-label\n text-align: center\n\n.column-container :global .col-note-label\n font-size: 10px\n margin-top: 3px\n padding: 2px\n padding-left: 3px\n line-height: 9px\n border-left: none !important\n\n.column-container :global g.height-range\n display: none\n\n.column-container :global .note-inner\n border: none\n\n.column-container :global .frame rect\n fill: transparent\n\n.column-container :global .labeled-unit .unit-overlay\n font-size: 10px\n font-style: italic\n display: flex\n align-items: center\n justify-content: center\n\n.column-container :global .labeled-unit .unit-overlay .unit-label\n display: block\n text-shadow: 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color)\n\n.column-container :global .default-buttons\n width: 100%\n margin: 0 -10px\n\n.column-container :global div.section\n display: flex\n flex-direction: row\n\n.column-container :global div.section :global(.timescale)\n transform: translateY(0.5)\n\n.column-container :global .section .divisions .unit\n cursor: pointer\n\n.column-container :global rect.selection-overlay\n fill: rgba(255,0,0,0.5)\n\n.column-container :global div.timescale\n width: calc(6em + 4px)\n --timescale-level-size: 1.5em\n\n.unconformity\n height: 0px\n font-size: 10px\n font-style: italic\n text-align: center\n margin-left: calc(6em + 4px + 40px)\n\n.unconformity-text\n transform: translateY(-0.5em)\n width: var(--column-width)\n color: var(--column-stroke-color)\n"],"names":[],"version":3,"file":"column.module.039d872c.css.map"}

package/dist/esm/{column.module.9b8ce99d.js → column.module.e632868a.js} RENAMED Viewed

@@ -7,16 +7,13 @@ var $6cbea5de739af804$exports = {};
 $parcel$export($6cbea5de739af804$exports, "column-container", () => $6cbea5de739af804$export$e908cef0cccb98df, (v) => $6cbea5de739af804$export$e908cef0cccb98df = v);
 $parcel$export($6cbea5de739af804$exports, "unconformity", () => $6cbea5de739af804$export$7b4a6d978979c0fa, (v) => $6cbea5de739af804$export$7b4a6d978979c0fa = v);
 $parcel$export($6cbea5de739af804$exports, "unconformity-text", () => $6cbea5de739af804$export$925235908943319a, (v) => $6cbea5de739af804$export$925235908943319a = v);
-$parcel$export($6cbea5de739af804$exports, "dark-mode", () => $6cbea5de739af804$export$b02d999b8f804328, (v) => $6cbea5de739af804$export$b02d999b8f804328 = v);
 var $6cbea5de739af804$export$e908cef0cccb98df;
 var $6cbea5de739af804$export$7b4a6d978979c0fa;
 var $6cbea5de739af804$export$925235908943319a;
-var $6cbea5de739af804$export$b02d999b8f804328;
 $6cbea5de739af804$export$e908cef0cccb98df = "column-container_afc440";
 $6cbea5de739af804$export$7b4a6d978979c0fa = "unconformity_afc440";
 $6cbea5de739af804$export$925235908943319a = "unconformity-text_afc440";
-$6cbea5de739af804$export$b02d999b8f804328 = "dark-mode_afc440";
 export {$6cbea5de739af804$exports as default};
-//# sourceMappingURL=column.module.9b8ce99d.js.map
+//# sourceMappingURL=column.module.e632868a.js.map

package/dist/esm/column.module.e632868a.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"mappings":";;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AAFA,4CAAqC;AACrC,4CAAiC;AACjC,4CAAsC","sources":["packages/column-views/src/column.module.sass"],"sourcesContent":[".column-container, body:global(.light-mode) .column-container\n --column-background-color: var(--background-color, #fff)\n --column-stroke-color: var(--text-color, #000)\n --column-text-color: var(--text-color, #000)\n\n/* We have to duplicate the dark mode styles here\n because we want to set them either if the preferred\n color scheme is dark OR if dark mode is explicitly enabled.\n If dark mode is explicitly enabled, we want to override\n the media query. */\n@media (prefers-color-scheme: dark)\n body:not(:global(.light-mode)) .column-container\n --column-background-color: var(--background-color, #000)\n --column-stroke-color: var(--text-color, #fff)\n --column-text-color: var(--text-color, #fff)\n color-scheme: dark\n color: var(--column-text-color)\n :global\n .timescale\n color: #000\n g.inner pattern image\n filter: invert(80%)\n\nbody:global(.dark-mode) .column-container\n --column-background-color: var(--background-color, #000)\n --column-stroke-color: var(--text-color, #fff)\n --column-text-color: var(--text-color, #fff)\n color-scheme: dark\n color: var(--column-text-color)\n :global\n .timescale\n color: #000\n g.inner pattern image\n filter: invert(80%)\n\n.column-container :global\n .column\n display: flex\n flex-direction: row\n position: relative\n\n .age-axis-label\n writing-mode: vertical-lr\n transform: rotate(180deg)\n font-size: 12px\n text-align: center\n position: sticky\n top: 0\n max-height: 100vh\n\n .tick text\n text-anchor: middle\n font-weight: 400 !important\n transform: rotate(-90deg) translate(8px, -12px)\n\n rect.unit\n stroke: var(--column-stroke-color)\n stroke-width: 1px\n\n g.lithology-column use.frame\n stroke: var(--column-stroke-color)\n stroke-width: 1.5px !important\n pointer-events: none\n\n.column-container :global .unit-label\n text-align: center\n\n.column-container :global .col-note-label\n font-size: 10px\n margin-top: 3px\n padding: 2px\n padding-left: 3px\n line-height: 9px\n border-left: none !important\n\n.column-container :global g.height-range\n display: none\n\n.column-container :global .note-inner\n border: none\n\n.column-container :global .frame rect\n fill: transparent\n\n.column-container :global .labeled-unit .unit-overlay\n font-size: 10px\n font-style: italic\n display: flex\n align-items: center\n justify-content: center\n\n.column-container :global .labeled-unit .unit-overlay .unit-label\n display: block\n text-shadow: 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color)\n\n.column-container :global .default-buttons\n width: 100%\n margin: 0 -10px\n\n.column-container :global div.section\n display: flex\n flex-direction: row\n\n.column-container :global div.section :global(.timescale)\n transform: translateY(0.5)\n\n.column-container :global .section .divisions .unit\n cursor: pointer\n\n.column-container :global rect.selection-overlay\n fill: rgba(255,0,0,0.5)\n\n.column-container :global div.timescale\n width: calc(6em + 4px)\n --timescale-level-size: 1.5em\n\n.unconformity\n height: 0px\n font-size: 10px\n font-style: italic\n text-align: center\n margin-left: calc(6em + 4px + 40px)\n\n.unconformity-text\n transform: translateY(-0.5em)\n width: var(--column-width)\n color: var(--column-stroke-color)\n"],"names":[],"version":3,"file":"column.module.e632868a.js.map"}

package/dist/esm/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ import {IsotopesDataset as $d5a3eba6c540ff58$export$c69bd0285aa5d775, IsotopesCo
 import {MacrostratColumnProvider as $29bf41d89292aad4$export$9e42f9b6e0d67c7d, MacrostratAPIProvider as $29bf41d89292aad4$export$3098013bc6cc316d} from "./providers.cd1e652f.js";
 import {extendDivision as $2c60de495788ce61$export$9f8a901d6936c6b6, preprocessUnits as $2c60de495788ce61$export$55543e159517d62d, groupUnitsIntoSections as $2c60de495788ce61$export$dfbd00399d639b4c, _mergeOverlappingSections as $2c60de495788ce61$export$ec445c47b6e5d2d, ensureArray as $2c60de495788ce61$export$d0c8ecbd4ed8940c} from "./helpers.8a03cfc7.js";
 import {ResizableMapFrame as $157bdadaa2bcfcf5$export$c4313db718750a5a, ColumnNavigatorMap as $157bdadaa2bcfcf5$export$d9144ecbc6b090c5, MeasurementsLayer as $347c34ac01fb689b$export$2254347cd20e6080, processTopoJSON as $347c34ac01fb689b$export$4ad66a3119e1afaa, ColumnFeatures as $347c34ac01fb689b$export$f177ff57c101017a, ColumnKeyboardNavigation as $347c34ac01fb689b$export$8c41dd563753848, useColumnData as $347c34ac01fb689b$export$6b70218db02fa4ce, Columns as $347c34ac01fb689b$export$f02cc02ad0e0bba3, ColumnCenters as $347c34ac01fb689b$export$4d8f6e6df85d9012, CurrentColumn as $347c34ac01fb689b$export$b9d912252344e099} from "./map.7aa26f17.js";
-import {UnitComponent as $2118f0266dc7e955$export$48a4cacf2b7a4441, Column as $2118f0266dc7e955$export$816b5d811295e6bc} from "./column.97e31037.js";
+import {UnitComponent as $2118f0266dc7e955$export$48a4cacf2b7a4441, Column as $2118f0266dc7e955$export$816b5d811295e6bc} from "./column.8dd26e1a.js";

package/dist/esm/{section.2513d610.js → section.cc1b1100.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import {CompositeUnitsColumn as $8c8238faa5cde49c$export$a6684360fef0406e} from "./composite.608a4ca2.js";
 import {AgeAxis as $43794af7643cdf40$export$25ce20521d0ab97d} from "./age-axis.64c509ee.js";
 import {MacrostratColumnProvider as $29bf41d89292aad4$export$9e42f9b6e0d67c7d} from "./providers.cd1e652f.js";
-import $7zu8d$columnmodule9b8ce99djs from "./column.module.9b8ce99d.js";
-import "./column.module.b5e18f0c.css";
+import $7zu8d$columnmodulee632868ajs from "./column.module.e632868a.js";
+import "./column.module.039d872c.css";
 import {useMemo as $7zu8d$useMemo} from "react";
 import {Timescale as $7zu8d$Timescale, TimescaleOrientation as $7zu8d$TimescaleOrientation} from "@macrostrat/timescale";
 import {ColumnSVG as $7zu8d$ColumnSVG} from "@macrostrat/column-components";
@@ -20,7 +20,7 @@ function $parcel$interopDefault(a) {
-const $7d0f52717c0de7e1$var$h = (0, $7zu8d$macrostrathyper).styled((0, ($parcel$interopDefault($7zu8d$columnmodule9b8ce99djs))));
+const $7d0f52717c0de7e1$var$h = (0, $7zu8d$macrostrathyper).styled((0, ($parcel$interopDefault($7zu8d$columnmodulee632868ajs))));
 function $7d0f52717c0de7e1$export$6e2c8f0811a474ce(props) {
     // Section with "squishy" time scale
     const { data: data, range: _range, pixelScale: _pixelScale, unitComponent: unitComponent, showLabels: showLabels = true, targetUnitHeight: targetUnitHeight = 20, width: width = 300, columnWidth: columnWidth = 150, unitComponentProps: unitComponentProps, showLabelColumn: showLabelColumn = true } = props;
@@ -115,4 +115,4 @@ const $7d0f52717c0de7e1$var$timescaleLevels = [
 export {$7d0f52717c0de7e1$export$6e2c8f0811a474ce as Section};
-//# sourceMappingURL=section.2513d610.js.map
+//# sourceMappingURL=section.cc1b1100.js.map

package/dist/esm/{section.2513d610.js.map → section.cc1b1100.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,wEAAK;AAuBrB,SAAS,0CAAQ,KAAmB;IACzC,oCAAoC;IACpC,MAAM,QACJ,IAAI,EACJ,OAAO,MAAM,EACb,YAAY,WAAW,iBACvB,aAAa,cACb,aAAa,wBACb,mBAAmB,WACnB,QAAQ,kBACR,cAAc,yBACd,kBAAkB,mBAClB,kBAAkB,MACnB,GAAG;IAEJ,MAAM,QAAQ,KAAK,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,IAAM,EAAE,KAAK;IACjD,MAAM,QAAQ,KAAK,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,IAAM,EAAE,KAAK;IAEjD,MAAM,QAAQ,CAAA,GAAA,cAAM,EAAE;QACpB,IAAI,UAAU,MACZ,OAAO;YAAC;YAAO;SAAM;QAEvB,OAAO;IACT,GAAG;QAAC;QAAQ;QAAO;KAAM;IAEzB,MAAM,OAAO,CAAA,GAAA,cAAM,EAAE,IAAM,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE;QAAC;KAAM;IAEvD,MAAM,aAAa,CAAA,GAAA,cAAM,EAAE;QACzB,IAAI,eAAe,MAAM,OAAO;QAChC,MAAM,eAAe,mBAAmB,KAAK,MAAM;QACnD,OAAO,KAAK,IAAI,CAAC,eAAe;IAClC,GAAG;QAAC;QAAa;QAAkB,KAAK,MAAM;QAAE;KAAK;IAErD,MAAM,SAAS,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,YAAY;QAAC;QAAM;KAAW;IAElE;;;GAGC,GACD,MAAM,sBAAsB,CAAA,GAAA,cAAM,EAAE;QAClC,OAAO;YACL,GAAG,kBAAkB;YACrB,UAAU,KAAK,GAAG,CAChB,KAAK,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,IAAM,EAAE,MAAM,KAAK,GACzC,oBAAoB,YAAY;QAEpC;IACF,GAAG;QAAC;QAAM;KAAmB;IAE7B,OAAO,wBACL,CAAA,GAAA,yCAAuB,GACvB;QACE,WAAW;eACX;QACA,gBAAgB;IAClB,GACA;QACE,wBAAE,CAAA,GAAA,yCAAM,GAAG;YACT,OAAO;YACP,SAAS;YACT,UAAU;YACV,WAAW;QACb;QACA,wBAAE,2BAA2B;YAAE,OAAO;gBAAE,WAAW,CAAC,IAAI,CAAC;YAAC;QAAE,GAAG;YAC7D,wBAAE,CAAA,GAAA,gBAAQ,GAAG;gBACX,aAAa,CAAA,GAAA,2BAAmB,EAAE,QAAQ;gBAC1C,QAAQ;gBACR,QAAQ;gBACR,kBAAkB;gBAClB,aAAa;gBACb,UAAU;YACZ;SACD;QACD,wBACE,CAAA,GAAA,gBAAQ,GACR;YACE,YAAY,aAAa,QAAQ;YACjC,cAAc;YACd,aAAa;YACb,UAAU;YACV,aAAa;QACf,GACA,wBAAE,CAAA,GAAA,yCAAmB,GAAG;YACtB,iBAAiB;YACjB,OAAO,aAAa,QAAQ;yBAC5B;YACA,aAAa;wBACb;2BACA;YACA,oBAAoB;QACtB;KAEH;AAEL;AAEA,MAAM,wCAAkB;IAAC;IAAG;CAAE","sources":["packages/column-views/src/section.ts"],"sourcesContent":["import { CompositeUnitsColumn, IUnit } from \"./units\";\nimport { ReactNode, useMemo } from \"react\";\nimport { AgeAxis } from \"./age-axis\";\nimport { Timescale, TimescaleOrientation } from \"@macrostrat/timescale\";\nimport { ColumnSVG } from \"@macrostrat/column-components\";\nimport { MacrostratColumnProvider } from \"./index\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./column.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport interface SectionInfo {\n section_id: number \| number[];\n t_age: number;\n b_age: number;\n units: IUnit[];\n}\n\nexport interface IColumnProps {\n data: IUnit[];\n pixelScale?: number;\n range?: [number, number];\n unitComponent?: React.FunctionComponent<any>;\n unitComponentProps?: any;\n showLabels?: boolean;\n width?: number;\n columnWidth?: number;\n targetUnitHeight?: number;\n children?: ReactNode;\n showLabelColumn?: boolean;\n}\n\nexport function Section(props: IColumnProps) {\n // Section with \"squishy\" time scale\n const {\n data,\n range: _range,\n pixelScale: _pixelScale,\n unitComponent,\n showLabels = true,\n targetUnitHeight = 20,\n width = 300,\n columnWidth = 150,\n unitComponentProps,\n showLabelColumn = true,\n } = props;\n\n const b_age = Math.max(...data.map((d) => d.b_age));\n const t_age = Math.min(...data.map((d) => d.t_age));\n\n const range = useMemo(() => {\n if (_range == null) {\n return [b_age, t_age];\n }\n return _range;\n }, [_range, b_age, t_age]);\n\n const dAge = useMemo(() => range[0] - range[1], [range]);\n\n const pixelScale = useMemo(() => {\n if (_pixelScale != null) return _pixelScale;\n const targetHeight = targetUnitHeight * data.length;\n return Math.ceil(targetHeight / dAge);\n }, [_pixelScale, targetUnitHeight, data.length, dAge]);\n\n const height = useMemo(() => dAge * pixelScale, [dAge, pixelScale]);\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 Math.max(...data.map((d) => d.column)) + 1,\n unitComponentProps?.nColumns ?? 2\n ),\n };\n }, [data, unitComponentProps]);\n\n return h(\n MacrostratColumnProvider,\n {\n divisions: data,\n range,\n pixelsPerMeter: pixelScale, // Actually pixels per myr\n },\n [\n h(AgeAxis, {\n width: 20,\n padding: 0,\n paddingV: 10,\n showLabel: false,\n }),\n h(\"div.timescale-container\", { style: { marginTop: `10px` } }, [\n h(Timescale, {\n orientation: TimescaleOrientation.VERTICAL,\n length: height,\n levels: timescaleLevels as [number, number],\n absoluteAgeScale: true,\n showAgeAxis: false,\n ageRange: range as [number, number],\n }),\n ]),\n h(\n ColumnSVG,\n {\n innerWidth: showLabels ? width : columnWidth,\n paddingRight: 1,\n paddingLeft: 1,\n paddingV: 10,\n innerHeight: height,\n },\n h(CompositeUnitsColumn, {\n showLabelColumn: showLabelColumn,\n width: showLabels ? width : columnWidth,\n columnWidth,\n gutterWidth: 5,\n showLabels,\n unitComponent,\n unitComponentProps: _unitComponentProps,\n })\n ),\n ]\n );\n}\n\nconst timescaleLevels = [2, 5];\n"],"names":[],"version":3,"file":"section.~~2513d610~~.js.map"}
1	+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,wEAAK;AAuBrB,SAAS,0CAAQ,KAAmB;IACzC,oCAAoC;IACpC,MAAM,QACJ,IAAI,EACJ,OAAO,MAAM,EACb,YAAY,WAAW,iBACvB,aAAa,cACb,aAAa,wBACb,mBAAmB,WACnB,QAAQ,kBACR,cAAc,yBACd,kBAAkB,mBAClB,kBAAkB,MACnB,GAAG;IAEJ,MAAM,QAAQ,KAAK,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,IAAM,EAAE,KAAK;IACjD,MAAM,QAAQ,KAAK,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,IAAM,EAAE,KAAK;IAEjD,MAAM,QAAQ,CAAA,GAAA,cAAM,EAAE;QACpB,IAAI,UAAU,MACZ,OAAO;YAAC;YAAO;SAAM;QAEvB,OAAO;IACT,GAAG;QAAC;QAAQ;QAAO;KAAM;IAEzB,MAAM,OAAO,CAAA,GAAA,cAAM,EAAE,IAAM,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE;QAAC;KAAM;IAEvD,MAAM,aAAa,CAAA,GAAA,cAAM,EAAE;QACzB,IAAI,eAAe,MAAM,OAAO;QAChC,MAAM,eAAe,mBAAmB,KAAK,MAAM;QACnD,OAAO,KAAK,IAAI,CAAC,eAAe;IAClC,GAAG;QAAC;QAAa;QAAkB,KAAK,MAAM;QAAE;KAAK;IAErD,MAAM,SAAS,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,YAAY;QAAC;QAAM;KAAW;IAElE;;;GAGC,GACD,MAAM,sBAAsB,CAAA,GAAA,cAAM,EAAE;QAClC,OAAO;YACL,GAAG,kBAAkB;YACrB,UAAU,KAAK,GAAG,CAChB,KAAK,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,IAAM,EAAE,MAAM,KAAK,GACzC,oBAAoB,YAAY;QAEpC;IACF,GAAG;QAAC;QAAM;KAAmB;IAE7B,OAAO,wBACL,CAAA,GAAA,yCAAuB,GACvB;QACE,WAAW;eACX;QACA,gBAAgB;IAClB,GACA;QACE,wBAAE,CAAA,GAAA,yCAAM,GAAG;YACT,OAAO;YACP,SAAS;YACT,UAAU;YACV,WAAW;QACb;QACA,wBAAE,2BAA2B;YAAE,OAAO;gBAAE,WAAW,CAAC,IAAI,CAAC;YAAC;QAAE,GAAG;YAC7D,wBAAE,CAAA,GAAA,gBAAQ,GAAG;gBACX,aAAa,CAAA,GAAA,2BAAmB,EAAE,QAAQ;gBAC1C,QAAQ;gBACR,QAAQ;gBACR,kBAAkB;gBAClB,aAAa;gBACb,UAAU;YACZ;SACD;QACD,wBACE,CAAA,GAAA,gBAAQ,GACR;YACE,YAAY,aAAa,QAAQ;YACjC,cAAc;YACd,aAAa;YACb,UAAU;YACV,aAAa;QACf,GACA,wBAAE,CAAA,GAAA,yCAAmB,GAAG;YACtB,iBAAiB;YACjB,OAAO,aAAa,QAAQ;yBAC5B;YACA,aAAa;wBACb;2BACA;YACA,oBAAoB;QACtB;KAEH;AAEL;AAEA,MAAM,wCAAkB;IAAC;IAAG;CAAE","sources":["packages/column-views/src/section.ts"],"sourcesContent":["import { CompositeUnitsColumn, IUnit } from \"./units\";\nimport { ReactNode, useMemo } from \"react\";\nimport { AgeAxis } from \"./age-axis\";\nimport { Timescale, TimescaleOrientation } from \"@macrostrat/timescale\";\nimport { ColumnSVG } from \"@macrostrat/column-components\";\nimport { MacrostratColumnProvider } from \"./index\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./column.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport interface SectionInfo {\n section_id: number \| number[];\n t_age: number;\n b_age: number;\n units: IUnit[];\n}\n\nexport interface IColumnProps {\n data: IUnit[];\n pixelScale?: number;\n range?: [number, number];\n unitComponent?: React.FunctionComponent<any>;\n unitComponentProps?: any;\n showLabels?: boolean;\n width?: number;\n columnWidth?: number;\n targetUnitHeight?: number;\n children?: ReactNode;\n showLabelColumn?: boolean;\n}\n\nexport function Section(props: IColumnProps) {\n // Section with \"squishy\" time scale\n const {\n data,\n range: _range,\n pixelScale: _pixelScale,\n unitComponent,\n showLabels = true,\n targetUnitHeight = 20,\n width = 300,\n columnWidth = 150,\n unitComponentProps,\n showLabelColumn = true,\n } = props;\n\n const b_age = Math.max(...data.map((d) => d.b_age));\n const t_age = Math.min(...data.map((d) => d.t_age));\n\n const range = useMemo(() => {\n if (_range == null) {\n return [b_age, t_age];\n }\n return _range;\n }, [_range, b_age, t_age]);\n\n const dAge = useMemo(() => range[0] - range[1], [range]);\n\n const pixelScale = useMemo(() => {\n if (_pixelScale != null) return _pixelScale;\n const targetHeight = targetUnitHeight * data.length;\n return Math.ceil(targetHeight / dAge);\n }, [_pixelScale, targetUnitHeight, data.length, dAge]);\n\n const height = useMemo(() => dAge * pixelScale, [dAge, pixelScale]);\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 Math.max(...data.map((d) => d.column)) + 1,\n unitComponentProps?.nColumns ?? 2\n ),\n };\n }, [data, unitComponentProps]);\n\n return h(\n MacrostratColumnProvider,\n {\n divisions: data,\n range,\n pixelsPerMeter: pixelScale, // Actually pixels per myr\n },\n [\n h(AgeAxis, {\n width: 20,\n padding: 0,\n paddingV: 10,\n showLabel: false,\n }),\n h(\"div.timescale-container\", { style: { marginTop: `10px` } }, [\n h(Timescale, {\n orientation: TimescaleOrientation.VERTICAL,\n length: height,\n levels: timescaleLevels as [number, number],\n absoluteAgeScale: true,\n showAgeAxis: false,\n ageRange: range as [number, number],\n }),\n ]),\n h(\n ColumnSVG,\n {\n innerWidth: showLabels ? width : columnWidth,\n paddingRight: 1,\n paddingLeft: 1,\n paddingV: 10,\n innerHeight: height,\n },\n h(CompositeUnitsColumn, {\n showLabelColumn: showLabelColumn,\n width: showLabels ? width : columnWidth,\n columnWidth,\n gutterWidth: 5,\n showLabels,\n unitComponent,\n unitComponentProps: _unitComponentProps,\n })\n ),\n ]\n );\n}\n\nconst timescaleLevels = [2, 5];\n"],"names":[],"version":3,"file":"section.cc1b1100.js.map"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Data views for Macrostrat stratigraphic columns",
   "type": "module",
   "source": "src/index.ts",
@@ -30,13 +30,13 @@
   },
   "dependencies": {
     "@macrostrat/api-types": "^1.0.0",
-    "@macrostrat/column-components": "^1.0.2",
+    "@macrostrat/column-components": "^1.0.3",
     "@macrostrat/data-components": "^0.0.6",
     "@macrostrat/hyper": "^3.0.6",
     "@macrostrat/stratigraphy-utils": "^1.0.0",
     "@macrostrat/svg-map-components": "^1.0.3",
     "@macrostrat/timescale": "^2.1.1",
-    "@macrostrat/ui-components": "^4.1.1",
+    "@macrostrat/ui-components": "^4.1.2",
     "@types/chroma-js": "^3",
     "@types/d3-format": "^3",
     "@types/d3-geo": "^3",

package/src/column.module.sass CHANGED Viewed

@@ -1,14 +1,37 @@
-.column-container
+.column-container, body:global(.light-mode) .column-container
   --column-background-color: var(--background-color, #fff)
   --column-stroke-color: var(--text-color, #000)
   --column-text-color: var(--text-color, #000)
+/* We have to duplicate the dark mode styles here
+  because we want to set them either if the preferred
+  color scheme is dark OR if dark mode is explicitly enabled.
+  If dark mode is explicitly enabled, we want to override
+  the media query. */
 @media (prefers-color-scheme: dark)
-  .column-container
+  body:not(:global(.light-mode)) .column-container
     --column-background-color: var(--background-color, #000)
     --column-stroke-color: var(--text-color, #fff)
     --column-text-color: var(--text-color, #fff)
     color-scheme: dark
+    color: var(--column-text-color)
+    :global
+      .timescale
+        color: #000
+      g.inner pattern image
+        filter: invert(80%)
+body:global(.dark-mode) .column-container
+  --column-background-color: var(--background-color, #000)
+  --column-stroke-color: var(--text-color, #fff)
+  --column-text-color: var(--text-color, #fff)
+  color-scheme: dark
+  color: var(--column-text-color)
+  :global
+    .timescale
+      color: #000
+    g.inner pattern image
+      filter: invert(80%)
 .column-container :global
   .column
@@ -102,13 +125,3 @@
   transform: translateY(-0.5em)
   width: var(--column-width)
   color: var(--column-stroke-color)
-.column-container.dark-mode :global
-  color: var(--column-text-color)
-.column-container.dark-mode :global .timescale
-  color: #000
-.column-container.dark-mode :global g.inner pattern image
-  filter: invert(80%)

package/dist/esm/column.module.9b8ce99d.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"mappings":";;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAHA,4CAAqC;AACrC,4CAAiC;AACjC,4CAAsC;AACtC,4CAA8B","sources":["packages/column-views/src/column.module.sass"],"sourcesContent":[".column-container\n --column-background-color: var(--background-color, #fff)\n --column-stroke-color: var(--text-color, #000)\n --column-text-color: var(--text-color, #000)\n\n@media (prefers-color-scheme: dark)\n .column-container\n --column-background-color: var(--background-color, #000)\n --column-stroke-color: var(--text-color, #fff)\n --column-text-color: var(--text-color, #fff)\n color-scheme: dark\n\n.column-container :global\n .column\n display: flex\n flex-direction: row\n position: relative\n\n .age-axis-label\n writing-mode: vertical-lr\n transform: rotate(180deg)\n font-size: 12px\n text-align: center\n position: sticky\n top: 0\n max-height: 100vh\n\n .tick text\n text-anchor: middle\n font-weight: 400 !important\n transform: rotate(-90deg) translate(8px, -12px)\n\n rect.unit\n stroke: var(--column-stroke-color)\n stroke-width: 1px\n\n g.lithology-column use.frame\n stroke: var(--column-stroke-color)\n stroke-width: 1.5px !important\n pointer-events: none\n\n.column-container :global .unit-label\n text-align: center\n\n.column-container :global .col-note-label\n font-size: 10px\n margin-top: 3px\n padding: 2px\n padding-left: 3px\n line-height: 9px\n border-left: none !important\n\n.column-container :global g.height-range\n display: none\n\n.column-container :global .note-inner\n border: none\n\n.column-container :global .frame rect\n fill: transparent\n\n.column-container :global .labeled-unit .unit-overlay\n font-size: 10px\n font-style: italic\n display: flex\n align-items: center\n justify-content: center\n\n.column-container :global .labeled-unit .unit-overlay .unit-label\n display: block\n text-shadow: 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color)\n\n.column-container :global .default-buttons\n width: 100%\n margin: 0 -10px\n\n.column-container :global div.section\n display: flex\n flex-direction: row\n\n.column-container :global div.section :global(.timescale)\n transform: translateY(0.5)\n\n.column-container :global .section .divisions .unit\n cursor: pointer\n\n.column-container :global rect.selection-overlay\n fill: rgba(255,0,0,0.5)\n\n.column-container :global div.timescale\n width: calc(6em + 4px)\n --timescale-level-size: 1.5em\n\n.unconformity\n height: 0px\n font-size: 10px\n font-style: italic\n text-align: center\n margin-left: calc(6em + 4px + 40px)\n\n.unconformity-text\n transform: translateY(-0.5em)\n width: var(--column-width)\n color: var(--column-stroke-color)\n\n.column-container.dark-mode :global\n color: var(--column-text-color)\n\n.column-container.dark-mode :global .timescale\n color: #000\n\n.column-container.dark-mode :global g.inner pattern image\n filter: invert(80%)\n\n"],"names":[],"version":3,"file":"column.module.9b8ce99d.js.map"}

package/dist/esm/column.module.b5e18f0c.css.map DELETED Viewed

@@ -1 +0,0 @@

- {"mappings":"AAAA;;;;;;AAKA;EACE;;;;;;;;AAQE;;;;;;AAME;;;;;;;;;;AAUA;;;;;;AAMJ;;;;;;;;;;;AASA;;;;AAIA;;;;;;;;AAOA;;;;AAGA;;;;AAGA;;;;AAIA;;;;;;;;AAMF;;;;;AAIA;;;;;AAIA;;;;;AAIE;;;;AAGA;;;;AAGA;;;;AAGF;;;;;AAKE;;;;;;;;;;;;;;AAWA;;;;AAGA","sources":["packages/column-views/src/column.module.sass"],"sourcesContent":[".column-container\n --column-background-color: var(--background-color, #fff)\n --column-stroke-color: var(--text-color, #000)\n --column-text-color: var(--text-color, #000)\n\n@media (prefers-color-scheme: dark)\n .column-container\n --column-background-color: var(--background-color, #000)\n --column-stroke-color: var(--text-color, #fff)\n --column-text-color: var(--text-color, #fff)\n color-scheme: dark\n\n.column-container :global\n .column\n display: flex\n flex-direction: row\n position: relative\n\n .age-axis-label\n writing-mode: vertical-lr\n transform: rotate(180deg)\n font-size: 12px\n text-align: center\n position: sticky\n top: 0\n max-height: 100vh\n\n .tick text\n text-anchor: middle\n font-weight: 400 !important\n transform: rotate(-90deg) translate(8px, -12px)\n\n rect.unit\n stroke: var(--column-stroke-color)\n stroke-width: 1px\n\n g.lithology-column use.frame\n stroke: var(--column-stroke-color)\n stroke-width: 1.5px !important\n pointer-events: none\n\n.column-container :global .unit-label\n text-align: center\n\n.column-container :global .col-note-label\n font-size: 10px\n margin-top: 3px\n padding: 2px\n padding-left: 3px\n line-height: 9px\n border-left: none !important\n\n.column-container :global g.height-range\n display: none\n\n.column-container :global .note-inner\n border: none\n\n.column-container :global .frame rect\n fill: transparent\n\n.column-container :global .labeled-unit .unit-overlay\n font-size: 10px\n font-style: italic\n display: flex\n align-items: center\n justify-content: center\n\n.column-container :global .labeled-unit .unit-overlay .unit-label\n display: block\n text-shadow: 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color)\n\n.column-container :global .default-buttons\n width: 100%\n margin: 0 -10px\n\n.column-container :global div.section\n display: flex\n flex-direction: row\n\n.column-container :global div.section :global(.timescale)\n transform: translateY(0.5)\n\n.column-container :global .section .divisions .unit\n cursor: pointer\n\n.column-container :global rect.selection-overlay\n fill: rgba(255,0,0,0.5)\n\n.column-container :global div.timescale\n width: calc(6em + 4px)\n --timescale-level-size: 1.5em\n\n.unconformity\n height: 0px\n font-size: 10px\n font-style: italic\n text-align: center\n margin-left: calc(6em + 4px + 40px)\n\n.unconformity-text\n transform: translateY(-0.5em)\n width: var(--column-width)\n color: var(--column-stroke-color)\n\n.column-container.dark-mode :global\n color: var(--column-text-color)\n\n.column-container.dark-mode :global .timescale\n color: #000\n\n.column-container.dark-mode :global g.inner pattern image\n filter: invert(80%)\n\n"],"names":[],"version":3,"file":"column.module.b5e18f0c.css.map"}