@threadlabs/looma 0.1.13 → 0.1.15

package/dist/ui-tree.entry-X4FU42A6.js

@@ -0,0 +1,244 @@
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-SVINNT3E.js";
+
+// dist/esm/ui-tree.entry.js
+function classifyDropPosition(rect, clientY, acceptsChildren) {
+  const progress = rect.height > 0 ? Math.min(1, Math.max(0, (clientY - rect.top) / rect.height)) : 0.5;
+  if (!acceptsChildren)
+    return progress < 0.5 ? "before" : "after";
+  if (progress < 0.25)
+    return "before";
+  if (progress > 0.75)
+    return "after";
+  return "inside";
+}
+function setElementDragImage(dataTransfer, element) {
+  if (!dataTransfer || typeof dataTransfer.setDragImage !== "function")
+    return;
+  const { height } = element.getBoundingClientRect();
+  dataTransfer.setDragImage(element, 16, Math.max(0, height / 2));
+}
+function createHoverIntent(delay, onIntent) {
+  let timer;
+  let pendingKey;
+  function cancel() {
+    if (timer)
+      clearTimeout(timer);
+    timer = void 0;
+    pendingKey = void 0;
+  }
+  return {
+    schedule(key) {
+      if (pendingKey === key && timer)
+        return;
+      cancel();
+      pendingKey = key;
+      timer = setTimeout(() => {
+        timer = void 0;
+        const resolvedKey = pendingKey;
+        pendingKey = void 0;
+        if (resolvedKey)
+          onIntent(resolvedKey);
+      }, Math.max(0, delay));
+    },
+    cancel,
+    destroy: cancel
+  };
+}
+var uiTreeCss = () => `:host{--ui-tree-indent:16px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter, 22px)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
+var UITree = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  label = "Tree";
+  hoverExpandDelay = 700;
+  source = null;
+  target = null;
+  position = null;
+  hoverIntent = null;
+  componentDidLoad() {
+    this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
+    this.host.addEventListener("dragstart", this.onDragStart);
+    this.host.addEventListener("dragover", this.onDragOver);
+    this.host.addEventListener("dragleave", this.onDragLeave);
+    this.host.addEventListener("drop", this.onDrop);
+    this.host.addEventListener("dragend", this.onDragEnd);
+    this.host.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    this.hoverIntent?.destroy();
+    this.host.removeEventListener("dragstart", this.onDragStart);
+    this.host.removeEventListener("dragover", this.onDragOver);
+    this.host.removeEventListener("dragleave", this.onDragLeave);
+    this.host.removeEventListener("drop", this.onDrop);
+    this.host.removeEventListener("dragend", this.onDragEnd);
+    this.host.removeEventListener("keydown", this.onKeyDown);
+  }
+  itemFromEvent(event) {
+    return event.composedPath().find((node) => node instanceof HTMLElement && node.localName === "ui-tree-item") ?? null;
+  }
+  itemId(item) {
+    return item.itemId || item.getAttribute("item-id") || "";
+  }
+  rowFor(item) {
+    return item.shadowRoot?.querySelector('[part="row"]') ?? null;
+  }
+  acceptsChildren(item) {
+    return Boolean(item.container ?? item.hasAttribute("container")) && !Boolean(item.disabled ?? item.hasAttribute("disabled"));
+  }
+  itemMetadata(item) {
+    return {
+      type: item.getAttribute("data-drag-type") || item.getAttribute("drag-type") || "item",
+      scope: item.getAttribute("data-drop-scope") || item.getAttribute("drop-scope") || "",
+      accepts: (item.getAttribute("data-accepts") || item.getAttribute("accepts") || "").split(",").map((value) => value.trim()).filter(Boolean)
+    };
+  }
+  permitsDrop(source, target, position) {
+    if (source.contains(target))
+      return false;
+    const sourceMeta = this.itemMetadata(source);
+    const targetMeta = this.itemMetadata(target);
+    if (position === "inside") {
+      return this.acceptsChildren(target) && (targetMeta.accepts.length === 0 || targetMeta.accepts.includes(sourceMeta.type));
+    }
+    return sourceMeta.type === targetMeta.type;
+  }
+  clearTarget() {
+    this.target?.removeAttribute("data-drop-position");
+    this.target = null;
+    this.position = null;
+    this.hoverIntent?.cancel();
+  }
+  finishDrag() {
+    this.source?.removeAttribute("data-dragging");
+    this.source = null;
+    this.clearTarget();
+  }
+  expandTarget = (itemId) => {
+    const item = Array.from(this.host.querySelectorAll("ui-tree-item")).find((candidate) => this.itemId(candidate) === itemId);
+    if (!item || item.getAttribute("aria-expanded") !== "false")
+      return;
+    item.dispatchEvent(new CustomEvent("ui-tree-auto-expand"));
+  };
+  onDragStart = (event) => {
+    const item = this.itemFromEvent(event);
+    if (!item || !Boolean(item.sortable ?? item.hasAttribute("sortable")) || Boolean(item.disabled ?? item.hasAttribute("disabled")))
+      return;
+    const fromHandle = event.composedPath().some((node) => node instanceof HTMLElement && node.getAttribute("part") === "drag-handle");
+    if (!fromHandle) {
+      event.preventDefault();
+      return;
+    }
+    const sourceId = this.itemId(item);
+    const row = this.rowFor(item);
+    if (!sourceId || !row) {
+      event.preventDefault();
+      return;
+    }
+    this.source = item;
+    item.setAttribute("data-dragging", "true");
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", sourceId);
+    }
+    setElementDragImage(event.dataTransfer, row);
+  };
+  onDragOver = (event) => {
+    if (!this.source)
+      return;
+    const target = this.itemFromEvent(event);
+    if (!target || target === this.source) {
+      this.clearTarget();
+      return;
+    }
+    const row = this.rowFor(target);
+    if (!row)
+      return;
+    const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
+    if (!this.permitsDrop(this.source, target, position)) {
+      if (event.dataTransfer)
+        event.dataTransfer.dropEffect = "none";
+      this.clearTarget();
+      return;
+    }
+    event.preventDefault();
+    if (event.dataTransfer)
+      event.dataTransfer.dropEffect = "move";
+    if (this.target !== target || this.position !== position) {
+      this.clearTarget();
+      this.target = target;
+      this.position = position;
+      target.setAttribute("data-drop-position", position);
+    }
+    if (position === "inside" && target.getAttribute("aria-expanded") === "false") {
+      this.hoverIntent?.schedule(this.itemId(target));
+    } else {
+      this.hoverIntent?.cancel();
+    }
+  };
+  onDragLeave = (event) => {
+    const related = event.relatedTarget;
+    if (related instanceof Node && this.host.contains(related))
+      return;
+    this.clearTarget();
+  };
+  onDrop = (event) => {
+    if (!this.source || !this.target || !this.position)
+      return;
+    event.preventDefault();
+    const sourceId = this.itemId(this.source);
+    const targetId = this.itemId(this.target);
+    if (sourceId && targetId) {
+      const sourceMeta = this.itemMetadata(this.source);
+      const targetMeta = this.itemMetadata(this.target);
+      dispatchDetail(this.host, "reorder", {
+        sourceId,
+        targetId,
+        position: this.position,
+        sourceType: sourceMeta.type,
+        targetType: targetMeta.type,
+        sourceScope: sourceMeta.scope,
+        targetScope: targetMeta.scope,
+        trigger: "pointer"
+      });
+    }
+    this.finishDrag();
+  };
+  onDragEnd = () => {
+    this.finishDrag();
+  };
+  visibleItems() {
+    return Array.from(this.host.querySelectorAll("ui-tree-item")).filter((item) => item.getClientRects().length > 0 && !item.hasAttribute("disabled"));
+  }
+  onKeyDown = (event) => {
+    const current = this.itemFromEvent(event);
+    if (!current)
+      return;
+    const items = this.visibleItems();
+    const index = items.indexOf(current);
+    if (index < 0)
+      return;
+    const next = event.key === "ArrowDown" ? items[index + 1] : event.key === "ArrowUp" ? items[index - 1] : null;
+    if (!next)
+      return;
+    event.preventDefault();
+    next.focus();
+  };
+  render() {
+    return h(Host, { key: "5761d2840d2694340a4b937d46522f15f81973ac", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "08e5a7b489eed4f4eae9de6462104fd12defd336" }));
+  }
+};
+UITree.style = uiTreeCss();
+export {
+  UITree as ui_tree
+};

package/editor.css

@@ -149,10 +149,16 @@
 
 .looma-editor .ProseMirror img {
   max-width: 100%;
+  height: auto;
   margin: var(--ui-space-3) 0;
   border-radius: var(--ui-radius-2);
 }
 
+.looma-editor .ProseMirror img[data-looma-image]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 3px;
+}
+
 .looma-editor__file-input {
   position: absolute;
   width: 0;
@@ -161,6 +167,42 @@
   pointer-events: none;
 }
 
+.looma-editor__upload-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-3);
+  margin-top: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border: 1px solid var(--ui-danger-solid);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-danger-soft);
+  color: var(--ui-text);
+  font-size: var(--ui-font-size-sm);
+}
+
+.looma-editor__upload-error button {
+  min-height: 2rem;
+  padding: 0 var(--ui-space-3);
+  border: 0;
+  border-radius: var(--ui-radius-1);
+  background: var(--ui-danger-solid);
+  color: var(--ui-text-on-accent);
+  cursor: pointer;
+  font: inherit;
+  font-weight: var(--ui-font-semibold);
+}
+
+.looma-editor__upload-error button:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
+.looma-editor__upload-error button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
 .looma-editor__drop-overlay {
   position: absolute;
   z-index: var(--ui-editor-drop-overlay-z-index, 10);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

package/styles.css

@@ -18,7 +18,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ),
 :where(
   ui-button,
@@ -39,7 +41,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ) *,
 :where(
   ui-button,
@@ -60,7 +64,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ) *::before,
 :where(
   ui-button,
@@ -81,7 +87,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ) *::after {
   box-sizing: border-box;
 }
@@ -105,7 +113,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ) {
   /* Reveal Looma's component layer instead of reverting past it. */
   all: revert-layer;
@@ -136,7 +146,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 )[data-ui-inherit-typography] {
   font-family: inherit;
   font-size: inherit;

package/vue/{chunk-YN4IUYVY.js → chunk-IITL6UBR.js}

@@ -131,6 +131,8 @@ var FloatingActionButton = createAdapterComponent(
 var SearchShell = createAdapterComponent("ui-search-shell", "SearchShell");
 var SearchResultRow = createAdapterComponent("ui-search-result-row", "SearchResultRow");
 var TopBar = createAdapterComponent("ui-top-bar", "TopBar");
+var Tree = createAdapterComponent("ui-tree", "Tree", [["reorder", "onReorder"]]);
+var TreeItem = createAdapterComponent("ui-tree-item", "TreeItem", [["expand", "onExpand"]]);
 var ADAPTER_COMPONENT_TAG_MAP = {
   Stack: "ui-stack",
   Inline: "ui-inline",
@@ -167,7 +169,9 @@ var ADAPTER_COMPONENT_TAG_MAP = {
   FloatingActionButton: "ui-floating-action-button",
   SearchShell: "ui-search-shell",
   SearchResultRow: "ui-search-result-row",
-  TopBar: "ui-top-bar"
+  TopBar: "ui-top-bar",
+  Tree: "ui-tree",
+  TreeItem: "ui-tree-item"
 };
 var VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
 
@@ -210,6 +214,8 @@ export {
   SearchShell,
   SearchResultRow,
   TopBar,
+  Tree,
+  TreeItem,
   ADAPTER_COMPONENT_TAG_MAP,
   VUE_ADAPTER_NOTE
 };

package/vue/editor/index.d.ts

@@ -4,6 +4,7 @@ import * as vue from 'vue';
 import { PropType } from 'vue';
 import { TableContextMenuActionEventDetail, InsertTableEventDetail, TableOverlayActionEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail } from '@threadlabs/looma/editor/ui';
 import { JSONContent, AnyExtension, Editor } from '@tiptap/core';
+import { OverlayTrigger } from '@threadlabs/looma/core';
 
 interface VueEditorAdapterEventMap {
     tableAction: TableContextMenuActionEventDetail;
@@ -87,9 +88,33 @@ declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorTableOverlay: "ui-editor-table-overlay";
 };
 
-interface LoomaImageUploadResult {
-    url: string;
+interface LoomaImageDescriptor {
+    src: string;
     alt?: string;
+    width?: number;
+    height?: number;
+    responsive?: boolean;
+}
+/** Browser-only attributes resolved by a host image-delivery provider. */
+interface LoomaImageRenditionAttributes {
+    src?: string;
+    srcset?: string;
+    sizes?: string;
+    loading?: "eager" | "lazy";
+    decoding?: "async" | "auto" | "sync";
+    fetchPriority?: "auto" | "high" | "low";
+}
+type LoomaImageAttributeResolver = (image: LoomaImageDescriptor) => LoomaImageRenditionAttributes | undefined;
+type LoomaImageActivationTrigger = Exclude<OverlayTrigger, "programmatic">;
+interface LoomaImageActivationDetail extends LoomaImageDescriptor {
+    trigger: LoomaImageActivationTrigger;
+}
+interface LoomaImageRenditionErrorDetail extends LoomaImageDescriptor {
+    trigger: "programmatic";
+}
+
+interface LoomaImageUploadResult extends Omit<LoomaImageDescriptor, "src"> {
+    url: string;
 }
 type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUploadResult>;
 declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -124,6 +149,10 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
     };
+    resolveImageAttributes: {
+        type: PropType<LoomaImageAttributeResolver | undefined>;
+        default: undefined;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -131,6 +160,8 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     update: (_value: JSONContent) => true;
     ready: (_editor: Editor) => true;
     uploadError: (_error: unknown, _file: File) => true;
+    imageActivate: (_detail: LoomaImageActivationDetail) => true;
+    imageRenditionError: (_detail: LoomaImageRenditionErrorDetail) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     modelValue: {
         type: PropType<JSONContent>;
@@ -163,17 +194,24 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
     };
+    resolveImageAttributes: {
+        type: PropType<LoomaImageAttributeResolver | undefined>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: (_value: JSONContent) => any;
     onUpdate?: (_value: JSONContent) => any;
     onReady?: (_editor: Editor) => any;
     onUploadError?: (_error: unknown, _file: File) => any;
+    onImageActivate?: (_detail: LoomaImageActivationDetail) => any;
+    onImageRenditionError?: (_detail: LoomaImageRenditionErrorDetail) => any;
 }>, {
     placeholder: string;
     modelValue: JSONContent;
     editable: boolean;
     extensions: AnyExtension[];
     uploadImage: LoomaImageUploader | undefined;
+    resolveImageAttributes: LoomaImageAttributeResolver | undefined;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor, type LoomaImageUploadResult, type LoomaImageUploader, type VueEditorAdapterEventMap };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor, type LoomaImageActivationDetail, type LoomaImageActivationTrigger, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageRenditionAttributes, type LoomaImageRenditionErrorDetail, type LoomaImageUploadResult, type LoomaImageUploader, type VueEditorAdapterEventMap };