@threadlabs/looma 0.1.19 → 0.1.21

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.19",
+  "version": "0.1.21",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

package/dist/looma/p-95368dee.entry.js

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