@design.estate/dees-catalog 3.100.0 → 3.102.0

package/dist_bundle/bundle.js

@@ -176423,16 +176423,38 @@ var demoFunc63 = /* @__PURE__ */ __name(() => b2`
 init_dist_ts25();
 init_theme();
 init_dees_icon();
-var _search_dec, _emptyText_dec2, _loading_dec4, _selectedSessionId_dec, _sessions_dec, _a88, _DeesHarnessSessionList_decorators, _init89, _sessions, _selectedSessionId, _loading4, _emptyText2, _search;
+var _collapsedGroupIds_dec, _dropSlot_dec, _draggingSessionId_dec, _search_dec, _enableGrouping_dec, _groups_dec2, _emptyText_dec2, _loading_dec4, _selectedSessionId_dec, _sessions_dec, _a88, _DeesHarnessSessionList_decorators, _init89, _sessions, _selectedSessionId, _loading4, _emptyText2, _groups2, _enableGrouping, _search, _draggingSessionId, _dropSlot, _collapsedGroupIds;
 _DeesHarnessSessionList_decorators = [customElement("dees-harness-session-list")];
-var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a88 = DeesElement, _sessions_dec = [n5({ attribute: false })], _selectedSessionId_dec = [n5()], _loading_dec4 = [n5({ type: Boolean })], _emptyText_dec2 = [n5()], _search_dec = [r5()], _a88) {
+var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a88 = 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 })], _search_dec = [r5()], _draggingSessionId_dec = [r5()], _dropSlot_dec = [r5()], _collapsedGroupIds_dec = [r5()], _a88) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _sessions, __runInitializers(_init89, 8, this, [])), __runInitializers(_init89, 11, this);
     __privateAdd(this, _selectedSessionId, __runInitializers(_init89, 12, this, "")), __runInitializers(_init89, 15, this);
     __privateAdd(this, _loading4, __runInitializers(_init89, 16, this, false)), __runInitializers(_init89, 19, this);
     __privateAdd(this, _emptyText2, __runInitializers(_init89, 20, this, "No conversations yet.")), __runInitializers(_init89, 23, this);
-    __privateAdd(this, _search, __runInitializers(_init89, 24, this, "")), __runInitializers(_init89, 27, this);
+    __privateAdd(this, _groups2, __runInitializers(_init89, 24, this, [])), __runInitializers(_init89, 27, this);
+    __privateAdd(this, _enableGrouping, __runInitializers(_init89, 28, this, false)), __runInitializers(_init89, 31, this);
+    __privateAdd(this, _search, __runInitializers(_init89, 32, this, "")), __runInitializers(_init89, 35, this);
+    __privateAdd(this, _draggingSessionId, __runInitializers(_init89, 36, this, "")), __runInitializers(_init89, 39, this);
+    __privateAdd(this, _dropSlot, __runInitializers(_init89, 40, this)), __runInitializers(_init89, 43, this);
+    __privateAdd(this, _collapsedGroupIds, __runInitializers(_init89, 44, this, /* @__PURE__ */ new Set())), __runInitializers(_init89, 47, this);
+  }
+  get sessionsById() {
+    return new Map(this.sessions.map((session) => [session.id, session]));
+  }
+  get groupedSessionIds() {
+    const ids = /* @__PURE__ */ new Set();
+    for (const group of this.groups) {
+      for (const id of group.sessionIds) ids.add(id);
+    }
+    return ids;
+  }
+  /** Ungrouped sessions, most recent first. */
+  get ungroupedSessions() {
+    const grouped = this.groupedSessionIds;
+    return [...this.sessions].filter((session) => !grouped.has(session.id)).sort(
+      (left, right) => (right.updatedAt ?? right.createdAt ?? 0) - (left.updatedAt ?? left.createdAt ?? 0)
+    );
   }
   get filteredSessions() {
     const query3 = this.search.trim().toLowerCase();
@@ -176448,7 +176470,7 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a88 = Dees
     this.shadowRoot?.querySelector(".searchRow input")?.focus();
   }
   render() {
-    const sessions = this.filteredSessions;
+    const groupingActive = this.enableGrouping && !this.search.trim();
     return b2`
       <div class="searchRow">
         <input
@@ -176460,19 +176482,149 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a88 = Dees
         />
       </div>
       <div class="list">
-        ${this.loading ? b2`<div class="emptyNote">Loading conversations…</div>` : sessions.length ? sessions.map((session) => this.renderItem(session)) : b2`<div class="emptyNote">${this.sessions.length ? "No conversations match this search." : this.emptyText}</div>`}
+        ${this.loading ? b2`<div class="emptyNote">Loading conversations…</div>` : groupingActive ? this.renderGroupedList() : this.renderFlatList()}
       </div>
+      ${groupingActive ? b2`
+            <div class="newGroupRow">
+              <button
+                class="newGroupButton"
+                type="button"
+                @click=${() => {
+      this.dispatchEvent(
+        new CustomEvent("harness-group-create-request", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    }}
+              >
+                <dees-icon icon="lucide:FolderPlus" iconSize="13"></dees-icon>
+                New group
+              </button>
+            </div>
+          ` : ""}
     `;
   }
-  renderItem(session) {
+  renderFlatList() {
+    const sessions = this.filteredSessions;
+    if (!sessions.length) {
+      return b2`<div class="emptyNote">
+        ${this.sessions.length ? "No conversations match this search." : this.emptyText}
+      </div>`;
+    }
+    return b2`${sessions.map((session) => this.renderItem(session, null, -1))}`;
+  }
+  renderGroupedList() {
+    const byId = this.sessionsById;
+    const ungrouped = this.ungroupedSessions;
+    if (!this.sessions.length && !this.groups.length) {
+      return b2`<div class="emptyNote">${this.emptyText}</div>`;
+    }
+    return b2`
+      ${this.groups.map((group) => {
+      const members = group.sessionIds.map((id) => byId.get(id)).filter((session) => session !== void 0);
+      const collapsed = this.collapsedGroupIds.has(group.id);
+      const isHeaderDrop = this.dropSlot?.groupId === group.id && this.dropSlot.index === members.length && collapsed;
+      return b2`
+          <button
+            class="groupHeader ${collapsed ? "collapsed" : ""} ${isHeaderDrop ? "dropTarget" : ""}"
+            type="button"
+            @click=${() => this.toggleGroupCollapsed(group.id)}
+            @contextmenu=${(event) => {
+        event.preventDefault();
+        const detail = {
+          group,
+          clientX: event.clientX,
+          clientY: event.clientY,
+          originalEvent: event
+        };
+        this.dispatchEvent(
+          new CustomEvent("harness-group-context", { detail, bubbles: true, composed: true })
+        );
+      }}
+            @dragover=${(event) => this.handleDragOverSlot(event, group.id, members.length)}
+            @drop=${(event) => this.handleDrop(event, group.id, members.length)}
+          >
+            <dees-icon class="chevron" icon="lucide:ChevronDown" iconSize="12"></dees-icon>
+            <span>${group.name}</span>
+            <span class="groupCount">${members.length}</span>
+          </button>
+          ${collapsed ? "" : this.renderSection(members, group.id)}
+        `;
+    })}
+      ${this.groups.length && ungrouped.length ? b2`
+            <button
+              class="groupHeader"
+              type="button"
+              tabindex="-1"
+              @dragover=${(event) => this.handleDragOverSlot(event, null, 0)}
+              @drop=${(event) => this.handleDrop(event, null, 0)}
+            >
+              <span>Ungrouped</span>
+              <span class="groupCount">${ungrouped.length}</span>
+            </button>
+          ` : ""}
+      ${this.renderSection(ungrouped, null)}
+    `;
+  }
+  renderSection(sessions, groupId) {
+    const slot = this.dropSlot;
+    return b2`
+      ${sessions.map(
+      (session, index3) => b2`
+          ${slot && slot.groupId === groupId && slot.index === index3 ? b2`<div class="dropLine"></div>` : ""}
+          ${this.renderItem(session, groupId, index3)}
+        `
+    )}
+      ${slot && slot.groupId === groupId && slot.index === sessions.length ? b2`<div class="dropLine"></div>` : ""}
+    `;
+  }
+  renderItem(session, groupId, index3) {
+    const draggable = this.enableGrouping && index3 >= 0;
     return b2`
       <button
-        class="item ${session.id === this.selectedSessionId ? "selected" : ""}"
+        class="item ${session.id === this.selectedSessionId ? "selected" : ""} ${this.draggingSessionId === session.id ? "dragging" : ""}"
         type="button"
+        draggable=${draggable ? "true" : "false"}
         @click=${() => this.emit("harness-session-select", session)}
         @dblclick=${() => this.emit("harness-session-open", session)}
         @keydown=${(event) => {
       if (event.key === "Enter") this.emit("harness-session-open", session);
+    }}
+        @contextmenu=${(event) => {
+      event.preventDefault();
+      const detail = {
+        session,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        originalEvent: event
+      };
+      this.dispatchEvent(
+        new CustomEvent("harness-session-context", { detail, bubbles: true, composed: true })
+      );
+    }}
+        @dragstart=${(event) => {
+      if (!draggable) return;
+      this.draggingSessionId = session.id;
+      event.dataTransfer?.setData("text/plain", session.id);
+      if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+    }}
+        @dragend=${() => {
+      this.draggingSessionId = "";
+      this.dropSlot = void 0;
+    }}
+        @dragover=${(event) => {
+      if (!this.draggingSessionId || index3 < 0) return;
+      event.preventDefault();
+      const rect = event.currentTarget.getBoundingClientRect();
+      const before = event.clientY < rect.top + rect.height / 2;
+      this.setDropSlot(groupId, before ? index3 : index3 + 1);
+    }}
+        @drop=${(event) => {
+      if (index3 < 0) return;
+      const rect = event.currentTarget.getBoundingClientRect();
+      const before = event.clientY < rect.top + rect.height / 2;
+      this.handleDrop(event, groupId, before ? index3 : index3 + 1);
     }}
       >
         <span class="itemTitle">
@@ -176483,6 +176635,41 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a88 = Dees
       </button>
     `;
   }
+  toggleGroupCollapsed(groupIdArg) {
+    const next2 = new Set(this.collapsedGroupIds);
+    if (next2.has(groupIdArg)) {
+      next2.delete(groupIdArg);
+    } else {
+      next2.add(groupIdArg);
+    }
+    this.collapsedGroupIds = next2;
+  }
+  setDropSlot(groupIdArg, indexArg) {
+    const current = this.dropSlot;
+    if (current && current.groupId === groupIdArg && current.index === indexArg) return;
+    this.dropSlot = { groupId: groupIdArg, index: indexArg };
+  }
+  handleDragOverSlot(event, groupIdArg, indexArg) {
+    if (!this.draggingSessionId) return;
+    event.preventDefault();
+    this.setDropSlot(groupIdArg, indexArg);
+  }
+  handleDrop(event, groupIdArg, indexArg) {
+    event.preventDefault();
+    event.stopPropagation();
+    const sessionId = this.draggingSessionId || event.dataTransfer?.getData("text/plain") || "";
+    this.draggingSessionId = "";
+    this.dropSlot = void 0;
+    if (!sessionId) return;
+    const detail = {
+      sessionId,
+      groupId: groupIdArg,
+      index: Math.max(0, indexArg)
+    };
+    this.dispatchEvent(
+      new CustomEvent("harness-session-move", { detail, bubbles: true, composed: true })
+    );
+  }
   emit(name, session) {
     this.dispatchEvent(new CustomEvent(name, { detail: { session }, bubbles: true, composed: true }));
   }
@@ -176492,12 +176679,22 @@ _sessions = new WeakMap();
 _selectedSessionId = new WeakMap();
 _loading4 = new WeakMap();
 _emptyText2 = new WeakMap();
+_groups2 = new WeakMap();
+_enableGrouping = new WeakMap();
 _search = new WeakMap();
+_draggingSessionId = new WeakMap();
+_dropSlot = new WeakMap();
+_collapsedGroupIds = new WeakMap();
 __decorateElement(_init89, 4, "sessions", _sessions_dec, _DeesHarnessSessionList, _sessions);
 __decorateElement(_init89, 4, "selectedSessionId", _selectedSessionId_dec, _DeesHarnessSessionList, _selectedSessionId);
 __decorateElement(_init89, 4, "loading", _loading_dec4, _DeesHarnessSessionList, _loading4);
 __decorateElement(_init89, 4, "emptyText", _emptyText_dec2, _DeesHarnessSessionList, _emptyText2);
+__decorateElement(_init89, 4, "groups", _groups_dec2, _DeesHarnessSessionList, _groups2);
+__decorateElement(_init89, 4, "enableGrouping", _enableGrouping_dec, _DeesHarnessSessionList, _enableGrouping);
 __decorateElement(_init89, 4, "search", _search_dec, _DeesHarnessSessionList, _search);
+__decorateElement(_init89, 4, "draggingSessionId", _draggingSessionId_dec, _DeesHarnessSessionList, _draggingSessionId);
+__decorateElement(_init89, 4, "dropSlot", _dropSlot_dec, _DeesHarnessSessionList, _dropSlot);
+__decorateElement(_init89, 4, "collapsedGroupIds", _collapsedGroupIds_dec, _DeesHarnessSessionList, _collapsedGroupIds);
 _DeesHarnessSessionList = __decorateElement(_init89, 0, "DeesHarnessSessionList", _DeesHarnessSessionList_decorators, _DeesHarnessSessionList);
 __name(_DeesHarnessSessionList, "DeesHarnessSessionList");
 __publicField(_DeesHarnessSessionList, "demo", demoFunc63);
@@ -176574,6 +176771,10 @@ __publicField(_DeesHarnessSessionList, "styles", [
         box-shadow: inset 2px 0 0 var(--dees-color-accent-primary);
       }
 
+      .item.dragging {
+        opacity: 0.4;
+      }
+
       .itemTitle {
         display: flex;
         align-items: baseline;
@@ -176611,6 +176812,83 @@ __publicField(_DeesHarnessSessionList, "styles", [
         font-size: var(--dees-font-control-size-sm, 12px);
         text-align: center;
       }
+
+      .groupHeader {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        width: 100%;
+        margin-top: var(--dees-spacing-xs);
+        padding: 2px var(--dees-spacing-sm);
+        border: 0;
+        border-radius: var(--dees-radius-md);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 650;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        text-align: left;
+      }
+
+      .groupHeader:hover {
+        background: var(--dees-color-hover);
+      }
+
+      .groupHeader .chevron {
+        transition: transform var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .groupHeader.collapsed .chevron {
+        transform: rotate(-90deg);
+      }
+
+      .groupHeader .groupCount {
+        margin-left: auto;
+        font-weight: 500;
+        text-transform: none;
+        letter-spacing: normal;
+        color: var(--dees-color-text-muted);
+      }
+
+      .groupHeader.dropTarget {
+        outline: 1px dashed var(--dees-color-accent-primary);
+        outline-offset: -1px;
+      }
+
+      .dropLine {
+        height: 2px;
+        margin: 0 var(--dees-spacing-sm);
+        border-radius: 1px;
+        background: var(--dees-color-accent-primary);
+      }
+
+      .newGroupRow {
+        flex: 0 0 auto;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm) var(--dees-spacing-sm);
+      }
+
+      .newGroupButton {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        width: 100%;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border: 1px dashed var(--dees-color-border-default);
+        border-radius: var(--dees-radius-md);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      .newGroupButton:hover {
+        border-color: var(--dees-color-accent-primary);
+        color: var(--dees-color-text-primary);
+      }
     `
 ]);
 __runInitializers(_init89, 1, _DeesHarnessSessionList);
@@ -198387,7 +198665,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.100.0",
+  version: "3.102.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.100.0',
+    version: '3.102.0',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxTQUFTO0lBQ2xCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9

package/dist_ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.d.ts

@@ -1,15 +1,28 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
-import type { IHarnessSessionMeta } from '../interfaces.js';
+import type { IHarnessSessionGroup, IHarnessSessionMeta } from '../interfaces.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 declare global {
     interface HTMLElementTagNameMap {
         'dees-harness-session-list': DeesHarnessSessionList;
     }
 }
+interface IDropSlot {
+    groupId: string | null;
+    index: number;
+}
 /**
  * Searchable conversation list, embeddable in a sidebar or a DeesModal.
- * Emits `harness-session-select` on click and `harness-session-open` on
- * double-click or Enter.
+ * Emits `harness-session-select` on click, `harness-session-open` on
+ * double-click or Enter, and `harness-session-context` with viewport
+ * pointer coordinates on right-click (the browser menu is suppressed).
+ *
+ * With `enableGrouping`, sessions render under user-defined `groups` and can
+ * be dragged between groups and reordered. The component never mutates its
+ * inputs: drops emit `harness-session-move`, the "new group" button emits
+ * `harness-group-create-request`, and right-clicking a group header emits
+ * `harness-group-context` — the host persists changes and passes fresh
+ * `groups` back in. Sessions in no group render in the trailing ungrouped
+ * section, recency-sorted. While a search query is active the list is flat.
  */
 export declare class DeesHarnessSessionList extends DeesElement {
     static demo: () => TemplateResult<1>;
@@ -18,11 +31,28 @@ export declare class DeesHarnessSessionList extends DeesElement {
     accessor selectedSessionId: string;
     accessor loading: boolean;
     accessor emptyText: string;
+    accessor groups: IHarnessSessionGroup[];
+    accessor enableGrouping: boolean;
     accessor search: string;
+    accessor draggingSessionId: string;
+    accessor dropSlot: IDropSlot | undefined;
+    accessor collapsedGroupIds: ReadonlySet<string>;
     static styles: import("@design.estate/dees-element").CSSResult[];
+    private get sessionsById();
+    private get groupedSessionIds();
+    /** Ungrouped sessions, most recent first. */
+    private get ungroupedSessions();
     private get filteredSessions();
     focusSearch(): void;
     render(): TemplateResult;
+    private renderFlatList;
+    private renderGroupedList;
+    private renderSection;
     private renderItem;
+    private toggleGroupCollapsed;
+    private setDropSlot;
+    private handleDragOverSlot;
+    private handleDrop;
     private emit;
 }
+export {};