@editora/ui-core 0.1.7 → 0.1.9

package/dist/sortable-23bf110b.mjs

@@ -0,0 +1,2254 @@
+class ee extends HTMLElement {
+  constructor() {
+    super(), this._isRendering = !1, this._renderRequested = !1, this._renderScheduled = !1, this._hasRendered = !1, this._visibilityGuardApplied = !1, this._lastRenderedContent = null, this.root = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this._hasRendered && !this._visibilityGuardApplied && (this.style.getPropertyValue("visibility").trim() || (this.style.setProperty("visibility", "hidden"), this._visibilityGuardApplied = !0)), !this._hasRendered) {
+      this._requestRender();
+      return;
+    }
+    this._scheduleRender();
+  }
+  disconnectedCallback() {
+    try {
+      if (typeof this.close == "function")
+        try {
+          this.close();
+        } catch {
+        }
+      if (typeof this._cleanup == "function") {
+        try {
+          this._cleanup();
+        } catch {
+        }
+        this._cleanup = void 0;
+      }
+      if (typeof this.__menuCleanup == "function") {
+        try {
+          this.__menuCleanup();
+        } catch {
+        }
+        this.__menuCleanup = null;
+      }
+      const e = this._portalEl;
+      if (e && e.parentElement)
+        try {
+          e.parentElement.removeChild(e);
+        } catch {
+        }
+    } catch {
+    }
+  }
+  attributeChangedCallback(e, r, t) {
+    r !== t && this.isConnected && (e && !this.shouldRenderOnAttributeChange(e, r ?? null, t ?? null) || this._scheduleRender());
+  }
+  // Override in components to avoid full shadow rerenders for non-template attributes.
+  shouldRenderOnAttributeChange(e, r, t) {
+    return !0;
+  }
+  setContent(e, r) {
+    !(r != null && r.force) && this._lastRenderedContent === e || (this.root.innerHTML = e, this._lastRenderedContent = e);
+  }
+  invalidateContentCache() {
+    this._lastRenderedContent = null;
+  }
+  requestRender() {
+    this._scheduleRender();
+  }
+  _scheduleRender() {
+    this._renderScheduled || (this._renderScheduled = !0, queueMicrotask(() => {
+      this._renderScheduled = !1, this._requestRender();
+    }));
+  }
+  _requestRender() {
+    if (this._isRendering) {
+      this._renderRequested = !0;
+      return;
+    }
+    this._isRendering = !0;
+    try {
+      this.render();
+    } finally {
+      this._isRendering = !1, this._hasRendered || (this._hasRendered = !0, this._visibilityGuardApplied && (this.style.removeProperty("visibility"), this._visibilityGuardApplied = !1));
+    }
+    this._renderRequested && (this._renderRequested = !1, this._scheduleRender());
+  }
+}
+const te = 1, re = 44, ie = 72, se = `
+  :host {
+    --ui-sortable-accent: var(--ui-color-primary, #2563eb);
+    --ui-sortable-surface: var(--ui-color-surface, #ffffff);
+    --ui-sortable-surface-muted: color-mix(in srgb, var(--ui-sortable-surface) 92%, #eff6ff);
+    --ui-sortable-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-sortable-text: var(--ui-color-text, #0f172a);
+    --ui-sortable-muted: var(--ui-color-muted, #64748b);
+    --ui-sortable-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.06),
+      0 16px 34px rgba(15, 23, 42, 0.08);
+    --ui-sortable-radius: 24px;
+    --ui-sortable-panel-radius: 18px;
+    --ui-sortable-item-radius: 16px;
+    --ui-sortable-handle-radius: 12px;
+    --ui-sortable-gap: 16px;
+    --ui-sortable-list-gap: 8px;
+    --ui-sortable-item-gap: 12px;
+    --ui-sortable-dropzone-size: 10px;
+    --ui-sortable-dropzone-inside-size: 16px;
+    --ui-sortable-dropzone-container-min-block-size: 76px;
+    --ui-sortable-dropzone-container-min-inline-size: 180px;
+    --ui-sortable-indent: 22px;
+    display: block;
+    min-inline-size: 0;
+    color: var(--ui-sortable-text);
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-sizing: border-box;
+  }
+
+  :host([disabled]) {
+    opacity: 0.72;
+  }
+
+  .root {
+    display: grid;
+    gap: 14px;
+    min-inline-size: 0;
+  }
+
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px 16px;
+    padding: 0 2px;
+    color: var(--ui-sortable-muted);
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  .helper {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .selection-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 28px;
+    min-block-size: 24px;
+    padding-inline: 8px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-sortable-accent) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-sortable-accent) 84%, var(--ui-sortable-text));
+    font-weight: 700;
+  }
+
+  .lists {
+    display: grid;
+    gap: var(--ui-sortable-gap);
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    min-inline-size: 0;
+  }
+
+  .list {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: 12px;
+    min-inline-size: 0;
+    padding: 16px;
+    border: 1px solid var(--ui-sortable-border);
+    border-radius: var(--ui-sortable-radius);
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-sortable-surface) 96%, transparent),
+        color-mix(in srgb, var(--ui-sortable-accent) 4%, var(--ui-sortable-surface))
+      );
+    box-shadow: var(--ui-sortable-shadow);
+  }
+
+  .list[data-orientation="horizontal"] .items {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: auto hidden;
+    align-items: stretch;
+  }
+
+  .list[data-disabled="true"] {
+    opacity: 0.68;
+  }
+
+  .list-header {
+    display: grid;
+    gap: 4px;
+  }
+
+  .list-custom-header:empty {
+    display: none;
+  }
+
+  .list-custom-header:not(:empty) {
+    display: block;
+  }
+
+  .list-custom-header:not(:empty) + .list-default-header {
+    display: none;
+  }
+
+  .list-topline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .list-label {
+    font-size: 14px;
+    line-height: 1.4;
+    font-weight: 700;
+    color: var(--ui-sortable-text);
+  }
+
+  .list-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 28px;
+    min-block-size: 24px;
+    padding-inline: 8px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent);
+    color: var(--ui-sortable-muted);
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  .list-description,
+  .list-helper,
+  .empty {
+    color: var(--ui-sortable-muted);
+    font-size: 12px;
+    line-height: 1.55;
+  }
+
+  .items {
+    display: grid;
+    align-content: start;
+    gap: var(--ui-sortable-list-gap);
+    min-block-size: 140px;
+    min-inline-size: 0;
+  }
+
+  .tree {
+    display: grid;
+    gap: var(--ui-sortable-list-gap);
+    min-inline-size: 0;
+  }
+
+  .list-custom-empty:empty {
+    display: none;
+  }
+
+  .list-custom-empty:not(:empty) {
+    display: block;
+  }
+
+  .list-custom-empty:not(:empty) + .empty {
+    display: none;
+  }
+
+  .item-shell {
+    display: grid;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: var(--ui-sortable-item-gap);
+    min-inline-size: 0;
+    padding: 12px;
+    border: 1px solid color-mix(in srgb, var(--ui-sortable-border) 82%, transparent);
+    border-radius: var(--ui-sortable-item-radius);
+    background: var(--ui-sortable-surface-muted);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    will-change: transform, opacity, box-shadow, border-color, background;
+    transition:
+      transform 180ms ease,
+      opacity 180ms ease,
+      box-shadow 180ms ease,
+      border-color 180ms ease,
+      background 180ms ease;
+  }
+
+  .item[data-drag-handle-mode="item"],
+  .item[data-drag-handle-mode="custom"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .item[data-drag-handle-mode="item"] {
+    cursor: grab;
+  }
+
+  .item[data-drag-handle-mode="item"][data-dragging="true"] {
+    cursor: grabbing;
+  }
+
+  .item[data-selected="true"] {
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 32%, var(--ui-sortable-border));
+    background: color-mix(in srgb, var(--ui-sortable-accent) 11%, var(--ui-sortable-surface));
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent),
+      0 10px 24px rgba(15, 23, 42, 0.08);
+  }
+
+  .item[data-focused="true"] {
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 42%, var(--ui-sortable-border));
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
+      0 10px 24px rgba(15, 23, 42, 0.08);
+  }
+
+  .item[data-drop-inside-active="true"] {
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 48%, var(--ui-sortable-border));
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-sortable-accent) 14%, var(--ui-sortable-surface)),
+        color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface-muted))
+      );
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
+      0 14px 30px rgba(15, 23, 42, 0.1);
+  }
+
+  .item[data-dragging="true"] {
+    opacity: 0.48;
+    transform: scale(0.985);
+    transition-duration: 0ms, 180ms, 180ms, 180ms, 180ms;
+  }
+
+  .item.item-placeholder {
+    grid-template-columns: 1fr;
+    border-style: dashed;
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 50%, var(--ui-sortable-border));
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface)),
+        color-mix(in srgb, var(--ui-sortable-accent) 6%, var(--ui-sortable-surface-muted))
+      );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 18%, transparent),
+      0 12px 26px rgba(15, 23, 42, 0.08);
+  }
+
+  .placeholder-content {
+    display: grid;
+    gap: 6px;
+    min-inline-size: 0;
+  }
+
+  .placeholder-kicker {
+    font-size: 11px;
+    line-height: 1.4;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: color-mix(in srgb, var(--ui-sortable-accent) 72%, var(--ui-sortable-text));
+  }
+
+  .placeholder-title {
+    font-size: 14px;
+    line-height: 1.4;
+    font-weight: 700;
+    color: var(--ui-sortable-text);
+  }
+
+  .placeholder-description {
+    color: var(--ui-sortable-muted);
+    font-size: 12px;
+    line-height: 1.55;
+  }
+
+  .drag-preview-overlay {
+    position: fixed;
+    inset: auto auto auto auto;
+    top: -9999px;
+    left: -9999px;
+    z-index: 2147483646;
+    box-sizing: border-box;
+    inline-size: min(320px, calc(100vw - 32px));
+    padding: 12px;
+    border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 50%, var(--ui-sortable-border));
+    border-radius: var(--ui-sortable-item-radius);
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface)),
+        color-mix(in srgb, var(--ui-sortable-accent) 6%, var(--ui-sortable-surface-muted))
+      );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 18%, transparent),
+      0 18px 40px rgba(15, 23, 42, 0.12);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+
+  .drag-preview-overlay[data-visible="true"] {
+    opacity: 1;
+  }
+
+  .drag-preview-overlay .placeholder-description {
+    display: inline-block;
+    max-inline-size: 190px;
+    padding: 4px 8px;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--ui-sortable-surface) 94%, white 6%);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-border) 72%, transparent);
+    color: color-mix(in srgb, var(--ui-sortable-text) 84%, var(--ui-sortable-accent));
+    font-weight: 500;
+  }
+
+  .item[data-disabled="true"] {
+    opacity: 0.58;
+  }
+
+  .item-content {
+    display: grid;
+    gap: 4px;
+    min-inline-size: 0;
+  }
+
+  :host([custom-item-rendering][custom-item-rendering-pending]) {
+    visibility: hidden;
+  }
+
+  :host([custom-item-rendering][custom-item-rendering-ready]) .item-custom-content {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  :host([custom-item-rendering][custom-item-rendering-ready]) .item-default-content {
+    display: none;
+  }
+
+  .item-custom-content:empty {
+    display: none;
+  }
+
+  .item-custom-content:not(:empty) {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .item-custom-content:not(:empty) + .item-default-content {
+    display: none;
+  }
+
+  .item-title {
+    font-size: 14px;
+    line-height: 1.4;
+    font-weight: 700;
+    color: var(--ui-sortable-text);
+    overflow-wrap: anywhere;
+  }
+
+  .item-description {
+    color: var(--ui-sortable-muted);
+    font-size: 12px;
+    line-height: 1.55;
+    overflow-wrap: anywhere;
+  }
+
+  .item-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .item-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent);
+    color: var(--ui-sortable-muted);
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  .item-badge[hidden] {
+    display: none;
+  }
+
+  .item[data-drop-inside-active="true"] .item-badge.drop-badge {
+    background: color-mix(in srgb, var(--ui-sortable-accent) 18%, var(--ui-sortable-surface));
+    color: color-mix(in srgb, var(--ui-sortable-accent) 78%, var(--ui-sortable-text));
+  }
+
+  .item-badge.drop-badge {
+    display: none;
+  }
+
+  .item[data-drop-inside-active="true"] .item-badge.drop-badge {
+    display: inline-flex;
+  }
+
+  .handle {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 34px;
+    block-size: 34px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--ui-sortable-border) 86%, transparent);
+    border-radius: var(--ui-sortable-handle-radius);
+    background: color-mix(in srgb, var(--ui-sortable-surface) 92%, transparent);
+    color: var(--ui-sortable-muted);
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    transition:
+      transform 160ms ease,
+      color 160ms ease,
+      border-color 160ms ease,
+      background 160ms ease;
+  }
+
+  .handle:hover {
+    color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 26%, var(--ui-sortable-border));
+    background: color-mix(in srgb, var(--ui-sortable-accent) 8%, var(--ui-sortable-surface));
+  }
+
+  .handle:active {
+    cursor: grabbing;
+    transform: scale(0.96);
+  }
+
+  .handle[disabled] {
+    cursor: not-allowed;
+    opacity: 0.48;
+  }
+
+  .handle svg {
+    inline-size: 16px;
+    block-size: 16px;
+  }
+
+  .children {
+    display: grid;
+    gap: var(--ui-sortable-list-gap);
+    padding-inline-start: var(--ui-sortable-indent);
+    min-inline-size: 0;
+  }
+
+  .dropzone {
+    position: relative;
+    display: block;
+    min-block-size: var(--ui-sortable-dropzone-size);
+    min-inline-size: 0;
+    border-radius: 999px;
+    will-change: opacity, background;
+    transition: opacity 140ms ease, background 140ms ease;
+  }
+
+  .root[data-dropzone-style="container"] .dropzone {
+    display: grid;
+    place-items: center;
+    min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
+    inline-size: min(100%, var(--ui-sortable-dropzone-match-inline-size, 100%));
+    max-inline-size: var(--ui-sortable-dropzone-container-max-inline-size, none);
+    padding: 12px;
+    border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 40%, var(--ui-sortable-border));
+    border-radius: var(--ui-sortable-item-radius);
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-sortable-accent) 9%, var(--ui-sortable-surface)),
+        color-mix(in srgb, var(--ui-sortable-accent) 5%, var(--ui-sortable-surface-muted))
+      );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
+      0 8px 18px rgba(15, 23, 42, 0.05);
+    opacity: 0.82;
+    overflow: hidden;
+  }
+
+  .list[data-orientation="horizontal"] .dropzone {
+    min-block-size: auto;
+    min-inline-size: 16px;
+    align-self: stretch;
+  }
+
+  .root[data-dropzone-style="container"] .list[data-orientation="horizontal"] .dropzone {
+    min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
+    min-inline-size: var(--ui-sortable-dropzone-match-inline-size, var(--ui-sortable-dropzone-container-min-inline-size));
+    inline-size: auto;
+    align-self: stretch;
+  }
+
+  .dropzone::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: 0;
+    block-size: 2px;
+    transform: translateY(-50%) scaleX(0.42);
+    transform-origin: center;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-sortable-accent) 22%, transparent);
+    transition: transform 160ms ease, background 160ms ease;
+  }
+
+  .list[data-orientation="horizontal"] .dropzone::before {
+    inset-block: 0;
+    inset-inline-start: 50%;
+    inset-inline-end: auto;
+    inline-size: 2px;
+    block-size: 100%;
+    transform: translateX(-50%) scaleY(0.24);
+  }
+
+  .dropzone[data-active="true"] {
+    opacity: 1;
+  }
+
+  .root[data-dropzone-style="container"] .dropzone[data-active="true"] {
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 56%, var(--ui-sortable-border));
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-sortable-accent) 14%, var(--ui-sortable-surface)),
+        color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface-muted))
+      );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 16%, transparent),
+      0 12px 24px rgba(15, 23, 42, 0.08);
+  }
+
+  .list[data-orientation="horizontal"] .dropzone[data-active="true"] {
+    opacity: 1;
+  }
+
+  .dropzone[data-active="true"]::before {
+    transform: translateY(-50%) scaleX(1);
+    background: color-mix(in srgb, var(--ui-sortable-accent) 86%, var(--ui-sortable-text));
+  }
+
+  .list[data-orientation="horizontal"] .dropzone[data-active="true"]::before {
+    transform: translateX(-50%) scaleY(1);
+  }
+
+  .dropzone[data-mode="inside"] {
+    min-block-size: var(--ui-sortable-dropzone-inside-size);
+    margin-block-start: -2px;
+    padding-inline-start: 6px;
+  }
+
+  .root[data-dropzone-style="container"] .dropzone[data-mode="inside"] {
+    min-block-size: max(
+      calc(var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size)) * 0.78),
+      var(--ui-sortable-dropzone-container-min-block-size)
+    );
+    margin-block-start: 0;
+    padding-inline-start: 12px;
+  }
+
+  .dropzone[data-mode="inside"]::before {
+    inset-inline-start: 8px;
+    inset-inline-end: auto;
+    inline-size: 42px;
+  }
+
+  .dropzone-label {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inset-inline-end: auto;
+    transform: translate(-50%, -50%) scale(0.98);
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-sortable-surface) 84%, transparent);
+    color: var(--ui-sortable-muted);
+    font-size: 11px;
+    opacity: 0;
+    transition: opacity 120ms ease, transform 120ms ease;
+    pointer-events: none;
+  }
+
+  .root[data-dropzone-style="container"] .dropzone::before {
+    display: none;
+  }
+
+  .root[data-dropzone-style="container"] .dropzone-label {
+    position: static;
+    inset: auto;
+    transform: none;
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    color: color-mix(in srgb, var(--ui-sortable-accent) 76%, var(--ui-sortable-text));
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    opacity: 1;
+    white-space: nowrap;
+  }
+
+  .dropzone[data-active="true"] .dropzone-label {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  .root[data-drag-preview="true"] .dropzone-label {
+    opacity: 0;
+  }
+
+  .root[data-dropzone-style="container"][data-drag-preview="true"] .dropzone-label {
+    opacity: 1;
+  }
+
+  .root[data-drop-indicator-visibility="active"] .dropzone {
+    opacity: 0;
+  }
+
+  .root[data-dropzone-style="container"][data-drop-indicator-visibility="active"] .dropzone {
+    display: none;
+    opacity: 0;
+  }
+
+  .root[data-dropzone-style="container"][data-drop-indicator-visibility="active"] .dropzone[data-active="true"] {
+    display: grid;
+    opacity: 1;
+  }
+
+  .root[data-drop-indicator-visibility="active"] .dropzone::before {
+    background: transparent;
+    transform: translateY(-50%) scaleX(0.16);
+  }
+
+  .root[data-drop-indicator-visibility="active"] .list[data-orientation="horizontal"] .dropzone::before {
+    transform: translateX(-50%) scaleY(0.16);
+  }
+
+  .root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"] {
+    opacity: 1;
+  }
+
+  .root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"]::before {
+    transform: translateY(-50%) scaleX(1);
+    background: color-mix(in srgb, var(--ui-sortable-accent) 86%, var(--ui-sortable-text));
+  }
+
+  .root[data-drop-indicator-visibility="active"] .list[data-orientation="horizontal"] .dropzone[data-active="true"]::before {
+    transform: translateX(-50%) scaleY(1);
+  }
+
+  .root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"] .dropzone-label {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .item,
+    .handle,
+    .dropzone,
+    .dropzone::before,
+    .dropzone-label {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .list,
+    .item,
+    .handle {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+
+    .dropzone::before {
+      background: Highlight;
+    }
+  }
+`;
+function N(u) {
+  if (!u)
+    return [];
+  try {
+    const e = JSON.parse(u);
+    return Array.isArray(e) ? e : [];
+  } catch {
+    return [];
+  }
+}
+function I(u) {
+  return u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function z(u, e) {
+  return `${u}::${e ?? "__root__"}`;
+}
+function X(u) {
+  return u ? [u.listId, u.parentId ?? "", u.beforeId ?? "", u.mode].join("::") : "";
+}
+function B(u, e) {
+  return X(u) === X(e);
+}
+function ne(u) {
+  if (!u || u === "none")
+    return { x: 1, y: 1 };
+  const e = u.match(/^matrix3d\((.+)\)$/);
+  if (e) {
+    const t = e[1].split(",").map((i) => Number.parseFloat(i.trim()));
+    if (t.length === 16 && t.every((i) => Number.isFinite(i)))
+      return {
+        x: t[0] || 1,
+        y: t[5] || 1
+      };
+  }
+  const r = u.match(/^matrix\((.+)\)$/);
+  if (r) {
+    const t = r[1].split(",").map((i) => Number.parseFloat(i.trim()));
+    if (t.length === 6 && t.every((i) => Number.isFinite(i))) {
+      const [i, s, o, a] = t;
+      return {
+        x: Math.sqrt(i * i + s * s) || 1,
+        y: Math.sqrt(o * o + a * a) || 1
+      };
+    }
+  }
+  return { x: 1, y: 1 };
+}
+function oe(u) {
+  return u === "item" ? "item" : "handle";
+}
+function $(u) {
+  return { ...u };
+}
+function ae(u, e, r, t, i, s) {
+  const o = T(u), a = E(u), l = /* @__PURE__ */ new Set(), n = [], d = (p) => {
+    const x = o.get(p);
+    !x || l.has(p) || (l.add(p), n.push(p), (a.get(z(x.listId, p)) || []).forEach(d));
+  };
+  t.forEach(d);
+  const c = u.map($), g = c.filter((p) => l.has(p.id)), m = i ? c.map($) : c.filter((p) => !l.has(p.id)), f = i ? g.map((p) => s(p, n)) : g.map($), v = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new Map();
+  i && g.forEach((p, x) => {
+    v.set(p.id, f[x].id), b.set(f[x].id, p.id);
+  }), f.forEach((p) => {
+    const x = i ? b.get(p.id) : p.id, F = x ? o.get(x) : null;
+    F && (i && (p.parentId = F.parentId && v.has(F.parentId) && v.get(F.parentId) || null), p.listId = r.listId);
+  });
+  const y = t.map((p) => v.get(p) || p), w = [...m, ...f], k = E(m), A = z(r.listId, r.parentId), _ = [...k.get(A) || []], C = r.beforeId ? _.indexOf(r.beforeId) : _.length, S = C >= 0 ? C : _.length;
+  _.splice(S, 0, ...y), k.set(A, _), E(f).forEach((p, x) => {
+    const [, F] = x.split("::");
+    (F || "") !== "__root__" && k.set(x, [...p]);
+  });
+  const R = T(w);
+  y.forEach((p) => {
+    const x = R.get(p);
+    x && (x.parentId = r.parentId, x.listId = r.listId);
+  });
+  const P = [], L = /* @__PURE__ */ new Set(), G = (p, x) => {
+    (k.get(z(p, x)) || []).forEach((O, V) => {
+      const h = R.get(O);
+      !h || L.has(O) || (L.add(O), h.listId = p, h.parentId = x, h.order = V, P.push(h), G(p, O));
+    });
+  };
+  return e.forEach((p) => G(p.id, null)), w.forEach((p) => {
+    L.has(p.id) || (p.parentId = null, P.push(p));
+  }), {
+    items: P.map($),
+    insertedRootIds: y
+  };
+}
+function E(u) {
+  const e = /* @__PURE__ */ new Map();
+  return u.forEach((r) => {
+    const t = z(r.listId, r.parentId), i = e.get(t);
+    i ? i.push(r.id) : e.set(t, [r.id]);
+  }), e;
+}
+function T(u) {
+  return new Map(u.map((e) => [e.id, e]));
+}
+function Y(u) {
+  const e = /* @__PURE__ */ new Set(), r = [];
+  return u.forEach((t, i) => {
+    const s = typeof (t == null ? void 0 : t.id) == "string" && t.id.trim() ? t.id.trim() : `list-${i + 1}`;
+    e.has(s) || (e.add(s), r.push({
+      id: s,
+      label: typeof (t == null ? void 0 : t.label) == "string" && t.label.trim() ? t.label.trim() : `List ${i + 1}`,
+      description: typeof (t == null ? void 0 : t.description) == "string" ? t.description : "",
+      emptyLabel: typeof (t == null ? void 0 : t.emptyLabel) == "string" && t.emptyLabel.trim() ? t.emptyLabel.trim() : "Drop items here.",
+      orientation: (t == null ? void 0 : t.orientation) === "horizontal" ? "horizontal" : "vertical",
+      disabled: !!(t != null && t.disabled),
+      cloneOnDrag: !!(t != null && t.cloneOnDrag),
+      accepts: Array.isArray(t == null ? void 0 : t.accepts) ? t.accepts.filter((o) => typeof o == "string" && o.trim().length > 0) : void 0
+    }));
+  }), r.length ? r : [{
+    id: "default",
+    label: "Items",
+    description: "",
+    emptyLabel: "Drop items here.",
+    orientation: "vertical",
+    disabled: !1,
+    cloneOnDrag: !1
+  }];
+}
+function U(u, e) {
+  const r = new Set(u.map((n) => n.id)), t = [];
+  e.forEach((n, d) => {
+    const c = typeof (n == null ? void 0 : n.id) == "string" && n.id.trim() ? n.id.trim() : "", g = typeof (n == null ? void 0 : n.label) == "string" && n.label.trim() ? n.label.trim() : "";
+    if (!c || !g)
+      return;
+    const m = typeof (n == null ? void 0 : n.listId) == "string" && r.has(n.listId) ? n.listId : u[0].id;
+    t.push({
+      id: c,
+      label: g,
+      listId: m,
+      parentId: typeof (n == null ? void 0 : n.parentId) == "string" && n.parentId.trim() ? n.parentId.trim() : null,
+      description: typeof (n == null ? void 0 : n.description) == "string" ? n.description : "",
+      order: Number.isFinite(n == null ? void 0 : n.order) ? Number(n.order) : d,
+      disabled: !!(n != null && n.disabled),
+      dragDisabled: !!(n != null && n.dragDisabled),
+      cloneOnDrag: !!(n != null && n.cloneOnDrag),
+      hidden: !!(n != null && n.hidden)
+    });
+  });
+  const i = new Map(t.map((n) => [n.id, n]));
+  t.forEach((n) => {
+    if (!n.parentId)
+      return;
+    const d = i.get(n.parentId);
+    (!d || d.id === n.id || d.listId !== n.listId) && (n.parentId = null);
+  });
+  const s = /* @__PURE__ */ new Map();
+  t.forEach((n) => {
+    const d = z(n.listId, n.parentId), c = s.get(d);
+    c ? c.push(n) : s.set(d, [n]);
+  }), s.forEach((n) => n.sort((d, c) => d.order - c.order || d.label.localeCompare(c.label)));
+  const o = [], a = /* @__PURE__ */ new Set(), l = (n, d) => {
+    (s.get(z(n, d)) || []).forEach((g, m) => {
+      a.has(g.id) || (a.add(g.id), g.order = m, o.push(g), l(n, g.id));
+    });
+  };
+  return u.forEach((n) => l(n.id, null)), t.forEach((n) => {
+    a.has(n.id) || (n.parentId = null, o.push(n));
+  }), o.map($);
+}
+function de(u) {
+  return JSON.stringify(u.map((e) => ({
+    id: e.id,
+    label: e.label,
+    listId: e.listId,
+    parentId: e.parentId,
+    description: e.description,
+    order: e.order,
+    disabled: e.disabled,
+    dragDisabled: e.dragDisabled,
+    cloneOnDrag: e.cloneOnDrag,
+    hidden: e.hidden
+  })));
+}
+function le(u) {
+  return JSON.stringify(u.map((e) => ({
+    id: e.id,
+    label: e.label,
+    description: e.description,
+    emptyLabel: e.emptyLabel,
+    orientation: e.orientation,
+    disabled: e.disabled,
+    cloneOnDrag: e.cloneOnDrag,
+    accepts: e.accepts
+  })));
+}
+function j(u) {
+  return JSON.stringify(u);
+}
+function J(u) {
+  const e = /* @__PURE__ */ new Map(), r = u.map((t) => {
+    const i = z(t.listId, t.parentId), s = e.get(i) ?? 0;
+    return e.set(i, s + 1), {
+      id: t.id,
+      listId: t.listId,
+      parentId: t.parentId,
+      index: s
+    };
+  });
+  return {
+    version: te,
+    records: r
+  };
+}
+function W(u, e) {
+  return e ? `${u.label} ${u.description}`.toLowerCase().includes(e.toLowerCase()) : !0;
+}
+function Q(u, e, r, t, i) {
+  const s = T(u), o = E(u), a = /* @__PURE__ */ new Map(), l = (c, g) => {
+    const m = [...o.get(z(c, g)) || []];
+    return i === "label" && m.sort((f, v) => {
+      const b = s.get(f), y = s.get(v);
+      return !b || !y ? 0 : b.label.localeCompare(y.label);
+    }), m;
+  }, n = (c, g, m) => {
+    const f = [];
+    return l(c, g).forEach((v) => {
+      const b = s.get(v);
+      if (!b || b.hidden)
+        return;
+      const y = n(c, b.id);
+      !W(b, t) && y.length === 0 || (f.push({
+        id: b.id,
+        disabled: b.disabled
+      }), y.length && f.push(...y));
+    }), f;
+  };
+  return Array.from(new Set(u.map((c) => c.listId))).forEach((c) => {
+    a.set(c, n(c, null));
+  }), a;
+}
+class ce extends ee {
+  constructor() {
+    super(), this._lists = Y([]), this._items = [], this._selection = [], this._focusedId = null, this._rangeAnchorId = null, this._dragState = null, this._liveMessage = "Sortable list ready.", this._lastListsAttr = null, this._lastItemsAttr = null, this._lastSelectionAttr = null, this._hydratedPersistKey = null, this._cloneSeed = 1, this._dragImage = null, this._dragPreviewOverlay = null, this._pendingFocusId = null, this._pointerGesture = null, this._pendingDropTarget = null, this._suppressAttributeRender = !1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDragStart = this._onDragStart.bind(this), this._onDragOver = this._onDragOver.bind(this), this._onDrop = this._onDrop.bind(this), this._onDragEnd = this._onDragEnd.bind(this), this._onPointerDown = this._onPointerDown.bind(this), this._onPointerMove = this._onPointerMove.bind(this), this._onPointerUp = this._onPointerUp.bind(this), this._onPointerCancel = this._onPointerCancel.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "lists",
+      "items",
+      "selection",
+      "filter-query",
+      "sort",
+      "persist-key",
+      "allow-filtered-drag",
+      "allow-nesting",
+      "drop-indicator-visibility",
+      "dropzone-style",
+      "drag-preview-size",
+      "drag-handle-mode",
+      "drag-handle-selector",
+      "custom-item-rendering",
+      "show-selection-badge",
+      "disabled"
+    ];
+  }
+  shouldRenderOnAttributeChange(e, r, t) {
+    return this._suppressAttributeRender ? !["lists", "items", "selection"].includes(e) : !0;
+  }
+  attributeChangedCallback(e, r, t) {
+    if (r !== t && this.isConnected) {
+      if (e === "selection" && !this._suppressAttributeRender && this._canSyncInteractiveStateInPlace()) {
+        this._syncSelectionFromAttribute(t ?? null), this._syncSelectionVisualState();
+        return;
+      }
+      if (e === "show-selection-badge" && this._canSyncInteractiveStateInPlace()) {
+        this._syncSelectionVisualState();
+        return;
+      }
+      super.attributeChangedCallback(e, r, t);
+    }
+  }
+  connectedCallback() {
+    var e, r, t, i;
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.root.addEventListener("dragstart", this._onDragStart), this.root.addEventListener("dragover", this._onDragOver), this.root.addEventListener("drop", this._onDrop), this.root.addEventListener("dragend", this._onDragEnd), this.root.addEventListener("pointerdown", this._onPointerDown), this.root.addEventListener("focusin", this._onFocusIn), (e = this.ownerDocument) == null || e.addEventListener("keydown", this._onDocumentKeyDown, !0), (r = this.ownerDocument) == null || r.addEventListener("pointermove", this._onPointerMove, !0), (t = this.ownerDocument) == null || t.addEventListener("pointerup", this._onPointerUp, !0), (i = this.ownerDocument) == null || i.addEventListener("pointercancel", this._onPointerCancel, !0);
+  }
+  disconnectedCallback() {
+    var e, r, t, i;
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("dragstart", this._onDragStart), this.root.removeEventListener("dragover", this._onDragOver), this.root.removeEventListener("drop", this._onDrop), this.root.removeEventListener("dragend", this._onDragEnd), this.root.removeEventListener("pointerdown", this._onPointerDown), this.root.removeEventListener("focusin", this._onFocusIn), (e = this.ownerDocument) == null || e.removeEventListener("keydown", this._onDocumentKeyDown, !0), (r = this.ownerDocument) == null || r.removeEventListener("pointermove", this._onPointerMove, !0), (t = this.ownerDocument) == null || t.removeEventListener("pointerup", this._onPointerUp, !0), (i = this.ownerDocument) == null || i.removeEventListener("pointercancel", this._onPointerCancel, !0), this._removeDragPreviewOverlay(), this._removeDragImage(), super.disconnectedCallback();
+  }
+  get lists() {
+    return this._lists.map((e) => ({ ...e }));
+  }
+  set lists(e) {
+    this.setAttribute("lists", JSON.stringify(e ?? []));
+  }
+  get items() {
+    return this._items.map((e) => ({ ...e }));
+  }
+  set items(e) {
+    this.setAttribute("items", JSON.stringify(e ?? []));
+  }
+  get selection() {
+    return [...this._selection];
+  }
+  set selection(e) {
+    this.setAttribute("selection", JSON.stringify(e ?? []));
+  }
+  get sort() {
+    return this.getAttribute("sort") === "label" ? "label" : "manual";
+  }
+  set sort(e) {
+    !e || e === "manual" ? this.removeAttribute("sort") : this.setAttribute("sort", e);
+  }
+  get filterQuery() {
+    return this.getAttribute("filter-query") || "";
+  }
+  set filterQuery(e) {
+    e ? this.setAttribute("filter-query", e) : this.removeAttribute("filter-query");
+  }
+  select(e) {
+    this._setSelection(e, "api");
+  }
+  clearSelection() {
+    this._setSelection([], "api");
+  }
+  cancelDrag() {
+    this._cancelDrag(!0);
+  }
+  focusItem(e) {
+    this._items.some((r) => r.id === e) && (this._focusedId = e, this._pendingFocusId = e, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender());
+  }
+  moveSelection(e) {
+    const r = this._selectedRootIds();
+    r.length && this._commitMove({
+      listId: e.targetListId,
+      parentId: e.parentId ?? null,
+      beforeId: e.beforeId ?? null,
+      mode: e.mode ?? (e.parentId ? "inside" : "before")
+    }, r, !!e.clone, e.source ?? "api");
+  }
+  getPersistenceSnapshot() {
+    return J(this._items);
+  }
+  render() {
+    var _, C;
+    this._syncStateFromAttributes();
+    const e = this._measureItemShellRects(), r = new Set(this._draggingIds()), t = new Set(this._selection), s = !!((_ = this._dragState) != null && _.keyboard) ? this._projectedMoveResult() : null, o = (s == null ? void 0 : s.items) || this._items, a = new Set((s == null ? void 0 : s.insertedRootIds) || []), l = !!this._dragState && !this._dragState.keyboard && !!this._dragState.dropTarget, n = Q(o, t, r, this.filterQuery, this.sort), d = this._resolvedFocusedId(n), c = this._isDragLocked(), g = this._selection.length, m = this.getAttribute("allow-nesting") !== "false", f = this.getAttribute("drop-indicator-visibility") === "always" ? "always" : "active", v = this._dropzoneStyle(), b = this.getAttribute("show-selection-badge") !== "false", y = this._dragHandleMode(), w = this._usesCustomHandleSelector(), k = c ? this.sort === "label" ? "Dragging is paused while alphabetical sorting is active." : this.filterQuery && !this.hasAttribute("allow-filtered-drag") ? "Dragging is paused while the list is filtered." : "Dragging is currently disabled." : (C = this._dragState) != null && C.keyboard ? "Keyboard drag active. Use arrow keys to choose a drop target, Space or Enter to drop, and Escape to cancel." : y === "item" ? "Drag from anywhere on an item, or press Space on a focused item to start keyboard reordering." : w ? "Use your custom drag handle element, or press Space on a focused item to start keyboard reordering." : "Use the handle to drag, or press Space on a focused item to start keyboard reordering.", A = `
+      <style>${se}</style>
+      <div
+        class="root"
+        part="root"
+        data-drag-locked="${c}"
+        data-drag-preview="${a.size || l ? "true" : "false"}"
+        data-drop-indicator-visibility="${f}"
+        data-dropzone-style="${v}"
+      >
+        <div class="toolbar" part="toolbar">
+          <div class="helper">${I(k)}</div>
+          <div class="helper selection-summary">
+            <span class="selection-pill" part="selection-count">${g}</span>
+            <span class="selection-text">${g === 1 ? "item selected" : "items selected"}</span>
+          </div>
+        </div>
+        <div class="lists" part="lists">
+          ${this._lists.map((S) => {
+      var L;
+      const M = n.get(S.id) || [], R = M.length ? this._renderListTree(o, S, d, r, m, a, b) : "", P = S.disabled ? "This list is read-only." : S.cloneOnDrag ? "Dragging from this list creates a copy." : (L = S.accepts) != null && L.length ? `Accepts drops from: ${S.accepts.join(", ")}` : "";
+      return `
+              <section
+                class="list"
+                part="list"
+                data-list-id="${I(S.id)}"
+                data-orientation="${S.orientation}"
+                data-disabled="${S.disabled}"
+                aria-label="${I(S.label)}"
+              >
+                <header class="list-header">
+                  <div class="list-custom-header" part="list-custom-header" data-list-header-target="${I(S.id)}"></div>
+                  <div class="list-default-header">
+                    <div class="list-topline">
+                      <div class="list-label">${I(S.label)}</div>
+                      <span class="list-count">${M.length}</span>
+                    </div>
+                    ${S.description ? `<div class="list-description">${I(S.description)}</div>` : ""}
+                    ${P ? `<div class="list-helper">${I(P)}</div>` : ""}
+                  </div>
+                </header>
+                <div class="items" role="listbox" aria-multiselectable="true">
+                  ${R || `<div class="list-custom-empty" part="list-custom-empty" data-list-empty-target="${I(S.id)}"></div><div class="empty">${I(S.emptyLabel)}</div>${this._renderDropzone({
+        listId: S.id,
+        parentId: null,
+        beforeId: null,
+        mode: "before"
+      }, "Drop here")}`}
+                </div>
+              </section>
+            `;
+    }).join("")}
+        </div>
+        <div class="sr-only" aria-live="polite" aria-atomic="true">${I(this._liveMessage)}</div>
+      </div>
+    `;
+    this.setContent(A), queueMicrotask(() => {
+      this._restorePendingFocus(), this._applyCurrentDropTargetVisualState(), this._applyLiveMessage(), this._updatePointerDragPreview(), this._animateItemShellReflow(e);
+    });
+  }
+  _syncStateFromAttributes() {
+    var i;
+    const e = this.getAttribute("lists");
+    e !== this._lastListsAttr && (this._lastListsAttr = e, this._lists = Y(N(e)));
+    const r = this.getAttribute("items");
+    if (r !== this._lastItemsAttr) {
+      this._lastItemsAttr = r, this._items = U(this._lists, N(r));
+      const s = this.getAttribute("persist-key");
+      s && this._hydratedPersistKey !== s && (this._items = this._restorePersistedItems(s, this._items), this._hydratedPersistKey = s);
+    }
+    const t = this.getAttribute("selection");
+    t !== this._lastSelectionAttr && this._syncSelectionFromAttribute(t), this._focusedId || (this._focusedId = ((i = this._items.find((s) => !s.hidden)) == null ? void 0 : i.id) || null);
+  }
+  _restorePersistedItems(e, r) {
+    try {
+      const t = window.localStorage.getItem(e);
+      if (!t)
+        return r;
+      const i = JSON.parse(t);
+      if (!i || typeof i != "object" || !Array.isArray(i.records))
+        return r;
+      const s = new Map(i.records.map((a) => [a.id, a])), o = r.map((a, l) => {
+        const n = s.get(a.id);
+        return n ? {
+          ...a,
+          listId: this._lists.some((d) => d.id === n.listId) ? n.listId : a.listId,
+          parentId: typeof n.parentId == "string" ? n.parentId : null,
+          order: Number.isFinite(n.index) ? n.index : l
+        } : { ...a, order: l };
+      });
+      return U(this._lists, o);
+    } catch {
+      return r;
+    }
+  }
+  _resolvedFocusedId(e) {
+    const r = new Set(Array.from(e.values()).flat().map((i) => i.id));
+    if (this._focusedId && r.has(this._focusedId))
+      return this._focusedId;
+    const t = Array.from(e.values()).flat().find((i) => !i.disabled);
+    return (t == null ? void 0 : t.id) || null;
+  }
+  _restorePendingFocus() {
+    const e = this._pendingFocusId || this._focusedId;
+    if (!e)
+      return;
+    const r = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"'), t = this.root.querySelector(`.item[data-id="${r}"]`);
+    t && (document.activeElement !== t && t.focus({ preventScroll: !0 }), this._pendingFocusId = null);
+  }
+  _escapeSelectorValue(e) {
+    return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"');
+  }
+  _findDropzone(e) {
+    const r = this._escapeSelectorValue(e.listId), t = this._escapeSelectorValue(e.parentId ?? ""), i = this._escapeSelectorValue(e.beforeId ?? ""), s = this._escapeSelectorValue(e.mode);
+    return this.root.querySelector(
+      `.dropzone[data-list-id="${r}"][data-parent-id="${t}"][data-before-id="${i}"][data-mode="${s}"]`
+    );
+  }
+  _findItemElement(e) {
+    const r = this._escapeSelectorValue(e);
+    return this.root.querySelector(`.item[data-id="${r}"]`);
+  }
+  _dragHandleMode() {
+    return oe(this.getAttribute("drag-handle-mode"));
+  }
+  _dropzoneStyle() {
+    return this.getAttribute("dropzone-style") === "container" ? "container" : "indicator";
+  }
+  _usesCustomHandleSelector() {
+    var e;
+    return !!((e = this.getAttribute("drag-handle-selector")) != null && e.trim());
+  }
+  _dragActivatorFromPath(e) {
+    var o;
+    const r = e.find((a) => a instanceof HTMLElement && !!a.getAttribute("data-drag-trigger"));
+    if (!r)
+      return null;
+    const t = r.getAttribute("data-drag-trigger"), i = t === "item" ? "item" : t === "custom" ? "custom" : "handle", s = r.getAttribute("data-id") || ((o = r.closest(".item[data-id]")) == null ? void 0 : o.getAttribute("data-id"));
+    return s ? { element: r, id: s, kind: i } : null;
+  }
+  _setDropTargetVisualState(e, r) {
+    var i;
+    if (!e)
+      return;
+    const t = this._findDropzone(e);
+    t && (t.setAttribute("data-active", r ? "true" : "false"), r ? this._syncDropzoneContainerSize(t, e) : this._clearDropzoneContainerSize(t)), e.mode === "inside" && e.parentId && ((i = this._findItemElement(e.parentId)) == null || i.setAttribute("data-drop-inside-active", r ? "true" : "false"));
+  }
+  _applyCurrentDropTargetVisualState(e) {
+    var r;
+    this._setDropTargetVisualState(e ?? null, !1), this._setDropTargetVisualState(((r = this._dragState) == null ? void 0 : r.dropTarget) ?? null, !0);
+  }
+  _applyLiveMessage() {
+    const e = this.root.querySelector(".sr-only[aria-live]");
+    e && (e.textContent = this._liveMessage);
+  }
+  _canSyncInteractiveStateInPlace() {
+    return !!this.root.querySelector(".root") && !this._dragState;
+  }
+  _applyInteractiveStateInPlace(e) {
+    return this._canSyncInteractiveStateInPlace() ? (this._syncSelectionVisualState(), e != null && e.restoreFocus && this._restorePendingFocus(), this._applyLiveMessage(), !0) : !1;
+  }
+  _hasCustomItemRendering() {
+    return this.hasAttribute("custom-item-rendering");
+  }
+  _syncSelectionFromAttribute(e) {
+    this._lastSelectionAttr = e;
+    const r = new Set(this._items.map((t) => t.id));
+    this._selection = N(e).filter((t) => r.has(t)), !this._selection.length && this._focusedId && !r.has(this._focusedId) && (this._focusedId = null);
+  }
+  _syncSelectionVisualState() {
+    const e = new Set(this._selection), r = this.getAttribute("show-selection-badge") !== "false";
+    this.root.querySelectorAll(".item[data-id]").forEach((s) => {
+      const o = s.getAttribute("data-id");
+      if (!o)
+        return;
+      const a = e.has(o), l = this._focusedId === o;
+      s.setAttribute("data-selected", a ? "true" : "false"), s.setAttribute("aria-selected", a ? "true" : "false"), s.setAttribute("data-focused", l ? "true" : "false"), s.setAttribute("tabindex", l ? "0" : "-1");
+      const n = s.querySelector('[data-selection-badge="true"]');
+      if (n) {
+        const d = a && r;
+        n.hidden = !d, n.textContent = d ? "Selected" : "";
+      }
+    });
+    const t = this.root.querySelector(".selection-pill");
+    t && (t.textContent = String(this._selection.length));
+    const i = this.root.querySelector(".selection-text");
+    i && (i.textContent = this._selection.length === 1 ? "item selected" : "items selected");
+  }
+  _clearDropzoneContainerSize(e) {
+    e.style.removeProperty("--ui-sortable-dropzone-match-block-size"), e.style.removeProperty("--ui-sortable-dropzone-match-inline-size");
+  }
+  _dropzoneReferenceElement(e, r) {
+    if (e.mode === "inside" && e.parentId)
+      return this._findItemElement(e.parentId);
+    let t = r.nextElementSibling;
+    for (; t; ) {
+      if (t instanceof HTMLElement && t.classList.contains("item-shell"))
+        return t.querySelector(".item[data-id]");
+      t = t.nextElementSibling;
+    }
+    let i = r.previousElementSibling;
+    for (; i; ) {
+      if (i instanceof HTMLElement && i.classList.contains("item-shell"))
+        return i.querySelector(".item[data-id]");
+      i = i.previousElementSibling;
+    }
+    const s = this._escapeSelectorValue(e.listId), o = this.root.querySelector(`.list[data-list-id="${s}"] .items`), a = o == null ? void 0 : o.querySelector(".item[data-id]");
+    return a || o || null;
+  }
+  _syncDropzoneContainerSize(e, r) {
+    if (this._clearDropzoneContainerSize(e), this._dropzoneStyle() !== "container")
+      return;
+    const t = this._dropzoneReferenceElement(r, e);
+    if (!t)
+      return;
+    const i = t.getBoundingClientRect();
+    e.style.setProperty("--ui-sortable-dropzone-match-block-size", `${Math.max(76, Math.round(i.height))}px`), e.style.setProperty("--ui-sortable-dropzone-match-inline-size", `${Math.max(180, Math.round(i.width))}px`);
+  }
+  _ensureDragPreviewOverlay() {
+    if (this._dragPreviewOverlay && this._dragPreviewOverlay.isConnected)
+      return this._dragPreviewOverlay;
+    const e = document.createElement("div");
+    return e.className = "drag-preview-overlay", e.setAttribute("data-visible", "false"), this.root.appendChild(e), this._dragPreviewOverlay = e, e;
+  }
+  _clearPointerDragPreview() {
+    var r, t, i, s;
+    (r = this._dragPreviewOverlay) == null || r.setAttribute("data-visible", "false"), (t = this._dragPreviewOverlay) == null || t.style.setProperty("left", "-9999px"), (i = this._dragPreviewOverlay) == null || i.style.setProperty("top", "-9999px");
+    const e = this.root.querySelector(".root");
+    e && !((s = this._dragState) != null && s.keyboard) && e.setAttribute("data-drag-preview", "false");
+  }
+  _pointerPreviewContent() {
+    if (!this._dragState || this._dragState.keyboard)
+      return null;
+    const e = this._dragState.movedRootIds[0], r = this._items.find((t) => t.id === e);
+    return r ? {
+      kicker: this._dragState.clone ? "Copy preview" : "Drop preview",
+      title: this._dragState.clone ? `${r.label} copy` : r.label,
+      description: this._dragState.clone ? "Release to add a copy here." : this._dragState.movedRootIds.length > 1 ? "Release to place this selection here." : "Release to place this item here."
+    } : null;
+  }
+  _pointerPreviewSize() {
+    if (this.getAttribute("drag-preview-size") === "compact" || !this._dragState || this._dragState.keyboard)
+      return null;
+    const e = this._dragState.movedRootIds[0], r = e ? this._findItemElement(e) : null;
+    if (!r)
+      return null;
+    const t = window.getComputedStyle(r), i = ne(t.transform);
+    return {
+      width: r.offsetWidth * i.x,
+      height: r.offsetHeight * i.y
+    };
+  }
+  _updatePointerDragPreview() {
+    if (!this._dragState || this._dragState.keyboard) {
+      this._clearPointerDragPreview();
+      return;
+    }
+    const e = this._pointerPreviewContent();
+    if (!e) {
+      this._clearPointerDragPreview();
+      return;
+    }
+    const r = this.root.querySelector(".root"), t = this._dragPreviewOverlay, i = (t == null ? void 0 : t.getAttribute("data-visible")) === "true", s = this._pointerPreviewSize();
+    if (!this._dragState.dropTarget) {
+      i && r && r.setAttribute("data-drag-preview", "true");
+      return;
+    }
+    const o = this._findDropzone(this._dragState.dropTarget);
+    if (!o) {
+      i && r && r.setAttribute("data-drag-preview", "true");
+      return;
+    }
+    const a = this._ensureDragPreviewOverlay();
+    a.innerHTML = `
+      <div class="placeholder-content">
+        <div class="placeholder-kicker">${I(e.kicker)}</div>
+        <div class="placeholder-title">${I(e.title)}</div>
+        <div class="placeholder-description">${I(e.description)}</div>
+      </div>
+    `;
+    const l = o.getBoundingClientRect();
+    r && r.setAttribute("data-drag-preview", "true"), a.style.setProperty("left", "-9999px"), a.style.setProperty("top", "-9999px"), s ? (a.style.setProperty("inline-size", `${s.width}px`), a.style.setProperty("block-size", `${s.height}px`)) : (a.style.removeProperty("inline-size"), a.style.removeProperty("block-size")), a.setAttribute("data-visible", "true");
+    const n = a.getBoundingClientRect(), d = (s == null ? void 0 : s.width) ?? n.width, c = (s == null ? void 0 : s.height) ?? n.height, g = Math.max(16, Math.min(l.left, window.innerWidth - d - 16)), m = Math.max(
+      16,
+      Math.min(
+        l.top + (l.height - c) / 2,
+        window.innerHeight - c - 16
+      )
+    );
+    a.style.setProperty("left", `${Math.round(g)}px`), a.style.setProperty("top", `${Math.round(m)}px`);
+  }
+  _setDraggingVisualState(e, r) {
+    e.forEach((t) => {
+      const i = this._findItemElement(t);
+      i && (i.setAttribute("data-dragging", r ? "true" : "false"), i.setAttribute("aria-grabbed", r ? "true" : "false"), r && i.getBoundingClientRect());
+    });
+  }
+  _setDropTarget(e, r) {
+    var i;
+    const t = ((i = this._dragState) == null ? void 0 : i.dropTarget) ?? null;
+    if (!(!this._dragState || B(t, e))) {
+      if (this._pendingDropTarget = null, this._dragState.dropTarget = e, this._applyCurrentDropTargetVisualState(t), r != null && r.announceLabel && this._announce(r.announceLabel), this._dragState.keyboard) {
+        this.requestRender();
+        return;
+      }
+      this._updatePointerDragPreview();
+    }
+  }
+  _queueDropTarget(e, r, t) {
+    if (!this._dragState)
+      return;
+    const i = this._dragState.dropTarget ?? null;
+    if (B(i, e)) {
+      this._pendingDropTarget = null;
+      return;
+    }
+    if (!i && e) {
+      this._setDropTarget(e, t);
+      return;
+    }
+    const s = typeof r == "number" && Number.isFinite(r) ? r : performance.now(), o = this._pendingDropTarget;
+    if (o && B(o.target, e)) {
+      const a = e ? re : ie;
+      s - o.startedAt >= a && this._setDropTarget(e, o.announceLabel ? { announceLabel: o.announceLabel } : t);
+      return;
+    }
+    this._pendingDropTarget = {
+      target: e,
+      startedAt: s,
+      announceLabel: t == null ? void 0 : t.announceLabel
+    };
+  }
+  _releaseDropTarget(e, r) {
+    var s;
+    if (!this._dragState)
+      return null;
+    if (Number.isFinite(e) && Number.isFinite(r)) {
+      const o = this._dropTargetFromPoint(e, r);
+      if (o && this._canDrop(o, this._dragState.movedRootIds))
+        return this._pendingDropTarget = null, o;
+    }
+    const t = ((s = this._pendingDropTarget) == null ? void 0 : s.target) ?? null;
+    if (this._pendingDropTarget = null, t && this._canDrop(t, this._dragState.movedRootIds))
+      return t;
+    const i = this._dragState.dropTarget ?? null;
+    return i && this._canDrop(i, this._dragState.movedRootIds) ? i : null;
+  }
+  _pathFromPoint(e, r) {
+    var o, a;
+    const t = [], i = this.root;
+    let s = typeof i.elementFromPoint == "function" ? i.elementFromPoint(e, r) : ((o = this.ownerDocument) == null ? void 0 : o.elementFromPoint(e, r)) ?? null;
+    for (; s && (s instanceof HTMLElement && t.push(s), s !== this); ) {
+      if (s instanceof ShadowRoot) {
+        s = s.host;
+        continue;
+      }
+      s = s.parentNode, !s && ((a = t[t.length - 1]) == null ? void 0 : a.getRootNode()) instanceof ShadowRoot && (s = t[t.length - 1].getRootNode().host);
+    }
+    return t;
+  }
+  _measureItemShellRects() {
+    const e = /* @__PURE__ */ new Map();
+    return this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((r) => {
+      const t = r.getAttribute("data-item-shell");
+      if (!t)
+        return;
+      const i = r.getBoundingClientRect();
+      e.set(t, { top: i.top, left: i.left });
+    }), e;
+  }
+  _animateItemShellReflow(e) {
+    if (!e.size)
+      return;
+    const r = new Set(this._draggingIds());
+    this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((t) => {
+      const i = t.getAttribute("data-item-shell");
+      if (!i || r.has(i))
+        return;
+      const s = e.get(i);
+      if (!s)
+        return;
+      const o = t.getBoundingClientRect(), a = s.left - o.left, l = s.top - o.top;
+      Math.abs(a) < 0.5 && Math.abs(l) < 0.5 || (t.style.transition = "none", t.style.transform = `translate(${a}px, ${l}px)`, t.style.willChange = "transform", t.getBoundingClientRect(), requestAnimationFrame(() => {
+        t.style.transition = "transform 180ms ease", t.style.transform = "";
+        const n = () => {
+          t.style.transition = "", t.style.willChange = "", t.removeEventListener("transitionend", n);
+        };
+        t.addEventListener("transitionend", n), window.setTimeout(n, 220);
+      }));
+    });
+  }
+  _previewCloneSubtreeItem(e, r) {
+    const t = e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id;
+    return {
+      ...e,
+      id: `${t}--preview`,
+      label: r[0] === e.id ? `${e.label} copy` : e.label
+    };
+  }
+  _projectedMoveResult() {
+    var e;
+    return !((e = this._dragState) != null && e.dropTarget) || !this._canDrop(this._dragState.dropTarget, this._dragState.movedRootIds) ? null : ae(
+      this._items,
+      this._lists,
+      this._dragState.dropTarget,
+      this._dragState.movedRootIds,
+      this._dragState.clone,
+      (r, t) => this._previewCloneSubtreeItem(r, t)
+    );
+  }
+  _renderListTree(e, r, t, i, s, o, a) {
+    const l = T(e), n = E(e), d = (c) => {
+      const g = n.get(z(r.id, c)) || [], m = this.sort === "label" ? [...g].sort((v, b) => {
+        const y = l.get(v), w = l.get(b);
+        return !y || !w ? 0 : y.label.localeCompare(w.label);
+      }) : g;
+      let f = "";
+      return m.forEach((v) => {
+        const b = l.get(v);
+        if (!b || b.hidden)
+          return;
+        const y = this._renderChildBranch(
+          b,
+          t,
+          i,
+          d,
+          s,
+          o,
+          a
+        );
+        !W(b, this.filterQuery) && !y.includes('class="item"') || (f += this._renderDropzone({
+          listId: r.id,
+          parentId: c,
+          beforeId: v,
+          mode: "before"
+        }, "Drop here"), f += y);
+      }), f += this._renderDropzone({
+        listId: r.id,
+        parentId: c,
+        beforeId: null,
+        mode: "before"
+      }, "Drop here"), f;
+    };
+    return `<div class="tree">${d(null)}</div>`;
+  }
+  _renderChildBranch(e, r, t, i, s, o, a) {
+    var S, M, R, P;
+    const l = I(e.id), n = o.has(e.id), d = n ? "" : i(e.id), c = d.includes('class="item"'), g = n ? !1 : this._selection.includes(e.id), m = n ? !1 : t.has(e.id), f = e.disabled, v = f || e.dragDisabled || this._isDragLocked(), b = ((M = (S = this._dragState) == null ? void 0 : S.dropTarget) == null ? void 0 : M.mode) === "inside" && this._dragState.dropTarget.parentId === e.id, y = (R = this._dragState) != null && R.clone ? "Copy preview" : "Drop preview", w = (P = this._dragState) != null && P.clone ? "Release to add a copy here." : this._dragState && this._dragState.movedRootIds.length > 1 ? "Release to place this selection here." : "Release to place this item here.", k = this._dragHandleMode(), A = this._usesCustomHandleSelector(), _ = A ? "custom" : k, C = !A && k === "handle";
+    return `
+      <div class="item-shell" data-item-shell="${l}">
+        <article
+          class="item${n ? " item-placeholder" : ""}"
+          part="item"
+          data-id="${l}"
+          data-drag-handle-mode="${_}"
+          ${!n && _ === "item" ? 'data-drag-trigger="item"' : ""}
+          data-selected="${g}"
+          data-focused="${n ? "false" : r === e.id}"
+          data-dragging="${m}"
+          data-disabled="${f}"
+          data-drop-inside-active="${b ? "true" : "false"}"
+          role="${n ? "presentation" : "option"}"
+          aria-selected="${n ? "false" : g}"
+          aria-disabled="${f}"
+          aria-grabbed="${n ? "false" : m}"
+          aria-hidden="${n ? "true" : "false"}"
+          tabindex="${n ? "-1" : r === e.id ? "0" : "-1"}"
+        >
+          ${n ? `
+              <div class="placeholder-content">
+                <div class="placeholder-kicker">${I(y)}</div>
+                <div class="placeholder-title">${I(e.label)}</div>
+                <div class="placeholder-description">${I(w)}</div>
+              </div>
+            ` : `
+              ${C ? `
+                  <button
+                    class="handle"
+                    part="handle"
+                    type="button"
+                    data-action="handle"
+                    data-drag-trigger="handle"
+                    data-id="${l}"
+                    draggable="false"
+                    ${v ? "disabled" : ""}
+                    aria-label="Drag ${I(e.label)}"
+                  >
+                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                      <circle cx="5" cy="4" r="1.25"></circle>
+                      <circle cx="11" cy="4" r="1.25"></circle>
+                      <circle cx="5" cy="8" r="1.25"></circle>
+                      <circle cx="11" cy="8" r="1.25"></circle>
+                      <circle cx="5" cy="12" r="1.25"></circle>
+                      <circle cx="11" cy="12" r="1.25"></circle>
+                    </svg>
+                  </button>
+                ` : ""}
+              <div class="item-content" data-action="select" data-id="${l}">
+                <div class="item-custom-content" part="item-custom-content" data-item-content-target="${l}"></div>
+                <div class="item-default-content">
+                  <div class="item-title">${I(e.label)}</div>
+                  ${e.description ? `<div class="item-description">${I(e.description)}</div>` : ""}
+                  <div class="item-meta">
+                    <span class="item-badge selection-badge" data-selection-badge="true" ${g && a ? "" : "hidden"}>${g && a ? "Selected" : ""}</span>
+                    ${e.cloneOnDrag ? '<span class="item-badge">Clone on drag</span>' : ""}
+                    ${e.dragDisabled ? '<span class="item-badge">Pinned</span>' : ""}
+                    ${s ? '<span class="item-badge drop-badge">Nest here</span>' : ""}
+                  </div>
+                </div>
+              </div>
+            `}
+        </article>
+        ${s && !n ? this._renderDropzone({
+      listId: e.listId,
+      parentId: e.id,
+      beforeId: null,
+      mode: "inside"
+    }, "Nest here") : ""}
+        ${c ? `<div class="children">${d}</div>` : ""}
+      </div>
+    `;
+  }
+  _renderDropzone(e, r) {
+    var i;
+    const t = ((i = this._dragState) == null ? void 0 : i.dropTarget) && this._dragState.dropTarget.listId === e.listId && this._dragState.dropTarget.parentId === e.parentId && this._dragState.dropTarget.beforeId === e.beforeId && this._dragState.dropTarget.mode === e.mode;
+    return `
+      <div
+        class="dropzone"
+        part="dropzone"
+        data-list-id="${I(e.listId)}"
+        data-parent-id="${I(e.parentId ?? "")}"
+        data-before-id="${I(e.beforeId ?? "")}"
+        data-mode="${e.mode}"
+        data-active="${t ? "true" : "false"}"
+        aria-hidden="true"
+      >
+        <span class="dropzone-label">${I(r)}</span>
+      </div>
+    `;
+  }
+  _onClick(e) {
+    const r = e.composedPath(), t = r.find((n) => {
+      var d;
+      return n instanceof HTMLElement && ((d = n.classList) == null ? void 0 : d.contains("toolbar"));
+    }), i = this._dragActivatorFromPath(r), s = r.find((n) => n instanceof HTMLElement && n.classList.contains("item"));
+    if (i && i.kind !== "item")
+      return;
+    if (!s)
+      return t && !(e.target instanceof HTMLButtonElement), void 0;
+    const o = s.getAttribute("data-id");
+    if (!o)
+      return;
+    const a = this._items.find((n) => n.id === o);
+    if (!a || a.disabled)
+      return;
+    const l = e;
+    if (l.shiftKey ? this._selectRangeTo(o) : l.metaKey || l.ctrlKey ? this._toggleSelection(o) : this._setSelection([o], "pointer"), this._focusedId = o, this._rangeAnchorId = o, this._pendingFocusId = o, this._hasCustomItemRendering()) {
+      this._syncSelectionVisualState(), this._restorePendingFocus();
+      return;
+    }
+    this.requestRender();
+  }
+  _onFocusIn(e) {
+    const r = e.composedPath().find((i) => i instanceof HTMLElement && i.classList.contains("item")), t = r == null ? void 0 : r.getAttribute("data-id");
+    t && (this._focusedId = t, this._syncSelectionVisualState());
+  }
+  _onKeyDown(e) {
+    var l;
+    const r = this._visibleItemIds();
+    if (!r.length)
+      return;
+    const t = this._focusedId && r.includes(this._focusedId) ? this._focusedId : r[0], i = r.indexOf(t), s = this._items.find((n) => n.id === t), o = s ? this._lists.find((n) => n.id === s.listId) : null, a = (o == null ? void 0 : o.orientation) === "horizontal";
+    if (!((l = this._dragState) != null && l.keyboard)) {
+      if (e.key === "ArrowDown" && !a || e.key === "ArrowRight" && a) {
+        e.preventDefault(), this._moveFocusBy(r, i, 1);
+        return;
+      }
+      if (e.key === "ArrowUp" && !a || e.key === "ArrowLeft" && a) {
+        e.preventDefault(), this._moveFocusBy(r, i, -1);
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+        e.preventDefault(), this._setSelection(r, "keyboard"), this._announce(`${r.length} items selected.`);
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault(), this._setSelection([t], "keyboard");
+        return;
+      }
+      if (e.key === " " || e.code === "Space") {
+        if (e.preventDefault(), this._isDragLocked()) {
+          this._announce("Dragging is disabled right now.");
+          return;
+        }
+        const n = this._selectedRootIds(t);
+        if (!n.length)
+          return;
+        const d = this._itemClonesOnDrag(t);
+        this._dragState = {
+          snapshot: this._items.map($),
+          movedRootIds: n,
+          originId: t,
+          clone: d,
+          keyboard: !0,
+          dropTarget: this._initialKeyboardDropTarget(t),
+          committed: !1
+        };
+        const c = n.length === 1 ? `Lifted ${(s == null ? void 0 : s.label) || "item"}.` : `Lifted ${n.length} items.`;
+        this._announce(`${c} Use arrow keys to choose a destination.`), this.requestRender();
+        return;
+      }
+      if (e.key === "Escape") {
+        this._setSelection([], "keyboard");
+        return;
+      }
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault(), this._cancelDrag(!0);
+      return;
+    }
+    if (e.key === "Enter" || e.key === " " || e.code === "Space") {
+      e.preventDefault();
+      const n = this._dragState.dropTarget;
+      if (!n)
+        return;
+      this._commitMove(n, this._dragState.movedRootIds, this._dragState.clone, "keyboard");
+      return;
+    }
+    if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+      e.preventDefault();
+      const n = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
+      this._moveKeyboardDropTarget(n);
+    }
+  }
+  _moveFocusBy(e, r, t) {
+    const i = Math.max(0, Math.min(e.length - 1, r + t)), s = e[i];
+    this._focusedId = s, this._pendingFocusId = s, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender();
+  }
+  _onDragStart(e) {
+    const r = this._dragActivatorFromPath(e.composedPath()), t = r == null ? void 0 : r.id;
+    if (!r || !t) {
+      e.preventDefault();
+      return;
+    }
+    if (this._isDragLocked()) {
+      e.preventDefault(), this._announce("Dragging is disabled right now.");
+      return;
+    }
+    const i = this._items.find((a) => a.id === t);
+    if (!i || i.disabled || i.dragDisabled) {
+      e.preventDefault();
+      return;
+    }
+    const s = this._selection.includes(t) ? this._selectedRootIds(t) : [t];
+    this._selection.includes(t) || this._setSelection([t], "pointer");
+    const o = this._itemClonesOnDrag(t);
+    this._dragState = {
+      snapshot: this._items.map($),
+      movedRootIds: s,
+      originId: t,
+      clone: o,
+      keyboard: !1,
+      dropTarget: null,
+      committed: !1
+    }, e.dataTransfer && (e.dataTransfer.effectAllowed = o ? "copyMove" : "move", e.dataTransfer.setData("text/plain", s.join(",")), this._applyDragImage(e.dataTransfer, s.length)), this._announce(
+      o ? `Dragging ${s.length === 1 ? i.label : `${s.length} items`} as a copy.` : `Dragging ${s.length === 1 ? i.label : `${s.length} items`}.`
+    ), this.requestRender();
+  }
+  _onDragOver(e) {
+    if (!this._dragState || this._dragState.keyboard)
+      return;
+    const r = this._dropTargetFromEvent(e);
+    if (!r || !this._canDrop(r, this._dragState.movedRootIds)) {
+      this._queueDropTarget(null, e.timeStamp);
+      return;
+    }
+    e.preventDefault(), this._queueDropTarget(r, e.timeStamp), e.dataTransfer && (e.dataTransfer.dropEffect = this._dragState.clone ? "copy" : "move");
+  }
+  _onDrop(e) {
+    if (!this._dragState || this._dragState.keyboard)
+      return;
+    const r = this._dropTargetFromEvent(e);
+    !r || !this._canDrop(r, this._dragState.movedRootIds) || (e.preventDefault(), this._commitMove(r, this._dragState.movedRootIds, this._dragState.clone, "pointer"));
+  }
+  _onDocumentKeyDown(e) {
+    e.key === "Escape" && (!this._dragState || this._dragState.keyboard || (e.preventDefault(), this._cancelDrag(!0)));
+  }
+  _onDragEnd() {
+    !this._dragState || this._dragState.keyboard || this._dragState.committed || (this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this._announce("Drag cancelled."), this.requestRender());
+  }
+  _dropTargetFromEvent(e) {
+    return this._dropTargetFromPath(e.composedPath(), e.clientX, e.clientY);
+  }
+  _dropTargetFromPath(e, r, t) {
+    const i = e.find((_) => _ instanceof HTMLElement && _.classList.contains("dropzone"));
+    if (i) {
+      const _ = {
+        listId: i.getAttribute("data-list-id") || "",
+        parentId: i.getAttribute("data-parent-id") || null,
+        beforeId: i.getAttribute("data-before-id") || null,
+        mode: i.getAttribute("data-mode") === "inside" ? "inside" : "before"
+      };
+      if (_.listId)
+        return _;
+    }
+    const s = e.find((_) => _ instanceof HTMLElement && _.classList.contains("item"));
+    if (!s)
+      return null;
+    const o = s.getAttribute("data-id");
+    if (!o)
+      return null;
+    const a = this._items.find((_) => _.id === o);
+    if (!a)
+      return null;
+    const l = this._lists.find((_) => _.id === a.listId), n = s.getBoundingClientRect(), d = (l == null ? void 0 : l.orientation) === "horizontal", c = d ? n.left : n.top, g = d ? n.right : n.bottom, m = d ? r : t, f = Math.max(1, g - c), v = (m - c) / f, b = this.getAttribute("allow-nesting") !== "false" && !a.disabled;
+    if (v <= 0.34)
+      return {
+        listId: a.listId,
+        parentId: a.parentId,
+        beforeId: a.id,
+        mode: "before"
+      };
+    if (b && v >= 0.34 && v <= 0.74)
+      return {
+        listId: a.listId,
+        parentId: a.id,
+        beforeId: null,
+        mode: "inside"
+      };
+    const w = E(this._items).get(z(a.listId, a.parentId)) || [], k = w.indexOf(a.id), A = k >= 0 && w[k + 1] || null;
+    return {
+      listId: a.listId,
+      parentId: a.parentId,
+      beforeId: A,
+      mode: "before"
+    };
+  }
+  _dropTargetFromPoint(e, r) {
+    return this._dropTargetFromPath(this._pathFromPoint(e, r), e, r);
+  }
+  _beginPointerDrag(e, r) {
+    if (!this._pointerGesture || this._dragState)
+      return;
+    const t = this._items.find((i) => {
+      var s;
+      return i.id === ((s = this._pointerGesture) == null ? void 0 : s.originId);
+    });
+    t && (this._dragState = {
+      snapshot: this._items.map($),
+      movedRootIds: [...this._pointerGesture.movedRootIds],
+      originId: this._pointerGesture.originId,
+      clone: this._pointerGesture.clone,
+      keyboard: !1,
+      dropTarget: null,
+      committed: !1
+    }, this._pendingDropTarget = null, this._applyPointerPreview(
+      e,
+      r,
+      this._dragState.movedRootIds.length,
+      this._dragState.clone
+    ), this._setDraggingVisualState(this._draggingIds(), !0), this._announce(
+      this._dragState.clone ? `Dragging ${this._dragState.movedRootIds.length === 1 ? t.label : `${this._dragState.movedRootIds.length} items`} as a copy.` : `Dragging ${this._dragState.movedRootIds.length === 1 ? t.label : `${this._dragState.movedRootIds.length} items`}.`
+    ));
+  }
+  _onPointerDown(e) {
+    var o, a;
+    const r = this._dragActivatorFromPath(e.composedPath()), t = r == null ? void 0 : r.id;
+    if (!r || !t)
+      return;
+    if (this._isDragLocked()) {
+      e.preventDefault(), this._announce("Dragging is disabled right now.");
+      return;
+    }
+    const i = this._items.find((l) => l.id === t);
+    if (!i || i.disabled || i.dragDisabled) {
+      e.preventDefault();
+      return;
+    }
+    e.preventDefault();
+    try {
+      (a = (o = r.element).setPointerCapture) == null || a.call(o, e.pointerId);
+    } catch {
+    }
+    const s = this._selection.includes(t) ? this._selectedRootIds(t) : [t];
+    this._pointerGesture = {
+      pointerId: e.pointerId,
+      pointerType: e.pointerType,
+      originId: t,
+      movedRootIds: s,
+      clone: this._itemClonesOnDrag(t),
+      startX: e.clientX,
+      startY: e.clientY,
+      moved: !1,
+      captureTarget: r.element
+    };
+  }
+  _onPointerMove(e) {
+    if (!(!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId)) {
+      if (e.preventDefault(), !this._pointerGesture.moved) {
+        if (Math.hypot(e.clientX - this._pointerGesture.startX, e.clientY - this._pointerGesture.startY) < 6)
+          return;
+        this._pointerGesture.moved = !0, this._beginPointerDrag(e.clientX, e.clientY);
+      }
+      if (!(!this._dragState || this._dragState.keyboard) && (this._movePointerPreview(e.clientX, e.clientY), !this._dragState.committed)) {
+        const r = this._dropTargetFromPoint(e.clientX, e.clientY);
+        if (!r || !this._canDrop(r, this._dragState.movedRootIds)) {
+          this._queueDropTarget(null, e.timeStamp);
+          return;
+        }
+        this._queueDropTarget(r, e.timeStamp);
+      }
+    }
+  }
+  _onPointerUp(e) {
+    var i, s;
+    if (!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId)
+      return;
+    e.preventDefault();
+    try {
+      (s = (i = this._pointerGesture.captureTarget) == null ? void 0 : i.releasePointerCapture) == null || s.call(i, e.pointerId);
+    } catch {
+    }
+    const r = this._pointerGesture;
+    if (this._pointerGesture = null, !this._dragState || this._dragState.keyboard)
+      return;
+    const t = r.moved ? this._releaseDropTarget(e.clientX, e.clientY) : null;
+    if (r.moved && t) {
+      this._commitMove(t, this._dragState.movedRootIds, this._dragState.clone, "pointer");
+      return;
+    }
+    r.moved ? this._cancelDrag(!0) : (this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this.requestRender());
+  }
+  _onPointerCancel(e) {
+    !this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId || (this._pointerGesture = null, this._dragState && this._cancelDrag(!0));
+  }
+  _setSelection(e, r) {
+    const t = new Set(this._items.map((a) => a.id)), i = Array.from(new Set(e.filter((a) => t.has(a)))), s = [...this._selection];
+    this._selection = i, this._rangeAnchorId = i[i.length - 1] || null, this._focusedId = i[i.length - 1] || this._focusedId;
+    const o = j(i);
+    if (this.getAttribute("selection") !== o) {
+      this._lastSelectionAttr = o, this._suppressAttributeRender = !0;
+      try {
+        i.length ? this.setAttribute("selection", o) : this.removeAttribute("selection");
+      } finally {
+        this._suppressAttributeRender = !1;
+      }
+    }
+    if (this.dispatchEvent(new CustomEvent("selection-change", {
+      detail: {
+        selection: [...i],
+        previousSelection: s
+      },
+      bubbles: !0,
+      composed: !0
+    })), r !== "restore") {
+      if (this._applyInteractiveStateInPlace({ restoreFocus: !0 }))
+        return;
+      this.requestRender();
+    }
+  }
+  _toggleSelection(e) {
+    const r = this._selection.includes(e) ? this._selection.filter((t) => t !== e) : [...this._selection, e];
+    this._setSelection(r, "pointer"), this._announce(`${r.length} items selected.`);
+  }
+  _selectRangeTo(e) {
+    const r = this._visibleItemIds(), t = this._rangeAnchorId || this._focusedId || e, i = r.indexOf(t), s = r.indexOf(e);
+    if (i < 0 || s < 0) {
+      this._setSelection([e], "pointer");
+      return;
+    }
+    const [o, a] = i <= s ? [i, s] : [s, i];
+    this._setSelection(r.slice(o, a + 1), "pointer"), this._announce(`${a - o + 1} items selected.`);
+  }
+  _visibleItemIds() {
+    const e = Q(this._items, new Set(this._selection), new Set(this._draggingIds()), this.filterQuery, this.sort);
+    return Array.from(e.values()).flat().filter((r) => !r.disabled).map((r) => r.id);
+  }
+  _selectedRootIds(e) {
+    const r = this._selection.length ? [...this._selection] : e ? [e] : [], t = T(this._items), i = new Set(r);
+    return r.filter((s) => {
+      var l;
+      const o = t.get(s);
+      if (!o)
+        return !1;
+      let a = o.parentId;
+      for (; a; ) {
+        if (i.has(a))
+          return !1;
+        a = ((l = t.get(a)) == null ? void 0 : l.parentId) ?? null;
+      }
+      return !o.disabled;
+    });
+  }
+  _draggingIds() {
+    if (!this._dragState)
+      return [];
+    const e = T(this._items), r = E(this._items), t = [], i = (s) => {
+      t.push(s);
+      const o = e.get(s);
+      if (!o)
+        return;
+      (r.get(z(o.listId, s)) || []).forEach(i);
+    };
+    return this._dragState.movedRootIds.forEach(i), t;
+  }
+  _itemClonesOnDrag(e) {
+    const r = this._items.find((i) => i.id === e);
+    if (!r)
+      return !1;
+    if (r.cloneOnDrag)
+      return !0;
+    const t = this._lists.find((i) => i.id === r.listId);
+    return !!(t != null && t.cloneOnDrag);
+  }
+  _isDragLocked() {
+    return !!(this.hasAttribute("disabled") || this.sort !== "manual" || this.filterQuery && !this.hasAttribute("allow-filtered-drag"));
+  }
+  _canDrop(e, r) {
+    var n;
+    if (this._isDragLocked())
+      return !1;
+    const t = this._lists.find((d) => d.id === e.listId);
+    if (!t || t.disabled)
+      return !1;
+    const i = T(this._items), s = /* @__PURE__ */ new Set(), o = E(this._items), a = (d) => {
+      s.add(d);
+      const c = i.get(d);
+      c && (o.get(z(c.listId, d)) || []).forEach(a);
+    };
+    if (r.forEach(a), e.parentId && s.has(e.parentId) || e.beforeId && s.has(e.beforeId))
+      return !1;
+    const l = Array.from(new Set(r.map((d) => {
+      var c;
+      return (c = i.get(d)) == null ? void 0 : c.listId;
+    }).filter(Boolean)));
+    return !((n = t.accepts) != null && n.length && l.some((d) => {
+      var c;
+      return !((c = t.accepts) != null && c.includes(d));
+    }) || e.mode === "inside" && this.getAttribute("allow-nesting") === "false");
+  }
+  _commitMove(e, r, t, i) {
+    if (!this._canDrop(e, r))
+      return;
+    const s = T(this._items), o = E(this._items), a = /* @__PURE__ */ new Set(), l = [], n = (h) => {
+      const D = s.get(h);
+      !D || a.has(h) || (a.add(h), l.push(h), (o.get(z(D.listId, h)) || []).forEach(n));
+    };
+    r.forEach(n);
+    const d = this._items.map($), c = d.filter((h) => a.has(h.id)), g = t ? d.map($) : d.filter((h) => !a.has(h.id)), m = t ? c.map((h) => this._cloneSubtreeItem(h, l)) : c.map($), f = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
+    t && c.forEach((h, D) => {
+      f.set(h.id, m[D].id), v.set(m[D].id, h.id);
+    }), m.forEach((h) => {
+      const D = t ? v.get(h.id) : h.id, q = D ? s.get(D) : null;
+      q && (t && (h.parentId = q.parentId && f.has(q.parentId) && f.get(q.parentId) || null), h.listId = e.listId);
+    });
+    const b = r.map((h) => f.get(h) || h), y = [...g, ...m], w = E(g), k = z(e.listId, e.parentId), A = [...w.get(k) || []], _ = e.beforeId ? A.indexOf(e.beforeId) : A.length, C = _ >= 0 ? _ : A.length;
+    A.splice(C, 0, ...b), w.set(k, A), E(m).forEach((h, D) => {
+      const [, q] = D.split("::");
+      (q || "") !== "__root__" && w.set(D, [...h]);
+    });
+    const M = T(y);
+    b.forEach((h) => {
+      const D = M.get(h);
+      D && (D.parentId = e.parentId, D.listId = e.listId);
+    });
+    const R = [], P = /* @__PURE__ */ new Set(), L = (h, D) => {
+      (w.get(z(h, D)) || []).forEach((K, Z) => {
+        const H = M.get(K);
+        !H || P.has(K) || (P.add(K), H.listId = h, H.parentId = D, H.order = Z, R.push(H), L(h, K));
+      });
+    };
+    this._lists.forEach((h) => L(h.id, null)), y.forEach((h) => {
+      P.has(h.id) || (h.parentId = null, R.push(h));
+    }), this._dragState && (this._dragState.committed = !0), this._items = R.map($), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage();
+    const G = [...b], p = [...this._selection];
+    this._selection = G, this._focusedId = G[0] || null, this._pendingFocusId = this._focusedId, this._syncAttributesFromState();
+    const x = J(this._items);
+    this._persistSnapshot(x);
+    const F = r.map((h) => s.get(h)).filter((h) => !!h), O = t ? "clone" : e.mode === "inside" ? "nest" : F.some((h) => h.listId !== e.listId) ? "transfer" : "reorder", V = {
+      items: this.items,
+      lists: this.lists,
+      selection: [...G],
+      previousSelection: p,
+      movedIds: [...b],
+      source: i,
+      operation: O,
+      persistence: x
+    };
+    this.dispatchEvent(new CustomEvent("change", {
+      detail: V,
+      bubbles: !0,
+      composed: !0
+    })), this.dispatchEvent(new CustomEvent("persist-request", {
+      detail: V,
+      bubbles: !0,
+      composed: !0
+    })), this._announce(this._messageForMove(O, b.length, e)), this.requestRender();
+  }
+  _syncAttributesFromState() {
+    const e = le(this._lists), r = de(this._items), t = j(this._selection);
+    this._lastListsAttr = e, this._lastItemsAttr = r, this._lastSelectionAttr = t, this._suppressAttributeRender = !0;
+    try {
+      this.setAttribute("lists", e), this.setAttribute("items", r), this._selection.length ? this.setAttribute("selection", t) : this.removeAttribute("selection");
+    } finally {
+      this._suppressAttributeRender = !1;
+    }
+  }
+  _cloneSubtreeItem(e, r) {
+    const i = `copy-${this._cloneSeed++}`, o = `${e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id}--${i}`;
+    return {
+      ...e,
+      id: o,
+      label: r[0] === e.id ? `${e.label} copy` : e.label
+    };
+  }
+  _messageForMove(e, r, t) {
+    const i = this._lists.find((o) => o.id === t.listId), s = (i == null ? void 0 : i.label) || t.listId;
+    return e === "clone" ? `${r === 1 ? "Item copied" : `${r} items copied`} into ${s}.` : e === "nest" ? `${r === 1 ? "Item nested" : `${r} items nested`} in ${s}.` : e === "transfer" ? `${r === 1 ? "Item moved" : `${r} items moved`} to ${s}.` : `${r === 1 ? "Item reordered" : `${r} items reordered`} in ${s}.`;
+  }
+  _persistSnapshot(e) {
+    const r = this.getAttribute("persist-key");
+    if (r)
+      try {
+        window.localStorage.setItem(r, JSON.stringify(e));
+      } catch {
+      }
+  }
+  _announce(e) {
+    this._liveMessage = e, this._applyLiveMessage();
+  }
+  _cancelDrag(e) {
+    this._dragState && (this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._items = this._dragState.snapshot.map($), this._dragState = null, this._pointerGesture = null, this._removeDragImage(), e && this._announce("Drag cancelled."), this._syncAttributesFromState(), this.requestRender());
+  }
+  _applyDragImage(e, r) {
+    this._removeDragImage();
+    const t = document.createElement("div");
+    t.textContent = r === 1 ? "Dragging item" : `Dragging ${r} items`, t.style.position = "fixed", t.style.top = "-999px", t.style.left = "-999px", t.style.padding = "8px 12px", t.style.borderRadius = "999px", t.style.background = "rgba(15, 23, 42, 0.92)", t.style.color = "#f8fafc", t.style.font = "600 12px/1 Inter, sans-serif", t.style.pointerEvents = "none", document.body.appendChild(t), e.setDragImage(t, 12, 12), this._dragImage = t;
+  }
+  _removeDragImage() {
+    var e;
+    (e = this._dragImage) == null || e.remove(), this._dragImage = null;
+  }
+  _removeDragPreviewOverlay() {
+    var e;
+    (e = this._dragPreviewOverlay) == null || e.remove(), this._dragPreviewOverlay = null;
+  }
+  _applyPointerPreview(e, r, t, i) {
+    this._removeDragImage();
+    const s = document.createElement("div");
+    s.textContent = i ? t === 1 ? "Copying item" : `Copying ${t} items` : t === 1 ? "Moving item" : `Moving ${t} items`, s.style.position = "fixed", s.style.top = "0", s.style.left = "0", s.style.zIndex = "2147483647", s.style.padding = "8px 12px", s.style.borderRadius = "999px", s.style.background = "rgba(15, 23, 42, 0.92)", s.style.color = "#f8fafc", s.style.font = "600 12px/1 Inter, sans-serif", s.style.pointerEvents = "none", s.style.boxShadow = "0 12px 28px rgba(15, 23, 42, 0.22)", document.body.appendChild(s), this._dragImage = s, this._movePointerPreview(e, r);
+  }
+  _movePointerPreview(e, r) {
+    this._dragImage && (this._dragImage.style.transform = `translate(${Math.round(e + 14)}px, ${Math.round(r + 14)}px)`);
+  }
+  _keyboardDropTargets() {
+    const e = T(this._items), r = E(this._items), t = [], i = (s, o) => {
+      var l;
+      (r.get(z(s, o)) || []).forEach((n) => {
+        const d = e.get(n);
+        !d || d.hidden || (t.push({
+          listId: s,
+          parentId: o,
+          beforeId: n,
+          mode: "before",
+          label: `Before ${d.label}`
+        }), this.getAttribute("allow-nesting") !== "false" && t.push({
+          listId: s,
+          parentId: n,
+          beforeId: null,
+          mode: "inside",
+          label: `Nest inside ${d.label}`
+        }), i(s, n));
+      }), t.push({
+        listId: s,
+        parentId: o,
+        beforeId: null,
+        mode: "before",
+        label: o ? "After children" : `End of ${((l = this._lists.find((n) => n.id === s)) == null ? void 0 : l.label) || s}`
+      });
+    };
+    return this._lists.forEach((s) => i(s.id, null)), t.filter((s) => {
+      var o;
+      return this._canDrop(s, ((o = this._dragState) == null ? void 0 : o.movedRootIds) || []);
+    });
+  }
+  _initialKeyboardDropTarget(e) {
+    const r = this._items.find((t) => t.id === e);
+    return r ? {
+      listId: r.listId,
+      parentId: r.parentId,
+      beforeId: e,
+      mode: "before"
+    } : null;
+  }
+  _moveKeyboardDropTarget(e) {
+    if (!this._dragState)
+      return;
+    const r = this._keyboardDropTargets();
+    if (!r.length)
+      return;
+    const t = Math.max(0, r.findIndex(
+      (s) => {
+        var o, a, l, n, d, c, g, m;
+        return s.listId === ((a = (o = this._dragState) == null ? void 0 : o.dropTarget) == null ? void 0 : a.listId) && s.parentId === ((n = (l = this._dragState) == null ? void 0 : l.dropTarget) == null ? void 0 : n.parentId) && s.beforeId === ((c = (d = this._dragState) == null ? void 0 : d.dropTarget) == null ? void 0 : c.beforeId) && s.mode === ((m = (g = this._dragState) == null ? void 0 : g.dropTarget) == null ? void 0 : m.mode);
+      }
+    )), i = Math.max(0, Math.min(r.length - 1, t + e));
+    this._setDropTarget(r[i], { announceLabel: r[i].label });
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-sortable") && customElements.define("ui-sortable", ce);
+export {
+  ee as E,
+  ce as U
+};