@threadlabs/looma 0.31.0 → 0.31.2

package/components/shared/icons.js

@@ -63,6 +63,7 @@ export const icons = {
   "settings": [["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
   "split": [["path",{"d":"M16 3h5v5"}],["path",{"d":"M8 3H3v5"}],["path",{"d":"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"}],["path",{"d":"m15 9 6-6"}]],
   "strikethrough": [["path",{"d":"M16 4H9a3 3 0 0 0-2.83 4"}],["path",{"d":"M14 12a4 4 0 0 1 0 8H6"}],["line",{"x1":"4","x2":"20","y1":"12","y2":"12"}]],
+  "superscript": [["path",{"d":"m4 19 8-8"}],["path",{"d":"m12 19-8-8"}],["path",{"d":"M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06"}]],
   "table": [["path",{"d":"M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"}]],
   "tag": [["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],
   "trash": [["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],

package/components/shared/tooltip.js

@@ -0,0 +1,7 @@
+/** Resolve the inherited pointer-intent delay; CSS time values and millisecond numbers are accepted. */
+export function tooltipShowDelay(element, fallback = 500) {
+  if (!element) return fallback;
+  const value = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("--ui-tooltip-show-delay").trim();
+  const match = /^([0-9]+(?:\.[0-9]+)?)(ms|s)?$/.exec(value);
+  return match ? Number(match[1]) * (match[2] === "s" ? 1000 : 1) : fallback;
+}

package/components/ui-editor-footnote-editor/ui-editor-footnote-editor.html

@@ -0,0 +1,57 @@
+<link rel="component" href="../ui-stack/ui-stack.html">
+<link rel="component" href="../ui-form-field/ui-form-field.html">
+<link rel="component" href="../ui-input-group/ui-input-group.html">
+<link rel="component" href="../ui-input/ui-input.html">
+<link rel="component" href="../ui-textarea/ui-textarea.html">
+<link rel="component" href="../ui-button/ui-button.html">
+<template component="ui-editor-footnote-editor" module="./ui-editor-footnote-editor.js">
+  <defs>
+    <prop name="label" type="string" default="">The footnote's label, which its references and its note share, shown between [^ and ].</prop>
+    <prop name="note" type="string" default="">The note's text, shown in the note field, with each block of a longer note on its own line.</prop>
+    <prop name="editable" type="boolean" default="false"
+    >Whether the note's text can be edited here. A note with formatting or more than one block shows its text read-only; Go to note edits it in the
+      document.</prop>
+    <prop name="error" type="string" default="">Why the label field's label was not used. While set, the field is invalid and shows it.</prop>
+    <state name="base" type="string" value="ui-editor-footnote-editor"></state>
+    <event name="text" type="object">
+      <prop name="text" required type="string"></prop>
+      The note's text changed.
+    </event>
+    <event name="label" type="object">
+      <prop name="label" required type="string"></prop>
+      A new label was committed: the label field changed and lost focus, or Enter was pressed in it.
+    </event>
+    <event name="go" type="object">Go to note was pressed.</event>
+    <event name="done" type="object">Enter or Escape was pressed in a field, to close the editor and return to the reference.</event>
+  </defs>
+  <div role="dialog" aria-label="Edit footnote">
+    <ui-stack gap="s">
+      <ui-form-field from:invalid="$error != ''">
+        <label slot="label" from:for="concat($base, '-label')">Label</label>
+        <ui-input-group>
+          <span slot="prefix">[^</span>
+          <ui-input data-footnote-label from:id="concat($base, '-label')" size="sm" autocomplete="off" from:value="$label"></ui-input>
+          <span slot="suffix">]</span>
+        </ui-input-group>
+        <span slot="error">{$error}</span>
+      </ui-form-field>
+      <ui-form-field>
+        <label slot="label" from:for="concat($base, '-note')">Note</label>
+        <ui-input-group multiline>
+          <ui-textarea
+            data-footnote-note
+            from:id="concat($base, '-note')"
+            size="sm"
+            rows="2"
+            autosize
+            placeholder="Write the note"
+            from:readonly="not $editable"
+            from:value="$note"
+          ></ui-textarea>
+          <ui-button slot="action" size="sm" data-footnote-go>Go to note</ui-button>
+        </ui-input-group>
+        <span $if="not $editable" slot="help">This note has formatting, so it is edited in the document.</span>
+      </ui-form-field>
+    </ui-stack>
+  </div>
+</template>

package/components/ui-editor-footnote-editor/ui-editor-footnote-editor.js

@@ -0,0 +1,38 @@
+// Gives each editor its own field ids, reports the note's text as it changes and a label when it is
+// committed, Go to note when pressed, and Enter or Escape in a field as done.
+export function connect(host) {
+  const element = host.element;
+  if (host.state.base === "ui-editor-footnote-editor") host.state.base = `ui-editor-footnote-editor-${Math.random().toString(36).slice(2, 11)}`;
+  const within = (event, selector) => {
+    const match = event.target.closest?.(selector);
+    return match && element.contains(match) ? match : null;
+  };
+  const onInput = (event) => {
+    if (within(event, "[data-footnote-note]")) host.dispatch("text", { text: event.target.value });
+  };
+  const onChange = (event) => {
+    if (within(event, "[data-footnote-label]") && typeof event.target.value === "string") host.dispatch("label", { label: event.target.value.trim() });
+  };
+  const onClick = (event) => {
+    if (within(event, "[data-footnote-go]")) host.dispatch("go", {});
+  };
+  // The editor handles Enter and Escape itself, so the overlay around it does not also act on them.
+  const onKeyDown = (event) => {
+    const label = within(event, "[data-footnote-label]");
+    if ((event.key !== "Enter" && event.key !== "Escape") || !(label || within(event, "[data-footnote-note]"))) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (label && event.key === "Enter") host.dispatch("label", { label: event.target.value.trim() });
+    host.dispatch("done", {});
+  };
+  element.addEventListener("input", onInput);
+  element.addEventListener("change", onChange);
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeyDown);
+  return () => {
+    element.removeEventListener("input", onInput);
+    element.removeEventListener("change", onChange);
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeyDown);
+  };
+}

package/components/ui-icon/ui-icon.html

@@ -72,6 +72,7 @@
         'settings': [{ tag: 'path', d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' }, { tag: 'circle', cx: '12', cy: '12', r: '3' }],
         'split': [{ tag: 'path', d: 'M16 3h5v5' }, { tag: 'path', d: 'M8 3H3v5' }, { tag: 'path', d: 'M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3' }, { tag: 'path', d: 'm15 9 6-6' }],
         'strikethrough': [{ tag: 'path', d: 'M16 4H9a3 3 0 0 0-2.83 4' }, { tag: 'path', d: 'M14 12a4 4 0 0 1 0 8H6' }, { tag: 'line', x1: '4', x2: '20', y1: '12', y2: '12' }],
+        'superscript': [{ tag: 'path', d: 'm4 19 8-8' }, { tag: 'path', d: 'm12 19-8-8' }, { tag: 'path', d: 'M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06' }],
         'table': [{ tag: 'path', d: 'M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18' }],
         'tag': [{ tag: 'path', d: 'M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z' }, { tag: 'circle', cx: '7.5', cy: '7.5', r: '.5', fill: 'currentColor' }],
         'trash': [{ tag: 'path', d: 'M10 11v6' }, { tag: 'path', d: 'M14 11v6' }, { tag: 'path', d: 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6' }, { tag: 'path', d: 'M3 6h18' }, { tag: 'path', d: 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' }],

package/components/ui-tooltip/ui-tooltip.js

@@ -1,3 +1,4 @@
+import { tooltipShowDelay } from "../shared/tooltip.js";
 import { closeOverlay, createAnchoredSurface, createIdResolver, onOverlayOpen, openOverlay } from "../shared/overlay.js";
 
 const warmTooltips = new WeakMap();
@@ -61,7 +62,7 @@ export function connect(host) {
     showTimer = setTimeout(() => {
       showTimer = null;
       setOpen(true, "pointer");
-    }, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, Number(host.props.showDelay.value ?? 500)));
+    }, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, host.props.showDelay.inputValue != null ? Number(host.props.showDelay.value) : tooltipShowDelay(element)));
   };
   const onLeave = () => {
     clearShow();
@@ -134,6 +135,8 @@ export function connect(host) {
     if (how === "hover") {
       trigger.addEventListener("pointerenter", onEnter);
       trigger.addEventListener("pointerleave", onLeave);
+      // Editor decorations can acquire their tooltip after the pointer has already entered.
+      if (trigger.matches(":hover")) onEnter({ pointerType: "mouse" });
     }
     trigger.addEventListener("focusin", onFocusin);
     trigger.addEventListener("focusout", onFocusout);