solid-panes 4.4.0 → 4.4.1

package/dist/form/pane.js

@@ -7,6 +7,7 @@ exports.formPane = void 0;
 var UI = _interopRequireWildcard(require("solid-ui"));
 var _solidLogic = require("solid-logic");
 var $rdf = _interopRequireWildcard(require("rdflib"));
+require("./formPane.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); }
 /*
  **             Pane for running existing forms for any object
@@ -14,12 +15,63 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 const ns = UI.ns;
+function isNamedNode(term) {
+  return term?.termType === 'NamedNode';
+}
+
+/* The following helper was generated by AI GPT-5.4 Model  */
+/* Prompt: Add a compatibility shim in the form pane for mixed `ui:Group` plus field typing. */
+function normalizeAmbiguousFieldTypes(store, form) {
+  const formDoc = form.doc ? form.doc() : undefined;
+  const types = store.each(form, ns.rdf('type'), undefined, formDoc).filter(isNamedNode);
+  const hasGroupType = types.some(type => type.sameTerm(ns.ui('Group')));
+  const hasOtherFieldType = types.some(type => !type.sameTerm(ns.ui('Group')) && !type.sameTerm(ns.ui('Form')));
+  const hasProperty = !!store.any(form, ns.ui('property'), undefined, formDoc);
+  const partsList = store.any(form, ns.ui('parts'), undefined, formDoc);
+  const hasParts = !!partsList?.elements?.length || store.each(form, ns.ui('part'), undefined, formDoc).length > 0;
+
+  // Some legacy forms mark a leaf field as both ui:Group and a concrete input type.
+  // solid-ui may then choose the Group renderer and produce an empty nested box.
+  if (hasGroupType && hasOtherFieldType && hasProperty && !hasParts) {
+    store.removeMany(form, ns.rdf('type'), ns.ui('Group'), formDoc);
+  }
+  const listParts = partsList?.elements ?? [];
+  for (const part of listParts) {
+    if (isNamedNode(part)) {
+      normalizeAmbiguousFieldTypes(store, part);
+    }
+  }
+  const unorderedParts = store.each(form, ns.ui('part'), undefined, formDoc);
+  for (const part of unorderedParts) {
+    if (isNamedNode(part)) {
+      normalizeAmbiguousFieldTypes(store, part);
+    }
+  }
+}
+function tagMobileTextareaRows(renderedForm) {
+  const textareas = Array.from(renderedForm.querySelectorAll('textarea'));
+  for (const textarea of textareas) {
+    let row = textarea.parentElement;
+    while (row) {
+      const firstChild = row.firstElementChild;
+      const hasLabelColumn = !!firstChild && (firstChild.classList.contains('formFieldName') || firstChild.querySelector('a') !== null);
+      if (hasLabelColumn && row.children.length >= 2) {
+        row.classList.add('formPane__mobileTextareaRow');
+        firstChild.classList.add('formPane__mobileTextareaLabel');
+        const valueColumn = row.children[1];
+        valueColumn.classList.add('formPane__mobileTextareaValue');
+        break;
+      }
+      row = row.parentElement;
+    }
+  }
+}
 const formPane = exports.formPane = {
   icon: UI.icons.iconBase + 'noun_122196.svg',
   name: 'form',
   audience: [ns.solid('PowerUser')],
   // Does the subject deserve this pane?
-  label: function (subject) {
+  label: function (subject, _context) {
     const n = UI.widgets.formsFor(subject).length;
     UI.log.debug('Form pane: forms for ' + subject + ': ' + n);
     if (!n) return null;
@@ -28,14 +80,21 @@ const formPane = exports.formPane = {
   render: function (subject, context) {
     const kb = context.session.store;
     const dom = context.dom;
-    const mention = function complain(message, style) {
+    const box = dom.createElement('div');
+    box.setAttribute('class', 'formPane');
+    function applyEnvironmentAttributes(element) {
+      const environment = context.environment ?? {};
+      element.dataset.layout = environment.layout ?? 'desktop';
+    }
+    applyEnvironmentAttributes(box);
+    const mention = function (message, modifier = 'info') {
       const pre = dom.createElement('p');
-      pre.setAttribute('style', style || 'color: grey; background-color: white');
+      pre.className = `formPane__message formPane__message--${modifier}`;
       box.appendChild(pre).textContent = message;
       return pre;
     };
-    const complain = function complain(message, style) {
-      mention(message, 'style', style || 'color: grey; background-color: #fdd;');
+    const complain = function (message) {
+      return mention(message, 'error');
     };
     const complainIfBad = function (ok, body) {
       if (ok) {
@@ -51,8 +110,6 @@ const formPane = exports.formPane = {
     // const t = kb.findTypeURIs(subject)
 
     const me = _solidLogic.authn.currentUser();
-    const box = dom.createElement('div');
-    box.setAttribute('class', 'formPane');
     if (!me) {
       mention('You are not logged in. If you log in and have ' + 'workspaces then you would be able to select workspace in which ' + 'to put this new information');
     } else {
@@ -66,30 +123,33 @@ const formPane = exports.formPane = {
 
     // Render forms using a given store
 
-    const renderFormsFor = function (store, subject) {
-      kb.fetcher.nowOrWhenFetched(store.uri, subject, function (ok, body) {
-        if (!ok) return complain('Cannot load store ' + store.uri + ': ' + body);
+    const renderFormsFor = function (storeNode, targetSubject) {
+      kb.fetcher.nowOrWhenFetched(storeNode.uri, targetSubject, function (ok, body) {
+        if (!ok) return complain('Cannot load store ' + storeNode.uri + ': ' + body);
 
         //              Render the forms
 
-        const forms = UI.widgets.formsFor(subject);
+        const forms = UI.widgets.formsFor(targetSubject);
 
         // complain('Form for editing this form:');
-        for (let i = 0; i < forms.length; i++) {
-          const form = forms[i];
+        for (const form of forms) {
+          normalizeAmbiguousFieldTypes(kb, form);
           const heading = dom.createElement('h4');
+          heading.classList.add('formPane__heading');
           box.appendChild(heading);
+          /* The edit Form is not working in the local environment. it does not find
+          the ui FormForm ontology. Need to research further and check in production. */
           if (form.uri) {
             const formStore = $rdf.Util.uri.document(form.uri);
             if (formStore.uri !== form.uri) {
-              // The form is a hash-type URI
-              const e = box.appendChild(UI.widgets.editFormButton(dom, box, form, formStore, complainIfBad));
-              e.setAttribute('style', 'margin-left: auto; display: block;');
+              const editButton = box.appendChild(UI.widgets.editFormButton(dom, box, form, formStore, complainIfBad));
+              editButton.classList.add('formPane__editButton');
             }
           }
           const anchor = dom.createElement('a');
+          anchor.classList.add('formPane__headingLink');
           anchor.setAttribute('href', form.uri);
-          heading.appendChild(anchor);
+          heading.insertBefore(anchor, heading.firstChild);
           anchor.textContent = UI.utils.label(form, true);
 
           /*  Keep tis as a reminder to let a New one have its URI given by user
@@ -103,7 +163,8 @@ const formPane = exports.formPane = {
           ele.value = store.uri
           */
 
-          UI.widgets.appendForm(dom, box, {}, subject, form, store, complainIfBad);
+          UI.widgets.appendForm(dom, box, {}, targetSubject, form, storeNode, complainIfBad);
+          tagMobileTextareaRows(box);
         }
       }); // end: when store loded
     }; // renderFormsFor
@@ -112,64 +173,69 @@ const formPane = exports.formPane = {
 
     // Which places are editable and have stuff about the subject?
 
-    let store = null;
+    let targetStore = null;
 
     // 1. The document URI of the subject itself
     const docuri = $rdf.Util.uri.docpart(subject.uri);
-    if (subject.uri !== docuri && kb.updater.editable(docuri, kb)) {
-      store = subject.doc();
+    if (kb.updater.editable(docuri, kb)) {
+      targetStore = subject.doc();
     } // an editable data file with hash
 
-    store = store || kb.any(kb.sym(docuri), ns.link('annotationStore'));
+    const annotationStore = kb.any(kb.sym(docuri), ns.link('annotationStore'));
+    if (!targetStore && isNamedNode(annotationStore)) {
+      targetStore = annotationStore;
+    }
 
     // 2. where stuff is already stored
-    if (!store) {
-      const docs = {};
-      const docList = [];
-      store.statementsMatching(subject).forEach(function (st) {
-        docs[st.why.uri] = 1;
+    if (!targetStore) {
+      const docs = new Map();
+      kb.statementsMatching(subject).forEach(function (st) {
+        if (st.why.value) {
+          docs.set(st.why.value, 1);
+        }
       });
-      store.statementsMatching(undefined, undefined, subject).forEach(function (st) {
-        docs[st.why.uri] = 2;
+      kb.statementsMatching(undefined, undefined, subject).forEach(function (st) {
+        if (st.why.value) {
+          docs.set(st.why.value, 2);
+        }
+      });
+      const docList = Array.from(docs.entries()).sort(function ([uriA, scoreA], [uriB, scoreB]) {
+        return scoreA - scoreB || uriA.localeCompare(uriB);
       });
-      for (const d in docs) docList.push(docs[d], d);
-      docList.sort();
-      for (let i = 0; i < docList.length; i++) {
-        const uri = docList[i][1];
-        if (uri && store.updater.editable(uri)) {
-          store = store.sym(uri);
+      for (const [uri] of docList) {
+        if (uri && kb.updater.editable(uri, kb)) {
+          targetStore = kb.sym(uri);
           break;
         }
       }
     }
 
     // 3. In a workspace store
-    // @@ TODO: Can probably remove _followeach (not done this time because the commit is a very safe refactor)
-    const _followeach = function (kb, subject, path) {
-      if (path.length === 0) return [subject];
-      const oo = kb.each(subject, path[0]);
-      let res = [];
-      for (let i = 0; i < oo.length; i++) {
-        res = res.concat(_followeach(kb, oo[i], path.slice(1)));
-      }
-      return res;
-    };
     const date = '2014'; // @@@@@@@@@@@@ pass as parameter
 
-    if (store) {
+    if (targetStore) {
       // mention("@@ Ok, we have a store <" + store.uri + ">.");
-      renderFormsFor(store, subject);
+      renderFormsFor(targetStore, subject);
     } else {
       complain('No suitable store is known, to edit <' + subject.uri + '>.');
-      const foobarbaz = UI.login.selectWorkspace(dom, function (ws) {
-        mention('Workspace selected OK: ' + ws);
-        const activities = store.each(undefined, ns.space('workspace'), ws);
+      const workspaceDetails = {
+        noun: 'form',
+        appPathSegment: 'form'
+      };
+      const foobarbaz = UI.login.selectWorkspace(dom, workspaceDetails, function (workspaceUri) {
+        const workspace = workspaceUri ? kb.sym(workspaceUri) : null;
+        if (!workspace) {
+          complain('Workspace selection was cancelled.');
+          return;
+        }
+        mention('Workspace selected OK: ' + workspace.uri);
+        const activities = kb.each(undefined, ns.space('workspace'), workspace).filter(isNamedNode);
         for (let j = 0; j < activities.length; j++) {
           const act = activities[j];
-          const subjectDoc2 = store.any(ws, ns.space('store'));
-          const start = store.any(ws, ns.cal('dtstart')).value();
-          const end = store.any(ws, ns.cal('dtend')).value();
-          if (subjectDoc2 && start && end && start <= date && end > date) {
+          const subjectDoc2 = kb.any(act, ns.space('store'));
+          const start = kb.any(act, ns.cal('dtstart'))?.value;
+          const end = kb.any(act, ns.cal('dtend'))?.value;
+          if (isNamedNode(subjectDoc2) && start && end && start <= date && end > date) {
             renderFormsFor(subjectDoc2, subject);
             break;
           } else {

package/dist/humanReadablePane.css

@@ -0,0 +1,129 @@
+.human-readable-pane {
+  display: block;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.human-readable-pane__container {
+  display: block;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+
+.human-readable-pane__frame {
+  display: block;
+  border: 1px solid;
+  padding: 1rem;
+  height: var(--human-readable-pane-height, 30rem);
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  resize: both;
+  overflow: auto;
+}
+
+.human-readable-pane__frame--iframe {
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  min-height: 18rem;
+  background: var(--color-background, white);
+}
+
+.human-readable-pane__frame--markdown {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.human-readable-pane__frame--plain-text {
+  font-family: monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.human-readable-pane__frame--markdown > * {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.human-readable-pane__frame--markdown img,
+.human-readable-pane__frame--markdown video,
+.human-readable-pane__frame--markdown canvas,
+.human-readable-pane__frame--markdown iframe {
+  max-width: 100%;
+  height: auto;
+}
+
+.human-readable-pane__frame--markdown pre,
+.human-readable-pane__frame--markdown code {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.human-readable-pane__frame--markdown pre {
+  white-space: pre-wrap;
+}
+
+.human-readable-pane__frame--markdown table {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  box-sizing: border-box;
+}
+
+.human-readable-pane__frame--markdown th,
+.human-readable-pane__frame--markdown td {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.human-readable-pane[data-layout='mobile'] .human-readable-pane__frame {
+  padding: 0.75rem;
+  resize: none;
+  min-width: 0;
+}
+
+.human-readable-pane[data-layout='mobile'] .human-readable-pane__frame--markdown,
+.human-readable-pane[data-layout='mobile'] .human-readable-pane__frame--plain-text {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.human-readable-pane[data-layout='mobile'] .human-readable-pane__frame--iframe {
+  width: 100%;
+  max-width: 100%;
+  min-height: 16rem;
+  height: min(var(--human-readable-pane-height, 30rem), 75vh);
+}
+
+@media (max-width: 576px) {
+  .human-readable-pane__frame {
+    padding: 0.75rem;
+    resize: none;
+    min-width: 0;
+  }
+
+  .human-readable-pane__frame--markdown,
+  .human-readable-pane__frame--plain-text {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .human-readable-pane__frame--iframe {
+    width: 100%;
+    max-width: 100%;
+    min-height: 16rem;
+    height: min(var(--human-readable-pane-height, 30rem), 75vh);
+  }
+}

package/dist/humanReadablePane.d.ts

@@ -0,0 +1,13 @@
+import type { DataBrowserContext } from 'pane-registry';
+import type { NamedNode } from 'rdflib';
+import './humanReadablePane.css';
+type HumanReadableIcon = string | Promise<string>;
+type HumanReadablePaneDefinition = {
+    icon: (subject: NamedNode, context: DataBrowserContext) => HumanReadableIcon;
+    name: string;
+    label: (subject: NamedNode, context: DataBrowserContext) => 'view' | 'View' | null;
+    render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement;
+};
+declare const humanReadablePane: HumanReadablePaneDefinition;
+export default humanReadablePane;
+//# sourceMappingURL=humanReadablePane.d.ts.map

package/dist/humanReadablePane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"humanReadablePane.d.ts","sourceRoot":"","sources":["../src/humanReadablePane.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,yBAAyB,CAAA;AAKhC,KAAK,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;AAEjD,KAAK,2BAA2B,GAAG;IACjC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,iBAAiB,CAAA;IAC5E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAClF,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,cAAc,CAAA;CAC5E,CAAA;AAsBD,QAAA,MAAM,iBAAiB,EAAE,2BAuQxB,CAAA;AAED,eAAe,iBAAiB,CAAA"}

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,6 +139,10 @@ 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
 
@@ -144,19 +156,20 @@ const humanReadablePane = {
     }
 
     //  @@ When we can, use CSP to turn off scripts within the iframe
-    div.setAttribute('class', 'docView');
-    div.setAttribute('style', 'display: block; width: 100%; max-width: 100%; box-sizing: border-box;');
+    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', `display: block; border: 1px solid; padding: 1em; height: ${lines}em; max-width: 100%; width: 100%; box-sizing: border-box; resize: both; overflow: auto;`);
+        applyFrameClasses(frame, 'markdown', lines);
       }).catch(error => {
         console.error('Error fetching markdown content:', error);
         frame.innerHTML = '<p>Error loading content</p>';
@@ -166,11 +179,10 @@ const humanReadablePane = {
     // render plain text in a PRE element
     const renderPlainTextContent = function (frame) {
       kb.fetcher.webOperation('GET', subject.uri).then(response => {
-        const plainText = response.responseText;
+        const plainText = response.responseText ?? '';
         const lines = Math.min(30, plainText.split(/\n/).length + 5);
         frame.textContent = plainText;
-        frame.setAttribute('class', 'doc');
-        frame.setAttribute('style', `display: block; border: 1px solid; padding: 1em; height: ${lines}em; max-width: 100%; width: 100%; box-sizing: border-box; resize: both; overflow: auto; font-family: monospace; white-space: pre-wrap; word-wrap: break-word;`);
+        applyFrameClasses(frame, 'plain-text', lines);
       }).catch(error => {
         console.error('Error fetching plain text content:', error);
         frame.textContent = 'Error loading content';
@@ -178,28 +190,27 @@ const humanReadablePane = {
     };
     const setIframeAttributes = (frame, lines) => {
       frame.setAttribute('src', subject.uri);
-      frame.setAttribute('class', 'doc');
-      frame.setAttribute('style', `display: block; border: 1px solid; padding: 1em; height: ${lines}em; max-width: 100%; width: 100%; box-sizing: border-box; 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 frameContainer = myDocument.createElement('div');
-      frameContainer.setAttribute('style', 'display: block; width: 100%; max-width: 100%; box-sizing: border-box;');
+      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');
+      const frame = myDocument.createElement('pre');
       renderPlainTextContent(frame);
       const frameContainer = myDocument.createElement('div');
-      frameContainer.setAttribute('style', 'display: block; width: 100%; max-width: 100%; box-sizing: border-box;');
+      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') {
@@ -208,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);
 
@@ -222,7 +233,7 @@ const humanReadablePane = {
         setIframeAttributes(frame, 30);
       });
       const frameContainer = myDocument.createElement('div');
-      frameContainer.setAttribute('style', 'display: block; width: 100%; max-width: 100%; box-sizing: border-box;');
+      frameContainer.classList.add('human-readable-pane__container');
       frameContainer.appendChild(frame);
       div.appendChild(frameContainer);
     }

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/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/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);
+}