solid-panes 4.2.6 → 4.4.1-test.0

package/dist/defaultPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultPane.d.ts","sourceRoot":"","sources":["../src/defaultPane.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AACtE,OAAO,mBAAmB,CAAA;AAG1B,KAAK,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAEzD,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,EAAE,CAAA;IACrB,KAAK,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,MAAM,CAAA;IAC9C,MAAM,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,KAAK,cAAc,CAAA;CACrF,CAAA;AAcD,eAAO,MAAM,WAAW,EAAE,qBAqGzB,CAAA"}

package/dist/defaultPane.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultPane = void 0;
 var UI = _interopRequireWildcard(require("solid-ui"));
 var $rdf = _interopRequireWildcard(require("rdflib"));
+require("./defaultPane.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); }
 /*   Default Pane
  **
@@ -24,6 +25,10 @@ const defaultPane = exports.defaultPane = {
   },
   render: function (subject, context) {
     const dom = context.dom;
+    function applyEnvironmentAttributes(element) {
+      const environment = context.environment ?? {};
+      element.dataset.layout = environment.layout ?? 'desktop';
+    }
     const filter = function (pred, inverse) {
       if (typeof context.session.paneRegistry.byName('internal').predicates[pred.uri] !== 'undefined') {
         return false;
@@ -40,16 +45,18 @@ const defaultPane = exports.defaultPane = {
     subject = kb.canon(subject);
     const div = dom.createElement('div');
     div.setAttribute('class', 'defaultPane');
+    applyEnvironmentAttributes(div);
     //        appendRemoveIcon(div, subject, div)
 
-    let plist = kb.statementsMatching(subject);
+    let plist = subject.termType === 'Literal' ? [] : kb.statementsMatching(subject);
     outliner.appendPropertyTRs(div, plist, false, filter);
     plist = kb.statementsMatching(undefined, undefined, subject);
     outliner.appendPropertyTRs(div, plist, true, filter);
+    const subjectStatement = subject.termType === 'BlankNode' ? kb.anyStatementMatching(subject) : undefined;
     if (subject.termType === 'Literal' && subject.value.slice(0, 7) === 'http://') {
       outliner.appendPropertyTRs(div, [$rdf.st(kb.sym(subject.value), UI.ns.link('uri'), subject)], true, filter);
     }
-    if (subject.termType === 'NamedNode' && kb.updater.editable($rdf.Util.uri.docpart(subject.uri), kb) || subject.termType === 'BlankNode' && kb.anyStatementMatching(subject) && kb.anyStatementMatching(subject).why && kb.anyStatementMatching(subject).why.uri && kb.updater.editable(kb.anyStatementMatching(subject).why.uri)
+    if (subject.termType === 'NamedNode' && kb.updater.editable($rdf.Util.uri.docpart(subject.uri), kb) || subject.termType === 'BlankNode' && subjectStatement && subjectStatement.why && 'uri' in subjectStatement.why && typeof subjectStatement.why.uri === 'string' && kb.updater.editable(subjectStatement.why.uri)
     // check the document containing something about of the bnode @@ what about as object?
     /*  ! && HCIoptions["bottom insert highlights"].enabled  */) {
       const holdingTr = dom.createElement('tr'); // these are to minimize required changes

package/dist/form/formPane.css

@@ -0,0 +1,120 @@
+.formPane a {
+  color: var(--color-text-link, #3b5998);
+  text-decoration: none;
+}
+
+.formPane a:link {
+  color: var(--color-text-link, #3b5998);
+  text-decoration: none;
+}
+
+.formPane a:visited {
+  color: var(--color-text-link-visited, #3b5998);
+  text-decoration: none;
+}
+
+.formPane a:hover {
+  color: var(--color-text-link-hover, #3b5998);
+  font-weight: bold;
+}
+
+.formPane a:active {
+  color: var(--color-text-link-active, #888);
+  text-decoration: none;
+}
+
+.formPane__message,
+.formPaneMessage {
+  color: #666;
+  margin: var(--spacing-xs, 0.5em) 0;
+  padding: var(--spacing-xs, 0.35em) var(--spacing-xs, 0.5em);
+}
+
+.formPane__message--info {
+  background-color: var(--color-main-block-bg, #eee);
+}
+
+.formPane__message--error {
+  background-color: var(--color-log-error-bg, #fee);
+}
+
+.formPane__editButton {
+  margin-left: auto;
+  align-self: center;
+  padding: var(--spacing-xs, 0.5rem);
+  border: .5rem solid white;
+  font-size: 100%;
+  float: none;
+}
+
+.formPane .formPane__mobileTextareaValue > div {
+  display: block;
+  min-width: 0;
+  position: relative;
+}
+
+.formPane .formPane__mobileTextareaValue > div > textarea {
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+.formPane .formPane__mobileTextareaValue > div > button[type='button'] {
+  float: none !important;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.formPane[data-layout='mobile'] .formPane__mobileTextareaRow {
+  flex-direction: column !important;
+  align-items: stretch;
+}
+
+.formPane[data-layout='mobile'] .formPane__mobileTextareaLabel {
+  width: auto !important;
+  padding-bottom: 0;
+}
+
+.formPane[data-layout='mobile'] .formPane__mobileTextareaValue {
+  box-sizing: border-box;
+  min-width: 0;
+  padding-right: var(--spacing-sm, 0.75rem);
+  width: 100%;
+}
+
+.formPane[data-layout='mobile'] .formPane__mobileTextareaValue textarea {
+  box-sizing: border-box;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  max-width: 100%;
+  width: 100%;
+}
+
+@media (max-width: 960px) {
+  .formPane .formPane__mobileTextareaRow {
+    flex-direction: column !important;
+    align-items: stretch;
+  }
+
+  .formPane .formPane__mobileTextareaLabel {
+    width: auto !important;
+    padding-bottom: 0;
+  }
+
+  .formPane .formPane__mobileTextareaValue {
+    box-sizing: border-box;
+    min-width: 0;
+    padding-right: var(--spacing-sm, 0.75rem);
+    width: 100%;
+  }
+
+  .formPane .formPane__mobileTextareaValue textarea {
+    box-sizing: border-box;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    max-width: 100%;
+    width: 100%;
+  }
+}

package/dist/form/pane.d.ts

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

package/dist/form/pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.d.ts","sourceRoot":"","sources":["../../src/form/pane.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,eAAe,CAAA;AAGvE,OAAO,gBAAgB,CAAA;AAsEvB,eAAO,MAAM,QAAQ,EAAE,cAqOtB,CAAA"}

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', 'float: right;');
+              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/home/homePane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"homePane.d.ts","sourceRoot":"","sources":["../../src/home/homePane.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAM9C,QAAA,MAAM,cAAc,EAAE,cAoDrB,CAAA;AAGD,eAAe,cAAc,CAAA"}
+{"version":3,"file":"homePane.d.ts","sourceRoot":"","sources":["../../src/home/homePane.ts"],"names":[],"mappings":"AAUA,OAAO,EAAsB,cAAc,EAAE,MAAM,eAAe,CAAA;AAMlE,QAAA,MAAM,cAAc,EAAE,cAuDrB,CAAA;AAGD,eAAe,cAAc,CAAA"}

package/dist/home/homePane.js

@@ -29,6 +29,7 @@ const HomePaneSource = {
   label: function () {
     return 'home';
   },
+  audience: [_solidUi.ns.solid('PowerUser')],
   render: function (subject, context) {
     const dom = context.dom;
     const showContent = async function () {
@@ -56,6 +57,7 @@ const HomePaneSource = {
         me
       };
       const relevantPanes = await _solidUi.login.filterAvailablePanes(context.session.paneRegistry.list);
+      // @ts-ignore
       _solidUi.create.newThingUI(creationContext, context, relevantPanes); // newUI Have to pass panes down
 
       _solidUi.login.registrationList(homePaneContext, {}).then(function () {});

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"}