quilt-vanilla 0.2.4 → 0.4.0

package/src/styles.css

@@ -162,10 +162,13 @@
 .layouts-menu {
   position: fixed;
   margin: 0;
-  padding: 5px;
   width: 240px;
   max-height: min(520px, 70vh);
   overflow: auto;
+}
+.layouts-menu,
+.layouts-submenu-content {
+  padding: var(--layouts-spacing, 5px);
   background: var(--layouts-header, #242a34);
   color: var(--layouts-text, #e5e9f0);
   border: 1px solid var(--layouts-line, #39414e);
@@ -374,9 +377,6 @@
 .layouts-submenu-content {
   display: flex;
   flex-direction: column;
-  padding: 4px;
-  border: 1px solid var(--layouts-line);
-  background: var(--layouts-panel);
 }
 .layouts-corner {
   position: absolute;
@@ -437,8 +437,6 @@
   box-sizing: border-box;
   overflow: auto;
   width: 200px;
-  box-shadow: 0 8px 24px #0005;
-  border-radius: var(--layouts-radius, 5px);
 }
 
 .layouts-corner-overlay {
@@ -482,9 +480,6 @@
 .layouts-picker button {
   min-height: var(--layouts-control-height, 28px);
 }
-.layouts-menu {
-  padding: var(--layouts-spacing, 5px);
-}
 
 /* Tapered chrome overlays the pane; only its painted footprint intercepts input. */
 .layouts-group[data-tab-bar='tapered'] > .layouts-header {
@@ -831,3 +826,73 @@
   flex: 0 0 calc(var(--layouts-icon-size, 16px) + 16px);
   min-width: calc(var(--layouts-icon-size, 16px) + 16px);
 }
+
+/* Chrome remains usable at the renderer's minimum region size, even with larger icons. */
+.layouts-group[data-tab-placement='top'] > .layouts-header {
+  min-height: calc(var(--layouts-icon-size, 16px) + 9px);
+}
+.layouts-group[data-tab-placement='top'][data-tab-display='automatic'] .layouts-tab-item {
+  min-width: max(32px, calc(var(--layouts-icon-size, 16px) + 8px));
+}
+.layouts-group[data-tab-placement='top'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']:has(> .layouts-tab-close) {
+  min-width: max(
+    56px,
+    calc(var(--layouts-icon-size, 16px) + 11px + max(22px, var(--layouts-icon-size, 16px)))
+  );
+}
+.layouts-group[data-tab-placement='left'] > .layouts-header {
+  min-width: max(32px, calc(var(--layouts-icon-size, 16px) + 10px));
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item,
+.layouts-group[data-tab-placement='left'] > .layouts-header > .layouts-button {
+  flex-basis: max(30px, calc(var(--layouts-icon-size, 16px) + 8px));
+  height: max(30px, calc(var(--layouts-icon-size, 16px) + 8px));
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']:has(> .layouts-tab-close) {
+  flex-basis: calc(
+    max(30px, var(--layouts-icon-size, 16px) + 8px) + max(22px, var(--layouts-icon-size, 16px))
+  );
+  height: calc(
+    max(30px, var(--layouts-icon-size, 16px) + 8px) + max(22px, var(--layouts-icon-size, 16px))
+  );
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']:has(> .layouts-tab-close)
+  > .layouts-tab {
+  flex-basis: max(30px, calc(var(--layouts-icon-size, 16px) + 8px));
+}
+
+.layouts-tab-item .layouts-tab-close {
+  flex-basis: max(22px, var(--layouts-icon-size, 16px));
+  width: max(22px, var(--layouts-icon-size, 16px));
+  max-height: max(24px, var(--layouts-icon-size, 16px));
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']
+  > .layouts-tab-close {
+  flex-basis: max(22px, var(--layouts-icon-size, 16px));
+  height: max(22px, var(--layouts-icon-size, 16px));
+}
+
+.layouts-shortcut {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  min-width: 1.8em;
+  min-height: 1.8em;
+  padding: 0.15em 0.45em;
+  flex-shrink: 0;
+  border: 1px solid color-mix(in srgb, var(--layouts-text, #e5e9f0) 22%, transparent);
+  border-radius: 0.5em;
+  background: color-mix(in srgb, var(--layouts-text, #e5e9f0) 4%, transparent);
+  font: inherit;
+  font-size: 0.9em;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--layouts-text, #e5e9f0);
+  white-space: nowrap;
+  pointer-events: none;
+}

package/src/tabs.ts

@@ -114,17 +114,15 @@ export function fillTabs(tabs: HTMLElement, group: Group, panes: Pane[], deps: T
       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();
-          }
-        };
-      }
+      item.onmousedown = (e) => {
+        if (e.button === 1 && shortcutEnabled(options, 'middleClickClose')) e.preventDefault();
+      };
+      item.onauxclick = (e) => {
+        if (e.button === 1 && shortcutEnabled(options, 'middleClickClose')) {
+          e.preventDefault();
+          close();
+        }
+      };
     }
     tabs.append(item);
   });

package/src/types.ts

@@ -3,9 +3,13 @@ import type { WorkspacePreset } from './workspace.js';
 import type { Messages } from './messages.js';
 import type { TabRegistry } from './registry.js';
 import type { LayoutTheme } from './theme.js';
-import type { LayoutStore, Pane, WindowPlacement } from 'quilt-core';
+import type { LayoutStore, Layout, Pane, WindowPlacement } from 'quilt-core';
 export interface PaneContext<State = unknown> {
   element: HTMLElement;
+  /** Aborted when this view is torn down, including a failed mount. */
+  signal: AbortSignal;
+  /** Register view-owned cleanup; callbacks run once in reverse order. */
+  onCleanup(callback: () => void): void;
   reportError(error: unknown): void;
   document: Document;
   window: Window;
@@ -21,7 +25,7 @@ export interface PaneView {
   resize?(width: number, height: number): void;
   update?(pane: Pane): void;
 }
-export type PaneRenderer<State = unknown> = (context: PaneContext<State>) => PaneView;
+export type PaneRenderer<State = unknown> = (context: PaneContext<State>) => PaneView | void;
 export interface TabBarStyle {
   /** Left placement uses an icon-only rail; mode and shape apply in either placement. */
   placement?: 'top' | 'left';
@@ -40,13 +44,10 @@ export interface TabBarOptions extends TabBarStyle {
   /** Partial overrides keyed by stable group ID; not serialized in Layout JSON. */
   regions?: Record<string, TabBarStyle>;
 }
-export interface ResolvedLayoutOptions<State = unknown> {
+/** Live appearance, interactions, and application integration callbacks. */
+export interface WorkspaceSettings<State = unknown> {
   tabBar?: TabBarOptions;
-  store: LayoutStore;
-  tabs?: TabRegistry;
   theme?: LayoutTheme;
-  renderers?: Record<string, PaneRenderer<State>>;
-  registry?: PaneRegistry<PaneRenderer<State>>;
   messages?: Messages;
   popouts?: boolean;
   confirmClose?: (request: CloseRequest) => boolean | Promise<boolean>;
@@ -55,12 +56,11 @@ export interface ResolvedLayoutOptions<State = unknown> {
   /** Opt-in conveniences; omitted and false disable all. */
   shortcuts?:
     | boolean
-    | {
-        maximize?: boolean | KeyBinding | readonly KeyBinding[];
+    | (Partial<Record<WorkspaceAction, ShortcutRegistration>> & {
         middleClickClose?: boolean;
-        addTab?: boolean | KeyBinding | readonly KeyBinding[];
-        restoreClosedTab?: boolean | KeyBinding | readonly KeyBinding[];
-      };
+      });
+  /** Customize presentation only; matching and accessibility encoding use the binding. */
+  formatShortcut?: (binding: Readonly<KeyBinding>) => string;
   getPaneState?: (paneId: string) => State;
   onError?: (error: unknown) => void;
   /** Copy additional app styles/assets into a same-origin companion document. */
@@ -68,12 +68,25 @@ export interface ResolvedLayoutOptions<State = unknown> {
   /** Override window creation for applications with a managed same-origin host. Must return synchronously. */
   openWindow?: (pane: Pane, placement: WindowPlacement) => Window | null;
 }
+/** Internal renderer configuration; mounted workspaces create this model themselves. */
+export interface ResolvedLayoutOptions<State = unknown> extends WorkspaceSettings<State> {
+  store: LayoutStore;
+  tabs?: TabRegistry;
+  renderers?: Record<string, PaneRenderer<State>>;
+  registry?: PaneRegistry<PaneRenderer<State>>;
+}
+/** Initial configuration is consumed once. Use workspace commands for later changes. */
+export type InitialConfiguration =
+  | { initialLayout?: Layout; initialWorkspace?: never }
+  | { initialLayout?: never; initialWorkspace: WorkspacePreset };
+/** Commands and subscriptions for a workspace-owned store. */
+export type WorkspaceStore = Omit<LayoutStore, 'dispose'>;
 /** Choose a unified registry OR the low-level renderer and creation maps. */
 export type LayoutOptions<State = unknown> = Omit<
   ResolvedLayoutOptions<State>,
-  'registry' | 'renderers' | 'tabs' | 'getPaneState'
+  'store' | 'registry' | 'renderers' | 'tabs' | 'getPaneState'
 > &
-  (unknown extends State
+  InitialConfiguration & { store?: never } & (unknown extends State
     ? { getPaneState?: (paneId: string) => State }
     : { getPaneState: (paneId: string) => State }) &
   (
@@ -85,6 +98,42 @@ export type LayoutOptionUpdates<State = unknown> = {
   [Key in keyof Omit<ResolvedLayoutOptions<State>, 'store'>]?:
     ResolvedLayoutOptions<State>[Key] | undefined;
 };
+export type WorkspaceAction =
+  | 'maximize'
+  | 'addTab'
+  | 'restoreClosedTab'
+  | 'closeActiveTab'
+  | 'closePane'
+  | 'closeEmptyPane'
+  | 'popout'
+  | 'joinSiblingRegion'
+  | 'splitLeft'
+  | 'splitRight'
+  | 'splitUp'
+  | 'splitDown'
+  | 'tabOrientationDefault'
+  | 'tabOrientationHorizontal'
+  | 'tabOrientationVertical'
+  | 'tabDisplayDefault'
+  | 'tabDisplayAutomatic'
+  | 'tabDisplayCompact';
+export interface ActionContext {
+  groupId?: string;
+  paneId?: string;
+}
+export type ShortcutRegistration =
+  | boolean
+  | KeyBinding
+  | readonly KeyBinding[]
+  | {
+      bindings: true | KeyBinding | readonly KeyBinding[];
+      handling?: 'quilt' | 'external';
+    };
+export interface RegisteredShortcut {
+  readonly action: WorkspaceAction;
+  readonly bindings: readonly Readonly<KeyBinding>[];
+  readonly handling: 'quilt' | 'external';
+}
 export interface KeyBinding {
   key: string;
   ctrl?: boolean;
@@ -99,6 +148,10 @@ export interface CloseRequest {
   signal: AbortSignal;
 }
 export interface MountedLayout<State = unknown> {
+  readonly store: WorkspaceStore;
+  canExecuteAction(action: WorkspaceAction, context?: ActionContext): boolean;
+  executeAction(action: WorkspaceAction, context?: ActionContext): Promise<boolean>;
+  getShortcuts(): readonly RegisteredShortcut[];
   updateOptions(options: LayoutOptionUpdates<State>): void;
   exportWorkspace(): WorkspacePreset;
   loadWorkspace(input: unknown): void;