@threadlabs/looma 0.23.21 → 0.23.22

package/components/shared/overlay.js

@@ -31,7 +31,7 @@ function requestClose(document, reason, trigger) {
 function ensureListeners(document, state) {
   if (state.listening) return;
   state.onKeydown = (event) => {
-    if (event.key === "Escape") requestClose(document, "escape", "keyboard");
+    if (event.key === "Escape" && !event.defaultPrevented && requestClose(document, "escape", "keyboard")) event.preventDefault();
   };
   state.onPointerdown = (event) => {
     const top = state.records.at(-1);

package/components/ui-image/ui-image.html

@@ -0,0 +1,177 @@
+<template component="ui-image" controller="./ui-image.js">
+  <defs>
+    <prop name="src" type="string" default="">The image source, used by the default media.</prop>
+    <prop name="alt" type="string" default="">A text alternative for the image.</prop>
+    <prop name="width" type="integer" nullable
+    >Image width in CSS pixels; omitted uses intrinsic size in block/center placement or responsive sizing when wrapping.</prop>
+    <prop name="height" type="integer" nullable>Image height in CSS pixels; resizing preserves the intrinsic aspect ratio.</prop>
+    <prop name="placement" type="keyword" values="block, center, wrap-left, wrap-right" default="block"
+    >Block keeps text below; center centers the image; wrap-left and wrap-right let following text flow beside it.</prop>
+    <prop name="selected" type="boolean" default="false">Outlines the media as the current selection.</prop>
+    <prop name="resizable" type="boolean" default="false"
+    >Shows four corner handles while selected. Drag to resize, or focus a handle and use arrow keys; Shift uses a larger increment.</prop>
+    <event name="resize" type="object">
+      <prop name="width" type="integer" required></prop>
+      <prop name="height" type="integer" required></prop>
+      <prop name="phase" type="keyword" values="preview, commit, cancel" required></prop>
+      <prop name="trigger" type="keyword" values="pointer, keyboard" required></prop>
+      Reports resize intent. Preview is transient; the consumer persists a commit. Escape and pointer cancellation restore the original size.
+    </event>
+  </defs>
+  <figure>
+    <div class="frame" $ref="frame">
+      <slot name="media"><img from:src="src" from:alt="alt" from:width="width" from:height="height"></slot>
+      <div class="handles" from:hidden="not (selected and resizable)">
+        <button type="button" class="handle" data-corner="top-left" aria-label="Resize image from top left"></button>
+        <button type="button" class="handle" data-corner="top-right" aria-label="Resize image from top right"></button>
+        <button type="button" class="handle" data-corner="bottom-left" aria-label="Resize image from bottom left"></button>
+        <button type="button" class="handle" data-corner="bottom-right" aria-label="Resize image from bottom right"></button>
+      </div>
+      <slot name="controls"></slot>
+    </div>
+  </figure>
+  <style>
+    :host {
+      display: flex;
+      justify-content: flex-start;
+      box-sizing: border-box;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      margin: 0;
+      padding: var(--ui-space-3) 0;
+    }
+    :host-state([placement="center"]) {
+      justify-content: center;
+    }
+    :host-state([placement="wrap-left"]) {
+      float: left;
+      padding-inline-end: var(--ui-space-4);
+    }
+    :host-state([placement="wrap-right"]) {
+      float: right;
+      padding-inline-start: var(--ui-space-4);
+    }
+    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) {
+      inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
+    }
+    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame {
+      inline-size: 100%;
+    }
+    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame img,
+    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame :slotted(img) {
+      inline-size: 100%;
+    }
+    .frame {
+      position: relative;
+      flex: 0 1 auto;
+      inline-size: var(--_ui-image-width, fit-content);
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      align-self: flex-start;
+      border-radius: var(--ui-radius-md);
+    }
+    .frame img, .frame :slotted(img) {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+      margin: 0;
+      border-radius: inherit;
+    }
+    :host[data-resizing] .frame img, :host[data-resizing] .frame :slotted(img) {
+      inline-size: 100%;
+    }
+    :host-state([selected]) .frame {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-border-width);
+    }
+    .handle {
+      position: absolute;
+      z-index: 1;
+      inline-size: 24px;
+      block-size: 24px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      touch-action: none;
+    }
+    .handle::after {
+      content: "";
+      position: absolute;
+      inset: 8px;
+      background: var(--ui-surface);
+      border: var(--ui-border-width) solid var(--ui-focus-ring);
+      border-radius: var(--ui-radius-sm);
+    }
+    .handle:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      border-radius: var(--ui-radius-sm);
+    }
+    .handle[data-corner="top-left"] {
+      top: -12px;
+      left: -12px;
+      cursor: nwse-resize;
+    }
+    .handle[data-corner="top-right"] {
+      top: -12px;
+      right: -12px;
+      cursor: nesw-resize;
+    }
+    .handle[data-corner="bottom-left"] {
+      bottom: -12px;
+      left: -12px;
+      cursor: nesw-resize;
+    }
+    .handle[data-corner="bottom-right"] {
+      bottom: -12px;
+      right: -12px;
+      cursor: nwse-resize;
+    }
+    .handles[hidden], :host[hidden] {
+      display: none;
+    }
+    @media (max-width: 767px) {
+      :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) {
+        float: none;
+        inline-size: 100%;
+        padding-inline: 0;
+      }
+      :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .handles {
+        display: none;
+      }
+    }
+    @media (pointer: coarse) {
+      .handle {
+        inline-size: 44px;
+        block-size: 44px;
+      }
+      .handle::after {
+        inset: 18px;
+      }
+      .handle[data-corner="top-left"] {
+        top: -22px;
+        left: -22px;
+      }
+      .handle[data-corner="top-right"] {
+        top: -22px;
+        right: -22px;
+      }
+      .handle[data-corner="bottom-left"] {
+        bottom: -22px;
+        left: -22px;
+      }
+      .handle[data-corner="bottom-right"] {
+        bottom: -22px;
+        right: -22px;
+      }
+    }
+    @media (forced-colors: active) {
+      :host-state([selected]) .frame, .handle:focus-visible {
+        outline-color: Highlight;
+      }
+      .handle::after {
+        border-color: Highlight;
+        background: Canvas;
+      }
+    }
+  </style>
+</template>

package/components/ui-image/ui-image.js

@@ -0,0 +1,107 @@
+/** Owns transient resize geometry; consumers own persistence and selection.
+ * @lifecycle Pointer capture ends on release, Escape, cancellation, or teardown.
+ * Only release commits a drag, so consumers can make it one undo operation.
+ */
+export default function controller(host) {
+  const root = host.element;
+  const frame = host.refs.frame;
+  const document = root.ownerDocument;
+  let drag = null;
+  const image = () => frame.querySelector("img");
+  const enabled = () => host.props.selected.value && host.props.resizable.value;
+  const measure = () => {
+    const media = image();
+    const rect = media.getBoundingClientRect();
+    return { width: rect.width, height: rect.height, ratio: (media.naturalHeight || rect.height || 1) / (media.naturalWidth || rect.width || 1) };
+  };
+  const dimensions = (width, ratio) => {
+    // The containing document bounds the media even when this figure floats.
+    const container = root.parentElement;
+    const style = document.defaultView.getComputedStyle(container);
+    const available = container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    const gap = parseFloat(document.defaultView.getComputedStyle(root).paddingLeft) + parseFloat(document.defaultView.getComputedStyle(root).paddingRight);
+    const maximum = Math.max(1, available - gap);
+    const next = Math.round(Math.min(maximum, Math.max(Math.min(32, maximum), width)));
+    return { width: next, height: Math.max(1, Math.round(next * ratio)) };
+  };
+  const restore = () => {
+    root.removeAttribute("data-resizing");
+    const width = host.props.width.value;
+    if (width > 0) root.style.setProperty("--_ui-image-width", `${width}px`);
+    else root.style.removeProperty("--_ui-image-width");
+  };
+  const dispatch = (size, phase, trigger) => host.dispatch("resize", { ...size, phase, trigger });
+  const finish = (phase) => {
+    if (!drag) return;
+    const current = drag;
+    drag = null;
+    document.removeEventListener("keydown", onEscape, true);
+    if (current.handle.hasPointerCapture(current.pointer)) current.handle.releasePointerCapture(current.pointer);
+    if (phase === "commit" && !current.moved) phase = "cancel";
+    restore();
+    dispatch(phase === "commit" ? current.size : { width: Math.round(current.width), height: Math.round(current.height) }, phase, "pointer");
+  };
+  const onDown = (event) => {
+    const handle = event.target.closest("[data-corner]");
+    if (!enabled() || !handle || !root.contains(handle) || event.button !== 0 || drag) return;
+    event.preventDefault();
+    const measured = measure();
+    drag = { ...measured, x: event.clientX, y: event.clientY, handle, pointer: event.pointerId, size: dimensions(measured.width, measured.ratio) };
+    handle.setPointerCapture(event.pointerId);
+    document.addEventListener("keydown", onEscape, true);
+    root.setAttribute("data-resizing", "");
+  };
+  const onMove = (event) => {
+    if (!drag || drag.pointer !== event.pointerId) return;
+    const corner = drag.handle.dataset.corner;
+    const dx = (event.clientX - drag.x) * (corner.endsWith("left") ? -1 : 1);
+    const dy = (event.clientY - drag.y) * (corner.startsWith("top") ? -1 : 1);
+    // Project onto the aspect-ratio diagonal: either axis can drive a corner.
+    const delta = (dx + drag.ratio * dy) / (1 + drag.ratio * drag.ratio);
+    drag.size = dimensions(drag.width + delta, drag.ratio);
+    drag.moved = drag.size.width !== Math.round(drag.width);
+    root.style.setProperty("--_ui-image-width", `${drag.size.width}px`);
+    dispatch(drag.size, "preview", "pointer");
+  };
+  const onUp = event => { if (drag?.pointer === event.pointerId) finish("commit"); };
+  const onCancel = event => { if (drag?.pointer === event.pointerId) finish("cancel"); };
+  const onEscape = (event) => {
+    if (event.key !== "Escape" || !drag) return;
+    event.preventDefault(); event.stopPropagation(); finish("cancel");
+  };
+  const onKey = (event) => {
+    const handle = event.target.closest?.("[data-corner]");
+    if (!enabled() || !handle || !root.contains(handle) || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault(); event.stopPropagation();
+    const measured = measure();
+    const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+    const backwards = event.key === "ArrowLeft" || event.key === "ArrowUp";
+    const reverse = horizontal ? handle.dataset.corner.endsWith("left") : handle.dataset.corner.startsWith("top");
+    const amount = (backwards !== reverse ? -1 : 1) * (event.shiftKey ? 32 : 8);
+    dispatch(dimensions(measured.width + amount / (horizontal ? 1 : measured.ratio), measured.ratio), "commit", "keyboard");
+  };
+  const stop = host.effect(() => {
+    // Read all external geometry before deciding whether to abandon a preview.
+    host.props.width.value; host.props.height.value; host.props.placement.value;
+    if (drag) finish("cancel");
+    restore();
+    enabled();
+  });
+  root.addEventListener("pointerdown", onDown);
+  root.addEventListener("pointermove", onMove);
+  root.addEventListener("pointerup", onUp);
+  root.addEventListener("pointercancel", onCancel);
+  root.addEventListener("lostpointercapture", onCancel);
+  root.addEventListener("keydown", onKey);
+  return () => {
+    stop();
+    if (drag) { const active = drag; drag = null; if (active.handle.hasPointerCapture(active.pointer)) active.handle.releasePointerCapture(active.pointer); }
+    root.removeEventListener("pointerdown", onDown);
+    root.removeEventListener("pointermove", onMove);
+    root.removeEventListener("pointerup", onUp);
+    root.removeEventListener("pointercancel", onCancel);
+    root.removeEventListener("lostpointercapture", onCancel);
+    root.removeEventListener("keydown", onKey);
+    document.removeEventListener("keydown", onEscape, true);
+  };
+}

package/components/ui-menu/ui-menu.js

@@ -104,7 +104,7 @@ export default function controller(host) {
   const onClick = (event) => select(menuItemFrom(event.target), triggerFor(event));
   const onKeydown = (event) => {
     if (event.key === "Escape") {
-      if (host.props.inline.value) return;
+      if (host.props.inline.value || event.defaultPrevented) return;
       event.preventDefault();
       requestTopOverlayClose(document, "escape", "keyboard");
       return;

package/components/ui-popover/ui-popover.js

@@ -81,7 +81,10 @@ export default function controller(host) {
     lastOpen = open;
   };
   const onKeydown = (event) => {
-    if (event.key === "Escape") requestTopOverlayClose(document, "escape", "keyboard");
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      event.preventDefault();
+      requestTopOverlayClose(document, "escape", "keyboard");
+    }
   };
   element.addEventListener("keydown", onKeydown);
   const stop = host.effect(apply);

package/components/ui-separator/ui-separator.html

@@ -2,6 +2,8 @@
   <defs>
     <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >Whether the separator divides stacked content (horizontal) or inline content (vertical).</prop>
+    <prop name="selectable" type="boolean" default="false">Gives a document divider a pointer-sized hit area. The editor owns selection and deletion.</prop>
+    <prop name="selected" type="boolean" default="false">Shows the selected document divider. Selection does not change separator semantics.</prop>
   </defs>
   <hr from:aria-orientation="orientation">
   <style>
@@ -25,5 +27,21 @@
       border-block-start: 0;
       border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
     }
+
+    :host-state([selectable]) {
+      min-block-size: var(--ui-control-size-sm);
+      border: 0;
+      background: linear-gradient(var(--ui-separator-color, var(--ui-border-divider)), var(--ui-separator-color, var(--ui-border-divider))) center / 100%
+        var(--ui-border-width) no-repeat;
+      cursor: pointer;
+    }
+    :host-state([selectable]):hover {
+      background-color: var(--ui-surface-hover);
+    }
+    :host-state([selected]) {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
+      border-radius: var(--ui-radius-sm);
+    }
   </style>
 </template>