@threadlabs/looma 0.4.0 → 0.5.1

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -0,0 +1,422 @@
+<link rel="component" href="../ui-icon/ui-icon.html">
+<template component="ui-editor-table-overlay" controller="./ui-editor-table-overlay.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Shows the controls after the editor has supplied current geometry.</prop>
+    <prop
+      name="geometry"
+      type="object({ rowBoundaries: list(number), columnBoundaries: list(number), activeCell: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null, hoveredCell?: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null }) | null"
+    >The authoritative editor-measured table boundaries and active or hovered cell rectangles.</prop>
+    <state name="rows" :value="[]"></state>
+    <state name="cols" :value="[]"></state>
+    <state name="hovered" :value="null"></state>
+    <state name="active" :value="null"></state>
+    <state name="activeKey" :value="''"></state>
+    <event
+      name="action"
+      type="object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: open-cell-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+    ></event>
+  </defs>
+  <div aria-label="Table controls" :hidden="not open">
+    <div class="rows">
+      <div
+        $each="control of rows"
+        $key="control.key"
+        class="control row"
+        class:active="control.key = activeKey"
+        style:top="control.offset"
+        :data-control-key="control.key"
+      >
+        <span class="line" aria-hidden="true"></span>
+        <span class="guide" data-ui-guide aria-hidden="true"></span>
+        <button
+          type="button"
+          class="handle"
+          :data-ui-affordance="control.affordance"
+          :data-action="control.action"
+          :data-boundary-index="control.index"
+          :aria-label="control.label"
+        >
+          <ui-icon name="plus"></ui-icon>
+          <span class="tooltip" role="tooltip" $value="control.label"></span>
+        </button>
+      </div>
+    </div>
+    <div class="cols">
+      <div
+        $each="control of cols"
+        $key="control.key"
+        class="control col"
+        class:active="control.key = activeKey"
+        style:left="control.offset"
+        :data-control-key="control.key"
+      >
+        <span class="line" aria-hidden="true"></span>
+        <span class="guide" data-ui-guide aria-hidden="true"></span>
+        <button
+          type="button"
+          class="handle"
+          :data-ui-affordance="control.affordance"
+          :data-action="control.action"
+          :data-boundary-index="control.index"
+          :aria-label="control.label"
+        >
+          <ui-icon name="plus"></ui-icon>
+          <span class="tooltip" role="tooltip" $value="control.label"></span>
+        </button>
+      </div>
+    </div>
+    <template $if="hovered">
+      <button
+        type="button"
+        class="selector row"
+        style:top="hovered.rowOffset"
+        data-action="select-row"
+        :data-row-index="hovered.rowIndex"
+        :data-column-index="hovered.columnIndex"
+        title="Select row"
+        aria-label="Select row"
+      >
+        <span class="glyph"><ui-icon name="grip-vertical"></ui-icon></span>
+      </button>
+      <button
+        type="button"
+        class="selector column"
+        style:left="hovered.columnOffset"
+        data-action="select-column"
+        :data-row-index="hovered.rowIndex"
+        :data-column-index="hovered.columnIndex"
+        title="Select column"
+        aria-label="Select column"
+      >
+        <span class="glyph"><ui-icon name="grip-horizontal"></ui-icon></span>
+      </button>
+    </template>
+    <button
+      $if="active"
+      type="button"
+      class="cell-menu"
+      style:left="active.menuLeft"
+      style:top="active.menuTop"
+      data-action="open-cell-menu"
+      :data-row-index="active.rowIndex"
+      :data-column-index="active.columnIndex"
+      title="Cell actions"
+      aria-label="Cell actions"
+    >
+      <ui-icon name="chevron-down"></ui-icon>
+    </button>
+  </div>
+  <style>
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+      pointer-events: none;
+    }
+
+    :host {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+      pointer-events: none;
+    }
+
+    .rows,
+    .cols {
+      pointer-events: none;
+      position: absolute;
+    }
+
+    .rows {
+      inset: 0;
+      width: 100%;
+    }
+
+    .cols {
+      inset: 0;
+      height: 100%;
+    }
+
+    .control {
+      position: absolute;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    .handle {
+      position: absolute;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong, #c8c8c4));
+      border-radius: var(--ui-radius-round, 999px);
+      background: color-mix(in srgb, var(--ui-surface-elevated, #fff) 96%, transparent);
+      color: var(--ui-affordance-near-color, var(--ui-text-secondary, #5c5c5c));
+      font: inherit;
+      font-size: 16px;
+      line-height: 1;
+      box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+      opacity: 0;
+      scale: 0.72;
+      transition:
+        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        scale var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      pointer-events: auto;
+      cursor: pointer;
+    }
+
+    .handle {
+      --ui-icon-size: 14px;
+      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+    }
+
+    .handle[data-ui-proximity="near"],
+    .control.active .handle,
+    .handle:focus-visible {
+      opacity: 1;
+      scale: 1;
+    }
+
+    .control.active .handle,
+    .handle:focus-visible {
+      border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+      color: var(--ui-text-on-accent, #fff);
+      box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
+    }
+
+    .handle:focus-visible,
+    .selector:focus-visible,
+    .cell-menu:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, #5b55d6);
+      outline-offset: 2px;
+    }
+
+    .control.row {
+      left: 0;
+      width: 100%;
+      height: 0;
+    }
+
+    .control.row .handle {
+      top: -12px;
+      left: -30px;
+    }
+
+    .control.col {
+      top: 0;
+      width: 0;
+      height: 100%;
+    }
+
+    .control.col .handle {
+      top: -30px;
+      left: -12px;
+    }
+
+    .line {
+      position: absolute;
+      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+      opacity: 0;
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .control.row .line {
+      inset: -1px 0 auto;
+      height: 2px;
+    }
+
+    .control.col .line {
+      inset: 0 auto 0 -1px;
+      width: 2px;
+    }
+
+    .control.active .line {
+      opacity: 0.8;
+    }
+
+    .guide {
+      position: absolute;
+      width: var(--ui-affordance-guide-size, 4px);
+      height: var(--ui-affordance-guide-size, 4px);
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .control.row .guide {
+      left: -10px;
+      top: -2px;
+    }
+
+    .control.col .guide {
+      left: -2px;
+      top: -10px;
+    }
+
+    .control:has(.handle[data-ui-proximity="near"]) .guide,
+    .control.active .guide {
+      opacity: 0;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: 2;
+      top: calc(100% + 6px);
+      left: 50%;
+      width: max-content;
+      max-width: 14rem;
+      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+      border-radius: var(--ui-radius-1, 4px);
+      background: var(--ui-text-primary, #1a1a1a);
+      color: var(--ui-surface-elevated, #fff);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      font-weight: var(--ui-font-medium, 500);
+      line-height: var(--ui-line-height-md, 1.4);
+      opacity: 0;
+      transform: translateX(-50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      pointer-events: none;
+    }
+
+    .control.row .tooltip {
+      top: 50%;
+      left: auto;
+      right: calc(100% + 8px);
+      transform: translateY(-50%);
+    }
+
+    .control.active .tooltip,
+    .handle:focus-visible .tooltip {
+      opacity: 1;
+    }
+
+    .selector,
+    .cell-menu {
+      position: absolute;
+      z-index: 2;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--ui-text-secondary, #5c5c5c);
+      box-shadow: none;
+      pointer-events: auto;
+      cursor: pointer;
+      transition:
+        color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        box-shadow var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .selector:hover,
+    .cell-menu:hover {
+      background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted, #f3f4f6));
+      color: var(--ui-icon-button-hover-color, var(--ui-text-primary, #1a1a1a));
+      box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+    }
+
+    .selector {
+      border-radius: var(--ui-radius-round, 999px);
+    }
+
+    .selector::before {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      pointer-events: none;
+    }
+
+    .selector .glyph {
+      display: block;
+      width: 14px;
+      height: 14px;
+      --ui-icon-size: 14px;
+      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+      opacity: 0;
+      transform: scale(0.72);
+      transition:
+        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        transform var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .selector:hover::before,
+    .selector:focus-visible::before {
+      opacity: 0;
+    }
+
+    .selector:hover .glyph,
+    .selector:focus-visible .glyph {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .selector.row {
+      left: -9px;
+      width: 18px;
+      height: 32px;
+      transform: translateY(-50%);
+    }
+
+    .selector.row::before {
+      width: 2px;
+      height: 16px;
+    }
+
+    .selector.column {
+      top: -9px;
+      width: 32px;
+      height: 18px;
+      transform: translateX(-50%);
+    }
+
+    .selector.column::before {
+      width: 16px;
+      height: 2px;
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      .selector::before {
+        opacity: 0;
+      }
+
+      .selector .glyph {
+        opacity: 1;
+        transform: none;
+      }
+    }
+
+    .cell-menu {
+      width: 24px;
+      height: 24px;
+      border-radius: var(--ui-radius-1, 4px);
+      background: color-mix(in srgb, var(--ui-surface-muted, #f3f4f6) 78%, transparent);
+    }
+
+    .cell-menu {
+      --ui-icon-size: 15px;
+      --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-editor-table-overlay/ui-editor-table-overlay.js

@@ -0,0 +1,119 @@
+function fallbackBoundaries(segments, length) {
+  return Array.from({ length: segments + 1 }, (_, index) => (index * length) / segments);
+}
+function createProximity(scope, selector = ".handle[data-ui-affordance]", radius = 16) {
+  const owner = scope.ownerDocument.defaultView; const pointerTarget = scope.ownerDocument;
+  let anchors = []; let frame = null; let point = null; let dirty = false;
+  const distance = (position, rect) => Math.hypot(
+    Math.max(rect.left - position.x, 0, position.x - rect.right),
+    Math.max(rect.top - position.y, 0, position.y - rect.bottom),
+  );
+  const clear = () => {
+    for (const anchor of anchors) anchor.element.removeAttribute("data-ui-proximity");
+    scope.removeAttribute("data-ui-interaction");
+  };
+  const measure = () => {
+    anchors = Array.from(scope.querySelectorAll(selector))
+      .filter((element) => !element.disabled && element.getAttribute("aria-disabled") !== "true")
+      .map((element) => ({ element, rect: element.getBoundingClientRect() }));
+    dirty = false;
+  };
+  const update = () => {
+    frame = null; if (dirty) measure(); if (!point) { clear(); return; }
+    let engaged = false;
+    for (const anchor of anchors) {
+      const near = distance(point, anchor.rect) <= radius;
+      if (near) anchor.element.setAttribute("data-ui-proximity", "near");
+      else anchor.element.removeAttribute("data-ui-proximity");
+      engaged ||= near;
+    }
+    if (engaged) scope.setAttribute("data-ui-interaction", "engaged");
+    else scope.removeAttribute("data-ui-interaction");
+  };
+  const schedule = () => { if (frame === null) frame = owner.requestAnimationFrame(update); };
+  const refresh = () => { dirty = true; schedule(); };
+  const onPointermove = (event) => {
+    point = event.pointerType === "touch" ? null : { x: event.clientX, y: event.clientY }; schedule();
+  };
+  pointerTarget.addEventListener("pointermove", onPointermove, { passive: true });
+  owner.addEventListener("resize", refresh, { passive: true });
+  owner.addEventListener("scroll", refresh, { passive: true, capture: true });
+  owner.visualViewport?.addEventListener("resize", refresh, { passive: true });
+  owner.visualViewport?.addEventListener("scroll", refresh, { passive: true });
+  measure();
+  return { refresh, destroy() {
+    pointerTarget.removeEventListener("pointermove", onPointermove);
+    owner.removeEventListener("resize", refresh); owner.removeEventListener("scroll", refresh, true);
+    owner.visualViewport?.removeEventListener("resize", refresh); owner.visualViewport?.removeEventListener("scroll", refresh);
+    if (frame !== null) owner.cancelAnimationFrame(frame); clear();
+  } };
+}
+
+export default function controller(host) {
+  const element = host.element;
+  const proximity = createProximity(element);
+  const boundaries = (axis) => {
+    const values = host.state.geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
+    if (Array.isArray(values) && values.length >= 2 && values.every(Number.isFinite)) return values;
+    const rect = element.getBoundingClientRect();
+    return fallbackBoundaries(3, axis === "row" ? rect.height : rect.width);
+  };
+  const controls = (axis) => boundaries(axis).map((position, index) => {
+    const first = index === 0;
+    const noun = axis === "row" ? "row" : "column";
+    const relation = first ? (axis === "row" ? "above" : "left") : (axis === "row" ? "below" : "right");
+    return {
+      key: `${axis}:${index}`,
+      index,
+      offset: `${position}px`,
+      affordance: `insert-${noun}`,
+      action: `add-${noun}-${first ? "before" : "after"}`,
+      label: `Insert ${noun} ${relation}`,
+    };
+  });
+  const stop = host.effect(() => {
+    if (!host.state.open) {
+      host.state.activeKey = "";
+      return;
+    }
+    host.state.rows = controls("row");
+    host.state.cols = controls("col");
+    const hovered = host.state.geometry?.hoveredCell ?? null;
+    host.state.hovered = hovered && {
+      ...hovered,
+      rowOffset: `${hovered.top + hovered.height / 2}px`,
+      columnOffset: `${hovered.left + hovered.width / 2}px`,
+    };
+    const active = host.state.geometry?.activeCell ?? null;
+    host.state.active = active && { ...active, menuLeft: `${active.left + active.width - 30}px`, menuTop: `${active.top + 6}px` };
+    queueMicrotask(proximity.refresh);
+  });
+  const onClick = (event) => {
+    const button = event.target.closest?.("button[data-action]");
+    if (!button) return;
+    const action = button.dataset.action;
+    const cell = { rowIndex: Number(button.dataset.rowIndex), columnIndex: Number(button.dataset.columnIndex) };
+    if (action === "select-row" || action === "select-column") host.dispatch("action", { action, ...cell });
+    else if (action === "open-cell-menu") {
+      const rect = button.getBoundingClientRect();
+      host.dispatch("action", { action, ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
+    } else host.dispatch("action", { action, boundaryIndex: Number(button.dataset.boundaryIndex) });
+  };
+  const keyOf = (target) => target instanceof Element ? target.closest("[data-control-key]")?.dataset.controlKey ?? "" : "";
+  const enter = (event) => { host.state.activeKey = keyOf(event.target); };
+  const leave = (event) => { host.state.activeKey = keyOf(event.relatedTarget); };
+  element.addEventListener("click", onClick);
+  element.addEventListener("pointerover", enter);
+  element.addEventListener("pointerout", leave);
+  element.addEventListener("focusin", enter);
+  element.addEventListener("focusout", leave);
+  return () => {
+    stop();
+    proximity.destroy();
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("pointerover", enter);
+    element.removeEventListener("pointerout", leave);
+    element.removeEventListener("focusin", enter);
+    element.removeEventListener("focusout", leave);
+  };
+}