quilt-vanilla 0.1.0

package/dist/windows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"windows.d.ts","sourceRoot":"","sources":["../src/windows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,eAAe,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAUhD,uFAAuF;AACvF,qBAAa,OAAO;IAMhB,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,SAAS;IARnB,OAAO,CAAC,UAAU,CAAgC;IAClD,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,OAAO,CAAS;IACxB,QAAQ,CAAC,OAAO,+BAAsC;gBAE5C,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,EAC3B,SAAS,EAAE,WAAW;IAWhC,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,SAAS;IAiCjB,OAAO,CAAC,MAAM;IAoCd,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,GAAE,eAAoB,GAAG,OAAO;IAgF1D,UAAU,CAAC,EAAE,EAAE,MAAM;IAQrB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,KAAK;IAUb,OAAO;CAoBR"}

package/dist/windows.js

@@ -0,0 +1,247 @@
+import { themeProperties } from './theme.js';
+import { el, Scope } from './lifetime.js';
+import { mountPane } from './panes.js';
+/** The opener owns all state; child documents never load an independent app bundle. */
+export class Windows {
+    doc;
+    options;
+    error;
+    themeRoot;
+    companions = new Map();
+    scope = new Scope();
+    stopped = false;
+    pending = new Map();
+    constructor(doc, options, error, themeRoot) {
+        this.doc = doc;
+        this.options = options;
+        this.error = error;
+        this.themeRoot = themeRoot;
+        const interval = setInterval(() => this.check(), 300);
+        this.scope.add(() => clearInterval(interval));
+        this.scope.listen(doc.defaultView, 'pagehide', () => this.dispose());
+        for (const p of options.store.getSnapshot().popouts)
+            this.pending.set(p.paneId, p.placement ?? {});
+        // Loading data never opens a browser window. Restore missing windows into the main layout.
+        this.restoreMissing();
+        this.scope.add(options.store.subscribe(() => this.reconcile()));
+    }
+    restoreMissing() {
+        for (const entry of [...this.options.store.getSnapshot().popouts]) {
+            if (!this.companions.has(entry.paneId)) {
+                this.pending.set(entry.paneId, entry.placement ?? {});
+                this.options.store.returnPane(entry.paneId);
+            }
+        }
+    }
+    reconcile() {
+        if (this.stopped)
+            return;
+        for (const [id, c] of this.companions)
+            if (!this.options.store.getSnapshot().popouts.some((p) => p.paneId === id))
+                this.closeCompanion(id, c);
+        for (const [id, c] of this.companions) {
+            const pane = this.options.store.getSnapshot().panes[id];
+            if (!pane || JSON.stringify(pane) === c.mounted.signature)
+                continue;
+            try {
+                if (pane.type !== c.mounted.pane.type ||
+                    JSON.stringify(pane.params) !== JSON.stringify(c.mounted.pane.params)) {
+                    const replacement = mountPane(c.window.document, pane, 'popout', this.options);
+                    c.mounted.element.replaceWith(replacement.element);
+                    c.mounted.dispose();
+                    c.mounted = replacement;
+                }
+                else {
+                    c.mounted.view.update?.(pane);
+                    c.mounted.pane = pane;
+                    c.mounted.signature = JSON.stringify(pane);
+                }
+                c.window.document.title = pane.title + ' — layouts';
+                const title = c.window.document.querySelector('.layouts-companion-bar strong');
+                if (title)
+                    title.textContent = pane.title;
+            }
+            catch (error) {
+                this.error(error);
+            }
+        }
+        this.restoreMissing();
+        for (const id of this.pending.keys())
+            if (!this.options.store.getSnapshot().panes[id])
+                this.pending.delete(id);
+    }
+    styles(target, pane, scope) {
+        const source = this.doc, dest = target.document;
+        dest.title = pane.title + ' — layouts';
+        const base = dest.createElement('base');
+        base.href = source.baseURI;
+        dest.head.append(base);
+        const holder = dest.createElement('meta');
+        holder.dataset.layoutsStyles = '';
+        dest.head.append(holder);
+        let copied = [];
+        const copy = () => {
+            copied.forEach((n) => n.remove());
+            copied = Array.from(source.head.querySelectorAll('link[rel="stylesheet"], style')).map((n) => n.cloneNode(true));
+            copied.forEach((n) => dest.head.append(n));
+            dest.documentElement.className = source.documentElement.className;
+            dest.body.className = source.body.className;
+            for (const original of [source.documentElement, source.body]) {
+                const next = original === source.body ? dest.body : dest.documentElement;
+                for (const attribute of Array.from(next.attributes))
+                    if (attribute.name === 'style' || attribute.name.startsWith('data-'))
+                        next.removeAttribute(attribute.name);
+                for (const attribute of Array.from(original.attributes))
+                    if (attribute.name === 'style' || attribute.name.startsWith('data-'))
+                        next.setAttribute(attribute.name, attribute.value);
+            }
+        };
+        copy();
+        const observer = new MutationObserver(copy);
+        observer.observe(source.head, { childList: true, subtree: true, characterData: true });
+        observer.observe(source.body, { attributes: true });
+        observer.observe(source.documentElement, { attributes: true });
+        scope.add(() => observer.disconnect());
+    }
+    open(id, placement = {}) {
+        if (this.stopped)
+            return false;
+        const existing = this.companions.get(id);
+        if (existing) {
+            existing.window.focus();
+            return true;
+        }
+        const pane = this.options.store.getSnapshot().panes[id];
+        if (!pane || !this.options.store.can(id, 'popout'))
+            return false;
+        let child = null, mounted;
+        const scope = new Scope();
+        try {
+            const requested = { width: 640, height: 480, ...placement };
+            const features = [
+                'popup=yes',
+                ...Object.entries(requested).map(([key, value]) => `${key}=${Math.round(value)}`),
+            ].join(',');
+            child = this.options.openWindow
+                ? this.options.openWindow(pane, requested)
+                : this.doc.defaultView.open('about:blank', '', features);
+            if (!child)
+                throw new Error('The browser blocked the popout. Allow popups or try again from the pane menu.');
+            const dest = child.document;
+            dest.body.replaceChildren();
+            this.styles(child, pane, scope);
+            const shell = el(dest, 'div', 'layouts layouts-companion');
+            const bar = el(dest, 'header', 'layouts-companion-bar');
+            const button = el(dest, 'button', 'layouts-button', 'Return to layout');
+            button.type = 'button';
+            bar.append(el(dest, 'strong', '', pane.title), button);
+            shell.append(bar);
+            dest.body.append(shell);
+            const syncTheme = () => {
+                const computed = this.doc.defaultView.getComputedStyle(this.themeRoot);
+                for (const property of Object.values(themeProperties)) {
+                    const value = computed.getPropertyValue(property);
+                    if (value.trim())
+                        shell.style.setProperty(property, value);
+                    else
+                        shell.style.removeProperty(property);
+                }
+            };
+            syncTheme();
+            const themeObserver = new MutationObserver(syncTheme);
+            for (let node = this.themeRoot; node; node = node.parentElement)
+                themeObserver.observe(node, { attributes: true });
+            themeObserver.observe(this.doc.head, { childList: true, subtree: true, characterData: true });
+            scope.add(() => themeObserver.disconnect());
+            this.options.prepareWindow?.(child, pane);
+            mounted = mountPane(dest, pane, 'popout', this.options);
+            shell.append(mounted.element);
+            const c = { window: child, mounted, scope, suppressReturn: false };
+            this.companions.set(id, c);
+            scope.listen(button, 'click', () => this.returnPane(id));
+            // Leave detection supplements closed-window polling; neither is a persistence guarantee.
+            scope.listen(child, 'pagehide', () => {
+                if (!c.suppressReturn && !this.stopped)
+                    queueMicrotask(() => this.returnPane(id));
+            });
+            this.options.store.popout(id, requested, { source: 'user' });
+            this.pending.delete(id);
+            child.focus();
+            return true;
+        }
+        catch (error) {
+            this.companions.delete(id);
+            scope.dispose();
+            try {
+                mounted?.dispose();
+            }
+            catch {
+                /* Finish rollback. */
+            }
+            try {
+                child?.close();
+            }
+            catch {
+                /* Browser may already have closed it. */
+            }
+            this.error(error);
+            return false;
+        }
+    }
+    returnPane(id) {
+        if (this.stopped)
+            return;
+        try {
+            this.options.store.returnPane(id);
+        }
+        catch (error) {
+            this.error(error);
+        }
+    }
+    closeCompanion(id, c) {
+        c.suppressReturn = true;
+        this.companions.delete(id);
+        c.scope.dispose();
+        try {
+            c.mounted.dispose();
+        }
+        catch (error) {
+            this.error(error);
+        }
+        try {
+            c.window.close();
+        }
+        catch {
+            /* A user may have navigated the companion away. */
+        }
+    }
+    check() {
+        if (this.stopped)
+            return;
+        for (const [id, c] of this.companions) {
+            try {
+                if (c.window.closed || c.window.document.defaultView === null)
+                    this.returnPane(id);
+            }
+            catch {
+                this.returnPane(id);
+            }
+        }
+    }
+    dispose() {
+        if (this.stopped)
+            return;
+        this.stopped = true;
+        this.scope.dispose();
+        for (const [id, c] of this.companions) {
+            try {
+                c.window.document.body.replaceChildren(el(c.window.document, 'p', 'layouts-placeholder', 'Disconnected: the main layout session has ended.'));
+            }
+            catch {
+                /* Inaccessible or already closed. */
+            }
+            this.closeCompanion(id, c);
+        }
+    }
+}
+//# sourceMappingURL=windows.js.map

package/dist/windows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"windows.js","sourceRoot":"","sources":["../src/windows.ts"],"names":[],"mappings":"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","sourcesContent":["import { themeProperties } from './theme.js';\nimport type { Pane, WindowPlacement } from 'quilt-core';\nimport type { LayoutOptions } from './types.js';\nimport { el, Scope } from './lifetime.js';\nimport { mountPane } from './panes.js';\nimport type { MountedPane } from './panes.js';\ninterface Companion {\n  window: Window;\n  mounted: MountedPane;\n  scope: Scope;\n  suppressReturn: boolean;\n}\n/** The opener owns all state; child documents never load an independent app bundle. */\nexport class Windows {\n  private companions = new Map<string, Companion>();\n  private scope = new Scope();\n  private stopped = false;\n  readonly pending = new Map<string, WindowPlacement>();\n  constructor(\n    private doc: Document,\n    private options: LayoutOptions,\n    private error: (e: unknown) => void,\n    private themeRoot: HTMLElement,\n  ) {\n    const interval = setInterval(() => this.check(), 300);\n    this.scope.add(() => clearInterval(interval));\n    this.scope.listen(doc.defaultView!, 'pagehide', () => this.dispose());\n    for (const p of options.store.getSnapshot().popouts)\n      this.pending.set(p.paneId, p.placement ?? {});\n    // Loading data never opens a browser window. Restore missing windows into the main layout.\n    this.restoreMissing();\n    this.scope.add(options.store.subscribe(() => this.reconcile()));\n  }\n  private restoreMissing() {\n    for (const entry of [...this.options.store.getSnapshot().popouts]) {\n      if (!this.companions.has(entry.paneId)) {\n        this.pending.set(entry.paneId, entry.placement ?? {});\n        this.options.store.returnPane(entry.paneId);\n      }\n    }\n  }\n  private reconcile() {\n    if (this.stopped) return;\n    for (const [id, c] of this.companions)\n      if (!this.options.store.getSnapshot().popouts.some((p) => p.paneId === id))\n        this.closeCompanion(id, c);\n    for (const [id, c] of this.companions) {\n      const pane = this.options.store.getSnapshot().panes[id];\n      if (!pane || JSON.stringify(pane) === c.mounted.signature) continue;\n      try {\n        if (\n          pane.type !== c.mounted.pane.type ||\n          JSON.stringify(pane.params) !== JSON.stringify(c.mounted.pane.params)\n        ) {\n          const replacement = mountPane(c.window.document, pane, 'popout', this.options);\n          c.mounted.element.replaceWith(replacement.element);\n          c.mounted.dispose();\n          c.mounted = replacement;\n        } else {\n          c.mounted.view.update?.(pane);\n          c.mounted.pane = pane;\n          c.mounted.signature = JSON.stringify(pane);\n        }\n        c.window.document.title = pane.title + ' — layouts';\n        const title = c.window.document.querySelector('.layouts-companion-bar strong');\n        if (title) title.textContent = pane.title;\n      } catch (error) {\n        this.error(error);\n      }\n    }\n    this.restoreMissing();\n    for (const id of this.pending.keys())\n      if (!this.options.store.getSnapshot().panes[id]) this.pending.delete(id);\n  }\n  private styles(target: Window, pane: Pane, scope: Scope) {\n    const source = this.doc,\n      dest = target.document;\n    dest.title = pane.title + ' — layouts';\n    const base = dest.createElement('base');\n    base.href = source.baseURI;\n    dest.head.append(base);\n    const holder = dest.createElement('meta');\n    holder.dataset.layoutsStyles = '';\n    dest.head.append(holder);\n    let copied: Element[] = [];\n    const copy = () => {\n      copied.forEach((n) => n.remove());\n      copied = Array.from(source.head.querySelectorAll('link[rel=\"stylesheet\"], style')).map(\n        (n) => n.cloneNode(true) as Element,\n      );\n      copied.forEach((n) => dest.head.append(n));\n      dest.documentElement.className = source.documentElement.className;\n      dest.body.className = source.body.className;\n      for (const original of [source.documentElement, source.body]) {\n        const next = original === source.body ? dest.body : dest.documentElement;\n        for (const attribute of Array.from(next.attributes))\n          if (attribute.name === 'style' || attribute.name.startsWith('data-'))\n            next.removeAttribute(attribute.name);\n        for (const attribute of Array.from(original.attributes))\n          if (attribute.name === 'style' || attribute.name.startsWith('data-'))\n            next.setAttribute(attribute.name, attribute.value);\n      }\n    };\n    copy();\n    const observer = new MutationObserver(copy);\n    observer.observe(source.head, { childList: true, subtree: true, characterData: true });\n    observer.observe(source.body, { attributes: true });\n    observer.observe(source.documentElement, { attributes: true });\n    scope.add(() => observer.disconnect());\n  }\n  open(id: string, placement: WindowPlacement = {}): boolean {\n    if (this.stopped) return false;\n    const existing = this.companions.get(id);\n    if (existing) {\n      existing.window.focus();\n      return true;\n    }\n    const pane = this.options.store.getSnapshot().panes[id];\n    if (!pane || !this.options.store.can(id, 'popout')) return false;\n    let child: Window | null = null,\n      mounted: MountedPane | undefined;\n    const scope = new Scope();\n    try {\n      const requested = { width: 640, height: 480, ...placement };\n      const features = [\n        'popup=yes',\n        ...Object.entries(requested).map(([key, value]) => `${key}=${Math.round(value)}`),\n      ].join(',');\n      child = this.options.openWindow\n        ? this.options.openWindow(pane, requested)\n        : this.doc.defaultView!.open('about:blank', '', features);\n      if (!child)\n        throw new Error(\n          'The browser blocked the popout. Allow popups or try again from the pane menu.',\n        );\n      const dest = child.document;\n      dest.body.replaceChildren();\n      this.styles(child, pane, scope);\n      const shell = el(dest, 'div', 'layouts layouts-companion');\n      const bar = el(dest, 'header', 'layouts-companion-bar');\n      const button = el(dest, 'button', 'layouts-button', 'Return to layout');\n      button.type = 'button';\n      bar.append(el(dest, 'strong', '', pane.title), button);\n      shell.append(bar);\n      dest.body.append(shell);\n      const syncTheme = () => {\n        const computed = this.doc.defaultView!.getComputedStyle(this.themeRoot);\n        for (const property of Object.values(themeProperties)) {\n          const value = computed.getPropertyValue(property);\n          if (value.trim()) shell.style.setProperty(property, value);\n          else shell.style.removeProperty(property);\n        }\n      };\n      syncTheme();\n      const themeObserver = new MutationObserver(syncTheme);\n      for (let node: HTMLElement | null = this.themeRoot; node; node = node.parentElement)\n        themeObserver.observe(node, { attributes: true });\n      themeObserver.observe(this.doc.head, { childList: true, subtree: true, characterData: true });\n      scope.add(() => themeObserver.disconnect());\n      this.options.prepareWindow?.(child, pane);\n      mounted = mountPane(dest, pane, 'popout', this.options);\n      shell.append(mounted.element);\n      const c: Companion = { window: child, mounted, scope, suppressReturn: false };\n      this.companions.set(id, c);\n      scope.listen(button, 'click', () => this.returnPane(id));\n      // Leave detection supplements closed-window polling; neither is a persistence guarantee.\n      scope.listen(child, 'pagehide', () => {\n        if (!c.suppressReturn && !this.stopped) queueMicrotask(() => this.returnPane(id));\n      });\n      this.options.store.popout(id, requested, { source: 'user' });\n      this.pending.delete(id);\n      child.focus();\n      return true;\n    } catch (error) {\n      this.companions.delete(id);\n      scope.dispose();\n      try {\n        mounted?.dispose();\n      } catch {\n        /* Finish rollback. */\n      }\n      try {\n        child?.close();\n      } catch {\n        /* Browser may already have closed it. */\n      }\n      this.error(error);\n      return false;\n    }\n  }\n  returnPane(id: string) {\n    if (this.stopped) return;\n    try {\n      this.options.store.returnPane(id);\n    } catch (error) {\n      this.error(error);\n    }\n  }\n  private closeCompanion(id: string, c: Companion) {\n    c.suppressReturn = true;\n    this.companions.delete(id);\n    c.scope.dispose();\n    try {\n      c.mounted.dispose();\n    } catch (error) {\n      this.error(error);\n    }\n    try {\n      c.window.close();\n    } catch {\n      /* A user may have navigated the companion away. */\n    }\n  }\n  private check() {\n    if (this.stopped) return;\n    for (const [id, c] of this.companions) {\n      try {\n        if (c.window.closed || c.window.document.defaultView === null) this.returnPane(id);\n      } catch {\n        this.returnPane(id);\n      }\n    }\n  }\n  dispose() {\n    if (this.stopped) return;\n    this.stopped = true;\n    this.scope.dispose();\n    for (const [id, c] of this.companions) {\n      try {\n        c.window.document.body.replaceChildren(\n          el(\n            c.window.document,\n            'p',\n            'layouts-placeholder',\n            'Disconnected: the main layout session has ended.',\n          ),\n        );\n      } catch {\n        /* Inaccessible or already closed. */\n      }\n      this.closeCompanion(id, c);\n    }\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "quilt-vanilla",
+  "version": "0.1.0",
+  "description": "Vanilla DOM split panes, tabs, themes, and same-origin window popouts",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/niko-dellic/quilt.git",
+    "directory": "packages/dom"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-package.mjs dom",
+    "prepack": "node ../../scripts/build-package.mjs dom --dependencies"
+  },
+  "dependencies": {
+    "quilt-core": "0.1.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "homepage": "https://github.com/niko-dellic/quilt/tree/main/packages/dom#readme",
+  "bugs": {
+    "url": "https://github.com/niko-dellic/quilt/issues"
+  },
+  "keywords": [
+    "layout",
+    "split-pane",
+    "tabs",
+    "workspace",
+    "typescript"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/action-icons.ts

@@ -0,0 +1,40 @@
+import type { LayoutOptions } from './types.js';
+const paths = {
+  'add-tab': ['M12 5v14M5 12h14'],
+  'split-right': ['M3 4h18v16H3z', 'M12 4v16'],
+  'split-below': ['M3 4h18v16H3z', 'M3 12h18'],
+  'tab-orientation': ['M3 4h18v16H3z', 'M3 9h18', 'M8 9v11'],
+  join: ['M3 4h18v16H3z', 'm7 9 3 3-3 3m10-6-3 3 3 3'],
+  maximize: ['M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5'],
+  restore: ['M3 8h5V3m13 5h-5V3M8 21v-5H3m13 5v-5h5'],
+  popout: ['M14 3h7v7m0-7L11 13', 'M10 3H3v18h18v-7'],
+  close: ['m6 6 12 12M6 18 18 6'],
+  cancel: ['M9 5 2 12l7 7M2 12h14a5 5 0 0 0 0-10'],
+} as const;
+export type ActionIcon = keyof typeof paths;
+/** Small built-in chrome icons; applications may override the namespaced keys. */
+export function actionIcon(
+  doc: Document,
+  name: ActionIcon,
+  options: Pick<LayoutOptions, 'renderIcon'>,
+): Element {
+  const custom = options.renderIcon?.(`layouts:${name}`, doc);
+  if (custom) return custom;
+  const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  for (const [key, value] of Object.entries({
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '1.7',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    focusable: 'false',
+  }))
+    svg.setAttribute(key, value);
+  for (const d of paths[name]) {
+    const path = doc.createElementNS(svg.namespaceURI, 'path');
+    path.setAttribute('d', d);
+    svg.append(path);
+  }
+  return svg;
+}

package/src/chrome-icons.ts

@@ -0,0 +1,30 @@
+/** Shared geometry for renderer-owned controls, independent of application icons. */
+export function chromeIcon(doc: Document, name: 'close' | 'more'): SVGSVGElement {
+  const ns = 'http://www.w3.org/2000/svg';
+  const svg = doc.createElementNS(ns, 'svg');
+  svg.classList.add('layouts-chrome-icon');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('width', '16');
+  svg.setAttribute('height', '16');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '1.75');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('stroke-linejoin', 'round');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('focusable', 'false');
+  if (name === 'close') {
+    const path = doc.createElementNS(ns, 'path');
+    path.setAttribute('d', 'M6 6 18 18 M18 6 6 18');
+    svg.append(path);
+  } else {
+    for (const y of [5, 12, 19]) {
+      const dot = doc.createElementNS(ns, 'circle');
+      dot.setAttribute('cx', '12');
+      dot.setAttribute('cy', String(y));
+      dot.setAttribute('r', '1');
+      svg.append(dot);
+    }
+  }
+  return svg;
+}