@design.estate/dees-catalog 3.94.0 → 3.95.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.94.0",
+  "version": "3.95.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",

package/readme.md

@@ -57,7 +57,7 @@ For developers working on this library, please refer to the [UI Components Playb
 |----------|------------|
 | **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols), [`DeesActionbar`](#deesactionbar) |
 | **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputToggle`](#deesinputtoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesInputCode`](#deesinputcode), [`DeesFormSubmit`](#deesformsubmit) |
-| **App Shell (Layout)** | [`DeesAppui`](#deesappui-️), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| **App Shell (Layout)** | [`DeesMosaic`](#deesmosaic), [`DeesAppui`](#deesappui-️), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
 | **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination), [`DeesStorageBrowser`](#deesstorgebrowser) |
 | **Media & Thumbnails** | [`DeesThumbnailPdf`](#deesthumbnailpdf), [`DeesThumbnailImage`](#deesthumbnailimage), [`DeesThumbnailAudio`](#deesthumbnailaudio), [`DeesThumbnailVideo`](#deesthumbnalvideo), [`DeesThumbnailNote`](#deesthumbnailnote), [`DeesThumbnailFolder`](#deesthumbnailfolder), [`DeesPreview`](#deespreview), [`DeesPdfViewer`](#deespdfviewer), [`DeesImageViewer`](#deesimageviewer), [`DeesAudioViewer`](#deesaudioviewer), [`DeesVideoViewer`](#deesvideoviewer) |
 | **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartBar`](#deeschartbar), [`DeesChartDonut`](#deeschartdonut), [`DeesChartGauge`](#deeschartgauge), [`DeesChartRadar`](#deeschartradar), [`DeesChartLog`](#deeschartlog) |
@@ -713,6 +713,33 @@ Submit button component specifically designed for `DeesForm`.
 
 ### App Shell (Layout) Components
 
+#### `DeesMosaic`
+
+Sway-like tiling workspace: a controlled split-tree layout where tiles resize against each other, drag by a slim tilebar (which also closes them), and dock onto any edge of another tile with a live drop preview. Content projects through named slots, so hosts keep light-DOM ownership — Electron `<webview>` content survives every layout change because slot reassignment never moves the light-DOM node.
+
+```typescript
+import { createMosaicLeaf, mosaicInsert, type IMosaicLayout } from '@design.estate/dees-catalog';
+
+let layout: IMosaicLayout = mosaicInsert({ root: null }, null, 'right', createMosaicLeaf('editor', 'l-editor'));
+layout = mosaicInsert(layout, 'l-editor', 'right', createMosaicLeaf('chat', 'l-chat'));
+layout = mosaicInsert(layout, null, 'bottom', createMosaicLeaf('terminal', 'l-term'));
+```
+
+```html
+<dees-mosaic
+  .layout=${layout}
+  .surfaces=${{ editor: { title: 'Editor', icon: 'lucide:Code' }, chat: { title: 'AI Chat' }, terminal: { title: 'Terminal' } }}
+  @mosaic-layout-change=${(e) => { layout = e.detail.layout; /* persist */ }}
+>
+  <my-editor slot="tile-l-editor"></my-editor>
+  <my-chat slot="tile-l-chat"></my-chat>
+  <my-terminal slot="tile-l-term"></my-terminal>
+  <div slot="empty">Workspace is empty.</div>
+</dees-mosaic>
+```
+
+The component is controlled: apply `e.detail.layout` back (and persist it) on every `mosaic-layout-change` (`reason: 'resize' | 'drop' | 'close' | 'equalize'`). Other events: cancelable `mosaic-tile-close`, `mosaic-tile-focus`, throttled `mosaic-resizing` (re-measure embedded content), `mosaic-drag-state`. Methods: `getLeafRects()` (viewport rect per leaf content area), `equalize(splitId?)`, `focusTile(id)`. Pure helpers (`mosaicInsert/mosaicRemove/mosaicMove/mosaicResize/mosaicEqualize/mosaicNormalize/mosaicLeaves`) are exported for host-side layout logic. Splitters are keyboard-accessible (`role="separator"`, arrow keys resize, double-click equalizes); Escape cancels drags.
+
 #### `DeesAppui` 🏗️
 A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, bottom bar, and view management.
 

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.94.0',
+  version: '3.95.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-layout/dees-mosaic/dees-mosaic.demo.ts

@@ -0,0 +1,87 @@
+import { html } from '@design.estate/dees-element';
+import type { DeesMosaic } from './dees-mosaic.js';
+import type { IMosaicLayout } from './types.js';
+import { createMosaicLeaf, mosaicInsert } from './tree.js';
+
+const buildDefaultLayout = (): IMosaicLayout => {
+  let layout = mosaicInsert({ root: null }, null, 'right', createMosaicLeaf('editor', 'leaf-editor'));
+  layout = mosaicInsert(layout, 'leaf-editor', 'right', createMosaicLeaf('chat', 'leaf-chat'));
+  layout = mosaicInsert(layout, null, 'bottom', createMosaicLeaf('terminal', 'leaf-terminal'));
+  return layout;
+};
+
+const surfaceMeta = {
+  editor: { title: 'Editor', icon: 'lucide:Code' },
+  chat: { title: 'AI Chat', icon: 'lucide:BotMessageSquare' },
+  terminal: { title: 'Terminal', icon: 'lucide:SquareTerminal' },
+  browser: { title: 'Browser', icon: 'lucide:Globe' },
+};
+
+let tileCounter = 0;
+
+const addBrowserTile = (event: MouseEvent) => {
+  const mosaic = (event.target as HTMLElement).closest('.mosaicDemo')?.querySelector('dees-mosaic') as DeesMosaic | null;
+  if (!mosaic) return;
+  tileCounter += 1;
+  const leaf = createMosaicLeaf('browser', `leaf-browser-${tileCounter}`);
+  mosaic.layout = mosaicInsert(mosaic.layout, 'leaf-chat', 'bottom', leaf);
+};
+
+export const demoFunc = () => html`
+  <style>
+    .mosaicDemo {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      gap: 12px;
+      height: 640px;
+      max-width: 1000px;
+      margin: 40px auto;
+    }
+    .mosaicDemo .surfaceBody {
+      display: grid;
+      place-content: center;
+      gap: 6px;
+      height: 100%;
+      text-align: center;
+      color: var(--dees-color-text-secondary);
+      font-size: 12px;
+      background: var(--dees-color-bg-primary);
+    }
+    .mosaicDemo .surfaceBody strong {
+      color: var(--dees-color-text-primary);
+      font-size: 14px;
+    }
+    .mosaicDemo .emptyHint {
+      color: var(--dees-color-text-secondary);
+      font-size: 13px;
+    }
+  </style>
+  <div
+    class="mosaicDemo"
+    @mosaic-layout-change=${(event: CustomEvent) => {
+      const mosaic = (event.target as HTMLElement);
+      (mosaic as DeesMosaic).layout = event.detail.layout;
+      console.log('mosaic-layout-change', event.detail.reason, event.detail.layout);
+    }}
+    @mosaic-tile-close=${(event: CustomEvent) => console.log('mosaic-tile-close', event.detail)}
+    @mosaic-tile-focus=${(event: CustomEvent) => {
+      ((event.target as HTMLElement) as DeesMosaic).focusedLeafId = event.detail.leafId;
+    }}
+  >
+    <div>
+      <dees-button @clicked=${addBrowserTile}>Add browser tile below chat</dees-button>
+    </div>
+    <dees-mosaic
+      .layout=${buildDefaultLayout()}
+      .surfaces=${surfaceMeta}
+      focusedLeafId="leaf-editor"
+    >
+      <div slot="tile-leaf-editor" class="surfaceBody"><strong>Editor</strong><span>drag my tilebar; resize the shared edges</span></div>
+      <div slot="tile-leaf-chat" class="surfaceBody"><strong>AI Chat</strong><span>docked right</span></div>
+      <div slot="tile-leaf-terminal" class="surfaceBody"><strong>Terminal</strong><span>stacked from below</span></div>
+      <div slot="tile-leaf-browser-1" class="surfaceBody"><strong>Browser 1</strong></div>
+      <div slot="tile-leaf-browser-2" class="surfaceBody"><strong>Browser 2</strong></div>
+      <div slot="empty" class="emptyHint">Workspace is empty — add a tile.</div>
+    </dees-mosaic>
+  </div>
+`;