solid-panes 4.4.0 → 4.4.1

package/README.md

@@ -1,5 +1,4 @@
 # solid-panes
-
 A set of core solid-compatible applets based on solid-ui
 
 These are a set of interlinked applications, or parts of applications,
@@ -115,8 +114,11 @@ I want the menu to have a tiny button on the bottom margin left with an arrow to
 
 * Raprot mini: instead of this code (index.ts of footer), I want to make use of a new footer web component with the readme: # solid-ui-footer component
 
-* Raptor mini: The footer created shoudl actually be part of the left side menu only. Should be displayed inside it and should collaps and expand as the menu.
+* Raptor mini: The footer created should actually be part of the left side menu only. Should be displayed inside it and should collaps and expand as the menu.
 
 * Raptor mini: the footer should completely dissapear when menu folded up.
 
 * Raptor mini: Please always keep the footer at the bottom of the menu
+
+* GPT-5.4 Model: Add a compatibility shim in the form pane for mixed `ui:Group` plus field typing.
+

package/dist/RDFXMLPane.css

@@ -0,0 +1,70 @@
+.rdfxml-pane {
+	padding: 1rem;
+	border-top: solid 2px var(--color-data-pane-border-top, black);
+	border-left: solid 2px var(--color-data-pane-border-top, black);
+	border-bottom: solid 2px var(--color-data-pane-border-side, #777);
+	border-right: solid 2px var(--color-data-pane-border-side, #777);
+	color: var(--color-text-brown, #440);
+	box-sizing: border-box;
+}
+
+.rdfxml-pane__source {
+	overflow-x: auto;
+	max-width: 100%;
+	box-sizing: border-box;
+	font-family: monospace;
+	font-size: 120%;
+	margin: 0;
+	white-space: pre;
+}
+
+.rdfxml-pane__line {
+	display: grid;
+	grid-template-columns: var(--rdfxml-indent, 0) minmax(max-content, auto);
+	align-items: start;
+}
+
+.rdfxml-pane__line-indent {
+	display: block;
+	width: var(--rdfxml-indent, 0);
+}
+
+.rdfxml-pane__line-content {
+	white-space: pre;
+}
+
+.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__source {
+	overflow-wrap: anywhere;
+	word-break: break-word;
+	white-space: normal;
+}
+
+.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line {
+	grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
+}
+
+.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line-content {
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	word-break: break-word;
+	min-width: 0;
+}
+
+@media (max-width: 576px) {
+	.rdfxml-pane__source {
+		overflow-wrap: anywhere;
+		word-break: break-word;
+		white-space: normal;
+	}
+
+	.rdfxml-pane__line {
+		grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
+	}
+
+	.rdfxml-pane__line-content {
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+		word-break: break-word;
+		min-width: 0;
+	}
+}

package/dist/RDFXMLPane.d.ts

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

package/dist/RDFXMLPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RDFXMLPane.d.ts","sourceRoot":"","sources":["../src/RDFXMLPane.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAClD,OAAO,kBAAkB,CAAA;AAIzB,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,EAAE,CAAA;IACrB,KAAK,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,MAAM,GAAG,IAAI,CAAA;IACzE,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,cAAc,CAAA;CAC5E,CAAA;AA0BD,eAAO,MAAM,UAAU,EAAE,oBAmFxB,CAAA"}

package/dist/RDFXMLPane.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RDFXMLPane = void 0;
 var UI = _interopRequireWildcard(require("solid-ui"));
 var $rdf = _interopRequireWildcard(require("rdflib"));
+require("./RDFXMLPane.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); }
 /*      RDF/XML content Pane
  **
@@ -15,6 +16,27 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 const ns = UI.ns;
+function leadingIndentWidth(line) {
+  if (line.trim().length === 0) {
+    return 0;
+  }
+  let width = 0;
+  for (const character of line) {
+    if (character === ' ') {
+      width += 1;
+      continue;
+    }
+    if (character === '\t') {
+      width += 2;
+      continue;
+    }
+    break;
+  }
+  return Math.max(width, 2);
+}
+function trimLeadingIndent(line) {
+  return line.replace(/^[ \t]+/, '');
+}
 const RDFXMLPane = exports.RDFXMLPane = {
   icon: UI.icons.originalIconBase + '22-text-xml4.png',
   name: 'RDFXML',
@@ -31,8 +53,13 @@ const RDFXMLPane = exports.RDFXMLPane = {
   render: function (subject, context) {
     const myDocument = context.dom;
     const kb = context.session.store;
+    function applyEnvironmentAttributes(element) {
+      const environment = context.environment ?? {};
+      element.dataset.layout = environment.layout ?? 'desktop';
+    }
     const div = myDocument.createElement('div');
-    div.setAttribute('class', 'RDFXMLPane');
+    div.setAttribute('class', 'rdfxml-pane');
+    applyEnvironmentAttributes(div);
     // Because of smushing etc, this will not be a copy of the original source
     // We could instead either fetch and re-parse the source,
     // or we could keep all the pre-smushed triples.
@@ -48,10 +75,24 @@ const RDFXMLPane = exports.RDFXMLPane = {
     sz.suggestNamespaces(kb.namespaces);
     sz.setBase(subject.uri);
     const str = sz.statementsToXML(sts);
-    const pre = myDocument.createElement('PRE');
-    pre.setAttribute('style', 'overflow-x: auto; max-width: 100%; box-sizing: border-box;');
-    pre.appendChild(myDocument.createTextNode(str));
-    div.appendChild(pre);
+    const source = myDocument.createElement('div');
+    source.classList.add('rdfxml-pane__source');
+    str.split('\n').forEach(line => {
+      const lineElement = myDocument.createElement('div');
+      const indentElement = myDocument.createElement('span');
+      const contentElement = myDocument.createElement('span');
+      const indentWidth = leadingIndentWidth(line);
+      lineElement.classList.add('rdfxml-pane__line');
+      lineElement.style.setProperty('--rdfxml-indent', `${indentWidth}ch`);
+      indentElement.classList.add('rdfxml-pane__line-indent');
+      indentElement.setAttribute('aria-hidden', 'true');
+      contentElement.classList.add('rdfxml-pane__line-content');
+      contentElement.textContent = line.length > 0 ? trimLeadingIndent(line) : ' ';
+      lineElement.appendChild(indentElement);
+      lineElement.appendChild(contentElement);
+      source.appendChild(lineElement);
+    });
+    div.appendChild(source);
     return div;
   }
 };

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