solid-panes 4.4.2-7 → 4.5.0

package/README.md

@@ -50,20 +50,19 @@ Volunteers are always welcome!
 - [Conventions](./Documentation/conventions.md)
 
 ## Development
-
-To get started, make sure you have Node.js installed (for instance through [nvm](https://github.com/nvm-sh/nvm)), then:
-
-1. Clone, install, and start the dev server:
-
+To get started, make sure you have Node.js installed (for instance
+through https://github.com/nvm-sh/nvm), and:
+1. run
 ```sh
 git clone https://github.com/solidos/solid-panes
 cd solid-panes
 npm install
-npm start
+npm run start
 ```
-2. Open http://localhost:5173 in your browser. You should see the pane development sandbox.
+2. a browser window should automatically open at http://localhost:9000, if for some reason it doesn't go ahead and manually navigate there.
+3. Once you arrive at the Solid Pane Tester page, the `profile-pane` will be loaded by default. Proceed to edit `solid-panes/dev/loader.ts` and, at line 5, you should see `import Pane from 'profile-pane'`. Simply change `'profile-pane'` to your preferred pane/directory containing the pane of choice; for example, you could choose `'source-pane'` and bam, it will load that pane. For those who are new, you can go to the `solid-panes/src` directory and manually navigate through each individual folder. In most folders, you simply look for any file that has `pane` in the title. Copy and paste the `pane.js` file of your choice into the `solid-panes/dev/pane` folder, or you can import directly from the `src` directory. For example, importing from `'../src/dokieli/dokieliPane'` will work just fine. Each time you save `solid-panes/dev/loader.ts` while importing a different pane, your browser at `http://localhost:9000/` should automatically refresh. It's a good idea to keep the developer console open in your web browser to ensure panes are loading and rendering properly. 
 
-3. You can change the `subject` in the sandbox to determine which pane gets rendered. For example, the default subject loads the `profile-pane`.
+4. Another tip: to ensure you arrive at the proper destination, look at lines 48–53 in `solid-panes/dev/loader.ts`. You should see an event listener that is ready for a string. `renderPane('https://solidos.solidcommunity.net/Team/SolidOs%20team%20chat/index.ttl#this')` will be the default. Depending on the `pane.js` that you chose in the earlier import statements, the `renderPane` function determines the way you will see DOMContent inside of that particular pane. If you have created an `index.html` in your provider pod storage area, you could use `'https://yoursolidname.solidcommunity.net/profile/index.html'` inside of the `renderPane()` function parameters. You can edit the string manually in `solid-panes/dev/loader.ts`, or you can go to your developer console and type `renderPane('https://yoursolidname.solidcommunity.net/profile/index.html')` — just point to a part of your account that is congruent to the pane that you wish to import! :)
 
 ## Contributing panes
 When you created a pane, you can either add it as an npm dependency
@@ -81,8 +80,8 @@ pane. Any other pane which wants to deal with contacts can just use the pane wit
 
 
 ## Generative AI usage
-The SolidOS team is using GitHub Copilot integrated in Visual Studio Code.
-We have added comments in the code to make it explicit which parts are 100% written by AI.
+The SolidOS team is using GitHub Copilot integrated in Visual Studio Code. 
+We have added comments in the code to make it explicit which parts are 100% written by AI. 
 
 ### Prompt usage hitory:
 * Model Claude Opus 4.6: Initially solid-panes is loaded into an HTML shell form mashlib that looks like ... Also, an iFrame is rendered inside the `<div class="TabulatorOutline" id="DummyUUID">` for “isolated pane rendering”. Analyze the solid-panes code for what it uses from this HTML and suggest a new HTML structure which is mobile and accessibility friendly. Let's go ahead and make changes in this code as suggested to accommodate the new databrowser HTML.
@@ -91,4 +90,35 @@ We have added comments in the code to make it explicit which parts are 100% writ
 
 * Raptor mini: Update the code to use the new solid-ui-header component. Keep in mind the log in and sign up are wired in specific ways.
 
+* Auto: change the menu to fill up the menu items like in the code: async function getMenuItems (outliner: any) {
+const items = await outliner.getDashboardItems()
+return items.map((element) => {
+return {
+label: element.label,
+onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
+}
+})
+}
+
+* Auto: each #sym:MenuItem has an icon which i want displayed on the left side of each menu item when rendered
+
+* Auto: don't add each menu item in a button looking border. Simply list them.
+Upon hover apply background color e6dcff and selected or active to be background color: cbb9ff
+
+* Raptor mini: the menu dissapears when on mobile. That is great.
+I want the menu to have a tiny button on the bottom margin left with an arrow to the left or right for expanding the menu or for making it small. This is only for web. When we make it small it folds and only displays the icons of teh menu items, when it is expanded it should also add the labels to the menu items.
+
+* Raptor mini: i want to imporve the left side menu on mobile. When the menu is visible it should be higher, the top part should be on top of the header, folding out and in with the rest of the menu. It should have an x close button and it should say menu. The locor of that top line of the header should be the color of the header 332746
+
+* Raptor mini: the menu, on desktop, has a button to fold in or out. I want the same behavior to occur also when i simply click the folded in menu: it should expend. Not just when i click the dedicated button
+
+* 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 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/0314353e28ce6e5539af.svg

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

package/dist/4cceba29ab33b1ddd9bb.svg

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

package/dist/7b7538c6f6b317968009.svg

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

package/dist/92d03142abe6efc0b42d.svg

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

package/dist/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

@@ -1,5 +1,6 @@
-import { DataBrowserContext } from '../node_modules/pane-registry';
-import { NamedNode } from '../node_modules/rdflib';
+import type { DataBrowserContext } from 'pane-registry';
+import type { NamedNode } from 'rdflib';
+import './RDFXMLPane.css';
 type RDFXMLPaneDefinition = {
     icon: string;
     name: string;

package/dist/RDFXMLPane.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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
+ **
+ **  This pane shows the content of a particular RDF resource
+ ** or at least the RDF semantics we attribute to that resource,
+ ** in generated N3 syntax.
+ */
+
+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',
+  audience: [ns.solid('Developer')],
+  label: function (subject, context) {
+    const store = context.session.store;
+    if ('http://www.w3.org/2007/ont/link#ProtocolEvent' in store.findTypeURIs(subject)) {
+      return null;
+    }
+    const n = store.statementsMatching(undefined, undefined, undefined, subject).length;
+    if (n === 0) return null;
+    return 'As RDF/XML (' + n + ')';
+  },
+  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', '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.
+    const sts = kb.statementsMatching(undefined, undefined, undefined, subject); // @@ slow with current store!
+    /*
+    var kludge = kb.formula([]) // No features
+    for (var i=0; i< sts.length; i++) {
+        s = sts[i]
+        kludge.add(s.subject, s.predicate, s.object)
+    }
+    */
+    const sz = $rdf.Serializer(kb);
+    sz.suggestNamespaces(kb.namespaces);
+    sz.setBase(subject.uri);
+    const str = sz.statementsToXML(sts);
+    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;
+  }
+};
+
+// ends

package/dist/argument/argumentPane.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _solidLogic = require("solid-logic");
+var UI = _interopRequireWildcard(require("solid-ui"));
+var panes = _interopRequireWildcard(require("pane-registry"));
+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); }
+/*      View argument Pane
+**
+**  This pane shows a position and optionally the positions which
+** support or oppose it.
+** @@ Unfinsihed.
+** Should allow editing the data too
+
+*/
+// console.log('@@@ argument pane icon at ' + (module.__dirname || __dirname) + '/icon_argument.png')
+var _default = exports.default = {
+  icon: (module.__dirname || __dirname) + '/icon_argument.png',
+  // @@ fix fro mashlib version
+
+  name: 'argument',
+  label: function (subject) {
+    const kb = _solidLogic.store;
+    const t = kb.findTypeURIs(subject);
+    if (t[UI.ns.arg('Position').uri]) return 'Argument';
+    return null;
+  },
+  // View the data in a file in user-friendly way
+  render: function (subject, dom) {
+    const outliner = panes.getOutliner(dom);
+    const kb = _solidLogic.store;
+    const arg = UI.ns.arg;
+    subject = kb.canon(subject);
+    // var types = kb.findTypeURIs(subject)
+
+    const div = dom.createElement('div');
+    div.setAttribute('class', 'argumentPane');
+
+    // var title = kb.any(subject, UI.ns.dc('title'))
+
+    const comment = kb.any(subject, UI.ns.rdfs('comment'));
+    if (comment) {
+      const para = dom.createElement('p');
+      para.setAttribute('style', 'margin-left: 2em; font-style: italic;');
+      div.appendChild(para);
+      para.textContent = comment.value;
+    }
+    div.appendChild(dom.createElement('hr'));
+    let plist = kb.statementsMatching(subject, arg('support'));
+    outliner.appendPropertyTRs(div, plist, false);
+    div.appendChild(dom.createElement('hr'));
+    plist = kb.statementsMatching(subject, arg('opposition'));
+    outliner.appendPropertyTRs(div, plist, false);
+    div.appendChild(dom.createElement('hr'));
+    return div;
+  }
+}; // ends