solid-panes 4.2.4 → 4.2.5-test.0

package/README.md

@@ -78,3 +78,11 @@ contacts (A VCARD Address Book, Group, Individual, Organization) can be handled
 pane. Any other pane which wants to deal with contacts can just use the pane within its own user interface.
 
 ![Mapping many classes on the L to panes on the R](https://solidos.github.io/solid-panes/doc/images/panes-for-classes.svg)
+
+
+## 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. 
+
+### Prompt usage hitory:
+* Model Claude Opus 4.6: Initially solid-panes is loaded into a HTML shell form mashlib that looks like ... Also, an iFrame is rendered inside the <div class="TabulatorOutline" id="DummyUUID"> for “isolated pane rendering”. Analize the solid-panes code for what it uses from this HTML and suggest a new HTML structure which is mobile and accessibility friendly. Lets go ahead and make chnages in this code as suggested to accommodate the new databwroser HTML.

package/dist/dashboard/basicPreferences.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basicPreferences.d.ts","sourceRoot":"","sources":["../../src/dashboard/basicPreferences.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAM9C,eAAO,MAAM,oBAAoB,EAAE,cA6ElC,CAAA;AAoBD,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"basicPreferences.d.ts","sourceRoot":"","sources":["../../src/dashboard/basicPreferences.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAM9C,eAAO,MAAM,oBAAoB,EAAE,cA8ElC,CAAA;AAoBD,eAAe,oBAAoB,CAAA"}

package/dist/dashboard/basicPreferences.js

@@ -20,6 +20,7 @@ const basicPreferencesPane = exports.basicPreferencesPane = {
   // The subject should be the logged in user.
   render: (subject, context) => {
     const dom = context.dom;
+    // @ts-ignore
     const store = context.session.store;
     function complainIfBad(ok, mess) {
       if (ok) return;

package/dist/internal/internalPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internalPane.d.ts","sourceRoot":"","sources":["../../src/internal/internalPane.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,QAAA,MAAM,IAAI,EAAE,cAwOX,CAAA;AAiBD,eAAe,IAAI,CAAA"}
+{"version":3,"file":"internalPane.d.ts","sourceRoot":"","sources":["../../src/internal/internalPane.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,QAAA,MAAM,IAAI,EAAE,cAyOX,CAAA;AAiBD,eAAe,IAAI,CAAA"}

package/dist/internal/internalPane.js

@@ -21,6 +21,7 @@ const pane = {
   },
   render: function (subject, context) {
     const dom = context.dom;
+    // @ts-ignore
     const store = context.session.store;
     const canonizedSubject = store.canon(subject);
     const types = store.findTypeURIs(canonizedSubject);

package/dist/outline/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/outline/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,wBAAgB,aAAa,CAC3B,GAAG,EAAE,YAAY,EACjB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,UAAU,GAChB,kBAAkB,CAUpB"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/outline/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,wBAAgB,aAAa,CAC3B,GAAG,EAAE,YAAY,EACjB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,UAAU,GAChB,kBAAkB,CAYpB"}

package/dist/outline/context.js

@@ -11,7 +11,9 @@ function createContext(dom, paneRegistry, store, logic) {
     getOutliner: _index.getOutliner,
     session: {
       paneRegistry,
+      // @ts-ignore
       store,
+      // @ts-ignore
       logic
     }
   };

package/dist/outline/manager.js

@@ -400,10 +400,10 @@ function _default(context) {
   async function showDashboard(options = {}) {
     const dashboardContainer = getDashboardContainer();
     const outlineContainer = getOutlineContainer();
-    // reuse dashboard if already children already is inserted
+    // reuse dashboard if children already inserted
     if (dashboardContainer.childNodes.length > 0 && options.pane) {
-      outlineContainer.style.display = 'none';
-      dashboardContainer.style.display = 'inherit';
+      outlineContainer.setAttribute('hidden', '');
+      dashboardContainer.removeAttribute('hidden');
       const tab = dashboardContainer.querySelector(`[data-global-pane-name="${options.pane}"]`);
       if (tab) {
         tab.click();
@@ -422,37 +422,40 @@ function _default(context) {
     _solidLogic.authSession.events.on('logout', closeDashboard);
 
     // finally - switch to showing dashboard
-    outlineContainer.style.display = 'none';
+    outlineContainer.setAttribute('hidden', '');
+    dashboardContainer.removeAttribute('hidden');
     dashboardContainer.appendChild(dashboard);
     const tab = dashboardContainer.querySelector(`[data-global-pane-name="${options.pane}"]`);
     if (tab) {
       tab.click();
     }
     function closeDashboard() {
-      dashboardContainer.style.display = 'none';
-      outlineContainer.style.display = 'inherit';
+      dashboardContainer.setAttribute('hidden', '');
+      outlineContainer.removeAttribute('hidden');
     }
   }
   this.showDashboard = showDashboard;
   function getDashboardContainer() {
-    return getOrCreateContainer('GlobalDashboard');
+    return getOrCreateContainer('GlobalDashboard', 'Dashboard');
   }
   function getOutlineContainer() {
-    return getOrCreateContainer('outline');
+    return getOrCreateContainer('OutlineView', 'Resource browser');
   }
 
   /**
-   * Get element with id or create a new on the fly with that id
+   * Get element with id or create a new section on the fly with that id
    *
    * @param {string} id The ID of the element you want to get or create
+   * @param {string} [ariaLabel] Optional aria-label for accessibility
    * @returns {HTMLElement}
    */
-  function getOrCreateContainer(id) {
+  function getOrCreateContainer(id, ariaLabel) {
     return document.getElementById(id) || (() => {
-      const dashboardContainer = document.createElement('div');
-      dashboardContainer.id = id;
+      const container = document.createElement('section');
+      container.id = id;
+      if (ariaLabel) container.setAttribute('aria-label', ariaLabel);
       const mainContainer = document.querySelector('[role="main"]') || document.body;
-      return mainContainer.appendChild(dashboardContainer);
+      return mainContainer.appendChild(container);
     })();
   }
   async function loadContainerRepresentation(subject) {
@@ -496,7 +499,9 @@ function _default(context) {
       const paneShownStyle = 'width: 24px; border-radius: 0.5em; border-top: solid #222 1px; border-left: solid #222 0.1em; border-bottom: solid #eee 0.1em; border-right: solid #eee 0.1em; margin-left: 1em; padding: 3px; background-color:   #ffd;';
       const paneHiddenStyle = 'width: 24px; border-radius: 0.5em; margin-left: 1em; padding: 3px';
       const paneIconTray = td.appendChild(dom.createElement('nav'));
-      paneIconTray.style = 'display:flex; justify-content: flex-start; align-items: center;';
+      paneIconTray.setAttribute('role', 'toolbar');
+      paneIconTray.setAttribute('aria-label', 'Pane views');
+      paneIconTray.classList.add('paneIconTray');
       const relevantPanes = options.hideList ? [] : await getRelevantPanes(subject, context);
       tr.firstPane = requiredPane || getPane(relevantPanes, subject);
       const paneNumber = relevantPanes.indexOf(tr.firstPane);
@@ -1304,7 +1309,7 @@ function _default(context) {
             outline.GotoSubject(object, true);
             /* //deal with this later
             deselectAll();
-            var newTr=dom.getElementById('outline').lastChild;
+            var newTr=dom.getElementById('OutlineView').lastChild;
             setSelected(newTr.firstChild.firstChild.childNodes[1].lastChild,true);
             function setSelectedAfterward(uri){
                 deselectAll();
@@ -1878,7 +1883,7 @@ function _default(context) {
   @param table   -- option  -- a table element in which to put the outline.
   */
   this.GotoSubject = function (subject, expand, pane, solo, referrer, table) {
-    table = table || dom.getElementById('outline'); // if does not exist just add one? nowhere to out it
+    table = table || dom.getElementById('OutlineView'); // if does not exist just add one? nowhere to out it
     if (solo) {
       UI.utils.emptyNode(table);
       table.style.width = '100%';

package/dist/outline/userInput.js

@@ -1069,9 +1069,12 @@ function UserInput(outline) {
         }
       }, false);
       window.addEventListener('mousedown', UserInput.Mousedown, false);
-      document.getElementById('outline').oncontextmenu = function () {
-        return false;
-      };
+      const outlineView = document.getElementById('OutlineView');
+      if (outlineView) {
+        outlineView.oncontextmenu = function () {
+          return false;
+        };
+      }
       if (e.button === 2) {
         // right click
         UserInput.switchMode();

package/dist/pad/padPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"padPane.d.ts","sourceRoot":"","sources":["../../src/pad/padPane.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAK9C,QAAA,MAAM,OAAO,EAAE,cAmiBd,CAAA;AAGD,eAAe,OAAO,CAAA"}
+{"version":3,"file":"padPane.d.ts","sourceRoot":"","sources":["../../src/pad/padPane.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAK9C,QAAA,MAAM,OAAO,EAAE,cAsiBd,CAAA;AAGD,eAAe,OAAO,CAAA"}

package/dist/pad/padPane.js

@@ -18,6 +18,7 @@ const paneDef = {
   audience: [_solidUi.ns.solid('PowerUser')],
   // Does the subject deserve an pad pane?
   label: function (subject, context) {
+    // @ts-ignore
     const t = context.session.store.findTypeURIs(subject);
     if (t['http://www.w3.org/ns/pim/pad#Notepad']) {
       return 'pad';
@@ -26,6 +27,7 @@ const paneDef = {
   },
   mintClass: _solidUi.ns.pad('Notepad'),
   mintNew: function (context, newPaneOptions) {
+    // @ts-ignore
     const store = context.session.store;
     const updater = store.updater;
     if (newPaneOptions.me && !newPaneOptions.me.uri) {
@@ -65,6 +67,7 @@ const paneDef = {
   // @@ TODO Set better type for paneOptions
   render: function (subject, context, paneOptions) {
     const dom = context.dom;
+    // @ts-ignore
     const store = context.session.store;
     // Utility functions
     const complainIfBad = function (ok, message) {

package/dist/solid-panes.js

@@ -31605,8 +31605,11 @@ function UserInput (outline) {
         false
       )
       window.addEventListener('mousedown', UserInput.Mousedown, false)
-      document.getElementById('outline').oncontextmenu = function () {
-        return false
+      const outlineView = document.getElementById('OutlineView')
+      if (outlineView) {
+        outlineView.oncontextmenu = function () {
+          return false
+        }
       }
 
       if (e.button === 2) {
@@ -33325,10 +33328,10 @@ function QuerySource () {
   async function showDashboard (options = {}) {
     const dashboardContainer = getDashboardContainer()
     const outlineContainer = getOutlineContainer()
-    // reuse dashboard if already children already is inserted
+    // reuse dashboard if children already inserted
     if (dashboardContainer.childNodes.length > 0 && options.pane) {
-      outlineContainer.style.display = 'none'
-      dashboardContainer.style.display = 'inherit'
+      outlineContainer.setAttribute('hidden', '')
+      dashboardContainer.removeAttribute('hidden')
       const tab = dashboardContainer.querySelector(
         `[data-global-pane-name="${options.pane}"]`
       )
@@ -33351,7 +33354,8 @@ function QuerySource () {
     external_SolidLogic_.authSession.events.on('logout', closeDashboard)
 
     // finally - switch to showing dashboard
-    outlineContainer.style.display = 'none'
+    outlineContainer.setAttribute('hidden', '')
+    dashboardContainer.removeAttribute('hidden')
     dashboardContainer.appendChild(dashboard)
     const tab = dashboardContainer.querySelector(
       `[data-global-pane-name="${options.pane}"]`
@@ -33361,35 +33365,37 @@ function QuerySource () {
     }
 
     function closeDashboard () {
-      dashboardContainer.style.display = 'none'
-      outlineContainer.style.display = 'inherit'
+      dashboardContainer.setAttribute('hidden', '')
+      outlineContainer.removeAttribute('hidden')
     }
   }
   this.showDashboard = showDashboard
 
   function getDashboardContainer () {
-    return getOrCreateContainer('GlobalDashboard')
+    return getOrCreateContainer('GlobalDashboard', 'Dashboard')
   }
 
   function getOutlineContainer () {
-    return getOrCreateContainer('outline')
+    return getOrCreateContainer('OutlineView', 'Resource browser')
   }
 
   /**
-   * Get element with id or create a new on the fly with that id
+   * Get element with id or create a new section on the fly with that id
    *
    * @param {string} id The ID of the element you want to get or create
+   * @param {string} [ariaLabel] Optional aria-label for accessibility
    * @returns {HTMLElement}
    */
-  function getOrCreateContainer (id) {
+  function getOrCreateContainer (id, ariaLabel) {
     return (
       document.getElementById(id) ||
       (() => {
-        const dashboardContainer = document.createElement('div')
-        dashboardContainer.id = id
+        const container = document.createElement('section')
+        container.id = id
+        if (ariaLabel) container.setAttribute('aria-label', ariaLabel)
         const mainContainer =
           document.querySelector('[role="main"]') || document.body
-        return mainContainer.appendChild(dashboardContainer)
+        return mainContainer.appendChild(container)
       })()
     )
   }
@@ -33442,8 +33448,9 @@ function QuerySource () {
       const paneHiddenStyle =
         'width: 24px; border-radius: 0.5em; margin-left: 1em; padding: 3px'
       const paneIconTray = td.appendChild(dom.createElement('nav'))
-      paneIconTray.style =
-        'display:flex; justify-content: flex-start; align-items: center;'
+      paneIconTray.setAttribute('role', 'toolbar')
+      paneIconTray.setAttribute('aria-label', 'Pane views')
+      paneIconTray.classList.add('paneIconTray')
 
       const relevantPanes = options.hideList
         ? []
@@ -34438,7 +34445,7 @@ function QuerySource () {
             outline.GotoSubject(object, true)
             /* //deal with this later
             deselectAll();
-            var newTr=dom.getElementById('outline').lastChild;
+            var newTr=dom.getElementById('OutlineView').lastChild;
             setSelected(newTr.firstChild.firstChild.childNodes[1].lastChild,true);
             function setSelectedAfterward(uri){
                 deselectAll();
@@ -35103,7 +35110,7 @@ function QuerySource () {
   @param table   -- option  -- a table element in which to put the outline.
 */
   this.GotoSubject = function (subject, expand, pane, solo, referrer, table) {
-    table = table || dom.getElementById('outline') // if does not exist just add one? nowhere to out it
+    table = table || dom.getElementById('OutlineView') // if does not exist just add one? nowhere to out it
     if (solo) {
       external_UI_.utils.emptyNode(table)
       table.style.width = '100%'
@@ -35666,6 +35673,7 @@ const basicPreferencesPane = {
     // The subject should be the logged in user.
     render: (subject, context) => {
         const dom = context.dom;
+        // @ts-ignore
         const store = context.session.store;
         function complainIfBad(ok, mess) {
             if (ok)
@@ -41869,6 +41877,7 @@ const paneDef = {
     audience: [external_UI_.ns.solid('PowerUser')],
     // Does the subject deserve an pad pane?
     label: function (subject, context) {
+        // @ts-ignore
         const t = context.session.store.findTypeURIs(subject);
         if (t['http://www.w3.org/ns/pim/pad#Notepad']) {
             return 'pad';
@@ -41877,6 +41886,7 @@ const paneDef = {
     },
     mintClass: external_UI_.ns.pad('Notepad'),
     mintNew: function (context, newPaneOptions) {
+        // @ts-ignore
         const store = context.session.store;
         const updater = store.updater;
         if (newPaneOptions.me && !newPaneOptions.me.uri) {
@@ -41919,6 +41929,7 @@ const paneDef = {
     // @@ TODO Set better type for paneOptions
     render: function (subject, context, paneOptions) {
         const dom = context.dom;
+        // @ts-ignore
         const store = context.session.store;
         // Utility functions
         const complainIfBad = function (ok, message) {
@@ -43294,6 +43305,7 @@ const TabbedPane = {
     audience: [external_UI_.ns.solid('PowerUser')],
     // Does the subject deserve this pane?
     label: (subject, context) => {
+        // @ts-ignore
         const kb = context.session.store;
         const typeURIs = kb.findTypeURIs(subject);
         if (external_UI_.ns.meeting('Cluster').uri in typeURIs) {
@@ -43303,6 +43315,7 @@ const TabbedPane = {
     },
     render: (subject, context) => {
         const dom = context.dom;
+        // @ts-ignore
         const store = context.session.store;
         const div = dom.createElement('div');
         (async () => {
@@ -49049,6 +49062,7 @@ const internalPane_pane = {
     },
     render: function (subject, context) {
         const dom = context.dom;
+        // @ts-ignore
         const store = context.session.store;
         const canonizedSubject = store.canon(subject);
         const types = store.findTypeURIs(canonizedSubject);
@@ -49443,7 +49457,9 @@ function createContext(dom, paneRegistry, store, logic) {
         getOutliner: getOutliner,
         session: {
             paneRegistry,
+            // @ts-ignore
             store,
+            // @ts-ignore
             logic
         }
     };