Major updates to packaging

packages/color-utils/CHANGELOG.md

@@ -6,6 +6,10 @@ 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.2.1] - 2026-01-29
+
+- Change layout of `package.json` and explicitly mark no side effects.
+
 ## [1.2.0] - 2026-01-27
 
 Change build system from Parcel to Vite

packages/color-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/color-utils",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Color utility functions",
   "repository": {
     "type": "git",
@@ -18,12 +18,18 @@
     "src",
     "dist"
   ],
+  "sideEffects": false,
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./package.json": "./package.json"
   },

packages/column-components/CHANGELOG.md

@@ -4,6 +4,13 @@ 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).
 
+## [2.0.4] - 2026-01-29
+
+- Change layout of `package.json`
+- Remove `ui-box` dependency in favor of `@macrostrat/ui-components`
+- Remove color picker
+- Bundle `labella` dependency to avoid CommonJS issues
+
 ## [2.0.3] - 2026-01-28
 
 Update handling of `@uiw/react-color` dependency

packages/column-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-components",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "React rendering primitives for stratigraphic columns",
   "keywords": [
     "geology",
@@ -31,9 +31,14 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
       "style": "./dist/column-components.css"
     },
     "./package.json": "./package.json",
@@ -53,8 +58,6 @@
     "@macrostrat/stratigraphy-utils": "workspace:^",
     "@macrostrat/timescale": "workspace:^",
     "@macrostrat/ui-components": "workspace:^",
-    "@uiw/react-color": "^2.9.2",
-    "chroma-js": "^3.2.0",
     "classnames": "^2.5.1",
     "d3-axis": "^3.0.0",
     "d3-format": "^3.1.2",
@@ -67,12 +70,14 @@
     "react-scroll": "^1.7.16",
     "react-select": "^3.0.8",
     "react-svg-textures": "^1.4.7",
-    "ui-box": "^5.4.1",
     "uuid": "^7.0.3"
   },
   "devDependencies": {
     "@macrostrat/web-components-bundler": "workspace:*"
   },
+  "rollupInternal": [
+    "labella"
+  ],
   "publishConfig": {
     "access": "public"
   }

packages/column-components/src/edit-overlay.ts

@@ -15,7 +15,7 @@ import {
   ColumnDivision,
 } from "./context";
 import chroma from "chroma-js";
-import Box from "ui-box";
+import { Box }  from "@macrostrat/ui-components";
 
 const fmt = format(".1f");
 const fmt2 = format(".2f");

packages/column-components/src/editor/facies/description.ts

@@ -2,7 +2,7 @@ import { Component } from "react";
 import h from "@macrostrat/hyper";
 import classNames from "classnames";
 import { FaciesContext } from "../../context";
-import { FaciesSwatch } from "./color-picker";
+import { FaciesSwatch } from "./swatch";
 
 type FaciesData = any;
 

packages/column-components/src/editor/facies/index.ts

@@ -1,3 +1,2 @@
-export * from "./color-picker";
-export * from "./picker";
+export * from "./swatch";
 export * from "./description";

packages/column-components/src/editor/facies/swatch.ts

@@ -0,0 +1,123 @@
+import { Component } from "react";
+import { hyperStyled } from "@macrostrat/hyper";
+import { ColumnDivision, FaciesContext } from "../../context";
+import { RaisedSelect } from "../util";
+import styles from "../main.module.scss";
+
+const h = hyperStyled(styles);
+
+const FaciesRow = ({ facies }) =>
+  h("span.facies-picker-row", [
+    h(BasicFaciesSwatch, { facies, className: "facies-color-swatch" }),
+    h("span.facies-picker-name", facies.name),
+  ]);
+
+interface FaciesPickerProps {
+  interval: ColumnDivision;
+  onChange: (f: number) => void;
+}
+
+export class FaciesPicker extends Component<FaciesPickerProps> {
+  static contextType = FaciesContext;
+  declare context: any;
+
+  render() {
+    const { facies } = this.context;
+    const { interval, onChange } = this.props;
+
+    const options = facies.map((f) => ({
+      value: f.id,
+      label: h(FaciesRow, { facies: f }),
+    }));
+
+    let value = options.find((d) => d.value === interval.facies);
+    if (value == null) {
+      value = null;
+    }
+
+    return h(RaisedSelect, {
+      id: "facies-select",
+      options,
+      value,
+      selected: interval.facies,
+      isClearable: true,
+      onChange(res) {
+        console.log("Changing", res);
+        const f = res != null ? res.value : null;
+        return onChange(f);
+      },
+    });
+  }
+}
+
+//import { Swatch } from "@uiw/react-color";
+//import { Popover } from "@blueprintjs/core";
+//import { FaciesContext } from "../../context";
+
+interface FaciesColorPickerProps {
+  facies: {
+    id: number;
+    color: string;
+  };
+}
+
+// class FaciesColorPicker extends Component<FaciesColorPickerProps> {
+//   static contextType = FaciesContext;
+//   declare context: any;
+//
+//   render() {
+//     const { setFaciesColor } = this.context;
+//     const { facies: d } = this.props;
+//     return h("div", [
+//       h(Swatch, {
+//         color: d.color || "black",
+//         onChange(color) {
+//           return setFaciesColor(d.id, color.hex);
+//         },
+//       }),
+//     ]);
+//   }
+// }
+
+export const BasicFaciesSwatch = ({ facies: d, ...rest }) =>
+  h("div.color-swatch", {
+    style: {
+      backgroundColor: d.color || "black",
+      width: "2em",
+      height: "2em",
+    },
+    ...rest,
+  });
+
+interface FaciesSwatchProps {
+  isEditable: boolean;
+  facies: {
+    id: number;
+    color: string;
+  } | null;
+}
+
+export class FaciesSwatch extends Component<FaciesSwatchProps> {
+  static defaultProps = {
+    isEditable: true,
+    facies: null,
+  };
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { facies, isEditable = false } = this.props;
+    const basic = h(BasicFaciesSwatch, { facies });
+    return basic;
+    // return h(
+    //   Popover,
+    //   {
+    //     // tetherOptions: {
+    //     //   constraints: [{ attachment: "together", to: "scrollParent" }],
+    //     // },
+    //   },
+    //   [basic, h(FaciesColorPicker, { facies })],
+    // );
+  }
+}

packages/column-components/src/util/column-box.ts

@@ -2,7 +2,7 @@ import h from "@macrostrat/hyper";
 import { useContext } from "react";
 import { ColumnContext } from "../context";
 import classNames from "classnames";
-import { default as Box } from "ui-box";
+import { Box } from "@macrostrat/ui-components";
 import { path } from "d3-path";
 import type { Path } from "d3-path";
 

packages/column-components/src/util/scroll-box.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-import Box from "ui-box";
+import { Box } from "@macrostrat/ui-components";
 import h from "@macrostrat/hyper";
 import { useColumn } from "../context";