@matdata/yasgui 5.0.1 → 5.2.0

package/src/TabSettingsModal.ts

@@ -1,7 +1,20 @@
-import { addClass, removeClass, drawSvgStringAsElement } from "@matdata/yasgui-utils";
+import { addClass, removeClass } from "@matdata/yasgui-utils";
 import "./TabSettingsModal.scss";
 import Tab from "./Tab";
 
+// Theme toggle icons
+const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
+</svg>`;
+
+const SUN_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
+</svg>`;
+
+const SETTINGS_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-7.43 2.52c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
+</svg>`;
+
 const AcceptOptionsMap: { key: string; value: string }[] = [
   { key: "JSON", value: "application/sparql-results+json" },
   { key: "XML", value: "application/sparql-results+xml" },
@@ -24,6 +37,7 @@ export default class TabSettingsModal {
   private modalOverlay!: HTMLElement;
   private modalContent!: HTMLElement;
   private settingsButton!: HTMLButtonElement;
+  private themeToggleButton!: HTMLButtonElement;
   private prefixButton!: HTMLButtonElement;
   private prefixTextarea!: HTMLTextAreaElement;
   private autoCaptureCheckbox!: HTMLInputElement;
@@ -36,19 +50,26 @@ export default class TabSettingsModal {
   private init(controlBarEl: HTMLElement) {
     // Settings button
     this.settingsButton = document.createElement("button");
+    addClass(this.settingsButton, "tabContextButton");
     this.settingsButton.setAttribute("aria-label", "Settings");
     this.settingsButton.title = "Settings";
-    this.settingsButton.appendChild(
-      drawSvgStringAsElement(
-        `<svg width="100.06" height="100.05" data-name="Layer 1" version="1.1" viewBox="0 0 100.06 100.05" xmlns="http://www.w3.org/2000/svg">
-        <title>Settings</title>
-        <path d="m95.868 58.018-3-3.24a42.5 42.5 0 0 0 0-9.43l3-3.22c1.79-1.91 5-4.44 4-6.85l-4.11-10c-1-2.41-5.08-1.91-7.69-2l-4.43-0.16a43.24 43.24 0 0 0-6.64-6.66l-0.14-4.43c-0.08-2.6 0.43-6.69-2-7.69l-10-4.15c-2.4-1-4.95 2.25-6.85 4l-3.23 3a42.49 42.49 0 0 0-9.44 0l-3.21-3c-1.9-1.78-4.44-5-6.85-4l-10 4.11c-2.41 1-1.9 5.09-2 7.69l-0.16 4.42a43.24 43.24 0 0 0-6.67 6.65l-4.42 0.14c-2.6 0.08-6.69-0.43-7.69 2l-4.15 10c-1 2.4 2.25 4.94 4 6.84l3 3.23a42.49 42.49 0 0 0 0 9.44l-3 3.22c-1.78 1.9-5 4.43-4 6.84l4.11 10c1 2.41 5.09 1.91 7.7 2l4.41 0.15a43.24 43.24 0 0 0 6.66 6.68l0.13 4.41c0.08 2.6-0.43 6.7 2 7.7l10 4.15c2.4 1 4.94-2.25 6.84-4l3.24-3a42.5 42.5 0 0 0 9.42 0l3.22 3c1.91 1.79 4.43 5 6.84 4l10-4.11c2.41-1 1.91-5.08 2-7.7l0.15-4.42a43.24 43.24 0 0 0 6.68-6.65l4.42-0.14c2.6-0.08 6.7 0.43 7.7-2l4.15-10c1.04-2.36-2.22-4.9-3.99-6.82zm-45.74 15.7c-12.66 0-22.91-10.61-22.91-23.7s10.25-23.7 22.91-23.7 22.91 10.61 22.91 23.7-10.25 23.7-22.91 23.7z"/>
-       </svg>`,
-      ),
-    );
-    addClass(this.settingsButton, "tabContextButton");
-    controlBarEl.appendChild(this.settingsButton);
+    this.settingsButton.innerHTML = SETTINGS_ICON;
     this.settingsButton.onclick = () => this.open();
+    controlBarEl.appendChild(this.settingsButton);
+
+    // Theme toggle button (if enabled)
+    if (this.tab.yasgui.config.showThemeToggle) {
+      this.themeToggleButton = document.createElement("button");
+      addClass(this.themeToggleButton, "themeToggle");
+      this.themeToggleButton.setAttribute("aria-label", "Toggle between light and dark theme");
+      this.themeToggleButton.title = "Toggle theme";
+      this.themeToggleButton.innerHTML = this.getThemeToggleIcon();
+      this.themeToggleButton.addEventListener("click", () => {
+        this.tab.yasgui.toggleTheme();
+        this.themeToggleButton.innerHTML = this.getThemeToggleIcon();
+      });
+      controlBarEl.appendChild(this.themeToggleButton);
+    }
 
     // Prefix button
     this.prefixButton = document.createElement("button");
@@ -77,7 +98,7 @@ export default class TabSettingsModal {
     const header = document.createElement("div");
     addClass(header, "modalHeader");
     const title = document.createElement("h2");
-    title.textContent = "Tab Settings";
+    title.textContent = "Settings";
     header.appendChild(title);
 
     const closeBtn = document.createElement("button");
@@ -105,8 +126,14 @@ export default class TabSettingsModal {
     addClass(prefixTab, "modalTabButton");
     prefixTab.onclick = () => this.switchTab("prefix");
 
+    const endpointsTab = document.createElement("button");
+    endpointsTab.textContent = "Endpoint Buttons";
+    addClass(endpointsTab, "modalTabButton");
+    endpointsTab.onclick = () => this.switchTab("endpoints");
+
     tabsContainer.appendChild(requestTab);
     tabsContainer.appendChild(prefixTab);
+    tabsContainer.appendChild(endpointsTab);
     body.appendChild(tabsContainer);
 
     // Tab content containers
@@ -120,8 +147,14 @@ export default class TabSettingsModal {
     prefixContent.id = "prefix-content";
     this.drawPrefixSettings(prefixContent);
 
+    const endpointsContent = document.createElement("div");
+    addClass(endpointsContent, "modalTabContent");
+    endpointsContent.id = "endpoints-content";
+    this.drawEndpointButtonsSettings(endpointsContent);
+
     body.appendChild(requestContent);
     body.appendChild(prefixContent);
+    body.appendChild(endpointsContent);
 
     this.modalContent.appendChild(body);
 
@@ -153,7 +186,11 @@ export default class TabSettingsModal {
     const contents = this.modalContent.querySelectorAll(".modalTabContent");
 
     buttons.forEach((btn, index) => {
-      if ((tabName === "request" && index === 0) || (tabName === "prefix" && index === 1)) {
+      if (
+        (tabName === "request" && index === 0) ||
+        (tabName === "prefix" && index === 1) ||
+        (tabName === "endpoints" && index === 2)
+      ) {
         addClass(btn as HTMLElement, "active");
       } else {
         removeClass(btn as HTMLElement, "active");
@@ -321,6 +358,9 @@ export default class TabSettingsModal {
       this.tab.setRequestConfig(updates);
     }
 
+    // Refresh endpoint buttons to show any changes
+    this.tab.refreshEndpointButtons();
+
     this.close();
   }
 
@@ -416,6 +456,124 @@ export default class TabSettingsModal {
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
   }
 
+  private drawEndpointButtonsSettings(container: HTMLElement) {
+    const section = document.createElement("div");
+    addClass(section, "settingsSection");
+
+    const label = document.createElement("label");
+    label.textContent = "Custom Endpoint Buttons";
+    addClass(label, "settingsLabel");
+
+    const help = document.createElement("div");
+    help.textContent = "Add custom endpoint buttons that will appear next to the endpoint textbox.";
+    addClass(help, "settingsHelp");
+
+    section.appendChild(label);
+    section.appendChild(help);
+
+    // List of existing buttons
+    const buttonsList = document.createElement("div");
+    addClass(buttonsList, "endpointButtonsList");
+    this.renderEndpointButtonsList(buttonsList);
+    section.appendChild(buttonsList);
+
+    // Form to add new button
+    const addForm = document.createElement("div");
+    addClass(addForm, "addEndpointButtonForm");
+
+    const labelInput = document.createElement("input");
+    labelInput.type = "text";
+    labelInput.placeholder = "Button label (e.g., DBpedia)";
+    addClass(labelInput, "endpointButtonLabelInput");
+
+    const endpointInput = document.createElement("input");
+    endpointInput.type = "url";
+    endpointInput.placeholder = "Endpoint URL (e.g., https://dbpedia.org/sparql)";
+    addClass(endpointInput, "endpointButtonEndpointInput");
+
+    const addButton = document.createElement("button");
+    addButton.textContent = "+ Add Button";
+    addClass(addButton, "addEndpointButton");
+    addButton.type = "button";
+    addButton.onclick = () => {
+      const labelValue = labelInput.value.trim();
+      const endpointValue = endpointInput.value.trim();
+
+      if (!labelValue || !endpointValue) {
+        alert("Please enter both a label and an endpoint URL.");
+        return;
+      }
+
+      // Add to persistent config
+      const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
+      currentButtons.push({ label: labelValue, endpoint: endpointValue });
+      this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
+
+      // Clear inputs
+      labelInput.value = "";
+      endpointInput.value = "";
+
+      // Refresh list
+      this.renderEndpointButtonsList(buttonsList);
+    };
+
+    addForm.appendChild(labelInput);
+    addForm.appendChild(endpointInput);
+    addForm.appendChild(addButton);
+    section.appendChild(addForm);
+
+    container.appendChild(section);
+  }
+
+  private renderEndpointButtonsList(container: HTMLElement) {
+    container.innerHTML = "";
+    const customButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
+
+    if (customButtons.length === 0) {
+      const emptyMsg = document.createElement("div");
+      emptyMsg.textContent = "No custom buttons yet. Add one below.";
+      addClass(emptyMsg, "emptyMessage");
+      container.appendChild(emptyMsg);
+      return;
+    }
+
+    customButtons.forEach((btn, index) => {
+      const item = document.createElement("div");
+      addClass(item, "endpointButtonItem");
+
+      const labelSpan = document.createElement("span");
+      labelSpan.textContent = `${btn.label}`;
+      addClass(labelSpan, "buttonLabel");
+
+      const endpointSpan = document.createElement("span");
+      endpointSpan.textContent = btn.endpoint;
+      addClass(endpointSpan, "buttonEndpoint");
+
+      const removeBtn = document.createElement("button");
+      removeBtn.textContent = "×";
+      addClass(removeBtn, "removeButton");
+      removeBtn.type = "button";
+      removeBtn.onclick = () => {
+        const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
+        currentButtons.splice(index, 1);
+        this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
+        this.renderEndpointButtonsList(container);
+      };
+
+      item.appendChild(labelSpan);
+      item.appendChild(endpointSpan);
+      item.appendChild(removeBtn);
+      container.appendChild(item);
+    });
+  }
+
+  private getThemeToggleIcon(): string {
+    const currentTheme = this.tab.yasgui.getTheme();
+    // In dark mode, show moon icon (clicking will switch to light)
+    // In light mode, show sun icon (clicking will switch to dark)
+    return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
+  }
+
   public destroy() {
     if (this.modalOverlay && this.modalOverlay.parentNode) {
       this.modalOverlay.parentNode.removeChild(this.modalOverlay);

package/src/ThemeManager.ts

@@ -0,0 +1,120 @@
+import { Storage as YStorage } from "@matdata/yasgui-utils";
+
+export type Theme = "light" | "dark";
+
+export class ThemeManager {
+  private static STORAGE_KEY = "yasgui_theme";
+  private storage: YStorage;
+  private currentTheme: Theme;
+  private rootElement: HTMLElement;
+
+  constructor(rootElement: HTMLElement) {
+    this.storage = new YStorage("yasgui");
+    this.rootElement = rootElement;
+    this.currentTheme = this.getStoredTheme() || this.getSystemTheme();
+    this.applyTheme(this.currentTheme);
+  }
+
+  /**
+   * Get the currently active theme
+   */
+  public getTheme(): Theme {
+    return this.currentTheme;
+  }
+
+  /**
+   * Set and apply a new theme
+   */
+  public setTheme(theme: Theme): void {
+    this.currentTheme = theme;
+    this.applyTheme(theme);
+    // Store theme preference with 1 year expiration
+    this.storage.set(ThemeManager.STORAGE_KEY, theme, 60 * 60 * 24 * 365, () => {
+      console.warn("Failed to store theme preference due to quota exceeded");
+    });
+  }
+
+  /**
+   * Toggle between light and dark themes
+   */
+  public toggleTheme(): Theme {
+    const newTheme = this.currentTheme === "light" ? "dark" : "light";
+    this.setTheme(newTheme);
+    return newTheme;
+  }
+
+  /**
+   * Apply theme to the DOM
+   */
+  private applyTheme(theme: Theme): void {
+    // Set data-theme attribute on root element
+    this.rootElement.setAttribute("data-theme", theme);
+
+    // Also set on document root for global styles
+    document.documentElement.setAttribute("data-theme", theme);
+
+    // Update Yasqe CodeMirror theme
+    this.updateCodeMirrorTheme(theme);
+  }
+
+  /**
+   * Update CodeMirror theme for all Yasqe editors
+   */
+  private updateCodeMirrorTheme(theme: Theme): void {
+    const cmTheme = theme === "dark" ? "material-palenight" : "default";
+
+    // Find all CodeMirror instances within the root element
+    const cmElements = this.rootElement.querySelectorAll(".CodeMirror");
+    cmElements.forEach((element) => {
+      const cm = (element as any).CodeMirror;
+      if (cm && cm.setOption) {
+        cm.setOption("theme", cmTheme);
+      }
+    });
+  }
+
+  /**
+   * Get theme from localStorage
+   */
+  private getStoredTheme(): Theme | null {
+    const stored = this.storage.get<Theme>(ThemeManager.STORAGE_KEY);
+    if (stored === "light" || stored === "dark") {
+      return stored;
+    }
+    return null;
+  }
+
+  /**
+   * Detect system theme preference
+   */
+  private getSystemTheme(): Theme {
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  }
+
+  /**
+   * Listen for system theme changes
+   */
+  public listenToSystemTheme(): void {
+    if (window.matchMedia) {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      mediaQuery.addEventListener("change", (e) => {
+        // Only update if user hasn't manually set a theme
+        if (!this.storage.get(ThemeManager.STORAGE_KEY)) {
+          const newTheme = e.matches ? "dark" : "light";
+          this.currentTheme = newTheme;
+          this.applyTheme(newTheme);
+        }
+      });
+    }
+  }
+
+  /**
+   * Refresh theme application (useful after new content is loaded)
+   */
+  public refresh(): void {
+    this.applyTheme(this.currentTheme);
+  }
+}

package/src/defaults.ts

@@ -28,6 +28,10 @@ export default function initialize(): Config<CatalogueItem> {
     persistenceLabelConfig: "config",
     yasqe: Yasqe.defaults,
     yasr: Yasr.defaults,
+    theme: undefined,
+    showThemeToggle: true,
+    orientation: "vertical",
+    endpointButtons: undefined,
     endpointCatalogueOptions: {
       getData: () => {
         return [

package/src/endpointSelect.scss

@@ -119,4 +119,38 @@
       opacity: 0.8;
     }
   }
+
+  .endpointButtonsContainer {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 4px;
+  }
+
+  .endpointButton {
+    border: 1px solid var(--yasgui-endpoint-button-border, #337ab7);
+    background-color: var(--yasgui-endpoint-button-bg, #337ab7);
+    color: var(--yasgui-endpoint-button-text, #ffffff);
+    border-radius: 3px;
+    cursor: pointer;
+    padding: 4px 12px;
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: var(--yasgui-endpoint-button-hover-bg, #286090);
+      border-color: var(--yasgui-endpoint-button-hover-border, #286090);
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+
+    &:focus {
+      outline: 2px solid var(--yasgui-endpoint-button-focus, #5cb3fd);
+      outline-offset: 2px;
+    }
+  }
 }

package/src/index.scss

@@ -11,8 +11,8 @@
     left: 0;
     right: 0;
     z-index: 9999;
-    background: white;
-    border-bottom: 1px solid #ddd;
+    background: var(--yasgui-bg-primary);
+    border-bottom: 1px solid var(--yasgui-border-color);
     padding: 5px;
     margin: 0;
 

package/src/index.ts

@@ -12,8 +12,11 @@ import { default as Yasr, Config as YasrConfig } from "@matdata/yasr";
 import { addClass, removeClass } from "@matdata/yasgui-utils";
 import GeoPlugin from "yasgui-geo-tg";
 import GraphPlugin from "@matdata/yasgui-graph-plugin";
+import { ThemeManager, Theme } from "./ThemeManager";
 import "./index.scss";
+import "./themes.scss";
 import "../../yasr/src/scss/global.scss";
+import "codemirror/theme/material-palenight.css";
 
 // Register plugins to Yasr
 Yasr.registerPlugin("Geo", GeoPlugin);
@@ -28,6 +31,10 @@ if (window) {
 export type YasguiRequestConfig = Omit<RequestConfig<Yasgui>, "adjustQueryBeforeRequest"> & {
   adjustQueryBeforeRequest: RequestConfig<Yasqe>["adjustQueryBeforeRequest"];
 };
+export interface EndpointButton {
+  endpoint: string;
+  label: string;
+}
 export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   /**
    * Autofocus yasqe on load or tab switch
@@ -38,6 +45,7 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   tabName: string;
   corsProxy: string | undefined;
   endpointCatalogueOptions: EndpointSelectConfig<EndpointObject>;
+  endpointButtons?: EndpointButton[];
   //The function allows us to modify the config before we pass it on to a tab
   populateFromUrl: boolean | ((configFromUrl: PersistedTabJson) => PersistedTabJson);
   autoAddOnInit: boolean;
@@ -50,6 +58,14 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   requestConfig: YasguiRequestConfig;
   contextMenuContainer: HTMLElement | undefined;
   nonSslDomain?: string;
+  theme?: Theme;
+  showThemeToggle?: boolean;
+  /**
+   * Layout orientation: 'vertical' (default) or 'horizontal' (side-by-side)
+   * 'vertical': YASQE on top, YASR below
+   * 'horizontal': YASQE on left, YASR on right
+   */
+  orientation?: "vertical" | "horizontal";
 }
 export type PartialConfig = {
   [P in keyof Config]?: Config[P] extends object ? Partial<Config[P]> : Config[P];
@@ -96,6 +112,7 @@ export class Yasgui extends EventEmitter {
   public tabPanelsEl: HTMLDivElement;
   public config: Config;
   public persistentConfig: PersistentConfig;
+  public themeManager: ThemeManager;
   public static Tab = Tab;
   constructor(parent: HTMLElement, config: PartialConfig) {
     super();
@@ -104,6 +121,13 @@ export class Yasgui extends EventEmitter {
     parent.appendChild(this.rootEl);
 
     this.config = merge({}, Yasgui.defaults, config);
+
+    // Initialize theme manager
+    this.themeManager = new ThemeManager(this.rootEl);
+    if (this.config.theme) {
+      this.themeManager.setTheme(this.config.theme);
+    }
+    this.themeManager.listenToSystemTheme();
     this.persistentConfig = new PersistentConfig(this);
 
     this.tabElements = new TabElements(this);
@@ -348,6 +372,24 @@ export class Yasgui extends EventEmitter {
       this.addTab(true, config.tab, { atIndex: config.index });
     }
   }
+  /**
+   * Get the current theme
+   */
+  public getTheme(): Theme {
+    return this.themeManager.getTheme();
+  }
+  /**
+   * Set the theme
+   */
+  public setTheme(theme: Theme): void {
+    this.themeManager.setTheme(theme);
+  }
+  /**
+   * Toggle between light and dark themes
+   */
+  public toggleTheme(): Theme {
+    return this.themeManager.toggleTheme();
+  }
   public destroy() {
     this.removeAllListeners();
     this.tabElements.destroy();
@@ -370,4 +412,5 @@ export function getRandomId() {
   return Math.random().toString(36).substring(7);
 }
 
+export type { Theme } from "./ThemeManager";
 export default Yasgui;

package/src/tab.scss

@@ -18,9 +18,57 @@
       left: 0;
       right: 0;
       z-index: 9999;
-      background: white;
-      border-bottom: 1px solid #ddd;
+      background: var(--yasgui-bg-primary);
+      border-bottom: 1px solid var(--yasgui-border-color);
       padding: 5px;
+
+      // Hide the layout orientation toggle button in fullscreen mode
+      .orientationToggle {
+        display: none;
+      }
+    }
+
+    // Horizontal layout (side-by-side)
+    &.orientation-horizontal {
+      &.active {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        // Allow flexible height - can use 100vh or be constrained by parent
+        min-height: var(--yasgui-min-height);
+        height: calc(100vh - var(--yasgui-header-height));
+      }
+
+      .editorwrapper {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      // Make YASQE fill the vertical space in horizontal mode
+      .yasqe {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+
+        .CodeMirror {
+          height: 100% !important;
+        }
+      }
+
+      .yasrWrapperEl {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .yasr {
+        margin-top: 0;
+        height: 100%;
+      }
     }
   }
   .yasr {
@@ -32,9 +80,13 @@
     background: none;
     align-self: center;
     padding-left: 10px;
+    padding-right: 10px;
     cursor: pointer;
-    color: #505050;
-    fill: #505050;
+    color: var(--yasgui-button-text, #505050);
+    fill: var(--yasgui-button-text, #505050);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .svgImg {
       width: 15px;
@@ -43,13 +95,13 @@
     }
     // IE11 Needs this specified otherwise it will not resize the svg
     svg {
-      max-width: 15px;
-      max-height: 15px;
+      width: 20px;
+      height: 20px;
     }
 
     &:hover {
-      color: black;
-      fill: black;
+      color: var(--yasgui-button-hover, black);
+      fill: var(--yasgui-button-hover, black);
     }
   }