quilt-vanilla 0.1.0

package/dist/tabs.js

@@ -0,0 +1,126 @@
+import { chromeIcon } from './chrome-icons.js';
+import { el } from './lifetime.js';
+import { shortcutEnabled } from './shortcuts.js';
+/** Header nodes are disposable; pane views are owned separately by the renderer. */
+export function fillTabs(tabs, group, panes, deps) {
+    const { options, prefix, act } = deps;
+    const doc = tabs.ownerDocument;
+    panes.forEach((pane, i) => {
+        const active = pane.id === group.active;
+        const item = el(doc, 'div', 'layouts-tab-item');
+        item.dataset.active = String(active);
+        const tab = el(doc, 'button', 'layouts-tab');
+        tab.type = 'button';
+        tab.setAttribute('aria-label', pane.title);
+        tab.setAttribute('role', 'tab');
+        tab.setAttribute('aria-selected', String(active));
+        tab.tabIndex = active ? 0 : -1;
+        tab.dataset.focusId = `tab-${pane.id}`;
+        tab.id = `${prefix}-tab-${pane.id}`;
+        tab.setAttribute('aria-controls', `${prefix}-panel-${pane.id}`);
+        const icon = el(doc, 'span', 'layouts-tab-icon');
+        icon.setAttribute('aria-hidden', 'true');
+        let resolved;
+        act(() => {
+            resolved = pane.icon ? options.renderIcon?.(pane.icon, doc) : undefined;
+        });
+        if (resolved)
+            icon.append(resolved);
+        else
+            icon.textContent = Array.from(pane.title.trim())[0] || '•';
+        tab.append(icon, el(doc, 'span', 'layouts-tab-label', pane.title));
+        tab.onclick = () => act(() => options.store.activate(group.id, pane.id));
+        tab.draggable = options.store.can(pane.id, 'move');
+        tab.ondragstart = (e) => {
+            deps.setDrag(pane.id);
+            e.dataTransfer?.setData('text/plain', pane.id);
+            if (e.dataTransfer)
+                e.dataTransfer.effectAllowed = 'move';
+        };
+        tab.ondragend = () => {
+            deps.setDrag(undefined);
+            deps.clearDrop();
+        };
+        const vertical = () => tabs.getAttribute('aria-orientation') === 'vertical';
+        const after = (e) => {
+            const rect = item.getBoundingClientRect();
+            return vertical()
+                ? e.clientY > rect.top + rect.height / 2
+                : e.clientX > rect.left + rect.width / 2;
+        };
+        item.ondragover = (e) => {
+            const id = deps.getDrag();
+            if (!id ||
+                !options.store.can(id, 'move') ||
+                !group.panes.every((p) => options.store.can(p, 'move')))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            deps.clearDrop();
+            item.dataset.tabDrop = after(e) ? 'after' : 'before';
+        };
+        item.ondragleave = () => {
+            delete item.dataset.tabDrop;
+        };
+        item.ondrop = (e) => {
+            const id = deps.getDrag();
+            if (!id)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            let index = i + (after(e) ? 1 : 0);
+            const source = group.panes.indexOf(id);
+            // The controller accepts an insertion index after removing the source tab.
+            if (source >= 0 && source < index)
+                index--;
+            deps.setDrag(undefined);
+            deps.clearDrop();
+            act(() => options.store.move(id, group.id, 'tab', index, { source: 'user' }));
+        };
+        tab.onkeydown = (e) => {
+            let index = i;
+            if (e.key === (vertical() ? 'ArrowDown' : 'ArrowRight'))
+                index = (i + 1) % panes.length;
+            else if (e.key === (vertical() ? 'ArrowUp' : 'ArrowLeft'))
+                index = (i + panes.length - 1) % panes.length;
+            else if (e.key === 'Home')
+                index = 0;
+            else if (e.key === 'End')
+                index = panes.length - 1;
+            else
+                return;
+            e.preventDefault();
+            act(() => options.store.activate(group.id, panes[index].id));
+            deps.focusActive();
+        };
+        const close = () => act(() => {
+            options.store.close(pane.id, { source: 'user' });
+            deps.focusActive();
+        });
+        item.append(tab);
+        if (options.store.can(pane.id, 'close')) {
+            const x = el(doc, 'button', 'layouts-button layouts-tab-close');
+            x.append(chromeIcon(doc, 'close'));
+            x.type = 'button';
+            x.title = `Close ${pane.title}`;
+            x.setAttribute('aria-label', x.title);
+            x.dataset.focusId = `close-${pane.id}`;
+            x.onclick = close;
+            item.append(x);
+            if (shortcutEnabled(options, 'middleClickClose')) {
+                item.onmousedown = (e) => {
+                    if (e.button === 1)
+                        e.preventDefault();
+                };
+                item.onauxclick = (e) => {
+                    if (e.button === 1) {
+                        e.preventDefault();
+                        close();
+                    }
+                };
+            }
+        }
+        tabs.append(item);
+    });
+}
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../src/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { chromeIcon } from './chrome-icons.js';\nimport type { Group, Pane } from 'quilt-core';\nimport type { LayoutOptions } from './types.js';\nimport { el } from './lifetime.js';\nimport { shortcutEnabled } from './shortcuts.js';\ninterface TabDependencies {\n  options: LayoutOptions;\n  prefix: string;\n  act: (fn: () => void) => void;\n  getDrag: () => string | undefined;\n  setDrag: (id: string | undefined) => void;\n  clearDrop: () => void;\n  focusActive: () => void;\n}\n/** Header nodes are disposable; pane views are owned separately by the renderer. */\nexport function fillTabs(tabs: HTMLElement, group: Group, panes: Pane[], deps: TabDependencies) {\n  const { options, prefix, act } = deps;\n  const doc = tabs.ownerDocument;\n  panes.forEach((pane, i) => {\n    const active = pane.id === group.active;\n    const item = el(doc, 'div', 'layouts-tab-item');\n    item.dataset.active = String(active);\n    const tab = el(doc, 'button', 'layouts-tab');\n    tab.type = 'button';\n    tab.setAttribute('aria-label', pane.title);\n    tab.setAttribute('role', 'tab');\n    tab.setAttribute('aria-selected', String(active));\n    tab.tabIndex = active ? 0 : -1;\n    tab.dataset.focusId = `tab-${pane.id}`;\n    tab.id = `${prefix}-tab-${pane.id}`;\n    tab.setAttribute('aria-controls', `${prefix}-panel-${pane.id}`);\n    const icon = el(doc, 'span', 'layouts-tab-icon');\n    icon.setAttribute('aria-hidden', 'true');\n    let resolved: Element | undefined;\n    act(() => {\n      resolved = pane.icon ? options.renderIcon?.(pane.icon, doc) : undefined;\n    });\n    if (resolved) icon.append(resolved);\n    else icon.textContent = Array.from(pane.title.trim())[0] || '•';\n    tab.append(icon, el(doc, 'span', 'layouts-tab-label', pane.title));\n    tab.onclick = () => act(() => options.store.activate(group.id, pane.id));\n    tab.draggable = options.store.can(pane.id, 'move');\n    tab.ondragstart = (e) => {\n      deps.setDrag(pane.id);\n      e.dataTransfer?.setData('text/plain', pane.id);\n      if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';\n    };\n    tab.ondragend = () => {\n      deps.setDrag(undefined);\n      deps.clearDrop();\n    };\n    const vertical = () => tabs.getAttribute('aria-orientation') === 'vertical';\n    const after = (e: DragEvent) => {\n      const rect = item.getBoundingClientRect();\n      return vertical()\n        ? e.clientY > rect.top + rect.height / 2\n        : e.clientX > rect.left + rect.width / 2;\n    };\n    item.ondragover = (e) => {\n      const id = deps.getDrag();\n      if (\n        !id ||\n        !options.store.can(id, 'move') ||\n        !group.panes.every((p) => options.store.can(p, 'move'))\n      )\n        return;\n      e.preventDefault();\n      e.stopPropagation();\n      deps.clearDrop();\n      item.dataset.tabDrop = after(e) ? 'after' : 'before';\n    };\n    item.ondragleave = () => {\n      delete item.dataset.tabDrop;\n    };\n    item.ondrop = (e) => {\n      const id = deps.getDrag();\n      if (!id) return;\n      e.preventDefault();\n      e.stopPropagation();\n      let index = i + (after(e) ? 1 : 0);\n      const source = group.panes.indexOf(id);\n      // The controller accepts an insertion index after removing the source tab.\n      if (source >= 0 && source < index) index--;\n      deps.setDrag(undefined);\n      deps.clearDrop();\n      act(() => options.store.move(id, group.id, 'tab', index, { source: 'user' }));\n    };\n    tab.onkeydown = (e) => {\n      let index = i;\n      if (e.key === (vertical() ? 'ArrowDown' : 'ArrowRight')) index = (i + 1) % panes.length;\n      else if (e.key === (vertical() ? 'ArrowUp' : 'ArrowLeft'))\n        index = (i + panes.length - 1) % panes.length;\n      else if (e.key === 'Home') index = 0;\n      else if (e.key === 'End') index = panes.length - 1;\n      else return;\n      e.preventDefault();\n      act(() => options.store.activate(group.id, panes[index]!.id));\n      deps.focusActive();\n    };\n    const close = () =>\n      act(() => {\n        options.store.close(pane.id, { source: 'user' });\n        deps.focusActive();\n      });\n    item.append(tab);\n    if (options.store.can(pane.id, 'close')) {\n      const x = el(doc, 'button', 'layouts-button layouts-tab-close');\n      x.append(chromeIcon(doc, 'close'));\n      x.type = 'button';\n      x.title = `Close ${pane.title}`;\n      x.setAttribute('aria-label', x.title);\n      x.dataset.focusId = `close-${pane.id}`;\n      x.onclick = close;\n      item.append(x);\n      if (shortcutEnabled(options, 'middleClickClose')) {\n        item.onmousedown = (e) => {\n          if (e.button === 1) e.preventDefault();\n        };\n        item.onauxclick = (e) => {\n          if (e.button === 1) {\n            e.preventDefault();\n            close();\n          }\n        };\n      }\n    }\n    tabs.append(item);\n  });\n}\n"]}

package/dist/theme.d.ts

@@ -0,0 +1,206 @@
+/** All values are CSS values. Theme state is separate from serialized layout structure. */
+export interface LayoutTheme {
+    bg?: string;
+    panel?: string;
+    header?: string;
+    text?: string;
+    muted?: string;
+    line?: string;
+    accent?: string;
+    focus?: string;
+    radius?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    /** Tab and menu icon size (default 16px). */
+    iconSize?: string;
+    /** Shared floating-tab inset and application content padding in CSS pixels (default 8px). */
+    panelPadding?: string;
+    headerHeight?: string;
+    /** Width of the vertical tab rail (default 32px). */
+    headerWidth?: string;
+    /** Resize gap in CSS pixels (default 4px). Explicit split gaps take precedence. */
+    resizeHandleWidth?: string;
+    /** Gap for disabled dividers in CSS pixels (default 0px). */
+    disabledResizeHandleWidth?: string;
+    /** Border color at disabled, gapless boundaries; defaults to line. Use transparent to hide. */
+    frozenPaneBorder?: string;
+    /** 8px target size. */
+    cornerHandleSize?: string;
+    /** 0px offset from pane edges. */
+    cornerHandleInset?: string;
+    /** muted color. */
+    cornerHandleColor?: string;
+    /** 0.35 idle opacity. */
+    cornerHandleOpacity?: string;
+    /** block; none disables corner targets. */
+    cornerHandleDisplay?: string;
+    /** 2px 0 0 2px bracket stroke. */
+    cornerHandleBorderWidth?: string;
+    /** 0px. */
+    cornerHandleRadius?: string;
+    /** transparent. */
+    cornerHandleFill?: string;
+    scrollbarThumb?: string;
+    scrollbarTrack?: string;
+    scrollbarSize?: string;
+    controlHeight?: string;
+    spacing?: string;
+}
+export declare const themeProperties: {
+    readonly bg: "--layouts-bg";
+    readonly panel: "--layouts-panel";
+    readonly header: "--layouts-header";
+    readonly text: "--layouts-text";
+    readonly muted: "--layouts-muted";
+    readonly line: "--layouts-line";
+    readonly accent: "--layouts-accent";
+    readonly focus: "--layouts-focus";
+    readonly radius: "--layouts-radius";
+    readonly fontFamily: "--layouts-font-family";
+    readonly fontSize: "--layouts-font-size";
+    readonly iconSize: "--layouts-icon-size";
+    readonly panelPadding: "--layouts-panel-padding";
+    readonly headerHeight: "--layouts-header-height";
+    readonly headerWidth: "--layouts-header-width";
+    readonly resizeHandleWidth: "--layouts-resize-handle-width";
+    readonly disabledResizeHandleWidth: "--layouts-disabled-resize-handle-width";
+    readonly frozenPaneBorder: "--layouts-frozen-pane-border";
+    readonly cornerHandleSize: "--layouts-corner-handle-size";
+    readonly cornerHandleInset: "--layouts-corner-handle-inset";
+    readonly cornerHandleColor: "--layouts-corner-handle-color";
+    readonly cornerHandleOpacity: "--layouts-corner-handle-opacity";
+    readonly cornerHandleDisplay: "--layouts-corner-handle-display";
+    readonly cornerHandleBorderWidth: "--layouts-corner-handle-border-width";
+    readonly cornerHandleRadius: "--layouts-corner-handle-radius";
+    readonly cornerHandleFill: "--layouts-corner-handle-fill";
+    readonly scrollbarThumb: "--layouts-scrollbar-thumb";
+    readonly scrollbarTrack: "--layouts-scrollbar-track";
+    readonly scrollbarSize: "--layouts-scrollbar-size";
+    readonly controlHeight: "--layouts-control-height";
+    readonly spacing: "--layouts-spacing";
+};
+/** Optional application presets: no framework, persistence, or global theme state. */
+export declare const themeFamilies: {
+    readonly neutral: {
+        readonly dark: {
+            readonly bg: "#0a0a0a";
+            readonly panel: "#171717";
+            readonly header: "#262626";
+            readonly text: "#fafafa";
+            readonly muted: "#a3a3a3";
+            readonly line: "#525252";
+            readonly accent: "#e5e5e5";
+            readonly focus: "#e5e5e5";
+        };
+        readonly light: {
+            readonly bg: "#fafafa";
+            readonly panel: "#ffffff";
+            readonly header: "#f5f5f5";
+            readonly text: "#171717";
+            readonly muted: "#525252";
+            readonly line: "#d4d4d4";
+            readonly accent: "#262626";
+            readonly focus: "#262626";
+        };
+    };
+    readonly zinc: {
+        readonly dark: {
+            readonly bg: "#09090b";
+            readonly panel: "#18181b";
+            readonly header: "#27272a";
+            readonly text: "#fafafa";
+            readonly muted: "#a1a1aa";
+            readonly line: "#52525b";
+            readonly accent: "#d4d4d8";
+            readonly focus: "#d4d4d8";
+        };
+        readonly light: {
+            readonly bg: "#fafafa";
+            readonly panel: "#ffffff";
+            readonly header: "#f4f4f5";
+            readonly text: "#18181b";
+            readonly muted: "#52525b";
+            readonly line: "#d4d4d8";
+            readonly accent: "#3f3f46";
+            readonly focus: "#3f3f46";
+        };
+    };
+    readonly stone: {
+        readonly dark: {
+            readonly bg: "#0c0a09";
+            readonly panel: "#1c1917";
+            readonly header: "#292524";
+            readonly text: "#fafaf9";
+            readonly muted: "#a8a29e";
+            readonly line: "#57534e";
+            readonly accent: "#d6d3d1";
+            readonly focus: "#d6d3d1";
+        };
+        readonly light: {
+            readonly bg: "#fafaf9";
+            readonly panel: "#ffffff";
+            readonly header: "#f5f5f4";
+            readonly text: "#1c1917";
+            readonly muted: "#57534e";
+            readonly line: "#d6d3d1";
+            readonly accent: "#57534e";
+            readonly focus: "#57534e";
+        };
+    };
+    readonly mist: {
+        readonly dark: {
+            readonly bg: "#0b1114";
+            readonly panel: "#141e23";
+            readonly header: "#1e2c32";
+            readonly text: "#edf4f7";
+            readonly muted: "#9eb5bf";
+            readonly line: "#425d69";
+            readonly accent: "#8bc5d8";
+            readonly focus: "#8bc5d8";
+        };
+        readonly light: {
+            readonly bg: "#f4f8fa";
+            readonly panel: "#ffffff";
+            readonly header: "#eaf1f4";
+            readonly text: "#192c35";
+            readonly muted: "#465f6b";
+            readonly line: "#b8ccd5";
+            readonly accent: "#28647b";
+            readonly focus: "#28647b";
+        };
+    };
+};
+export declare const themes: {
+    readonly dark: {
+        readonly bg: "#161a20";
+        readonly panel: "#1d222a";
+        readonly header: "#242a34";
+        readonly text: "#e5e9f0";
+        readonly muted: "#a2acba";
+        readonly line: "#39414e";
+        readonly accent: "#8bbaaa";
+        readonly focus: "#b3decf";
+    };
+    readonly light: {
+        readonly bg: "#dce1e8";
+        readonly panel: "#ffffff";
+        readonly header: "#f0f3f7";
+        readonly text: "#202936";
+        readonly muted: "#586579";
+        readonly line: "#c9d1dc";
+        readonly accent: "#357a69";
+        readonly focus: "#195fc1";
+    };
+    readonly sage: {
+        readonly bg: "#cbd3c7";
+        readonly panel: "#f1f3ed";
+        readonly header: "#e9ede4";
+        readonly text: "#2d4133";
+        readonly muted: "#72816e";
+        readonly line: "#d0d8c9";
+        readonly accent: "#6a957a";
+        readonly focus: "#316c4b";
+    };
+};
+export declare function applyTheme(root: HTMLElement, theme: LayoutTheme): void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6DAA6D;IAC7D,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yBAAyB;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kCAAkC;IAClC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,WAAW;IACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgClB,CAAC;AACX,sFAAsF;AACtF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFoD,CAAC;AAC/E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B6B,CAAC;AACjD,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,QAM/D"}

package/dist/theme.js

@@ -0,0 +1,166 @@
+export const themeProperties = {
+    bg: '--layouts-bg',
+    panel: '--layouts-panel',
+    header: '--layouts-header',
+    text: '--layouts-text',
+    muted: '--layouts-muted',
+    line: '--layouts-line',
+    accent: '--layouts-accent',
+    focus: '--layouts-focus',
+    radius: '--layouts-radius',
+    fontFamily: '--layouts-font-family',
+    fontSize: '--layouts-font-size',
+    iconSize: '--layouts-icon-size',
+    panelPadding: '--layouts-panel-padding',
+    headerHeight: '--layouts-header-height',
+    headerWidth: '--layouts-header-width',
+    resizeHandleWidth: '--layouts-resize-handle-width',
+    disabledResizeHandleWidth: '--layouts-disabled-resize-handle-width',
+    frozenPaneBorder: '--layouts-frozen-pane-border',
+    cornerHandleSize: '--layouts-corner-handle-size',
+    cornerHandleInset: '--layouts-corner-handle-inset',
+    cornerHandleColor: '--layouts-corner-handle-color',
+    cornerHandleOpacity: '--layouts-corner-handle-opacity',
+    cornerHandleDisplay: '--layouts-corner-handle-display',
+    cornerHandleBorderWidth: '--layouts-corner-handle-border-width',
+    cornerHandleRadius: '--layouts-corner-handle-radius',
+    cornerHandleFill: '--layouts-corner-handle-fill',
+    scrollbarThumb: '--layouts-scrollbar-thumb',
+    scrollbarTrack: '--layouts-scrollbar-track',
+    scrollbarSize: '--layouts-scrollbar-size',
+    controlHeight: '--layouts-control-height',
+    spacing: '--layouts-spacing',
+};
+/** Optional application presets: no framework, persistence, or global theme state. */
+export const themeFamilies = {
+    neutral: {
+        dark: {
+            bg: '#0a0a0a',
+            panel: '#171717',
+            header: '#262626',
+            text: '#fafafa',
+            muted: '#a3a3a3',
+            line: '#525252',
+            accent: '#e5e5e5',
+            focus: '#e5e5e5',
+        },
+        light: {
+            bg: '#fafafa',
+            panel: '#ffffff',
+            header: '#f5f5f5',
+            text: '#171717',
+            muted: '#525252',
+            line: '#d4d4d4',
+            accent: '#262626',
+            focus: '#262626',
+        },
+    },
+    zinc: {
+        dark: {
+            bg: '#09090b',
+            panel: '#18181b',
+            header: '#27272a',
+            text: '#fafafa',
+            muted: '#a1a1aa',
+            line: '#52525b',
+            accent: '#d4d4d8',
+            focus: '#d4d4d8',
+        },
+        light: {
+            bg: '#fafafa',
+            panel: '#ffffff',
+            header: '#f4f4f5',
+            text: '#18181b',
+            muted: '#52525b',
+            line: '#d4d4d8',
+            accent: '#3f3f46',
+            focus: '#3f3f46',
+        },
+    },
+    stone: {
+        dark: {
+            bg: '#0c0a09',
+            panel: '#1c1917',
+            header: '#292524',
+            text: '#fafaf9',
+            muted: '#a8a29e',
+            line: '#57534e',
+            accent: '#d6d3d1',
+            focus: '#d6d3d1',
+        },
+        light: {
+            bg: '#fafaf9',
+            panel: '#ffffff',
+            header: '#f5f5f4',
+            text: '#1c1917',
+            muted: '#57534e',
+            line: '#d6d3d1',
+            accent: '#57534e',
+            focus: '#57534e',
+        },
+    },
+    mist: {
+        dark: {
+            bg: '#0b1114',
+            panel: '#141e23',
+            header: '#1e2c32',
+            text: '#edf4f7',
+            muted: '#9eb5bf',
+            line: '#425d69',
+            accent: '#8bc5d8',
+            focus: '#8bc5d8',
+        },
+        light: {
+            bg: '#f4f8fa',
+            panel: '#ffffff',
+            header: '#eaf1f4',
+            text: '#192c35',
+            muted: '#465f6b',
+            line: '#b8ccd5',
+            accent: '#28647b',
+            focus: '#28647b',
+        },
+    },
+};
+export const themes = {
+    dark: {
+        bg: '#161a20',
+        panel: '#1d222a',
+        header: '#242a34',
+        text: '#e5e9f0',
+        muted: '#a2acba',
+        line: '#39414e',
+        accent: '#8bbaaa',
+        focus: '#b3decf',
+    },
+    light: {
+        bg: '#dce1e8',
+        panel: '#ffffff',
+        header: '#f0f3f7',
+        text: '#202936',
+        muted: '#586579',
+        line: '#c9d1dc',
+        accent: '#357a69',
+        focus: '#195fc1',
+    },
+    sage: {
+        bg: '#cbd3c7',
+        panel: '#f1f3ed',
+        header: '#e9ede4',
+        text: '#2d4133',
+        muted: '#72816e',
+        line: '#d0d8c9',
+        accent: '#6a957a',
+        focus: '#316c4b',
+    },
+};
+export function applyTheme(root, theme) {
+    for (const key of Object.keys(themeProperties)) {
+        const value = theme[key];
+        if (value === undefined)
+            root.style.removeProperty(themeProperties[key]);
+        else
+            root.style.setProperty(themeProperties[key], value);
+    }
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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","sourcesContent":["/** All values are CSS values. Theme state is separate from serialized layout structure. */\nexport interface LayoutTheme {\n  bg?: string;\n  panel?: string;\n  header?: string;\n  text?: string;\n  muted?: string;\n  line?: string;\n  accent?: string;\n  focus?: string;\n  radius?: string;\n  fontFamily?: string;\n  fontSize?: string;\n  /** Tab and menu icon size (default 16px). */\n  iconSize?: string;\n  /** Shared floating-tab inset and application content padding in CSS pixels (default 8px). */\n  panelPadding?: string;\n  headerHeight?: string;\n  /** Width of the vertical tab rail (default 32px). */\n  headerWidth?: string;\n  /** Resize gap in CSS pixels (default 4px). Explicit split gaps take precedence. */\n  resizeHandleWidth?: string;\n  /** Gap for disabled dividers in CSS pixels (default 0px). */\n  disabledResizeHandleWidth?: string;\n  /** Border color at disabled, gapless boundaries; defaults to line. Use transparent to hide. */\n  frozenPaneBorder?: string;\n  /** 8px target size. */\n  cornerHandleSize?: string;\n  /** 0px offset from pane edges. */\n  cornerHandleInset?: string;\n  /** muted color. */\n  cornerHandleColor?: string;\n  /** 0.35 idle opacity. */\n  cornerHandleOpacity?: string;\n  /** block; none disables corner targets. */\n  cornerHandleDisplay?: string;\n  /** 2px 0 0 2px bracket stroke. */\n  cornerHandleBorderWidth?: string;\n  /** 0px. */\n  cornerHandleRadius?: string;\n  /** transparent. */\n  cornerHandleFill?: string;\n  scrollbarThumb?: string;\n  scrollbarTrack?: string;\n  scrollbarSize?: string;\n  controlHeight?: string;\n  spacing?: string;\n}\nexport const themeProperties = {\n  bg: '--layouts-bg',\n  panel: '--layouts-panel',\n  header: '--layouts-header',\n  text: '--layouts-text',\n  muted: '--layouts-muted',\n  line: '--layouts-line',\n  accent: '--layouts-accent',\n  focus: '--layouts-focus',\n  radius: '--layouts-radius',\n  fontFamily: '--layouts-font-family',\n  fontSize: '--layouts-font-size',\n  iconSize: '--layouts-icon-size',\n  panelPadding: '--layouts-panel-padding',\n  headerHeight: '--layouts-header-height',\n  headerWidth: '--layouts-header-width',\n  resizeHandleWidth: '--layouts-resize-handle-width',\n  disabledResizeHandleWidth: '--layouts-disabled-resize-handle-width',\n  frozenPaneBorder: '--layouts-frozen-pane-border',\n  cornerHandleSize: '--layouts-corner-handle-size',\n  cornerHandleInset: '--layouts-corner-handle-inset',\n  cornerHandleColor: '--layouts-corner-handle-color',\n  cornerHandleOpacity: '--layouts-corner-handle-opacity',\n  cornerHandleDisplay: '--layouts-corner-handle-display',\n  cornerHandleBorderWidth: '--layouts-corner-handle-border-width',\n  cornerHandleRadius: '--layouts-corner-handle-radius',\n  cornerHandleFill: '--layouts-corner-handle-fill',\n  scrollbarThumb: '--layouts-scrollbar-thumb',\n  scrollbarTrack: '--layouts-scrollbar-track',\n  scrollbarSize: '--layouts-scrollbar-size',\n  controlHeight: '--layouts-control-height',\n  spacing: '--layouts-spacing',\n} as const;\n/** Optional application presets: no framework, persistence, or global theme state. */\nexport const themeFamilies = {\n  neutral: {\n    dark: {\n      bg: '#0a0a0a',\n      panel: '#171717',\n      header: '#262626',\n      text: '#fafafa',\n      muted: '#a3a3a3',\n      line: '#525252',\n      accent: '#e5e5e5',\n      focus: '#e5e5e5',\n    },\n    light: {\n      bg: '#fafafa',\n      panel: '#ffffff',\n      header: '#f5f5f5',\n      text: '#171717',\n      muted: '#525252',\n      line: '#d4d4d4',\n      accent: '#262626',\n      focus: '#262626',\n    },\n  },\n  zinc: {\n    dark: {\n      bg: '#09090b',\n      panel: '#18181b',\n      header: '#27272a',\n      text: '#fafafa',\n      muted: '#a1a1aa',\n      line: '#52525b',\n      accent: '#d4d4d8',\n      focus: '#d4d4d8',\n    },\n    light: {\n      bg: '#fafafa',\n      panel: '#ffffff',\n      header: '#f4f4f5',\n      text: '#18181b',\n      muted: '#52525b',\n      line: '#d4d4d8',\n      accent: '#3f3f46',\n      focus: '#3f3f46',\n    },\n  },\n  stone: {\n    dark: {\n      bg: '#0c0a09',\n      panel: '#1c1917',\n      header: '#292524',\n      text: '#fafaf9',\n      muted: '#a8a29e',\n      line: '#57534e',\n      accent: '#d6d3d1',\n      focus: '#d6d3d1',\n    },\n    light: {\n      bg: '#fafaf9',\n      panel: '#ffffff',\n      header: '#f5f5f4',\n      text: '#1c1917',\n      muted: '#57534e',\n      line: '#d6d3d1',\n      accent: '#57534e',\n      focus: '#57534e',\n    },\n  },\n  mist: {\n    dark: {\n      bg: '#0b1114',\n      panel: '#141e23',\n      header: '#1e2c32',\n      text: '#edf4f7',\n      muted: '#9eb5bf',\n      line: '#425d69',\n      accent: '#8bc5d8',\n      focus: '#8bc5d8',\n    },\n    light: {\n      bg: '#f4f8fa',\n      panel: '#ffffff',\n      header: '#eaf1f4',\n      text: '#192c35',\n      muted: '#465f6b',\n      line: '#b8ccd5',\n      accent: '#28647b',\n      focus: '#28647b',\n    },\n  },\n} as const satisfies Record<string, { dark: LayoutTheme; light: LayoutTheme }>;\nexport const themes = {\n  dark: {\n    bg: '#161a20',\n    panel: '#1d222a',\n    header: '#242a34',\n    text: '#e5e9f0',\n    muted: '#a2acba',\n    line: '#39414e',\n    accent: '#8bbaaa',\n    focus: '#b3decf',\n  },\n  light: {\n    bg: '#dce1e8',\n    panel: '#ffffff',\n    header: '#f0f3f7',\n    text: '#202936',\n    muted: '#586579',\n    line: '#c9d1dc',\n    accent: '#357a69',\n    focus: '#195fc1',\n  },\n  sage: {\n    bg: '#cbd3c7',\n    panel: '#f1f3ed',\n    header: '#e9ede4',\n    text: '#2d4133',\n    muted: '#72816e',\n    line: '#d0d8c9',\n    accent: '#6a957a',\n    focus: '#316c4b',\n  },\n} as const satisfies Record<string, LayoutTheme>;\nexport function applyTheme(root: HTMLElement, theme: LayoutTheme) {\n  for (const key of Object.keys(themeProperties) as (keyof LayoutTheme)[]) {\n    const value = theme[key];\n    if (value === undefined) root.style.removeProperty(themeProperties[key]);\n    else root.style.setProperty(themeProperties[key], value);\n  }\n}\n"]}

package/dist/types.d.ts

@@ -0,0 +1,66 @@
+import type { TabRegistry } from './registry.js';
+import type { LayoutTheme } from './theme.js';
+import type { LayoutStore, Pane, WindowPlacement } from 'quilt-core';
+export interface PaneContext {
+    element: HTMLElement;
+    document: Document;
+    window: Window;
+    pane: Pane;
+    /** Stable application-owned reference. The library does not serialize this value. */
+    state: unknown;
+    location: 'main' | 'popout';
+}
+export interface PaneView {
+    dispose(): void;
+    resize?(width: number, height: number): void;
+    update?(pane: Pane): void;
+}
+export type PaneRenderer = (context: PaneContext) => PaneView;
+export interface TabBarStyle {
+    /** Left placement uses an icon-only rail; mode and shape apply in either placement. */
+    placement?: 'top' | 'left';
+    /** Automatic shows labels as width permits; compact always uses icons only. */
+    display?: 'automatic' | 'compact';
+    mode?: 'full' | 'tapered';
+    shape?: 'angle' | 'round' | 'scoop' | 'vertical' | 'rounded';
+    /** Anchored by default; floating bars overlay content with an 8px inset. */
+    attachment?: 'anchored' | 'floating';
+    fit?: 'full' | 'fit';
+    corners?: 'fitted' | 'rounded' | 'capsule';
+    /** Positive finite CSS pixels. Omit to match header height. */
+    taperWidth?: number;
+}
+export interface TabBarOptions extends TabBarStyle {
+    /** Partial overrides keyed by stable group ID; not serialized in Layout JSON. */
+    regions?: Record<string, TabBarStyle>;
+}
+export interface LayoutOptions {
+    tabBar?: TabBarOptions;
+    store: LayoutStore;
+    tabs?: TabRegistry;
+    theme?: LayoutTheme;
+    renderers: Record<string, PaneRenderer>;
+    /** Return a fresh decorative icon element. Unknown keys use a title initial. */
+    renderIcon?: (key: string, document: Document) => Element | undefined;
+    /** Opt-in conveniences; omitted and false disable all. */
+    shortcuts?: boolean | {
+        maximize?: boolean;
+        middleClickClose?: boolean;
+        addTab?: boolean;
+        restoreClosedTab?: boolean;
+    };
+    getPaneState?: (paneId: string) => unknown;
+    onError?: (error: unknown) => void;
+    /** Copy additional app styles/assets into a same-origin companion document. */
+    prepareWindow?: (window: Window, pane: Pane) => void;
+    /** Override window creation for applications with a managed same-origin host. Must return synchronously. */
+    openWindow?: (pane: Pane, placement: WindowPlacement) => Window | null;
+}
+export interface MountedLayout {
+    setTabBar(options: TabBarOptions): void;
+    setTheme(theme: LayoutTheme): void;
+    popout(paneId: string, placement?: WindowPlacement): boolean;
+    returnPane(paneId: string): void;
+    dispose(): void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TabRegistry } from './registry.js';\nimport type { LayoutTheme } from './theme.js';\nimport type { LayoutStore, Pane, WindowPlacement } from 'quilt-core';\nexport interface PaneContext {\n  element: HTMLElement;\n  document: Document;\n  window: Window;\n  pane: Pane;\n  /** Stable application-owned reference. The library does not serialize this value. */\n  state: unknown;\n  location: 'main' | 'popout';\n}\nexport interface PaneView {\n  dispose(): void;\n  resize?(width: number, height: number): void;\n  update?(pane: Pane): void;\n}\nexport type PaneRenderer = (context: PaneContext) => PaneView;\nexport interface TabBarStyle {\n  /** Left placement uses an icon-only rail; mode and shape apply in either placement. */\n  placement?: 'top' | 'left';\n  /** Automatic shows labels as width permits; compact always uses icons only. */\n  display?: 'automatic' | 'compact';\n  mode?: 'full' | 'tapered';\n  shape?: 'angle' | 'round' | 'scoop' | 'vertical' | 'rounded';\n  /** Anchored by default; floating bars overlay content with an 8px inset. */\n  attachment?: 'anchored' | 'floating';\n  fit?: 'full' | 'fit';\n  corners?: 'fitted' | 'rounded' | 'capsule';\n  /** Positive finite CSS pixels. Omit to match header height. */\n  taperWidth?: number;\n}\nexport interface TabBarOptions extends TabBarStyle {\n  /** Partial overrides keyed by stable group ID; not serialized in Layout JSON. */\n  regions?: Record<string, TabBarStyle>;\n}\nexport interface LayoutOptions {\n  tabBar?: TabBarOptions;\n  store: LayoutStore;\n  tabs?: TabRegistry;\n  theme?: LayoutTheme;\n  renderers: Record<string, PaneRenderer>;\n  /** Return a fresh decorative icon element. Unknown keys use a title initial. */\n  renderIcon?: (key: string, document: Document) => Element | undefined;\n  /** Opt-in conveniences; omitted and false disable all. */\n  shortcuts?:\n    | boolean\n    | {\n        maximize?: boolean;\n        middleClickClose?: boolean;\n        addTab?: boolean;\n        restoreClosedTab?: boolean;\n      };\n  getPaneState?: (paneId: string) => unknown;\n  onError?: (error: unknown) => void;\n  /** Copy additional app styles/assets into a same-origin companion document. */\n  prepareWindow?: (window: Window, pane: Pane) => void;\n  /** Override window creation for applications with a managed same-origin host. Must return synchronously. */\n  openWindow?: (pane: Pane, placement: WindowPlacement) => Window | null;\n}\nexport interface MountedLayout {\n  setTabBar(options: TabBarOptions): void;\n  setTheme(theme: LayoutTheme): void;\n  popout(paneId: string, placement?: WindowPlacement): boolean;\n  returnPane(paneId: string): void;\n  dispose(): void;\n}\n"]}

package/dist/windows.d.ts

@@ -0,0 +1,23 @@
+import type { WindowPlacement } from 'quilt-core';
+import type { LayoutOptions } from './types.js';
+/** The opener owns all state; child documents never load an independent app bundle. */
+export declare class Windows {
+    private doc;
+    private options;
+    private error;
+    private themeRoot;
+    private companions;
+    private scope;
+    private stopped;
+    readonly pending: Map<string, WindowPlacement>;
+    constructor(doc: Document, options: LayoutOptions, error: (e: unknown) => void, themeRoot: HTMLElement);
+    private restoreMissing;
+    private reconcile;
+    private styles;
+    open(id: string, placement?: WindowPlacement): boolean;
+    returnPane(id: string): void;
+    private closeCompanion;
+    private check;
+    dispose(): void;
+}
+//# sourceMappingURL=windows.d.ts.map