@threadlabs/looma 0.4.0 → 0.5.0

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -0,0 +1,197 @@
+<link rel="component" href="../ui-icon/ui-icon.html">
+<template component="ui-editor-slash-menu" controller="./ui-editor-slash-menu.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Whether the menu is open.</prop>
+    <prop name="query" type="string" default="">The text typed after the slash.</prop>
+    <prop name="items" type="list(object({ title: string, description: string, icon: string }))">The blocks the menu offers.</prop>
+    <prop name="selectedIndex" type="integer" default="0">The highlighted item.</prop>
+    <prop
+      name="anchorRect"
+      type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null"
+    >Where the slash was typed, in viewport coordinates.</prop>
+    <state name="visible" :value="false"></state>
+    <state name="active" :value="0"></state>
+    <event name="highlight" type="object({ index: integer })"></event>
+    <event name="select" type="object({ index: integer })"></event>
+  </defs>
+  <div role="listbox" aria-label="Insert block" :hidden="not visible">
+    <div class="header" aria-hidden="true">
+      <span class="header-label">Insert</span>
+      <span $if="query" class="header-query" $value="query"></span>
+    </div>
+    <ul class="list" role="presentation">
+      <li $each="item, index of items" class="item" class:active="index = active" role="option" :aria-selected="index = active" :data-index="index">
+        <span class="icon" aria-hidden="true"><ui-icon :name="item.icon"></ui-icon></span>
+        <span class="body"><span class="title" $value="item.title"></span><span class="description" $value="item.description"></span></span>
+      </li>
+    </ul>
+    <div class="footer" aria-hidden="true">
+      <kbd>↑↓</kbd> navigate · <kbd>↵</kbd> insert · <kbd>Esc</kbd> close
+    </div>
+  </div>
+  <style>
+    :host {
+      user-select: none;
+    }
+
+    :host {
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-xl, 1rem);
+      box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    @media (max-width: 767px) {
+      :host {
+        border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+        border-bottom: none;
+      }
+    }
+
+    .header {
+      display: none;
+      align-items: center;
+      gap: var(--ui-space-2, 8px);
+      padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
+      border-bottom: 1px solid var(--ui-border, #e5e7eb);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      color: var(--ui-text-muted, #6b7280);
+      font-weight: var(--ui-font-semibold, 600);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    @media (max-width: 767px) {
+      .header {
+        display: flex;
+      }
+    }
+
+    .header-query {
+      background: var(--ui-surface-hover, #f3f4f6);
+      border-radius: var(--ui-radius-sm, 4px);
+      padding: 0.1em 0.4em;
+      font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      color: var(--ui-accent, #3b82f6);
+      text-transform: none;
+      letter-spacing: 0;
+    }
+
+    .list {
+      list-style: none;
+      margin: 0;
+      padding: var(--ui-space-1, 4px) 0;
+      overflow-y: auto;
+      max-height: 280px;
+      overscroll-behavior: contain;
+    }
+
+    @media (max-width: 767px) {
+      .list {
+        max-height: calc(60dvh - 80px);
+        padding: var(--ui-space-1, 4px) 0 var(--ui-space-2, 8px);
+      }
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-3, 12px);
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      min-height: 44px;
+      cursor: pointer;
+      transition: background-color 120ms ease;
+    }
+
+    .item.active {
+      background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      background: var(--ui-surface-hover, #f3f4f6);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-md, 6px);
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      font-weight: var(--ui-font-bold, 700);
+      color: var(--ui-text-secondary, #4b5563);
+      font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .item.active .icon {
+      background: var(--ui-accent, #3b82f6);
+      border-color: var(--ui-accent, #3b82f6);
+      color: var(--ui-accent-contrast, #fff);
+    }
+
+    .icon {
+      --ui-icon-size: 1rem;
+      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+    }
+
+    .body {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      gap: 1px;
+    }
+
+    .title {
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      font-weight: var(--ui-font-medium, 500);
+      color: var(--ui-text, #111827);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .description {
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      color: var(--ui-text-muted, #6b7280);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .footer {
+      display: none;
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      border-top: 1px solid var(--ui-border, #e5e7eb);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    @media (min-width: 768px) {
+      .footer {
+        display: block;
+      }
+    }
+
+    :host kbd {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+      font-size: 10px;
+      background: var(--ui-surface-hover, #f3f4f6);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: 3px;
+      padding: 0 3px;
+      color: var(--ui-text-secondary, #4b5563);
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,44 @@
+import { normalizeAnchor, positionMenu } from "../shared/editor.js";
+
+// Places the menu at the slash and tracks the highlighted item; the template renders the items.
+export default function controller(host) {
+  const element = host.element;
+  const place = () => {
+    if (host.state.visible) positionMenu(element, normalizeAnchor(host.state.anchorRect), 280);
+  };
+  const stop = host.effect(() => {
+    const items = Array.isArray(host.state.items) ? host.state.items : [];
+    host.state.active = Number(host.state.selectedIndex ?? 0);
+    host.state.visible = Boolean(host.state.open && items.length > 0 && normalizeAnchor(host.state.anchorRect));
+    place();
+  });
+  const indexOf = (event) => Number(event.target.closest?.("[data-index]")?.dataset.index);
+  const onMousedown = (event) => event.preventDefault();
+  const onClick = (event) => {
+    const index = indexOf(event);
+    if (Number.isFinite(index)) host.dispatch("select", { index });
+  };
+  const onMouseover = (event) => {
+    const index = indexOf(event);
+    if (!Number.isFinite(index) || index === host.state.active) return;
+    host.state.active = index;
+    host.dispatch("highlight", { index });
+  };
+  element.addEventListener("mousedown", onMousedown);
+  element.addEventListener("click", onClick);
+  element.addEventListener("mouseover", onMouseover);
+  window.addEventListener("resize", place);
+  window.addEventListener("scroll", place, true);
+  window.visualViewport?.addEventListener("resize", place);
+  window.visualViewport?.addEventListener("scroll", place);
+  return () => {
+    stop();
+    element.removeEventListener("mousedown", onMousedown);
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("mouseover", onMouseover);
+    window.removeEventListener("resize", place);
+    window.removeEventListener("scroll", place, true);
+    window.visualViewport?.removeEventListener("resize", place);
+    window.visualViewport?.removeEventListener("scroll", place);
+  };
+}

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -0,0 +1,164 @@
+<link rel="component" href="../ui-icon/ui-icon.html">
+<template component="ui-editor-table-context-menu" controller="./ui-editor-table-context-menu.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Shows the menu at the position owned by the editor integration.</prop>
+    <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>
+    <prop
+      name="actions"
+      type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
+    >The complete set of commands the current selection permits.</prop>
+    <state name="swatches" :value="[]"></state>
+    <state name="sections" :value="[]"></state>
+    <event
+      name="action"
+      type="object({ action: align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"
+    ></event>
+  </defs>
+  <div role="menu" :hidden="not open">
+    <div $if="swatches" class="section" role="none">
+      <div class="heading" role="presentation">Cell background</div>
+      <div class="swatches" role="group" aria-label="Cell background">
+        <button
+          $each="swatch of swatches"
+          $key="swatch.action"
+          type="button"
+          class="swatch-button"
+          class:selected="swatch.selected"
+          role="menuitemradio"
+          :aria-checked="swatch.selected"
+          :data-action="swatch.action"
+        >
+          <span class="swatch" class:default="not swatch.color" style:--ui-editor-table-context-swatch="swatch.color"></span>
+          <span class="swatch-label" $value="swatch.label"></span>
+        </button>
+      </div>
+    </div>
+    <template $each="section of sections" $key="section.heading">
+      <div class="sep"></div>
+      <div class="section" role="none">
+        <div class="heading" role="presentation" $value="section.heading"></div>
+        <button $each="item of section.items" $key="item.action" type="button" role="menuitem" class:danger="item.danger" :data-action="item.action">
+          <ui-icon :name="item.icon"></ui-icon>
+          <span $value="item.label"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+  <style>
+    :host {
+      min-width: 14rem;
+      max-width: min(17rem, calc(100vw - 24px));
+      max-height: min(28rem, calc(100vh - 24px));
+      padding: var(--ui-space-1-5, 6px);
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-lg, 10px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+    }
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    :host button {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2, 8px);
+      width: 100%;
+      text-align: left;
+      min-height: 32px;
+      padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+      border: none;
+      border-radius: var(--ui-radius-sm, 4px);
+      background: none;
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      cursor: pointer;
+      color: var(--ui-text, #111);
+    }
+
+    :host button {
+      --ui-icon-size: 1rem;
+      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+    }
+
+    :host button:hover:not(:disabled) {
+      background: var(--ui-surface-hover, #f3f4f6);
+    }
+
+    :host button.selected {
+      background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+    }
+
+    :host button.danger {
+      color: var(--ui-danger, #dc2626);
+    }
+
+    .swatches {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 3px;
+    }
+
+    .swatch-button {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-2, 8px);
+    }
+
+    .swatch {
+      display: inline-flex;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 999px;
+      border: 1px solid var(--ui-border, #d1d5db);
+      background: var(--ui-editor-table-context-swatch, #fff);
+      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
+      flex-shrink: 0;
+    }
+
+    .swatch.default {
+      position: relative;
+      background:
+        linear-gradient(
+          135deg,
+          transparent calc(50% - 1px),
+          var(--ui-text-muted, #6b7280) calc(50% - 1px),
+          var(--ui-text-muted, #6b7280) calc(50% + 1px),
+          transparent calc(50% + 1px)
+        ),
+        var(--ui-surface, #fff);
+    }
+
+    .swatch-label {
+      min-width: 0;
+      white-space: nowrap;
+    }
+
+    .heading {
+      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+      font-size: 0.6875rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    .sep {
+      height: 1px;
+      background: var(--ui-border, #e5e7eb);
+      margin: var(--ui-space-1, 4px) 0;
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.js

@@ -0,0 +1,75 @@
+import { backgrounds, viewport } from "../shared/editor.js";
+
+const sections = [
+  ["Structure", [
+    ["add-row-before", "Add row above", "panel-top"],
+    ["add-row-after", "Add row below", "panel-bottom"],
+    ["add-column-before", "Add column left", "panel-left"],
+    ["add-column-after", "Add column right", "panel-right"],
+  ]],
+  ["Cells", [
+    ["clear-cells", "Clear selected cells", "eraser"],
+    ["merge-cells", "Merge cells", "merge"],
+    ["split-cell", "Split cell", "split"],
+  ]],
+  ["Table", [
+    ["delete-row", "Delete row", "trash", "danger"],
+    ["delete-column", "Delete column", "trash", "danger"],
+    ["delete-table", "Delete table", "trash", "danger"],
+  ]],
+];
+
+// Lists the actions the selection permits, and nudges the open menu back inside the viewport.
+export default function controller(host) {
+  const element = host.element;
+  let frame;
+  const nudge = () => {
+    frame = undefined;
+    element.style.translate = "";
+    const rect = element.getBoundingClientRect();
+    const view = viewport();
+    const inset = 12;
+    let x = 0;
+    let y = 0;
+    if (rect.left < view.left + inset) x = view.left + inset - rect.left;
+    else if (rect.right > view.right - inset) x = view.right - inset - rect.right;
+    if (rect.top < view.top + inset) y = view.top + inset - rect.top;
+    else if (rect.bottom > view.bottom - inset) y = view.bottom - inset - rect.bottom;
+    if (x || y) element.style.translate = `${x}px ${y}px`;
+  };
+  const schedule = () => {
+    if (frame) cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(nudge);
+  };
+  const stop = host.effect(() => {
+    const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
+    const background = String(host.state.cellBackground ?? "");
+    const swatches = backgrounds.filter(([action]) => enabled.has(action))
+      .map(([action, label, color]) => ({ action, label, color, selected: color === background }));
+    host.state.swatches = swatches.length ? swatches : null;
+    host.state.sections = sections
+      .map(([heading, items]) => ({
+        heading,
+        items: items.filter(([action]) => enabled.has(action))
+          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger" })),
+      }))
+      .filter((section) => section.items.length);
+    if (host.state.open) schedule();
+  });
+  const onClick = (event) => {
+    const action = event.target.closest?.("[data-action]")?.dataset.action;
+    if (action) host.dispatch("action", { action });
+  };
+  element.addEventListener("click", onClick);
+  window.addEventListener("resize", schedule);
+  window.visualViewport?.addEventListener("resize", schedule);
+  window.visualViewport?.addEventListener("scroll", schedule);
+  return () => {
+    stop();
+    element.removeEventListener("click", onClick);
+    window.removeEventListener("resize", schedule);
+    window.visualViewport?.removeEventListener("resize", schedule);
+    window.visualViewport?.removeEventListener("scroll", schedule);
+    if (frame) cancelAnimationFrame(frame);
+  };
+}