@design.estate/dees-catalog 9.7.0 → 10.0.0

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '9.7.0',
+  version: '10.0.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/00actionerror.ts

@@ -0,0 +1,66 @@
+import { DeesToast } from './00group-feedback/dees-toast/dees-toast.js';
+
+/** Payload of the cancelable `dees-action-error` event. */
+export interface IActionErrorDetail<TAction = unknown> {
+  /** Whatever the action callback rejected with. */
+  error: unknown;
+  /** The action descriptor whose callback rejected. */
+  action: TAction;
+  /**
+   * Where the action was invoked from. Catalog sources are `modal-menu`,
+   * `table-header`, `table-footer`, `table-row`, `table-rowmenu`,
+   * `table-contextmenu` and `table-doubleclick`.
+   */
+  source: string;
+}
+
+/** The event a component dispatches before it falls back to a toast. */
+export const actionErrorEventName = 'dees-action-error';
+
+/** Human-readable text for an unknown rejection value. */
+export const actionErrorMessage = (errorArg: unknown): string => {
+  if (errorArg instanceof Error) return errorArg.message || errorArg.name;
+  if (typeof errorArg === 'string' && errorArg) return errorArg;
+  const text = String(errorArg);
+  return text === '[object Object]' || text === 'undefined' || text === 'null' ? 'The action failed.' : text;
+};
+
+/**
+ * Announces a failed action on `hostArg` and, unless a listener cancels the
+ * event, surfaces it through the catalog's own notification primitive. The
+ * event is cancelable so an application can render its own error surface.
+ */
+export const reportActionError = <TAction>(
+  hostArg: HTMLElement,
+  detailArg: IActionErrorDetail<TAction>,
+  ownerElementArg?: Node | null,
+): void => {
+  const handled = !hostArg.dispatchEvent(new CustomEvent<IActionErrorDetail<TAction>>(actionErrorEventName, {
+    detail: detailArg,
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+  }));
+  if (handled) return;
+  void DeesToast.show({
+    message: actionErrorMessage(detailArg.error),
+    type: 'error',
+    ownerElement: ownerElementArg ?? undefined,
+  });
+};
+
+/**
+ * Awaits an action callback so a rejected promise becomes a visible failure
+ * instead of an unhandled rejection. Successful actions resolve unchanged.
+ */
+export const runAction = async <TAction>(
+  hostArg: HTMLElement,
+  detailArg: { action: TAction; source: string; ownerElement?: Node | null },
+  runArg: () => unknown,
+): Promise<void> => {
+  try {
+    await runArg();
+  } catch (error) {
+    reportActionError(hostArg, { error, action: detailArg.action, source: detailArg.source }, detailArg.ownerElement);
+  }
+};

package/ts_web/elements/00group-appui/dees-appui/dees-appui.ts

@@ -1134,6 +1134,10 @@ export class DeesAppui extends DeesElement {
 
     // Resolve the initial route once; a deep link takes precedence over the default.
     const initialRoute = this.viewRegistry.findByRoute(window.location.hash.slice(1));
+    const initialViewId = initialRoute?.view.id ?? config.defaultView;
+    // Mark the menu before it first renders: its first-tab auto-selection would otherwise
+    // queue a navigation that races the initial route and can replace a deep link.
+    if (initialViewId) this.setMainMenuSelection(initialViewId);
     if (initialRoute) {
       void this.queueNavigation(initialRoute.view.id, initialRoute.params, initialRoute.query, 'replace');
     } else if (config.defaultView) {

package/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts

@@ -442,7 +442,7 @@ export class DeesAppuiTabs extends DeesElement {
   }
 
   private renderTab(tab: interfaces.IMenuItem, _isHorizontal: boolean): TemplateResult {
-    const isSelected = tab === this.selectedTab;
+    const isSelected = this.isTabSelected(tab);
     const label = tab.label ?? tab.key;
     return html`<div class="tab ${isSelected ? 'selectedTab' : ''} ${isSelected && this.showTabIndicator ? 'has-indicator' : ''}" role="presentation">
       <button type="button" class="tab-select" role="tab" title=${label} aria-selected=${isSelected} tabindex=${isSelected ? 0 : -1}
@@ -494,6 +494,29 @@ export class DeesAppuiTabs extends DeesElement {
     return tab.iconName ? html`<dees-icon .icon=${tab.iconName}></dees-icon>` : '';
   }
 
+  /**
+   * The stable identity of a tab descriptor. `key` is the documented
+   * identifier; `label` is the fallback for descriptors that carry only a
+   * display name.
+   */
+  private tabKey(tabArg: interfaces.IMenuItem | null | undefined): string | undefined {
+    return tabArg ? (tabArg.key ?? tabArg.label) : undefined;
+  }
+
+  /** The current descriptor for a selection, matched by key rather than by object identity. */
+  private findTabByKey(tabArg: interfaces.IMenuItem | null): interfaces.IMenuItem | undefined {
+    const key = this.tabKey(tabArg);
+    if (key === undefined) return this.tabs.find((tab) => tab === tabArg);
+    return this.tabs.find((tab) => this.tabKey(tab) === key);
+  }
+
+  private isTabSelected(tabArg: interfaces.IMenuItem): boolean {
+    if (!this.selectedTab) return false;
+    if (tabArg === this.selectedTab) return true;
+    const key = this.tabKey(tabArg);
+    return key !== undefined && key === this.tabKey(this.selectedTab);
+  }
+
   private selectTab(tabArg: interfaces.IMenuItem) {
     this.selectedTab = tabArg;
     tabArg.action();
@@ -612,6 +635,19 @@ export class DeesAppuiTabs extends DeesElement {
     }
   }
 
+  /**
+   * A host that binds a literal `.tabs=${[...]}` hands us new descriptor
+   * objects on every render. The selection follows the descriptor key, so the
+   * open view survives a rerender; adopting the fresh object here keeps index
+   * lookups (close, scroll-into-view) working without re-running the action.
+   */
+  public willUpdate(changedProperties: Map<string, any>) {
+    super.willUpdate(changedProperties);
+    if (!changedProperties.has('tabs') || !this.selectedTab) return;
+    const current = this.findTabByKey(this.selectedTab);
+    if (current && current !== this.selectedTab) this.selectedTab = current;
+  }
+
   async updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
@@ -626,7 +662,7 @@ export class DeesAppuiTabs extends DeesElement {
             composed: true,
           }));
         }
-      } else if (this.selectedTab && !this.tabs.includes(this.selectedTab)) {
+      } else if (this.selectedTab && !this.findTabByKey(this.selectedTab)) {
         // Selected tab was removed => select first available
         this.selectTab(this.tabs[0]);
       } else if (!this.selectedTab) {

package/ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -28,6 +28,7 @@ import {
 } from './data.js';
 import { compileLucenePredicate } from './lucene.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import { runAction } from '../../00actionerror.js';
 import '../../00group-layout/dees-tile/dees-tile.js';
 
 export type { Column, ISortDescriptor, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';
@@ -614,12 +615,7 @@ export class DeesTable<T> extends DeesElement {
             ${headerActions.map(
               (action) => html`<button type="button"
                 class="headerAction control"
-                @click=${() => {
-                  action.actionFunc({
-                    item: this.selectedDataRow,
-                    table: this,
-                  });
-                }}
+                @click=${() => this.runDataAction(action, this.selectedDataRow, 'table-header')}
               >
                 ${action.iconName
                   ? html`<dees-icon aria-hidden="true" .iconSize=${14} .icon=${action.iconName}></dees-icon>
@@ -755,12 +751,7 @@ export class DeesTable<T> extends DeesElement {
             ${footerActions.map(
               (action) => html`<button type="button"
                 class="footerAction control"
-                @click=${() => {
-                  action.actionFunc({
-                    item: this.selectedDataRow,
-                    table: this,
-                  });
-                }}
+                @click=${() => this.runDataAction(action, this.selectedDataRow, 'table-footer')}
               >
                 ${action.iconName
                   ? html`<dees-icon aria-hidden="true" .iconSize=${14} .icon=${action.iconName}></dees-icon>
@@ -1586,7 +1577,7 @@ export class DeesTable<T> extends DeesElement {
     return html`<td class="actionsCol"><div class="actionsContainer">
       ${relevant.slice(0, 3).map((action) => html`<button type="button" class="action control primaryRowAction"
         title=${action.name} aria-label=${action.name} @keydown=${this.handleMenuKey}
-        @click=${() => action.actionFunc({ item, table: this })}>
+        @click=${() => this.runDataAction(action, item, 'table-row')}>
         ${action.iconName ? html`<dees-icon aria-hidden="true" .icon=${action.iconName} iconSize="16"></dees-icon>` : action.name}
       </button>`)}
       ${overflow.length ? menuButton(overflow, 'primaryRowAction', 'More actions') : ''}
@@ -1597,7 +1588,7 @@ export class DeesTable<T> extends DeesElement {
   private openRowActionsMenu(event: MouseEvent, item: T, actions: ITableAction<T>[]) {
     void DeesContextmenu.openContextMenuWithOptions(event, actions.map((action) => ({
       name: action.name, iconName: action.iconName,
-      action: async () => { await action.actionFunc({ item, table: this }); return null; },
+      action: async () => { await this.runDataAction(action, item, 'table-rowmenu'); return null; },
     })));
   }
 
@@ -2145,7 +2136,7 @@ export class DeesTable<T> extends DeesElement {
         action.type?.includes('doubleClick')
         && this.isActionRelevant(action, cell.item)
     );
-    if (dblAction) dblAction.actionFunc({ item: cell.item, table: this });
+    if (dblAction) void this.runDataAction(dblAction, cell.item, 'table-doubleclick');
   };
 
   private __onTbodyMousedown = (eventArg: MouseEvent) => {
@@ -2178,7 +2169,7 @@ export class DeesTable<T> extends DeesElement {
           name: action.name,
           iconName: action.iconName as any,
           action: async () => {
-            await action.actionFunc({ item, table: this });
+            await this.runDataAction(action, item, 'table-contextmenu');
             return null;
           },
         })
@@ -2361,6 +2352,17 @@ export class DeesTable<T> extends DeesElement {
     );
   }
 
+  /**
+   * Runs a data action and awaits it, so a rejected callback surfaces as a
+   * visible failure instead of an unhandled rejection. The error is announced
+   * on the table through the cancelable `dees-action-error` event and, unless
+   * a listener cancels it, shown as a notification.
+   */
+  private async runDataAction(actionArg: ITableAction<T>, itemArg: T, sourceArg: string): Promise<void> {
+    await runAction(this, { action: actionArg, source: sourceArg, ownerElement: this }, () =>
+      actionArg.actionFunc({ item: itemArg, table: this }));
+  }
+
   private isActionRelevant(actionArg: ITableAction<T>, itemArg: T): boolean {
     return (
       !actionArg.actionRelevancyCheckFunc

package/ts_web/elements/00group-feedback/dees-hint/dees-hint.demo.ts

@@ -1,5 +1,24 @@
 import { html } from '@design.estate/dees-element';
+import { demoPage, demoSection, demoCode } from '../../../demos/templates.js';
 
-export const demoFunc = () => html`
-  <dees-hint></dees-hint>
-`;
+export const demoFunc = () => demoPage('Hint', 'An inline note next to the thing it explains. Four types carry the catalog status colors; a plain sentence or slotted markup both work.', html`
+  ${demoSection('Types', 'The type chooses the icon and the accent color. Info is the default.', html`
+    <dees-hint text="Workspace names are visible to everyone you invite."></dees-hint>
+    <dees-hint type="success" text="Your changes are saved and shared with your team."></dees-hint>
+    <dees-hint type="warning" text="This workspace has no owner. Assign one before the trial ends."></dees-hint>
+    <dees-hint type="error" text="The deployment could not reach the registry."></dees-hint>
+    ${demoCode('<dees-hint type="warning" text="Assign an owner before the trial ends."></dees-hint>')}
+  `)}
+  ${demoSection('Slotted content', 'Use the default slot when the note needs markup. Text and slotted content render together.', html`
+    <dees-hint type="info">Read the <a href="https://code.foss.global/design.estate/dees-catalog">component index</a> before adding a control.</dees-hint>
+    <dees-hint type="warning" text="Rotation is due.">
+      <strong> Keys older than 90 days stop working.</strong>
+    </dees-hint>
+    ${demoCode('<dees-hint type="info">Read the <a href="…">component index</a> first.</dees-hint>')}
+  `)}
+  ${demoSection('Empty hints', 'A hint with neither text nor slotted content reserves no space, so a conditional note needs no wrapper.', html`
+    <p class="dees-demo-caption">There is an empty hint between these two lines.</p>
+    <dees-hint></dees-hint>
+    <p class="dees-demo-caption">It renders nothing until it is given text.</p>
+  `)}
+`);

package/ts_web/elements/00group-feedback/dees-hint/dees-hint.ts

@@ -5,13 +5,14 @@ import {
   customElement,
   html,
   property,
-  type CSSResult,
+  state,
   type TemplateResult,
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-hint.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,13 +20,34 @@ declare global {
   }
 }
 
+export type THintType = 'info' | 'success' | 'warning' | 'error';
+
+const hintIcons: Record<THintType, string> = {
+  info: 'lucide:Info',
+  success: 'lucide:CircleCheck',
+  warning: 'lucide:TriangleAlert',
+  error: 'lucide:CircleAlert',
+};
+
+/**
+ * An inline advisory note next to the thing it explains. Use `text` for a plain
+ * sentence and the default slot for markup; both render when both are set.
+ * For a hover-revealed label on a control, use the control's own tooltip.
+ */
 @customElement('dees-hint')
 export class DeesHint extends DeesElement {
   public static demo = demoFunc;
   public static demoGroups = ['Feedback'];
 
+  @property({ type: String, reflect: true })
+  accessor type: THintType = 'info';
+
+  /** The hint sentence. Rendered before any slotted content. */
   @property({ type: String })
-  accessor type: 'info' | 'warn' | 'error' | 'critical' = 'info';
+  accessor text: string = '';
+
+  @state()
+  private accessor hasSlottedContent = false;
 
   constructor() {
     super();
@@ -37,14 +59,60 @@ export class DeesHint extends DeesElement {
         display: block;
         font-family: var(--dees-font-family);
         color: var(--dees-color-text-primary);
+        --dees-hint-accent: var(--dees-color-accent-primary);
       }
 
+      :host([type='success']) { --dees-hint-accent: var(--dees-color-text-success); }
+      :host([type='warning']) { --dees-hint-accent: var(--dees-color-text-warning); }
+      :host([type='error']) { --dees-hint-accent: var(--dees-color-text-error); }
+
       .mainbox {
         box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border: 1px solid color-mix(in srgb, var(--dees-hint-accent) 28%, transparent);
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        background: color-mix(in srgb, var(--dees-hint-accent) 8%, transparent);
+        font-size: var(--dees-font-footnote-size);
+        line-height: var(--dees-font-footnote-line);
+        overflow-wrap: anywhere;
+      }
+
+      /* An element with neither text nor slotted content reserves no space. */
+      .mainbox.empty {
+        display: none;
+      }
+
+      .icon {
+        flex-shrink: 0;
+        color: var(--dees-hint-accent);
+        font-size: 16px;
+        /* Optically aligns the glyph with the first line of text. */
+        margin-top: 1px;
+      }
+
+      .content {
+        min-width: 0;
+        color: var(--dees-color-text-secondary);
       }
     `];
 
   public render(): TemplateResult {
-    return html` <div class="mainbox"></div> `;
+    const isEmpty = !this.text && !this.hasSlottedContent;
+    return html`
+      <div class="mainbox ${isEmpty ? 'empty' : ''}" role="note">
+        <dees-icon class="icon" aria-hidden="true" .icon=${hintIcons[this.type] ?? hintIcons.info}></dees-icon>
+        <div class="content">${this.text}<slot @slotchange=${this.handleSlotChange}></slot></div>
+      </div>
+    `;
   }
+
+  private handleSlotChange = (eventArg: Event) => {
+    const assigned = (eventArg.target as HTMLSlotElement).assignedNodes({ flatten: true });
+    this.hasSlottedContent = assigned.some((node) =>
+      node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim().length > 0);
+  };
 }

package/ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.ts

@@ -264,7 +264,12 @@ export class DeesHarnessComposer extends DeesElement {
         border: 0;
         border-top: 1px solid var(--dees-color-border-subtle);
         border-radius: 0;
-        padding: 10px 16px 12px;
+        /*
+         * The docked bar stays full-bleed — its background and top border belong to the whole
+         * column — while its content is inset to the transcript's measure, so the prompt lines up
+         * with the messages above it instead of floating as a narrower block.
+         */
+        padding: 10px max(16px, calc((100% - var(--dees-harness-content-width, 820px)) / 2)) 12px;
       }
 
       :host([docked]) .composer.dragOver {
@@ -467,7 +472,7 @@ export class DeesHarnessComposer extends DeesElement {
     this.value = '';
     this.resetSuggestionInteraction();
     this.emitInput('');
-    this.autogrow();
+    // Height is resized in updated(); measuring here would read the textarea before it rerenders.
   }
 
   public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
@@ -481,6 +486,10 @@ export class DeesHarnessComposer extends DeesElement {
       this.attachmentGeneration++;
       if (!this.attachmentsEnabled || this.disabled) this.handleDragLeave();
     }
+    // The grown height is an inline style, so it has to be recomputed for every value change
+    // regardless of origin. A host that clears its bound value after send would otherwise leave
+    // the composer stuck at the height of the message it just sent.
+    if (changedProperties.has('value')) this.autogrow();
     this.syncTextareaSuggestionAria();
   }
 
@@ -714,7 +723,7 @@ export class DeesHarnessComposer extends DeesElement {
     this.value = (event.currentTarget as HTMLTextAreaElement).value;
     this.resetSuggestionInteraction();
     this.emitInput(this.value);
-    this.autogrow();
+    // updated() grows the textarea for every value change, so typing needs no separate call.
   };
 
   private handleKeydown = (event: KeyboardEvent): void => {

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

@@ -325,8 +325,42 @@ export class DeesHarnessMessageList extends DeesElement {
         transform: translate3d(0, var(--harness-virtual-offset), 0);
       }
 
+      /*
+       * Prose is held to a readable measure while wide payloads keep the whole pane. Applied to
+       * the transcript rows themselves because a message host clips on both axes, so nothing
+       * nested inside one can bleed back out.
+       */
+      .stack > *,
+      .virtualItem {
+        width: min(var(--dees-harness-content-width, 820px), 100%);
+        margin-inline: auto;
+      }
+
+      .stack > [data-tool-layout='full-row'],
+      .stack > [data-tool-layout='subtask'],
+      .virtualItem[data-tool-layout='full-row'],
+      .virtualItem[data-tool-layout='subtask'] {
+        width: 100%;
+      }
+
+      /*
+       * One or two subagents are read like any other content, so they stay on the measure. The
+       * pane is only worth taking once three or more cards have to sit side by side.
+       */
+      .stack > [data-tool-layout='subtask'][data-tool-count='1'],
+      .stack > [data-tool-layout='subtask'][data-tool-count='2'],
+      .virtualItem[data-tool-layout='subtask'][data-tool-count='1'],
+      .virtualItem[data-tool-layout='subtask'][data-tool-count='2'] {
+        width: min(var(--dees-harness-content-width, 820px), 100%);
+      }
+
       .toolGroup {
         min-width: 0;
+        /*
+         * Column packing has to measure the row it happens in, not the scroller, now that a
+         * compact row is narrower than the pane.
+         */
+        container: harness-transcript / inline-size;
       }
 
       .toolGrid {
@@ -882,6 +916,8 @@ export class DeesHarnessMessageList extends DeesElement {
             <article
               class="virtualItem"
               data-virtual-key=${entry.item.key}
+              data-tool-layout=${this.timelineItemLayout(entry.item)}
+              data-tool-count=${this.timelineItemCount(entry.item)}
               aria-posinset=${entry.index + 1}
               aria-setsize=${this.timelineRenderItems.length}
               style=${`--harness-virtual-offset: ${this.virtualOffsets[entry.index] ?? 0}px;`}
@@ -906,6 +942,19 @@ export class DeesHarnessMessageList extends DeesElement {
     return indexes.sort((left, right) => left - right);
   }
 
+  /** Mirrors the row's layout onto the virtual wrapper so width rules match the flowed stack. */
+  private timelineItemLayout(itemArg: TTimelineRenderItem): string {
+    if (itemArg.kind === 'tool-group') return itemArg.layout;
+    if (itemArg.kind === 'message') return itemArg.toolLayout ?? 'message';
+    return itemArg.kind;
+  }
+
+  /** Group size, mirrored onto the virtual wrapper so width rules match the flowed stack. */
+  private timelineItemCount(itemArg: TTimelineRenderItem): number {
+    if (itemArg.kind !== 'tool-group') return 1;
+    return itemArg.messages.length >= 4 ? 4 : itemArg.messages.length;
+  }
+
   private renderTimelineItem(itemArg: TTimelineRenderItem, logicalIndexArg: number): TemplateResult {
     if (itemArg.kind === 'tool-group') return this.renderToolGroup(itemArg);
     if (itemArg.kind === 'message') return this.renderMessage(itemArg, itemArg.key);
@@ -978,6 +1027,7 @@ export class DeesHarnessMessageList extends DeesElement {
         data-timeline-key=${groupArg.key}
         data-tool-group-id=${groupArg.key}
         data-tool-layout=${groupArg.layout}
+        data-tool-count=${count >= 4 ? 4 : count}
       >
         <div class=${`toolGrid ${countClass}`}>
           ${repeat(