@design.estate/dees-catalog 3.93.0 → 3.95.0

package/dist_ts_web/elements/00group-layout/dees-mosaic/dees-mosaic.demo.js

@@ -0,0 +1,82 @@
+import { html } from '@design.estate/dees-element';
+import { createMosaicLeaf, mosaicInsert } from './tree.js';
+const buildDefaultLayout = () => {
+    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) => {
+    const mosaic = event.target.closest('.mosaicDemo')?.querySelector('dees-mosaic');
+    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) => {
+    const mosaic = event.target;
+    mosaic.layout = event.detail.layout;
+    console.log('mosaic-layout-change', event.detail.reason, event.detail.layout);
+}}
+    @mosaic-tile-close=${(event) => console.log('mosaic-tile-close', event.detail)}
+    @mosaic-tile-focus=${(event) => {
+    event.target.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>
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1tb3NhaWMuZGVtby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWxheW91dC9kZWVzLW1vc2FpYy9kZWVzLW1vc2FpYy5kZW1vLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUduRCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBRTNELE1BQU0sa0JBQWtCLEdBQUcsR0FBa0IsRUFBRTtJQUM3QyxJQUFJLE1BQU0sR0FBRyxZQUFZLENBQUMsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsQ0FBQyxRQUFRLEVBQUUsYUFBYSxDQUFDLENBQUMsQ0FBQztJQUNwRyxNQUFNLEdBQUcsWUFBWSxDQUFDLE1BQU0sRUFBRSxhQUFhLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUMsQ0FBQyxDQUFDO0lBQzdGLE1BQU0sR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsZ0JBQWdCLENBQUMsVUFBVSxFQUFFLGVBQWUsQ0FBQyxDQUFDLENBQUM7SUFDN0YsT0FBTyxNQUFNLENBQUM7QUFDaEIsQ0FBQyxDQUFDO0FBRUYsTUFBTSxXQUFXLEdBQUc7SUFDbEIsTUFBTSxFQUFFLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUFFO0lBQ2hELElBQUksRUFBRSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLHlCQUF5QixFQUFFO0lBQzNELFFBQVEsRUFBRSxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLHVCQUF1QixFQUFFO0lBQzlELE9BQU8sRUFBRSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLGNBQWMsRUFBRTtDQUNwRCxDQUFDO0FBRUYsSUFBSSxXQUFXLEdBQUcsQ0FBQyxDQUFDO0FBRXBCLE1BQU0sY0FBYyxHQUFHLENBQUMsS0FBaUIsRUFBRSxFQUFFO0lBQzNDLE1BQU0sTUFBTSxHQUFJLEtBQUssQ0FBQyxNQUFzQixDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsRUFBRSxhQUFhLENBQUMsYUFBYSxDQUFzQixDQUFDO0lBQ3ZILElBQUksQ0FBQyxNQUFNO1FBQUUsT0FBTztJQUNwQixXQUFXLElBQUksQ0FBQyxDQUFDO0lBQ2pCLE1BQU0sSUFBSSxHQUFHLGdCQUFnQixDQUFDLFNBQVMsRUFBRSxnQkFBZ0IsV0FBVyxFQUFFLENBQUMsQ0FBQztJQUN4RSxNQUFNLENBQUMsTUFBTSxHQUFHLFlBQVksQ0FBQyxNQUFNLENBQUMsTUFBTSxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsSUFBSSxDQUFDLENBQUM7QUFDM0UsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs0QkErQk4sQ0FBQyxLQUFrQixFQUFFLEVBQUU7SUFDN0MsTUFBTSxNQUFNLEdBQUksS0FBSyxDQUFDLE1BQXNCLENBQUM7SUFDNUMsTUFBcUIsQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUM7SUFDcEQsT0FBTyxDQUFDLEdBQUcsQ0FBQyxzQkFBc0IsRUFBRSxLQUFLLENBQUMsTUFBTSxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0FBQ2hGLENBQUM7eUJBQ29CLENBQUMsS0FBa0IsRUFBRSxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxtQkFBbUIsRUFBRSxLQUFLLENBQUMsTUFBTSxDQUFDO3lCQUN0RSxDQUFDLEtBQWtCLEVBQUUsRUFBRTtJQUN4QyxLQUFLLENBQUMsTUFBcUMsQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUM7QUFDcEYsQ0FBQzs7OzhCQUd5QixjQUFjOzs7Z0JBRzVCLGtCQUFrQixFQUFFO2tCQUNsQixXQUFXOzs7Ozs7Ozs7OztDQVc1QixDQUFDIn0=