solid-panes 4.4.2-7 → 4.5.0

package/dist/form/pane.js

@@ -0,0 +1,250 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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
+ **
+ */
+
+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, _context) {
+    const n = UI.widgets.formsFor(subject).length;
+    UI.log.debug('Form pane: forms for ' + subject + ': ' + n);
+    if (!n) return null;
+    return '' + n + ' forms';
+  },
+  render: function (subject, context) {
+    const kb = context.session.store;
+    const dom = context.dom;
+    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.className = `formPane__message formPane__message--${modifier}`;
+      box.appendChild(pre).textContent = message;
+      return pre;
+    };
+    const complain = function (message) {
+      return mention(message, 'error');
+    };
+    const complainIfBad = function (ok, body) {
+      if (ok) {
+        // setModifiedDate(store, kb, store);
+        // rerender(box);   // Deleted forms at the moment
+      } else complain('Sorry, failed to save your change:\n' + body);
+    };
+
+    // The question of where to store this data about subject
+    // This in general needs a whole lot more thought
+    // and it connects to the discoverbility through links
+
+    // const t = kb.findTypeURIs(subject)
+
+    const me = _solidLogic.authn.currentUser();
+    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 {
+      const ws = kb.each(me, ns.ui('workspace'));
+      if (ws.length === 0) {
+        mention('You don\'t seem to have any workspaces defined.  ' + 'A workspace is a place on the web (http://..) or in ' + 'the file system (file:///) to store application data.\n');
+      } else {
+        // @@
+      }
+    }
+
+    // Render forms using a given store
+
+    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(targetSubject);
+
+        // complain('Form for editing this form:');
+        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) {
+              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.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
+          mention("Where will this information be stored?")
+          const ele = dom.createElement('input');
+          box.appendChild(ele);
+          ele.setAttribute('type', 'text');
+          ele.setAttribute('size', '72');
+          ele.setAttribute('maxlength', '1024');
+          ele.setAttribute('style', 'font-size: 80%; color:#222;');
+          ele.value = store.uri
+          */
+
+          UI.widgets.appendForm(dom, box, {}, targetSubject, form, storeNode, complainIfBad);
+          tagMobileTextareaRows(box);
+        }
+      }); // end: when store loded
+    }; // renderFormsFor
+
+    // Figure out what store
+
+    // Which places are editable and have stuff about the subject?
+
+    let targetStore = null;
+
+    // 1. The document URI of the subject itself
+    const docuri = $rdf.Util.uri.docpart(subject.uri);
+    if (kb.updater.editable(docuri, kb)) {
+      targetStore = subject.doc();
+    } // an editable data file with hash
+
+    const annotationStore = kb.any(kb.sym(docuri), ns.link('annotationStore'));
+    if (!targetStore && isNamedNode(annotationStore)) {
+      targetStore = annotationStore;
+    }
+
+    // 2. where stuff is already stored
+    if (!targetStore) {
+      const docs = new Map();
+      kb.statementsMatching(subject).forEach(function (st) {
+        if (st.why.value) {
+          docs.set(st.why.value, 1);
+        }
+      });
+      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 [uri] of docList) {
+        if (uri && kb.updater.editable(uri, kb)) {
+          targetStore = kb.sym(uri);
+          break;
+        }
+      }
+    }
+
+    // 3. In a workspace store
+    const date = '2014'; // @@@@@@@@@@@@ pass as parameter
+
+    if (targetStore) {
+      // mention("@@ Ok, we have a store <" + store.uri + ">.");
+      renderFormsFor(targetStore, subject);
+    } else {
+      complain('No suitable store is known, to edit <' + subject.uri + '>.');
+      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 = 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 {
+            complain('Note no suitable annotation store in activity: ' + act);
+          }
+        }
+      });
+      box.appendChild(foobarbaz);
+    }
+    return box;
+  }
+};

package/dist/home/homePane.d.ts

@@ -1,4 +1,4 @@
-import { PaneDefinition } from '../../node_modules/pane-registry';
+import { PaneDefinition } from 'pane-registry';
 declare const HomePaneSource: PaneDefinition;
 export default HomePaneSource;
 //# sourceMappingURL=homePane.d.ts.map

package/dist/home/homePane.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _solidLogic = require("solid-logic");
+var _solidUi = require("solid-ui");
+/*   Home Pane
+ **
+ ** The home pane is avaiable everywhere and allows a user
+ ** to
+ **  - keep track of their stuff
+ **  - make new things, and possibly
+ **  - keep track of accounts and workspaces etc
+ **
+ */
+
+const HomePaneSource = {
+  icon: _solidUi.icons.iconBase + 'noun_547570.svg',
+  // noun_25830
+
+  global: true,
+  name: 'home',
+  // Does the subject deserve an home pane?
+  //
+  //   yes, always!
+  //
+  label: function () {
+    return 'home';
+  },
+  audience: [_solidUi.ns.solid('PowerUser')],
+  render: function (subject, context) {
+    const dom = context.dom;
+    const showContent = async function () {
+      const homePaneContext = {
+        div,
+        dom,
+        statusArea: div,
+        me
+      };
+      /*
+            div.appendChild(dom.createElement('h4')).textContent = 'Login status'
+            var loginStatusDiv = div.appendChild(context.dom.createElement('div'))
+            // TODO: Find out what the actual type is:
+            type UriType = unknown;
+            loginStatusDiv.appendChild(UI.login.loginStatusBox(context.dom, () => {
+              // Here we know new log in status
+            }))
+      */
+      div.appendChild(dom.createElement('h4')).textContent = 'Create new thing somewhere';
+      const creationDiv = div.appendChild(dom.createElement('div'));
+      const creationContext = {
+        div: creationDiv,
+        dom,
+        statusArea: div,
+        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 () {});
+    };
+    const div = dom.createElement('div');
+    const me = _solidLogic.authn.currentUser(); // this will be incorrect if not logged in
+
+    showContent();
+    return div;
+  }
+}; // pane object
+
+// ends
+var _default = exports.default = HomePaneSource;

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

@@ -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 './humanReadablePane.css';
 type HumanReadableIcon = string | Promise<string>;
 type HumanReadablePaneDefinition = {
     icon: (subject: NamedNode, context: DataBrowserContext) => HumanReadableIcon;