Layout and Sizing

/**
 * Layout and sizing management for workspace responsiveness
 */
interface LayoutManager {
  /** Invalidate dimensions and recalculate layout for all panels */
  resize(): Promise<void>;
  
  /** Set auto-sizing behavior for responsive layouts */
  setAutoSize(is_auto_size: boolean): void;
}

import { HTMLPerspectiveWorkspaceElement } from "@finos/perspective-workspace";

const workspace = document.createElement("perspective-workspace") as HTMLPerspectiveWorkspaceElement;

// Enable auto-sizing for responsive behavior
workspace.setAutoSize(true);

// Manual resize when container dimensions change
window.addEventListener("resize", async () => {
  await workspace.resize();
});

// Resize after programmatic layout changes
await workspace.addViewer({
  table: "data",
  columns: ["name", "value"]
});
await workspace.resize(); // Ensure proper layout calculation

/**
 * Enhanced Menu class for shadow DOM support in workspace
 * Extends Lumino Menu with perspective-specific functionality
 */
class WorkspaceMenu extends Menu {
  /** Open menu at specific coordinates with optional configuration */
  open(x: number, y: number, options?: Menu.IOpenOptions): void;
  
  /** Optional overlay initialization function */
  init_overlay?: () => void;
}

/**
 * Utility function for opening submenus in shadow DOM context
 */
function openSubmenu(
  submenu: Menu, 
  itemNode: HTMLElement, 
  host: HTMLElement
): void;

import { PerspectiveWorkspace } from "@finos/perspective-workspace";

const workspace = new PerspectiveWorkspace();

// Show context menu on right-click
workspace.node.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  const widget = /* determine widget from event target */;
  workspace.showContextMenu(widget, event);
});

// Context menu provides options like:
// - Duplicate viewer
// - Toggle master/detail mode
// - Toggle single document mode
// - Close viewer

/**
 * Enhanced TabBar for perspective widgets with custom rendering
 * Extends Lumino TabBar with perspective-specific functionality
 */
class PerspectiveTabBar extends TabBar {
  /** Access to internal titles array for advanced operations */
  readonly private_titles: readonly Title<Widget>[];
}

/**
 * Custom renderer for tab bars with perspective-specific styling
 * Handles tab appearance, drag handles, and close buttons
 */
class PerspectiveTabBarRenderer extends TabBar.Renderer {
  /** Render tab label with custom styling */
  renderLabel(data: { title: { label?: string } }): VirtualElement;
  
  /** Render inert tab state */
  renderInert(): VirtualElement;
  
  /** Render complete tab with optional click handler */
  renderTab(
    data: TabBar.IRenderData<any>, 
    onclick?: (this: HTMLElement, event: MouseEvent) => any
  ): VirtualElement;
  
  /** Render drag handle for tab reordering */
  renderDragHandle(): VirtualElement;
  
  /** Render close icon for tab closing */
  renderCloseIcon(): VirtualElement;
  
  /** Boolean indicating if tabs are in maximized state */
  maximized: boolean;
}

/**
 * Create CommandRegistry with workspace-specific commands
 * Sets up keyboard shortcuts and menu actions
 */
function createCommands(
  workspace: PerspectiveWorkspace, 
  indicator: HTMLElement
): CommandRegistry;

import { createCommands, PerspectiveWorkspace } from "@finos/perspective-workspace";
import { CommandRegistry } from "@lumino/commands";

const workspace = new PerspectiveWorkspace();
const indicator = document.createElement("div");

// Create command registry with workspace commands
const commands = createCommands(workspace, indicator);

// Commands include:
// - workspace:duplicate - Duplicate current viewer
// - workspace:master - Toggle master/detail mode  
// - workspace:single-document - Toggle single document mode
// - workspace:close - Close current viewer

/**
 * Template binding decorator for custom elements
 * Binds HTML template and CSS styles to custom element class
 */
function bindTemplate(
  template: string, 
  ...styleStrings: string[]
): ClassDecorator;

/**
 * Register Web Components v0 style elements
 * For backward compatibility with older custom element patterns
 */
function registerElement(
  templateString: string, 
  styleString: string, 
  proto: CustomElementProto
): void;

/**
 * Interface for custom element prototypes
 * Extends CustomElementConstructor with additional properties
 */
interface CustomElementProto extends CustomElementConstructor {
  // Additional prototype properties for custom elements
}

import { bindTemplate } from "@finos/perspective-workspace";

// Use decorator to bind template and styles
@bindTemplate(`
  <div class="workspace-container">
    <slot></slot>
  </div>
`, `
  .workspace-container {
    width: 100%;
    height: 100%;
    display: flex;
  }
`)
class CustomWorkspaceElement extends HTMLElement {
  // Custom element implementation
}

/** Tab bar element IDs for consistent identification */
const TabBarItems = {
  Config: "config",
  Label: "label"
} as const;

/** Default title for untitled tabs */
const DEFAULT_TITLE = "untitled";

/** Submenu overlap pixels for proper positioning */
const SUBMENU_OVERLAP = 3;