@design.estate/dees-catalog 6.6.0 → 6.7.0

package/dist_bundle/bundle.js

@@ -61239,6 +61239,247 @@ var init_plugins4 = __esm({
   }
 });
 
+// ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.demo.ts
+var demoFunc;
+var init_dees_contextmenu_demo = __esm({
+  "ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.demo.ts"() {
+    init_dist_ts26();
+    init_plugins4();
+    init_dees_contextmenu();
+    demoFunc = /* @__PURE__ */ __name(() => b2`
+<style>
+  .withMargin {
+    display: block;
+    margin: 20px;
+  }
+  .demo-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 20px;
+    min-height: 400px;
+  }
+  .demo-area {
+    padding: 40px;
+    border-radius: 8px;
+    text-align: center;
+    cursor: context-menu;
+    transition: background 0.2s;
+  }
+  .demo-area:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+</style>
+<div class="demo-container">
+  <dees-panel heading="Basic Context Menu with Nested Submenus">
+    <div class="demo-area" @contextmenu=${(eventArg) => {
+      DeesContextmenu.openContextMenuWithOptions(eventArg, [
+        {
+          name: "File",
+          iconName: "fileText",
+          action: /* @__PURE__ */ __name(async () => {
+          }, "action"),
+          // Parent items with submenus still need an action
+          submenu: [
+            { name: "New", iconName: "filePlus", shortcut: "Cmd+N", action: /* @__PURE__ */ __name(async () => console.log("New file"), "action") },
+            { name: "Open", iconName: "folderOpen", shortcut: "Cmd+O", action: /* @__PURE__ */ __name(async () => console.log("Open file"), "action") },
+            { name: "Save", iconName: "save", shortcut: "Cmd+S", action: /* @__PURE__ */ __name(async () => console.log("Save"), "action") },
+            { divider: true },
+            { name: "Export as PDF", iconName: "download", action: /* @__PURE__ */ __name(async () => console.log("Export PDF"), "action") },
+            { name: "Export as HTML", iconName: "code", action: /* @__PURE__ */ __name(async () => console.log("Export HTML"), "action") }
+          ]
+        },
+        {
+          name: "Edit",
+          iconName: "edit3",
+          action: /* @__PURE__ */ __name(async () => {
+          }, "action"),
+          // Parent items with submenus still need an action
+          submenu: [
+            { name: "Cut", iconName: "scissors", shortcut: "Cmd+X", action: /* @__PURE__ */ __name(async () => console.log("Cut"), "action") },
+            { name: "Copy", iconName: "copy", shortcut: "Cmd+C", action: /* @__PURE__ */ __name(async () => console.log("Copy"), "action") },
+            { name: "Paste", iconName: "clipboard", shortcut: "Cmd+V", action: /* @__PURE__ */ __name(async () => console.log("Paste"), "action") },
+            { divider: true },
+            { name: "Find", iconName: "search", shortcut: "Cmd+F", action: /* @__PURE__ */ __name(async () => console.log("Find"), "action") },
+            { name: "Replace", iconName: "repeat", shortcut: "Cmd+H", action: /* @__PURE__ */ __name(async () => console.log("Replace"), "action") }
+          ]
+        },
+        {
+          name: "View",
+          iconName: "eye",
+          action: /* @__PURE__ */ __name(async () => {
+          }, "action"),
+          // Parent items with submenus still need an action
+          submenu: [
+            { name: "Zoom In", iconName: "zoomIn", shortcut: "Cmd++", action: /* @__PURE__ */ __name(async () => console.log("Zoom in"), "action") },
+            { name: "Zoom Out", iconName: "zoomOut", shortcut: "Cmd+-", action: /* @__PURE__ */ __name(async () => console.log("Zoom out"), "action") },
+            { name: "Reset Zoom", iconName: "maximize2", shortcut: "Cmd+0", action: /* @__PURE__ */ __name(async () => console.log("Reset zoom"), "action") },
+            { divider: true },
+            { name: "Full Screen", iconName: "maximize", shortcut: "F11", action: /* @__PURE__ */ __name(async () => console.log("Full screen"), "action") }
+          ]
+        },
+        { divider: true },
+        {
+          name: "Settings",
+          iconName: "settings",
+          action: /* @__PURE__ */ __name(async () => console.log("Settings"), "action")
+        },
+        {
+          name: "Help",
+          iconName: "helpCircle",
+          action: /* @__PURE__ */ __name(async () => {
+          }, "action"),
+          // Parent items with submenus still need an action
+          submenu: [
+            { name: "Documentation", iconName: "book", action: /* @__PURE__ */ __name(async () => console.log("Documentation"), "action") },
+            { name: "Keyboard Shortcuts", iconName: "keyboard", action: /* @__PURE__ */ __name(async () => console.log("Shortcuts"), "action") },
+            { divider: true },
+            { name: "About", iconName: "info", action: /* @__PURE__ */ __name(async () => console.log("About"), "action") }
+          ]
+        }
+      ]);
+    }}>
+      <h3>Right-click anywhere in this area</h3>
+      <p>A context menu with nested submenus will appear</p>
+    </div>
+  </dees-panel>
+  <dees-panel heading="Component-Specific Context Menu">
+    <dees-button style="margin: 20px;" @contextmenu=${(eventArg) => {
+      DeesContextmenu.openContextMenuWithOptions(eventArg, [
+        {
+          name: "Button Actions",
+          iconName: "mousePointer",
+          action: /* @__PURE__ */ __name(async () => {
+          }, "action"),
+          // Parent items with submenus still need an action
+          submenu: [
+            { name: "Click", iconName: "mouse", action: /* @__PURE__ */ __name(async () => console.log("Click action"), "action") },
+            { name: "Double Click", iconName: "zap", action: /* @__PURE__ */ __name(async () => console.log("Double click"), "action") },
+            { name: "Long Press", iconName: "clock", action: /* @__PURE__ */ __name(async () => console.log("Long press"), "action") }
+          ]
+        },
+        {
+          name: "Button State",
+          iconName: "toggleLeft",
+          action: /* @__PURE__ */ __name(async () => {
+          }, "action"),
+          // Parent items with submenus still need an action
+          submenu: [
+            { name: "Enable", iconName: "checkCircle", action: /* @__PURE__ */ __name(async () => console.log("Enable"), "action") },
+            { name: "Disable", iconName: "xCircle", action: /* @__PURE__ */ __name(async () => console.log("Disable"), "action") },
+            { divider: true },
+            { name: "Show", iconName: "eye", action: /* @__PURE__ */ __name(async () => console.log("Show"), "action") },
+            { name: "Hide", iconName: "eyeOff", action: /* @__PURE__ */ __name(async () => console.log("Hide"), "action") }
+          ]
+        },
+        { divider: true },
+        {
+          name: "Disabled Action",
+          iconName: "ban",
+          disabled: true,
+          action: /* @__PURE__ */ __name(async () => console.log("This should not run"), "action")
+        },
+        {
+          name: "Properties",
+          iconName: "settings",
+          action: /* @__PURE__ */ __name(async () => console.log("Button properties"), "action")
+        }
+      ]);
+    }}>Right-click on this button</dees-button>
+  </dees-panel>
+
+  <dees-panel heading="Advanced Context Menu Example">
+    <div class="demo-area" @contextmenu=${(eventArg) => {
+      DeesContextmenu.openContextMenuWithOptions(eventArg, [
+        {
+          name: "Format",
+          iconName: "type",
+          action: /* @__PURE__ */ __name(async () => {
+          }, "action"),
+          // Parent items with submenus still need an action
+          submenu: [
+            { name: "Bold", iconName: "bold", shortcut: "Cmd+B", action: /* @__PURE__ */ __name(async () => console.log("Bold"), "action") },
+            { name: "Italic", iconName: "italic", shortcut: "Cmd+I", action: /* @__PURE__ */ __name(async () => console.log("Italic"), "action") },
+            { name: "Underline", iconName: "underline", shortcut: "Cmd+U", action: /* @__PURE__ */ __name(async () => console.log("Underline"), "action") },
+            { divider: true },
+            { name: "Font Size", iconName: "type", action: /* @__PURE__ */ __name(async () => console.log("Font size menu"), "action") },
+            { name: "Font Color", iconName: "palette", action: /* @__PURE__ */ __name(async () => console.log("Font color menu"), "action") }
+          ]
+        },
+        {
+          name: "Transform",
+          iconName: "shuffle",
+          action: /* @__PURE__ */ __name(async () => {
+          }, "action"),
+          // Parent items with submenus still need an action
+          submenu: [
+            { name: "To Uppercase", iconName: "arrowUp", action: /* @__PURE__ */ __name(async () => console.log("Uppercase"), "action") },
+            { name: "To Lowercase", iconName: "arrowDown", action: /* @__PURE__ */ __name(async () => console.log("Lowercase"), "action") },
+            { name: "Capitalize", iconName: "type", action: /* @__PURE__ */ __name(async () => console.log("Capitalize"), "action") }
+          ]
+        },
+        { divider: true },
+        {
+          name: "Delete",
+          iconName: "trash2",
+          action: /* @__PURE__ */ __name(async () => console.log("Delete"), "action")
+        }
+      ]);
+    }}>
+      <h3>Advanced Nested Menu Example</h3>
+      <p>This shows deeply nested submenus and various formatting options</p>
+    </div>
+  </dees-panel>
+  
+  <dees-panel heading="Static Context Menu (Always Visible)">
+    <dees-contextmenu
+      class="withMargin"
+      .menuItems=${[
+      {
+        name: "Project",
+        iconName: "folder",
+        action: /* @__PURE__ */ __name(async () => {
+        }, "action"),
+        // Parent items with submenus still need an action
+        submenu: [
+          { name: "New Project", iconName: "folderPlus", shortcut: "Cmd+Shift+N", action: /* @__PURE__ */ __name(async () => console.log("New project"), "action") },
+          { name: "Open Project", iconName: "folderOpen", shortcut: "Cmd+Shift+O", action: /* @__PURE__ */ __name(async () => console.log("Open project"), "action") },
+          { divider: true },
+          { name: "Recent Projects", iconName: "clock", action: /* @__PURE__ */ __name(async () => {
+          }, "action"), submenu: [
+            { name: "Project Alpha", action: /* @__PURE__ */ __name(async () => console.log("Open Alpha"), "action") },
+            { name: "Project Beta", action: /* @__PURE__ */ __name(async () => console.log("Open Beta"), "action") },
+            { name: "Project Gamma", action: /* @__PURE__ */ __name(async () => console.log("Open Gamma"), "action") }
+          ] }
+        ]
+      },
+      {
+        name: "Tools",
+        iconName: "tool",
+        action: /* @__PURE__ */ __name(async () => {
+        }, "action"),
+        // Parent items with submenus still need an action
+        submenu: [
+          { name: "Terminal", iconName: "terminal", shortcut: "Cmd+T", action: /* @__PURE__ */ __name(async () => console.log("Terminal"), "action") },
+          { name: "Console", iconName: "monitor", shortcut: "Cmd+K", action: /* @__PURE__ */ __name(async () => console.log("Console"), "action") },
+          { divider: true },
+          { name: "Extensions", iconName: "package", action: /* @__PURE__ */ __name(async () => console.log("Extensions"), "action") }
+        ]
+      },
+      { divider: true },
+      {
+        name: "Preferences",
+        iconName: "sliders",
+        action: /* @__PURE__ */ __name(async () => console.log("Preferences"), "action")
+      }
+    ]}
+    ></dees-contextmenu>
+  </dees-panel>
+</div>
+`, "demoFunc");
+  }
+});
+
 // ts_web/elements/00group-overlay/dees-windowlayer/dees-windowlayer.ts
 var _visible_dec, _contentZIndex_dec, _backdropZIndex_dec, _options_dec, _a, _DeesWindowLayer_decorators, _init, _options, _backdropZIndex, _contentZIndex, _visible, _protectedElements, _protectedSelector, _DeesWindowLayer, DeesWindowLayer;
 var init_dees_windowlayer = __esm({
@@ -94849,6 +95090,400 @@ var init_dees_icon = __esm({
   }
 });
 
+// ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts
+var dees_contextmenu_exports = {};
+__export(dees_contextmenu_exports, {
+  DeesContextmenu: () => DeesContextmenu
+});
+var _menuItems_dec, _a3, _DeesContextmenu_decorators, _init3, _menuItems, _DeesContextmenu, DeesContextmenu;
+var init_dees_contextmenu = __esm({
+  "ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts"() {
+    init_plugins4();
+    init_dees_contextmenu_demo();
+    init_dist_ts26();
+    init_dist_ts25();
+    init_dees_windowlayer();
+    init_zindex();
+    init_dees_icon();
+    init_theme();
+    _DeesContextmenu_decorators = [customElement("dees-contextmenu")];
+    _DeesContextmenu = class _DeesContextmenu extends (_a3 = DeesElement, _menuItems_dec = [n5({
+      type: Array
+    })], _a3) {
+      constructor() {
+        super();
+        __privateAdd(this, _menuItems, __runInitializers(_init3, 8, this, [])), __runInitializers(_init3, 11, this);
+        __publicField(this, "windowLayer");
+        __publicField(this, "submenu", null);
+        __publicField(this, "submenuTimeout", null);
+        __publicField(this, "parentMenu", null);
+        __publicField(this, "isDestroying", false);
+        __publicField(this, "handleKeydown", /* @__PURE__ */ __name((event) => {
+          const menuItems = Array.from(this.shadowRoot.querySelectorAll(".menuitem:not(.disabled)"));
+          const currentIndex = menuItems.findIndex((item) => item.matches(":hover"));
+          switch (event.key) {
+            case "ArrowDown":
+              event.preventDefault();
+              const nextIndex = currentIndex + 1 < menuItems.length ? currentIndex + 1 : 0;
+              menuItems[nextIndex].dispatchEvent(new MouseEvent("mouseenter"));
+              break;
+            case "ArrowUp":
+              event.preventDefault();
+              const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : menuItems.length - 1;
+              menuItems[prevIndex].dispatchEvent(new MouseEvent("mouseenter"));
+              break;
+            case "Enter":
+              event.preventDefault();
+              if (currentIndex >= 0) {
+                menuItems[currentIndex].click();
+              }
+              break;
+            case "Escape":
+              event.preventDefault();
+              this.destroy();
+              break;
+          }
+        }, "handleKeydown"));
+        this.tabIndex = 0;
+      }
+      // Add a global event listener for the right-click context menu
+      static initializeGlobalListener() {
+        document.addEventListener("contextmenu", (event) => {
+          if (this.contextMenuDeactivated) {
+            return;
+          }
+          event.preventDefault();
+          _DeesContextmenu.accumulatedMenuItems = [];
+          const path2 = event.composedPath();
+          for (const element4 of path2) {
+            if (element4.getContextMenuItems) {
+              const items = element4.getContextMenuItems();
+              if (items && items.length > 0) {
+                if (_DeesContextmenu.accumulatedMenuItems.length > 0) {
+                  _DeesContextmenu.accumulatedMenuItems.push({ divider: true });
+                }
+                _DeesContextmenu.accumulatedMenuItems.push(...items);
+              }
+            }
+          }
+          _DeesContextmenu.openContextMenuWithOptions(event, _DeesContextmenu.accumulatedMenuItems);
+        });
+      }
+      // allows opening of a contextmenu with options
+      static async openContextMenuWithOptions(eventArg, menuItemsArg) {
+        if (this.contextMenuDeactivated) {
+          return;
+        }
+        eventArg.preventDefault();
+        eventArg.stopPropagation();
+        const contextMenu = new _DeesContextmenu();
+        contextMenu.style.position = "fixed";
+        contextMenu.style.zIndex = String(zIndexLayers.overlay.contextMenu);
+        contextMenu.style.visibility = "hidden";
+        contextMenu.menuItems = menuItemsArg;
+        contextMenu.windowLayer = await DeesWindowLayer.createAndShow({ dimmed: false, dismissOnOutsidePress: true });
+        contextMenu.windowLayer.protectedSelector = "dees-contextmenu";
+        contextMenu.windowLayer.addEventListener("click", async (event) => {
+          const clickedElement = event.target;
+          const isContextMenu = clickedElement.closest("dees-contextmenu");
+          if (!isContextMenu) {
+            await contextMenu.destroy();
+          }
+        });
+        document.body.append(contextMenu);
+        await domtools_pluginexports_exports.smartdelay.delayFor(0);
+        const rect = contextMenu.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        let top = eventArg.clientY;
+        let left = eventArg.clientX;
+        if (left + rect.width > windowWidth) {
+          left = windowWidth - rect.width - 10;
+        }
+        if (top + rect.height > windowHeight) {
+          top = windowHeight - rect.height - 10;
+        }
+        if (left < 10) left = 10;
+        if (top < 10) top = 10;
+        contextMenu.style.top = `${top}px`;
+        contextMenu.style.left = `${left}px`;
+        contextMenu.style.visibility = "visible";
+        return contextMenu;
+      }
+      render() {
+        return b2`
+      <div class="mainbox">
+        ${this.menuItems.map((menuItemArg) => {
+          if ("divider" in menuItemArg && menuItemArg.divider) {
+            return b2`<div class="menu-divider"></div>`;
+          }
+          const menuItem = menuItemArg;
+          const hasSubmenu = menuItem.submenu && menuItem.submenu.length > 0;
+          return b2`
+            <div 
+              class="menuitem ${menuItem.disabled ? "disabled" : ""} ${hasSubmenu ? "has-submenu" : ""}" 
+              @click=${() => !menuItem.disabled && !hasSubmenu && this.handleClick(menuItem)}
+              @mouseenter=${() => this.handleMenuItemHover(menuItem, hasSubmenu)}
+              @mouseleave=${() => this.handleMenuItemLeave()}
+            >
+              ${menuItem.iconName ? b2`
+                <dees-icon .icon="${menuItem.iconName}"></dees-icon>
+              ` : ""}
+              <span class="menuitem-text">${menuItem.name}</span>
+              ${menuItem.shortcut && !hasSubmenu ? b2`
+                <span class="menuitem-shortcut">${menuItem.shortcut}</span>
+              ` : ""}
+            </div>
+          `;
+        })}
+        ${this.menuItems.length === 0 ? b2`
+            <div class="menuitem" @click=${() => {
+          _DeesContextmenu.contextMenuDeactivated = true;
+          this.destroy();
+        }}>
+              <dees-icon .icon="lucide:x"></dees-icon>
+              <span class="menuitem-text">Allow native context</span>
+            </div>
+        ` : b2``}
+      </div>
+    `;
+      }
+      async firstUpdated() {
+        this.focus();
+        this.addEventListener("keydown", this.handleKeydown);
+      }
+      async handleClick(menuItem) {
+        menuItem.action();
+        await this.destroyAll();
+      }
+      async handleMenuItemHover(menuItem, hasSubmenu) {
+        if (this.submenuTimeout) {
+          clearTimeout(this.submenuTimeout);
+          this.submenuTimeout = null;
+        }
+        if (this.submenu) {
+          await this.hideSubmenu();
+        }
+        if (hasSubmenu && menuItem.submenu) {
+          this.submenuTimeout = setTimeout(() => {
+            this.showSubmenu(menuItem);
+          }, 200);
+        }
+      }
+      handleMenuItemLeave() {
+        if (this.submenuTimeout) {
+          clearTimeout(this.submenuTimeout);
+        }
+        this.submenuTimeout = setTimeout(() => {
+          if (this.submenu && !this.submenu.matches(":hover")) {
+            this.hideSubmenu();
+          }
+        }, 300);
+      }
+      async showSubmenu(menuItem) {
+        if (!menuItem.submenu || menuItem.submenu.length === 0) return;
+        const menuItems = Array.from(this.shadowRoot.querySelectorAll(".menuitem"));
+        const menuItemElement = menuItems.find((el) => el.querySelector(".menuitem-text")?.textContent === menuItem.name);
+        if (!menuItemElement) return;
+        this.submenu = new _DeesContextmenu();
+        this.submenu.menuItems = menuItem.submenu;
+        this.submenu.parentMenu = this;
+        this.submenu.style.position = "fixed";
+        this.submenu.style.zIndex = String(parseInt(this.style.zIndex) + 1);
+        this.submenu.style.opacity = "0";
+        this.submenu.style.transform = "scale(0.95)";
+        document.body.append(this.submenu);
+        await domtools_pluginexports_exports.smartdelay.delayFor(0);
+        const itemRect = menuItemElement.getBoundingClientRect();
+        const menuRect = this.getBoundingClientRect();
+        const submenuRect = this.submenu.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        let left = menuRect.right - 4;
+        let top = itemRect.top;
+        if (left + submenuRect.width > windowWidth - 10) {
+          left = menuRect.left - submenuRect.width + 4;
+        }
+        if (top + submenuRect.height > window.innerHeight - 10) {
+          top = window.innerHeight - submenuRect.height - 10;
+        }
+        this.submenu.style.left = `${left}px`;
+        this.submenu.style.top = `${top}px`;
+        await domtools_pluginexports_exports.smartdelay.delayFor(0);
+        this.submenu.style.opacity = "1";
+        this.submenu.style.transform = "scale(1)";
+        this.submenu.addEventListener("mouseenter", () => {
+          if (this.submenuTimeout) {
+            clearTimeout(this.submenuTimeout);
+            this.submenuTimeout = null;
+          }
+        });
+        this.submenu.addEventListener("mouseleave", () => {
+          this.handleMenuItemLeave();
+        });
+      }
+      async hideSubmenu() {
+        if (!this.submenu) return;
+        await this.submenu.destroy();
+        this.submenu = null;
+      }
+      async destroy() {
+        if (this.isDestroying) {
+          return;
+        }
+        this.isDestroying = true;
+        if (this.submenuTimeout) {
+          clearTimeout(this.submenuTimeout);
+          this.submenuTimeout = null;
+        }
+        if (this.submenu) {
+          await this.submenu.destroy();
+          this.submenu = null;
+        }
+        if (this.windowLayer && !this.parentMenu) {
+          this.windowLayer.destroy();
+        }
+        this.style.visibility = "hidden";
+        if (this.parentElement) {
+          this.parentElement.removeChild(this);
+        }
+      }
+      /**
+       * Destroys this menu and all parent menus in the chain
+       */
+      async destroyAll() {
+        let rootMenu = this;
+        while (rootMenu.parentMenu) {
+          rootMenu = rootMenu.parentMenu;
+        }
+        await rootMenu.destroy();
+      }
+    };
+    _init3 = __decoratorStart(_a3);
+    _menuItems = new WeakMap();
+    __decorateElement(_init3, 4, "menuItems", _menuItems_dec, _DeesContextmenu, _menuItems);
+    _DeesContextmenu = __decorateElement(_init3, 0, "DeesContextmenu", _DeesContextmenu_decorators, _DeesContextmenu);
+    __name(_DeesContextmenu, "DeesContextmenu");
+    // DEMO
+    __publicField(_DeesContextmenu, "demo", demoFunc);
+    __publicField(_DeesContextmenu, "demoGroups", ["Overlay"]);
+    // STATIC
+    // This will store all the accumulated menu items
+    __publicField(_DeesContextmenu, "contextMenuDeactivated", false);
+    __publicField(_DeesContextmenu, "accumulatedMenuItems", []);
+    /**
+     * STATIC STYLES
+     */
+    __publicField(_DeesContextmenu, "styles", [
+      themeDefaultStyles,
+      cssManager.defaultStyles,
+      i`
+      :host {
+        display: block;
+        transition:
+          opacity var(--dees-transition-default) var(--dees-ease-standard),
+          transform var(--dees-transition-default) var(--dees-ease-standard),
+          left var(--dees-transition-default) var(--dees-ease-spring),
+          top var(--dees-transition-default) var(--dees-ease-spring);
+        outline: none;
+      }
+
+      .mainbox {
+        min-width: 200px;
+        max-width: 280px;
+        background: var(--dees-material-regular-bg);
+        -webkit-backdrop-filter: var(--dees-material-regular-filter);
+        backdrop-filter: var(--dees-material-regular-filter);
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: var(--dees-radius-lg);
+        box-shadow: var(--dees-shadow-lg);
+        user-select: none;
+        padding: var(--dees-spacing-xs) 0;
+        font-size: var(--dees-font-control-size-sm);
+        color: var(--dees-color-text-primary);
+      }
+
+      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+        .mainbox {
+          background: var(--dees-material-regular-bg-opaque);
+        }
+      }
+
+      @media (prefers-reduced-transparency: reduce) {
+        .mainbox {
+          background: var(--dees-material-regular-bg-opaque);
+          -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+        }
+      }
+
+      .menuitem {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        cursor: default;
+        transition: background var(--dees-transition-fast) var(--dees-ease-standard);
+        line-height: 1;
+        position: relative;
+      }
+
+      .menuitem:hover {
+        background: var(--dees-color-active);
+      }
+      
+      .menuitem.has-submenu::after {
+        content: '›';
+        position: absolute;
+        right: var(--dees-spacing-sm);
+        font-size: 16px;
+        color: var(--dees-color-text-secondary);
+      }
+
+      .menuitem:active:not(.has-submenu) {
+        background: var(--dees-color-pressed);
+      }
+      
+      .menuitem.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .menuitem dees-icon {
+        font-size: 14px;
+        color: var(--dees-color-text-secondary);
+      }
+
+      .menuitem-text {
+        flex: 1;
+      }
+
+      .menuitem-shortcut {
+        font-size: var(--dees-font-caption2-size);
+        color: var(--dees-color-text-secondary);
+        margin-left: auto;
+      }
+
+      .menu-divider {
+        height: 1px;
+        background: var(--dees-color-border-default);
+        margin: var(--dees-spacing-xs) 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host,
+        .menuitem {
+          transition: none;
+        }
+      }
+    `
+    ]);
+    __runInitializers(_init3, 1, _DeesContextmenu);
+    DeesContextmenu = _DeesContextmenu;
+    DeesContextmenu.initializeGlobalListener();
+  }
+});
+
 // ts_web/elements/00colors.ts
 var colors_exports = {};
 __export(colors_exports, {
@@ -121568,626 +122203,6 @@ var init_dees_workspace_terminal = __esm({
   }
 });
 
-// ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.demo.ts
-init_dist_ts26();
-init_plugins4();
-var demoFunc = /* @__PURE__ */ __name(() => b2`
-<style>
-  .withMargin {
-    display: block;
-    margin: 20px;
-  }
-  .demo-container {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px;
-    min-height: 400px;
-  }
-  .demo-area {
-    padding: 40px;
-    border-radius: 8px;
-    text-align: center;
-    cursor: context-menu;
-    transition: background 0.2s;
-  }
-  .demo-area:hover {
-    background: rgba(0, 0, 0, 0.02);
-  }
-</style>
-<div class="demo-container">
-  <dees-panel heading="Basic Context Menu with Nested Submenus">
-    <div class="demo-area" @contextmenu=${(eventArg) => {
-  DeesContextmenu.openContextMenuWithOptions(eventArg, [
-    {
-      name: "File",
-      iconName: "fileText",
-      action: /* @__PURE__ */ __name(async () => {
-      }, "action"),
-      // Parent items with submenus still need an action
-      submenu: [
-        { name: "New", iconName: "filePlus", shortcut: "Cmd+N", action: /* @__PURE__ */ __name(async () => console.log("New file"), "action") },
-        { name: "Open", iconName: "folderOpen", shortcut: "Cmd+O", action: /* @__PURE__ */ __name(async () => console.log("Open file"), "action") },
-        { name: "Save", iconName: "save", shortcut: "Cmd+S", action: /* @__PURE__ */ __name(async () => console.log("Save"), "action") },
-        { divider: true },
-        { name: "Export as PDF", iconName: "download", action: /* @__PURE__ */ __name(async () => console.log("Export PDF"), "action") },
-        { name: "Export as HTML", iconName: "code", action: /* @__PURE__ */ __name(async () => console.log("Export HTML"), "action") }
-      ]
-    },
-    {
-      name: "Edit",
-      iconName: "edit3",
-      action: /* @__PURE__ */ __name(async () => {
-      }, "action"),
-      // Parent items with submenus still need an action
-      submenu: [
-        { name: "Cut", iconName: "scissors", shortcut: "Cmd+X", action: /* @__PURE__ */ __name(async () => console.log("Cut"), "action") },
-        { name: "Copy", iconName: "copy", shortcut: "Cmd+C", action: /* @__PURE__ */ __name(async () => console.log("Copy"), "action") },
-        { name: "Paste", iconName: "clipboard", shortcut: "Cmd+V", action: /* @__PURE__ */ __name(async () => console.log("Paste"), "action") },
-        { divider: true },
-        { name: "Find", iconName: "search", shortcut: "Cmd+F", action: /* @__PURE__ */ __name(async () => console.log("Find"), "action") },
-        { name: "Replace", iconName: "repeat", shortcut: "Cmd+H", action: /* @__PURE__ */ __name(async () => console.log("Replace"), "action") }
-      ]
-    },
-    {
-      name: "View",
-      iconName: "eye",
-      action: /* @__PURE__ */ __name(async () => {
-      }, "action"),
-      // Parent items with submenus still need an action
-      submenu: [
-        { name: "Zoom In", iconName: "zoomIn", shortcut: "Cmd++", action: /* @__PURE__ */ __name(async () => console.log("Zoom in"), "action") },
-        { name: "Zoom Out", iconName: "zoomOut", shortcut: "Cmd+-", action: /* @__PURE__ */ __name(async () => console.log("Zoom out"), "action") },
-        { name: "Reset Zoom", iconName: "maximize2", shortcut: "Cmd+0", action: /* @__PURE__ */ __name(async () => console.log("Reset zoom"), "action") },
-        { divider: true },
-        { name: "Full Screen", iconName: "maximize", shortcut: "F11", action: /* @__PURE__ */ __name(async () => console.log("Full screen"), "action") }
-      ]
-    },
-    { divider: true },
-    {
-      name: "Settings",
-      iconName: "settings",
-      action: /* @__PURE__ */ __name(async () => console.log("Settings"), "action")
-    },
-    {
-      name: "Help",
-      iconName: "helpCircle",
-      action: /* @__PURE__ */ __name(async () => {
-      }, "action"),
-      // Parent items with submenus still need an action
-      submenu: [
-        { name: "Documentation", iconName: "book", action: /* @__PURE__ */ __name(async () => console.log("Documentation"), "action") },
-        { name: "Keyboard Shortcuts", iconName: "keyboard", action: /* @__PURE__ */ __name(async () => console.log("Shortcuts"), "action") },
-        { divider: true },
-        { name: "About", iconName: "info", action: /* @__PURE__ */ __name(async () => console.log("About"), "action") }
-      ]
-    }
-  ]);
-}}>
-      <h3>Right-click anywhere in this area</h3>
-      <p>A context menu with nested submenus will appear</p>
-    </div>
-  </dees-panel>
-  <dees-panel heading="Component-Specific Context Menu">
-    <dees-button style="margin: 20px;" @contextmenu=${(eventArg) => {
-  DeesContextmenu.openContextMenuWithOptions(eventArg, [
-    {
-      name: "Button Actions",
-      iconName: "mousePointer",
-      action: /* @__PURE__ */ __name(async () => {
-      }, "action"),
-      // Parent items with submenus still need an action
-      submenu: [
-        { name: "Click", iconName: "mouse", action: /* @__PURE__ */ __name(async () => console.log("Click action"), "action") },
-        { name: "Double Click", iconName: "zap", action: /* @__PURE__ */ __name(async () => console.log("Double click"), "action") },
-        { name: "Long Press", iconName: "clock", action: /* @__PURE__ */ __name(async () => console.log("Long press"), "action") }
-      ]
-    },
-    {
-      name: "Button State",
-      iconName: "toggleLeft",
-      action: /* @__PURE__ */ __name(async () => {
-      }, "action"),
-      // Parent items with submenus still need an action
-      submenu: [
-        { name: "Enable", iconName: "checkCircle", action: /* @__PURE__ */ __name(async () => console.log("Enable"), "action") },
-        { name: "Disable", iconName: "xCircle", action: /* @__PURE__ */ __name(async () => console.log("Disable"), "action") },
-        { divider: true },
-        { name: "Show", iconName: "eye", action: /* @__PURE__ */ __name(async () => console.log("Show"), "action") },
-        { name: "Hide", iconName: "eyeOff", action: /* @__PURE__ */ __name(async () => console.log("Hide"), "action") }
-      ]
-    },
-    { divider: true },
-    {
-      name: "Disabled Action",
-      iconName: "ban",
-      disabled: true,
-      action: /* @__PURE__ */ __name(async () => console.log("This should not run"), "action")
-    },
-    {
-      name: "Properties",
-      iconName: "settings",
-      action: /* @__PURE__ */ __name(async () => console.log("Button properties"), "action")
-    }
-  ]);
-}}>Right-click on this button</dees-button>
-  </dees-panel>
-
-  <dees-panel heading="Advanced Context Menu Example">
-    <div class="demo-area" @contextmenu=${(eventArg) => {
-  DeesContextmenu.openContextMenuWithOptions(eventArg, [
-    {
-      name: "Format",
-      iconName: "type",
-      action: /* @__PURE__ */ __name(async () => {
-      }, "action"),
-      // Parent items with submenus still need an action
-      submenu: [
-        { name: "Bold", iconName: "bold", shortcut: "Cmd+B", action: /* @__PURE__ */ __name(async () => console.log("Bold"), "action") },
-        { name: "Italic", iconName: "italic", shortcut: "Cmd+I", action: /* @__PURE__ */ __name(async () => console.log("Italic"), "action") },
-        { name: "Underline", iconName: "underline", shortcut: "Cmd+U", action: /* @__PURE__ */ __name(async () => console.log("Underline"), "action") },
-        { divider: true },
-        { name: "Font Size", iconName: "type", action: /* @__PURE__ */ __name(async () => console.log("Font size menu"), "action") },
-        { name: "Font Color", iconName: "palette", action: /* @__PURE__ */ __name(async () => console.log("Font color menu"), "action") }
-      ]
-    },
-    {
-      name: "Transform",
-      iconName: "shuffle",
-      action: /* @__PURE__ */ __name(async () => {
-      }, "action"),
-      // Parent items with submenus still need an action
-      submenu: [
-        { name: "To Uppercase", iconName: "arrowUp", action: /* @__PURE__ */ __name(async () => console.log("Uppercase"), "action") },
-        { name: "To Lowercase", iconName: "arrowDown", action: /* @__PURE__ */ __name(async () => console.log("Lowercase"), "action") },
-        { name: "Capitalize", iconName: "type", action: /* @__PURE__ */ __name(async () => console.log("Capitalize"), "action") }
-      ]
-    },
-    { divider: true },
-    {
-      name: "Delete",
-      iconName: "trash2",
-      action: /* @__PURE__ */ __name(async () => console.log("Delete"), "action")
-    }
-  ]);
-}}>
-      <h3>Advanced Nested Menu Example</h3>
-      <p>This shows deeply nested submenus and various formatting options</p>
-    </div>
-  </dees-panel>
-  
-  <dees-panel heading="Static Context Menu (Always Visible)">
-    <dees-contextmenu
-      class="withMargin"
-      .menuItems=${[
-  {
-    name: "Project",
-    iconName: "folder",
-    action: /* @__PURE__ */ __name(async () => {
-    }, "action"),
-    // Parent items with submenus still need an action
-    submenu: [
-      { name: "New Project", iconName: "folderPlus", shortcut: "Cmd+Shift+N", action: /* @__PURE__ */ __name(async () => console.log("New project"), "action") },
-      { name: "Open Project", iconName: "folderOpen", shortcut: "Cmd+Shift+O", action: /* @__PURE__ */ __name(async () => console.log("Open project"), "action") },
-      { divider: true },
-      { name: "Recent Projects", iconName: "clock", action: /* @__PURE__ */ __name(async () => {
-      }, "action"), submenu: [
-        { name: "Project Alpha", action: /* @__PURE__ */ __name(async () => console.log("Open Alpha"), "action") },
-        { name: "Project Beta", action: /* @__PURE__ */ __name(async () => console.log("Open Beta"), "action") },
-        { name: "Project Gamma", action: /* @__PURE__ */ __name(async () => console.log("Open Gamma"), "action") }
-      ] }
-    ]
-  },
-  {
-    name: "Tools",
-    iconName: "tool",
-    action: /* @__PURE__ */ __name(async () => {
-    }, "action"),
-    // Parent items with submenus still need an action
-    submenu: [
-      { name: "Terminal", iconName: "terminal", shortcut: "Cmd+T", action: /* @__PURE__ */ __name(async () => console.log("Terminal"), "action") },
-      { name: "Console", iconName: "monitor", shortcut: "Cmd+K", action: /* @__PURE__ */ __name(async () => console.log("Console"), "action") },
-      { divider: true },
-      { name: "Extensions", iconName: "package", action: /* @__PURE__ */ __name(async () => console.log("Extensions"), "action") }
-    ]
-  },
-  { divider: true },
-  {
-    name: "Preferences",
-    iconName: "sliders",
-    action: /* @__PURE__ */ __name(async () => console.log("Preferences"), "action")
-  }
-]}
-    ></dees-contextmenu>
-  </dees-panel>
-</div>
-`, "demoFunc");
-
-// ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts
-init_plugins4();
-init_dist_ts26();
-init_dist_ts25();
-init_dees_windowlayer();
-init_zindex();
-init_dees_icon();
-init_theme();
-var _menuItems_dec, _a3, _DeesContextmenu_decorators, _init3, _menuItems;
-_DeesContextmenu_decorators = [customElement("dees-contextmenu")];
-var _DeesContextmenu = class _DeesContextmenu extends (_a3 = DeesElement, _menuItems_dec = [n5({
-  type: Array
-})], _a3) {
-  constructor() {
-    super();
-    __privateAdd(this, _menuItems, __runInitializers(_init3, 8, this, [])), __runInitializers(_init3, 11, this);
-    __publicField(this, "windowLayer");
-    __publicField(this, "submenu", null);
-    __publicField(this, "submenuTimeout", null);
-    __publicField(this, "parentMenu", null);
-    __publicField(this, "isDestroying", false);
-    __publicField(this, "handleKeydown", /* @__PURE__ */ __name((event) => {
-      const menuItems = Array.from(this.shadowRoot.querySelectorAll(".menuitem:not(.disabled)"));
-      const currentIndex = menuItems.findIndex((item) => item.matches(":hover"));
-      switch (event.key) {
-        case "ArrowDown":
-          event.preventDefault();
-          const nextIndex = currentIndex + 1 < menuItems.length ? currentIndex + 1 : 0;
-          menuItems[nextIndex].dispatchEvent(new MouseEvent("mouseenter"));
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : menuItems.length - 1;
-          menuItems[prevIndex].dispatchEvent(new MouseEvent("mouseenter"));
-          break;
-        case "Enter":
-          event.preventDefault();
-          if (currentIndex >= 0) {
-            menuItems[currentIndex].click();
-          }
-          break;
-        case "Escape":
-          event.preventDefault();
-          this.destroy();
-          break;
-      }
-    }, "handleKeydown"));
-    this.tabIndex = 0;
-  }
-  // Add a global event listener for the right-click context menu
-  static initializeGlobalListener() {
-    document.addEventListener("contextmenu", (event) => {
-      if (this.contextMenuDeactivated) {
-        return;
-      }
-      event.preventDefault();
-      _DeesContextmenu.accumulatedMenuItems = [];
-      const path2 = event.composedPath();
-      for (const element4 of path2) {
-        if (element4.getContextMenuItems) {
-          const items = element4.getContextMenuItems();
-          if (items && items.length > 0) {
-            if (_DeesContextmenu.accumulatedMenuItems.length > 0) {
-              _DeesContextmenu.accumulatedMenuItems.push({ divider: true });
-            }
-            _DeesContextmenu.accumulatedMenuItems.push(...items);
-          }
-        }
-      }
-      _DeesContextmenu.openContextMenuWithOptions(event, _DeesContextmenu.accumulatedMenuItems);
-    });
-  }
-  // allows opening of a contextmenu with options
-  static async openContextMenuWithOptions(eventArg, menuItemsArg) {
-    if (this.contextMenuDeactivated) {
-      return;
-    }
-    eventArg.preventDefault();
-    eventArg.stopPropagation();
-    const contextMenu = new _DeesContextmenu();
-    contextMenu.style.position = "fixed";
-    contextMenu.style.zIndex = String(zIndexLayers.overlay.contextMenu);
-    contextMenu.style.visibility = "hidden";
-    contextMenu.menuItems = menuItemsArg;
-    contextMenu.windowLayer = await DeesWindowLayer.createAndShow({ dimmed: false, dismissOnOutsidePress: true });
-    contextMenu.windowLayer.protectedSelector = "dees-contextmenu";
-    contextMenu.windowLayer.addEventListener("click", async (event) => {
-      const clickedElement = event.target;
-      const isContextMenu = clickedElement.closest("dees-contextmenu");
-      if (!isContextMenu) {
-        await contextMenu.destroy();
-      }
-    });
-    document.body.append(contextMenu);
-    await domtools_pluginexports_exports.smartdelay.delayFor(0);
-    const rect = contextMenu.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    let top = eventArg.clientY;
-    let left = eventArg.clientX;
-    if (left + rect.width > windowWidth) {
-      left = windowWidth - rect.width - 10;
-    }
-    if (top + rect.height > windowHeight) {
-      top = windowHeight - rect.height - 10;
-    }
-    if (left < 10) left = 10;
-    if (top < 10) top = 10;
-    contextMenu.style.top = `${top}px`;
-    contextMenu.style.left = `${left}px`;
-    contextMenu.style.visibility = "visible";
-    return contextMenu;
-  }
-  render() {
-    return b2`
-      <div class="mainbox">
-        ${this.menuItems.map((menuItemArg) => {
-      if ("divider" in menuItemArg && menuItemArg.divider) {
-        return b2`<div class="menu-divider"></div>`;
-      }
-      const menuItem = menuItemArg;
-      const hasSubmenu = menuItem.submenu && menuItem.submenu.length > 0;
-      return b2`
-            <div 
-              class="menuitem ${menuItem.disabled ? "disabled" : ""} ${hasSubmenu ? "has-submenu" : ""}" 
-              @click=${() => !menuItem.disabled && !hasSubmenu && this.handleClick(menuItem)}
-              @mouseenter=${() => this.handleMenuItemHover(menuItem, hasSubmenu)}
-              @mouseleave=${() => this.handleMenuItemLeave()}
-            >
-              ${menuItem.iconName ? b2`
-                <dees-icon .icon="${menuItem.iconName}"></dees-icon>
-              ` : ""}
-              <span class="menuitem-text">${menuItem.name}</span>
-              ${menuItem.shortcut && !hasSubmenu ? b2`
-                <span class="menuitem-shortcut">${menuItem.shortcut}</span>
-              ` : ""}
-            </div>
-          `;
-    })}
-        ${this.menuItems.length === 0 ? b2`
-            <div class="menuitem" @click=${() => {
-      _DeesContextmenu.contextMenuDeactivated = true;
-      this.destroy();
-    }}>
-              <dees-icon .icon="lucide:x"></dees-icon>
-              <span class="menuitem-text">Allow native context</span>
-            </div>
-        ` : b2``}
-      </div>
-    `;
-  }
-  async firstUpdated() {
-    this.focus();
-    this.addEventListener("keydown", this.handleKeydown);
-  }
-  async handleClick(menuItem) {
-    menuItem.action();
-    await this.destroyAll();
-  }
-  async handleMenuItemHover(menuItem, hasSubmenu) {
-    if (this.submenuTimeout) {
-      clearTimeout(this.submenuTimeout);
-      this.submenuTimeout = null;
-    }
-    if (this.submenu) {
-      await this.hideSubmenu();
-    }
-    if (hasSubmenu && menuItem.submenu) {
-      this.submenuTimeout = setTimeout(() => {
-        this.showSubmenu(menuItem);
-      }, 200);
-    }
-  }
-  handleMenuItemLeave() {
-    if (this.submenuTimeout) {
-      clearTimeout(this.submenuTimeout);
-    }
-    this.submenuTimeout = setTimeout(() => {
-      if (this.submenu && !this.submenu.matches(":hover")) {
-        this.hideSubmenu();
-      }
-    }, 300);
-  }
-  async showSubmenu(menuItem) {
-    if (!menuItem.submenu || menuItem.submenu.length === 0) return;
-    const menuItems = Array.from(this.shadowRoot.querySelectorAll(".menuitem"));
-    const menuItemElement = menuItems.find((el) => el.querySelector(".menuitem-text")?.textContent === menuItem.name);
-    if (!menuItemElement) return;
-    this.submenu = new _DeesContextmenu();
-    this.submenu.menuItems = menuItem.submenu;
-    this.submenu.parentMenu = this;
-    this.submenu.style.position = "fixed";
-    this.submenu.style.zIndex = String(parseInt(this.style.zIndex) + 1);
-    this.submenu.style.opacity = "0";
-    this.submenu.style.transform = "scale(0.95)";
-    document.body.append(this.submenu);
-    await domtools_pluginexports_exports.smartdelay.delayFor(0);
-    const itemRect = menuItemElement.getBoundingClientRect();
-    const menuRect = this.getBoundingClientRect();
-    const submenuRect = this.submenu.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    let left = menuRect.right - 4;
-    let top = itemRect.top;
-    if (left + submenuRect.width > windowWidth - 10) {
-      left = menuRect.left - submenuRect.width + 4;
-    }
-    if (top + submenuRect.height > window.innerHeight - 10) {
-      top = window.innerHeight - submenuRect.height - 10;
-    }
-    this.submenu.style.left = `${left}px`;
-    this.submenu.style.top = `${top}px`;
-    await domtools_pluginexports_exports.smartdelay.delayFor(0);
-    this.submenu.style.opacity = "1";
-    this.submenu.style.transform = "scale(1)";
-    this.submenu.addEventListener("mouseenter", () => {
-      if (this.submenuTimeout) {
-        clearTimeout(this.submenuTimeout);
-        this.submenuTimeout = null;
-      }
-    });
-    this.submenu.addEventListener("mouseleave", () => {
-      this.handleMenuItemLeave();
-    });
-  }
-  async hideSubmenu() {
-    if (!this.submenu) return;
-    await this.submenu.destroy();
-    this.submenu = null;
-  }
-  async destroy() {
-    if (this.isDestroying) {
-      return;
-    }
-    this.isDestroying = true;
-    if (this.submenuTimeout) {
-      clearTimeout(this.submenuTimeout);
-      this.submenuTimeout = null;
-    }
-    if (this.submenu) {
-      await this.submenu.destroy();
-      this.submenu = null;
-    }
-    if (this.windowLayer && !this.parentMenu) {
-      this.windowLayer.destroy();
-    }
-    this.style.visibility = "hidden";
-    if (this.parentElement) {
-      this.parentElement.removeChild(this);
-    }
-  }
-  /**
-   * Destroys this menu and all parent menus in the chain
-   */
-  async destroyAll() {
-    let rootMenu = this;
-    while (rootMenu.parentMenu) {
-      rootMenu = rootMenu.parentMenu;
-    }
-    await rootMenu.destroy();
-  }
-};
-_init3 = __decoratorStart(_a3);
-_menuItems = new WeakMap();
-__decorateElement(_init3, 4, "menuItems", _menuItems_dec, _DeesContextmenu, _menuItems);
-_DeesContextmenu = __decorateElement(_init3, 0, "DeesContextmenu", _DeesContextmenu_decorators, _DeesContextmenu);
-__name(_DeesContextmenu, "DeesContextmenu");
-// DEMO
-__publicField(_DeesContextmenu, "demo", demoFunc);
-__publicField(_DeesContextmenu, "demoGroups", ["Overlay"]);
-// STATIC
-// This will store all the accumulated menu items
-__publicField(_DeesContextmenu, "contextMenuDeactivated", false);
-__publicField(_DeesContextmenu, "accumulatedMenuItems", []);
-/**
- * STATIC STYLES
- */
-__publicField(_DeesContextmenu, "styles", [
-  themeDefaultStyles,
-  cssManager.defaultStyles,
-  i`
-      :host {
-        display: block;
-        transition:
-          opacity var(--dees-transition-default) var(--dees-ease-standard),
-          transform var(--dees-transition-default) var(--dees-ease-standard),
-          left var(--dees-transition-default) var(--dees-ease-spring),
-          top var(--dees-transition-default) var(--dees-ease-spring);
-        outline: none;
-      }
-
-      .mainbox {
-        min-width: 200px;
-        max-width: 280px;
-        background: var(--dees-material-regular-bg);
-        -webkit-backdrop-filter: var(--dees-material-regular-filter);
-        backdrop-filter: var(--dees-material-regular-filter);
-        border: 1px solid var(--dees-color-border-default);
-        border-radius: var(--dees-radius-lg);
-        box-shadow: var(--dees-shadow-lg);
-        user-select: none;
-        padding: var(--dees-spacing-xs) 0;
-        font-size: var(--dees-font-control-size-sm);
-        color: var(--dees-color-text-primary);
-      }
-
-      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-        .mainbox {
-          background: var(--dees-material-regular-bg-opaque);
-        }
-      }
-
-      @media (prefers-reduced-transparency: reduce) {
-        .mainbox {
-          background: var(--dees-material-regular-bg-opaque);
-          -webkit-backdrop-filter: none;
-          backdrop-filter: none;
-        }
-      }
-
-      .menuitem {
-        display: flex;
-        align-items: center;
-        gap: var(--dees-spacing-sm);
-        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
-        cursor: default;
-        transition: background var(--dees-transition-fast) var(--dees-ease-standard);
-        line-height: 1;
-        position: relative;
-      }
-
-      .menuitem:hover {
-        background: var(--dees-color-active);
-      }
-      
-      .menuitem.has-submenu::after {
-        content: '›';
-        position: absolute;
-        right: var(--dees-spacing-sm);
-        font-size: 16px;
-        color: var(--dees-color-text-secondary);
-      }
-
-      .menuitem:active:not(.has-submenu) {
-        background: var(--dees-color-pressed);
-      }
-      
-      .menuitem.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-
-      .menuitem dees-icon {
-        font-size: 14px;
-        color: var(--dees-color-text-secondary);
-      }
-
-      .menuitem-text {
-        flex: 1;
-      }
-
-      .menuitem-shortcut {
-        font-size: var(--dees-font-caption2-size);
-        color: var(--dees-color-text-secondary);
-        margin-left: auto;
-      }
-
-      .menu-divider {
-        height: 1px;
-        background: var(--dees-color-border-default);
-        margin: var(--dees-spacing-xs) 0;
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        :host,
-        .menuitem {
-          transition: none;
-        }
-      }
-    `
-]);
-__runInitializers(_init3, 1, _DeesContextmenu);
-var DeesContextmenu = _DeesContextmenu;
-DeesContextmenu.initializeGlobalListener();
-
 // node_modules/.pnpm/@design.estate+dees-element@2.4.0/node_modules/@design.estate/dees-element/dist_ts_demotools/demotools.js
 init_dist_ts26();
 var __esDecorate3 = function(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
@@ -122336,6 +122351,7 @@ var demoFunc3 = /* @__PURE__ */ __name(() => {
 // ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
 init_dist_ts26();
 init_dist_ts25();
+init_dees_contextmenu();
 init_dees_icon();
 init_theme();
 var _filterCriteria_dec, _searchQuery_dec, _entries_dec, _a4, _DeesAppuiActivitylog_decorators, _init4, _entries, _searchQuery, _filterCriteria;
@@ -124167,6 +124183,7 @@ init_dist_ts26();
 init_dist_ts25();
 init_plugins4();
 init_dees_icon();
+init_dees_contextmenu();
 var _isProfileDropdownOpen_dec, _focusedDropdownItem_dec, _focusedItem_dec, _openDropdowns_dec, _activeMenu_dec, _activityLogActive_dec, _activityLogCount_dec, _showActivityLogToggle_dec, _showSearch_dec, _profileMenuItems_dec, _user_dec2, _showWindowControls_dec, _breadcrumbSeparator_dec, _breadcrumbs_dec, _menuItems_dec3, _a7, _DeesAppuiBar_decorators, _init7, _menuItems3, _breadcrumbs, _breadcrumbSeparator, _showWindowControls, _user2, _profileMenuItems, _showSearch, _showActivityLogToggle, _activityLogCount, _activityLogActive, _activeMenu, _openDropdowns, _focusedItem, _focusedDropdownItem, _isProfileDropdownOpen;
 _DeesAppuiBar_decorators = [customElement("dees-appui-appbar")];
 var _DeesAppuiBar = class _DeesAppuiBar extends (_a7 = DeesElement, _menuItems_dec3 = [n5({ type: Array })], _breadcrumbs_dec = [n5({ type: String })], _breadcrumbSeparator_dec = [n5({ type: String })], _showWindowControls_dec = [n5({ type: Boolean })], _user_dec2 = [n5({ type: Object })], _profileMenuItems_dec = [n5({ type: Array })], _showSearch_dec = [n5({ type: Boolean })], _showActivityLogToggle_dec = [n5({ type: Boolean })], _activityLogCount_dec = [n5({ type: Number })], _activityLogActive_dec = [n5({ type: Boolean })], _activeMenu_dec = [r5()], _openDropdowns_dec = [r5()], _focusedItem_dec = [r5()], _focusedDropdownItem_dec = [r5()], _isProfileDropdownOpen_dec = [r5()], _a7) {
@@ -124893,6 +124910,7 @@ var demoFunc5 = /* @__PURE__ */ __name(() => {
 init_dist_ts26();
 init_theme();
 init_dees_icon();
+init_dees_contextmenu();
 var _actions_dec, _widgets_dec, _a9, _DeesAppuiBottombar_decorators, _init8, _widgets, _actions;
 _DeesAppuiBottombar_decorators = [customElement("dees-appui-bottombar")];
 var _DeesAppuiBottombar = class _DeesAppuiBottombar extends (_a9 = DeesElement, _widgets_dec = [r5()], _actions_dec = [r5()], _a9) {
@@ -130062,6 +130080,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
 init_colors();
 init_dist_ts26();
 init_theme();
+init_dees_contextmenu();
 var _autocomplete_dec, _validConfirmed_dec, _vintegrated_dec, _validationFunction_dec, _validationText_dec, _validationState_dec, _showPasswordBool_dec, _isPasswordBool_dec, _value_dec4, _a21, _DeesInputText_decorators, _init19, _value4, _isPasswordBool, _showPasswordBool, _validationState, _validationText, _validationFunction, _vintegrated, _validConfirmed, _autocomplete;
 _DeesInputText_decorators = [customElement("dees-input-text")];
 var _DeesInputText = class _DeesInputText extends (_a21 = DeesInputBase, _value_dec4 = [n5({
@@ -148046,6 +148065,7 @@ var WysiwygHistory = class {
 
 // ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
 init_dist_ts26();
+init_dees_contextmenu();
 init_theme();
 var _wysiwygComponent_dec, _handlers_dec, _isSelected_dec, _block_dec, _a39, _DeesWysiwygBlock_decorators, _init36, _block, _isSelected, _handlers, _wysiwygComponent;
 _DeesWysiwygBlock_decorators = [customElement("dees-wysiwyg-block")];
@@ -151952,6 +151972,7 @@ __name(compileLucenePredicate, "compileLucenePredicate");
 // ts_web/elements/00group-dataview/dees-table/dees-table.ts
 init_plugins4();
 init_dist_ts26();
+init_dees_contextmenu();
 init_dees_modal();
 init_dist_ts25();
 init_dees_icon();
@@ -155662,6 +155683,7 @@ var DeesButton = _DeesButton;
 init_plugins4();
 init_dist_ts26();
 init_dees_icon();
+init_dees_contextmenu();
 init_theme();
 init_dees_tile();
 var _gridActions_dec, _gap_dec, _minTileWidth_dec, _tiles_dec, _a45, _DeesStatsGrid_decorators, _init42, _tiles, _minTileWidth, _gap, _gridActions;
@@ -157938,6 +157960,7 @@ var demoFunc33 = /* @__PURE__ */ __name(() => b2`
 init_plugins4();
 init_zindex();
 init_dist_ts26();
+init_dees_contextmenu();
 init_theme();
 var _collapsed_dec, _selectedTab_dec, _tabs_dec, _bottomTabs_dec, _menuGroups_dec, _logoText_dec, _logoIcon_dec, _a47, _DeesAppuiMainmenu_decorators, _init47, _logoIcon, _logoText, _menuGroups, _bottomTabs, _tabs, _selectedTab, _collapsed;
 _DeesAppuiMainmenu_decorators = [customElement("dees-appui-mainmenu")];
@@ -158516,6 +158539,7 @@ var demoFunc34 = /* @__PURE__ */ __name(() => b2`
 
 // ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
 init_plugins4();
+init_dees_contextmenu();
 init_dees_icon();
 init_dist_ts26();
 init_theme();
@@ -166560,6 +166584,7 @@ var toUnifiedDiff = /* @__PURE__ */ __name((rows, options2 = {}) => {
 init_dist_ts26();
 init_theme();
 init_dist_ts12();
+init_dees_contextmenu();
 init_services();
 init_dees_tile();
 init_dees_icon();
@@ -167470,6 +167495,7 @@ init_colors();
 init_plugins4();
 init_dist_ts26();
 init_dist_ts23();
+init_dees_contextmenu();
 init_theme();
 init_dees_tile();
 var _copied_dec2, _statusObject_dec, _a64, _DeesDataviewStatusobject_decorators, _init65, _statusObject, _copied2;
@@ -168252,6 +168278,7 @@ __name(getPathSegments, "getPathSegments");
 
 // ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-columns.ts
 init_dist_ts26();
+init_dees_contextmenu();
 init_theme();
 var _draggedItem_dec, _renameError_dec, _renameInProgress_dec, _renameName_dec, _renameSource_dec, _showRenameDialog_dec, _movePickerLoading_dec, _movePickerPrefixes_dec, _movePickerCurrentPrefix_dec, _movePickerSource_dec, _showMovePickerDialog_dec, _moveError_dec, _moveInProgress_dec, _moveDestination_dec, _moveSource_dec, _showMoveDialog_dec, _uploadProgress_dec, _uploading_dec, _dragOverFolderPrefix_dec, _dragOverColumnIndex_dec, _createDialogName_dec, _createDialogPrefix_dec, _createDialogType_dec, _showCreateDialog_dec, _loading_dec, _columns_dec2, _refreshKey_dec, _currentPrefix_dec, _bucketName_dec, _dataProvider_dec, _a66, _DeesStorageColumns_decorators, _init67, _dataProvider, _bucketName, _currentPrefix, _refreshKey, _columns2, _loading, _showCreateDialog, _createDialogType, _createDialogPrefix, _createDialogName, _dragOverColumnIndex, _dragOverFolderPrefix, _uploading, _uploadProgress, _showMoveDialog, _moveSource, _moveDestination, _moveInProgress, _moveError, _showMovePickerDialog, _movePickerSource, _movePickerCurrentPrefix, _movePickerPrefixes, _movePickerLoading, _showRenameDialog, _renameSource, _renameName, _renameInProgress, _renameError, _draggedItem;
 _DeesStorageColumns_decorators = [customElement("dees-storage-columns")];
@@ -169764,6 +169791,7 @@ var DeesStorageColumns = _DeesStorageColumns;
 
 // ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-keys.ts
 init_dist_ts26();
+init_dees_contextmenu();
 init_theme();
 var _renameError_dec2, _renameInProgress_dec2, _renameName_dec2, _renameSource_dec2, _showRenameDialog_dec2, _movePickerLoading_dec2, _movePickerPrefixes_dec2, _movePickerCurrentPrefix_dec2, _movePickerSource_dec2, _showMovePickerDialog_dec2, _moveError_dec2, _moveInProgress_dec2, _moveDestination_dec2, _moveSource_dec2, _showMoveDialog_dec2, _createDialogName_dec2, _createDialogPrefix_dec2, _createDialogType_dec2, _showCreateDialog_dec2, _filterText_dec2, _selectedKey_dec, _loading_dec2, _prefixes_dec, _allKeys_dec, _refreshKey_dec2, _currentPrefix_dec2, _bucketName_dec2, _dataProvider_dec2, _a67, _DeesStorageKeys_decorators, _init68, _dataProvider2, _bucketName2, _currentPrefix2, _refreshKey2, _allKeys, _prefixes, _loading2, _selectedKey, _filterText2, _showCreateDialog2, _createDialogType2, _createDialogPrefix2, _createDialogName2, _showMoveDialog2, _moveSource2, _moveDestination2, _moveInProgress2, _moveError2, _showMovePickerDialog2, _movePickerSource2, _movePickerCurrentPrefix2, _movePickerPrefixes2, _movePickerLoading2, _showRenameDialog2, _renameSource2, _renameName2, _renameInProgress2, _renameError2;
 _DeesStorageKeys_decorators = [customElement("dees-storage-keys")];
@@ -182101,6 +182129,40 @@ var demoGroups = [
   { id: "active", name: "Active work", sessionIds: ["session-0", "session-1", "session-2"] },
   { id: "review", name: "Review", sessionIds: ["session-3", "session-4"] }
 ];
+var demoResources = [
+  {
+    id: "terminal:build",
+    kind: "terminal",
+    title: "Build shell",
+    icon: "lucide:Terminal",
+    preview: "pnpm run build",
+    updatedAt: Date.now() - 9e4,
+    state: "ready"
+  },
+  {
+    id: "file:release-notes",
+    kind: "file",
+    title: "Release notes",
+    icon: "lucide:FileText",
+    preview: "6.7.0 controlled resource draft",
+    updatedAt: Date.now() - 18e4
+  },
+  {
+    id: "browser:preview",
+    kind: "browser",
+    title: "Documentation preview",
+    icon: "lucide:Globe",
+    preview: "localhost:3000",
+    updatedAt: Date.now() - 24e4
+  }
+];
+var demoResourceAssociations = [
+  { resourceId: "terminal:build", sessionId: "session-0" },
+  { resourceId: "file:release-notes", sessionId: "session-0" }
+];
+var demoResourceEligibleSessionIds = Object.fromEntries(
+  demoResources.map((resource) => [resource.id, ["session-0", "session-1", "session-2"]])
+);
 var handleSessionSelect = /* @__PURE__ */ __name((event) => {
   const list5 = event.currentTarget;
   list5.selectedSessionId = event.detail.session.id;
@@ -182120,6 +182182,60 @@ var handleSessionMove = /* @__PURE__ */ __name((event) => {
   list5.groups = groups;
   list5.ungroupedSessionIds = ungroupedSessionIds;
 }, "handleSessionMove");
+var handleResourceAssociation = /* @__PURE__ */ __name((event) => {
+  const list5 = event.currentTarget;
+  const next2 = list5.resourceAssociations.filter(
+    (association2) => association2.resourceId !== event.detail.resource.id
+  );
+  if (event.detail.toSessionId) {
+    next2.push({
+      resourceId: event.detail.resource.id,
+      sessionId: event.detail.toSessionId
+    });
+  }
+  list5.resourceAssociations = next2;
+}, "handleResourceAssociation");
+var handleResourceContext = /* @__PURE__ */ __name(async (event) => {
+  const list5 = event.currentTarget;
+  const { DeesContextmenu: DeesContextmenu2 } = await Promise.resolve().then(() => (init_dees_contextmenu(), dees_contextmenu_exports));
+  const currentSessionId = event.detail.sessionId;
+  const eligibleSessionIds = ["session-0", "session-1", "session-2"];
+  const menu = await DeesContextmenu2.openContextMenuWithOptions(
+    new MouseEvent("contextmenu", {
+      clientX: event.detail.clientX,
+      clientY: event.detail.clientY
+    }),
+    [
+      ...eligibleSessionIds.filter((sessionId) => sessionId !== currentSessionId).map((sessionId) => ({
+        name: `${currentSessionId ? "Reassign" : "Attach"} to ${demoSessions.find((session) => session.id === sessionId)?.title}`,
+        iconName: "lucide:Link",
+        action: /* @__PURE__ */ __name(async () => {
+          event.detail.requestAssociation(sessionId);
+          event.detail.close();
+        }, "action")
+      })),
+      ...currentSessionId ? [{
+        name: "Detach",
+        iconName: "lucide:Unlink",
+        action: /* @__PURE__ */ __name(async () => {
+          event.detail.requestAssociation(null);
+          event.detail.close();
+        }, "action")
+      }] : []
+    ]
+  );
+  if (!menu) {
+    event.detail.close();
+  } else {
+    const observer = new MutationObserver(() => {
+      if (menu.isConnected) return;
+      observer.disconnect();
+      event.detail.close();
+    });
+    observer.observe(document.body, { childList: true });
+  }
+  list5.selectedResourceId = event.detail.resource.id;
+}, "handleResourceContext");
 var openModal = /* @__PURE__ */ __name(async () => {
   const { DeesModal: DeesModal2 } = await Promise.resolve().then(() => (init_dees_modal(), dees_modal_exports));
   const content3 = document.createElement("dees-harness-session-list");
@@ -182157,15 +182273,26 @@ var demoFunc65 = /* @__PURE__ */ __name(() => b2`
   </style>
   <div class="sessionDemo">
     <dees-button @clicked=${openModal}>Open in a DeesModal</dees-button>
-    <div class="demoHint">Drag the grip to reorder conversations or move them between groups.</div>
+    <div class="demoHint">
+      Use a conversation grip to reorder sessions. Use a resource grip to associate it with a
+      session, or open Actions with click, ContextMenu, or Shift+F10 for attach, reassign, and detach.
+    </div>
     <dees-harness-session-list
       .sessions=${demoSessions}
       .groups=${demoGroups}
       .ungroupedSessionIds=${demoSessions.slice(5).map((session) => session.id)}
+      .resources=${demoResources}
+      .resourceAssociations=${demoResourceAssociations}
+      .eligibleSessionIdsByResourceId=${demoResourceEligibleSessionIds}
       .enableGrouping=${true}
       selectedSessionId="session-2"
       @harness-session-select=${handleSessionSelect}
       @harness-session-move=${handleSessionMove}
+      @harness-resource-select=${(event) => {
+  event.currentTarget.selectedResourceId = event.detail.resource.id;
+}}
+      @harness-resource-context=${handleResourceContext}
+      @harness-resource-association-request=${handleResourceAssociation}
     ></dees-harness-session-list>
   </div>
 `, "demoFunc");
@@ -182174,12 +182301,12 @@ var demoFunc65 = /* @__PURE__ */ __name(() => b2`
 init_dist_ts26();
 init_theme();
 init_dees_icon();
-var _moveAnnouncement_dec, _bottomScrollShadowVisible_dec, _topScrollShadowVisible_dec, _collapsedGroupIds_dec, _expandedSessionIds_dec, _draggedItemHeight_dec, _dropSlot_dec, _draggingSessionId_dec, _search_dec, _ungroupedSessionIds_dec, _enableGrouping_dec, _groups_dec2, _emptyText_dec2, _loading_dec4, _selectedSessionId_dec, _sessions_dec, _a91, _DeesHarnessSessionList_decorators, _init92, _sessions, _selectedSessionId, _loading4, _emptyText2, _groups2, _enableGrouping, _ungroupedSessionIds, _search, _draggingSessionId, _dropSlot, _draggedItemHeight, _expandedSessionIds, _collapsedGroupIds, _topScrollShadowVisible, _bottomScrollShadowVisible, _moveAnnouncement;
+var _resourceContextResourceId_dec, _moveAnnouncement_dec, _bottomScrollShadowVisible_dec, _topScrollShadowVisible_dec, _collapsedGroupIds_dec, _expandedSessionIds_dec, _draggedItemHeight_dec, _dropSlot_dec, _resourceDropTargetSessionId_dec, _draggingResourceId_dec, _draggingSessionId_dec, _search_dec, _eligibleSessionIdsByResourceId_dec, _selectedResourceId_dec, _resourceAssociations_dec, _resources_dec, _ungroupedSessionIds_dec, _enableGrouping_dec, _groups_dec2, _emptyText_dec2, _loading_dec4, _selectedSessionId_dec, _sessions_dec, _a91, _DeesHarnessSessionList_decorators, _init92, _sessions, _selectedSessionId, _loading4, _emptyText2, _groups2, _enableGrouping, _ungroupedSessionIds, _resources, _resourceAssociations, _selectedResourceId, _eligibleSessionIdsByResourceId, _search, _draggingSessionId, _draggingResourceId, _resourceDropTargetSessionId, _dropSlot, _draggedItemHeight, _expandedSessionIds, _collapsedGroupIds, _topScrollShadowVisible, _bottomScrollShadowVisible, _moveAnnouncement, _resourceContextResourceId;
 var { repeat: repeat6 } = directives_exports;
 var dragAutoScrollMaxPixelsPerSecond = 900;
 var dragThresholdPixels = 4;
 _DeesHarnessSessionList_decorators = [customElement("dees-harness-session-list")];
-var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = DeesElement, _sessions_dec = [n5({ attribute: false })], _selectedSessionId_dec = [n5()], _loading_dec4 = [n5({ type: Boolean })], _emptyText_dec2 = [n5()], _groups_dec2 = [n5({ attribute: false })], _enableGrouping_dec = [n5({ type: Boolean })], _ungroupedSessionIds_dec = [n5({ attribute: false })], _search_dec = [r5()], _draggingSessionId_dec = [r5()], _dropSlot_dec = [r5()], _draggedItemHeight_dec = [r5()], _expandedSessionIds_dec = [r5()], _collapsedGroupIds_dec = [r5()], _topScrollShadowVisible_dec = [r5()], _bottomScrollShadowVisible_dec = [r5()], _moveAnnouncement_dec = [r5()], _a91) {
+var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = DeesElement, _sessions_dec = [n5({ attribute: false })], _selectedSessionId_dec = [n5()], _loading_dec4 = [n5({ type: Boolean })], _emptyText_dec2 = [n5()], _groups_dec2 = [n5({ attribute: false })], _enableGrouping_dec = [n5({ type: Boolean })], _ungroupedSessionIds_dec = [n5({ attribute: false })], _resources_dec = [n5({ attribute: false })], _resourceAssociations_dec = [n5({ attribute: false })], _selectedResourceId_dec = [n5()], _eligibleSessionIdsByResourceId_dec = [n5({ attribute: false })], _search_dec = [r5()], _draggingSessionId_dec = [r5()], _draggingResourceId_dec = [r5()], _resourceDropTargetSessionId_dec = [r5()], _dropSlot_dec = [r5()], _draggedItemHeight_dec = [r5()], _expandedSessionIds_dec = [r5()], _collapsedGroupIds_dec = [r5()], _topScrollShadowVisible_dec = [r5()], _bottomScrollShadowVisible_dec = [r5()], _moveAnnouncement_dec = [r5()], _resourceContextResourceId_dec = [r5()], _a91) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _sessions, __runInitializers(_init92, 8, this, [])), __runInitializers(_init92, 11, this);
@@ -182189,18 +182316,29 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
     __privateAdd(this, _groups2, __runInitializers(_init92, 24, this, [])), __runInitializers(_init92, 27, this);
     __privateAdd(this, _enableGrouping, __runInitializers(_init92, 28, this, false)), __runInitializers(_init92, 31, this);
     __privateAdd(this, _ungroupedSessionIds, __runInitializers(_init92, 32, this, [])), __runInitializers(_init92, 35, this);
-    __privateAdd(this, _search, __runInitializers(_init92, 36, this, "")), __runInitializers(_init92, 39, this);
-    __privateAdd(this, _draggingSessionId, __runInitializers(_init92, 40, this, "")), __runInitializers(_init92, 43, this);
-    __privateAdd(this, _dropSlot, __runInitializers(_init92, 44, this)), __runInitializers(_init92, 47, this);
-    __privateAdd(this, _draggedItemHeight, __runInitializers(_init92, 48, this, 0)), __runInitializers(_init92, 51, this);
-    __privateAdd(this, _expandedSessionIds, __runInitializers(_init92, 52, this, /* @__PURE__ */ new Set())), __runInitializers(_init92, 55, this);
-    __privateAdd(this, _collapsedGroupIds, __runInitializers(_init92, 56, this, /* @__PURE__ */ new Set())), __runInitializers(_init92, 59, this);
-    __privateAdd(this, _topScrollShadowVisible, __runInitializers(_init92, 60, this, false)), __runInitializers(_init92, 63, this);
-    __privateAdd(this, _bottomScrollShadowVisible, __runInitializers(_init92, 64, this, false)), __runInitializers(_init92, 67, this);
-    __privateAdd(this, _moveAnnouncement, __runInitializers(_init92, 68, this, "")), __runInitializers(_init92, 71, this);
+    __privateAdd(this, _resources, __runInitializers(_init92, 36, this, [])), __runInitializers(_init92, 39, this);
+    __privateAdd(this, _resourceAssociations, __runInitializers(_init92, 40, this, [])), __runInitializers(_init92, 43, this);
+    __privateAdd(this, _selectedResourceId, __runInitializers(_init92, 44, this, "")), __runInitializers(_init92, 47, this);
+    __privateAdd(this, _eligibleSessionIdsByResourceId, __runInitializers(_init92, 48, this, {})), __runInitializers(_init92, 51, this);
+    __privateAdd(this, _search, __runInitializers(_init92, 52, this, "")), __runInitializers(_init92, 55, this);
+    __privateAdd(this, _draggingSessionId, __runInitializers(_init92, 56, this, "")), __runInitializers(_init92, 59, this);
+    __privateAdd(this, _draggingResourceId, __runInitializers(_init92, 60, this, "")), __runInitializers(_init92, 63, this);
+    __privateAdd(this, _resourceDropTargetSessionId, __runInitializers(_init92, 64, this, "")), __runInitializers(_init92, 67, this);
+    __privateAdd(this, _dropSlot, __runInitializers(_init92, 68, this)), __runInitializers(_init92, 71, this);
+    __privateAdd(this, _draggedItemHeight, __runInitializers(_init92, 72, this, 0)), __runInitializers(_init92, 75, this);
+    __privateAdd(this, _expandedSessionIds, __runInitializers(_init92, 76, this, /* @__PURE__ */ new Set())), __runInitializers(_init92, 79, this);
+    __privateAdd(this, _collapsedGroupIds, __runInitializers(_init92, 80, this, /* @__PURE__ */ new Set())), __runInitializers(_init92, 83, this);
+    __privateAdd(this, _topScrollShadowVisible, __runInitializers(_init92, 84, this, false)), __runInitializers(_init92, 87, this);
+    __privateAdd(this, _bottomScrollShadowVisible, __runInitializers(_init92, 88, this, false)), __runInitializers(_init92, 91, this);
+    __privateAdd(this, _moveAnnouncement, __runInitializers(_init92, 92, this, "")), __runInitializers(_init92, 95, this);
+    __privateAdd(this, _resourceContextResourceId, __runInitializers(_init92, 96, this, "")), __runInitializers(_init92, 99, this);
     __publicField(this, "reflowGeneration", 0);
     __publicField(this, "reflowAnimations", /* @__PURE__ */ new Set());
     __publicField(this, "pointerDragGesture");
+    __publicField(this, "pendingResourceAssociationRequest");
+    __publicField(this, "resourceContextFocusTarget");
+    __publicField(this, "resourceContextFocusClass", "");
+    __publicField(this, "resourceContextGeneration", 0);
     __publicField(this, "keyboardMoveFocus");
     __publicField(this, "scrollResizeObserver");
     __publicField(this, "observedScrollContainer");
@@ -182221,8 +182359,16 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
         eventArg.clientX - gesture.startClientX,
         eventArg.clientY - gesture.startClientY
       ) < dragThresholdPixels) return;
-      if (gesture.phase === "pending" && !this.startPointerDrag(eventArg, gesture)) return;
+      if (gesture.phase === "pending" && !(gesture.type === "session" ? this.startPointerDrag(eventArg, gesture) : this.startResourcePointerDrag(eventArg, gesture))) return;
       eventArg.preventDefault();
+      if (gesture.type === "resource") {
+        this.moveResourceDragPreview(eventArg.clientX, eventArg.clientY, gesture);
+        this.dragAutoScrollClientX = eventArg.clientX;
+        this.dragAutoScrollClientY = eventArg.clientY;
+        this.updateDragAutoScrollVelocity();
+        this.updateResourceDropTargetFromPointer(eventArg.clientX, eventArg.clientY);
+        return;
+      }
       this.moveDragPreview(eventArg.clientX, eventArg.clientY, gesture);
       this.dragAutoScrollClientX = eventArg.clientX;
       this.dragAutoScrollClientY = eventArg.clientY;
@@ -182233,6 +182379,14 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       const gesture = this.pointerDragGesture;
       if (!gesture || eventArg.pointerId !== gesture.pointerId) return;
       if (gesture.phase === "active") {
+        if (gesture.type === "resource") {
+          this.dragAutoScrollClientX = eventArg.clientX;
+          this.dragAutoScrollClientY = eventArg.clientY;
+          this.moveResourceDragPreview(eventArg.clientX, eventArg.clientY, gesture);
+          this.updateResourceDropTargetFromPointer(eventArg.clientX, eventArg.clientY);
+          this.finishPointerDrag(true);
+          return;
+        }
         this.dragAutoScrollClientX = eventArg.clientX;
         this.dragAutoScrollClientY = eventArg.clientY;
         this.moveDragPreview(eventArg.clientX, eventArg.clientY, gesture);
@@ -182260,7 +182414,8 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
     __publicField(this, "runDragAutoScroll", /* @__PURE__ */ __name((timestampArg) => {
       this.dragAutoScrollFrame = void 0;
       const container = this.scrollContainer;
-      if (!container || !this.draggingSessionId || this.dragAutoScrollVelocity === 0) return;
+      const gesture = this.pointerDragGesture;
+      if (!container || gesture?.phase !== "active" || this.dragAutoScrollVelocity === 0) return;
       const elapsedMs = Math.min(34, Math.max(0, timestampArg - this.dragAutoScrollLastFrame));
       this.dragAutoScrollLastFrame = timestampArg;
       const previousScrollTop = container.scrollTop;
@@ -182271,7 +182426,14 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
         this.stopDragAutoScroll();
         return;
       }
-      this.updateDropSlotFromPointer();
+      if (gesture.type === "resource") {
+        this.updateResourceDropTargetFromPointer(
+          this.dragAutoScrollClientX,
+          this.dragAutoScrollClientY
+        );
+      } else {
+        this.updateDropSlotFromPointer();
+      }
       this.dragAutoScrollFrame = requestAnimationFrame(this.runDragAutoScroll);
     }, "runDragAutoScroll"));
     __publicField(this, "syncScrollShadowState", /* @__PURE__ */ __name(() => {
@@ -182286,6 +182448,48 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
   get sessionsById() {
     return new Map(this.sessions.map((session) => [session.id, session]));
   }
+  get resourcesById() {
+    const result = /* @__PURE__ */ new Map();
+    for (const resource of this.resources) {
+      if (!resource.id || !resource.kind || !resource.title || result.has(resource.id)) continue;
+      result.set(resource.id, resource);
+    }
+    return result;
+  }
+  /** First valid record wins; unknown and duplicate records remain untouched but are not projected. */
+  get acceptedResourceAssociations() {
+    const resourcesById = this.resourcesById;
+    const sessionsById = this.sessionsById;
+    const result = /* @__PURE__ */ new Map();
+    for (const association2 of this.resourceAssociations) {
+      if (!resourcesById.has(association2.resourceId) || !sessionsById.has(association2.sessionId) || result.has(association2.resourceId)) continue;
+      result.set(association2.resourceId, association2.sessionId);
+    }
+    return result;
+  }
+  get acceptedResources() {
+    return [...this.resourcesById.values()];
+  }
+  resourceMatchesSearch(resourceArg, queryArg) {
+    return [resourceArg.id, resourceArg.kind, resourceArg.title, resourceArg.preview].filter(Boolean).join(" ").toLowerCase().includes(queryArg);
+  }
+  sessionMatchesSearch(sessionArg, queryArg) {
+    return [sessionArg.title, sessionArg.preview, sessionArg.id].filter(Boolean).join(" ").toLowerCase().includes(queryArg);
+  }
+  resourcesForSession(sessionArg) {
+    const associations = this.acceptedResourceAssociations;
+    const associated = this.acceptedResources.filter(
+      (resource) => associations.get(resource.id) === sessionArg.id
+    );
+    const query3 = this.search.trim().toLowerCase();
+    if (!query3 || this.sessionMatchesSearch(sessionArg, query3)) return associated;
+    return associated.filter((resource) => this.resourceMatchesSearch(resource, query3));
+  }
+  get unattachedResources() {
+    const associations = this.acceptedResourceAssociations;
+    const query3 = this.search.trim().toLowerCase();
+    return this.acceptedResources.filter((resource) => !associations.has(resource.id) && (!query3 || this.resourceMatchesSearch(resource, query3)));
+  }
   get groupedSessionIds() {
     const ids = /* @__PURE__ */ new Set();
     for (const group of this.groups) {
@@ -182315,17 +182519,64 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
   }
   get filteredSessions() {
     const query3 = this.search.trim().toLowerCase();
+    const associations = this.acceptedResourceAssociations;
+    const matchingAttachedSessionIds = new Set(
+      this.acceptedResources.filter((resource) => query3 && this.resourceMatchesSearch(resource, query3)).map((resource) => associations.get(resource.id)).filter((sessionId) => sessionId !== void 0)
+    );
     const sorted = [...this.sessions].sort(
       (left, right) => (right.updatedAt ?? right.createdAt ?? 0) - (left.updatedAt ?? left.createdAt ?? 0)
     );
     if (!query3) return sorted;
     return sorted.filter(
-      (session) => [session.title, session.preview, session.id].filter(Boolean).join(" ").toLowerCase().includes(query3)
+      (session) => this.sessionMatchesSearch(session, query3) || matchingAttachedSessionIds.has(session.id)
     );
   }
   focusSearch() {
     this.shadowRoot?.querySelector(".searchRow input")?.focus();
   }
+  requestResourceAssociation(resourceIdArg, toSessionIdArg, sourceArg = "action") {
+    const resource = this.resourcesById.get(resourceIdArg);
+    if (!resource) return false;
+    const fromSessionId = this.acceptedResourceAssociations.get(resourceIdArg) ?? null;
+    if (fromSessionId === toSessionIdArg) return false;
+    if (toSessionIdArg !== null && (!this.sessionsById.has(toSessionIdArg) || !this.isResourceTargetEligible(resourceIdArg, toSessionIdArg))) return false;
+    if (toSessionIdArg === null && fromSessionId === null) return false;
+    const detail = fromSessionId === null ? {
+      intent: "attach",
+      resource,
+      fromSessionId: null,
+      toSessionId: toSessionIdArg,
+      source: sourceArg
+    } : toSessionIdArg === null ? {
+      intent: "detach",
+      resource,
+      fromSessionId,
+      toSessionId: null,
+      source: sourceArg
+    } : {
+      intent: "reassign",
+      resource,
+      fromSessionId,
+      toSessionId: toSessionIdArg,
+      source: sourceArg
+    };
+    this.pendingResourceAssociationRequest = {
+      resourceId: resource.id,
+      resourceTitle: resource.title || resource.id,
+      fromSessionId,
+      toSessionId: toSessionIdArg,
+      intent: detail.intent
+    };
+    this.moveAnnouncement = this.resourceAssociationAnnouncement(detail, false);
+    this.dispatchEvent(
+      new CustomEvent("harness-resource-association-request", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+    return true;
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
     this.observeScrollGeometry();
@@ -182334,16 +182585,32 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
     if (this.pointerDragGesture && (!this.pointerDragGesture.source.isConnected || !this.pointerDragGesture.handle.isConnected)) {
       this.finishPointerDrag(false);
     }
-    if (!changedProperties.has("sessions")) return;
-    const knownIds = new Set(this.sessions.map((session) => session.id));
-    if (this.pointerDragGesture && !knownIds.has(this.pointerDragGesture.sessionId)) {
-      this.finishPointerDrag(false);
+    if (changedProperties.has("sessions")) {
+      const knownIds = new Set(this.sessions.map((session) => session.id));
+      if (this.pointerDragGesture?.type === "session" && !knownIds.has(this.pointerDragGesture.sessionId)) {
+        this.finishPointerDrag(false);
+      }
+      const nextExpanded = new Set(
+        [...this.expandedSessionIds].filter((sessionId) => knownIds.has(sessionId))
+      );
+      if (nextExpanded.size !== this.expandedSessionIds.size || [...nextExpanded].some((sessionId) => !this.expandedSessionIds.has(sessionId))) {
+        this.expandedSessionIds = nextExpanded;
+      }
     }
-    const nextExpanded = new Set(
-      [...this.expandedSessionIds].filter((sessionId) => knownIds.has(sessionId))
-    );
-    if (nextExpanded.size !== this.expandedSessionIds.size || [...nextExpanded].some((sessionId) => !this.expandedSessionIds.has(sessionId))) {
-      this.expandedSessionIds = nextExpanded;
+    if (changedProperties.has("resources") || changedProperties.has("resourceAssociations")) {
+      const gesture = this.pointerDragGesture;
+      if (gesture?.type === "resource") {
+        const currentSessionId = this.acceptedResourceAssociations.get(gesture.resourceId) ?? null;
+        if (!this.resourcesById.has(gesture.resourceId) || currentSessionId !== gesture.fromSessionId) {
+          this.finishPointerDrag(false);
+        }
+      }
+      if (this.resourceContextResourceId && !this.resourcesById.has(this.resourceContextResourceId)) this.closeResourceContext(this.resourceContextGeneration);
+      this.reconcilePendingResourceAssociation();
+    }
+    if (changedProperties.has("eligibleSessionIdsByResourceId")) {
+      const gesture = this.pointerDragGesture;
+      if (gesture?.type === "resource") this.finishPointerDrag(false);
     }
   }
   async connectedCallback() {
@@ -182355,6 +182622,7 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
   }
   async disconnectedCallback() {
     this.finishPointerDrag(false);
+    this.clearResourceContextState();
     this.scrollResizeObserver?.disconnect();
     this.scrollResizeObserver = void 0;
     this.observedScrollContainer = void 0;
@@ -182367,7 +182635,8 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       <div class="searchRow">
         <dees-icon class="searchIcon" icon="lucide:Search" iconSize="13"></dees-icon>
         <input
-          placeholder="Search conversations"
+          placeholder=${this.acceptedResources.length ? "Search conversations and resources" : "Search conversations"}
+          aria-label=${this.acceptedResources.length ? "Search conversations and resources" : "Search conversations"}
           .value=${this.search}
           @input=${(event) => {
       this.search = event.currentTarget.value;
@@ -182410,9 +182679,10 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
   }
   renderFlatList() {
     const sessions = this.filteredSessions;
-    if (!sessions.length) {
+    const unattachedResources = this.unattachedResources;
+    if (!sessions.length && !unattachedResources.length) {
       return b2`<div class="emptyNote">
-        ${this.sessions.length ? "No conversations match this search." : this.emptyText}
+        ${this.acceptedResources.length ? this.sessions.length ? "No conversations or resources match this search." : "No resources match this search." : this.sessions.length ? "No conversations match this search." : this.emptyText}
       </div>`;
     }
     return b2`
@@ -182423,12 +182693,14 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       (session) => this.renderItem(session, null, -1)
     )}
       </div>
+      ${this.renderUnattachedResources(unattachedResources)}
     `;
   }
   renderGroupedList() {
     const byId = this.sessionsById;
     const ungrouped = this.ungroupedSessions;
-    if (!this.sessions.length && !this.groups.length) {
+    const unattachedResources = this.unattachedResources;
+    if (!this.sessions.length && !this.groups.length && !unattachedResources.length) {
       return b2`<div class="emptyNote">${this.emptyText}</div>`;
     }
     return b2`
@@ -182478,6 +182750,7 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
             </button>
           ` : ""}
       ${this.renderSection(ungrouped, null)}
+      ${this.renderUnattachedResources(unattachedResources)}
     `;
   }
   renderSection(sessions, groupId) {
@@ -182537,9 +182810,11 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
     const state5 = session.state ?? "normal";
     const detailsId = `session-details-${session.id}`;
     const dropIndex = index3 < 0 ? 0 : index3;
+    const resources = this.resourcesForSession(session);
+    const isResourceDropTarget = this.resourceDropTargetSessionId === session.id;
     return b2`
       <article
-        class="item state-${state5} ${expanded ? "expanded" : ""} ${session.id === this.selectedSessionId ? "selected" : ""} ${this.draggingSessionId === session.id ? "dragging" : ""}"
+        class="item state-${state5} ${expanded ? "expanded" : ""} ${session.id === this.selectedSessionId ? "selected" : ""} ${this.draggingSessionId === session.id ? "dragging" : ""} ${isResourceDropTarget ? "resourceDropTarget" : ""}"
         data-session-id=${session.id}
         data-drop-group-id=${groupId ?? ""}
         data-drop-index=${dropIndex}
@@ -182620,6 +182895,16 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
               <dees-icon icon="lucide:ChevronDown" iconSize="15"></dees-icon>
             </button>
           </div>
+          ${isResourceDropTarget ? b2`<div class="resourceDropLabel">Associate resource with ${session.title || session.id}</div>` : ""}
+          ${resources.length ? b2`
+                <ul class="resourceChildren" aria-label=${`Resources for ${session.title || session.id}`}>
+                  ${repeat6(
+      resources,
+      (resource) => resource.id,
+      (resource) => this.renderResource(resource, session.id)
+    )}
+                </ul>
+              ` : ""}
           ${expanded ? b2`
                 <div class="itemDetails" id=${detailsId}>
                   <div class="stateLine">
@@ -182636,6 +182921,113 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       </article>
     `;
   }
+  renderUnattachedResources(resourcesArg) {
+    if (!resourcesArg.length) return b2``;
+    return b2`
+      <section class="resourceSection" aria-labelledby="unattached-resources-heading">
+        <h2 class="resourceSectionTitle" id="unattached-resources-heading">Resources</h2>
+        <ul class="resourceList" aria-label="Unattached resources">
+          ${repeat6(
+      resourcesArg,
+      (resource) => resource.id,
+      (resource) => this.renderResource(resource, null)
+    )}
+        </ul>
+      </section>
+    `;
+  }
+  renderResource(resourceArg, sessionIdArg) {
+    const selected = resourceArg.id === this.selectedResourceId;
+    const dragging = resourceArg.id === this.draggingResourceId;
+    const eligibleTargetCount = this.eligibleSessionIds(resourceArg.id).filter(
+      (sessionId) => sessionId !== sessionIdArg
+    ).length;
+    const contextOpen = resourceArg.id === this.resourceContextResourceId;
+    return b2`
+      <li
+        class="resourceRow ${selected ? "selected" : ""} ${dragging ? "resourceDragging" : ""}"
+        data-resource-id=${resourceArg.id}
+        data-resource-session-id=${sessionIdArg ?? ""}
+        @dblclick=${(event) => {
+      event.stopPropagation();
+      if (this.eventTargetsResourceControl(event)) return;
+      this.emitResource("harness-resource-open", resourceArg, sessionIdArg);
+    }}
+        @contextmenu=${(event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const focusTarget = event.composedPath().find((target) => target instanceof HTMLElement && target.matches("button:not(:disabled)")) ?? event.currentTarget.querySelector(".resourcePrimary") ?? event.currentTarget;
+      this.emitResourceContext(event, resourceArg, sessionIdArg, "pointer", focusTarget);
+    }}
+      >
+        <button
+          class="resourceDragHandle"
+          type="button"
+          title=${eligibleTargetCount ? "Drag to associate with an eligible conversation" : "No eligible conversations"}
+          aria-label=${`Associate ${resourceArg.title || resourceArg.id} by dragging`}
+          aria-keyshortcuts="ContextMenu Shift+F10"
+          ?disabled=${eligibleTargetCount === 0}
+          @pointerdown=${(event) => {
+      this.handleResourcePointerDown(event, resourceArg, sessionIdArg);
+    }}
+          @pointermove=${this.handlePointerMove}
+          @pointerup=${this.handlePointerUp}
+          @pointercancel=${this.handlePointerCancel}
+          @lostpointercapture=${this.handleLostPointerCapture}
+          @keydown=${(event) => {
+      this.handleResourceContextKey(event, resourceArg, sessionIdArg);
+    }}
+        >
+          <dees-icon icon="lucide:GripVertical" iconSize="13"></dees-icon>
+        </button>
+        <button
+          class="resourcePrimary"
+          type="button"
+          aria-current=${selected ? "true" : "false"}
+          @click=${() => this.emitResource("harness-resource-select", resourceArg, sessionIdArg)}
+          @keydown=${(event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        this.emitResource("harness-resource-open", resourceArg, sessionIdArg);
+        return;
+      }
+      this.handleResourceContextKey(event, resourceArg, sessionIdArg);
+    }}
+        >
+          <dees-icon
+            class="resourceIcon"
+            icon=${resourceArg.icon || "lucide:Box"}
+            iconSize="14"
+          ></dees-icon>
+          <span class="resourceCopy">
+            <span class="resourceTitle">${resourceArg.title || resourceArg.id}</span>
+            ${resourceArg.preview ? b2`<span class="resourcePreview">${resourceArg.preview}</span>` : ""}
+            <span class="resourceMeta">
+              ${resourceArg.kind}${resourceArg.state ? ` \xB7 ${resourceArg.state}` : ""}${resourceArg.updatedAt || resourceArg.createdAt ? ` \xB7 ${harnessFormatRelativeTime(resourceArg.updatedAt ?? resourceArg.createdAt)}` : ""}
+            </span>
+          </span>
+        </button>
+        <button
+          class="resourceActions"
+          type="button"
+          title="Resource actions"
+          aria-label=${`Actions for ${resourceArg.title || resourceArg.id}`}
+          aria-haspopup="menu"
+          aria-expanded=${contextOpen ? "true" : "false"}
+          aria-keyshortcuts="ContextMenu Shift+F10"
+          @click=${(event) => {
+      event.stopPropagation();
+      this.emitResourceContext(event, resourceArg, sessionIdArg, "action", event.currentTarget);
+    }}
+          @keydown=${(event) => {
+      this.handleResourceContextKey(event, resourceArg, sessionIdArg);
+    }}
+        >
+          <dees-icon icon="lucide:Ellipsis" iconSize="15"></dees-icon>
+        </button>
+      </li>
+    `;
+  }
   eventTargetsExpandToggle(event) {
     return event.composedPath().some(
       (target) => target instanceof HTMLElement && target.classList.contains("expandToggle")
@@ -182646,6 +183038,11 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       (target) => target instanceof HTMLElement && target.classList.contains("dragHandle")
     );
   }
+  eventTargetsResourceControl(event) {
+    return event.composedPath().some(
+      (target) => target instanceof HTMLElement && (target.classList.contains("resourceDragHandle") || target.classList.contains("resourceActions"))
+    );
+  }
   sessionStateLabel(state5) {
     switch (state5) {
       case "working":
@@ -182692,6 +183089,7 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
     if (!source) return;
     const sourceRect = source.getBoundingClientRect();
     this.pointerDragGesture = {
+      type: "session",
       pointerId: eventArg.pointerId,
       handle: handle3,
       source,
@@ -182712,6 +183110,33 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       this.finishPointerDrag(false);
     }
   }
+  handleResourcePointerDown(eventArg, resourceArg, fromSessionIdArg) {
+    if (this.pointerDragGesture || eventArg.button !== 0 || !eventArg.isPrimary || this.eligibleSessionIds(resourceArg.id).every((sessionId) => sessionId === fromSessionIdArg)) return;
+    const handle3 = eventArg.currentTarget;
+    const source = handle3.closest(".resourceRow");
+    if (!source) return;
+    const sourceRect = source.getBoundingClientRect();
+    this.pointerDragGesture = {
+      type: "resource",
+      pointerId: eventArg.pointerId,
+      handle: handle3,
+      source,
+      resourceId: resourceArg.id,
+      fromSessionId: fromSessionIdArg,
+      startClientX: eventArg.clientX,
+      startClientY: eventArg.clientY,
+      grabOffsetX: eventArg.clientX - sourceRect.left,
+      grabOffsetY: eventArg.clientY - sourceRect.top,
+      phase: "pending"
+    };
+    window.addEventListener("keydown", this.handleDragKeyDown, true);
+    window.addEventListener("blur", this.handleDragWindowBlur);
+    try {
+      handle3.setPointerCapture(eventArg.pointerId);
+    } catch {
+      this.finishPointerDrag(false);
+    }
+  }
   startPointerDrag(eventArg, gestureArg) {
     const sourceRect = gestureArg.source.getBoundingClientRect();
     gestureArg.source.classList.add("dragging");
@@ -182737,6 +183162,23 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
     };
     return true;
   }
+  startResourcePointerDrag(eventArg, gestureArg) {
+    const sourceRect = gestureArg.source.getBoundingClientRect();
+    gestureArg.source.classList.add("resourceDragging");
+    gestureArg.source.style.setProperty("--resource-drag-preview-width", `${sourceRect.width}px`);
+    this.moveResourceDragPreview(eventArg.clientX, eventArg.clientY, gestureArg);
+    gestureArg.source.setAttribute("popover", "manual");
+    try {
+      gestureArg.source.showPopover();
+    } catch {
+      this.finishPointerDrag(false);
+      return false;
+    }
+    gestureArg.phase = "active";
+    this.draggingResourceId = gestureArg.resourceId;
+    this.resourceDropTargetSessionId = "";
+    return true;
+  }
   moveDragPreview(clientXArg, clientYArg, gestureArg) {
     gestureArg.source.style.setProperty(
       "--drag-preview-x",
@@ -182747,6 +183189,24 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       `${clientYArg - gestureArg.grabOffsetY}px`
     );
   }
+  moveResourceDragPreview(clientXArg, clientYArg, gestureArg) {
+    gestureArg.source.style.setProperty(
+      "--resource-drag-preview-x",
+      `${clientXArg - gestureArg.grabOffsetX}px`
+    );
+    gestureArg.source.style.setProperty(
+      "--resource-drag-preview-y",
+      `${clientYArg - gestureArg.grabOffsetY}px`
+    );
+  }
+  updateResourceDropTargetFromPointer(clientXArg, clientYArg) {
+    const gesture = this.pointerDragGesture;
+    if (gesture?.type !== "resource" || gesture.phase !== "active") return;
+    const hit = this.shadowRoot?.elementFromPoint(clientXArg, clientYArg);
+    const target = hit?.closest(".item[data-session-id]");
+    const sessionId = target?.dataset.sessionId ?? "";
+    this.resourceDropTargetSessionId = sessionId && sessionId !== gesture.fromSessionId && this.isResourceTargetEligible(gesture.resourceId, sessionId) ? sessionId : "";
+  }
   setDropSlot(groupIdArg, indexArg) {
     const current = this.dropSlot;
     if (current && current.groupId === groupIdArg && current.index === indexArg) return;
@@ -182764,7 +183224,8 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
   }
   updateDragAutoScrollVelocity() {
     const container = this.scrollContainer;
-    if (!container || !this.draggingSessionId) return;
+    const gesture = this.pointerDragGesture;
+    if (!container || gesture?.phase !== "active") return;
     const rect = container.getBoundingClientRect();
     if (this.dragAutoScrollClientX < rect.left || this.dragAutoScrollClientX > rect.right) {
       this.stopDragAutoScroll();
@@ -182938,6 +183399,120 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       this.keyboardMoveFocus = void 0;
     }
   }
+  eligibleSessionIds(resourceIdArg) {
+    const knownSessionIds = new Set(this.sessions.map((session) => session.id));
+    const result = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const sessionId of this.eligibleSessionIdsByResourceId[resourceIdArg] ?? []) {
+      if (!knownSessionIds.has(sessionId) || seen.has(sessionId)) continue;
+      seen.add(sessionId);
+      result.push(sessionId);
+    }
+    return result;
+  }
+  isResourceTargetEligible(resourceIdArg, sessionIdArg) {
+    return this.eligibleSessionIds(resourceIdArg).includes(sessionIdArg);
+  }
+  emitResource(nameArg, resourceArg, sessionIdArg) {
+    const detail = {
+      resource: resourceArg,
+      sessionId: sessionIdArg
+    };
+    this.dispatchEvent(new CustomEvent(nameArg, { detail, bubbles: true, composed: true }));
+  }
+  handleResourceContextKey(eventArg, resourceArg, sessionIdArg) {
+    if (!(eventArg.key === "ContextMenu" || eventArg.key === "F10" && eventArg.shiftKey)) return;
+    eventArg.preventDefault();
+    eventArg.stopPropagation();
+    this.emitResourceContext(
+      eventArg,
+      resourceArg,
+      sessionIdArg,
+      "keyboard",
+      eventArg.currentTarget
+    );
+  }
+  emitResourceContext(eventArg, resourceArg, sessionIdArg, sourceArg, focusTargetArg) {
+    const rect = focusTargetArg.getBoundingClientRect();
+    const contextGeneration = ++this.resourceContextGeneration;
+    this.resourceContextResourceId = resourceArg.id;
+    this.resourceContextFocusTarget = focusTargetArg;
+    this.resourceContextFocusClass = [
+      "resourceActions",
+      "resourcePrimary",
+      "resourceDragHandle"
+    ].find((className) => focusTargetArg.classList.contains(className)) ?? "resourcePrimary";
+    const detail = {
+      resource: resourceArg,
+      sessionId: sessionIdArg,
+      clientX: sourceArg === "pointer" && eventArg instanceof MouseEvent ? eventArg.clientX : rect.left + rect.width / 2,
+      clientY: sourceArg === "pointer" && eventArg instanceof MouseEvent ? eventArg.clientY : rect.bottom,
+      source: sourceArg,
+      originalEvent: eventArg,
+      requestAssociation: /* @__PURE__ */ __name((toSessionIdArg) => this.requestResourceAssociation(
+        resourceArg.id,
+        toSessionIdArg,
+        sourceArg === "keyboard" ? "keyboard" : "action"
+      ), "requestAssociation"),
+      close: /* @__PURE__ */ __name(() => this.closeResourceContext(contextGeneration), "close")
+    };
+    this.dispatchEvent(
+      new CustomEvent("harness-resource-context", { detail, bubbles: true, composed: true })
+    );
+  }
+  closeResourceContext(contextGenerationArg) {
+    if (!this.isConnected || contextGenerationArg !== this.resourceContextGeneration) return;
+    const focusTarget = this.resourceContextFocusTarget;
+    const resourceId = this.resourceContextResourceId;
+    const focusClass = this.resourceContextFocusClass;
+    this.clearResourceContextState();
+    const closeGeneration = this.resourceContextGeneration;
+    void this.updateComplete.then(() => {
+      if (!this.isConnected || closeGeneration !== this.resourceContextGeneration) return;
+      if (focusTarget?.isConnected) {
+        focusTarget.focus();
+        return;
+      }
+      const row = Array.from(
+        this.shadowRoot?.querySelectorAll(".resourceRow[data-resource-id]") ?? []
+      ).find((candidate) => candidate.dataset.resourceId === resourceId);
+      row?.querySelector(`.${focusClass || "resourcePrimary"}`)?.focus();
+    });
+  }
+  clearResourceContextState() {
+    this.resourceContextGeneration += 1;
+    this.resourceContextResourceId = "";
+    this.resourceContextFocusTarget = void 0;
+    this.resourceContextFocusClass = "";
+  }
+  reconcilePendingResourceAssociation() {
+    const pending = this.pendingResourceAssociationRequest;
+    if (!pending) return;
+    if (!this.resourcesById.has(pending.resourceId)) {
+      this.pendingResourceAssociationRequest = void 0;
+      return;
+    }
+    const currentSessionId = this.acceptedResourceAssociations.get(pending.resourceId) ?? null;
+    if (currentSessionId !== pending.toSessionId) {
+      if (currentSessionId !== pending.fromSessionId) {
+        const controlledSession = currentSessionId ? this.sessionsById.get(currentSessionId)?.title ?? currentSessionId : "unattached";
+        this.moveAnnouncement = `Association request for ${pending.resourceTitle} was not applied; controlled association is ${controlledSession}.`;
+        this.pendingResourceAssociationRequest = void 0;
+      }
+      return;
+    }
+    const fromSession = pending.fromSessionId ? this.sessionsById.get(pending.fromSessionId)?.title ?? pending.fromSessionId : "";
+    const toSession = pending.toSessionId ? this.sessionsById.get(pending.toSessionId)?.title ?? pending.toSessionId : "";
+    this.moveAnnouncement = pending.intent === "attach" ? `${pending.resourceTitle} is now attached to ${toSession}.` : pending.intent === "detach" ? `${pending.resourceTitle} is now detached from ${fromSession}.` : `${pending.resourceTitle} is now reassigned from ${fromSession} to ${toSession}.`;
+    this.pendingResourceAssociationRequest = void 0;
+  }
+  resourceAssociationAnnouncement(detailArg, completedArg) {
+    const resourceTitle = detailArg.resource.title || detailArg.resource.id;
+    const fromTitle = detailArg.fromSessionId ? this.sessionsById.get(detailArg.fromSessionId)?.title ?? detailArg.fromSessionId : "";
+    const toTitle = detailArg.toSessionId ? this.sessionsById.get(detailArg.toSessionId)?.title ?? detailArg.toSessionId : "";
+    const verb = completedArg ? "completed" : "requested";
+    return detailArg.intent === "attach" ? `Attach ${verb} for ${resourceTitle} to ${toTitle}.` : detailArg.intent === "detach" ? `Detach ${verb} for ${resourceTitle} from ${fromTitle}.` : `Reassign ${verb} for ${resourceTitle} from ${fromTitle} to ${toTitle}.`;
+  }
   async animateCardReflow(previousRectsArg, generationArg) {
     await this.updateComplete;
     if (generationArg !== this.reflowGeneration || !this.isConnected || globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
@@ -182970,7 +183545,11 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
   finishPointerDrag(commitArg) {
     const gesture = this.pointerDragGesture;
     if (!gesture) return;
-    const detail = commitArg && gesture.phase === "active" && this.dropSlot ? this.createMoveDetail(gesture.sessionId, this.dropSlot.groupId, this.dropSlot.index) : void 0;
+    const sessionMoveDetail = gesture.type === "session" && commitArg && gesture.phase === "active" && this.dropSlot ? this.createMoveDetail(gesture.sessionId, this.dropSlot.groupId, this.dropSlot.index) : void 0;
+    const resourceRequest = gesture.type === "resource" && commitArg && gesture.phase === "active" && this.resourceDropTargetSessionId ? {
+      resourceId: gesture.resourceId,
+      toSessionId: this.resourceDropTargetSessionId
+    } : void 0;
     this.pointerDragGesture = void 0;
     window.removeEventListener("keydown", this.handleDragKeyDown, true);
     window.removeEventListener("blur", this.handleDragWindowBlur);
@@ -182979,14 +183558,19 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
     this.cancelReflowAnimations();
     if (gesture.source.matches(":popover-open")) gesture.source.hidePopover();
     gesture.source.removeAttribute("popover");
-    gesture.source.classList.remove("dragging");
+    gesture.source.classList.remove("dragging", "resourceDragging");
     for (const property2 of [
       "--drag-preview-width",
       "--drag-preview-height",
       "--drag-preview-x",
-      "--drag-preview-y"
+      "--drag-preview-y",
+      "--resource-drag-preview-width",
+      "--resource-drag-preview-x",
+      "--resource-drag-preview-y"
     ]) gesture.source.style.removeProperty(property2);
     this.draggingSessionId = "";
+    this.draggingResourceId = "";
+    this.resourceDropTargetSessionId = "";
     this.draggedItemHeight = 0;
     this.dropSlot = void 0;
     try {
@@ -182995,11 +183579,18 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a91 = Dees
       }
     } catch {
     }
-    if (detail) {
+    if (sessionMoveDetail) {
       this.dispatchEvent(
-        new CustomEvent("harness-session-move", { detail, bubbles: true, composed: true })
+        new CustomEvent("harness-session-move", {
+          detail: sessionMoveDetail,
+          bubbles: true,
+          composed: true
+        })
       );
     }
+    if (resourceRequest) {
+      this.requestResourceAssociation(resourceRequest.resourceId, resourceRequest.toSessionId, "drop");
+    }
   }
   emit(name, session) {
     this.dispatchEvent(new CustomEvent(name, { detail: { session }, bubbles: true, composed: true }));
@@ -183013,8 +183604,14 @@ _emptyText2 = new WeakMap();
 _groups2 = new WeakMap();
 _enableGrouping = new WeakMap();
 _ungroupedSessionIds = new WeakMap();
+_resources = new WeakMap();
+_resourceAssociations = new WeakMap();
+_selectedResourceId = new WeakMap();
+_eligibleSessionIdsByResourceId = new WeakMap();
 _search = new WeakMap();
 _draggingSessionId = new WeakMap();
+_draggingResourceId = new WeakMap();
+_resourceDropTargetSessionId = new WeakMap();
 _dropSlot = new WeakMap();
 _draggedItemHeight = new WeakMap();
 _expandedSessionIds = new WeakMap();
@@ -183022,6 +183619,7 @@ _collapsedGroupIds = new WeakMap();
 _topScrollShadowVisible = new WeakMap();
 _bottomScrollShadowVisible = new WeakMap();
 _moveAnnouncement = new WeakMap();
+_resourceContextResourceId = new WeakMap();
 __decorateElement(_init92, 4, "sessions", _sessions_dec, _DeesHarnessSessionList, _sessions);
 __decorateElement(_init92, 4, "selectedSessionId", _selectedSessionId_dec, _DeesHarnessSessionList, _selectedSessionId);
 __decorateElement(_init92, 4, "loading", _loading_dec4, _DeesHarnessSessionList, _loading4);
@@ -183029,8 +183627,14 @@ __decorateElement(_init92, 4, "emptyText", _emptyText_dec2, _DeesHarnessSessionL
 __decorateElement(_init92, 4, "groups", _groups_dec2, _DeesHarnessSessionList, _groups2);
 __decorateElement(_init92, 4, "enableGrouping", _enableGrouping_dec, _DeesHarnessSessionList, _enableGrouping);
 __decorateElement(_init92, 4, "ungroupedSessionIds", _ungroupedSessionIds_dec, _DeesHarnessSessionList, _ungroupedSessionIds);
+__decorateElement(_init92, 4, "resources", _resources_dec, _DeesHarnessSessionList, _resources);
+__decorateElement(_init92, 4, "resourceAssociations", _resourceAssociations_dec, _DeesHarnessSessionList, _resourceAssociations);
+__decorateElement(_init92, 4, "selectedResourceId", _selectedResourceId_dec, _DeesHarnessSessionList, _selectedResourceId);
+__decorateElement(_init92, 4, "eligibleSessionIdsByResourceId", _eligibleSessionIdsByResourceId_dec, _DeesHarnessSessionList, _eligibleSessionIdsByResourceId);
 __decorateElement(_init92, 4, "search", _search_dec, _DeesHarnessSessionList, _search);
 __decorateElement(_init92, 4, "draggingSessionId", _draggingSessionId_dec, _DeesHarnessSessionList, _draggingSessionId);
+__decorateElement(_init92, 4, "draggingResourceId", _draggingResourceId_dec, _DeesHarnessSessionList, _draggingResourceId);
+__decorateElement(_init92, 4, "resourceDropTargetSessionId", _resourceDropTargetSessionId_dec, _DeesHarnessSessionList, _resourceDropTargetSessionId);
 __decorateElement(_init92, 4, "dropSlot", _dropSlot_dec, _DeesHarnessSessionList, _dropSlot);
 __decorateElement(_init92, 4, "draggedItemHeight", _draggedItemHeight_dec, _DeesHarnessSessionList, _draggedItemHeight);
 __decorateElement(_init92, 4, "expandedSessionIds", _expandedSessionIds_dec, _DeesHarnessSessionList, _expandedSessionIds);
@@ -183038,6 +183642,7 @@ __decorateElement(_init92, 4, "collapsedGroupIds", _collapsedGroupIds_dec, _Dees
 __decorateElement(_init92, 4, "topScrollShadowVisible", _topScrollShadowVisible_dec, _DeesHarnessSessionList, _topScrollShadowVisible);
 __decorateElement(_init92, 4, "bottomScrollShadowVisible", _bottomScrollShadowVisible_dec, _DeesHarnessSessionList, _bottomScrollShadowVisible);
 __decorateElement(_init92, 4, "moveAnnouncement", _moveAnnouncement_dec, _DeesHarnessSessionList, _moveAnnouncement);
+__decorateElement(_init92, 4, "resourceContextResourceId", _resourceContextResourceId_dec, _DeesHarnessSessionList, _resourceContextResourceId);
 _DeesHarnessSessionList = __decorateElement(_init92, 0, "DeesHarnessSessionList", _DeesHarnessSessionList_decorators, _DeesHarnessSessionList);
 __name(_DeesHarnessSessionList, "DeesHarnessSessionList");
 __publicField(_DeesHarnessSessionList, "demo", demoFunc65);
@@ -183288,6 +183893,12 @@ __publicField(_DeesHarnessSessionList, "styles", [
         --card-accent: var(--session-error);
       }
 
+      .item.resourceDropTarget {
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: 2px;
+        box-shadow: 0 0 0 5px var(--dees-color-focus-ring), var(--dees-shadow-lg);
+      }
+
       @keyframes attentionPulse {
         0%, 100% {
           background: color-mix(in srgb, var(--dees-color-bg-primary) 94%, var(--session-attention) 6%);
@@ -183462,6 +184073,183 @@ __publicField(_DeesHarnessSessionList, "styles", [
         font-size: var(--dees-font-caption2-size, 10px);
       }
 
+      .resourceDropLabel {
+        margin: 0 10px 10px;
+        padding: 6px 9px;
+        border-radius: var(--dees-radius-md);
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 14%, transparent);
+        color: var(--dees-color-accent-primary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 680;
+        text-align: center;
+      }
+
+      .resourceChildren {
+        display: grid;
+        gap: 4px;
+        margin: 0 8px 8px 24px;
+        padding: 0;
+        list-style: none;
+      }
+
+      .resourceSection {
+        margin-top: var(--dees-spacing-md);
+      }
+
+      .resourceSectionTitle {
+        margin: 0 0 7px;
+        padding: var(--dees-spacing-xs) 6px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 650;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+      }
+
+      .resourceList {
+        display: grid;
+        gap: var(--dees-spacing-sm);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .resourceRow {
+        display: grid;
+        grid-template-columns: 26px minmax(0, 1fr) 38px;
+        min-width: 0;
+        overflow: hidden;
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-lg);
+        background: color-mix(in srgb, var(--dees-color-bg-secondary) 76%, transparent);
+        color: var(--dees-color-text-primary);
+        box-shadow: var(--dees-shadow-xs);
+        box-sizing: border-box;
+      }
+
+      .resourceRow.selected {
+        border-color: var(--dees-color-accent-primary);
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 10%, var(--dees-color-bg-secondary));
+      }
+
+      .resourceRow.resourceDragging {
+        position: fixed;
+        inset: 0 auto auto 0;
+        width: var(--resource-drag-preview-width);
+        max-width: none;
+        margin: 0;
+        opacity: 0.96;
+        pointer-events: none;
+        transform: translate3d(var(--resource-drag-preview-x), var(--resource-drag-preview-y), 0);
+        box-shadow: var(--dees-shadow-xl);
+      }
+
+      .resourceDragHandle,
+      .resourcePrimary,
+      .resourceActions {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font-family: inherit;
+      }
+
+      .resourceDragHandle {
+        display: grid;
+        place-items: center;
+        min-width: 26px;
+        padding: 0;
+        color: var(--dees-color-text-muted);
+        cursor: grab;
+        touch-action: none;
+      }
+
+      .resourceDragHandle:disabled {
+        opacity: 0.35;
+        cursor: default;
+      }
+
+      .resourceDragHandle:not(:disabled):active {
+        cursor: grabbing;
+      }
+
+      .resourcePrimary {
+        display: flex;
+        min-width: 0;
+        min-height: 38px;
+        align-items: center;
+        gap: 7px;
+        padding: 5px 4px 5px 7px;
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .resourceIcon {
+        flex: 0 0 auto;
+        color: var(--dees-color-text-secondary);
+      }
+
+      .resourceCopy {
+        min-width: 0;
+        flex: 1;
+      }
+
+      .resourceTitle {
+        display: block;
+        overflow: hidden;
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 620;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .resourcePreview {
+        display: block;
+        overflow: hidden;
+        margin-top: 1px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption2-size, 10px);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .resourceMeta {
+        display: block;
+        overflow: hidden;
+        margin-top: 1px;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .resourceActions {
+        display: grid;
+        place-items: center;
+        min-width: 34px;
+        min-height: 34px;
+        margin: 2px;
+        padding: 0;
+        border-radius: var(--dees-radius-md);
+        color: var(--dees-color-text-muted);
+        cursor: pointer;
+      }
+
+      .resourceActions:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .resourceDragHandle:focus-visible,
+      .resourcePrimary:focus-visible,
+      .resourceActions:focus-visible {
+        z-index: 1;
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: -3px;
+        border-radius: var(--dees-radius-md);
+      }
+
       .visuallyHidden {
         position: absolute;
         width: 1px;
@@ -183588,6 +184376,33 @@ __publicField(_DeesHarnessSessionList, "styles", [
           transition: none;
         }
       }
+
+      @media (pointer: coarse) {
+        .resourceRow {
+          grid-template-columns: 44px minmax(0, 1fr) 44px;
+        }
+
+        .resourceDragHandle,
+        .resourceActions {
+          min-width: 44px;
+          min-height: 44px;
+          margin: 0;
+        }
+
+        .resourcePrimary {
+          min-height: 44px;
+        }
+      }
+
+      @media (max-width: 280px) {
+        .resourceChildren {
+          margin-left: 8px;
+        }
+
+        .resourcePreview {
+          display: none;
+        }
+      }
     `
 ]);
 __runInitializers(_init92, 1, _DeesHarnessSessionList);
@@ -186380,6 +187195,7 @@ var computeResizeDimensions = /* @__PURE__ */ __name(({
 }, "computeResizeDimensions");
 
 // ts_web/elements/00group-layout/dees-dashboardgrid/contextmenu.ts
+init_dees_contextmenu();
 init_plugins4();
 var openWidgetContextMenu = /* @__PURE__ */ __name(({
   widget,
@@ -186402,6 +187218,7 @@ var openWidgetContextMenu = /* @__PURE__ */ __name(({
 // ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.ts
 init_dist_ts26();
 init_dees_icon();
+init_dees_contextmenu();
 var _previewWidgets_dec, _resolvedMargins_dec, _metrics_dec3, _placeholderPosition_dec, _activeBreakpoint_dec, _layouts_dec, _showGridLines_dec, _rtl_dec, _cellHeightUnit_dec, _enableAnimation_dec, _editable_dec, _columns_dec3, _margin_dec, _cellHeight_dec, _widgets_dec2, _a96, _DeesDashboardgrid_decorators, _init97, _widgets2, _cellHeight, _margin, _columns3, _editable, _enableAnimation, _cellHeightUnit, _rtl, _showGridLines, _layouts, _activeBreakpoint, _placeholderPosition, _metrics3, _resolvedMargins, _previewWidgets;
 _DeesDashboardgrid_decorators = [customElement("dees-dashboardgrid")];
 var _DeesDashboardgrid = class _DeesDashboardgrid extends (_a96 = DeesElement, _widgets_dec2 = [n5({ type: Array })], _cellHeight_dec = [n5({ type: Number })], _margin_dec = [n5({ type: Object })], _columns_dec3 = [n5({ type: Number })], _editable_dec = [n5({ type: Boolean })], _enableAnimation_dec = [n5({ type: Boolean, reflect: true })], _cellHeightUnit_dec = [n5({ type: String })], _rtl_dec = [n5({ type: Boolean })], _showGridLines_dec = [n5({ type: Boolean })], _layouts_dec = [n5({ attribute: false })], _activeBreakpoint_dec = [n5({ type: String })], _placeholderPosition_dec = [r5()], _metrics_dec3 = [r5()], _resolvedMargins_dec = [r5()], _previewWidgets_dec = [r5()], _a96) {
@@ -196287,6 +197104,9 @@ __publicField(_DeesThumbnailFolder, "styles", [
 __runInitializers(_init115, 1, _DeesThumbnailFolder);
 var DeesThumbnailFolder = _DeesThumbnailFolder;
 
+// ts_web/elements/00group-overlay/dees-contextmenu/index.ts
+init_dees_contextmenu();
+
 // ts_web/elements/00group-overlay/dees-modal/index.ts
 init_dees_modal();
 
@@ -200875,6 +201695,8 @@ init_dist_ts26();
 init_dist_ts25();
 init_theme();
 init_dees_icon();
+init_dees_contextmenu();
+init_dees_contextmenu();
 init_dees_modal();
 var _errorMessage_dec, _isLoading_dec3, _treeData_dec, _selectedPath_dec, _rootPath_dec, _executionEnvironment_dec2, _a124, _DeesWorkspaceFiletree_decorators, _init127, _executionEnvironment2, _rootPath, _selectedPath, _treeData, _isLoading3, _errorMessage;
 _DeesWorkspaceFiletree_decorators = [customElement("dees-workspace-filetree")];
@@ -202181,6 +203003,7 @@ var demoFunc82 = /* @__PURE__ */ __name(() => b2`
 init_dist_ts26();
 init_theme();
 init_dees_icon();
+init_dees_contextmenu();
 var _isCheckingPackages_dec, _outdatedPackages_dec, _packageStatus_dec, _scripts_dec, _executionEnvironment_dec3, _a126, _DeesWorkspaceBottombar_decorators, _init129, _executionEnvironment3, _scripts, _packageStatus, _outdatedPackages, _isCheckingPackages;
 _DeesWorkspaceBottombar_decorators = [customElement("dees-workspace-bottombar")];
 var _DeesWorkspaceBottombar = class _DeesWorkspaceBottombar extends (_a126 = DeesElement, _executionEnvironment_dec3 = [n5({ type: Object })], _scripts_dec = [r5()], _packageStatus_dec = [r5()], _outdatedPackages_dec = [r5()], _isCheckingPackages_dec = [r5()], _a126) {
@@ -203264,6 +204087,7 @@ init_group_runtime();
 init_dees_workspace_terminal();
 init_dees_workspace_terminal();
 init_dees_icon();
+init_dees_contextmenu();
 init_dees_actionbar();
 var _diffViewConfig_dec, _showDiffView_dec, _isDraggingTerminal_dec, _isDraggingFileTree_dec, _currentTerminalHeight_dec, _currentFileTreeWidth_dec, _initOutput_dec, _initCommand_dec, _autoSave_dec, _diagnosticMarkers_dec, _activeBottomPanel_dec, _isInitializing_dec, _isFileTreeCollapsed_dec, _isTerminalCollapsed_dec, _activeFilePath_dec, _openFiles_dec, _terminalHeight_dec, _fileTreeWidth_dec, _showTerminal_dec, _showFileTree_dec, _initializationPromise_dec, _executionEnvironment_dec4, _a128, _DeesWorkspace_decorators, _init131, _executionEnvironment4, _initializationPromise, _showFileTree, _showTerminal, _fileTreeWidth, _terminalHeight, _openFiles, _activeFilePath, _isTerminalCollapsed, _isFileTreeCollapsed, _isInitializing, _activeBottomPanel, _diagnosticMarkers, _autoSave, _initCommand, _initOutput, _currentFileTreeWidth, _currentTerminalHeight, _isDraggingFileTree, _isDraggingTerminal, _showDiffView, _diffViewConfig;
 _DeesWorkspace_decorators = [customElement("dees-workspace")];
@@ -205669,7 +206493,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "6.6.0",
+  version: "6.7.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };