@macrostrat/feedback-components 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,10 +1,18 @@
 # 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.1.0] - 2025-06-25
+
+Major updates by David Sklar to improve usability
+
+## [1.0.1] - 2025-02-15
+
+Added a `node` target to bundle without imported CSS.
 
 ## [1.0.0] - 2025-02-14
 
-First public release of the `@macrostrat/feedback-components` library,
-focused on text feedback for Macrostrat unit information.
+First public release of the `@macrostrat/feedback-components` library, focused
+on text feedback for Macrostrat unit information.

package/dist/esm/feedback-components.4359bc80.js

@@ -0,0 +1,70 @@
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $49c87ee97f392268$exports = {};
+
+$parcel$export($49c87ee97f392268$exports, "add-type", () => $49c87ee97f392268$export$cb889aaddfa2926c, (v) => $49c87ee97f392268$export$cb889aaddfa2926c = v);
+$parcel$export($49c87ee97f392268$exports, "add-type-overlay", () => $49c87ee97f392268$export$5f8f750fd71deeed, (v) => $49c87ee97f392268$export$5f8f750fd71deeed = v);
+$parcel$export($49c87ee97f392268$exports, "control-panel", () => $49c87ee97f392268$export$a0a23f31d5562853, (v) => $49c87ee97f392268$export$a0a23f31d5562853 = v);
+$parcel$export($49c87ee97f392268$exports, "description", () => $49c87ee97f392268$export$6d59db4903f20f7d, (v) => $49c87ee97f392268$export$6d59db4903f20f7d = v);
+$parcel$export($49c87ee97f392268$exports, "entity-panel", () => $49c87ee97f392268$export$38f2cd12e45697e, (v) => $49c87ee97f392268$export$38f2cd12e45697e = v);
+$parcel$export($49c87ee97f392268$exports, "feedback-component", () => $49c87ee97f392268$export$579bd45c78bf5510, (v) => $49c87ee97f392268$export$579bd45c78bf5510 = v);
+$parcel$export($49c87ee97f392268$exports, "feedback-text", () => $49c87ee97f392268$export$890489be1870bed5, (v) => $49c87ee97f392268$export$890489be1870bed5 = v);
+$parcel$export($49c87ee97f392268$exports, "feedback-text-wrapper", () => $49c87ee97f392268$export$6bd0fd0a746c88f, (v) => $49c87ee97f392268$export$6bd0fd0a746c88f = v);
+$parcel$export($49c87ee97f392268$exports, "form-group", () => $49c87ee97f392268$export$55a1f87a143fb302, (v) => $49c87ee97f392268$export$55a1f87a143fb302 = v);
+$parcel$export($49c87ee97f392268$exports, "highlight", () => $49c87ee97f392268$export$e4043f67d36cbb26, (v) => $49c87ee97f392268$export$e4043f67d36cbb26 = v);
+$parcel$export($49c87ee97f392268$exports, "icons", () => $49c87ee97f392268$export$df03f54e09e486fa, (v) => $49c87ee97f392268$export$df03f54e09e486fa = v);
+$parcel$export($49c87ee97f392268$exports, "node", () => $49c87ee97f392268$export$35059013cd4a06db, (v) => $49c87ee97f392268$export$35059013cd4a06db = v);
+$parcel$export($49c87ee97f392268$exports, "overlay-container", () => $49c87ee97f392268$export$6a1093e41947f68e, (v) => $49c87ee97f392268$export$6a1093e41947f68e = v);
+$parcel$export($49c87ee97f392268$exports, "selected", () => $49c87ee97f392268$export$d90250155de6d7e7, (v) => $49c87ee97f392268$export$d90250155de6d7e7 = v);
+$parcel$export($49c87ee97f392268$exports, "selection-tree", () => $49c87ee97f392268$export$3ae1b51693c80a9c, (v) => $49c87ee97f392268$export$3ae1b51693c80a9c = v);
+$parcel$export($49c87ee97f392268$exports, "text-inputs", () => $49c87ee97f392268$export$bc7581b048bdc9d, (v) => $49c87ee97f392268$export$bc7581b048bdc9d = v);
+$parcel$export($49c87ee97f392268$exports, "title", () => $49c87ee97f392268$export$fb184b623420d9be, (v) => $49c87ee97f392268$export$fb184b623420d9be = v);
+$parcel$export($49c87ee97f392268$exports, "type-container", () => $49c87ee97f392268$export$b2d17fca990bb66c, (v) => $49c87ee97f392268$export$b2d17fca990bb66c = v);
+$parcel$export($49c87ee97f392268$exports, "type-list", () => $49c87ee97f392268$export$915fe2ca68846e4c, (v) => $49c87ee97f392268$export$915fe2ca68846e4c = v);
+$parcel$export($49c87ee97f392268$exports, "type-tag", () => $49c87ee97f392268$export$5e5acbc770fb0e4, (v) => $49c87ee97f392268$export$5e5acbc770fb0e4 = v);
+var $49c87ee97f392268$export$cb889aaddfa2926c;
+var $49c87ee97f392268$export$5f8f750fd71deeed;
+var $49c87ee97f392268$export$a0a23f31d5562853;
+var $49c87ee97f392268$export$6d59db4903f20f7d;
+var $49c87ee97f392268$export$38f2cd12e45697e;
+var $49c87ee97f392268$export$579bd45c78bf5510;
+var $49c87ee97f392268$export$890489be1870bed5;
+var $49c87ee97f392268$export$6bd0fd0a746c88f;
+var $49c87ee97f392268$export$55a1f87a143fb302;
+var $49c87ee97f392268$export$e4043f67d36cbb26;
+var $49c87ee97f392268$export$df03f54e09e486fa;
+var $49c87ee97f392268$export$35059013cd4a06db;
+var $49c87ee97f392268$export$6a1093e41947f68e;
+var $49c87ee97f392268$export$d90250155de6d7e7;
+var $49c87ee97f392268$export$3ae1b51693c80a9c;
+var $49c87ee97f392268$export$bc7581b048bdc9d;
+var $49c87ee97f392268$export$fb184b623420d9be;
+var $49c87ee97f392268$export$b2d17fca990bb66c;
+var $49c87ee97f392268$export$915fe2ca68846e4c;
+var $49c87ee97f392268$export$5e5acbc770fb0e4;
+$49c87ee97f392268$export$cb889aaddfa2926c = `QoX8-W_add-type`;
+$49c87ee97f392268$export$5f8f750fd71deeed = `QoX8-W_add-type-overlay`;
+$49c87ee97f392268$export$a0a23f31d5562853 = `QoX8-W_control-panel`;
+$49c87ee97f392268$export$6d59db4903f20f7d = `QoX8-W_description`;
+$49c87ee97f392268$export$38f2cd12e45697e = `QoX8-W_entity-panel`;
+$49c87ee97f392268$export$579bd45c78bf5510 = `QoX8-W_feedback-component`;
+$49c87ee97f392268$export$890489be1870bed5 = `QoX8-W_feedback-text`;
+$49c87ee97f392268$export$6bd0fd0a746c88f = `QoX8-W_feedback-text-wrapper`;
+$49c87ee97f392268$export$55a1f87a143fb302 = `QoX8-W_form-group`;
+$49c87ee97f392268$export$e4043f67d36cbb26 = `QoX8-W_highlight`;
+$49c87ee97f392268$export$df03f54e09e486fa = `QoX8-W_icons`;
+$49c87ee97f392268$export$35059013cd4a06db = `QoX8-W_node`;
+$49c87ee97f392268$export$6a1093e41947f68e = `QoX8-W_overlay-container`;
+$49c87ee97f392268$export$d90250155de6d7e7 = `QoX8-W_selected`;
+$49c87ee97f392268$export$3ae1b51693c80a9c = `QoX8-W_selection-tree`;
+$49c87ee97f392268$export$bc7581b048bdc9d = `QoX8-W_text-inputs`;
+$49c87ee97f392268$export$fb184b623420d9be = `QoX8-W_title`;
+$49c87ee97f392268$export$b2d17fca990bb66c = `QoX8-W_type-container`;
+$49c87ee97f392268$export$915fe2ca68846e4c = `QoX8-W_type-list`;
+$49c87ee97f392268$export$5e5acbc770fb0e4 = `QoX8-W_type-tag`;
+
+
+export {$49c87ee97f392268$exports as default};
+//# sourceMappingURL=feedback-components.4359bc80.js.map

package/dist/esm/feedback-components.4359bc80.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAnBA,4CAA6B,CAAC,eAAe,CAAC;AAC9C,4CAAqC,CAAC,uBAAuB,CAAC;AAC9D,4CAAkC,CAAC,oBAAoB,CAAC;AACxD,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,2CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAAuC,CAAC,yBAAyB,CAAC;AAClE,4CAAkC,CAAC,oBAAoB,CAAC;AACxD,2CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAyB,CAAC,WAAW,CAAC;AACtC,4CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA6B,CAAC,eAAe,CAAC;AAC9C,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,2CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA0B,CAAC,YAAY,CAAC;AACxC,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,2CAA6B,CAAC,eAAe,CAAC","sources":["packages/feedback-components/src/feedback/feedback.module.sass"],"sourcesContent":[".feedback-component\n  position: relative\n  width: 800px\n\n  & > svg\n    width: 800px\n\n.node\n  cursor: pointer\n\ncircle\n  cursor: pointer\n  border: 1px solid black\n\n.selected\n  border: 1px solid white\n  \n.feedback-text\n  margin-bottom: 2em\n\n.entity-panel\n  position: relative\n  max-height: 600px\n\n.control-panel\n  position: absolute\n  top: 1em\n  right: 1em\n  padding: 0.2em 0.5em\n\n.entity-panel\n  flex: 1\n  min-height: 100px\n  padding: 1em\n  background: var(--panel-secondary-background-color)\n  border-radius: 4px\n  // Inset box shadow\n  box-shadow: 0 0 0 1px var(--panel-border-color) inset\n\n.selection-tree\n  margin: -1em 0\n  padding: 1em 0\n  width: 70% !important\n  \n.type-list\n  display: grid\n  grid-auto-flow: column\n  grid-template-rows: repeat(10, auto)\n  gap: 0.2em\n\n  .type-tag\n    padding: .2em .5em\n    border-radius: .2em\n\n.description\n  max-width: 300px\n  padding: .5em\n\nmark\n  border-radius: .2em\n  cursor: pointer\n  color: black !important\n\n[role=\"treeitem\"]\n  width: auto !important\n\n.highlight\n  cursor: pointer\n  padding: .2em 0\n  border-radius: .2em\n  position: relative\n  zIndex: 10\n\n.feedback-text-wrapper \n  position: relative\n  z-index: 0\n  overflow: visible\n\n.type-container\n  display: flex\n  justify-content: space-between\n  align-items: center\n  column-gap: 1em\n\n.add-type\n  cursor: pointer\n  display: flex\n  justify-content: space-between\n  padding: 0 .5em\n  align-items: center\n\n  p\n    margin: 0\n\n.overlay-container\n  height: 80vh\n  width: 100vw\n  display: flex\n  justify-content: center\n  align-items: center\n\n  .add-type-overlay\n    background-color: var(--secondary-color)\n    padding: .5em 1em\n    display: flex\n    flex-direction: column\n    gap: 1em\n    border-radius: .2em\n\n    .title\n      display: flex\n      justify-content: space-between\n      align-items: center\n\n    h2\n      margin: 0\n\n    .form-group\n      display: flex\n      gap: 3em\n\n      .text-inputs\n        display: flex\n        flex-direction: column\n        gap: 1em\n\n.icons\n  display: flex\n  gap: .25em"],"names":[],"version":3,"file":"feedback-components.4359bc80.js.map"}

package/dist/{extractions.54be85f8.js → esm/feedback-components.5df2a926.js}

@@ -1,9 +1,10 @@
-import "./main.module.d6508c0e.css";
-import $hx0US$mainmoduleca3db294js from "./main.module.ca3db294.js";
-import $hx0US$classnames from "classnames";
-import {Tag as $hx0US$Tag} from "@blueprintjs/core";
-import {asChromaColor as $hx0US$asChromaColor} from "@macrostrat/color-utils";
-import $hx0US$macrostrathyper from "@macrostrat/hyper";
+import "./feedback-components.e273ed5b.css";
+import $9y0hV$feedbackcomponents6d32ee91js from "./feedback-components.6d32ee91.js";
+import $9y0hV$classnames from "classnames";
+import {Tag as $9y0hV$Tag} from "@blueprintjs/core";
+import {asChromaColor as $9y0hV$asChromaColor} from "@macrostrat/color-utils";
+import $9y0hV$macrostrathyper from "@macrostrat/hyper";
+import {useDarkMode as $9y0hV$useDarkMode} from "@macrostrat/ui-components";
 
 
 function $parcel$interopDefault(a) {
@@ -14,7 +15,8 @@ function $parcel$interopDefault(a) {
 
 
 
-const $03d8811e9c9b360d$var$h = (0, $hx0US$macrostrathyper).styled((0, ($parcel$interopDefault($hx0US$mainmoduleca3db294js))));
+
+const $03d8811e9c9b360d$var$h = (0, $9y0hV$macrostrathyper).styled((0, ($parcel$interopDefault($9y0hV$feedbackcomponents6d32ee91js))));
 function $03d8811e9c9b360d$export$c4b91360064ad200(entities, parent) {
     let highlights = [];
     let parents = [];
@@ -27,8 +29,8 @@ function $03d8811e9c9b360d$export$c4b91360064ad200(entities, parent) {
             start: entity.indices[0],
             end: entity.indices[1],
             text: entity.name,
-            backgroundColor: entity.type.color ?? "#ddd",
-            tag: entity.type.name,
+            backgroundColor: entity.type?.color,
+            tag: entity.type?.name ?? "lith",
             id: entity.id,
             parents: parents
         });
@@ -44,25 +46,32 @@ function $03d8811e9c9b360d$export$d60b563f571177d(extractionData, models, entity
     };
 }
 function $03d8811e9c9b360d$export$35baa338324d8550(baseColor, options) {
-    const _baseColor = (0, $hx0US$asChromaColor)(baseColor ?? "#ddd");
-    const { highlighted: highlighted = true, inDarkMode: inDarkMode = false, active: active = false } = options;
+    const _baseColor = (0, $9y0hV$asChromaColor)(baseColor ?? "#fff");
+    const { highlighted: highlighted = true, inDarkMode: inDarkMode = (0, $9y0hV$useDarkMode)().isEnabled, active: active = false } = options;
     let mixAmount = highlighted ? 0.8 : 0.5;
     let backgroundAlpha = highlighted ? 0.8 : 0.2;
     if (active) {
         mixAmount = 1;
         backgroundAlpha = 1;
     }
-    const mixTarget = inDarkMode ? "white" : "black";
-    const color = _baseColor.mix(mixTarget, mixAmount).css();
-    const borderColor = highlighted ? _baseColor.mix(mixTarget, mixAmount / 2).css() : "transparent";
+    const mixTarget = "black";
+    const color = active ? "#000" : _baseColor.mix(mixTarget, mixAmount).hex();
+    const borderColor = highlighted ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex() : "transparent";
+    let backgroundColor = active ? _baseColor.alpha(backgroundAlpha).hex() : $03d8811e9c9b360d$var$normalizeColor(_baseColor.alpha(backgroundAlpha).hex());
+    // handle white backgrounds in light mode
+    if (!inDarkMode && backgroundColor === "#ffffff") {
+        console.log("Adjusting background color for light mode:", backgroundColor);
+        backgroundColor = "#f0f0f0";
+    }
     return {
         color: color,
-        backgroundColor: _baseColor.alpha(backgroundAlpha).css(),
+        backgroundColor: backgroundColor,
         boxSizing: "border-box",
         borderStyle: "solid",
         borderColor: borderColor,
-        borderWidth: "1px",
-        fontWeight: active ? "bold" : "normal"
+        borderWidth: "1.5px",
+        fontWeight: active ? "bold" : "normal",
+        fontSize: "0.9em"
     };
 }
 function $03d8811e9c9b360d$var$enhanceEntity(entity, entityTypes) {
@@ -73,7 +82,7 @@ function $03d8811e9c9b360d$var$enhanceEntity(entity, entityTypes) {
     };
 }
 function $03d8811e9c9b360d$var$addColor(entityType, match = false) {
-    const color = (0, $hx0US$asChromaColor)(entityType.color ?? "#ddd").brighten(match ? 1 : 2);
+    const color = (0, $9y0hV$asChromaColor)(entityType.color ?? "#fff").brighten(match ? 1 : 2);
     return {
         ...entityType,
         color: color.css()
@@ -103,11 +112,11 @@ function $03d8811e9c9b360d$export$4eb2a0ce903ce967({ data: data }) {
 }
 function $03d8811e9c9b360d$export$117e56c71b172cde({ data: data, highlighted: highlighted = true, active: active = false, onClickType: onClickType, matchComponent: matchComponent = null }) {
     const { name: name, type: type, match: match } = data;
-    const className = (0, $hx0US$classnames)({
+    const className = (0, $9y0hV$classnames)({
         matched: match != null,
-        type: data.type.name
+        type: data.type?.name ?? "lith"
     }, "entity");
-    const style = $03d8811e9c9b360d$export$35baa338324d8550(type.color ?? "#aaaaaa", {
+    const style = $03d8811e9c9b360d$export$35baa338324d8550(type?.color, {
         highlighted: highlighted,
         active: active
     });
@@ -115,7 +124,7 @@ function $03d8811e9c9b360d$export$117e56c71b172cde({ data: data, highlighted: hi
     if (match != null && matchComponent != null) _matchLink = $03d8811e9c9b360d$var$h(matchComponent, {
         data: match
     });
-    return $03d8811e9c9b360d$var$h((0, $hx0US$Tag), {
+    return $03d8811e9c9b360d$var$h((0, $9y0hV$Tag), {
         style: style,
         className: className
     }, [
@@ -129,7 +138,7 @@ function $03d8811e9c9b360d$export$117e56c71b172cde({ data: data, highlighted: hi
                 }
             }
         }, [
-            type.name,
+            type?.name,
             _matchLink
         ])
     ]);
@@ -171,7 +180,26 @@ function $03d8811e9c9b360d$var$HighlightedText(props) {
     parts.push(text.slice(start));
     return $03d8811e9c9b360d$var$h("span", parts);
 }
+function $03d8811e9c9b360d$var$normalizeColor(hex8) {
+    const background = (0, $9y0hV$useDarkMode)().isEnabled ? "#000000" : "#ffffff";
+    const r = parseInt(hex8.slice(1, 3), 16);
+    const g = parseInt(hex8.slice(3, 5), 16);
+    const b = parseInt(hex8.slice(5, 7), 16);
+    const a = parseInt(hex8.slice(7, 9), 16) / 255;
+    const bgR = parseInt(background.slice(1, 3), 16);
+    const bgG = parseInt(background.slice(3, 5), 16);
+    const bgB = parseInt(background.slice(5, 7), 16);
+    const blend = (fg, bg)=>Math.round((1 - a) * bg + a * fg);
+    const blendedR = blend(r, bgR);
+    const blendedG = blend(g, bgG);
+    const blendedB = blend(b, bgB);
+    return "#" + blendedR.toString(16).padStart(2, "0") + blendedG.toString(16).padStart(2, "0") + blendedB.toString(16).padStart(2, "0");
+}
+function $03d8811e9c9b360d$var$isHighlighted(id, selectedNodes, nodes) {
+    if (selectedNodes?.length === 0) return true;
+    return selectedNodes?.includes(id) || nodes?.some((node)=>selectedNodes?.includes(node.id) && node.children.some((child)=>child.id === id));
+}
 
 
 export {$03d8811e9c9b360d$export$c4b91360064ad200 as buildHighlights, $03d8811e9c9b360d$export$d60b563f571177d as enhanceData, $03d8811e9c9b360d$export$35baa338324d8550 as getTagStyle, $03d8811e9c9b360d$export$2b07158757c249e0 as ExtractionContext, $03d8811e9c9b360d$export$4eb2a0ce903ce967 as ModelInfo, $03d8811e9c9b360d$export$117e56c71b172cde as EntityTag};
-//# sourceMappingURL=extractions.54be85f8.js.map
+//# sourceMappingURL=feedback-components.5df2a926.js.map

package/dist/esm/feedback-components.5df2a926.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/feedback-components/src/extractions/index.ts"],"sourcesContent":["import styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { Tag } from \"@blueprintjs/core\";\nimport type { Entity, EntityExt, Highlight, EntityType } from \"./types\";\nimport { CSSProperties } from \"react\";\nimport { asChromaColor } from \"@macrostrat/color-utils\";\nimport hyper from \"@macrostrat/hyper\";\nimport { useDarkMode } from \"@macrostrat/ui-components\";\n\nexport type { Entity, EntityExt };\n\nconst h = hyper.styled(styles);\n\nexport function buildHighlights(\n  entities: EntityExt[],\n  parent: EntityExt | null,\n): Highlight[] {\n  let highlights = [];\n  let parents = [];\n  if (parent != null) {\n    parents = [parent.id, ...(parent.parents ?? [])];\n  }\n\n  for (const entity of entities) {\n    highlights.push({\n      start: entity.indices[0],\n      end: entity.indices[1],\n      text: entity.name,\n      backgroundColor: entity.type?.color,\n      tag: entity.type?.name ?? \"lith\",\n      id: entity.id,\n      parents,\n    });\n    highlights.push(...buildHighlights(entity.children ?? [], entity));\n  }\n  return highlights;\n}\n\nexport function enhanceData(extractionData, models, entityTypes) {\n  return {\n    ...extractionData,\n    model: models.get(extractionData.model_id),\n    entities: extractionData.entities?.map((d) =>\n      enhanceEntity(d, entityTypes),\n    ),\n  };\n}\n\nexport function getTagStyle(\n  baseColor: string,\n  options: { highlighted?: boolean; inDarkMode?: boolean; active?: boolean },\n): CSSProperties {\n  const _baseColor = asChromaColor(baseColor ?? \"#fff\");\n  const {\n    highlighted = true,\n    inDarkMode = useDarkMode().isEnabled,\n    active = false,\n  } = options;\n\n  let mixAmount = highlighted ? 0.8 : 0.5;\n  let backgroundAlpha = highlighted ? 0.8 : 0.2;\n\n  if (active) {\n    mixAmount = 1;\n    backgroundAlpha = 1;\n  }\n\n  const mixTarget = \"black\";\n\n  const color = active ? \"#000\" : _baseColor.mix(mixTarget, mixAmount).hex();\n  const borderColor = highlighted\n    ? _baseColor.mix(mixTarget, mixAmount / 1.1).hex()\n    : \"transparent\";\n\n  let backgroundColor = active\n    ? _baseColor.alpha(backgroundAlpha).hex()\n    : normalizeColor(_baseColor.alpha(backgroundAlpha).hex());\n\n  // handle white backgrounds in light mode\n  if (!inDarkMode && backgroundColor === \"#ffffff\") {\n    console.log(\"Adjusting background color for light mode:\", backgroundColor);\n    backgroundColor = \"#f0f0f0\";\n  }\n\n  return {\n    color,\n    backgroundColor,\n    boxSizing: \"border-box\",\n    borderStyle: \"solid\",\n    borderColor,\n    borderWidth: \"1.5px\",\n    fontWeight: active ? \"bold\" : \"normal\",\n    fontSize: \"0.9em\",\n  };\n}\n\nfunction enhanceEntity(\n  entity: Entity,\n  entityTypes: Map<number, EntityType>,\n): EntityExt {\n  return {\n    ...entity,\n    type: addColor(entityTypes.get(entity.type), entity.match != null),\n    children: entity.children?.map((d) => enhanceEntity(d, entityTypes)),\n  };\n}\n\nfunction addColor(entityType: EntityType, match = false) {\n  const color = asChromaColor(entityType.color ?? \"#fff\").brighten(\n    match ? 1 : 2,\n  );\n\n  return { ...entityType, color: color.css() };\n}\n\nexport function ExtractionContext({\n  data,\n  entityTypes,\n  matchComponent,\n}: {\n  data: any;\n  entityTypes: Map<number, EntityType>;\n  matchComponent: MatchComponent;\n}) {\n  const highlights = buildHighlights(data.entities, null);\n\n  return h(\"div\", [\n    h(\"p\", h(HighlightedText, { text: data.paragraph_text, highlights })),\n    h(ModelInfo, { data: data.model }),\n    h(\n      \"ul.entities\",\n      data.entities.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n    ),\n  ]);\n}\n\nexport function ModelInfo({ data }) {\n  return h(\"p.model-name\", [\"Model: \", h(\"code.bp5-code\", data.name)]);\n}\n\nexport type MatchComponent = (props: { data: any }) => any;\n\ntype EntityTagProps = {\n  data: EntityExt;\n  highlighted?: boolean;\n  active?: boolean;\n  onClickType?: (type: EntityType) => void;\n  matchComponent?: MatchComponent;\n};\n\nexport function EntityTag({\n  data,\n  highlighted = true,\n  active = false,\n  onClickType,\n  matchComponent = null,\n}: EntityTagProps) {\n  const { name, type, match } = data;\n\n  const className = classNames(\n    {\n      matched: match != null,\n      type: data.type?.name ?? \"lith\",\n    },\n    \"entity\",\n  );\n\n  const style = getTagStyle(type?.color, { highlighted, active });\n\n  let _matchLink = null;\n  if (match != null && matchComponent != null) {\n    _matchLink = h(matchComponent, { data: match });\n  }\n\n  return h(Tag, { style, className }, [\n    h(\"span.entity-name\", name),\n    \" \",\n    h(\n      \"code.entity-type.bp5-code\",\n      {\n        onClick(evt) {\n          if (active && onClickType != null) {\n            onClickType(type);\n            evt.stopPropagation();\n          }\n        },\n      },\n      [type?.name, _matchLink],\n    ),\n  ]);\n}\n\nfunction ExtractionInfo({\n  data,\n  matchComponent = null,\n}: {\n  data: EntityExt;\n  matchComponent: MatchComponent;\n}) {\n  const children = data.children ?? [];\n\n  return h(\"li.entity-row\", [\n    h(EntityTag, { data, matchComponent }),\n    h.if(children.length > 0)([\n      h(\n        \"ul.children\",\n        children.map((d) => h(ExtractionInfo, { data: d, matchComponent })),\n      ),\n    ]),\n  ]);\n}\n\nfunction HighlightedText(props: { text: string; highlights: Highlight[] }) {\n  const { text, highlights = [] } = props;\n  const parts = [];\n  let start = 0;\n\n  const sortedHighlights = highlights.sort((a, b) => a.start - b.start);\n  const deconflictedHighlights = sortedHighlights.map((highlight, i) => {\n    if (i === 0) return highlight;\n    const prev = sortedHighlights[i - 1];\n    if (highlight.start < prev.end) {\n      highlight.start = prev.end;\n    }\n    return highlight;\n  });\n\n  for (const highlight of deconflictedHighlights) {\n    const { start: s, end, ...rest } = highlight;\n    parts.push(text.slice(start, s));\n    parts.push(h(\"span.highlight\", { style: rest }, text.slice(s, end)));\n    start = end;\n  }\n  parts.push(text.slice(start));\n  return h(\"span\", parts);\n}\n\nfunction normalizeColor(hex8) {\n  const background = useDarkMode().isEnabled ? \"#000000\" : \"#ffffff\";\n\n  const r = parseInt(hex8.slice(1, 3), 16);\n  const g = parseInt(hex8.slice(3, 5), 16);\n  const b = parseInt(hex8.slice(5, 7), 16);\n  const a = parseInt(hex8.slice(7, 9), 16) / 255;\n\n  const bgR = parseInt(background.slice(1, 3), 16);\n  const bgG = parseInt(background.slice(3, 5), 16);\n  const bgB = parseInt(background.slice(5, 7), 16);\n\n  const blend = (fg, bg) => Math.round((1 - a) * bg + a * fg);\n\n  const blendedR = blend(r, bgR);\n  const blendedG = blend(g, bgG);\n  const blendedB = blend(b, bgB);\n\n  return (\n    \"#\" +\n    blendedR.toString(16).padStart(2, \"0\") +\n    blendedG.toString(16).padStart(2, \"0\") +\n    blendedB.toString(16).padStart(2, \"0\")\n  );\n}\n\nfunction isHighlighted(id: number, selectedNodes: number[], nodes: any[]) {\n  if (selectedNodes?.length === 0) return true;\n  return (\n    selectedNodes?.includes(id) ||\n    nodes?.some(\n      (node) =>\n        selectedNodes?.includes(node.id) &&\n        node.children.some((child) => child.id === id),\n    )\n  );\n}\n"],"names":[],"version":3,"file":"feedback-components.5df2a926.js.map"}