@design.estate/dees-catalog 4.10.0 → 4.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -46,11 +46,11 @@
   "devDependencies": {
     "@design.estate/dees-wcctools": "^3.9.2",
     "@git.zone/tsbuild": "^4.4.2",
-    "@git.zone/tsbundle": "^2.11.3",
-    "@git.zone/tstest": "^3.6.7",
+    "@git.zone/tsbundle": "^2.11.4",
+    "@git.zone/tstest": "^4.0.0",
     "@git.zone/tswatch": "^3.3.5",
     "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^26.1.1"
+    "@types/node": "^26.1.2"
   },
   "files": [
     "ts/**/*",

package/readme.md

@@ -1863,7 +1863,7 @@ Token usage chip (`in · out · total`, `compact` shows the total only); cache r
 
 Searchable, card-based conversation column for sidebars or a `DeesModal` (`harness-session-select` on click, `harness-session-open` on double-click/Enter). Cards are collapsed by default, expose an independent accessible expansion control, and auto-expand only when an already-rendered session changes from not working to `working: true`. Selection does not affect expansion.
 
-`IHarnessSessionMeta.state` accepts `normal`, `working`, `finished`, `attention`, or `error`; `working` remains an independent activity signal for expansion transitions. With `enableGrouping`, sortable cards can move within and between groups. Dragging opens a full-card drop slot and animates surrounding cards; `harness-session-move` includes both the compatibility `index` and a stable optional `beforeSessionId` anchor. Set `draggable: false` for pinned entries such as terminals. Pass `ungroupedSessionIds` to control the order outside groups; omitted or unknown entries fall back to recency order.
+`IHarnessSessionMeta.state` accepts `normal`, `working`, `finished`, `attention`, or `error`; `working` remains an independent activity signal for expansion transitions. With `enableGrouping`, sortable cards can move within and between groups. Drag from a card's focusable grip, or use its ArrowUp, ArrowDown, Home, and End keys. Pointer dragging moves a full-card preview, opens a matching drop slot, and animates surrounding cards; `harness-session-move` includes both the compatibility `index` and a stable optional `beforeSessionId` anchor. Set `draggable: false` for pinned entries such as terminals. Pass `ungroupedSessionIds` to control the order outside groups; omitted or unknown entries fall back to recency order.
 
 ---
 

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '4.10.0',
+  version: '4.11.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.demo.ts

@@ -1,5 +1,9 @@
 import { html } from '@design.estate/dees-element';
-import type { IHarnessSessionMeta } from '../interfaces.js';
+import type {
+  IHarnessSessionGroup,
+  IHarnessSessionMeta,
+  IHarnessSessionMoveDetail,
+} from '../interfaces.js';
 
 const demoSessions: IHarnessSessionMeta[] = Array.from({ length: 24 }, (_, index) => ({
   id: `session-${index}`,
@@ -19,11 +23,34 @@ const demoSessions: IHarnessSessionMeta[] = Array.from({ length: 24 }, (_, index
   working: index % 5 === 1,
 }));
 
-const demoGroups = [
+const demoGroups: IHarnessSessionGroup[] = [
   { id: 'active', name: 'Active work', sessionIds: ['session-0', 'session-1', 'session-2'] },
   { id: 'review', name: 'Review', sessionIds: ['session-3', 'session-4'] },
 ];
 
+type TDemoSessionList = HTMLElement & {
+  groups: IHarnessSessionGroup[];
+  ungroupedSessionIds: string[];
+};
+
+const handleSessionMove = (event: CustomEvent<IHarnessSessionMoveDetail>): void => {
+  const list = event.currentTarget as TDemoSessionList;
+  const { sessionId, groupId, beforeSessionId } = event.detail;
+  const groups = list.groups.map((group) => ({
+    ...group,
+    sessionIds: group.sessionIds.filter((id) => id !== sessionId),
+  }));
+  const ungroupedSessionIds = list.ungroupedSessionIds.filter((id) => id !== sessionId);
+  const targetIds = groupId === null
+    ? ungroupedSessionIds
+    : groups.find((group) => group.id === groupId)?.sessionIds;
+  if (!targetIds) return;
+  const anchorIndex = beforeSessionId ? targetIds.indexOf(beforeSessionId) : -1;
+  targetIds.splice(anchorIndex >= 0 ? anchorIndex : targetIds.length, 0, sessionId);
+  list.groups = groups;
+  list.ungroupedSessionIds = ungroupedSessionIds;
+};
+
 const openModal = async () => {
   const { DeesModal } = await import('../../00group-overlay/dees-modal/dees-modal.js');
   const content = document.createElement('dees-harness-session-list');
@@ -43,7 +70,7 @@ export const demoFunc = () => html`
   <style>
     .sessionDemo {
       display: grid;
-      grid-template-rows: auto minmax(0, 1fr);
+      grid-template-rows: auto auto minmax(0, 1fr);
       gap: 12px;
       height: 480px;
       max-width: 420px;
@@ -53,10 +80,15 @@ export const demoFunc = () => html`
       border: 1px solid var(--dees-color-border-subtle);
       background: var(--dees-color-bg-secondary);
     }
+    .demoHint {
+      color: var(--dees-color-text-secondary);
+      font-size: var(--dees-font-caption1-size, 11px);
+    }
     .sessionDemo dees-harness-session-list { min-height: 0; }
   </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>
     <dees-harness-session-list
       .sessions=${demoSessions}
       .groups=${demoGroups}
@@ -64,6 +96,7 @@ export const demoFunc = () => html`
       .enableGrouping=${true}
       selectedSessionId="session-2"
       @harness-session-select=${(event: CustomEvent) => console.log('select', event.detail.session)}
+      @harness-session-move=${handleSessionMove}
     ></dees-harness-session-list>
   </div>
 `;