solid-panes 4.2.6 → 4.4.1-test.0

package/dist/humanReadablePane.js

@@ -8,6 +8,7 @@ var _solidUi = require("solid-ui");
 var _rdflib = require("rdflib");
 var _marked = require("marked");
 var _dompurify = _interopRequireDefault(require("dompurify"));
+require("./humanReadablePane.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*   Human-readable Pane
  **
@@ -16,6 +17,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 
 // Helper function to check if a URI has a markdown file extension
+
 const isMarkdownFile = uri => {
   if (!uri) return false;
   const path = uri.split('?')[0].split('#')[0]; // Remove query string and fragment
@@ -24,6 +26,12 @@ const isMarkdownFile = uri => {
 
 // Cache for dokieli detection results (keyed by subject URI)
 const dokieliCache = new Map();
+function applyFrameClasses(frame, modifier, lines) {
+  frame.className = '';
+  frame.classList.add('human-readable-pane__frame');
+  frame.classList.add(`human-readable-pane__frame--${modifier}`);
+  frame.style.setProperty('--human-readable-pane-height', `${lines}em`);
+}
 const humanReadablePane = {
   icon: function (subject, context) {
     // Markdown files detected by extension
@@ -131,11 +139,16 @@ const humanReadablePane = {
     const myDocument = context.dom;
     const div = myDocument.createElement('div');
     const kb = context.session.store;
+    function applyEnvironmentAttributes(element) {
+      const environment = context.environment ?? {};
+      element.dataset.layout = environment.layout ?? 'desktop';
+    }
     const cts = kb.fetcher.getHeader(subject.doc(), 'content-type');
     const ct = cts ? cts[0].split(';', 1)[0].trim() : null; // remove content-type parameters
 
     // Fallback: detect markdown by file extension if content-type is not text/markdown
     const isMarkdown = ct === 'text/markdown' || isMarkdownFile(subject.uri);
+    const isPlainText = ct === 'text/plain';
     if (ct) {
       // console.log('humanReadablePane: c-t:' + ct)
     } else {
@@ -143,38 +156,61 @@ const humanReadablePane = {
     }
 
     //  @@ When we can, use CSP to turn off scripts within the iframe
-    div.setAttribute('class', 'docView');
+    div.classList.add('human-readable-pane');
+    applyEnvironmentAttributes(div);
 
     // render markdown to html in a DIV element
     const renderMarkdownContent = function (frame) {
       kb.fetcher.webOperation('GET', subject.uri).then(response => {
-        const markdownText = response.responseText;
+        const markdownText = response.responseText ?? '';
         const lines = Math.min(30, markdownText.split(/\n/).length + 5);
-        const res = _marked.marked.parse(markdownText);
+        const res = _marked.marked.parse(markdownText, {
+          async: false
+        });
         const clean = _dompurify.default.sanitize(res);
         frame.innerHTML = clean;
-        frame.setAttribute('class', 'doc');
-        frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; width: 800px; resize: both; overflow: auto;`);
+        applyFrameClasses(frame, 'markdown', lines);
       }).catch(error => {
         console.error('Error fetching markdown content:', error);
         frame.innerHTML = '<p>Error loading content</p>';
       });
     };
+
+    // render plain text in a PRE element
+    const renderPlainTextContent = function (frame) {
+      kb.fetcher.webOperation('GET', subject.uri).then(response => {
+        const plainText = response.responseText ?? '';
+        const lines = Math.min(30, plainText.split(/\n/).length + 5);
+        frame.textContent = plainText;
+        applyFrameClasses(frame, 'plain-text', lines);
+      }).catch(error => {
+        console.error('Error fetching plain text content:', error);
+        frame.textContent = 'Error loading content';
+      });
+    };
     const setIframeAttributes = (frame, lines) => {
       frame.setAttribute('src', subject.uri);
-      frame.setAttribute('class', 'doc');
-      frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; width: 800px; resize: both; overflow: auto;`);
+      applyFrameClasses(frame, 'iframe', lines);
     };
     if (isMarkdown) {
       // For markdown, use a DIV element and render the content
-      const frame = myDocument.createElement('DIV');
+      const frame = myDocument.createElement('div');
       renderMarkdownContent(frame);
-      const tr = myDocument.createElement('TR');
-      tr.appendChild(frame);
-      div.appendChild(tr);
+      const frameContainer = myDocument.createElement('div');
+      frameContainer.classList.add('human-readable-pane__container');
+      frameContainer.appendChild(frame);
+      div.appendChild(frameContainer);
+    } else if (isPlainText) {
+      // For plain text, use a PRE element and render the content
+      const frame = myDocument.createElement('pre');
+      renderPlainTextContent(frame);
+      const frameContainer = myDocument.createElement('div');
+      frameContainer.classList.add('human-readable-pane__container');
+      frameContainer.appendChild(frame);
+      div.appendChild(frameContainer);
     } else {
       // For other content types, use IFRAME
-      const frame = myDocument.createElement('IFRAME');
+      const frame = myDocument.createElement('iframe');
 
       // Apply sandbox for HTML/XHTML
       if (ct === 'text/html' || ct === 'application/xhtml+xml') {
@@ -183,7 +219,7 @@ const humanReadablePane = {
 
       // Fetch content to calculate lines dynamically
       kb.fetcher.webOperation('GET', subject.uri).then(response => {
-        const blobText = response.responseText;
+        const blobText = response.responseText ?? '';
         const newLines = blobText.includes('<script src="https://dokie.li/scripts/dokieli.js">') ? -10 : 5;
         const lines = Math.min(30, blobText.split(/\n/).length + newLines);
 
@@ -196,9 +232,10 @@ const humanReadablePane = {
         // Fallback to default height
         setIframeAttributes(frame, 30);
       });
-      const tr = myDocument.createElement('TR');
-      tr.appendChild(frame);
-      div.appendChild(tr);
+      const frameContainer = myDocument.createElement('div');
+      frameContainer.classList.add('human-readable-pane__container');
+      frameContainer.appendChild(frame);
+      div.appendChild(frameContainer);
     }
     return div;
   }

package/dist/icons/clock.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 20 20" 
+    fill="none"
+  >
+    <path d="M9.99935 18.3334C14.6017 18.3334 18.3327 14.6025 18.3327 10.0001C18.3327 5.39771 14.6017 1.66675 9.99935 1.66675C5.39698 1.66675 1.66602 5.39771 1.66602 10.0001C1.66602 14.6025 5.39698 18.3334 9.99935 18.3334Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M10 5V10L13.3333 8.33333" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>

package/dist/icons/comment.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none"
+    >
+    <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/icons/dashboard.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 20 20" 
+    fill="none"
+  >
+    <path d="M7.5 2.5H3.33333C2.8731 2.5 2.5 2.8731 2.5 3.33333V9.16667C2.5 9.6269 2.8731 10 3.33333 10H7.5C7.96024 10 8.33333 9.6269 8.33333 9.16667V3.33333C8.33333 2.8731 7.96024 2.5 7.5 2.5Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16.666 2.5H12.4993C12.0391 2.5 11.666 2.8731 11.666 3.33333V5.83333C11.666 6.29357 12.0391 6.66667 12.4993 6.66667H16.666C17.1263 6.66667 17.4993 6.29357 17.4993 5.83333V3.33333C17.4993 2.8731 17.1263 2.5 16.666 2.5Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16.666 10H12.4993C12.0391 10 11.666 10.3731 11.666 10.8333V16.6667C11.666 17.1269 12.0391 17.5 12.4993 17.5H16.666C17.1263 17.5 17.4993 17.1269 17.4993 16.6667V10.8333C17.4993 10.3731 17.1263 10 16.666 10Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.5 13.3333H3.33333C2.8731 13.3333 2.5 13.7063 2.5 14.1666V16.6666C2.5 17.1268 2.8731 17.4999 3.33333 17.4999H7.5C7.96024 17.4999 8.33333 17.1268 8.33333 16.6666V14.1666C8.33333 13.7063 7.96024 13.3333 7.5 13.3333Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/icons/downArrow.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 12 7" 
+    fill="none"
+  >
+    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="currentColor" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>

package/dist/icons/folder.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"  
+    viewBox="0 0 16 16" 
+    fill="none"
+  >
+    <path d="M13.334 13.3333C13.6876 13.3333 14.0267 13.1929 14.2768 12.9428C14.5268 12.6928 14.6673 12.3536 14.6673 12V5.33333C14.6673 4.97971 14.5268 4.64057 14.2768 4.39052C14.0267 4.14048 13.6876 4 13.334 4H8.06732C7.84433 4.00219 7.62435 3.94841 7.42752 3.84359C7.23069 3.73877 7.06329 3.58625 6.94065 3.4L6.40065 2.6C6.27924 2.41565 6.11397 2.26432 5.91965 2.1596C5.72533 2.05488 5.50806 2.00004 5.28732 2H2.66732C2.3137 2 1.97456 2.14048 1.72451 2.39052C1.47446 2.64057 1.33398 2.97971 1.33398 3.33333V12C1.33398 12.3536 1.47446 12.6928 1.72451 12.9428C1.97456 13.1929 2.3137 13.3333 2.66732 13.3333H13.334Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>

package/dist/icons/friends.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+  viewBox="0 0 20 20" 
+  fill="none"
+  >
+  <path d="M13.3327 17.5V15.8333C13.3327 14.9493 12.9815 14.1014 12.3564 13.4763C11.7313 12.8512 10.8834 12.5 9.99935 12.5H4.99935C4.11529 12.5 3.26745 12.8512 2.64233 13.4763C2.01721 14.1014 1.66602 14.9493 1.66602 15.8333V17.5" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M13.334 2.60669C14.0488 2.792 14.6818 3.20941 15.1337 3.79341C15.5856 4.37741 15.8308 5.09493 15.8308 5.83336C15.8308 6.57178 15.5856 7.28931 15.1337 7.8733C14.6818 8.4573 14.0488 8.87471 13.334 9.06002" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M18.334 17.5001V15.8334C18.3334 15.0948 18.0876 14.3774 17.6351 13.7937C17.1826 13.2099 16.5491 12.793 15.834 12.6084" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.49935 9.16667C9.3403 9.16667 10.8327 7.67428 10.8327 5.83333C10.8327 3.99238 9.3403 2.5 7.49935 2.5C5.6584 2.5 4.16602 3.99238 4.16602 5.83333C4.16602 7.67428 5.6584 9.16667 7.49935 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/icons/help.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 35 35" 
+    fill="none"
+    >
+    <path d="M17.4546 30.9091C10.0462 30.9091 4 24.8625 4 17.4546C4 10.0462 10.0467 4 17.4546 4C24.8629 4 30.9091 10.0466 30.9091 17.4546C30.9091 24.8629 24.8625 30.9091 17.4546 30.9091ZM17.4546 5.57671C10.9051 5.57671 5.57671 10.9051 5.57671 17.4546C5.57671 24.0041 10.9051 29.3324 17.4546 29.3324C24.0041 29.3324 29.3324 24.0041 29.3324 17.4546C29.3324 10.9051 24.0041 5.57671 17.4546 5.57671Z" fill="currentColor"/>
+    <path d="M17.4554 21.3963C17.0201 21.3963 16.6671 21.0434 16.6671 20.608V19.7642C16.6671 18.3614 17.4221 17.0533 18.6374 16.3502C19.3671 15.9281 19.8205 15.1429 19.8205 14.3011C19.8205 12.997 18.7595 11.9361 17.4554 11.9361C16.1513 11.9361 15.0904 12.997 15.0904 14.3011C15.0904 14.7365 14.7374 15.0895 14.302 15.0895C13.8666 15.0895 13.5137 14.7365 13.5137 14.3011C13.5137 12.1277 15.2819 10.3594 17.4554 10.3594C19.6289 10.3594 21.3972 12.1277 21.3972 14.3011C21.3972 15.7039 20.6422 17.012 19.4269 17.7151C18.6971 18.1372 18.2438 18.9224 18.2438 19.7642V20.608C18.2438 21.0434 17.8908 21.3963 17.4554 21.3963Z" fill="currentColor"/>
+    <path d="M17.4544 24.5499C17.8898 24.5499 18.2427 24.1969 18.2427 23.7615C18.2427 23.3261 17.8898 22.9731 17.4544 22.9731C17.019 22.9731 16.666 23.3261 16.666 23.7615C16.666 24.1969 17.019 24.5499 17.4544 24.5499Z" fill="currentColor"/>
+  </svg>

package/dist/icons/iconHelper.d.ts

@@ -0,0 +1,2 @@
+export declare function createUiIcon(icon: string, label?: string, color?: string): string;
+//# sourceMappingURL=iconHelper.d.ts.map

package/dist/icons/iconHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconHelper.d.ts","sourceRoot":"","sources":["../../src/icons/iconHelper.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,KAAK,SAAS,EACd,KAAK,GAAE,MAAuB,GAC7B,MAAM,CA6BR"}

package/dist/icons/iconHelper.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUiIcon = createUiIcon;
+function createUiIcon(icon, label = 'icon', color = 'currentColor') {
+  const styleBlocks = ['display:block'];
+  const extraAttrs = ['role="img"', `aria-label="${label}"`, 'focusable="false"', 'aria-hidden="true"', 'width="100%"', 'height="100%"', `style="${styleBlocks.join('; ')}"`].join(' ');
+  let svg = icon.replace(/^\uFEFF/, '').trim();
+
+  // If webpack gave us a data URL instead of raw SVG, decode it first
+  if (svg.startsWith('data:image/svg+xml;base64,')) {
+    svg = decodeURIComponent(escape(atob(svg.slice('data:image/svg+xml;base64,'.length))));
+  } else if (svg.startsWith('data:image/svg+xml,')) {
+    svg = decodeURIComponent(svg.slice('data:image/svg+xml,'.length));
+  }
+  if (color) {
+    svg = svg.replace(/\bcurrentColor\b/gi, color);
+  }
+  svg = svg.replace(/^(<svg\b)/i, `$1 ${extraAttrs}`);
+  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`;
+}

package/dist/icons/menu.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none"
+>
+    <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/icons/person.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 20 20" 
+      fill="none"
+    >
+    <path d="M13.0151 9.27363C14.2948 8.34031 15.1282 6.82984 15.1282 5.1282C15.1282 2.30051 12.8277 0 9.99998 0C7.17228 0 4.87177 2.30051 4.87177 5.1282C4.87177 6.82984 5.70509 8.34031 6.98486 9.27363C3.80361 10.491 1.53845 13.5754 1.53845 17.1795C1.53845 18.7347 2.80373 20 4.35896 20H15.641C17.1962 20 18.4615 18.7347 18.4615 17.1795C18.4615 13.5754 16.1963 10.491 13.0151 9.27363ZM6.41025 5.1282C6.41025 3.14883 8.0206 1.53848 9.99998 1.53848C11.9794 1.53848 13.5897 3.14883 13.5897 5.1282C13.5897 7.10758 11.9794 8.71797 9.99998 8.71797C8.0206 8.71797 6.41025 7.10758 6.41025 5.1282ZM15.641 18.4615H4.35896C3.65205 18.4615 3.07693 17.8864 3.07693 17.1795C3.07693 13.362 6.18255 10.2564 10 10.2564C13.8175 10.2564 16.9231 13.362 16.9231 17.1795C16.9231 17.8864 16.3479 18.4615 15.641 18.4615Z" fill="currentColor"/>
+  </svg>

package/dist/icons/personInCircle.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 64 64" 
+    fill="none"
+  >
+    <path d="M32.0007 58.6666C46.7282 58.6666 58.6673 46.7275 58.6673 31.9999C58.6673 17.2723 46.7282 5.33325 32.0007 5.33325C17.2731 5.33325 5.33398 17.2723 5.33398 31.9999C5.33398 46.7275 17.2731 58.6666 32.0007 58.6666Z" stroke="currentColor" stroke-width="5.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M32 34.6667C36.4183 34.6667 40 31.085 40 26.6667C40 22.2485 36.4183 18.6667 32 18.6667C27.5817 18.6667 24 22.2485 24 26.6667C24 31.085 27.5817 34.6667 32 34.6667Z" stroke="currentColor" stroke-width="5.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M18.666 55.0986V50.6666C18.666 49.2521 19.2279 47.8955 20.2281 46.8954C21.2283 45.8952 22.5849 45.3333 23.9993 45.3333H39.9993C41.4138 45.3333 42.7704 45.8952 43.7706 46.8954C44.7708 47.8955 45.3327 49.2521 45.3327 50.6666V55.0986" stroke="currentColor" stroke-width="5.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/icons/sharing.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 20 20" 
+    fill="none"
+>
+    <path d="M15 6.66675C16.3807 6.66675 17.5 5.54746 17.5 4.16675C17.5 2.78604 16.3807 1.66675 15 1.66675C13.6193 1.66675 12.5 2.78604 12.5 4.16675C12.5 5.54746 13.6193 6.66675 15 6.66675Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5 12.5C6.38071 12.5 7.5 11.3807 7.5 10C7.5 8.61929 6.38071 7.5 5 7.5C3.61929 7.5 2.5 8.61929 2.5 10C2.5 11.3807 3.61929 12.5 5 12.5Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M15 18.3333C16.3807 18.3333 17.5 17.214 17.5 15.8333C17.5 14.4525 16.3807 13.3333 15 13.3333C13.6193 13.3333 12.5 14.4525 12.5 15.8333C12.5 17.214 13.6193 18.3333 15 18.3333Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.1582 11.2583L12.8499 14.575" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12.8415 5.42505L7.1582 8.74172" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>

package/dist/icons/signOut.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 20 20" 
+    fill="none"
+  >
+    <path d="M13.3334 14.1667L17.5 10L13.3334 5.83337" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M17.5 10H7.5" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.5 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V4.16667C2.5 3.72464 2.67559 3.30072 2.98816 2.98816C3.30072 2.67559 3.72464 2.5 4.16667 2.5H7.5" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>

package/dist/icons/signUp.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
+    class="lucide lucide-square-arrow-right-enter-icon lucide-square-arrow-right-enter">
+    
+    <path d="m10 16 4-4-4-4"/>
+    <path d="M3 12h11"/>
+    <path d="M3 8V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3"/>
+</svg>

package/dist/icons/star.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.60306 1.91274C9.63958 1.83895 9.696 1.77685 9.76594 1.73342C9.83588 1.69 9.91657 1.66699 9.9989 1.66699C10.0812 1.66699 10.1619 1.69 10.2319 1.73342C10.3018 1.77685 10.3582 1.83895 10.3947 1.91274L12.3197 5.8119C12.4465 6.06854 12.6337 6.29058 12.8653 6.45895C13.0968 6.62732 13.3657 6.737 13.6489 6.77857L17.9539 7.40857C18.0355 7.42039 18.1121 7.4548 18.1751 7.5079C18.2382 7.56101 18.2851 7.63069 18.3106 7.70908C18.3361 7.78746 18.3391 7.87141 18.3194 7.95143C18.2996 8.03146 18.2579 8.10436 18.1989 8.1619L15.0856 11.1936C14.8802 11.3937 14.7266 11.6406 14.6379 11.9133C14.5492 12.1859 14.5281 12.476 14.5764 12.7586L15.3114 17.0419C15.3258 17.1234 15.317 17.2074 15.286 17.2841C15.255 17.3609 15.203 17.4274 15.136 17.4761C15.069 17.5247 14.9897 17.5536 14.9071 17.5593C14.8245 17.5651 14.742 17.5475 14.6689 17.5086L10.8206 15.4852C10.567 15.3521 10.2849 15.2825 9.99848 15.2825C9.71208 15.2825 9.42996 15.3521 9.1764 15.4852L5.3289 17.5086C5.25584 17.5472 5.17339 17.5646 5.09094 17.5588C5.00848 17.5529 4.92933 17.524 4.86247 17.4754C4.79562 17.4268 4.74376 17.3604 4.71278 17.2838C4.6818 17.2071 4.67294 17.1233 4.68723 17.0419L5.4214 12.7594C5.46989 12.4767 5.44888 12.1864 5.36018 11.9136C5.27147 11.6408 5.11774 11.3937 4.91223 11.1936L1.7989 8.16274C1.73939 8.10526 1.69722 8.03223 1.6772 7.95197C1.65717 7.8717 1.66009 7.78742 1.68563 7.70873C1.71116 7.63004 1.75828 7.56011 1.82163 7.50689C1.88497 7.45367 1.96198 7.41932 2.0439 7.40774L6.34806 6.77857C6.63161 6.73732 6.90089 6.62778 7.13272 6.45939C7.36455 6.291 7.55198 6.0688 7.6789 5.8119L9.60306 1.91274Z" stroke="#314158" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/imagePane.css

@@ -0,0 +1,4 @@
+.image-pane__image {
+  max-width: 100%;
+  max-height: 100%;
+}

package/dist/imagePane.d.ts

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

package/dist/imagePane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagePane.d.ts","sourceRoot":"","sources":["../src/imagePane.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,iBAAiB,CAAA;AAWxB,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,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;AAuBD,eAAO,MAAM,SAAS,EAAE,SA+CvB,CAAA"}

package/dist/imagePane.js

@@ -5,12 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.imagePane = void 0;
 var UI = _interopRequireWildcard(require("solid-ui"));
+require("./imagePane.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); }
 /*   Image Pane
  **
  **  This outline pane contains the document contents for an Image document
  */
 
+function contentTypeMatch(store, subject, contentTypes) {
+  const contentTypesForSubject = store.fetcher.getHeader(subject, 'content-type');
+  if (!contentTypesForSubject) {
+    return false;
+  }
+  for (const contentType of contentTypesForSubject) {
+    for (const candidate of contentTypes) {
+      if (contentType.includes(candidate)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
 const imagePane = exports.imagePane = {
   icon: UI.icons.originalIconBase + 'tango/22-image-x-generic.png',
   name: 'image',
@@ -23,19 +38,6 @@ const imagePane = exports.imagePane = {
 
     //   See also the source pane, which has lower precedence.
 
-    const contentTypeMatch = function (store, x, contentTypes) {
-      const cts = store.fetcher.getHeader(x, 'content-type');
-      if (cts) {
-        for (let j = 0; j < cts.length; j++) {
-          for (let k = 0; k < contentTypes.length; k++) {
-            if (cts[j].indexOf(contentTypes[k]) >= 0) {
-              return true;
-            }
-          }
-        }
-      }
-      return false;
-    };
     const suppressed = ['application/pdf'];
     if (contentTypeMatch(store, subject, suppressed)) {
       return null;
@@ -46,8 +48,8 @@ const imagePane = exports.imagePane = {
     const myDocument = context.dom;
     const store = context.session.store;
     const div = myDocument.createElement('div');
-    div.setAttribute('class', 'imageView');
-    const img = myDocument.createElement('IMG');
+    div.setAttribute('class', 'image-pane');
+    const img = myDocument.createElement('img');
 
     // get image with authenticated fetch
     store.fetcher._fetch(subject.uri).then(function (response) {
@@ -56,12 +58,8 @@ const imagePane = exports.imagePane = {
       const objectURL = URL.createObjectURL(myBlob);
       img.setAttribute('src', objectURL); // w640 h480 //
     });
-    img.setAttribute('style', 'max-width: 100%; max-height: 100%;');
-    //        div.style['max-width'] = '640'
-    //        div.style['max-height'] = '480'
-    const tr = myDocument.createElement('TR'); // why need tr?
-    tr.appendChild(img);
-    div.appendChild(tr);
+    img.classList.add('image-pane__image');
+    div.appendChild(img);
     return div;
   }
 };

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import versionInfo from './versionInfo';
 import * as UI from 'solid-ui';
 import OutlineManager from './outline/manager.js';
-import { list, paneForIcon, paneForPredicate, register, byName } from 'pane-registry';
-import initMainPage from './mainPage';
-declare function getOutliner(dom: any): any;
-export { OutlineManager, getOutliner, UI, versionInfo, initMainPage, list, // from paneRegistry
+import { list, paneForIcon, paneForPredicate, register, byName, RenderEnvironment } from 'pane-registry';
+import { initMainPage, refreshUI } from './mainPage';
+declare function getOutliner(dom: any, environment?: RenderEnvironment): OutlineManager;
+declare function updateEnvironment(outliner: OutlineManager, environment: RenderEnvironment): void;
+export { OutlineManager, getOutliner, updateEnvironment, UI, versionInfo, initMainPage, refreshUI, list, // from paneRegistry
 paneForIcon, // from paneRegistry
 paneForPredicate, // from paneRegistry
 register, // from paneRegistry

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,KAAK,EAAE,MAAM,UAAU,CAAA;AAG9B,OAAO,cAAc,MAAM,sBAAsB,CAAA;AAEjD,OAAO,EACL,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACP,MAAM,eAAe,CAAA;AAEtB,OAAO,YAAY,MAAM,YAAY,CAAA;AAErC,iBAAS,WAAW,CAAE,GAAG,KAAA,OAWxB;AAaD,OAAO,EACL,cAAc,EACd,WAAW,EACX,EAAE,EACF,WAAW,EACX,YAAY,EACZ,IAAI,EAAE,oBAAoB;AAC1B,WAAW,EAAE,oBAAoB;AACjC,gBAAgB,EAAE,oBAAoB;AACtC,QAAQ,EAAE,oBAAoB;AAC9B,MAAM,EACP,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,KAAK,EAAE,MAAM,UAAU,CAAA;AAG9B,OAAO,cAAc,MAAM,sBAAsB,CAAA;AAEjD,OAAO,EACL,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,iBAAiB,EAClB,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAEpD,iBAAS,WAAW,CAAE,GAAG,KAAA,EAAE,WAAW,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAe1E;AAED,iBAAS,iBAAiB,CAAE,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,QAInF;AAaD,OAAO,EACL,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,EAAE,EACF,WAAW,EACX,YAAY,EACZ,SAAS,EACT,IAAI,EAAE,oBAAoB;AAC1B,WAAW,EAAE,oBAAoB;AACjC,gBAAgB,EAAE,oBAAoB;AACtC,QAAQ,EAAE,oBAAoB;AAC9B,MAAM,EACP,CAAA"}

package/dist/index.js

@@ -20,7 +20,7 @@ exports.getOutliner = getOutliner;
 Object.defineProperty(exports, "initMainPage", {
   enumerable: true,
   get: function () {
-    return _mainPage.default;
+    return _mainPage.initMainPage;
   }
 });
 Object.defineProperty(exports, "list", {
@@ -41,12 +41,19 @@ Object.defineProperty(exports, "paneForPredicate", {
     return _paneRegistry.paneForPredicate;
   }
 });
+Object.defineProperty(exports, "refreshUI", {
+  enumerable: true,
+  get: function () {
+    return _mainPage.refreshUI;
+  }
+});
 Object.defineProperty(exports, "register", {
   enumerable: true,
   get: function () {
     return _paneRegistry.register;
   }
 });
+exports.updateEnvironment = updateEnvironment;
 Object.defineProperty(exports, "versionInfo", {
   enumerable: true,
   get: function () {
@@ -61,7 +68,7 @@ var _manager = _interopRequireDefault(require("./outline/manager.js"));
 var _registerPanes = require("./registerPanes.js");
 var _paneRegistry = require("pane-registry");
 var _context = require("./outline/context");
-var _mainPage = _interopRequireDefault(require("./mainPage"));
+var _mainPage = require("./mainPage");
 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); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*                            SOLID PANES
@@ -76,7 +83,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  ** If it is relevant, then it returns a suitable tooltip for a control which selects the pane
  */
 
-function getOutliner(dom) {
+function getOutliner(dom, environment) {
   if (!dom.outlineManager) {
     const context = (0, _context.createContext)(dom, {
       list: _paneRegistry.list,
@@ -84,11 +91,19 @@ function getOutliner(dom) {
       paneForPredicate: _paneRegistry.paneForPredicate,
       register: _paneRegistry.register,
       byName: _paneRegistry.byName
-    }, _solidLogic.store, _solidLogic.solidLogicSingleton);
+    }, _solidLogic.store, _solidLogic.solidLogicSingleton, environment);
     dom.outlineManager = new _manager.default(context);
+  } else if (environment) {
+    dom.outlineManager.context = dom.outlineManager.context || {};
+    dom.outlineManager.context.environment = environment;
   }
   return dom.outlineManager;
 }
+function updateEnvironment(outliner, environment) {
+  if (!outliner) return;
+  outliner.context = outliner.context || {};
+  outliner.context.environment = environment;
+}
 if (typeof window !== 'undefined') {
   getOutliner(window.document);
 }

package/dist/internal/internalPane.css

@@ -0,0 +1,14 @@
+.internalPaneContent {
+  background-color: #ddddff;
+  padding: var(--spacing-xs, 0.5em);
+  border-radius: 1rem;
+}
+
+.internalPaneControls {
+  width: 100%;
+  margin: var(--spacing-sm, 1em);
+}
+
+.internalPaneDeleteButton {
+  height: var(--icon-base, 2em);
+}

package/dist/internal/internalPane.d.ts

@@ -1,4 +1,5 @@
 import { PaneDefinition } from 'pane-registry';
+import './internalPane.css';
 declare const pane: PaneDefinition;
 export default pane;
 //# sourceMappingURL=internalPane.d.ts.map

package/dist/internal/internalPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internalPane.d.ts","sourceRoot":"","sources":["../../src/internal/internalPane.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,QAAA,MAAM,IAAI,EAAE,cAwOX,CAAA;AAiBD,eAAe,IAAI,CAAA"}
+{"version":3,"file":"internalPane.d.ts","sourceRoot":"","sources":["../../src/internal/internalPane.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,oBAAoB,CAAA;AAE3B,QAAA,MAAM,IAAI,EAAE,cAqOX,CAAA;AAiBD,eAAe,IAAI,CAAA"}

package/dist/internal/internalPane.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _solidUi = require("solid-ui");
 var _rdflib = require("rdflib");
+require("./internalPane.css");
 /*   Internal Pane
  **
  **  This outline pane contains the properties which are
@@ -21,6 +22,7 @@ const pane = {
   },
   render: function (subject, context) {
     const dom = context.dom;
+    // @ts-ignore
     const store = context.session.store;
     const canonizedSubject = store.canon(subject);
     const types = store.findTypeURIs(canonizedSubject);
@@ -30,8 +32,7 @@ const pane = {
       return view && view.predicates && !!(typeof view.predicates[pred.uri] !== 'undefined');
     }
     const div = dom.createElement('div');
-    div.setAttribute('class', 'internalPane');
-    div.setAttribute('style', 'background-color: #ddddff; padding: 0.5em; border-radius: 1em;');
+    div.classList.add('internalPane', 'internalPaneContent');
     function deleteRecursive(kb, folder) {
       const fetcher = kb.fetcher;
       if (!fetcher) {
@@ -69,8 +70,7 @@ const pane = {
     const isDocument = subject.uri && !subject.uri.includes('#');
     if (isDocument) {
       const controls = div.appendChild(dom.createElement('table'));
-      controls.style.width = '100%';
-      controls.style.margin = '1em';
+      controls.classList.add('internalPaneControls');
       const controlRow = controls.appendChild(dom.createElement('tr'));
       const deleteCell = controlRow.appendChild(dom.createElement('td'));
       const isFolder = subject.uri && subject.uri.endsWith('/') || store.holds(subject, _solidUi.ns.rdf('type'), _solidUi.ns.ldp('Container'));
@@ -95,8 +95,8 @@ const pane = {
             alert(str);
           });
         });
-        deleteButton.style = 'height: 2em;';
-        deleteButton.class = ''; // Remove hover hide
+        deleteButton.removeAttribute('class'); // Remove hover hide
+        deleteButton.classList.add('internalPaneDeleteButton');
         deleteCell.appendChild(deleteButton);
       }
       const refreshCell = controlRow.appendChild(dom.createElement('td'));

package/dist/mainPage/footer.d.ts

@@ -1,3 +1,15 @@
-import { LiveStore } from 'rdflib';
-export declare function createFooter(store: LiveStore): void;
+import 'solid-ui/components/footer';
+import type { LiveStore } from 'rdflib';
+declare module 'solid-ui/components/footer';
+import 'solid-ui/components/footer';
+type FooterElement = HTMLElement & {
+    store?: LiveStore | null;
+    position?: 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky';
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+};
+export declare function createFooter(store: LiveStore): FooterElement;
+export {};
 //# sourceMappingURL=footer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/mainPage/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AASlC,wBAAgB,YAAY,CAAE,KAAK,EAAE,SAAS,QAE7C"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/mainPage/footer.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,QAAQ,4BAA4B,CAAA;AAC3C,OAAO,4BAA4B,CAAA;AAEnC,KAAK,aAAa,GAAG,WAAW,GAAG;IACjC,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;IAClE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,YAAY,CAAE,KAAK,EAAE,SAAS,iBAuB7C"}