@vertexvis/ui 0.1.0-canary.14 → 0.1.0-canary.16

package/dist/cjs/{icon-b6383789.js → icon-69910290.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-6a92256c.js');
 const index$1 = require('./index-e1b40fa6.js');
-const iconHelper = require('./icon-helper-0e14d7cc.js');
+const iconHelper = require('./icon-helper-2ba6caba.js');
 
 const iconCss = ".container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon{display:flex;justify-content:center;align-items:center;fill:currentColor}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}svg{position:relative;width:100%}";
 

package/dist/cjs/{icon-button-f32c3cc8.js → icon-button-ab196f5e.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-6a92256c.js');
 const index$1 = require('./index-e1b40fa6.js');
-const iconHelper = require('./icon-helper-0e14d7cc.js');
+const iconHelper = require('./icon-helper-2ba6caba.js');
 
 const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900);--icon-margin:0px}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;position:relative;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
 

package/dist/cjs/{icon-helper-0e14d7cc.js → icon-helper-2ba6caba.js}

@@ -159,6 +159,9 @@ const CubeOrthographic = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/
 const CubePerspective = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "cube-perspective" },
   index.h("path", { d: "M13.72,4.05l-6-3a.49.49,0,0,0-.44,0l-6,3A.51.51,0,0,0,1,4.5v7a.51.51,0,0,0,.28.45l6,3a.49.49,0,0,0,.44,0l6-3A.51.51,0,0,0,14,11.5v-7A.51.51,0,0,0,13.72,4.05ZM7,13.69l-5-2.5V5.31l5,2.5Zm.5-6.75L2.62,4.5,7.5,2.06,12.38,4.5ZM13,11.19l-5,2.5V7.81l5-2.5Z" })));
 
+const CubeStack = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "cube-stack" },
+  index.h("path", { d: "M13.72 2.52 10.22.77a.508.508 0 0 0-.45 0l-3.5 1.75a.5.5 0 0 0-.28.45v3.81c-.08 0-.15.02-.22.05l-3.5 1.75a.5.5 0 0 0-.28.45v4.08c0 .19.11.36.28.45l3.5 1.75c.07.04.15.05.22.05s.16-.02.23-.05l7.52-3.82c.15-.1.25-.25.25-.43V2.97c0-.19-.11-.36-.28-.45ZM13 6.74l-2.46 1.23V5.03L13 3.8v2.94Zm-7.46 7.33L3 12.8V9.82l2.54 1.27v2.98Zm.5-3.85-2.4-1.2 2.37-1.18 2.4 1.2-2.37 1.18ZM9 12.78l-2.46 1.25v-2.94L9 9.86v2.92Zm.54-4.77L7 6.74V3.76l2.54 1.27v2.98ZM7.63 2.96 10 1.78l2.4 1.2-2.37 1.18-2.4-1.2Zm2.91 6.13L13 7.86v2.88l-2.46 1.25v-2.9Z" })));
+
 const Delete = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "delete" },
   index.h("path", { d: "M6.5,12a.5.5,0,0,0,.5-.5v-5a.5.5,0,0,0-1,0v5A.5.5,0,0,0,6.5,12Zm3,0a.5.5,0,0,0,.5-.5v-5a.5.5,0,0,0-1,0v5A.5.5,0,0,0,9.5,12Zm4-10H10V1.5a.47.47,0,0,0-.15-.35A.47.47,0,0,0,9.5,1h-3a.47.47,0,0,0-.35.15A.47.47,0,0,0,6,1.5V2H2.5a.5.5,0,0,0,0,1H3v9.5A2.5,2.5,0,0,0,5.5,15h5A2.5,2.5,0,0,0,13,12.5V3h.5a.5.5,0,0,0,0-1ZM12,12.5A1.5,1.5,0,0,1,10.5,14h-5A1.5,1.5,0,0,1,4,12.5V4h8Z" })));
 
@@ -320,6 +323,10 @@ const PinTextSquare = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg
 const Plus = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "plus" },
   index.h("path", { d: "M14.36,7.5H8.5V1.64a.5.5,0,0,0-1,0V7.5H1.64a.5.5,0,0,0,0,1H7.5v5.86a.5.5,0,0,0,1,0V8.5h5.86a.5.5,0,0,0,0-1Z" })));
 
+const PlusWithArrow = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "plus-with-arrow" },
+  index.h("path", { d: "M8.58 1.46c-3.58 0-6.5 2.92-6.5 6.5H.59l2 3 2-3h-1.5c0-3.03 2.47-5.5 5.5-5.5s5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5c-1.19 0-2.32-.37-3.27-1.08a.505.505 0 0 0-.7.1c-.17.22-.12.53.1.7 1.13.84 2.46 1.28 3.87 1.28 3.58 0 6.5-2.92 6.5-6.5s-2.92-6.5-6.51-6.5Z" }),
+  index.h("path", { d: "M8.5 5.53c-.28 0-.5.22-.5.5v1.49H6.51c-.28 0-.5.22-.5.5s.22.5.5.5H8v1.51c0 .28.22.5.5.5s.5-.22.5-.5V8.52h1.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H9V6.03c0-.28-.22-.5-.5-.5Z" })));
+
 const PMI = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "pmi" },
   index.h("path", { d: "M14.49 6.03 4.5 6c-.28 0-.5-.22-.5-.5v-3c0-.13.05-.26.15-.35A.51.51 0 0 1 4.5 2l9.99.03c.28 0 .5.22.5.5v3c0 .13-.05.26-.15.35a.51.51 0 0 1-.35.15ZM5 5l8.99.03v-2L5 3v2Z" }),
   index.h("path", { d: "M9.5 12.01H4.55c-.28 0-.5-.22-.5-.5s.22-.5.5-.5H9V6.02c0-.28.22-.5.5-.5s.5.22.5.5v5.49c0 .28-.22.5-.5.5Z" }),
@@ -496,6 +503,8 @@ function getSvg(name) {
       return index.h(CubeOrthographic, null);
     case 'cube-perspective':
       return index.h(CubePerspective, null);
+    case 'cube-stack':
+      return index.h(CubeStack, null);
     case 'delete':
       return index.h(Delete, null);
     case 'download':
@@ -580,6 +589,8 @@ function getSvg(name) {
       return index.h(PinTextSquare, null);
     case 'plus':
       return index.h(Plus, null);
+    case 'plus-with-arrow':
+      return index.h(PlusWithArrow, null);
     case 'pmi':
       return index.h(PMI, null);
     case 'precise-measurement':

package/dist/cjs/index.cjs.js

@@ -21,8 +21,8 @@ const draggablePopover = require('./draggable-popover-edf23d3a.js');
 const dropdownMenu = require('./dropdown-menu-5ae03a72.js');
 const expandable = require('./expandable-b1cd4f0b.js');
 const helpTooltip = require('./help-tooltip-f72eccc7.js');
-const icon = require('./icon-b6383789.js');
-const iconButton = require('./icon-button-f32c3cc8.js');
+const icon = require('./icon-69910290.js');
+const iconButton = require('./icon-button-ab196f5e.js');
 const logoLoading = require('./logo-loading-4d49fedf.js');
 const menu = require('./menu-d1ecf43b.js');
 const menuDivider = require('./menu-divider-5bdebe5d.js');
@@ -32,7 +32,7 @@ const radio = require('./radio-bff991d2.js');
 const radioGroup = require('./radio-group-d628f631.js');
 const resizable = require('./resizable-e4248256.js');
 const resultList = require('./result-list-241ffe8d.js');
-const searchBar = require('./search-bar-91cbcd07.js');
+const searchBar = require('./search-bar-2e7ee35a.js');
 const select = require('./select-5f8aecfe.js');
 const slider = require('./slider-13594e49.js');
 const spinner = require('./spinner-bb990a42.js');
@@ -45,7 +45,7 @@ const tooltip = require('./tooltip-9ac797a0.js');
 require('./index-6a92256c.js');
 require('./slots-fb5ac359.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-0e14d7cc.js');
+require('./icon-helper-2ba6caba.js');
 require('./templates-e7b3ffbb.js');
 require('./tslib.es6-838fd860.js');
 require('./dom-b6c5fbf4.js');

package/dist/cjs/{search-bar-91cbcd07.js → search-bar-2e7ee35a.js}

@@ -55,12 +55,24 @@ const getWindowSelection = () => {
   }
   return undefined;
 };
+const nodeHasChildNodes = (node) => {
+  return node.hasChildNodes();
+};
 const createDocumentRange = () => {
   return document.createRange();
 };
 const createTextNode = (text) => {
   return new Text(text);
 };
+const createBreak = () => {
+  return document.createElement('br');
+};
+const isHtmlElement = (node) => {
+  return node instanceof HTMLElement;
+};
+const isBrElement = (node) => {
+  return node instanceof HTMLBRElement;
+};
 
 const createResultUri = (result) => {
   return `${result.type}:${result.id}`;
@@ -71,15 +83,56 @@ const createSearchResultReplacement = (result, before, after) => {
     before: createTextNode(before),
     beforeSpace: createTextNode(createHairSpace()),
     result: createTextNode(urn),
-    afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
+    afterSpace: after != null
+      ? createTextNode(createNoBreakSpace())
+      : createTextNode(createHairSpace()),
     after: after != null ? createTextNode(after) : undefined,
   };
 };
-const getNodesForSearchResultReplacement = (replacement) => {
+/**
+ * Newline characters and spaces are represented slightly differently within a
+ * content editable element between browsers. This method standardizes the
+ * representation of those characters to avoid having to write branching logic
+ * to support each individual browser.
+ */
+const standardizeNewlinesAndSpaces = (node) => {
+  const content = node.textContent;
+  if (content === '\n') {
+    return [createBreak()];
+  }
+  else if (content != null && content.includes('\n')) {
+    const split = content.split('\n');
+    return split.reduce((res, substr, i) => {
+      const previous = split[i - 1];
+      // Ignore the empty string if the prior element was converted
+      // to a breaking element to prevent duplication of newlines.
+      if (substr === '' && previous !== '') {
+        return res;
+      }
+      return [
+        ...res,
+        // Standard spaces are not always respected with in `Text`
+        // elements when appended to a contenteditable element. This
+        // conversion preserves that spacing.
+        createTextNode(substr.replace(/ /g, createNoBreakSpace())),
+        createBreak(),
+      ];
+    }, []);
+  }
+  return [node];
+};
+const getNodesForSearchResultReplacement = (replacement, isBreaking = false) => {
   const keys = Object.keys(replacement);
-  return keys
+  const replacementElements = keys
     .map((key) => replacement[key])
     .filter((node) => node != null);
+  // If the element is intended to replace a breaking element such
+  // as a `<div>` wrapper, a newline is required alongside the standard
+  // replacement elements.
+  if (isBreaking) {
+    return [createTextNode('\n'), ...replacementElements];
+  }
+  return replacementElements;
 };
 /**
  * We leverage a couple unique spaces to represent mentions, allowing for
@@ -114,13 +167,34 @@ const SearchBar = class {
     this.inputFocus = index.createEvent(this, "inputFocus", 7);
     this.inputBlur = index.createEvent(this, "inputBlur", 7);
     this.rawElements = [];
+    this.attemptReplaceElement = (child, other, replacement, isBreaking = false) => {
+      // In the case that the child we're evaluating has its own children
+      // (often a wrapper `<div>`), we want to evaluate whether any of its
+      // children is the target to replace.
+      if (nodeHasChildNodes(child) &&
+        Array.from(child.childNodes).some((c) => nodeHasChildNodes(c) || this.isIdenticalElement(c, other))) {
+        return Array.from(child.childNodes).reduce((res, c) => [
+          ...res,
+          ...this.attemptReplaceElement(c, other, replacement, 
+          // If the element we're evaluating is a wrapper, we want to
+          // consider it a breaking element and add a newline to the
+          // replaced element only if the previous node is a `Text` node.
+          !isHtmlElement(child.previousSibling)),
+        ], []);
+      }
+      else {
+        return this.isIdenticalElement(child, other)
+          ? getNodesForSearchResultReplacement(replacement, isBreaking)
+          : [child];
+      }
+    };
     this.isIdenticalElement = (child, other) => {
       return (child === this.triggeredElement ||
         this.getTextContent(child) === this.getTextContent(other));
     };
     this.getTextContent = (node) => {
       var _a;
-      if (node instanceof HTMLElement) {
+      if (isHtmlElement(node)) {
         return node.innerText;
       }
       return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
@@ -197,21 +271,54 @@ const SearchBar = class {
         selection.addRange(range);
       }
     };
-    this.getContentAsString = () => {
-      if (this.contentEl != null) {
-        return trimNonstandardSpaces(Array.from(this.contentEl.childNodes).reduce((res, n) => {
+    this.getContentAsString = (element) => {
+      if (element != null) {
+        const res = trimNonstandardSpaces(Array.from(element.childNodes).reduce((res, n) => {
           var _a;
-          if (n instanceof HTMLElement &&
-            n.getAttribute('data-replaced') === 'true') {
+          const previousSiblingIsBlock = n.previousSibling == null || isHtmlElement(n.previousSibling);
+          if (isHtmlElement(n) && n.getAttribute('data-replaced') === 'true') {
+            /**
+             * If an element has been replaced visually, append the original
+             * value prior to being replaced.
+             */
             return `${res}${n.getAttribute('data-original')}`;
           }
-          else if (n instanceof HTMLElement) {
-            return `${res}${n.innerText}`;
+          else if (isHtmlElement(n) && n.childElementCount > 0) {
+            /**
+             * If an element is a wrapper, we want to treat it as a block element,
+             * ensuring newlines before and after the content.
+             * Additionally, we want to evaluate each of its children independently.
+             * Some browsers will conditionally wrap content in additional wrapper
+             * elements we need to unravel.
+             */
+            return `${res}${previousSiblingIsBlock ? '' : '\n'}${this.getContentAsString(n)}`;
+          }
+          else if (isBrElement(n)) {
+            /**
+             * If an element is a `<br>` element, we want to simply represent
+             * it as a newline in the returned string.
+             */
+            return `${res}\n`;
+          }
+          else if (isHtmlElement(n)) {
+            /**
+             * If an element is a wrapper, we want to treat it as a block element,
+             * ensuring newlines before and after the content.
+             * If the prior element is also to be treated as a block format, we
+             * will omit the newline before the content to avoid duplicating the
+             * behavior.
+             */
+            return `${res}${previousSiblingIsBlock ? '' : '\n'}${n.innerText}\n`;
           }
           else {
+            /**
+             * If a node is simply a `Text` node, we just want to append the text
+             * if defined.
+             */
             return `${res}${(_a = n.textContent) !== null && _a !== void 0 ? _a : ''}`;
           }
         }, ''));
+        return res;
       }
       return '';
     };
@@ -287,12 +394,13 @@ const SearchBar = class {
               replacement.before,
               replacement.beforeSpace,
               replacement.result,
+              replacement.afterSpace,
             ];
           }
           return res;
         }, [])
         : [];
-      this.rawElements = [...parts, createTextNode(nextSubstr)];
+      this.rawElements = [...parts, createTextNode(nextSubstr)].reduce((res, p) => [...res, ...standardizeNewlinesAndSpaces(p)], []);
       this.updateContent(this.replacements);
     }
   }
@@ -300,7 +408,7 @@ const SearchBar = class {
     if (this.contentEl != null && !fastDeepEqual(newValue, oldValue)) {
       this.contentEl.innerHTML = '';
       this.displayedElements = this.rawElements.map((el) => {
-        const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
+        const raw = isHtmlElement(el) ? el.innerText : el.textContent;
         const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(createResultUri(r)));
         if (raw != null && replacement != null) {
           const replacementElement = this.createReplacedElement(raw, replacement);
@@ -315,7 +423,7 @@ const SearchBar = class {
       if (this.lastReplacedSpace != null) {
         this.moveCursorToNodeEnd(this.lastReplacedSpace);
       }
-      this.inputChanged.emit(this.getContentAsString());
+      this.inputChanged.emit(this.getContentAsString(this.contentEl));
     }
   }
   render() {
@@ -327,7 +435,7 @@ const SearchBar = class {
       blank: this.variant === 'blank',
       disabled: this.disabled,
     });
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleCursorPositionUpdate, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
         this.resultItems != null &&
         this.resultItems.length > 0, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onEnterPressed: this.handleResultClick, onResultClick: this.handleResultClick }, index.h("slot", { name: "results" })), index.h("slot", { name: "replaced" })));
   }
@@ -343,13 +451,13 @@ const SearchBar = class {
     this.cursorPosition = this.getCursorPosition();
   }
   async handleInput() {
-    this.inputChanged.emit(this.getContentAsString());
+    this.inputChanged.emit(this.getContentAsString(this.contentEl));
   }
   handleClick() {
     this.handleCursorPositionUpdate();
   }
   handleWindowClick(event) {
-    if (event.target instanceof HTMLElement &&
+    if (isHtmlElement(event.target) &&
       event.target.getAttribute('data-replaced') === 'true' &&
       event.target.nextSibling != null) {
       this.moveCursorToNodeEnd(event.target.nextSibling, true);
@@ -366,7 +474,7 @@ const SearchBar = class {
     var _a;
     const triggeredRange = this.triggeredRange;
     const triggeredElement = this.triggeredElement;
-    const value = triggeredElement instanceof HTMLElement
+    const value = isHtmlElement(triggeredElement)
       ? triggeredElement.innerText
       : triggeredElement === null || triggeredElement === void 0 ? void 0 : triggeredElement.textContent;
     if (this.contentEl != null &&
@@ -380,12 +488,10 @@ const SearchBar = class {
       const replacement = createSearchResultReplacement(event.detail, before, after);
       this.lastReplacedSpace = replacement.afterSpace;
       this.rawElements = Array.from(this.contentEl.childNodes).reduce((re, e) => {
-        if (this.isIdenticalElement(e, triggeredElement)) {
-          return [...re, ...getNodesForSearchResultReplacement(replacement)];
-        }
-        else {
-          return [...re, e];
-        }
+        return [
+          ...re,
+          ...this.attemptReplaceElement(e, triggeredElement, replacement),
+        ];
       }, []);
       this.hasTriggered = false;
       this.resultReplaced.emit(event.detail);

package/dist/cjs/vertex-icon-button.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const iconButton = require('./icon-button-f32c3cc8.js');
+const iconButton = require('./icon-button-ab196f5e.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-0e14d7cc.js');
+require('./icon-helper-2ba6caba.js');
 
 
 

package/dist/cjs/vertex-icon.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-b6383789.js');
+const icon = require('./icon-69910290.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-0e14d7cc.js');
+require('./icon-helper-2ba6caba.js');
 
 
 

package/dist/cjs/vertex-search-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const searchBar = require('./search-bar-91cbcd07.js');
+const searchBar = require('./search-bar-2e7ee35a.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

package/dist/collection/components/icon/icon-helper.js

@@ -46,6 +46,7 @@ import { Copy } from './icons/copy';
 import { CrossSection } from './icons/cross-section';
 import { CubeOrthographic } from './icons/cube-orthographic';
 import { CubePerspective } from './icons/cube-perspective';
+import { CubeStack } from './icons/cube-stack';
 import { Delete } from './icons/delete';
 import { Download } from './icons/download';
 import { DragIndicator } from './icons/drag-indicator';
@@ -88,6 +89,7 @@ import { PinText } from './icons/pin-text';
 import { PinTextFill } from './icons/pin-text-fill';
 import { PinTextSquare } from './icons/pin-text-square';
 import { Plus } from './icons/plus';
+import { PlusWithArrow } from './icons/plus-with-arrow';
 import { PMI } from './icons/pmi';
 import { PreciseMeasurement } from './icons/precise-measurement';
 import { Rabbit } from './icons/rabbit';
@@ -206,6 +208,8 @@ export function getSvg(name) {
       return h(CubeOrthographic, null);
     case 'cube-perspective':
       return h(CubePerspective, null);
+    case 'cube-stack':
+      return h(CubeStack, null);
     case 'delete':
       return h(Delete, null);
     case 'download':
@@ -290,6 +294,8 @@ export function getSvg(name) {
       return h(PinTextSquare, null);
     case 'plus':
       return h(Plus, null);
+    case 'plus-with-arrow':
+      return h(PlusWithArrow, null);
     case 'pmi':
       return h(PMI, null);
     case 'precise-measurement':

package/dist/collection/components/icon/icon.js

@@ -33,7 +33,7 @@ export class Icon {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"compare\" | \"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"pin-text-square\" | \"plus\" | \"pmi\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"views\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
+          "resolved": "\"compare\" | \"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"cube-stack\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"pin-text-square\" | \"plus\" | \"plus-with-arrow\" | \"pmi\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"views\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
           "references": {
             "IconName": {
               "location": "import",

package/dist/collection/components/icon/icons/cube-stack.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const CubeStack = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "cube-stack" }, h("path", { d: "M13.72 2.52 10.22.77a.508.508 0 0 0-.45 0l-3.5 1.75a.5.5 0 0 0-.28.45v3.81c-.08 0-.15.02-.22.05l-3.5 1.75a.5.5 0 0 0-.28.45v4.08c0 .19.11.36.28.45l3.5 1.75c.07.04.15.05.22.05s.16-.02.23-.05l7.52-3.82c.15-.1.25-.25.25-.43V2.97c0-.19-.11-.36-.28-.45ZM13 6.74l-2.46 1.23V5.03L13 3.8v2.94Zm-7.46 7.33L3 12.8V9.82l2.54 1.27v2.98Zm.5-3.85-2.4-1.2 2.37-1.18 2.4 1.2-2.37 1.18ZM9 12.78l-2.46 1.25v-2.94L9 9.86v2.92Zm.54-4.77L7 6.74V3.76l2.54 1.27v2.98ZM7.63 2.96 10 1.78l2.4 1.2-2.37 1.18-2.4-1.2Zm2.91 6.13L13 7.86v2.88l-2.46 1.25v-2.9Z" })));

package/dist/collection/components/icon/icons/plus-with-arrow.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const PlusWithArrow = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "plus-with-arrow" }, h("path", { d: "M8.58 1.46c-3.58 0-6.5 2.92-6.5 6.5H.59l2 3 2-3h-1.5c0-3.03 2.47-5.5 5.5-5.5s5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5c-1.19 0-2.32-.37-3.27-1.08a.505.505 0 0 0-.7.1c-.17.22-.12.53.1.7 1.13.84 2.46 1.28 3.87 1.28 3.58 0 6.5-2.92 6.5-6.5s-2.92-6.5-6.51-6.5Z" }), h("path", { d: "M8.5 5.53c-.28 0-.5.22-.5.5v1.49H6.51c-.28 0-.5.22-.5.5s.22.5.5.5H8v1.51c0 .28.22.5.5.5s.5-.22.5-.5V8.52h1.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H9V6.03c0-.28-.22-.5-.5-.5Z" })));

package/dist/collection/components/icon-button/icon-button.js

@@ -50,7 +50,7 @@ export class IconButton {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"compare\" | \"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"pin-text-square\" | \"plus\" | \"pmi\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"views\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
+          "resolved": "\"compare\" | \"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"cube-stack\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"pin-text-square\" | \"plus\" | \"plus-with-arrow\" | \"pmi\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"views\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
           "references": {
             "IconName": {
               "location": "import",

package/dist/collection/components/search-bar/dom.js

@@ -4,9 +4,26 @@ export const getWindowSelection = () => {
   }
   return undefined;
 };
+export const nodeHasChildNodes = (node) => {
+  return node.hasChildNodes();
+};
 export const createDocumentRange = () => {
   return document.createRange();
 };
 export const createTextNode = (text) => {
   return new Text(text);
 };
+export const createBreak = () => {
+  return document.createElement('br');
+};
+export const createWrappingDiv = (nodes) => {
+  const el = document.createElement('div');
+  el.append(...nodes);
+  return el;
+};
+export const isHtmlElement = (node) => {
+  return node instanceof HTMLElement;
+};
+export const isBrElement = (node) => {
+  return node instanceof HTMLBRElement;
+};

package/dist/collection/components/search-bar/lib.js

@@ -1,4 +1,4 @@
-import { createTextNode } from './dom';
+import { createBreak, createTextNode } from './dom';
 export const createResultUri = (result) => {
   return `${result.type}:${result.id}`;
 };
@@ -8,15 +8,56 @@ export const createSearchResultReplacement = (result, before, after) => {
     before: createTextNode(before),
     beforeSpace: createTextNode(createHairSpace()),
     result: createTextNode(urn),
-    afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
+    afterSpace: after != null
+      ? createTextNode(createNoBreakSpace())
+      : createTextNode(createHairSpace()),
     after: after != null ? createTextNode(after) : undefined,
   };
 };
-export const getNodesForSearchResultReplacement = (replacement) => {
+/**
+ * Newline characters and spaces are represented slightly differently within a
+ * content editable element between browsers. This method standardizes the
+ * representation of those characters to avoid having to write branching logic
+ * to support each individual browser.
+ */
+export const standardizeNewlinesAndSpaces = (node) => {
+  const content = node.textContent;
+  if (content === '\n') {
+    return [createBreak()];
+  }
+  else if (content != null && content.includes('\n')) {
+    const split = content.split('\n');
+    return split.reduce((res, substr, i) => {
+      const previous = split[i - 1];
+      // Ignore the empty string if the prior element was converted
+      // to a breaking element to prevent duplication of newlines.
+      if (substr === '' && previous !== '') {
+        return res;
+      }
+      return [
+        ...res,
+        // Standard spaces are not always respected with in `Text`
+        // elements when appended to a contenteditable element. This
+        // conversion preserves that spacing.
+        createTextNode(substr.replace(/ /g, createNoBreakSpace())),
+        createBreak(),
+      ];
+    }, []);
+  }
+  return [node];
+};
+export const getNodesForSearchResultReplacement = (replacement, isBreaking = false) => {
   const keys = Object.keys(replacement);
-  return keys
+  const replacementElements = keys
     .map((key) => replacement[key])
     .filter((node) => node != null);
+  // If the element is intended to replace a breaking element such
+  // as a `<div>` wrapper, a newline is required alongside the standard
+  // replacement elements.
+  if (isBreaking) {
+    return [createTextNode('\n'), ...replacementElements];
+  }
+  return replacementElements;
 };
 /**
  * We leverage a couple unique spaces to represent mentions, allowing for