@matdata/yasgui 5.1.0 → 5.3.0

package/src/TabSettingsModal.ts

@@ -1,6 +1,7 @@
 import { addClass, removeClass } from "@matdata/yasgui-utils";
 import "./TabSettingsModal.scss";
 import Tab from "./Tab";
+import * as ConfigExportImport from "./ConfigExportImport";
 
 // Theme toggle icons
 const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
@@ -126,8 +127,26 @@ export default class TabSettingsModal {
     addClass(prefixTab, "modalTabButton");
     prefixTab.onclick = () => this.switchTab("prefix");
 
+    const editorTab = document.createElement("button");
+    editorTab.textContent = "Editor";
+    addClass(editorTab, "modalTabButton");
+    editorTab.onclick = () => this.switchTab("editor");
+
+    const endpointsTab = document.createElement("button");
+    endpointsTab.textContent = "Endpoint Buttons";
+    addClass(endpointsTab, "modalTabButton");
+    endpointsTab.onclick = () => this.switchTab("endpoints");
+
+    const importExportTab = document.createElement("button");
+    importExportTab.textContent = "Import/Export";
+    addClass(importExportTab, "modalTabButton");
+    importExportTab.onclick = () => this.switchTab("importexport");
+
     tabsContainer.appendChild(requestTab);
     tabsContainer.appendChild(prefixTab);
+    tabsContainer.appendChild(editorTab);
+    tabsContainer.appendChild(endpointsTab);
+    tabsContainer.appendChild(importExportTab);
     body.appendChild(tabsContainer);
 
     // Tab content containers
@@ -141,8 +160,26 @@ export default class TabSettingsModal {
     prefixContent.id = "prefix-content";
     this.drawPrefixSettings(prefixContent);
 
+    const editorContent = document.createElement("div");
+    addClass(editorContent, "modalTabContent");
+    editorContent.id = "editor-content";
+    this.drawEditorSettings(editorContent);
+
+    const endpointsContent = document.createElement("div");
+    addClass(endpointsContent, "modalTabContent");
+    endpointsContent.id = "endpoints-content";
+    this.drawEndpointButtonsSettings(endpointsContent);
+
+    const importExportContent = document.createElement("div");
+    addClass(importExportContent, "modalTabContent");
+    importExportContent.id = "importexport-content";
+    this.drawImportExportSettings(importExportContent);
+
     body.appendChild(requestContent);
     body.appendChild(prefixContent);
+    body.appendChild(editorContent);
+    body.appendChild(endpointsContent);
+    body.appendChild(importExportContent);
 
     this.modalContent.appendChild(body);
 
@@ -174,7 +211,13 @@ 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 === "editor" && index === 2) ||
+        (tabName === "endpoints" && index === 3) ||
+        (tabName === "importexport" && index === 4)
+      ) {
         addClass(btn as HTMLElement, "active");
       } else {
         removeClass(btn as HTMLElement, "active");
@@ -184,6 +227,11 @@ export default class TabSettingsModal {
     contents.forEach((content) => {
       if (content.id === `${tabName}-content`) {
         addClass(content as HTMLElement, "active");
+        // Reload editor settings if switching to editor tab and it hasn't been loaded yet
+        if (tabName === "editor" && content.innerHTML.indexOf("not yet initialized") > -1) {
+          content.innerHTML = "";
+          this.drawEditorSettings(content as HTMLElement);
+        }
       } else {
         removeClass(content as HTMLElement, "active");
       }
@@ -230,6 +278,108 @@ export default class TabSettingsModal {
     container.appendChild(section);
   }
 
+  private drawEditorSettings(container: HTMLElement) {
+    const yasqe = this.tab.getYasqe();
+    if (!yasqe) {
+      const notice = document.createElement("div");
+      notice.textContent = "Query editor is not yet initialized.";
+      addClass(notice, "settingsHelp");
+      container.appendChild(notice);
+      return;
+    }
+
+    // Formatter Type Section
+    const formatterSection = document.createElement("div");
+    addClass(formatterSection, "settingsSection");
+
+    const formatterLabel = document.createElement("label");
+    formatterLabel.textContent = "Query Formatter";
+    addClass(formatterLabel, "settingsLabel");
+
+    const formatterHelp = document.createElement("div");
+    formatterHelp.textContent = "Choose which formatter to use when formatting SPARQL queries (Shift+Ctrl+F).";
+    addClass(formatterHelp, "settingsHelp");
+
+    const formatterSelect = document.createElement("select");
+    formatterSelect.id = "formatterTypeSelect";
+    addClass(formatterSelect, "settingsSelect");
+
+    const sparqlFormatterOption = document.createElement("option");
+    sparqlFormatterOption.value = "sparql-formatter";
+    sparqlFormatterOption.textContent = "SPARQL Formatter (external library)";
+    formatterSelect.appendChild(sparqlFormatterOption);
+
+    const legacyOption = document.createElement("option");
+    legacyOption.value = "legacy";
+    legacyOption.textContent = "Legacy Formatter (built-in)";
+    formatterSelect.appendChild(legacyOption);
+
+    const currentFormatter = yasqe.persistentConfig?.formatterType || "sparql-formatter";
+    formatterSelect.value = currentFormatter;
+
+    formatterSection.appendChild(formatterLabel);
+    formatterSection.appendChild(formatterHelp);
+    formatterSection.appendChild(formatterSelect);
+    container.appendChild(formatterSection);
+
+    // Auto-format on Query Section
+    const autoformatSection = document.createElement("div");
+    addClass(autoformatSection, "settingsSection");
+
+    const autoformatCheckboxContainer = document.createElement("div");
+    addClass(autoformatCheckboxContainer, "checkboxContainer");
+
+    const autoformatCheckbox = document.createElement("input");
+    autoformatCheckbox.type = "checkbox";
+    autoformatCheckbox.id = "autoformatOnQuery";
+    autoformatCheckbox.checked = yasqe.persistentConfig?.autoformatOnQuery || true;
+
+    const autoformatLabel = document.createElement("label");
+    autoformatLabel.htmlFor = "autoformatOnQuery";
+    autoformatLabel.textContent = "Auto-format query before execution";
+
+    const autoformatHelp = document.createElement("div");
+    autoformatHelp.textContent = "Automatically format the query using the selected formatter before executing it.";
+    addClass(autoformatHelp, "settingsHelp");
+    autoformatHelp.style.marginTop = "5px";
+
+    autoformatCheckboxContainer.appendChild(autoformatCheckbox);
+    autoformatCheckboxContainer.appendChild(autoformatLabel);
+
+    autoformatSection.appendChild(autoformatCheckboxContainer);
+    autoformatSection.appendChild(autoformatHelp);
+    container.appendChild(autoformatSection);
+
+    // CONSTRUCT Variable Validation Section
+    const constructValidationSection = document.createElement("div");
+    addClass(constructValidationSection, "settingsSection");
+
+    const constructValidationCheckboxContainer = document.createElement("div");
+    addClass(constructValidationCheckboxContainer, "checkboxContainer");
+
+    const constructValidationCheckbox = document.createElement("input");
+    constructValidationCheckbox.type = "checkbox";
+    constructValidationCheckbox.id = "checkConstructVariables";
+    constructValidationCheckbox.checked = yasqe.config.checkConstructVariables ?? true;
+
+    const constructValidationLabel = document.createElement("label");
+    constructValidationLabel.htmlFor = "checkConstructVariables";
+    constructValidationLabel.textContent = "Validate CONSTRUCT query variables";
+
+    const constructValidationHelp = document.createElement("div");
+    constructValidationHelp.textContent =
+      "Show warnings for variables used in CONSTRUCT template but not defined in WHERE clause.";
+    addClass(constructValidationHelp, "settingsHelp");
+    constructValidationHelp.style.marginTop = "5px";
+
+    constructValidationCheckboxContainer.appendChild(constructValidationCheckbox);
+    constructValidationCheckboxContainer.appendChild(constructValidationLabel);
+
+    constructValidationSection.appendChild(constructValidationCheckboxContainer);
+    constructValidationSection.appendChild(constructValidationHelp);
+    container.appendChild(constructValidationSection);
+  }
+
   private drawRequestSettings(container: HTMLElement) {
     // This is a simplified version - you can expand based on TabPanel.ts
     const reqConfig = this.tab.getRequestConfig();
@@ -296,6 +446,11 @@ export default class TabSettingsModal {
 
   public open() {
     this.loadSettings();
+    // Reload editor settings in case yasqe wasn't available during init
+    const editorContent = this.modalContent.querySelector("#editor-content");
+    if (editorContent && editorContent.innerHTML === "") {
+      this.drawEditorSettings(editorContent as HTMLElement);
+    }
     addClass(this.modalOverlay, "open");
   }
 
@@ -328,6 +483,25 @@ export default class TabSettingsModal {
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
     this.tab.yasgui.persistentConfig.setAutoCaptureEnabled(autoCapture);
 
+    // Save editor settings
+    const yasqe = this.tab.getYasqe();
+    if (yasqe && yasqe.persistentConfig) {
+      const formatterSelect = document.getElementById("formatterTypeSelect") as HTMLSelectElement;
+      const autoformatCheckbox = document.getElementById("autoformatOnQuery") as HTMLInputElement;
+      const constructValidationCheckbox = document.getElementById("checkConstructVariables") as HTMLInputElement;
+
+      if (formatterSelect) {
+        yasqe.persistentConfig.formatterType = formatterSelect.value as "sparql-formatter" | "legacy";
+      }
+      if (autoformatCheckbox) {
+        yasqe.persistentConfig.autoformatOnQuery = autoformatCheckbox.checked;
+      }
+      if (constructValidationCheckbox) {
+        yasqe.setCheckConstructVariables(constructValidationCheckbox.checked);
+      }
+      yasqe.saveQuery();
+    }
+
     // Save request settings
     const requestContent = this.modalContent.querySelector("#request-content");
     if (requestContent) {
@@ -342,6 +516,9 @@ export default class TabSettingsModal {
       this.tab.setRequestConfig(updates);
     }
 
+    // Refresh endpoint buttons to show any changes
+    this.tab.refreshEndpointButtons();
+
     this.close();
   }
 
@@ -395,10 +572,10 @@ export default class TabSettingsModal {
     // If we didn't find a non-PREFIX line, all lines are PREFIX or empty
     if (firstNonPrefixLine === 0 && lines.length > 0) {
       // Check if there's any content at all
-      const hasContent = lines.some((line) => line.trim().length > 0);
+      const hasContent = lines.some((line: string) => line.trim().length > 0);
       if (
         !hasContent ||
-        lines.every((line) => line.trim().length === 0 || line.trim().toUpperCase().startsWith("PREFIX"))
+        lines.every((line: string) => line.trim().length === 0 || line.trim().toUpperCase().startsWith("PREFIX"))
       ) {
         firstNonPrefixLine = lines.length;
       }
@@ -437,6 +614,117 @@ 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)
@@ -444,6 +732,214 @@ export default class TabSettingsModal {
     return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
   }
 
+  private drawImportExportSettings(container: HTMLElement) {
+    // Export Section
+    const exportSection = document.createElement("div");
+    addClass(exportSection, "settingsSection");
+
+    const exportLabel = document.createElement("label");
+    exportLabel.textContent = "Export Configuration";
+    addClass(exportLabel, "settingsLabel");
+
+    const exportHelp = document.createElement("div");
+    exportHelp.textContent =
+      "Export your YASGUI configuration in RDF Turtle format. This includes tabs, queries, endpoints, and preferences.";
+    addClass(exportHelp, "settingsHelp");
+
+    const exportButtonsContainer = document.createElement("div");
+    addClass(exportButtonsContainer, "exportButtons");
+
+    const copyButton = document.createElement("button");
+    copyButton.textContent = "📋 Copy to Clipboard";
+    copyButton.type = "button";
+    addClass(copyButton, "secondaryButton");
+    copyButton.onclick = async () => {
+      try {
+        const config = this.tab.yasgui.persistentConfig.getPersistedConfig();
+        await ConfigExportImport.copyConfigToClipboard(config);
+        this.showNotification("Configuration copied to clipboard!", "success");
+      } catch (error) {
+        this.showNotification("Failed to copy to clipboard: " + (error as Error).message, "error");
+      }
+    };
+
+    const downloadButton = document.createElement("button");
+    downloadButton.textContent = "💾 Download as File";
+    downloadButton.type = "button";
+    addClass(downloadButton, "primaryButton");
+    downloadButton.onclick = () => {
+      try {
+        const config = this.tab.yasgui.persistentConfig.getPersistedConfig();
+        ConfigExportImport.downloadConfigAsFile(config);
+        this.showNotification("Configuration downloaded!", "success");
+      } catch (error) {
+        this.showNotification("Failed to download: " + (error as Error).message, "error");
+      }
+    };
+
+    exportButtonsContainer.appendChild(copyButton);
+    exportButtonsContainer.appendChild(downloadButton);
+
+    exportSection.appendChild(exportLabel);
+    exportSection.appendChild(exportHelp);
+    exportSection.appendChild(exportButtonsContainer);
+    container.appendChild(exportSection);
+
+    // Import Section
+    const importSection = document.createElement("div");
+    addClass(importSection, "settingsSection");
+
+    const importLabel = document.createElement("label");
+    importLabel.textContent = "Import Configuration";
+    addClass(importLabel, "settingsLabel");
+
+    const importHelp = document.createElement("div");
+    importHelp.textContent = "Import a previously exported configuration in RDF Turtle format.";
+    addClass(importHelp, "settingsHelp");
+
+    // Drag and drop area
+    const dropZone = document.createElement("div");
+    addClass(dropZone, "dropZone");
+    dropZone.innerHTML = `
+      <div class="dropZoneContent">
+        <div class="dropZoneIcon">📁</div>
+        <div class="dropZoneText">Drag & drop a .ttl file here</div>
+        <div class="dropZoneOr">or</div>
+      </div>
+    `;
+
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = ".ttl,.turtle,text/turtle";
+    fileInput.style.display = "none";
+    fileInput.id = "config-file-input";
+
+    const browseButton = document.createElement("button");
+    browseButton.textContent = "📂 Browse Files";
+    browseButton.type = "button";
+    addClass(browseButton, "secondaryButton");
+    browseButton.onclick = () => fileInput.click();
+
+    const pasteButton = document.createElement("button");
+    pasteButton.textContent = "📋 Paste from Clipboard";
+    pasteButton.type = "button";
+    addClass(pasteButton, "secondaryButton");
+    pasteButton.onclick = async () => {
+      try {
+        const content = await ConfigExportImport.readConfigFromClipboard();
+        await this.importConfiguration(content);
+      } catch (error) {
+        this.showNotification("Failed to read from clipboard: " + (error as Error).message, "error");
+      }
+    };
+
+    // File input change handler
+    fileInput.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) {
+        try {
+          const content = await ConfigExportImport.readConfigFromFile(file);
+          await this.importConfiguration(content);
+        } catch (error) {
+          this.showNotification("Failed to read file: " + (error as Error).message, "error");
+        }
+      }
+    };
+
+    // Drag and drop handlers
+    dropZone.ondragover = (e) => {
+      e.preventDefault();
+      addClass(dropZone, "dragover");
+    };
+
+    dropZone.ondragleave = () => {
+      removeClass(dropZone, "dragover");
+    };
+
+    dropZone.ondrop = async (e) => {
+      e.preventDefault();
+      removeClass(dropZone, "dragover");
+
+      const file = e.dataTransfer?.files?.[0];
+      if (file) {
+        try {
+          const content = await ConfigExportImport.readConfigFromFile(file);
+          await this.importConfiguration(content);
+        } catch (error) {
+          this.showNotification("Failed to read file: " + (error as Error).message, "error");
+        }
+      }
+    };
+
+    const importButtonsContainer = document.createElement("div");
+    addClass(importButtonsContainer, "importButtons");
+    importButtonsContainer.appendChild(browseButton);
+    importButtonsContainer.appendChild(pasteButton);
+
+    dropZone.appendChild(importButtonsContainer);
+
+    importSection.appendChild(importLabel);
+    importSection.appendChild(importHelp);
+    importSection.appendChild(dropZone);
+    importSection.appendChild(fileInput);
+    container.appendChild(importSection);
+  }
+
+  private async importConfiguration(turtleContent: string) {
+    try {
+      const parsedConfig = ConfigExportImport.parseFromTurtle(turtleContent);
+
+      // Confirm with user before importing
+      const confirmMsg = `This will replace your current configuration with ${parsedConfig.tabs?.length || 0} tab(s). Continue?`;
+      if (!confirm(confirmMsg)) {
+        return;
+      }
+
+      // Close the modal first
+      this.close();
+
+      // Apply theme if provided
+      if (parsedConfig.theme) {
+        this.tab.yasgui.themeManager.setTheme(parsedConfig.theme);
+      }
+
+      // Apply global orientation if provided
+      if (parsedConfig.orientation) {
+        this.tab.yasgui.config.orientation = parsedConfig.orientation;
+      }
+
+      // Close all existing tabs
+      const existingTabIds = [...this.tab.yasgui.persistentConfig.getTabs()];
+      for (const tabId of existingTabIds) {
+        const tab = this.tab.yasgui.getTab(tabId);
+        if (tab) {
+          tab.close();
+        }
+      }
+
+      // Update the configuration storage
+      this.tab.yasgui.persistentConfig.updatePersistedConfig(parsedConfig);
+
+      window.location.reload();
+    } catch (error) {
+      this.showNotification("Failed to import configuration: " + (error as Error).message, "error");
+    }
+  }
+
+  private showNotification(message: string, type: "success" | "error") {
+    const notification = document.createElement("div");
+    addClass(notification, "importExportNotification", type);
+    notification.textContent = message;
+
+    this.modalContent.appendChild(notification);
+
+    setTimeout(() => {
+      if (notification.parentNode) {
+        notification.parentNode.removeChild(notification);
+      }
+    }, 5000);
+  }
+
   public destroy() {
     if (this.modalOverlay && this.modalOverlay.parentNode) {
       this.modalOverlay.parentNode.removeChild(this.modalOverlay);

package/src/defaults.ts

@@ -30,6 +30,8 @@ export default function initialize(): Config<CatalogueItem> {
     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

@@ -31,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
@@ -41,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;
@@ -55,6 +60,12 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   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];