Icon System

/**
 * Main icon implementation for JupyterLab
 * Provides SVG rendering and React integration
 */
class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer {
  /**
   * Create a new icon
   * @param options - Icon configuration options
   */
  constructor(options: LabIcon.IOptions & { _loading?: boolean });
  
  /**
   * Remove icon from container element
   * @param container - Container to remove icon from
   * @returns The container element
   */
  static remove(container: HTMLElement): HTMLElement;
  
  /**
   * Resolve an icon from various sources
   * @param icon - Icon to resolve (string name, icon object, or LabIcon instance)
   * @returns Resolved LabIcon instance
   */
  static resolve({ icon }: { icon: LabIcon.IResolvable }): LabIcon;
  
  /**
   * Create icon element with properties
   * @param props - Icon properties and resolver props
   * @returns HTML element containing the icon
   */
  static resolveElement(props: Partial<LabIcon.IResolverProps> & LabIcon.IProps): HTMLElement;
  
  /**
   * Create React component for icon
   * @param props - Icon properties and resolver props
   * @returns JSX element for React rendering
   */
  static resolveReact(props: Partial<LabIcon.IResolverProps> & LabIcon.IReactProps): JSX.Element;
  
  /**
   * Create SVG element from icon data
   * @param icon - Icon name and SVG string
   * @returns SVG HTML element or null
   */
  static resolveSvg({ name, svgstr }: LabIcon.IIcon): HTMLElement | null;
  
  /**
   * Toggle debug mode for icon rendering
   * @param debug - Enable or disable debug mode
   */
  static toggleDebug(debug?: boolean): void;
  
  /** Icon name identifier */
  readonly name: string;
  
  /** React component for this icon */
  readonly react: LabIcon.IReact;
  
  /** SVG string content */
  get svgstr(): string;
  set svgstr(svgstr: string);
  
  /**
   * Create new icon with bound properties
   * @param props - Properties to bind to the icon
   * @returns New LabIcon with bound properties
   */
  bindprops(props?: LabIcon.IProps): LabIcon;
  
  /**
   * Create HTML element for this icon
   * @param props - Icon rendering properties
   * @returns HTML element containing the icon
   */
  element(props?: LabIcon.IProps): HTMLElement;
  
  /**
   * Render icon into container element
   * @param container - Container to render into
   * @param options - Rendering options
   */
  render(container: HTMLElement, options?: LabIcon.IRendererOptions): void;
  
  /** Optional unrender method */
  unrender?(container: HTMLElement, options?: LabIcon.IRendererOptions): void;
}

namespace LabIcon {
  interface IIcon {
    /** Unique icon name */
    name: string;
    /** SVG content string */
    svgstr: string;
  }
  
  interface IProps extends LabIconStyle.IProps {
    /** Additional CSS class names */
    className?: string;
    /** Container element for the icon */
    container?: HTMLElement;
    /** Accessible label for the icon */
    label?: string;
    /** HTML tag to use ('div' or 'span') */
    tag?: 'div' | 'span' | null;
    /** Title attribute for the icon */
    title?: string;
    /** Slot attribute for web components */
    slot?: string | null;
  }
  
  /** Types that can be resolved to an icon */
  type IResolvable = string | IIcon | LabIcon;
  type IMaybeResolvable = IResolvable | VirtualElement.IRenderer | undefined;
  
  /** React component type for icons */
  type IReact = React.ForwardRefExoticComponent<IReactProps>;
  type IReactProps = IProps & React.RefAttributes<SVGElement>;
}

import { LabIcon, addIcon, saveIcon } from '@jupyterlab/ui-components';

// Create custom icon
const myCustomIcon = new LabIcon({
  name: 'my-app:custom-icon',
  svgstr: `<svg viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" fill="currentColor"/>
  </svg>`
});

// Render icon to DOM element
const container = document.createElement('div');
addIcon.render(container, { 
  className: 'my-icon-class',
  title: 'Add new item'
});

// Create icon element directly
const iconElement = saveIcon.element({
  className: 'save-icon',
  label: 'Save file'
});
document.body.appendChild(iconElement);

// Use in React component
function MyToolbar() {
  return (
    <div>
      <addIcon.react className="toolbar-icon" title="Add" />
      <saveIcon.react className="toolbar-icon" title="Save" />
      <myCustomIcon.react />
    </div>
  );
}

// Resolve icon from string or object
const resolvedIcon = LabIcon.resolve({ 
  icon: 'ui-components:add' 
});

// Create bound icon with default props
const styledAddIcon = addIcon.bindprops({
  className: 'default-add-icon',
  tag: 'span'
});

// Toolbar and action icons
const addIcon: LabIcon;
const addAboveIcon: LabIcon;
const addBelowIcon: LabIcon;
const bugIcon: LabIcon;
const bugDotIcon: LabIcon;
const checkIcon: LabIcon;
const clearIcon: LabIcon;
const closeIcon: LabIcon;
const closeAllIcon: LabIcon;
const codeIcon: LabIcon;
const codeCheckIcon: LabIcon;
const collapseAllIcon: LabIcon;
const collapseIcon: LabIcon;
const copyIcon: LabIcon;
const cutIcon: LabIcon;
const deleteIcon: LabIcon;
const downloadIcon: LabIcon;
const duplicateIcon: LabIcon;
const editIcon: LabIcon;
const ellipsesIcon: LabIcon;
const expandAllIcon: LabIcon;
const expandIcon: LabIcon;
const fastForwardIcon: LabIcon;
const fileUploadIcon: LabIcon;
const filterListIcon: LabIcon;
const launchIcon: LabIcon;
const linkIcon: LabIcon;
const moveDownIcon: LabIcon;
const moveUpIcon: LabIcon;
const newFolderIcon: LabIcon;
const numberingIcon: LabIcon;
const offlineBoltIcon: LabIcon;
const pasteIcon: LabIcon;
const redoIcon: LabIcon;
const refreshIcon: LabIcon;
const runIcon: LabIcon;
const saveIcon: LabIcon;
const searchIcon: LabIcon;
const stopIcon: LabIcon;
const tableRowsIcon: LabIcon;
const tagIcon: LabIcon;
const treeViewIcon: LabIcon;
const undoIcon: LabIcon;

// Navigation and caret icons
const caretDownIcon: LabIcon;
const caretDownEmptyIcon: LabIcon;
const caretDownEmptyThinIcon: LabIcon;
const caretLeftIcon: LabIcon;
const caretRightIcon: LabIcon;
const caretUpIcon: LabIcon;
const caretUpEmptyThinIcon: LabIcon;

// Dock and layout icons
const dockBottomIcon: LabIcon;
const dockLeftIcon: LabIcon;
const dockRightIcon: LabIcon;
const dockTopIcon: LabIcon;

// File type icons
const consoleIcon: LabIcon;
const fileIcon: LabIcon;
const folderIcon: LabIcon;
const folderFavoriteIcon: LabIcon;
const homeIcon: LabIcon;
const html5Icon: LabIcon;
const imageIcon: LabIcon;
const inspectorIcon: LabIcon;
const jsonIcon: LabIcon;
const juliaIcon: LabIcon;
const keyboardIcon: LabIcon;
const launcherIcon: LabIcon;
const markdownIcon: LabIcon;
const mermaidIcon: LabIcon;
const notebookIcon: LabIcon;
const pdfIcon: LabIcon;
const pythonIcon: LabIcon;
const rKernelIcon: LabIcon;
const reactIcon: LabIcon;
const settingsIcon: LabIcon;
const spreadsheetIcon: LabIcon;
const textEditorIcon: LabIcon;
const vegaIcon: LabIcon;
const yamlIcon: LabIcon;

// Sidebar icons
const buildIcon: LabIcon;
const extensionIcon: LabIcon;
const paletteIcon: LabIcon;
const runningIcon: LabIcon;
const shareIcon: LabIcon;
const tabIcon: LabIcon;
const tocIcon: LabIcon;
const userIcon: LabIcon;
const usersIcon: LabIcon;

// Status and indicator icons
const bellIcon: LabIcon;
const kernelIcon: LabIcon;
const lineFormIcon: LabIcon;
const listIcon: LabIcon;
const notTrustedIcon: LabIcon;
const terminalIcon: LabIcon;
const trustedIcon: LabIcon;

// Search and filter icons
const caseSensitiveIcon: LabIcon;
const filterIcon: LabIcon;
const filterDotIcon: LabIcon;
const regexIcon: LabIcon;
const wordIcon: LabIcon;

// Debugger icons
const exceptionsIcon: LabIcon;
const openKernelSourceIcon: LabIcon;
const pauseIcon: LabIcon;
const stepIntoIcon: LabIcon;
const stepOutIcon: LabIcon;
const stepOverIcon: LabIcon;
const variableIcon: LabIcon;
const viewBreakpointIcon: LabIcon;

// General purpose icons
const circleIcon: LabIcon;
const circleEmptyIcon: LabIcon;
const cleaningIcon: LabIcon;
const copyrightIcon: LabIcon;
const dotsIcon: LabIcon;
const errorIcon: LabIcon;
const historyIcon: LabIcon;
const infoIcon: LabIcon;
const jupyterIcon: LabIcon;
const jupyterFaviconIcon: LabIcon;
const jupyterlabWordmarkIcon: LabIcon;
const lockIcon: LabIcon;

// Special icons
const badIcon: LabIcon;    // Error fallback icon
const blankIcon: LabIcon;  // Empty/blank icon

import { 
  addIcon, 
  saveIcon, 
  runIcon, 
  stopIcon,
  folderIcon,
  notebookIcon,
  pythonIcon
} from '@jupyterlab/ui-components';

// Create toolbar with icons
function createToolbar() {
  const toolbar = document.createElement('div');
  toolbar.className = 'toolbar';
  
  const buttons = [
    { icon: addIcon, title: 'Add new' },
    { icon: saveIcon, title: 'Save' },
    { icon: runIcon, title: 'Run' },
    { icon: stopIcon, title: 'Stop' }
  ];
  
  buttons.forEach(({ icon, title }) => {
    const button = document.createElement('button');
    button.title = title;
    icon.render(button);
    toolbar.appendChild(button);
  });
  
  return toolbar;
}

// File type indicator
function getFileIcon(filename: string): LabIcon {
  const ext = filename.split('.').pop()?.toLowerCase();
  
  switch (ext) {
    case 'ipynb': return notebookIcon;
    case 'py': return pythonIcon;
    case 'md': return markdownIcon;
    case 'json': return jsonIcon;
    default: return fileIcon;
  }
}

// React component with conditional icons
function FileListItem({ file }: { file: { name: string, isDir: boolean } }) {
  const icon = file.isDir ? folderIcon : getFileIcon(file.name);
  
  return (
    <div className="file-item">
      <icon.react className="file-icon" />
      <span>{file.name}</span>
    </div>
  );
}

/**
 * Icon styling system with CSS-in-JS support
 */
namespace LabIconStyle {
  interface IProps extends NestedCSSProperties, ISheetOptions {
    /** Additional stylesheets to apply */
    stylesheet?: ISheetResolvable | ISheetResolvable[];
  }
  
  /** Icon positioning options */
  type IPosition = 
    | 'center' 
    | 'top' 
    | 'right' 
    | 'bottom' 
    | 'left' 
    | 'top right' 
    | 'bottom right' 
    | 'bottom left' 
    | 'top left';
  
  /** Icon size presets */
  type ISize = 'small' | 'normal' | 'large' | 'xlarge';
  
  /** Built-in stylesheet themes */
  type IBuiltin = 
    | 'breadCrumb'
    | 'commandPaletteHeader'
    | 'commandPaletteItem'
    | 'launcherCard'
    | 'launcherSection'
    | 'listing'
    | 'listingHeaderItem'
    | 'mainAreaTab'
    | 'menuItem'
    | 'runningItem'
    | 'select'
    | 'settingsEditor'
    | 'sideBar'
    | 'splash'
    | 'statusBar'
    | 'toolbarButton';
  
  /**
   * Generate CSS class for styled icon
   * @param props - Style properties
   * @returns Generated CSS class name
   */
  function styleClass(props?: IProps): string;
}

import { LabIconStyle, saveIcon } from '@jupyterlab/ui-components';

// Create styled icon classes
const toolbarIconClass = LabIconStyle.styleClass({
  stylesheet: 'toolbarButton',
  elementSize: '16px',
  color: 'var(--jp-ui-font-color1)'
});

const menuIconClass = LabIconStyle.styleClass({
  stylesheet: 'menuItem',
  elementSize: '14px',
  margin: '0 4px 0 0'
});

// Use styled icons in React
function StyledToolbar() {
  return (
    <div className="toolbar">
      <saveIcon.react className={toolbarIconClass} title="Save" />
      <button className="menu-button">
        <saveIcon.react className={menuIconClass} />
        Save File
      </button>
    </div>
  );
}

// Create custom icon styles
const customIconStyle = LabIconStyle.styleClass({
  color: '#ff6b35',
  elementSize: '20px',
  cursor: 'pointer',
  ':hover': {
    color: '#ff8c42'
  }
});

// Apply to DOM elements
const iconElement = saveIcon.element({
  className: customIconStyle,
  title: 'Custom styled save'
});

/**
 * Enhanced context menu with inline SVG icon support
 * Extends Lumino's ContextMenu with icon rendering capabilities
 */
class ContextMenuSvg extends ContextMenu implements IDisposable {
  constructor(options: ContextMenu.IOptions);
  
  /** Menu instance with SVG support */
  readonly menu: MenuSvg;
  
  /** Whether the menu is disposed */
  get isDisposed(): boolean;
  
  /** Signal emitted when menu opens */
  get opened(): ISignal<ContextMenu, void>;
  
  /** Dispose of resources */
  dispose(): void;
}

/**
 * Enhanced menu with inline SVG icon rendering
 * Extends Lumino's Menu with LabIcon integration
 */
class MenuSvg extends Menu implements IDisposable {
  constructor(options: Menu.IOptions);
  
  /** Whether the menu is disposed */
  get isDisposed(): boolean;
  
  /** Dispose of resources */
  dispose(): void;
}

/**
 * Enhanced tab bar with inline SVG icon support
 * Provides close icons and add button with SVG rendering
 */
class TabBarSvg<T> extends TabBar<T> {
  constructor(options?: TabBar.IOptions<T>);
  
  /** Global translator for tab bar */
  static translator: ITranslator | null;
}

namespace TabBarSvg {
  /**
   * Custom renderer for tab bar with SVG icons
   */
  class Renderer extends TabBar.Renderer {
    /** Render close icon as SVG element */
    renderCloseIcon(data: TabBar.IRenderData<any>): VirtualElement;
    
    /** Render tab icon with SVG support */
    renderIcon(data: TabBar.IRenderData<any>): VirtualElement;
  }
  
  /** Default SVG-enabled renderer instance */
  const defaultRenderer: Renderer;
}

/**
 * Command palette renderer with SVG icon support
 */
namespace CommandPaletteSvg {
  /**
   * Enhanced renderer for command palette with inline SVG icons
   */
  class Renderer extends CommandPalette.Renderer {
    /** Render header with SVG icons */
    renderHeader(data: CommandPalette.IHeaderRenderData): VirtualElement;
    
    /** Render item icon with SVG support */
    renderItemIcon(data: CommandPalette.IItemRenderData): VirtualElement;
    
    /** Create icon class names for items */
    createIconClass(data: CommandPalette.IItemRenderData): string;
  }
}

import { 
  ContextMenuSvg, 
  MenuSvg, 
  TabBarSvg, 
  CommandPaletteSvg,
  addIcon,
  saveIcon,
  runIcon 
} from '@jupyterlab/ui-components';
import { CommandRegistry } from '@lumino/commands';

// Create context menu with SVG icons
function createContextMenuWithIcons(commands: CommandRegistry) {
  const contextMenu = new ContextMenuSvg({ commands });
  
  // Add items with icons automatically rendered
  contextMenu.addItem({ command: 'file:save' });
  contextMenu.addItem({ command: 'edit:copy' });
  contextMenu.addItem({ command: 'edit:paste' });
  
  return contextMenu;
}

// Create menu with SVG icon support
function createMenuWithIcons(commands: CommandRegistry) {
  const menu = new MenuSvg({ commands });
  menu.title.label = 'File';
  
  // Icons are automatically rendered for command items
  menu.addItem({ command: 'file:new' });
  menu.addItem({ command: 'file:save' });
  menu.addItem({ type: 'separator' });
  menu.addItem({ command: 'file:close' });
  
  return menu;
}

// Create tab bar with SVG icons and add button
function createTabBarWithIcons() {
  const tabBar = new TabBarSvg<Widget>({
    insertBehavior: 'select-tab-if-needed',
    removeBehavior: 'select-previous-tab',
    allowDeselect: false
  });
  
  // Add button automatically has SVG icon
  tabBar.addButtonEnabled = true;
  
  return tabBar;
}

// Use custom tab bar renderer
const customTabBar = new TabBarSvg({
  renderer: new TabBarSvg.Renderer()
});

// Create command palette with SVG icons
function createCommandPaletteWithIcons(commands: CommandRegistry) {
  const palette = new CommandPalette({
    commands,
    renderer: new CommandPaletteSvg.Renderer()
  });
  
  // Commands with icons will show SVG icons
  palette.addItem({ command: 'file:save', category: 'File' });
  palette.addItem({ command: 'edit:undo', category: 'Edit' });
  palette.addItem({ command: 'kernel:restart', category: 'Kernel' });
  
  return palette;
}

// Register commands with icons
function setupCommandsWithIcons(commands: CommandRegistry) {
  commands.addCommand('file:save', {
    label: 'Save File',
    icon: saveIcon.bindprops({ svgstr: saveIcon.svgstr }),
    execute: () => console.log('File saved')
  });
  
  commands.addCommand('notebook:run-cell', {
    label: 'Run Cell',
    icon: runIcon.bindprops({ svgstr: runIcon.svgstr }),
    execute: () => console.log('Cell executed')
  });
  
  commands.addCommand('file:new', {
    label: 'New File',
    icon: addIcon.bindprops({ svgstr: addIcon.svgstr }),
    execute: () => console.log('New file created')
  });
}

// Complete application setup with SVG-enabled widgets
function setupApplication() {
  const commands = new CommandRegistry();
  setupCommandsWithIcons(commands);
  
  // Create main menu with SVG support
  const menuBar = new MenuBar();
  const fileMenu = createMenuWithIcons(commands);
  menuBar.addMenu(fileMenu);
  
  // Create tab bar with SVG icons
  const tabBar = createTabBarWithIcons();
  
  // Create context menu
  const contextMenu = createContextMenuWithIcons(commands);
  
  // Create command palette
  const palette = createCommandPaletteWithIcons(commands);
  
  return { menuBar, tabBar, contextMenu, palette };
}

// Handle tab bar events with icon widgets
const svgTabBar = new TabBarSvg<Widget>();

svgTabBar.tabCloseRequested.connect((sender, args) => {
  console.log('Tab close requested:', args.title.label);
  args.title.owner.close();
});

svgTabBar.addRequested.connect((sender, args) => {
  console.log('Add button clicked');
  // Create new tab/widget
});

// Dispose of widget resources properly
function cleanupWidgets() {
  contextMenu.dispose();
  fileMenu.dispose();
  // Other SVG widgets implement IDisposable
}