solid-panes 4.2.6 → 4.4.1-test.0

package/dist/dataContentPane.css

@@ -0,0 +1,271 @@
+.data-content-pane__literal {
+  white-space: pre-wrap;
+}
+
+div.data-content-pane {
+  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);
+  padding: var(--spacing-base, 0.5rem);
+  margin-top: var(--spacing-base, 0.5rem);
+  margin-bottom: var(--spacing-base, 0.5rem);
+}
+
+div.data-content-pane table.data-content-pane__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+div.data-content-pane table.data-content-pane__table--root {
+  table-layout: auto;
+}
+
+div.data-content-pane .data-content-pane__row--root {
+  display: flex;
+  align-items: flex-start;
+}
+
+div.data-content-pane .data-content-pane__row--root > td {
+  vertical-align: top;
+}
+
+div.data-content-pane .data-content-pane__subject-cell {
+  flex: 0 0 auto;
+  width: clamp(7rem, 12%, 10rem);
+  padding-right: 0.8rem;
+}
+
+div.data-content-pane .data-content-pane__details-cell {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+div.data-content-pane .data-content-pane__subject-cell,
+div.data-content-pane td.data-content-pane__predicate-cell,
+div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell),
+div.data-content-pane .data-content-pane__subject-cell a,
+div.data-content-pane td.data-content-pane__predicate-cell a,
+div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) a {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+div.data-content-pane table.data-content-pane__table--property {
+  table-layout: auto;
+  width: auto;
+  max-width: 100%;
+}
+
+.data-content-pane__nested-formula {
+  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);
+  padding: var(--spacing-base, 0.5rem);
+  border-radius: var(--border-radius-md, 0.5rem);
+}
+
+div.data-content-pane td {
+  padding-left: var(--spacing-xxxs, 0.2rem);
+  padding-top: var(--spacing-small, 0.1rem);
+  padding-right: var(--spacing-xxxs, 0.2rem);
+  padding-bottom: 0.05rem;
+  vertical-align: top;
+}
+
+div.data-content-pane table.data-content-pane__table--property td {
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+}
+
+div.data-content-pane tr {
+  margin-bottom: var(--spacing-2xs, 0.625rem);
+  padding-top: var(--spacing-small, 0.1rem);
+  padding-bottom: var(--spacing-small, 0.1rem);
+}
+
+.data-content-pane a {
+  color: var(--color-text-link, #3b5998);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.data-content-pane a:link {
+  color: var(--color-text-link, #3b5998);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.data-content-pane a:visited {
+  color: var(--color-text-link-visited, #3b5998);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.data-content-pane a:hover {
+  color: var(--color-text-link-hover, #3b5998);
+  text-decoration: underline;
+  font-weight: bold;
+}
+
+.data-content-pane a:active {
+  color: var(--color-text-link-active, #888);
+  text-decoration: none;
+}
+
+.data-content-pane.embeddedText {
+  white-space: pre-wrap;
+}
+
+div.data-content-pane td.data-content-pane__predicate-cell {
+  min-width: 8.5rem;
+  width: clamp(8.5rem, 18vw, 12rem);
+  max-width: 12rem;
+  padding-right: var(--spacing-base, 0.5rem);
+}
+
+div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) {
+  padding-left: var(--spacing-xxs, 0.3125rem);
+}
+
+div.data-content-pane td.data-content-pane__predicate-cell a {
+  color: var(--color-text-muted, #444);
+}
+
+.data-content-pane__row--even {
+  background-color: var(--color-background-row-alternate, #f0f0f0);
+}
+
+.data-content-pane__row--odd {
+  background-color: var(--color-background-row-default, white);
+}
+
+.data-content-pane__row--top-aligned {
+  vertical-align: top;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.data-content-pane__nested-table--light {
+  background-color: var(--color-background-row-default, white);
+}
+
+.data-content-pane__nested-table--dark {
+  background-color: var(--color-background-row-alternate, #f0f0f0);
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__row--root {
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: var(--spacing-xs, 0.75rem);
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__subject-cell {
+  flex: 0 0 40%;
+  width: 40%;
+  max-width: 40%;
+  box-sizing: border-box;
+  padding-right: var(--spacing-xs, 0.75rem);
+  padding-bottom: 0;
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__details-cell {
+  flex: 0 0 60%;
+  width: 60%;
+  max-width: 60%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tbody > tr,
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tr {
+  margin-bottom: 0;
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__row--top-aligned + .data-content-pane__row--top-aligned {
+  margin-top: 0;
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__row--top-aligned {
+  display: block;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property,
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tbody {
+  display: block;
+  width: 100%;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td.data-content-pane__predicate-cell {
+  width: 100%;
+  min-width: 0;
+  padding-bottom: 0.1rem;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td:not(.data-content-pane__predicate-cell) {
+  padding-top: 0;
+  padding-left: 0.85rem;
+}
+
+@media (max-width: 700px) {
+  div.data-content-pane .data-content-pane__row--root {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  div.data-content-pane .data-content-pane__subject-cell {
+    flex: 0 0 40%;
+    width: 40%;
+    max-width: 40%;
+    padding-right: var(--spacing-xs, 0.75rem);
+    padding-bottom: 0;
+    box-sizing: border-box;
+  }
+
+  div.data-content-pane .data-content-pane__details-cell {
+    flex: 0 0 60%;
+    width: 60%;
+    max-width: 60%;
+    box-sizing: border-box;
+  }
+
+  div.data-content-pane .data-content-pane__row--top-aligned {
+    display: block;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  div.data-content-pane .data-content-pane__row--top-aligned > td {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  div.data-content-pane .data-content-pane__row--top-aligned > td.data-content-pane__predicate-cell {
+    min-width: 0;
+    max-width: none;
+    width: 100%;
+    padding-bottom: var(--spacing-small, 0.1rem);
+  }
+
+  div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) {
+    padding-top: 0;
+    padding-left: 0.85rem;
+  }
+}

package/dist/dataContentPane.d.ts

@@ -0,0 +1,14 @@
+import type { DataBrowserContext } from 'pane-registry';
+import type { BlankNode, NamedNode, Statement } from 'rdflib';
+import './dataContentPane.css';
+type SubjectTerm = NamedNode | BlankNode;
+export declare const dataContentPane: {
+    icon: string;
+    name: string;
+    audience: any[];
+    label: (subject: NamedNode, context: DataBrowserContext) => string | null;
+    statementsAsTables: (sts: Statement[], context: DataBrowserContext, initialRoots?: SubjectTerm[]) => HTMLTableElement;
+    render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement;
+};
+export {};
+//# sourceMappingURL=dataContentPane.d.ts.map

package/dist/dataContentPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataContentPane.d.ts","sourceRoot":"","sources":["../src/dataContentPane.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,EACV,SAAS,EAET,SAAS,EACT,SAAS,EACV,MAAM,QAAQ,CAAA;AACf,OAAO,uBAAuB,CAAA;AAI9B,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AAiBxC,eAAO,MAAM,eAAe;;;;qBAOA,SAAS,WAAW,kBAAkB;8BAsBzD,SAAS,EAAE,WACP,kBAAkB,iBACZ,WAAW,EAAE,KAC3B,gBAAgB;sBA+LR,SAAS,WACT,kBAAkB,KAC1B,cAAc;CAoClB,CAAA"}

package/dist/dataContentPane.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.dataContentPane = void 0;
 var UI = _interopRequireWildcard(require("solid-ui"));
 var $rdf = _interopRequireWildcard(require("rdflib"));
+var _dompurify = _interopRequireDefault(require("dompurify"));
+require("./dataContentPane.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 /*      Data content Pane
  **
@@ -40,40 +43,40 @@ const dataContentPane = exports.dataContentPane = {
     const myDocument = context.dom;
     // const outliner = context.getOutliner(myDocument)
     const rep = myDocument.createElement('table');
+    rep.classList.add('data-content-pane__table', 'data-content-pane__table--root');
+    const isMobileLayout = context.environment?.layout === 'mobile';
     const sz = $rdf.Serializer(context.session.store);
     const res = sz.rootSubjects(sts);
     let roots = res.roots;
     const subjects = res.subjects;
-    const loopBreakers = res.loopBreakers;
+    const loopBreakers = res.loopBreakers ?? {};
     for (const x in loopBreakers) {
       console.log('\tdataContentPane: loopbreaker:' + x);
     }
-    const doneBnodes = {}; // For preventing looping
-    const referencedBnodes = {}; // Bnodes which need to be named alas
-
-    // The property tree for a single subject or anonymous node
-    function propertyTree(subject) {
-      // print('Proprty tree for '+subject)
+    const doneBnodes = {};
+    const referencedBnodes = {};
+    function propertyTree(subject, nestingLevel = 0) {
       const rep = myDocument.createElement('table');
+      rep.classList.add('data-content-pane__table', 'data-content-pane__table--property');
       let lastPred = null;
-      const sts = subjects[sz.toStr(subject)]; // relevant statements
-      if (!sts) {
-        // No statements in tree
-        rep.appendChild(myDocument.createTextNode('...')); // just empty bnode as object
+      const subjectStatements = subjects[sz.toStr(subject)];
+      if (!subjectStatements) {
+        rep.appendChild(myDocument.createTextNode('...'));
         return rep;
       }
-      sts.sort();
+      subjectStatements.sort();
       let same = 0;
-      let predicateTD; // The cell which holds the predicate
-      for (let i = 0; i < sts.length; i++) {
-        const st = sts[i];
+      let predicateTD;
+      for (let i = 0; i < subjectStatements.length; i++) {
+        const st = subjectStatements[i];
         const tr = myDocument.createElement('tr');
-        if (st.predicate.uri !== lastPred) {
-          if (lastPred && same > 1) {
-            predicateTD.setAttribute('rowspan', '' + same);
+        tr.classList.add('data-content-pane__row--top-aligned', 'data-content-pane__row--property');
+        if (st.predicate.uri !== lastPred || isMobileLayout) {
+          if (!isMobileLayout && lastPred && same > 1) {
+            predicateTD?.setAttribute('rowspan', '' + same);
           }
           predicateTD = myDocument.createElement('td');
-          predicateTD.setAttribute('class', 'pred');
+          predicateTD.setAttribute('class', 'data-content-pane__predicate-cell');
           const anchor = myDocument.createElement('a');
           anchor.setAttribute('href', st.predicate.uri);
           anchor.addEventListener('click', UI.widgets.openHrefInOutlineMode, true);
@@ -85,17 +88,19 @@ const dataContentPane = exports.dataContentPane = {
         }
         same++;
         const objectTD = myDocument.createElement('td');
-        objectTD.appendChild(objectTree(st.object));
+        objectTD.classList.add('data-content-pane__value-cell');
+        objectTD.appendChild(objectTree(st.object, nestingLevel + 1));
         tr.appendChild(objectTD);
         rep.appendChild(tr);
       }
-      if (lastPred && same > 1) predicateTD.setAttribute('rowspan', '' + same);
+      if (!isMobileLayout && lastPred && same > 1) {
+        predicateTD?.setAttribute('rowspan', '' + same);
+      }
       return rep;
     }
-
-    // Convert a set of statements into a nested tree of tables
-    function objectTree(obj) {
-      let res, anchor;
+    function objectTree(obj, nestingLevel = 0) {
+      let res;
+      let anchor;
       switch (obj.termType) {
         case 'NamedNode':
           anchor = myDocument.createElement('a');
@@ -106,36 +111,33 @@ const dataContentPane = exports.dataContentPane = {
         case 'Literal':
           if (!obj.datatype || !obj.datatype.uri) {
             res = myDocument.createElement('div');
-            res.setAttribute('style', 'white-space: pre-wrap;');
+            res.classList.add('data-content-pane__literal');
             res.textContent = obj.value;
             return res;
           } else if (obj.datatype.uri === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#XMLLiteral') {
             res = myDocument.createElement('div');
-            res.setAttribute('class', 'embeddedXHTML');
-            res.innerHTML = obj.value; // Try that  @@@ beware embedded dangerous code
+            res.classList.add('embeddedXHTML');
+            res.innerHTML = _dompurify.default.sanitize(obj.value);
             return res;
           }
           return myDocument.createTextNode(obj.value);
-        // placeholder - could be smarter,
-
         case 'BlankNode':
           {
             if (obj.toNT() in doneBnodes) {
-              // Break infinite recursion
               referencedBnodes[obj.toNT()] = true;
-              const anchor = myDocument.createElement('a');
-              anchor.setAttribute('href', '#' + obj.toNT().slice(2));
-              anchor.setAttribute('class', 'bnodeRef');
-              anchor.textContent = '*' + obj.toNT().slice(3);
-              return anchor;
+              const referenceAnchor = myDocument.createElement('a');
+              referenceAnchor.setAttribute('href', '#' + obj.toNT().slice(2));
+              referenceAnchor.setAttribute('class', 'bnodeRef');
+              referenceAnchor.textContent = '*' + obj.toNT().slice(3);
+              return referenceAnchor;
             }
-            doneBnodes[obj.toNT()] = true; // Flag to prevent infinite recursion in propertyTree
-            const newTable = propertyTree(obj);
-            doneBnodes[obj.toNT()] = newTable; // Track where we mentioned it first
-            if (UI.utils.ancestor(newTable, 'TABLE') && UI.utils.ancestor(newTable, 'TABLE').style.backgroundColor === 'white') {
-              newTable.style.backgroundColor = '#eee';
+            doneBnodes[obj.toNT()] = true;
+            const newTable = propertyTree(obj, nestingLevel);
+            doneBnodes[obj.toNT()] = newTable;
+            if (nestingLevel % 2 === 1) {
+              newTable.classList.add('data-content-pane__nested-table--light');
             } else {
-              newTable.style.backgroundColor = 'white';
+              newTable.classList.add('data-content-pane__nested-table--dark');
             }
             return newTable;
           }
@@ -145,26 +147,21 @@ const dataContentPane = exports.dataContentPane = {
           for (let i = 0; i < obj.elements.length; i++) {
             const tr = myDocument.createElement('tr');
             res.appendChild(tr);
-            tr.appendChild(objectTree(obj.elements[i]));
+            tr.appendChild(objectTree(obj.elements[i], nestingLevel + 1));
           }
           return res;
         case 'Graph':
           res = context.session.paneRegistry.byName('dataContents').statementsAsTables(obj.statements, context);
-          res.setAttribute('class', 'nestedFormula');
+          res.setAttribute('class', 'data-content-pane__nested-formula');
           return res;
         case 'Variable':
-          res = myDocument.createTextNode('?' + obj.uri);
-          return res;
+          return myDocument.createTextNode('?' + obj.uri);
       }
       throw new Error('Unhandled node type: ' + obj.termType);
     }
-
-    // roots.sort()
-
     if (initialRoots) {
       roots = initialRoots.concat(roots.filter(function (x) {
         for (let i = 0; i < initialRoots.length; i++) {
-          // Max 2
           if (x.sameTerm(initialRoots[i])) return false;
         }
         return true;
@@ -172,24 +169,25 @@ const dataContentPane = exports.dataContentPane = {
     }
     for (let i = 0; i < roots.length; i++) {
       const tr = myDocument.createElement('tr');
-      tr.setAttribute('style', `background-color: ${i % 2 === 0 ? '#f0f0f0' : 'white'};`);
+      tr.classList.add(i % 2 === 0 ? 'data-content-pane__row--even' : 'data-content-pane__row--odd', 'data-content-pane__row--root');
       rep.appendChild(tr);
       const subjectTD = myDocument.createElement('td');
+      subjectTD.classList.add('data-content-pane__subject-cell');
       tr.appendChild(subjectTD);
       const TDTree = myDocument.createElement('td');
+      TDTree.classList.add('data-content-pane__details-cell');
       tr.appendChild(TDTree);
       const root = roots[i];
       if (root.termType === 'BlankNode') {
-        subjectTD.appendChild(myDocument.createTextNode(UI.utils.label(root))); // Don't recurse!
+        subjectTD.appendChild(myDocument.createTextNode(UI.utils.label(root)));
       } else {
-        subjectTD.appendChild(objectTree(root)); // won't have tree
+        subjectTD.appendChild(objectTree(root, 0));
       }
-      TDTree.appendChild(propertyTree(root));
+      TDTree.appendChild(propertyTree(root, 0));
     }
     for (const bNT in referencedBnodes) {
-      // Add number to refer to
       const table = doneBnodes[bNT];
-      // let tr = myDocument.createElement('tr')
+      if (table === true) continue;
       const anchor = myDocument.createElement('a');
       anchor.setAttribute('id', bNT.slice(2));
       anchor.setAttribute('class', 'bnodeDef');
@@ -198,62 +196,31 @@ const dataContentPane = exports.dataContentPane = {
     }
     return rep;
   },
-  // statementsAsTables
-  // View the data in a file in user-friendly way
   render: function (subject, context) {
     const myDocument = context.dom;
-    function alternativeRendering() {
-      const sz = $rdf.Serializer(context.session.store);
-      const res = sz.rootSubjects(sts);
-      const roots = res.roots;
-      const p = {};
-      p.render = function (s2) {
-        const div = myDocument.createElement('div');
-        div.setAttribute('class', 'withinDocumentPane');
-        const plist = kb.statementsMatching(s2, undefined, undefined, subject);
-        outliner.appendPropertyTRs(div, plist, false, function (_pred, _inverse) {
-          return true;
-        });
-        return div;
-      };
-      for (let i = 0; i < roots.length; i++) {
-        const tr = myDocument.createElement('TR');
-        const root = roots[i];
-        tr.style.verticalAlign = 'top';
-        const td = outliner.outlineObjectTD(root, undefined, tr);
-        tr.appendChild(td);
-        div.appendChild(tr);
-        outliner.outlineExpand(td, root, {
-          pane: p
-        });
-      }
+    function applyEnvironmentAttributes(element) {
+      const environment = context.environment ?? {};
+      element.dataset.layout = environment.layout ?? 'desktop';
+      element.dataset.theme = environment.theme ?? 'light';
+      element.dataset.inputMode = environment.inputMode ?? 'pointer';
     }
     function mainRendering() {
-      const initialRoots = []; // Ordering: start with stuff about this doc
+      const kb = context.session.store;
+      const sts = kb.statementsMatching(undefined, undefined, undefined, subject);
+      const initialRoots = [];
       if (kb.holds(subject, undefined, undefined, subject)) {
         initialRoots.push(subject);
       }
-      // Then about the primary topic of the document if any
       const ps = kb.any(subject, UI.ns.foaf('primaryTopic'), undefined, subject);
-      if (ps) initialRoots.push(ps);
+      if (ps && (ps.termType === 'NamedNode' || ps.termType === 'BlankNode')) {
+        initialRoots.push(ps);
+      }
       div.appendChild(context.session.paneRegistry.byName('dataContents').statementsAsTables(sts, context, initialRoots));
     }
-    const outliner = context.getOutliner(myDocument);
-    const kb = context.session.store;
     const div = myDocument.createElement('div');
-    div.setAttribute('class', 'dataContentPane');
-    // 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.
-    const sts = kb.statementsMatching(undefined, undefined, undefined, subject); // @@ slow with current store!
-
-    // eslint-disable-next-line no-constant-condition
-    if (false) {
-      // keep code
-      alternativeRendering();
-    } else {
-      mainRendering();
-    }
+    div.classList.add('dataContentPane', 'data-content-pane');
+    applyEnvironmentAttributes(div);
+    mainRendering();
     return div;
   }
 };

package/dist/defaultPane.css

@@ -0,0 +1,97 @@
+.defaultPane .bottom-border {
+	border: 0.2rem solid transparent;
+	width: 100%;
+}
+
+.defaultPane .bottom-border-active {
+	cursor: copy;
+	border: 0.2rem solid;
+	border-color: var(--color-bottom-border-highlight, rgb(100%, 65%, 0%));
+}
+
+.defaultPane {
+	--default-pane-predicate-column: 16rem;
+	--default-pane-object-indent: 1.75rem;
+}
+
+.defaultPane > tr {
+	display: grid;
+	grid-template-columns: minmax(0, var(--default-pane-predicate-column)) minmax(0, 1fr);
+	align-items: flex-start;
+}
+
+.defaultPane > tr > td.pred {
+	grid-column: 1;
+	display: flex;
+	align-items: flex-start;
+	padding-left: 0 !important;
+	box-sizing: border-box;
+	min-width: 0;
+}
+
+.defaultPane > tr > td.pred > .labelTD {
+	flex: 1 1 auto;
+	min-width: 0;
+	margin: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.defaultPane > tr > td.pred > .iconTD {
+	flex: 0 0 auto;
+	width: auto;
+	margin: 0;
+}
+
+.defaultPane > tr > td.obj {
+	grid-column: 2;
+	min-width: 0;
+	box-sizing: border-box;
+	align-self: start;
+}
+
+.defaultPane > tr > td[colspan='2'] {
+	grid-column: 1 / -1;
+}
+
+.defaultPane[data-layout='mobile'] > tr {
+	grid-template-columns: minmax(0, 1fr);
+}
+
+.defaultPane[data-layout='mobile'] > tr > td.pred,
+.defaultPane[data-layout='mobile'] > tr > td.obj {
+	display: block;
+	grid-column: 1;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.defaultPane[data-layout='mobile'] > tr > td.pred {
+	padding-bottom: var(--spacing-small, 0.1rem);
+}
+
+.defaultPane[data-layout='mobile'] > tr > td.obj {
+	padding-left: var(--default-pane-object-indent) !important;
+}
+
+@media (max-width: 700px) {
+	.defaultPane > tr {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.defaultPane > tr > td.pred,
+	.defaultPane > tr > td.obj {
+		display: block;
+		grid-column: 1;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.defaultPane > tr > td.pred {
+		padding-bottom: var(--spacing-small, 0.1rem);
+	}
+
+	.defaultPane > tr > td.obj {
+		padding-left: var(--default-pane-object-indent) !important;
+	}
+}

package/dist/defaultPane.d.ts

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