Milestone3m [WiP]

README.md

@@ -36,10 +36,27 @@ A colorful dependency tree can be seen [here](https://github.com/solidos/solidos
     - [Solid-ui & Solid-logic related:](#solid-ui--solid-logic-related)
   - [The databrowser hack: upgrading your browser](#the-databrowser-hack-upgrading-your-browser)
 
+### [Generative AI usage](#generative-ai-usage)
+
 ## Developing mashlib
 
 As part of the SolidOS stack, mashlib can be developed locally by setting up the SolidOS code. Read more about that on the [SolidOS Readme](https://github.com/solidos/solidos#-getting-started-with-the-solidos-code).
 
+### Webpack Resolution Modes
+
+Mashlib webpack now supports two explicit resolution modes:
+
+- `package` mode: default. Resolves `solid-ui` and `solid-panes` from `node_modules`, which is the correct behavior for npm installs and published builds.
+- `workspace` mode: opt-in. Resolves selected SolidOS packages from sibling workspace source trees for local linked development.
+
+Use these scripts for local workspace builds:
+
+- `npm run build:workspace`
+- `npm run watch:workspace`
+- `npm run start:workspace`
+
+`npm run build`, `npm run watch`, and `npm run start` stay on default package resolution.
+
 ## Goals
 
 The goals of mashlib overlap with the [SolidOS Goals](https://solidos.solidcommunity.net/Team/docs/SolidOSNorthStar.html).
@@ -151,3 +168,13 @@ The mashlib part of SolidOS Databrowser Frontend is *read-write;* that is, the u
 
 A major limitation of this data browser hack is that current web browsers are made to distrust any code loaded from one domain that uses data from another domain. This makes it hard, strangely complicated, and sometimes impossible to do some things.
 
+## 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 history:
+* Auto model: Looking at these 2 files (`databrowser.html` and `index.ts`), I want to redesign mashlib and underlying panes. I have one design for web and another for mobile. How would I go about making sure I can also have a mobile version? 
+
+* Claude-Opus 4.6: I don't think this is correct. Mashlib is bundling together all the panes. I do not need to add `mashlib.layout` or theme to the globals. I can just call the render of each pane with an interface of values or ...?
+
+* Raptor mini: I want to redesign the main page which contains GlobalDashboard and OutlineView. I keep the header and footer and I want to have a left side menu that changes content based on whether logged in or not and also changes based on whether it is mobile or not. If it is mobile, it should fold up in the header menu; if it is web, it should be rendered on the left side. I want a menu placeholder that changes according to mobile or not. I want to implement its functionality in solid-panes.

babel.config.mjs

@@ -5,7 +5,9 @@ export default {
           browsers: ['> 1%', 'last 3 versions', 'not dead']
         }
      }],
-    '@babel/preset-typescript',
+    ['@babel/preset-typescript', {
+      allowDeclareFields: true
+    }],
   ],
   plugins: [
     '@babel/plugin-transform-runtime'

package.json

@@ -11,9 +11,11 @@
   "scripts": {
     "clean": "rm -rf dist ./src/versionInfo.ts",
     "build": "npm run clean && npm run build-version && npm run typecheck && npm run build-dist && npm run postbuild-js",
+    "build:workspace": "npm run clean && npm run build-version && npm run typecheck && npm run build-dist:workspace && npm run postbuild-js",
     "build:ghpages": "npm run clean && npm run build-version && npm run typecheck && PUBLIC_PATH=/mashlib/dist/ npm run build-dist && npm run postbuild-js",
     "build-version": "./timestamp.sh > src/versionInfo.ts && eslint 'src/versionInfo.ts' --fix",
     "build-dist": "webpack --progress --mode=production",
+    "build-dist:workspace": "webpack --progress --mode=production --env resolutionMode=workspace",
     "postbuild-js": "rm -f dist/versionInfo.d.ts dist/versionInfo.d.ts.map",
     "lint": "eslint",
     "lint-fix": "eslint --fix",
@@ -24,7 +26,9 @@
     "preversion": "npm run lint && npm run typecheck && npm test",
     "postpublish": "git push origin main --follow-tags",
     "watch": "npm run build-version && webpack --watch",
-    "start": "npm run build-version && webpack serve --config webpack.config.mjs"
+    "watch:workspace": "npm run build-version && webpack --watch --env resolutionMode=workspace",
+    "start": "npm run build-version && webpack serve --config webpack.config.mjs",
+    "start:workspace": "npm run build-version && webpack serve --config webpack.config.mjs --env resolutionMode=workspace"
   },
   "repository": {
     "type": "git",
@@ -50,15 +54,17 @@
   },
   "homepage": "https://github.com/solidos/mashlib",
   "dependencies": {
+    "pane-registry": "^3.1.0",
     "rdflib": "^2.3.6",
     "solid-logic": "^4.0.6",
     "solid-panes": "^4.2.6",
-    "solid-ui": "^3.0.6"
+    "solid-ui": "^3.1.0"
   },
   "overrides": {
     "rdflib": "$rdflib",
     "solid-logic": "$solid-logic",
-    "solid-ui": "$solid-ui"
+    "solid-ui": "$solid-ui",
+    "pane-registry": "$pane-registry"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.6",

src/databrowser.html

@@ -2,32 +2,79 @@
 <html>
   <head>
     <meta charset="utf-8"/>
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <title>SolidOS</title>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
         panes.runDataBrowser()
       })
     </script>
   </head>
-    <body id="PageBody">
-      <!-- solid-panes' OutlineManager injects into this element -->
-      <header id="PageHeader" role="banner"></header>
-      <main id="mainContent" tabindex="-1">
-        <div class="TabulatorOutline" id="DummyUUID">
-          <table id="outline">
-            <thead>
-              <tr>
-                <th id="outlineHeader" scope="col"></th>
-                <!-- Add more <th> as needed for columns -->
-              </tr>
-            </thead>
-            <tbody>
-              <!-- Table rows injected by JS -->
-            </tbody>
+  <body id="PageBody" data-app-shell="databrowser">
+
+    <!-- Skip-navigation link (accessibility) -->
+    <a href="#MainContent" class="skip-link">Skip to main content</a>
+
+    <!--  Header — populated by solid-panes createHeader(), plus responsive menu toggle -->
+    <solid-ui-header id="mainSolidUiHeader" theme="" layout="" brand-link="/">
+      <span slot="title"></span>
+    </solid-ui-header>
+<!--
+    <header id="PageHeader" role="banner">
+      <div class="page-header-inner">
+        <button id="MenuToggleBtn" class="menu-toggle" aria-controls="NavMenu" aria-expanded="false" hidden>
+          ☰
+          <span class="sr-only">Menu</span>
+        </button>
+      </div>
+    </header
+    -->
+
+    <!-- Main content area — single visible region at a time -->
+    <main id="MainContent" role="main" tabindex="-1" aria-live="polite">
+      <div class="app-shell">
+        <aside id="NavMenu" class="app-nav" aria-label="Application menu" hidden>
+          <div id="NavMenuContent" class="menu-content"></div>
+        </aside>
+
+        <div class="app-view">
+          <!--
+            Outline view: the primary RDF-subject browser.
+            JS appends property-table <div>s (not <tr>s) here.
+          -->
+          <table
+            id="OutlineView"
+            class="outline-view"
+            aria-label="Resource browser"
+          >
+          <!-- 
+            Pane icon tray (nav) and pane content are injected here by
+            OutlineManager.GotoSubject / propertyTable / outlineExpand.
+            Each subject block is a <article class="subject-block">.
+          -->
           </table>
-          <div id="GlobalDashboard" aria-label="Global Dashboard"></div>
-        </div>
-      </main>
-      <footer id="PageFooter" role="contentinfo"></footer>
+
+          <!--
+            Global Dashboard: preferences, profile, contacts, etc.
+            Hidden by default; toggled by showDashboard / closeDashboard.
+          -->
+          <section
+            id="GlobalDashboard"
+            class="global-dashboard"
+            aria-label="Dashboard"
+            hidden
+          >
+          <!-- globalAppTabs appends tab widget here -->
+          </section>
+        </div> <!-- .app-view -->
+      </div> <!-- .app-shell -->
+
+      <div id="MenuOverlay" class="menu-overlay" hidden aria-hidden="true"></div>
+    </main>
+
+    <!-- Footer — populated by solid-ui initFooter() -->
+    <footer id="PageFooter" role="contentinfo">
+      <!-- solid-ui injects: "Powered by Solid" link -->
+    </footer>
   </body>
 </html>

src/globals.ts

@@ -0,0 +1,11 @@
+// AI generated as a solution to cannot find SolidLogic 
+// Must be imported BEFORE solid-ui / solid-panes.
+// Their prebuilt bundles treat `solid-logic` (and `rdflib`) as UMD externals
+// with `root: "SolidLogic"` / `root: "$rdf"`, so the globals must exist on
+// `window` at module-evaluation time, not after all imports have run.
+import * as $rdf from 'rdflib'
+import * as SolidLogic from 'solid-logic'
+
+const w: any = window
+w.$rdf = $rdf
+w.SolidLogic = SolidLogic

src/index.ts

@@ -1,57 +1,55 @@
+// IMPORTANT: must be the first import so window.SolidLogic / window.$rdf are
+// defined before solid-ui / solid-panes prebuilt bundles are evaluated
+// (they declare `solid-logic` and `rdflib` as UMD externals with
+// root: "SolidLogic" / "$rdf").
+import './globals'
+
 import * as $rdf from 'rdflib'
+import * as SolidLogic from 'solid-logic'
+import type { RenderEnvironment } from 'pane-registry'
+import'solid-ui/components/header'
 import * as panes from 'solid-panes'
-import { authn, solidLogicSingleton, authSession, store } from 'solid-logic'
+import { layout } from './layout'
+import { theme } from './theme'
 import versionInfo from './versionInfo'
 import './styles/mash.css'
 
 const global: any = window
+global.panes = panes
+global.mashlib = { versionInfo }
 
-// Theme Management
-const initializeTheme = () => {
-  const savedTheme = localStorage.getItem('mashlib-theme')
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  const theme = savedTheme || (prefersDark ? 'dark' : 'light')
-
-  if (theme === 'dark') {
-    document.documentElement.setAttribute('data-theme', 'dark')
-  } else {
-    document.documentElement.removeAttribute('data-theme')
-  }
-}
+layout.init()
+theme.init()
 
-const setTheme = (theme: 'light' | 'dark') => {
-  if (theme === 'dark') {
-    document.documentElement.setAttribute('data-theme', 'dark')
-  } else {
-    document.documentElement.removeAttribute('data-theme')
-  }
-  localStorage.setItem('mashlib-theme', theme)
-}
+// Build a snapshot of the current render environment
+const buildRenderEnvironment = (): RenderEnvironment => ({
+  layout: layout.get(),
+  layoutPreference: layout.getPreference(),
+  inputMode: layout.getInputMode(),
+  theme: theme.get(),
+  viewport: layout.getViewport()
+})
 
-const getTheme = (): 'light' | 'dark' => {
-  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-}
+// Inject or update the environment on the pane context
+const syncEnvironmentToContext = async (_trigger?: Event | string) => {
+  const outliner = panes.getOutliner(document) as any
 
-// Initialize theme on load
-initializeTheme()
+  if (!outliner) {
+    return
+  }
 
-global.$rdf = $rdf
-global.panes = panes
-global.SolidLogic = {
-  authn,
-  authSession, 
-  store,
-  solidLogicSingleton
-}
-global.mashlib = {
-  versionInfo,
-  theme: {
-    set: setTheme,
-    get: getTheme,
-    init: initializeTheme
+  if (!outliner.context) {
+    outliner.context = {}
   }
+
+  panes.updateEnvironment(outliner, buildRenderEnvironment())
+  await panes.refreshUI(outliner)
 }
 
+// Keep environment in sync on layout/theme changes
+window.addEventListener('mashlib:layoutchange', syncEnvironmentToContext)
+window.addEventListener('mashlib:themechange', syncEnvironmentToContext)
+
 global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) {
   // Set up cross-site proxy
   const fetcher: any = $rdf.Fetcher
@@ -63,15 +61,20 @@ global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) {
     webMonetizationTag.setAttribute('name', 'monetization')
     webMonetizationTag.setAttribute('content', `$${window.location.host}`)
     document.head.appendChild(webMonetizationTag)
-  } catch (e) {
-    console.error('Failed to add web monetization tag to page header')
-  }
+  } catch {}
+
+  window.addEventListener('load', syncEnvironmentToContext)
 
   // Authenticate the user
-  authn.checkUser().then(function (_profile: any) {
-    const mainPage = panes.initMainPage(solidLogicSingleton.store, uri)
-    return mainPage
-  })
+  SolidLogic.authn.checkUser()
+    .then(() => panes.initMainPage(SolidLogic.solidLogicSingleton.store, uri))
+    .then(() => {
+      // Inject render environment into pane context after outliner exists
+      syncEnvironmentToContext('initMainPage')
+
+    })
+    .catch(() => undefined)
+
 }
 
 window.onpopstate = function (_event: any) {
@@ -85,5 +88,5 @@ window.onpopstate = function (_event: any) {
 }
 
 export {
-  versionInfo
+  versionInfo,
 }