quilt-vanilla 0.1.0

package/src/theme.ts

@@ -0,0 +1,211 @@
+/** 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 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',
+} as const;
+/** 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',
+    },
+  },
+} as const satisfies Record<string, { dark: LayoutTheme; light: LayoutTheme }>;
+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',
+  },
+} as const satisfies Record<string, LayoutTheme>;
+export function applyTheme(root: HTMLElement, theme: LayoutTheme) {
+  for (const key of Object.keys(themeProperties) as (keyof LayoutTheme)[]) {
+    const value = theme[key];
+    if (value === undefined) root.style.removeProperty(themeProperties[key]);
+    else root.style.setProperty(themeProperties[key], value);
+  }
+}

package/src/types.ts

@@ -0,0 +1,67 @@
+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;
+}

package/src/windows.ts

@@ -0,0 +1,244 @@
+import { themeProperties } from './theme.js';
+import type { Pane, WindowPlacement } from 'quilt-core';
+import type { LayoutOptions } from './types.js';
+import { el, Scope } from './lifetime.js';
+import { mountPane } from './panes.js';
+import type { MountedPane } from './panes.js';
+interface Companion {
+  window: Window;
+  mounted: MountedPane;
+  scope: Scope;
+  suppressReturn: boolean;
+}
+/** The opener owns all state; child documents never load an independent app bundle. */
+export class Windows {
+  private companions = new Map<string, Companion>();
+  private scope = new Scope();
+  private stopped = false;
+  readonly pending = new Map<string, WindowPlacement>();
+  constructor(
+    private doc: Document,
+    private options: LayoutOptions,
+    private error: (e: unknown) => void,
+    private themeRoot: HTMLElement,
+  ) {
+    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()));
+  }
+  private 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);
+      }
+    }
+  }
+  private 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);
+  }
+  private styles(target: Window, pane: Pane, scope: 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: Element[] = [];
+    const copy = () => {
+      copied.forEach((n) => n.remove());
+      copied = Array.from(source.head.querySelectorAll('link[rel="stylesheet"], style')).map(
+        (n) => n.cloneNode(true) as Element,
+      );
+      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: string, placement: WindowPlacement = {}): boolean {
+    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: Window | null = null,
+      mounted: MountedPane | undefined;
+    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: HTMLElement | null = 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: Companion = { 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: string) {
+    if (this.stopped) return;
+    try {
+      this.options.store.returnPane(id);
+    } catch (error) {
+      this.error(error);
+    }
+  }
+  private closeCompanion(id: string, c: Companion) {
+    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. */
+    }
+  }
+  private 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);
+    }
+  }
+}