solid-panes 4.2.5 → 4.4.0

package/dist/mainPage/menu.css

@@ -0,0 +1,243 @@
+.menu-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.app-nav.mobile-hidden .menu-content,
+.app-nav.mobile-visible .menu-content {
+  padding-top: 0.75rem;
+}
+
+.menu-footer {
+  width: 100%;
+  padding: 1rem;
+  border-top: 1px solid var(--color-border, #d1d1d1);
+  font-size: 0.875rem;
+  color: var(--color-text-muted, #555);
+  line-height: 1.4;
+  background: inherit;
+}
+
+.app-nav.collapsed .menu-footer {
+  display: none;
+  text-align: center;
+  padding: 0.75rem 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs, 0.625rem);
+  border: 0;
+  border-radius: var(--border-radius-sm, 0.2rem);
+  padding: 0.5rem var(--spacing-xs, 0.75rem);
+  background: transparent;
+  color: var(--color-text-heading, #000000);
+  text-decoration: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+}
+
+.menu-toggle-icon {
+  width: 30px;
+  height: 30px;
+}
+
+.menu-item-icon {
+  width: var(--icon-xxs, 1rem);
+  height: var(--icon-xxs, 1rem);
+  flex: 0 0 var(--icon-xxs, 1rem);
+  object-fit: contain;
+}
+
+.menu-item-label {
+  min-width: 0;
+}
+
+.menu-item:hover,
+.menu-item:focus {
+  background: var(--color-header-menu-item-hover, #e6dcff);
+}
+
+.menu-item-active,
+.menu-item-active:hover,
+.menu-item-active:focus {
+  background: var(--color-header-menu-item-selected, #cbb9ff);
+  color: var(--color-header-menu-item-text-selected, #7c4cff);
+}
+
+.menu-toggle {
+  position: fixed;
+  top: 0.5rem;
+  left: 1rem;
+  z-index: 300;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-width: var(--icon-md, 2.5rem);
+  height: var(--icon-md, 2.5rem);
+  padding: 0 0.625rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-menu-bg, #ffffff);
+  color: var(--color-text);
+  border-radius: var(--border-radius-sm, 0.2rem);
+  margin: 0;
+}
+
+.menu-toggle-label {
+  font-size: 1.2rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 10rem;
+}
+
+.menu-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+}
+
+.app-nav {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: min(18rem, 320px);
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  background: var(--color-menu-bg, #ffffff);
+  border-right: 1px solid var(--color-border);
+  z-index: 10;
+}
+
+.app-nav.mobile-hidden,
+.app-nav.mobile-visible {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: min(80vw, 320px);
+  height: 100vh;
+  min-height: 100vh;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease-in-out;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-menu-bg, #ffffff);
+  border-right: none;
+  box-shadow: none;
+  overflow: hidden;
+  padding-top: 3.75rem;
+}
+
+.app-nav.mobile-hidden .menu-content,
+.app-nav.mobile-visible .menu-content {
+  flex: 1;
+  min-height: 0;
+}
+
+.app-nav.mobile-visible {
+  transform: translateX(0);
+  visibility: visible;
+  background: var(--color-menu-bg, #ffffff);
+}
+
+.menu-header {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #42345a !important;
+  color: #ffffff;
+  font-weight: 600;
+  min-height: 3.75rem;
+  height: 3.75rem;
+  box-sizing: border-box;
+  width: 100%;
+  z-index: 1000;
+  border-right: none;
+  box-shadow: none;
+}
+
+.app-nav.mobile-hidden .menu-header,
+.app-nav.mobile-visible .menu-header {
+  display: flex;
+}
+
+.menu-header-title {
+  font-size: 1.25rem;
+  color: #ffffff;
+}
+
+.menu-close {
+  border: none;
+  background: transparent;
+  color: #ffffff;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding-left: 1.25rem;
+  line-height: 1;
+}
+
+.menu-close:hover,
+.menu-close:focus {
+  opacity: 0.85;
+}
+
+.app-nav.collapsed {
+  width: 4.5rem;
+  min-width: 4.5rem;
+}
+
+.app-nav.collapsed .menu-content {
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.app-nav.collapsed .menu-item {
+  justify-content: center;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.app-nav.collapsed .menu-item-label {
+  display: none;
+}
+
+.menu-collapse {
+  position: fixed;
+  left: 3rem;
+  bottom: 8rem;
+  z-index: 320;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  color: var(--color-text);
+  font-size: 1.3rem;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 1px 4px rgba(124,77,255,0.12);
+}
+
+@media (max-width: 768px) {
+  .menu-collapse {
+    display: none;
+  }
+}

package/dist/mainPage/menu.d.ts

@@ -0,0 +1,7 @@
+import './menu.css';
+import { OutlineManager } from '../outline/manager';
+import { NamedNode } from 'rdflib';
+export declare const setActiveMenuPane: (paneName?: string) => void;
+export declare const refreshMenu: (layout: "mobile" | "desktop") => void;
+export declare const createLeftSideMenu: (subject: NamedNode, outliner: OutlineManager) => Promise<void>;
+//# sourceMappingURL=menu.d.ts.map

package/dist/mainPage/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/mainPage/menu.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AACnB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAO,MAAM,QAAQ,CAAA;AAwPvC,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,KAAG,IAIrD,CAAA;AAeD,eAAO,MAAM,WAAW,GAAI,QAAQ,QAAQ,GAAG,SAAS,SAwCvD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAU,SAAS,SAAS,EAAE,UAAU,cAAc,kBAsIpF,CAAA"}

package/dist/mainPage/menu.js

@@ -0,0 +1,409 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setActiveMenuPane = exports.refreshMenu = exports.createLeftSideMenu = void 0;
+require("./menu.css");
+var _solidLogic = require("solid-logic");
+var _rdflib = require("rdflib");
+var _ownerProfile = require("../profileUtils/ownerProfile");
+var _menu2 = _interopRequireDefault(require("../icons/menu.svg?raw"));
+var _iconHelper = require("../icons/iconHelper");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MENU_ICON = (0, _iconHelper.createUiIcon)(_menu2.default, 'Menu Icon', '#ffffff');
+const MENU_COLLAPSED_KEY = 'solid-panes-menu-collapsed';
+let menuCollapsed = false;
+const loadMenuCollapsedState = () => {
+  try {
+    return localStorage.getItem(MENU_COLLAPSED_KEY) === 'true';
+  } catch (error) {
+    return false;
+  }
+};
+const saveMenuCollapsedState = collapsed => {
+  try {
+    localStorage.setItem(MENU_COLLAPSED_KEY, String(collapsed));
+  } catch (error) {
+    // ignore storage errors
+  }
+};
+const updateMenuCollapseButton = () => {
+  const collapseBtn = document.getElementById('MenuCollapseBtn');
+  if (!collapseBtn) return;
+  collapseBtn.textContent = menuCollapsed ? '\u203A' : '\u2039';
+  collapseBtn.setAttribute('aria-label', menuCollapsed ? 'Expand navigation menu' : 'Collapse navigation menu');
+};
+const updateCollapseButtonPosition = (navMenu, collapseBtn) => {
+  if (!navMenu || !collapseBtn) return;
+  const navRect = navMenu.getBoundingClientRect();
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+  const buttonWidth = parseFloat(getComputedStyle(collapseBtn).width) || 1.25 * rootFontSize;
+  const offsetRem = (navRect.width - buttonWidth / 2) / rootFontSize;
+  collapseBtn.style.setProperty('left', `${offsetRem.toFixed(3)}rem`, 'important');
+};
+const applyMenuCollapsedState = navMenu => {
+  if (!navMenu) return;
+  navMenu.classList.toggle('collapsed', menuCollapsed);
+  updateMenuCollapseButton();
+  const collapseBtn = document.getElementById('MenuCollapseBtn');
+  updateCollapseButtonPosition(navMenu, collapseBtn);
+};
+const isLoggedIn = () => Boolean(_solidLogic.authSession?.info?.isLoggedIn);
+const ensureMenuSkeleton = () => {
+  menuCollapsed = loadMenuCollapsedState();
+  const root = document.querySelector('[role="main"]') || document.body;
+  let navMenu = document.getElementById('NavMenu');
+  if (!navMenu) {
+    navMenu = document.createElement('nav');
+    navMenu.id = 'NavMenu';
+    navMenu.className = 'app-nav';
+    navMenu.setAttribute('aria-label', 'App navigation');
+    navMenu.hidden = true;
+    navMenu.style.display = 'none';
+    const headerEl = document.createElement('div');
+    headerEl.className = 'menu-header';
+    const closeBtn = document.createElement('button');
+    closeBtn.id = 'MenuCloseBtn';
+    closeBtn.className = 'menu-close';
+    closeBtn.type = 'button';
+    closeBtn.setAttribute('aria-label', 'Close menu');
+    closeBtn.textContent = '✕';
+    headerEl.appendChild(closeBtn);
+    const title = document.createElement('span');
+    title.className = 'menu-header-title';
+    title.textContent = 'Menu';
+    headerEl.appendChild(title);
+    navMenu.appendChild(headerEl);
+    const authStateEl = document.createElement('div');
+    authStateEl.id = 'AuthState';
+    authStateEl.className = 'menu-auth-state';
+    navMenu.appendChild(authStateEl);
+    const contentEl = document.createElement('div');
+    contentEl.id = 'NavMenuContent';
+    contentEl.className = 'menu-content';
+    navMenu.appendChild(contentEl);
+    root.insertBefore(navMenu, root.firstChild);
+  } else if (!navMenu.querySelector('.menu-header')) {
+    const headerEl = document.createElement('div');
+    headerEl.className = 'menu-header';
+    const closeBtn = document.createElement('button');
+    closeBtn.id = 'MenuCloseBtn';
+    closeBtn.className = 'menu-close';
+    closeBtn.type = 'button';
+    closeBtn.setAttribute('aria-label', 'Close menu');
+    closeBtn.textContent = '✕';
+    headerEl.appendChild(closeBtn);
+    const title = document.createElement('span');
+    title.className = 'menu-header-title';
+    title.textContent = 'Menu';
+    headerEl.appendChild(title);
+    navMenu.insertBefore(headerEl, navMenu.firstChild);
+  }
+  let toggle = document.getElementById('MenuToggleBtn');
+  if (!toggle) {
+    toggle = document.createElement('button');
+    toggle.id = 'MenuToggleBtn';
+    toggle.className = 'menu-toggle';
+    toggle.type = 'button';
+    toggle.setAttribute('aria-label', 'Toggle navigation menu');
+    toggle.hidden = true;
+    const toggleImg = document.createElement('img');
+    toggleImg.src = MENU_ICON;
+    toggleImg.alt = '';
+    toggleImg.className = 'menu-toggle-icon';
+    toggleImg.setAttribute('aria-hidden', 'true');
+    toggle.appendChild(toggleImg);
+    const toggleLabel = document.createElement('span');
+    toggleLabel.id = 'MenuToggleLabel';
+    toggleLabel.className = 'menu-toggle-label';
+    toggle.appendChild(toggleLabel);
+    root.insertBefore(toggle, root.firstChild);
+  }
+  let overlay = document.getElementById('MenuOverlay');
+  if (!overlay) {
+    overlay = document.createElement('div');
+    overlay.id = 'MenuOverlay';
+    overlay.className = 'menu-overlay';
+    overlay.hidden = true;
+    document.body.appendChild(overlay);
+  }
+  let collapseBtn = document.getElementById('MenuCollapseBtn');
+  if (!collapseBtn) {
+    collapseBtn = document.createElement('button');
+    collapseBtn.id = 'MenuCollapseBtn';
+    collapseBtn.className = 'menu-collapse';
+    collapseBtn.type = 'button';
+    collapseBtn.setAttribute('aria-label', 'Collapse navigation menu');
+    collapseBtn.textContent = '\u2039';
+    collapseBtn.hidden = true;
+    document.body.appendChild(collapseBtn);
+  }
+};
+const getMenuItems = async (subject, outliner) => {
+  try {
+    const items = await outliner.getDashboardItems(subject);
+    return items.map(element => {
+      const targetSubject = element.subject || _solidLogic.authn.currentUser() || subject;
+      return {
+        icon: element.icon,
+        subject: targetSubject,
+        paneName: element.tabName || element.paneName,
+        label: element.label,
+        onclick: () => openDashboardPane(targetSubject, outliner, element.tabName || element.paneName)
+      };
+    });
+  } catch (error) {
+    console.error('Unable to load navigation menu items', error);
+    return [];
+  }
+};
+const createMenuButton = item => {
+  const button = document.createElement('button');
+  button.className = 'menu-item';
+  button.type = 'button';
+  if (item.paneName) {
+    button.dataset.paneName = item.paneName;
+  }
+  if (item.icon) {
+    const icon = document.createElement('img');
+    icon.className = 'menu-item-icon';
+    icon.src = item.icon;
+    icon.alt = '';
+    icon.setAttribute('aria-hidden', 'true');
+    button.appendChild(icon);
+  }
+  const label = document.createElement('span');
+  label.className = 'menu-item-label';
+  label.textContent = item.label;
+  button.appendChild(label);
+  if (item.id) {
+    button.id = item.id;
+  }
+  button.addEventListener('click', async () => {
+    await item.onclick();
+  });
+  return button;
+};
+const setActiveMenuItem = (container, paneName) => {
+  const menuItems = Array.from(container.querySelectorAll('.menu-item'));
+  let activeItem;
+  menuItems.forEach(item => {
+    const isActive = Boolean(paneName) && item.dataset.paneName === paneName;
+    item.classList.toggle('menu-item-active', isActive);
+    if (isActive) {
+      item.setAttribute('aria-current', 'page');
+      activeItem = item;
+    } else {
+      item.removeAttribute('aria-current');
+    }
+  });
+  if (paneName) {
+    if (!activeItem && menuItems[0]) {
+      // If an explicit pane name is provided but does not match any menu
+      // item, fall back to clearing selection rather than selecting the first item.
+      container.dataset.activePaneName = '';
+    } else {
+      container.dataset.activePaneName = paneName;
+    }
+  } else {
+    // If there is no active pane, do not auto-select the first menu item.
+    container.dataset.activePaneName = '';
+  }
+  updateToggleLabel(activeItem);
+};
+const setActiveMenuPane = paneName => {
+  const navMenuContent = document.getElementById('NavMenuContent');
+  if (!navMenuContent) return;
+  setActiveMenuItem(navMenuContent, paneName);
+};
+exports.setActiveMenuPane = setActiveMenuPane;
+const updateToggleLabel = activeItem => {
+  const toggleLabel = document.getElementById('MenuToggleLabel');
+  if (!toggleLabel) return;
+  toggleLabel.textContent = activeItem?.querySelector('.menu-item-label')?.textContent || '';
+};
+const renderMenuItems = async (subject, outliner, container) => {
+  const menuItems = await getMenuItems(subject, outliner);
+  container.replaceChildren(...menuItems.map(createMenuButton));
+  setActiveMenuItem(container, container.dataset.activePaneName);
+};
+const refreshMenu = layout => {
+  const navMenu = document.getElementById('NavMenu');
+  const toggle = document.getElementById('MenuToggleBtn');
+  const collapseBtn = document.getElementById('MenuCollapseBtn');
+  const overlay = document.getElementById('MenuOverlay');
+  if (!navMenu || !toggle || !overlay || !collapseBtn) return;
+  const loggedIn = isLoggedIn();
+  if (!loggedIn) {
+    navMenu.hidden = true;
+    navMenu.style.display = 'none';
+    toggle.hidden = true;
+    toggle.style.display = 'none';
+    collapseBtn.hidden = true;
+    collapseBtn.style.display = 'none';
+    overlay.hidden = true;
+    overlay.style.display = 'none';
+    return;
+  }
+  if (layout === 'mobile') {
+    navMenu.classList.add('mobile-hidden');
+    navMenu.classList.remove('mobile-visible');
+    toggle.hidden = false;
+    collapseBtn.hidden = true;
+    overlay.hidden = true;
+    navMenu.hidden = false;
+    navMenu.classList.remove('collapsed');
+    toggle.setAttribute('aria-expanded', 'false');
+  } else {
+    navMenu.classList.remove('mobile-hidden', 'mobile-visible');
+    toggle.hidden = true;
+    collapseBtn.hidden = false;
+    overlay.hidden = true;
+    navMenu.hidden = false;
+    applyMenuCollapsedState(navMenu);
+    updateCollapseButtonPosition(navMenu, collapseBtn);
+    toggle.setAttribute('aria-expanded', 'false');
+  }
+};
+exports.refreshMenu = refreshMenu;
+const createLeftSideMenu = async (subject, outliner) => {
+  ensureMenuSkeleton();
+  const navMenu = document.getElementById('NavMenu');
+  const menuToggle = document.getElementById('MenuToggleBtn');
+  const menuOverlay = document.getElementById('MenuOverlay');
+  const navMenuContent = document.getElementById('NavMenuContent');
+  const closeMobileMenu = () => {
+    if (!navMenu || !menuToggle || !menuOverlay) return;
+    navMenu.classList.remove('mobile-visible');
+    navMenu.classList.add('mobile-hidden');
+    menuToggle.setAttribute('aria-expanded', 'false');
+    menuOverlay.hidden = true;
+  };
+  const openMobileMenu = () => {
+    if (!navMenu || !menuToggle || !menuOverlay) return;
+    navMenu.classList.remove('mobile-hidden');
+    navMenu.classList.add('mobile-visible');
+    menuToggle.setAttribute('aria-expanded', 'true');
+    menuOverlay.hidden = false;
+  };
+  const collapseBtn = document.getElementById('MenuCollapseBtn');
+  const expandDesktopMenu = () => {
+    if (!navMenu || !collapseBtn) return;
+    if (!menuCollapsed) return;
+    menuCollapsed = false;
+    saveMenuCollapsedState(menuCollapsed);
+    applyMenuCollapsedState(navMenu);
+  };
+  if (navMenu) {
+    navMenu.addEventListener('click', event => {
+      const isMobile = outliner.context?.environment?.layout === 'mobile';
+      const clickedCollapseButton = event.target.closest('#MenuCollapseBtn');
+      if (!isMobile && menuCollapsed && !clickedCollapseButton) {
+        expandDesktopMenu();
+      }
+    });
+  }
+  if (menuToggle) {
+    menuToggle.addEventListener('click', () => {
+      if (navMenu?.classList.contains('mobile-visible')) {
+        closeMobileMenu();
+      } else {
+        openMobileMenu();
+      }
+    });
+  }
+  if (collapseBtn) {
+    collapseBtn.addEventListener('click', () => {
+      menuCollapsed = !menuCollapsed;
+      saveMenuCollapsedState(menuCollapsed);
+      applyMenuCollapsedState(navMenu);
+    });
+  }
+  const updateMenuVisibility = () => {
+    const loggedIn = isLoggedIn();
+    if (navMenu) {
+      navMenu.hidden = !loggedIn;
+      navMenu.style.display = loggedIn ? '' : 'none';
+    }
+    if (menuToggle) {
+      menuToggle.hidden = !loggedIn;
+      menuToggle.style.display = loggedIn ? '' : 'none';
+    }
+    if (collapseBtn) {
+      collapseBtn.hidden = !loggedIn;
+      collapseBtn.style.display = loggedIn ? '' : 'none';
+    }
+    if (menuOverlay) {
+      menuOverlay.hidden = !loggedIn;
+      menuOverlay.style.display = loggedIn ? '' : 'none';
+    }
+  };
+  updateMenuVisibility();
+  if (menuOverlay) {
+    menuOverlay.addEventListener('click', closeMobileMenu);
+  }
+  const closeBtn = document.getElementById('MenuCloseBtn');
+  if (closeBtn) {
+    closeBtn.addEventListener('click', closeMobileMenu);
+  }
+  if (navMenuContent) {
+    updateMenuVisibility();
+    const loggedIn = isLoggedIn();
+    if (loggedIn) {
+      await renderMenuItems(subject, outliner, navMenuContent);
+    }
+    if (!navMenuContent.dataset.authEventsBound) {
+      const refreshMenuItems = async () => {
+        await renderMenuItems(subject, outliner, navMenuContent);
+      };
+      _solidLogic.authSession.events.on('login', () => {
+        updateMenuVisibility();
+        refreshMenu(outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop');
+        refreshMenuItems();
+      });
+      _solidLogic.authSession.events.on('logout', () => {
+        updateMenuVisibility();
+        refreshMenu(outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop');
+        refreshMenuItems();
+      });
+      _solidLogic.authSession.events.on('sessionRestore', () => {
+        updateMenuVisibility();
+        refreshMenu(outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop');
+        refreshMenuItems();
+      });
+      navMenuContent.dataset.authEventsBound = 'true';
+    }
+    navMenuContent.addEventListener('click', event => {
+      const item = event.target.closest('.menu-item');
+      if (item instanceof HTMLButtonElement) {
+        setActiveMenuItem(navMenuContent, item.dataset.paneName);
+      }
+      const isMobile = outliner.context?.environment?.layout === 'mobile';
+      if (item && isMobile) {
+        closeMobileMenu();
+      }
+    });
+  }
+  refreshMenu(outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop');
+};
+exports.createLeftSideMenu = createLeftSideMenu;
+async function openDashboardPane(subject, outliner, pane) {
+  const me = _solidLogic.authn.currentUser();
+  if (!subject) {
+    if (me) {
+      subject = me;
+    } else {
+      const store = outliner?.context?.store || outliner?.context?.session?.store || outliner?.kb;
+      const fetcher = outliner?.context?.fetcher || store?.fetcher;
+      if (!store || !fetcher) {
+        throw new Error('Unable to load profile: missing RDF store or fetcher');
+      }
+      const fallbackUri = (0, _rdflib.sym)(window.location.href);
+      subject = await (0, _ownerProfile.loadProfileFromURI)(subject || fallbackUri, store, fetcher);
+    }
+  }
+  outliner.showDashboard(subject, {
+    pane
+  });
+}

package/dist/n3Pane.js

@@ -49,6 +49,7 @@ const n3Pane = exports.n3Pane = {
     sz.setBase(subject.uri);
     const str = sz.statementsToN3(sts);
     const pre = myDocument.createElement('PRE');
+    pre.setAttribute('style', 'overflow-x: auto; max-width: 100%; box-sizing: border-box;');
     pre.appendChild(myDocument.createTextNode(str));
     div.appendChild(pre);
     return div;

package/dist/outline/context.d.ts

@@ -1,5 +1,5 @@
-import { DataBrowserContext, PaneRegistry } from 'pane-registry';
+import { DataBrowserContext, PaneRegistry, RenderEnvironment } from 'pane-registry';
 import { SolidLogic } from 'solid-logic';
 import { LiveStore } from 'rdflib';
-export declare function createContext(dom: HTMLDocument, paneRegistry: PaneRegistry, store: LiveStore, logic: SolidLogic): DataBrowserContext;
+export declare function createContext(dom: HTMLDocument, paneRegistry: PaneRegistry, store: LiveStore, logic: SolidLogic, environment?: RenderEnvironment): DataBrowserContext;
 //# sourceMappingURL=context.d.ts.map

package/dist/outline/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/outline/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,wBAAgB,aAAa,CAC3B,GAAG,EAAE,YAAY,EACjB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,UAAU,GAChB,kBAAkB,CAUpB"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/outline/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEnF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,wBAAgB,aAAa,CAC3B,GAAG,EAAE,YAAY,EACjB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,UAAU,EACjB,WAAW,CAAC,EAAE,iBAAiB,GAC9B,kBAAkB,CAapB"}