solid-panes 4.2.6 → 4.4.1-test.0

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;AAkQvC,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,KAAG,IAIrD,CAAA;AAqBD,eAAO,MAAM,WAAW,GAAI,QAAQ,QAAQ,GAAG,SAAS,SAmDvD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAU,SAAS,SAAS,EAAE,UAAU,cAAc,kBA2IpF,CAAA"}

package/dist/mainPage/menu.js

@@ -0,0 +1,436 @@
+"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 setFooterVisibility = loggedIn => {
+  const footer = document.querySelector('solid-ui-footer');
+  if (!footer) return;
+  footer.style.display = loggedIn ? 'none' : '';
+};
+const isViewingOwnProfile = subject => {
+  const currentUser = _solidLogic.authn.currentUser();
+  return Boolean(currentUser && subject && currentUser.sameTerm(subject));
+};
+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;
+    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));
+  // If the user is logged in and viewing their own profile, select "Your profile"
+  // by default. This also surfaces "Your profile" at the top of the mobile view
+  // via the menu toggle label, which mirrors the active menu item.
+  const activePane = isViewingOwnProfile(subject) ? 'profile' : container.dataset.activePaneName;
+  setActiveMenuItem(container, activePane);
+};
+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';
+    setFooterVisibility(false);
+    return;
+  }
+  setFooterVisibility(true);
+  if (layout === 'mobile') {
+    navMenu.classList.add('mobile-hidden');
+    navMenu.classList.remove('mobile-visible');
+    toggle.hidden = false;
+    toggle.style.display = '';
+    collapseBtn.hidden = true;
+    collapseBtn.style.display = 'none';
+    overlay.hidden = true;
+    overlay.style.display = 'none';
+    navMenu.hidden = false;
+    navMenu.style.display = '';
+    navMenu.classList.remove('collapsed');
+    toggle.setAttribute('aria-expanded', 'false');
+  } else {
+    navMenu.classList.remove('mobile-hidden', 'mobile-visible');
+    toggle.hidden = true;
+    toggle.style.display = 'none';
+    collapseBtn.hidden = false;
+    collapseBtn.style.display = '';
+    overlay.hidden = true;
+    overlay.style.display = 'none';
+    navMenu.hidden = false;
+    navMenu.style.display = '';
+    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');
+    navMenu.style.display = '';
+    menuToggle.setAttribute('aria-expanded', 'false');
+    menuOverlay.hidden = true;
+    menuOverlay.style.display = 'none';
+  };
+  const openMobileMenu = () => {
+    if (!navMenu || !menuToggle || !menuOverlay) return;
+    navMenu.classList.remove('mobile-hidden');
+    navMenu.classList.add('mobile-visible');
+    navMenu.style.display = '';
+    menuToggle.setAttribute('aria-expanded', 'true');
+    menuOverlay.hidden = false;
+    menuOverlay.style.display = '';
+  };
+  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';
+    }
+    setFooterVisibility(loggedIn);
+  };
+  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.css

@@ -0,0 +1,49 @@
+.n3-pane {
+	padding: 1rem;
+	border-top: solid 1px var(--color-data-pane-border-top, black);
+	border-left: solid 1px var(--color-data-pane-border-top, black);
+	border-bottom: solid 1px var(--color-data-pane-border-side, #777);
+	border-right: solid 1px var(--color-data-pane-border-side, #777);
+	color: var(--color-text-blue, #004);
+	box-sizing: border-box;
+}
+
+.n3-pane__source {
+	overflow-x: auto;
+	max-width: 100%;
+	box-sizing: border-box;
+	font-family: monospace;
+	font-size: 120%;
+	margin: 0;
+	white-space: pre;
+}
+
+.n3-pane__line {
+	white-space: pre;
+}
+
+.n3-pane[data-layout='mobile'] .n3-pane__source {
+	overflow-wrap: anywhere;
+	word-break: break-word;
+	white-space: normal;
+}
+
+.n3-pane[data-layout='mobile'] .n3-pane__line {
+	white-space: pre-wrap;
+	padding-left: var(--n3-indent, 0);
+	text-indent: calc(-1 * var(--n3-indent, 0));
+}
+
+@media (max-width: 576px) {
+	.n3-pane__source {
+		overflow-wrap: anywhere;
+		word-break: break-word;
+		white-space: normal;
+	}
+
+	.n3-pane__line {
+		white-space: pre-wrap;
+		padding-left: var(--n3-indent, 0);
+		text-indent: calc(-1 * var(--n3-indent, 0));
+	}
+}

package/dist/n3Pane.d.ts

@@ -0,0 +1,13 @@
+import type { DataBrowserContext } from 'pane-registry';
+import type { NamedNode } from 'rdflib';
+import './n3Pane.css';
+type N3PaneLike = {
+    icon: string;
+    name: string;
+    audience: NamedNode[];
+    label: (subject: NamedNode, context: DataBrowserContext) => string | null;
+    render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement;
+};
+export declare const n3Pane: N3PaneLike;
+export {};
+//# sourceMappingURL=n3Pane.d.ts.map

package/dist/n3Pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"n3Pane.d.ts","sourceRoot":"","sources":["../src/n3Pane.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAClD,OAAO,cAAc,CAAA;AAIrB,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,EAAE,CAAA;IACrB,KAAK,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,MAAM,GAAG,IAAI,CAAA;IACzE,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,cAAc,CAAA;CAC5E,CAAA;AAsBD,eAAO,MAAM,MAAM,EAAE,UAuEpB,CAAA"}

package/dist/n3Pane.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.n3Pane = void 0;
 var UI = _interopRequireWildcard(require("solid-ui"));
 var $rdf = _interopRequireWildcard(require("rdflib"));
+require("./n3Pane.css");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /*      Notation3 content Pane
  **
@@ -15,6 +16,24 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 const ns = UI.ns;
+function leadingIndentWidth(line) {
+  if (line.trim().length === 0) {
+    return 0;
+  }
+  let width = 0;
+  for (const character of line) {
+    if (character === ' ') {
+      width += 1;
+      continue;
+    }
+    if (character === '\t') {
+      width += 2;
+      continue;
+    }
+    break;
+  }
+  return Math.max(width, 2);
+}
 const n3Pane = exports.n3Pane = {
   icon: UI.icons.originalIconBase + 'w3c/n3_smaller.png',
   name: 'n3',
@@ -31,8 +50,13 @@ const n3Pane = exports.n3Pane = {
   render: function (subject, context) {
     const myDocument = context.dom;
     const kb = context.session.store;
+    function applyEnvironmentAttributes(element) {
+      const environment = context.environment ?? {};
+      element.dataset.layout = environment.layout ?? 'desktop';
+    }
     const div = myDocument.createElement('div');
-    div.setAttribute('class', 'n3Pane');
+    div.setAttribute('class', 'n3-pane');
+    applyEnvironmentAttributes(div);
     // Because of smushing etc, this will not be a copy of the original source
     // We could instead either fetch and re-parse the source,
     // or we could keep all the pre-smushed triples.
@@ -48,9 +72,17 @@ const n3Pane = exports.n3Pane = {
     sz.suggestNamespaces(kb.namespaces);
     sz.setBase(subject.uri);
     const str = sz.statementsToN3(sts);
-    const pre = myDocument.createElement('PRE');
-    pre.appendChild(myDocument.createTextNode(str));
-    div.appendChild(pre);
+    const source = myDocument.createElement('div');
+    source.classList.add('n3-pane__source');
+    str.split('\n').forEach(line => {
+      const lineElement = myDocument.createElement('div');
+      const indentWidth = leadingIndentWidth(line);
+      lineElement.classList.add('n3-pane__line');
+      lineElement.style.setProperty('--n3-indent', `${indentWidth}ch`);
+      lineElement.textContent = line.length > 0 ? line : ' ';
+      source.appendChild(lineElement);
+    });
+    div.appendChild(source);
     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"}

package/dist/outline/context.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createContext = createContext;
 var _index = require("../index");
-function createContext(dom, paneRegistry, store, logic) {
+function createContext(dom, paneRegistry, store, logic, environment) {
   return {
     dom,
     getOutliner: _index.getOutliner,
     session: {
       paneRegistry,
+      // @ts-ignore
       store,
+      // @ts-ignore
       logic
-    }
+    },
+    environment
   };
 }

package/dist/outline/manager.css

@@ -31,21 +31,18 @@
 
 .paneShown {
   width: 24px;
-  border-radius: 0.5em;
-  border-top: solid #222 1px;
-  border-left: solid #222 0.1em;
-  border-bottom: solid #eee 0.1em;
-  border-right: solid #eee 0.1em;
-  margin-left: 1em;
-  padding: 3px;
-  background-color: #ffd;
+  border: none !important;
+  border-radius: var(--border-radius-md, 0.5rem);
+  margin-left: var(--spacing-small, 0.1rem);
+  padding: 0.188rem; /* 3px */
+  background-color: var(--header-menu-item-hover, #e6dcff) !important;
 }
 
 .paneHidden {
   width: 24px;
-  border-radius: 0.5em;
-  margin-left: 1em;
-  padding: 3px;
+  border-radius: var(--border-radius-md, 0.5rem);
+  margin-left: var(--spacing-small, 0.1rem);
+  padding: 0.188rem; /* 3px */
 }
 
 .header {
@@ -57,12 +54,13 @@
 
 .strongHeader {
   font-size: 150%;
-  margin: 0 0.6em 0 0;
-  padding: 0.1em 0.4em;
+  margin: 0 0.6rem 0 0;
+  padding: 0.1rem 0.4rem;
 }
 
 .tableFullWidth {
   width: 100%;
+  background: var(--color-background, #F8F9FB) !important;
 }
 
 .placeholderTable {
@@ -70,7 +68,7 @@
 }
 
 .tdFlex {
-  margin: 0.2em;
+  margin: var(--spacing-xxxs, 0.2rem);
   border: none;
   padding: 0;
   vertical-align: top;