@perspective-dev/workspace 4.0.0

package/dist/esm/utils/custom_elements.d.ts

@@ -0,0 +1,14 @@
+export interface CustomElementProto extends CustomElementConstructor {
+    connectedCallback(): void;
+}
+/**
+ * A simple tool for creating Web Components v0.
+ *
+ * Params
+ * ------
+ * template : An HTML string representing a template.  Should have an 'id'
+ *     attribute which will become the new Web Component's tag name.
+ * proto : The new Web Component's prototype object, as per spec.
+ */
+export declare function registerElement(templateString: string, styleString: string, proto: CustomElementProto): void;
+export declare function bindTemplate(template: string, ...styleStrings: string[]): (cls: CustomElementProto) => void;

package/dist/esm/utils/observable_map.d.ts

@@ -0,0 +1,9 @@
+export declare class ObservableMap<K, V> extends Map<K, V> {
+    _set_listener?: (name: K, val: V) => void;
+    _delete_listener?: (name: K) => void;
+    set(name: K, item: V): this;
+    get(name: K): V;
+    delete(name: K): boolean;
+    addSetListener(listener: (name: K, val: V) => void): void;
+    addDeleteListener(listener: (name: K) => void): void;
+}

package/dist/esm/workspace/commands.d.ts

@@ -0,0 +1,3 @@
+import { CommandRegistry } from "@lumino/commands";
+import type { PerspectiveWorkspace } from "./workspace";
+export declare const createCommands: (workspace: PerspectiveWorkspace, indicator: HTMLElement) => CommandRegistry;

package/dist/esm/workspace/dockpanel.d.ts

@@ -0,0 +1,13 @@
+import { DockLayout, DockPanel, TabBar, Widget } from "@lumino/widgets";
+import { PerspectiveWorkspace } from "./workspace";
+import { PerspectiveViewerWidget } from "./widget";
+export declare class PerspectiveDockPanel extends DockPanel {
+    constructor(workspace: PerspectiveWorkspace);
+    _onTabDetachRequested(sender: TabBar<Widget>, args: TabBar.ITabDetachRequestedArgs<Widget>): void;
+    static getWidgets(layout: DockPanel.ILayoutConfig): PerspectiveViewerWidget[];
+    static getAreaWidgets(layout: DockLayout.AreaConfig): PerspectiveViewerWidget[];
+    widgets(): IterableIterator<PerspectiveViewerWidget>;
+    static mapWidgets(widgetFunc: (widget: any) => any, layout: any): DockPanel.ILayoutConfig;
+    static mapAreaWidgets(widgetFunc: (widget: any) => any, layout: DockLayout.AreaConfig): DockLayout.AreaConfig;
+    onAfterAttach(): void;
+}

package/dist/esm/workspace/index.d.ts

@@ -0,0 +1 @@
+export * from "./workspace";

package/dist/esm/workspace/menu.d.ts

@@ -0,0 +1,11 @@
+import { Menu } from "@lumino/widgets";
+export declare class WorkspaceMenu extends Menu {
+    private _host;
+    private _workspace;
+    init_overlay?: () => void;
+    constructor(host: ShadowRoot, workspace: HTMLElement, options: Menu.IOptions);
+    open(x: number, y: number, options?: Menu.IOpenOptions): void;
+    private _overrideOpenChildMenu;
+}
+export declare function openSubmenu(submenu: Menu, itemNode: HTMLElement, host: HTMLElement): void;
+export declare const SUBMENU_OVERLAP = 3;

package/dist/esm/workspace/tabbar.d.ts

@@ -0,0 +1,25 @@
+import { TabBar } from "@lumino/widgets";
+import { Menu } from "@lumino/widgets";
+import { PerspectiveWorkspace } from "./workspace";
+import { Message } from "@lumino/messaging";
+import { Title } from "@lumino/widgets";
+export declare class PerspectiveTabBar extends TabBar<any> {
+    _workspace: PerspectiveWorkspace;
+    __content_node__?: HTMLElement;
+    _menu?: Menu;
+    __titles: string[];
+    constructor(workspace: PerspectiveWorkspace, options?: {});
+    get private_titles(): Title<any>[];
+    onUpdateRequest(msg: Message): void;
+    onClick(otherTitles: Title<any>[], index: number, event: MouseEvent): void;
+    _check_shade(): void;
+    handleEvent(event: MouseEvent): void;
+    /**
+     * Shadow dom targets events at the host, not the clicked element, which
+     * Lumino dislikes.  This makes the event look like it is not crossing
+     * the ShadowDom boundary.
+     *
+     */
+    retargetEvent(event: MouseEvent): MouseEvent;
+    _addEventListeners(): void;
+}

package/dist/esm/workspace/tabbarrenderer.d.ts

@@ -0,0 +1,19 @@
+import { TabBar } from "@lumino/widgets";
+export declare const TabBarItems: {
+    Config: string;
+    Label: string;
+};
+export declare const DEFAULT_TITLE = "untitled";
+export declare class PerspectiveTabBarRenderer extends TabBar.Renderer {
+    maximized: boolean;
+    constructor(maximized: boolean);
+    renderLabel(data: {
+        title: {
+            label?: string;
+        };
+    }): import("@lumino/virtualdom").VirtualElement;
+    renderInert(): import("@lumino/virtualdom").VirtualElement;
+    renderTab(data: TabBar.IRenderData<any>, onclick?: (this: HTMLElement, event: MouseEvent) => any): import("@lumino/virtualdom").VirtualElement;
+    renderDragHandle(): import("@lumino/virtualdom").VirtualElement;
+    renderCloseIcon(): import("@lumino/virtualdom").VirtualElement;
+}

package/dist/esm/workspace/widget.d.ts

@@ -0,0 +1,27 @@
+import { Widget } from "@lumino/widgets";
+import { Message } from "@lumino/messaging";
+import type * as psp_viewer from "@perspective-dev/viewer";
+import type * as psp from "@perspective-dev/client";
+interface IPerspectiveViewerWidgetOptions {
+    node: HTMLElement;
+    viewer: psp_viewer.HTMLPerspectiveViewerElement;
+}
+export declare class PerspectiveViewerWidget extends Widget {
+    viewer: psp_viewer.HTMLPerspectiveViewerElement;
+    _title: string;
+    _is_table_loaded: boolean;
+    _is_pivoted: boolean;
+    _restore_config?: () => Promise<void>;
+    task?: Promise<void>;
+    constructor({ viewer, node }: IPerspectiveViewerWidgetOptions);
+    get name(): string;
+    toggleConfig(): Promise<void>;
+    load(table: psp.Table | Promise<psp.Table>): Promise<void>;
+    restore(config: psp_viewer.ViewerConfigUpdate & {
+        table: string;
+    }): Promise<any> | undefined;
+    save(): Promise<any>;
+    removeClass(name: string): void;
+    onCloseRequest(msg: Message): Promise<void>;
+}
+export {};

package/dist/esm/workspace/workspace.d.ts

@@ -0,0 +1,123 @@
+import { SplitPanel } from "@lumino/widgets";
+import type { HTMLPerspectiveViewerElement, ViewerConfigUpdate } from "@perspective-dev/viewer";
+import type * as psp from "@perspective-dev/client";
+import { PerspectiveDockPanel } from "./dockpanel";
+import { WorkspaceMenu } from "./menu";
+import { PerspectiveViewerWidget } from "./widget";
+import { ObservableMap } from "../utils/observable_map";
+export interface PerspectiveLayout<T> {
+    children?: PerspectiveLayout<T>[];
+    widgets?: T[];
+    sizes: number[];
+}
+export interface ViewerConfigUpdateExt extends ViewerConfigUpdate {
+    table: string;
+}
+export interface PerspectiveWorkspaceConfig<T> {
+    sizes: number[];
+    master: PerspectiveLayout<T>;
+    detail: PerspectiveLayout<T>;
+    viewers: Record<string, ViewerConfigUpdateExt>;
+}
+export declare class PerspectiveWorkspace extends SplitPanel {
+    private dockpanel;
+    private detailPanel;
+    private masterPanel;
+    element: HTMLElement;
+    menu_elem: HTMLElement;
+    private _tables;
+    private listeners;
+    private indicator;
+    private commands;
+    private _menu?;
+    private _minimizedLayoutSlots?;
+    private _minimizedLayout?;
+    private _maximizedWidget?;
+    private _last_updated_state?;
+    constructor(element: HTMLElement);
+    get_context_menu(): WorkspaceMenu | undefined;
+    get_dock_panel(): PerspectiveDockPanel;
+    init_indicator(): HTMLElement;
+    apply_indicator_theme(): void;
+    /***************************************************************************
+     *
+     * `<perspective-workspace>` Public API
+     *
+     */
+    addTable(name: string, table: Promise<psp.Table>): void;
+    getTable(name: string): psp.Table | Promise<psp.Table>;
+    removeTable(name: string): boolean;
+    replaceTable(name: string, table: Promise<psp.Table>): void;
+    get tables(): ObservableMap<string, psp.Table | Promise<psp.Table>>;
+    save(): Promise<{
+        viewers: Record<string, ViewerConfigUpdate>;
+        sizes: number[];
+        detail: import("@lumino/widgets").DockLayout.ILayoutConfig | undefined;
+        master: {
+            widgets: string[];
+            sizes: number[];
+        } | undefined;
+    }>;
+    restore(value: PerspectiveWorkspaceConfig<string>): Promise<void>;
+    _capture_widgets(): Generator<PerspectiveViewerWidget[], void, unknown>;
+    _capture_viewers(): Generator<HTMLPerspectiveViewerElement[], void, unknown>;
+    _restore_callback(viewers: Record<string, ViewerConfigUpdateExt>, starting_viewers: HTMLPerspectiveViewerElement[], starting_widgets: PerspectiveViewerWidget[], master: boolean, widgetName: string): PerspectiveViewerWidget;
+    _validate(table: any): any;
+    _set_listener(name: string, table: psp.Table | Promise<psp.Table>): void;
+    _delete_listener(name: string): void;
+    update_widget_for_viewer(viewer: HTMLPerspectiveViewerElement): void;
+    remove_unslotted_widgets(viewers: HTMLPerspectiveViewerElement[]): void;
+    update_details_panel(viewers: HTMLPerspectiveViewerElement[]): void;
+    /***************************************************************************
+     *
+     * Workspace-level contextmenu actions
+     *
+     */
+    duplicate(widget: PerspectiveViewerWidget): Promise<void>;
+    toggleMasterDetail(widget: PerspectiveViewerWidget): void;
+    _maximize(widget: PerspectiveViewerWidget): void;
+    _unmaximize(): void;
+    toggleSingleDocument(widget: PerspectiveViewerWidget): void;
+    _filterViewer(viewer: HTMLPerspectiveViewerElement, filters: [string, string, string][], candidates: Set<string>): Promise<void>;
+    onPerspectiveSelect(event: CustomEvent): Promise<void>;
+    makeMaster(widget: PerspectiveViewerWidget): Promise<void>;
+    makeDetail(widget: PerspectiveViewerWidget): void;
+    /***************************************************************************
+     *
+     * Context Menu
+     *
+     */
+    createContextMenu(widget: PerspectiveViewerWidget | null): WorkspaceMenu;
+    showContextMenu(widget: PerspectiveViewerWidget | null, event: MouseEvent): void;
+    /***************************************************************************
+     *
+     * Context Menu
+     *
+     */
+    clearLayout(): void;
+    setupMasterPanel(sizes: number[]): void;
+    addViewer(config: ViewerConfigUpdateExt, is_global_filter?: boolean): void;
+    /*********************************************************************
+     * Widget helper methods
+     */
+    _createWidgetAndNode({ config, slot: slotname, }: {
+        config: ViewerConfigUpdateExt;
+        slot?: string;
+    }): PerspectiveViewerWidget;
+    _gen_id(): string;
+    _createNode(slotname?: string): HTMLElement;
+    _createWidget({ config, elem, viewer, }: {
+        config: ViewerConfigUpdateExt;
+        elem?: Element;
+        viewer: HTMLPerspectiveViewerElement;
+    }): PerspectiveViewerWidget;
+    _addWidgetEventListeners(widget: PerspectiveViewerWidget): void;
+    getWidgetByName(name: string): PerspectiveViewerWidget | null;
+    getAllWidgets(): PerspectiveViewerWidget[];
+    /***************************************************************************
+     *
+     * `workspace-layout-update` event
+     *
+     */
+    workspaceUpdated(): Promise<void>;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@perspective-dev/workspace",
+  "version": "4.0.0",
+  "description": "Perspective Workspace",
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "index.d.ts"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/esm/perspective-workspace.js",
+    "./esm/": "./dist/esm/",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./dist/themes/": "./src/themes/",
+    "./package.json": "./package.json"
+  },
+  "unpkg": "./dist/cdn/perspective-workspace.js",
+  "jsdelivr": "./dist/cdn/perspective-workspace.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/perspective-dev/perspective"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@perspective-dev/client": "",
+    "@perspective-dev/viewer": "",
+    "@lumino/algorithm": ">=2 <3",
+    "@lumino/commands": ">=2 <3",
+    "@lumino/domutils": ">=2 <3",
+    "@lumino/messaging": ">=2 <3",
+    "@lumino/virtualdom": ">=2 <3",
+    "@lumino/widgets": ">=2 <3",
+    "@lumino/coreutils": ">=2 <3",
+    "@lumino/signaling": ">=2 <3",
+    "lodash": "^4.17.20"
+  },
+  "devDependencies": {
+    "@prospective.co/procss": "0.1.17",
+    "@perspective-dev/esbuild-plugin": "",
+    "@perspective-dev/test": "",
+    "@types/lodash": "^4.17.20",
+    "typescript": ">=5 <6",
+    "zx": ">=8 <9"
+  },
+  "scripts": {
+    "build": "node ./build.mjs",
+    "clean": "node ./clean.mjs"
+  }
+}

package/src/html/workspace.html

@@ -0,0 +1,11 @@
+<!--
+
+Copyright (c) 2017, the Perspective Authors.
+
+This file is part of the Perspective library, distributed under the terms of
+the Apache License 2.0.  The full license can be found in the LICENSE file.
+
+-->
+<template id="perspective-workspace">
+    <div id="container" class="workspace"></div>
+</template>

package/src/less/dockpanel.less

@@ -0,0 +1,95 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+.lm-DockPanel {
+    overflow: var(--dock-panel--overflow, hidden);
+    position: absolute;
+    background-color: var(--detail--background-color, transparent);
+    padding: 3px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    &[data-mode="single-document"] {
+        padding: 0px;
+    }
+}
+
+.lm-Widget,
+.lm-Widget {
+    cursor: inherit;
+}
+
+.lm-DockPanel.ew,
+.lm-DockPanel.ew .lm-Widget,
+.lm-SplitPanel.ew,
+.lm-SplitPanel.ew .lm-Widget {
+    cursor: ew-resize !important;
+}
+
+.lm-DockPanel.ns,
+.lm-DockPanel.ns .lm-Widget,
+.lm-SplitPanel.ns,
+.lm-SplitPanel.ns .lm-Widget {
+    cursor: ns-resize !important;
+}
+
+.workspace-master-widget {
+    min-width: 100px !important;
+}
+
+.lm-DockPanel.resizing ::slotted(perspective-viewer),
+.lm-SplitPanel.resizing ::slotted(perspective-viewer) {
+    pointer-events: none;
+}
+
+.widget-blur ::slotted(perspective-viewer) {
+    opacity: 0.5;
+}
+
+.lm-DockPanel-handle.resizing {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.perspective-scroll-panel {
+    overflow: auto !important;
+}
+
+.lm-Panel {
+    min-height: 100%;
+}
+
+.lm-DockPanel-handle {
+    background-color: none;
+}
+
+.lm-SplitPanel-handle {
+    background-color: var(--workspace-split-panel-handle--background-color);
+}
+
+.lm-SplitPanel-handle,
+.lm-DockPanel-handle {
+    transition: background-color 0.3s ease-out;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+}
+
+.lm-DockPanel-overlay {
+    background: rgba(75, 75, 75, 0.2);
+    border: 1px dashed #666;
+    border-radius: 6px;
+    transition-property: top, left, right, bottom;
+    transition-duration: 50ms;
+    transition-timing-function: linear;
+    margin: 0px;
+}

package/src/less/injected.less

@@ -0,0 +1,14 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "./viewer.less";
+@import "./menu.less";

package/src/less/menu.less

@@ -0,0 +1,128 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "@lumino/widgets/style/menu.css";
+
+.lm-Menu {
+    font-size: 12px;
+    padding: 8px;
+    background-color: var(--plugin--background);
+    color: var(--icon--color);
+    border: 1px solid var(--inactive--color);
+    border-radius: 3px;
+    max-width: 350px;
+    top: 0;
+    left: 0;
+}
+
+.lm-Menu.perspective-workspace-menu {
+    .lm-Menu-item {
+        padding-left: 37px !important;
+        min-width: var(--min-width);
+    }
+}
+
+.lm-Menu-item.lm-mod-active {
+    background-color: var(--icon--color);
+    color: var(--plugin--background);
+}
+
+.lm-Menu-item.lm-mod-disabled {
+    opacity: 0.5;
+}
+
+.lm-Menu-itemIcon {
+    width: 24px;
+    height: 12px;
+    margin-right: 4px;
+}
+
+.lm-Menu-itemLabel {
+    flex: 1 1;
+    padding: 4px 2px 4px 2px;
+}
+
+.lm-Menu-itemMnemonic {
+    text-decoration: underline;
+}
+
+.lm-Menu-itemShortcut {
+    padding: 4px 0px;
+}
+
+.lm-Menu-itemSubmenuIcon {
+    width: 24px;
+    height: 18px;
+}
+
+.lm-Menu-item {
+    display: flex;
+    align-items: center;
+    outline: none;
+
+    margin: 0 -8px;
+    padding: 0 8px;
+}
+
+.lm-Menu-item[data-type="separator"] > div {
+    padding: 0;
+    height: 9px;
+}
+
+.lm-Menu-item[data-type="separator"] > div::after {
+    content: "";
+    display: block;
+    position: relative;
+    top: 4px;
+    border-top: 1px solid;
+}
+
+.lm-MenuBar-menu {
+    transform: translateY(-1px);
+}
+
+.lm-MenuBar-item {
+    padding: 10px 32px;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    color: #737373 !important;
+}
+
+.lm-MenuBar-item.lm-mod-active {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active {
+    z-index: 10001;
+    background: rgba(0, 0, 0, 0.2);
+    // border-left: 1px solid #c0c0c0;
+    // border-right: 1px solid #c0c0c0;
+}
+
+.lm-Menu-itemIcon:before {
+    content: attr(content);
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+}
+
+[data-type="submenu"] .lm-Menu-itemSubmenuIcon:before {
+    content: ">";
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+    height: 18px;
+}
+
+.lm-mod-drag-image.lm-TabBar-tab {
+    display: none;
+}