@threadlabs/looma 0.1.20 → 0.1.22

package/editor/{chunk-OXFYYLUC.js → chunk-QCOYOVQL.js}

@@ -4859,6 +4859,42 @@ var TableRow = Node15.create({
   }
 });
 
+// src/extensions/callout.ts
+import { mergeAttributes as mergeAttributes21, Node as Node16 } from "@tiptap/core";
+var LOOMA_CALLOUT_TONES = ["info", "note", "warning"];
+function normalizeCalloutTone(value) {
+  return typeof value === "string" && LOOMA_CALLOUT_TONES.includes(value) ? value : "note";
+}
+var LoomaCallout = Node16.create({
+  name: "loomaCallout",
+  group: "block",
+  content: "block+",
+  defining: true,
+  addAttributes() {
+    return {
+      tone: {
+        default: "note",
+        parseHTML: (element) => normalizeCalloutTone(element.getAttribute("data-tone")),
+        renderHTML: (attributes) => ({
+          "data-tone": normalizeCalloutTone(attributes.tone)
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "aside[data-looma-callout]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "aside",
+      mergeAttributes21(HTMLAttributes, {
+        "data-looma-callout": ""
+      }),
+      0
+    ];
+  }
+});
+
 // src/extensions/list-behavior.ts
 import { Extension as Extension6 } from "@tiptap/core";
 function isEmptyParagraphAtStart(editor) {
@@ -4895,7 +4931,7 @@ var LoomaListBehavior = Extension6.create({
 });
 
 // ../../node_modules/.pnpm/@tiptap+extension-mention@2.27.3_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27_e4d93fc6b40c97d74d1cbe40f638e38f/node_modules/@tiptap/extension-mention/dist/index.js
-import { Node as Node16, mergeAttributes as mergeAttributes21 } from "@tiptap/core";
+import { Node as Node17, mergeAttributes as mergeAttributes22 } from "@tiptap/core";
 import { Node as Node$1 } from "@tiptap/pm/model";
 
 // ../../node_modules/.pnpm/@tiptap+suggestion@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27.2/node_modules/@tiptap/suggestion/dist/index.js
@@ -5174,7 +5210,7 @@ function getSuggestionFromChar(options, char) {
   }
   return null;
 }
-var Mention = Node16.create({
+var Mention = Node17.create({
   name: "mention",
   priority: 101,
   addOptions() {
@@ -5189,7 +5225,7 @@ var Mention = Node16.create({
         var _a, _b;
         return [
           "span",
-          mergeAttributes21(this.HTMLAttributes, options.HTMLAttributes),
+          mergeAttributes22(this.HTMLAttributes, options.HTMLAttributes),
           `${(_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.char) !== null && _a !== void 0 ? _a : "@"}${(_b = node.attrs.label) !== null && _b !== void 0 ? _b : node.attrs.id}`
         ];
       },
@@ -5252,7 +5288,7 @@ var Mention = Node16.create({
       console.warn("renderLabel is deprecated use renderText and renderHTML instead");
       return [
         "span",
-        mergeAttributes21({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+        mergeAttributes22({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
         this.options.renderLabel({
           options: this.options,
           node,
@@ -5261,7 +5297,7 @@ var Mention = Node16.create({
       ];
     }
     const mergedOptions = { ...this.options };
-    mergedOptions.HTMLAttributes = mergeAttributes21({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes);
+    mergedOptions.HTMLAttributes = mergeAttributes22({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes);
     const html = this.options.renderHTML({
       options: mergedOptions,
       node,
@@ -5270,7 +5306,7 @@ var Mention = Node16.create({
     if (typeof html === "string") {
       return [
         "span",
-        mergeAttributes21({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+        mergeAttributes22({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
         html
       ];
     }
@@ -5507,7 +5543,7 @@ function createLoomaMentionExtension(options = {}) {
 }
 
 // ../../node_modules/.pnpm/@tiptap+extension-table@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27.2/node_modules/@tiptap/extension-table/dist/index.js
-import { findParentNodeClosestToPos, Node as Node17, mergeAttributes as mergeAttributes22, callOrReturn as callOrReturn2, getExtensionField as getExtensionField2 } from "@tiptap/core";
+import { findParentNodeClosestToPos, Node as Node18, mergeAttributes as mergeAttributes23, callOrReturn as callOrReturn2, getExtensionField as getExtensionField2 } from "@tiptap/core";
 import { TextSelection as TextSelection3 } from "@tiptap/pm/state";
 import { CellSelection, addColumnBefore, addColumnAfter, deleteColumn, addRowBefore, addRowAfter, deleteRow, deleteTable, mergeCells, splitCell, toggleHeader, toggleHeaderCell, setCellAttr, goToNextCell, fixTables, columnResizing, tableEditing } from "@tiptap/pm/tables";
 function getColStyleDeclaration(minWidth, width) {
@@ -5680,7 +5716,7 @@ var deleteTableWhenAllCellsSelected = ({ editor }) => {
   editor.commands.deleteTable();
   return true;
 };
-var Table = Node17.create({
+var Table = Node18.create({
   name: "table",
   // @ts-ignore
   addOptions() {
@@ -5707,7 +5743,7 @@ var Table = Node17.create({
     const { colgroup, tableWidth, tableMinWidth } = createColGroup(node, this.options.cellMinWidth);
     const table = [
       "table",
-      mergeAttributes22(this.options.HTMLAttributes, HTMLAttributes, {
+      mergeAttributes23(this.options.HTMLAttributes, HTMLAttributes, {
         style: tableWidth ? `width: ${tableWidth}` : `min-width: ${tableMinWidth}`
       }),
       colgroup,
@@ -5839,8 +5875,8 @@ var Table = Node17.create({
 });
 
 // ../../node_modules/.pnpm/@tiptap+extension-table-cell@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-table-cell/dist/index.js
-import { Node as Node18, mergeAttributes as mergeAttributes23 } from "@tiptap/core";
-var TableCell = Node18.create({
+import { Node as Node19, mergeAttributes as mergeAttributes24 } from "@tiptap/core";
+var TableCell = Node19.create({
   name: "tableCell",
   addOptions() {
     return {
@@ -5874,13 +5910,13 @@ var TableCell = Node18.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["td", mergeAttributes23(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["td", mergeAttributes24(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
 });
 
 // ../../node_modules/.pnpm/@tiptap+extension-table-header@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-table-header/dist/index.js
-import { Node as Node19, mergeAttributes as mergeAttributes24 } from "@tiptap/core";
-var TableHeader = Node19.create({
+import { Node as Node20, mergeAttributes as mergeAttributes25 } from "@tiptap/core";
+var TableHeader = Node20.create({
   name: "tableHeader",
   addOptions() {
     return {
@@ -5914,7 +5950,7 @@ var TableHeader = Node19.create({
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["th", mergeAttributes24(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ["th", mergeAttributes25(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
 });
 
@@ -6064,6 +6100,7 @@ function getDefaultEditorExtensions(options = {}) {
     TaskList,
     TaskItem.configure({ nested: false }),
     Blockquote,
+    LoomaCallout,
     HorizontalRule,
     HardBreak,
     History,
@@ -6399,6 +6436,26 @@ function handleTableOverlayAction(editor, detail) {
 
 // src/extensions/slash-command.ts
 import { Extension as Extension8 } from "@tiptap/core";
+var CALLOUT_COMMANDS = [
+  {
+    title: "Info",
+    description: "Informational callout",
+    tone: "info",
+    keywords: ["info", "information", "callout", "panel"]
+  },
+  {
+    title: "Note",
+    description: "Highlighted note",
+    tone: "note",
+    keywords: ["note", "callout", "panel"]
+  },
+  {
+    title: "Warning",
+    description: "Important warning",
+    tone: "warning",
+    keywords: ["warning", "caution", "alert", "callout", "panel"]
+  }
+];
 function getDefaultSlashCommands(onOpenImagePicker) {
   return [
     {
@@ -6455,6 +6512,15 @@ function getDefaultSlashCommands(onOpenImagePicker) {
         editor.chain().focus().deleteRange(range).toggleBlockquote().run();
       }
     },
+    ...CALLOUT_COMMANDS.map(({ title, description, tone, keywords }) => ({
+      title,
+      description,
+      icon: "panel-left",
+      keywords,
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).wrapIn("loomaCallout", { tone }).run();
+      }
+    })),
     {
       title: "Inline code",
       description: "Monospace code span",
@@ -6608,6 +6674,8 @@ function createLoomaSlashCommandExtension(options = {}) {
 }
 
 export {
+  LOOMA_CALLOUT_TONES,
+  LoomaCallout,
   LoomaMentionSuggestionPluginKey,
   createLoomaMentionExtension,
   LoomaTable,

package/editor/extensions/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyExtension, Editor, Range, Extension } from '@tiptap/core';
+import { AnyExtension, Node, Editor, Range, Extension } from '@tiptap/core';
 import { d as TableContextMenuActionEventDetail, g as TableOverlayActionEventDetail } from '../table-overlay-DoiLie4h.js';
 export { a as TABLE_CELL_BACKGROUND_PRESETS } from '../table-overlay-DoiLie4h.js';
 import { PluginKey } from '@tiptap/pm/state';
@@ -25,6 +25,11 @@ declare function getLoomaTableExtensions(): AnyExtension[];
  */
 declare function getDefaultEditorExtensions(options?: DefaultEditorExtensionsOptions): AnyExtension[];
 
+declare const LOOMA_CALLOUT_TONES: readonly ["info", "note", "warning"];
+type LoomaCalloutTone = (typeof LOOMA_CALLOUT_TONES)[number];
+/** A durable, themeable block container for informational editor content. */
+declare const LoomaCallout: Node<any, any>;
+
 type TableCellAlignment = "left" | "center" | "right";
 type TableCellBackground = string | null;
 declare const LoomaTable: AnyExtension;
@@ -174,4 +179,4 @@ interface LoomaSlashCommand {
 declare const LoomaSlashCommand: Extension<LoomaSlashCommandOptions, any>;
 declare function createLoomaSlashCommandExtension(options?: Partial<LoomaSlashCommandOptions>): Extension<LoomaSlashCommandOptions, any>;
 
-export { type ActiveTableUiState, DEFAULT_MENTION_RESULT_LIMIT, type DefaultEditorExtensionsOptions, type InsertTableAtRangeOptions, type LoomaMentionItem, type LoomaMentionMenuSnapshot, type LoomaMentionOptions, type LoomaMentionProvider, type LoomaMentionProviderContext, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, type LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, type LoomaSlashCommandOptions, type LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, type TableActionCapabilities, type TableCellAlignment, type TableCellBackground, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+export { type ActiveTableUiState, DEFAULT_MENTION_RESULT_LIMIT, type DefaultEditorExtensionsOptions, type InsertTableAtRangeOptions, LOOMA_CALLOUT_TONES, LoomaCallout, type LoomaCalloutTone, type LoomaMentionItem, type LoomaMentionMenuSnapshot, type LoomaMentionOptions, type LoomaMentionProvider, type LoomaMentionProviderContext, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, type LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, type LoomaSlashCommandOptions, type LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, type TableActionCapabilities, type TableCellAlignment, type TableCellBackground, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/editor/extensions/index.js

@@ -1,4 +1,6 @@
 import {
+  LOOMA_CALLOUT_TONES,
+  LoomaCallout,
   LoomaMentionSuggestionPluginKey,
   LoomaSlashCommand,
   LoomaTable,
@@ -20,7 +22,7 @@ import {
   setActiveTableCellAlignment,
   setActiveTableCellBackground,
   shouldShowTextFormattingToolbar
-} from "../chunk-OXFYYLUC.js";
+} from "../chunk-QCOYOVQL.js";
 import {
   DEFAULT_MENTION_RESULT_LIMIT,
   MAX_MENTION_RESULT_LIMIT,
@@ -30,6 +32,8 @@ import {
 } from "../chunk-ZOUKEZ77.js";
 export {
   DEFAULT_MENTION_RESULT_LIMIT,
+  LOOMA_CALLOUT_TONES,
+  LoomaCallout,
   LoomaMentionSuggestionPluginKey,
   LoomaSlashCommand,
   LoomaTable,

package/editor/index.d.ts

@@ -1,6 +1,6 @@
 export { A as ActiveCellRect, T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableInsertionAction, f as TableOverlayAction, g as TableOverlayActionEventDetail, h as TableOverlayGeometry, d as TableToolbarActionEventDetail, m as measureTableOverlayGeometry, r as resolveTableCellAt } from './table-overlay-DoiLie4h.js';
 export { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail } from './ui.js';
-export { ActiveTableUiState, DEFAULT_MENTION_RESULT_LIMIT, DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LoomaMentionItem, LoomaMentionMenuSnapshot, LoomaMentionOptions, LoomaMentionProvider, LoomaMentionProviderContext, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, LoomaSlashCommandOptions, LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TableActionCapabilities, TableCellAlignment, TableCellBackground, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar } from './extensions/index.js';
+export { ActiveTableUiState, DEFAULT_MENTION_RESULT_LIMIT, DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LOOMA_CALLOUT_TONES, LoomaCallout, LoomaCalloutTone, LoomaMentionItem, LoomaMentionMenuSnapshot, LoomaMentionOptions, LoomaMentionProvider, LoomaMentionProviderContext, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, LoomaSlashCommandOptions, LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TableActionCapabilities, TableCellAlignment, TableCellBackground, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar } from './extensions/index.js';
 import '@threadlabs/looma/core';
 import '@tiptap/core';
 import '@tiptap/pm/state';

package/editor/index.js

@@ -1,8 +1,10 @@
 import {
   measureTableOverlayGeometry,
   resolveTableCellAt
-} from "./chunk-3QMBK3XZ.js";
+} from "./chunk-64GLF274.js";
 import {
+  LOOMA_CALLOUT_TONES,
+  LoomaCallout,
   LoomaMentionSuggestionPluginKey,
   LoomaSlashCommand,
   LoomaTable,
@@ -24,7 +26,7 @@ import {
   setActiveTableCellAlignment,
   setActiveTableCellBackground,
   shouldShowTextFormattingToolbar
-} from "./chunk-OXFYYLUC.js";
+} from "./chunk-QCOYOVQL.js";
 import {
   DEFAULT_MENTION_RESULT_LIMIT,
   MAX_MENTION_RESULT_LIMIT,
@@ -35,6 +37,8 @@ import {
 } from "./chunk-ZOUKEZ77.js";
 export {
   DEFAULT_MENTION_RESULT_LIMIT,
+  LOOMA_CALLOUT_TONES,
+  LoomaCallout,
   LoomaMentionSuggestionPluginKey,
   LoomaSlashCommand,
   LoomaTable,

package/editor/ui.js

@@ -1,7 +1,7 @@
 import {
   measureTableOverlayGeometry,
   resolveTableCellAt
-} from "./chunk-3QMBK3XZ.js";
+} from "./chunk-64GLF274.js";
 import {
   TABLE_CELL_BACKGROUND_OPTIONS,
   TABLE_CELL_BACKGROUND_PRESETS

package/editor.css

@@ -77,6 +77,55 @@
   font-style: italic;
 }
 
+.looma-editor .ProseMirror aside[data-looma-callout] {
+  --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
+
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr);
+  align-items: start;
+  column-gap: var(--ui-space-3);
+  margin: var(--ui-space-4) 0;
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border-left: 4px solid var(--ui-editor-callout-color, var(--ui-accent-solid));
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-editor-callout-background, var(--ui-accent-soft));
+}
+
+.looma-editor .ProseMirror aside[data-looma-callout]::before {
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-top: 0.2em;
+  background: var(--ui-editor-callout-color, var(--ui-accent-solid));
+  content: "";
+  mask: var(--ui-editor-callout-icon) center / contain no-repeat;
+  -webkit-mask: var(--ui-editor-callout-icon) center / contain no-repeat;
+}
+
+.looma-editor .ProseMirror aside[data-looma-callout] > * {
+  grid-column: 2;
+}
+
+.looma-editor .ProseMirror aside[data-looma-callout] > :last-child {
+  margin-bottom: 0;
+}
+
+.looma-editor .ProseMirror aside[data-looma-callout][data-tone="info"] {
+  --ui-editor-callout-color: var(--ui-info-solid);
+  --ui-editor-callout-background: var(--ui-info-soft);
+  --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
+}
+
+.looma-editor .ProseMirror aside[data-looma-callout][data-tone="note"] {
+  --ui-editor-callout-color: var(--ui-accent-solid);
+  --ui-editor-callout-background: var(--ui-accent-soft);
+}
+
+.looma-editor .ProseMirror aside[data-looma-callout][data-tone="warning"] {
+  --ui-editor-callout-color: var(--ui-warning-solid);
+  --ui-editor-callout-background: var(--ui-warning-soft);
+  --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
+}
+
 .looma-editor .ProseMirror pre {
   margin: var(--ui-space-4) 0;
   padding: var(--ui-space-4);

package/package.json

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

package/dist/looma/p-979b8ab1.entry.js

@@ -1 +0,0 @@
-import{r as t,g as i,h as e,H as s}from"./p-CEeiinfk.js";import{d as r}from"./p-JwSoedEO.js";function n(t,i,e){const s=t.height>0?Math.min(1,Math.max(0,(i-t.top)/t.height)):.5;return e?s<.25?"before":s>.75?"after":"inside":s<.5?"before":"after"}const o=class{constructor(i){t(this,i)}get host(){return i(this)}label="Tree";hoverExpandDelay=700;source=null;target=null;position=null;hoverIntent=null;componentDidLoad(){this.hoverIntent=function(t,i){let e,s;function r(){e&&clearTimeout(e),e=void 0,s=void 0}return{schedule(n){s===n&&e||(r(),s=n,e=setTimeout((()=>{e=void 0;const t=s;s=void 0,t&&i(t)}),Math.max(0,t)))},cancel:r,destroy:r}}(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(t){return t.composedPath().find((t=>t instanceof HTMLElement&&"ui-tree-item"===t.localName))??null}itemId(t){return t.itemId||t.getAttribute("item-id")||""}rowFor(t){return t.shadowRoot?.querySelector('[part="row"]')??null}itemAtPoint(t,i){let e=this.host.ownerDocument.elementFromPoint(t,i);for(;e;){if("ui-tree-item"===e.localName&&this.host.contains(e))return e;const t=e.getRootNode();e=t instanceof ShadowRoot?t.host:e.parentElement}return null}acceptsChildren(t){return Boolean(t.container??t.hasAttribute("container"))&&!Boolean(t.disabled??t.hasAttribute("disabled"))}itemMetadata(t){return{type:t.getAttribute("data-drag-type")||t.getAttribute("drag-type")||"item",scope:t.getAttribute("data-drop-scope")||t.getAttribute("drop-scope")||"",accepts:(t.getAttribute("data-accepts")||t.getAttribute("accepts")||"").split(",").map((t=>t.trim())).filter(Boolean)}}permitsDrop(t,i,e){if(t.contains(i))return!1;const s=this.itemMetadata(t),r=this.itemMetadata(i);return"inside"===e?this.acceptsChildren(i)&&(0===r.accepts.length||r.accepts.includes(s.type)):s.type===r.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=t=>{const i=Array.from(this.host.querySelectorAll("ui-tree-item")).find((i=>this.itemId(i)===t));i&&"false"===i.getAttribute("aria-expanded")&&i.dispatchEvent(new CustomEvent("ui-tree-auto-expand"))};onDragStart=t=>{const i=this.itemFromEvent(t);if(!i||!Boolean(i.sortable??i.hasAttribute("sortable"))||Boolean(i.disabled??i.hasAttribute("disabled")))return;if(!t.composedPath().some((t=>t instanceof HTMLElement&&"drag-handle"===t.getAttribute("part"))))return void t.preventDefault();const e=this.itemId(i),s=this.rowFor(i);e&&s?(this.source=i,i.setAttribute("data-dragging","true"),t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",e)),function(t,i){if(!t||"function"!=typeof t.setDragImage)return;const{height:e}=i.getBoundingClientRect();t.setDragImage(i,16,Math.max(0,e/2))}(t.dataTransfer,s)):t.preventDefault()};onDragOver=t=>{if(!this.source)return;const i=this.itemFromEvent(t);if(!i||i===this.source)return void this.clearTarget();const e=this.rowFor(i);if(!e)return;const s=n(e.getBoundingClientRect(),t.clientY,this.acceptsChildren(i));if(!this.permitsDrop(this.source,i,s))return t.dataTransfer&&(t.dataTransfer.dropEffect="none"),void this.clearTarget();t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.target===i&&this.position===s||(this.clearTarget(),this.target=i,this.position=s,i.setAttribute("data-drop-position",s)),"inside"===s&&"false"===i.getAttribute("aria-expanded")?this.hoverIntent?.schedule(this.itemId(i)):this.hoverIntent?.cancel()};onDragLeave=t=>{const i=t.relatedTarget;i instanceof Node&&this.host.contains(i)||this.clearTarget()};dispatchReorder(t,i,e){const s=this.itemId(t),n=this.itemId(i);if(!s||!n)return;const o=this.itemMetadata(t),a=this.itemMetadata(i);r(this.host,"reorder",{sourceId:s,targetId:n,position:e,sourceType:o.type,targetType:a.type,sourceScope:o.scope,targetScope:a.scope,trigger:"pointer"})}onDrop=t=>{this.source&&this.target&&this.position&&(t.preventDefault(),this.dispatchReorder(this.source,this.target,this.position),this.finishDrag())};onDragEnd=t=>{if(this.source){const i=this.itemAtPoint(t.clientX,t.clientY);if(i&&i!==this.source){const e=this.rowFor(i);if(e){const s=n(e.getBoundingClientRect(),t.clientY,this.acceptsChildren(i));this.permitsDrop(this.source,i,s)&&this.dispatchReorder(this.source,i,s)}}}this.finishDrag()};visibleItems(){return Array.from(this.host.querySelectorAll("ui-tree-item")).filter((t=>t.getClientRects().length>0&&!t.hasAttribute("disabled")))}onKeyDown=t=>{const i=this.itemFromEvent(t);if(!i)return;const e=this.visibleItems(),s=e.indexOf(i);if(s<0)return;const r="ArrowDown"===t.key?e[s+1]:"ArrowUp"===t.key?e[s-1]:null;r&&(t.preventDefault(),r.focus())};render(){return e(s,{key:"9668f6170cec944d7b993bf0f98637d8908f5962",role:"tree","aria-label":this.label||"Tree"},e("slot",{key:"93140b9a53ca3cddfdc1206e952ca713559dbc2f"}))}};o.style=":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}";export{o as ui_tree}