Sync/main from staging

.github/workflows/ci.yml

@@ -15,14 +15,27 @@ on:
   workflow_dispatch:
 
 jobs:
+  update-deps:
+    uses: SolidOS/solidos/.github/workflows/update-solidos-deps.yml@main
+    secrets: inherit
+
   build:
+    needs: update-deps
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [22, 24]
 
     steps:
+      # The update-deps job commits the updated package.json/package-lock.json to the head
+      # branch, but `needs` only orders the jobs: without an explicit ref the default
+      # checkout uses the SHA of the triggering event, so the build (and the artifact that
+      # later gets published) would still carry the pre-update dependencies.
+      # Build the branch that received the commit (PR head branch, or the pushed branch);
+      # fork PRs keep the default commit, as the updater deliberately does not commit there.
       - uses: actions/checkout@v6
+        with:
+          ref: ${{ github.event_name == 'pull_request' && (github.event.pull_request.head.repo.fork && github.sha || github.head_ref) || github.ref_name }}
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v6
         with:
@@ -58,6 +71,9 @@ jobs:
 
   npm-publish-dev:
     needs: build
+    permissions:
+      id-token: write
+      contents: read
     uses: SolidOS/solidos/.github/workflows/publish-prerelease.yml@main
     with:
       node_version: 22

README.md

@@ -50,19 +50,20 @@ Volunteers are always welcome!
 - [Conventions](./Documentation/conventions.md)
 
 ## Development
-To get started, make sure you have Node.js installed (for instance
-through https://github.com/nvm-sh/nvm), and:
-1. run
+
+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:
+
 ```sh
 git clone https://github.com/solidos/solid-panes
 cd solid-panes
 npm install
-npm run start
+npm start
 ```
-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. 
+2. Open http://localhost:5173 in your browser. You should see the pane development sandbox.
 
-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! :)
+3. You can change the `subject` in the sandbox to determine which pane gets rendered. For example, the default subject loads the `profile-pane`.
 
 ## Contributing panes
 When you created a pane, you can either add it as an npm dependency
@@ -80,8 +81,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.
@@ -90,35 +91,4 @@ 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.
-