@design.estate/dees-catalog 9.6.0 → 9.7.0

package/scripts/check-bdtheme-ratchet.cjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * bdTheme ratchet: cssManager.bdTheme() is legacy (see readme.theme-migration.md).
+ * bdTheme ratchet: cssManager.bdTheme() is legacy (see docs/development/readme.theme-migration.md).
  * The only sanctioned usage is the token bridge in ts_web/elements/00theme.ts.
  * Per-file call counts are frozen in scripts/bdtheme-baseline.json and may only shrink.
  *
@@ -72,7 +72,7 @@ for (const [file, count] of Object.entries(current)) {
 
 if (violations.length > 0) {
   console.error('[bdtheme-ratchet] FAIL — cssManager.bdTheme() is legacy; use --dees-* tokens from 00theme.ts');
-  console.error('[bdtheme-ratchet] see readme.theme-migration.md and readme.playbook.md (Theming System)');
+  console.error('[bdtheme-ratchet] see docs/development/readme.theme-migration.md and docs/development/readme.playbook.md (Theming System)');
   for (const violation of violations) console.error(`  ${violation}`);
   process.exit(1);
 }

package/scripts/check-packed-consumer.mjs

@@ -0,0 +1,48 @@
+import { execFileSync } from 'node:child_process';
+import { cpSync, mkdirSync, mkdtempSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// An actual isolated consumer: install the tarball, never source aliases or links.
+// An optional argument checks a release journal's exact tarball without repacking.
+const root = fileURLToPath(new URL('../', import.meta.url));
+const debugRoot = join(root, '.nogit/debug');
+mkdirSync(debugRoot, { recursive: true });
+const consumer = mkdtempSync(join(debugRoot, 'packed-consumer-'));
+const run = (args, cwd = consumer) => execFileSync('pnpm', args, { cwd, stdio: 'inherit' });
+const tarball = process.argv[2] ? resolve(process.argv[2]) : join(consumer, 'catalog.tgz');
+if (!process.argv[2]) run(['pack', '--out', tarball], root);
+cpSync(join(root, 'test/fixtures/packed-consumer'), consumer, { recursive: true });
+renameSync(join(consumer, 'entrypoints.ts.fixture'), join(consumer, 'entrypoints.ts'));
+writeFileSync(join(consumer, 'package.json'), JSON.stringify({
+  name: 'catalog-packed-consumer', private: true, type: 'module',
+  packageManager: 'pnpm@12.3.1',
+  dependencies: {
+    '@design.estate/dees-catalog': tarball,
+    '@design.estate/dees-element': '3.1.1',
+  },
+  devDependencies: {
+    typescript: '5.9.3',
+    '@types/node': '26.4.1',
+    '@git.zone/tstest': '6.0.0',
+    '@push.rocks/smartbrowser': '2.0.11',
+  },
+}, null, 2));
+writeFileSync(join(consumer, 'pnpm-workspace.yaml'), 'packages:\n  - "."\n');
+// Run the same regressions against installed JavaScript, not sources.
+const browserTests = ['table-construction', 'datepicker-validation', 'textarea', 'composer-attachments'];
+for (const name of browserTests) {
+  const browserTest = readFileSync(join(root, `test/test.${name}.browser.ts`), 'utf8')
+    .replaceAll('../ts_web/', '@design.estate/dees-catalog/dist_ts_web/');
+  writeFileSync(join(consumer, `test.${name}.browser.ts`), browserTest);
+}
+console.log(`Packed consumer: ${consumer}`);
+run(['install', '--ignore-scripts']);
+run(['exec', 'tsc', '--version']);
+run(['exec', 'tsc', '--project', 'tsconfig.json']);
+// Verify the current producer compiler too; neither run skips dependency checks.
+run(['add', '--save-dev', '--save-exact', '--ignore-scripts', 'typescript@6.0.3']);
+run(['exec', 'tsc', '--version']);
+run(['exec', 'tsc', '--project', 'tsconfig.json']);
+run(['exec', 'tstest', 'test.*.browser.ts', '--verbose', '--logfile']);
+run(['exec', 'node', 'browser.mjs']);

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/demos/inputs.ts

@@ -4,20 +4,21 @@ import { demoPage } from './templates.js';
 import type { TFormData } from '../elements/00group-form/dees-form/dees-form.js';
 
 /** One fixture vocabulary for the showcase and each input's focused demo. */
-export type TInputExample = 'text' | 'dropdown' | 'datepicker' | 'checkbox' | 'toggle' | 'radiogroup' | 'multitoggle' | 'quantityselector' | 'phone' | 'iban' | 'tags' | 'typelist' | 'list' | 'fileupload' | 'profilepicture' | 'richtext' | 'wysiwyg' | 'code';
+export type TInputExample = 'text' | 'textarea' | 'dropdown' | 'datepicker' | 'checkbox' | 'toggle' | 'radiogroup' | 'multitoggle' | 'quantityselector' | 'phone' | 'iban' | 'tags' | 'typelist' | 'list' | 'fileupload' | 'profilepicture' | 'richtext' | 'wysiwyg' | 'code';
 
 const titles: Record<TInputExample, string> = {
-  text: 'Text fields', dropdown: 'Dropdowns', datepicker: 'Dates & times', checkbox: 'Checkboxes', toggle: 'Switches',
+  text: 'Text fields', textarea: 'Multiline text', dropdown: 'Dropdowns', datepicker: 'Dates & times', checkbox: 'Checkboxes', toggle: 'Switches',
   radiogroup: 'Radio choices', multitoggle: 'Segmented controls', quantityselector: 'Quantities', phone: 'Phone numbers',
   iban: 'IBAN', tags: 'Tags', typelist: 'Type lists', list: 'Editable lists', fileupload: 'File uploads',
   profilepicture: 'Profile pictures', richtext: 'Rich text', wysiwyg: 'Block editor', code: 'Code editor',
 };
-const compound: TInputExample[] = ['tags', 'typelist', 'list', 'fileupload', 'profilepicture', 'richtext', 'wysiwyg', 'code'];
+const compound: TInputExample[] = ['textarea', 'tags', 'typelist', 'list', 'fileupload', 'profilepicture', 'richtext', 'wysiwyg', 'code'];
 const visibility = [{ key: 'team', option: 'Team members' }, { key: 'private', option: 'Only me' }, { key: 'public', option: 'Anyone with the link' }];
 
 export const inputExample = (kind: TInputExample, disabled = false): TemplateResult => {
   switch (kind) {
     case 'text': return html`<dees-input-text key="name" label="Workspace name" value="Design studio" required ?disabled=${disabled} description="The name your teammates see."></dees-input-text>`;
+    case 'textarea': return html`<dees-input-textarea key="paymentNotes" label="Payment notes" .value=${'Invoice 2026-042\nReference: studio equipment'} .rows=${3} .maxLength=${1000} ?disabled=${disabled} description="Plain text. Line breaks are preserved."></dees-input-textarea>`;
     case 'dropdown': return html`<dees-input-dropdown key="visibility" label="Visible to" .options=${visibility} .selectedOption=${visibility[0]} ?disabled=${disabled}></dees-input-dropdown>`;
     case 'datepicker': return html`<dees-input-datepicker key="review" label="Next review" value="2026-09-14T09:00:00" .enableTime=${true} timeFormat="24h" .minuteIncrement=${15} ?disabled=${disabled}></dees-input-datepicker>`;
     case 'checkbox': return html`<dees-input-checkbox key="digest" label="Include a weekly summary" .value=${true} ?disabled=${disabled}></dees-input-checkbox>`;
@@ -96,7 +97,7 @@ export class DeesDemoInputWorkspace extends DeesElement {
           <dees-form @formData=${this.submit} style="gap:0">
             ${this.section('General', 'Make this space your own.', ['text', 'dropdown', 'datepicker'])}
             ${this.section('Your team', 'A setup that fits the way you work.', ['radiogroup', 'quantityselector', 'multitoggle', 'toggle', 'checkbox'])}
-            ${this.section('Profile & billing', 'Your picture and contact details.', ['profilepicture', 'phone', 'iban'])}
+            ${this.section('Profile & billing', 'Your picture and contact details.', ['profilepicture', 'phone', 'iban', 'textarea'])}
             ${this.section('Organization', 'Small details that keep work moving.', ['tags', 'typelist', 'list'])}
             ${this.section('Documents', 'The context behind the work.', ['fileupload', 'richtext', 'wysiwyg'])}
             ${this.section('Automation', 'Fine-tune the workspace configuration.', ['code'])}

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

@@ -356,8 +356,6 @@ export class DeesTable<T> extends DeesElement {
 
   constructor() {
     super();
-    // Make the host focusable so it can receive Ctrl/Cmd+C for copy.
-    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
     this.addEventListener('keydown', this.__handleHostKeydown);
   }
 
@@ -1280,6 +1278,9 @@ export class DeesTable<T> extends DeesElement {
   }
 
   public connectedCallback(): Promise<void> {
+    // Custom-element constructors must not add host attributes. Initialize the
+    // keyboard entry point here, after parser/caller attributes are available.
+    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
     const connected = super.connectedCallback();
     if (this.hasUpdated) this.requestUpdate();
     return connected;

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

@@ -13,6 +13,7 @@ import { DeesInputCheckbox } from '../../00group-input/dees-input-checkbox/dees-
 import { DeesInputCode } from '../../00group-input/dees-input-code/dees-input-code.js';
 import { DeesInputDatepicker } from '../../00group-input/dees-input-datepicker/index.js';
 import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
+import { DeesInputTextarea } from '../../00group-input/dees-input-textarea/dees-input-textarea.js';
 import { DeesInputQuantitySelector } from '../../00group-input/dees-input-quantityselector/dees-input-quantityselector.js';
 import { DeesInputRadiogroup } from '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
 import { DeesInputDropdown } from '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
@@ -44,6 +45,7 @@ const FORM_INPUT_TYPES = [
   DeesInputQuantitySelector,
   DeesInputRadiogroup,
   DeesInputText,
+  DeesInputTextarea,
   DeesInputToggle,
   DeesInputTypelist,
   DeesInputTags,
@@ -65,6 +67,9 @@ export interface IFormCompatibleElement extends HTMLElement {
   };
   getValue?: () => unknown;
   setValue?: (value: unknown) => void;
+  checkValidity?: () => boolean;
+  reportValidity?: () => boolean;
+  reset?: () => void;
 }
 
 export type TFormDataValue =
@@ -96,6 +101,7 @@ export type TFormInputElement =
   | DeesInputQuantitySelector
   | DeesInputRadiogroup
   | DeesInputText
+  | DeesInputTextarea
   | DeesInputToggle
   | DeesInputTypelist
   | DeesInputTags
@@ -281,7 +287,9 @@ export class DeesForm extends DeesElement {
   public async updateRequiredStatus() {
     let requiredOK = true;
     for (const childArg of this.getFormElements()) {
-      if (childArg.required && !getFormElementValue(childArg)) {
+      if (childArg.disabled) continue;
+      if ((childArg.required && !getFormElementValue(childArg))
+        || (childArg as IFormCompatibleElement).checkValidity?.() === false) {
         requiredOK = false;
       }
     }
@@ -312,6 +320,15 @@ export class DeesForm extends DeesElement {
   }
 
   public async gatherAndDispatch() {
+    for (const child of this.getFormElements()) {
+      if (child.disabled) continue;
+      const input = child as IFormCompatibleElement;
+      if (input.checkValidity?.() === false) {
+        input.reportValidity?.();
+        child.focus();
+        return;
+      }
+    }
     const valueObject = await this.collectFormData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
@@ -371,12 +388,18 @@ export class DeesForm extends DeesElement {
     const inputChildren = this.getFormElements();
 
     for (const inputChild of inputChildren) {
-      setFormElementValue(inputChild, null);
+      const input = inputChild as IFormCompatibleElement;
+      if (input.reset) input.reset();
+      else setFormElementValue(inputChild, null);
     }
     this.setStatus('normal', 'Submit');
+    void this.updateRequiredStatus();
   }
 
   public async addBehaviours() {
+    this.addEventListener('validation-change', event => {
+      if (this.getFormElements().includes(event.target as TFormInputElement)) void this.updateRequiredStatus();
+    });
     // Use event delegation
     this.addEventListener('keydown', (event: KeyboardEvent) => {
       const target = event.target as DeesElement;

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

@@ -203,6 +203,9 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  @property({ attribute: false })
+  accessor attachmentsEnabled: boolean = true;
+
   @property({ attribute: false })
   accessor suggestions: IHarnessComposerSuggestion[] = [];
 
@@ -763,6 +766,7 @@ export class DeesHarnessChat extends DeesElement {
           .contextDescription=${this.heading ? `Replying to ${this.heading}` : ''}
           .value=${this.composerValue}
           .attachments=${this.attachments}
+          .attachmentsEnabled=${this.attachmentsEnabled}
           .suggestions=${this.suggestions}
           .maxAttachmentCount=${this.maxAttachmentCount}
           .maxAttachmentBytes=${this.maxAttachmentBytes}

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

@@ -44,6 +44,9 @@ export const demoFunc = () => demoPage('Composer', 'Write, attach files, choose
     <dees-harness-composer busy queuedCount="2"></dees-harness-composer>
     <div class="dees-demo-label">Waiting for a connection</div>
     <dees-harness-composer disabled placeholder="Connect to a project to chat."></dees-harness-composer>
+    <div class="dees-demo-label">Text-only conversation</div>
+    <dees-harness-composer .attachmentsEnabled=${false} .showModelControls=${false}
+      value="Summarize the outstanding invoices."></dees-harness-composer>
     <div class="dees-demo-label">Files ready to send</div>
     <dees-harness-composer
       .showModelControls=${false}

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

@@ -112,6 +112,10 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  /** Host capability: false disables every attachment entry point and sends text only. */
+  @property({ attribute: false })
+  accessor attachmentsEnabled: boolean = true;
+
   @property({ attribute: false })
   accessor suggestions: IHarnessComposerSuggestion[] = [];
 
@@ -473,6 +477,10 @@ export class DeesHarnessComposer extends DeesElement {
 
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
+    if (['attachmentsEnabled', 'disabled'].some(key => changedProperties.has(key) && changedProperties.get(key) !== undefined)) {
+      this.attachmentGeneration++;
+      if (!this.attachmentsEnabled || this.disabled) this.handleDragLeave();
+    }
     this.syncTextareaSuggestionAria();
   }
 
@@ -486,13 +494,13 @@ export class DeesHarnessComposer extends DeesElement {
           @dragleave=${this.handleDragLeave}
           @drop=${this.handleDrop}
         >
-        <input
+        ${this.attachmentsEnabled ? html`<input
           class="fileInput"
           type="file"
           multiple
           @change=${this.handleFileInputChange}
-        />
-        ${this.attachments.length
+        />` : ''}
+        ${this.attachmentsEnabled && this.attachments.length
           ? html`
               <div class="attachmentRow">
                 ${this.attachments.map((attachment) => this.renderChip(attachment))}
@@ -505,7 +513,7 @@ export class DeesHarnessComposer extends DeesElement {
             .value=${this.value}
             aria-label="Message"
             aria-description=${this.contextDescription}
-            placeholder=${this.placeholder}
+            placeholder=${!this.attachmentsEnabled && this.placeholder === 'Message the agent — drop or paste files to attach…' ? 'Message the agent…' : this.placeholder}
             ?disabled=${this.disabled}
             rows="1"
             @input=${this.handleTextInput}
@@ -518,14 +526,16 @@ export class DeesHarnessComposer extends DeesElement {
           ></textarea>
         </div>
         <div class="controlsRow">
-          <dees-button
+          ${this.attachmentsEnabled ? html`<dees-button
+            class="attachButton"
             size="sm"
             type="ghost"
+            title="Attach files"
             ?disabled=${this.disabled}
             @clicked=${() => this.shadowRoot?.querySelector<HTMLInputElement>('.fileInput')?.click()}
           >
             <dees-icon icon="lucide:Paperclip" iconSize="14"></dees-icon>
-          </dees-button>
+          </dees-button>` : ''}
           ${this.modeOptions.length
             ? html`
                 <dees-input-multitoggle class="modeSwitch" label="Agent mode" .labelPosition=${'none'}
@@ -869,6 +879,7 @@ export class DeesHarnessComposer extends DeesElement {
   };
 
   private handlePaste = (event: ClipboardEvent): void => {
+    if (!this.attachmentsEnabled || this.disabled) return;
     const files = Array.from(event.clipboardData?.files ?? []);
     if (!files.length) return;
     event.preventDefault();
@@ -878,6 +889,10 @@ export class DeesHarnessComposer extends DeesElement {
   private handleDragOver = (event: DragEvent): void => {
     if (!event.dataTransfer?.types.includes('Files')) return;
     event.preventDefault();
+    if (!this.attachmentsEnabled || this.disabled) {
+      event.dataTransfer.dropEffect = 'none';
+      return;
+    }
     this.shadowRoot?.querySelector('.composer')?.classList.add('dragOver');
   };
 
@@ -890,23 +905,32 @@ export class DeesHarnessComposer extends DeesElement {
     const files = Array.from(event.dataTransfer?.files ?? []);
     if (!files.length) return;
     event.preventDefault();
+    if (!this.attachmentsEnabled || this.disabled) {
+      if (event.dataTransfer) event.dataTransfer.dropEffect = 'none';
+      return;
+    }
     void this.addFiles(files);
   };
 
   private attachmentAdditionTail = Promise.resolve();
+  private attachmentGeneration = 0;
 
   public addFiles(fileList: FileList | File[] | null): Promise<void> {
     const files = Array.from(fileList ?? []);
-    if (!files.length) return Promise.resolve();
-    const addition = this.attachmentAdditionTail.then(() => this.addFilesSequential(files));
+    if (!files.length || !this.attachmentsEnabled || this.disabled) return Promise.resolve();
+    const generation = this.attachmentGeneration;
+    const addition = this.attachmentAdditionTail.then(() => this.addFilesSequential(files, generation));
     this.attachmentAdditionTail = addition.catch(() => undefined);
     return addition;
   }
 
-  private async addFilesSequential(files: File[]): Promise<void> {
+  private async addFilesSequential(files: File[], generation: number): Promise<void> {
+    const allowed = () => this.attachmentsEnabled && !this.disabled && generation === this.attachmentGeneration;
+    if (!allowed()) return;
     const added: IHarnessAttachment[] = [];
     let totalBytes = this.attachments.reduce((sum, attachment) => sum + attachment.size, 0);
     for (const file of files) {
+      if (!allowed()) return;
       if (this.attachments.length + added.length >= this.maxAttachmentCount) {
         this.emit('harness-attachment-error', {
           message: `A maximum of ${this.maxAttachmentCount} attachments is allowed.`,
@@ -928,6 +952,7 @@ export class DeesHarnessComposer extends DeesElement {
       }
       try {
         const dataBase64 = await harnessFileToBase64(file);
+        if (!allowed()) return;
         const kind = harnessAttachmentKindFor(mediaType);
         added.push({
           id: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`,
@@ -939,12 +964,13 @@ export class DeesHarnessComposer extends DeesElement {
         });
         totalBytes += file.size;
       } catch (error) {
+        if (!allowed()) return;
         this.emit('harness-attachment-error', {
           message: error instanceof Error ? error.message : String(error),
         });
       }
     }
-    if (added.length) {
+    if (added.length && allowed()) {
       this.emitAttachments([...this.attachments, ...added]);
     }
   }
@@ -957,7 +983,7 @@ export class DeesHarnessComposer extends DeesElement {
       && (!this.busy || !this.inputSteeringEnabled || !this.value.trim())) return;
     const detail: IHarnessComposerSendDetail = {
       text: this.value,
-      attachments: this.attachments,
+      attachments: this.attachmentsEnabled ? this.attachments : [],
       account: this.account || undefined,
       model: this.model || undefined,
       reasoningEffort: this.reasoningEffort || undefined,

package/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts

@@ -15,7 +15,12 @@ import '../../00group-layout/dees-label/dees-label.js';
  * Provides unified margin system and layout mode support
  */
 export abstract class DeesInputBase<T = any> extends DeesElement {
-  public static shadowRootOptions = { ...DeesElement.shadowRootOptions, delegatesFocus: true };
+  // Keep declarations tied to the superclass's DOM contract instead of emitting
+  // the build compiler's inferred (and potentially newer) ShadowRootInit shape.
+  public static override shadowRootOptions: typeof DeesElement.shadowRootOptions = {
+    ...DeesElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   public static inputLayout: 'field' | 'choice' | 'compound' = 'field';
   /**
    * Layout mode for the input component