sol-basic: curated app bundle (include/button/menu/login/form/settings)

New web/sol-basic.js aggregator + rollup target -> dist/sol-basic.bundle.min.js
(IIFE, SolBasic). Registers the six everyday components plus the helpers they
compose internally (accordion, default, modal, window, tree-edit, breadcrumb).
dompurify/marked/n3/rdf-validate-shacl are bundled in; rdflib is the lone
external ($rdf). solid-ui/solid-logic/auth stay runtime globals (BYO, in the
order rdflib -> solid-logic -> solid-ui).

Demos now run from sol-basic where appropriate: button + login use the IIFE
bundle; form uses the ESM entry (window.UI must precede the auto-rendering
form). menu-from-rdf stays on the full bundle (its demo launches sol-query,
which isn't in sol-basic). All four verified rendering in-browser.

install-modes.html documents the new bundle (light vs forms recipes).

Tests: 1197 pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: jeff-zucker

dist/sol-basic.bundle.min.js

@@ -74,6 +74,7 @@ <h2>Two script tags (with login)</h2>
 
   <nav class="page-nav" aria-label="Page sections">
     <a href="#one-tag">One script tag</a>
+    <a href="#app-bundle">App bundle (sol-basic)</a>
     <a href="#per-component">Per-component (smaller)</a>
     <a href="#bundler">With a bundler</a>
     <a href="#importmap">ES modules + importmap</a>
@@ -90,7 +91,7 @@ <h2 id="one-tag">1. One script tag (simplest)</h2>
 &lt;sol-query   endpoint="data.ttl" pattern="?s ?p ?o"&gt;&lt;/sol-query&gt;
 &lt;sol-menu&gt;...&lt;/sol-menu&gt;</code></pre>
     <div class="note-box">
-      <strong>What's included:</strong> sol-menu, sol-include, sol-query, sol-login plus every dep they need at runtime. Auth (the inrupt OIDC client) is bring-your-own — drop in <code>dist/vendor/@inrupt-solid-client-authn-browser.umd.js</code> as a separate <code>&lt;script&gt;</code> tag <em>before</em> the bundle if you need login. Components requiring extra externals (sol-form needs solid-ui; sol-solidos needs mashlib) aren't in this bundle yet — use the importmap path for those.
+      <strong>What's included:</strong> sol-menu, sol-include, sol-query, sol-login plus every dep they need at runtime. Auth (the inrupt OIDC client) is bring-your-own — drop in <code>dist/vendor/@inrupt-solid-client-authn-browser.umd.js</code> as a separate <code>&lt;script&gt;</code> tag <em>before</em> the bundle if you need login. Components requiring extra externals aren't in this bundle: <code>sol-form</code> / <code>sol-settings</code> need solid-ui + solid-logic — use the <a href="#app-bundle"><code>sol-basic</code> app bundle</a> for those; <code>sol-solidos</code> needs mashlib — use the importmap path.
     </div>
 
     <h3>Auth fetch propagation</h3>
@@ -101,6 +102,73 @@ <h3>Auth fetch propagation</h3>
 &lt;sol-query login="#alt" endpoint="https://other.pod/data.ttl" ...&gt;&lt;/sol-query&gt;</code></pre>
   </div>
 
+  <h2 id="app-bundle">1b. App bundle — <code>sol-basic</code> (adds forms &amp; settings)</h2>
+  <div class="api-block">
+    <p>For building an actual app, not just dropping in one widget.
+    <code>dist/sol-basic.bundle.min.js</code> is a curated set:
+    <code>sol-include</code>, <code>sol-button</code>, <code>sol-menu</code>,
+    <code>sol-login</code>, <code>sol-form</code>, and <code>sol-settings</code>
+    — plus the helpers they compose internally (modal / floating surfaces, the
+    menu editor, accordion, breadcrumb, shared defaults). Unlike the all-in-one
+    bundle above, this one <strong>includes <code>sol-form</code> and
+    <code>sol-settings</code></strong>, so you get editable, self-configuring
+    components. Bundled in: <code>dompurify</code>, <code>marked</code>,
+    <code>n3</code>, <code>rdf-validate-shacl</code>. Deliberately excluded:
+    <code>sol-query</code>, <code>sol-feed</code>, <code>sol-pod*</code>,
+    <code>sol-tabs</code>, the chrome widgets (weather / time / calendar) — load
+    those separately if you need them.</p>
+    <p><strong>Bring-your-own peers, in this order</strong> — a singleton
+    handshake; get it wrong and you get two rdflib stores:</p>
+<pre><code>rdflib  →  solid-logic  →  solid-ui</code></pre>
+
+    <h3>Light subset (include / button / menu / login)</h3>
+    <p>These never touch <code>window.UI</code>, so all you need is the rdflib
+    UMD (plus the auth UMD for login):</p>
+<pre><code>&lt;script src="../dist/vendor/rdflib.umd.js"&gt;&lt;/script&gt;
+&lt;script src="../dist/vendor/@inrupt-solid-client-authn-browser.umd.js"&gt;&lt;/script&gt;  &lt;!-- only for sol-login --&gt;
+&lt;script src="../dist/sol-basic.bundle.min.js"&gt;&lt;/script&gt;
+
+&lt;sol-login&gt;&lt;/sol-login&gt;
+&lt;sol-menu from-rdf="data/menu.ttl#Main" region="#content"&gt;&lt;/sol-menu&gt;</code></pre>
+
+    <h3>Forms &amp; settings (sol-form / sol-settings)</h3>
+    <p><code>solid-ui</code> and <code>solid-logic</code> ship only as ESM, so a
+    page that edits data needs an importmap for those two plus a small bootstrap
+    module. Load the bundle through its <strong>ES-module entry</strong>
+    (<code>web/sol-basic.js</code>), not the IIFE file, so init order is
+    guaranteed:</p>
+<pre><code>&lt;script src="../dist/vendor/rdflib.umd.js"&gt;&lt;/script&gt;
+&lt;script type="importmap"&gt;
+{ "imports": {
+  "rdflib":             "../dist/vendor/rdflib.js",
+  "n3":                 "../dist/vendor/n3.js",
+  "dompurify":          "../dist/vendor/dompurify.js",
+  "marked":             "../dist/vendor/marked.js",
+  "solid-ui":           "../dist/vendor/solid-ui.js",
+  "solid-logic":        "../dist/vendor/solid-logic.js",
+  "rdf-validate-shacl": "../dist/vendor/rdf-validate-shacl.js"
+} }
+&lt;/script&gt;
+&lt;script type="module"&gt;
+  import * as solidLogic from 'solid-logic';   // solid-logic BEFORE solid-ui
+  import 'solid-ui';                            // sets window.UI
+  import '../web/sol-basic.js';                 // the ESM entry
+&lt;/script&gt;
+
+&lt;sol-form shape="shapes/x.shacl" subject="data/x.ttl#It"&gt;&lt;/sol-form&gt;
+&lt;sol-settings&gt;&lt;/sol-settings&gt;</code></pre>
+    <div class="note-box">
+      <strong>Why two recipes?</strong> The IIFE bundle is a classic script that
+      defines its elements during parse, so an auto-rendering
+      <code>&lt;sol-form&gt;</code> would run before a deferred module could set
+      <code>window.UI</code>. The ESM entry shares the module graph, so
+      <code>solid-ui</code> is guaranteed to load first. The live demos on the
+      <a href="sol-button-help.html">button</a> /
+      <a href="sol-login-help.html">login</a> pages use the light recipe; the
+      <a href="sol-form-help.html">form</a> page uses the module recipe.
+    </div>
+  </div>
+
   <h2 id="per-component">2. Per-component bundle (smaller)</h2>
   <div class="api-block">
     <p>If you only need one or two components and care about size, load just those. Each component ships its own UMD bundle in <code>dist/</code>. You add one <code>&lt;script&gt;</code> tag per external it needs (loaded as plain UMD globals from a CDN like unpkg).</p>

help/install-modes.html

@@ -8,22 +8,12 @@
   <link rel="stylesheet" href="../web/styles/sol-query-help.css">
   <link rel="stylesheet" href="../web/styles/help.css">
   <script src="../web/scripts/prefs.js"></script>
-  <script type="importmap">
-  {
-    "imports": {
-      "rdflib":     "../dist/vendor/rdflib.js",
-      "n3":         "../dist/vendor/n3.js",
-      "dompurify":  "../dist/vendor/dompurify.js",
-      "marked":     "../dist/vendor/marked.js"
-    }
-  }
-  </script>
-  <script type="module">
-    import '../web/sol-include.js';
-    import '../web/sol-modal.js';
-    import '../web/sol-window.js';
-    import '../web/sol-button.js';
-  </script>
+  <!-- sol-basic bundle registers sol-button + its display surfaces
+       (sol-include / sol-modal / sol-window are bundled in). rdflib UMD
+       first: the bundle reads window.$rdf. No window.UI needed here —
+       buttons don't render forms. -->
+  <script src="../dist/vendor/rdflib.umd.js"></script>
+  <script src="../dist/sol-basic.bundle.min.js"></script>
 </head>
 <body class="scroll-help">
 

help/sol-button-help.html

@@ -18,24 +18,28 @@
     "imports": {
       "rdflib":             "../dist/vendor/rdflib.js",
       "n3":                 "../dist/vendor/n3.js",
+      "dompurify":          "../dist/vendor/dompurify.js",
+      "marked":             "../dist/vendor/marked.js",
       "solid-ui":           "../dist/vendor/solid-ui.js",
       "solid-logic":        "../dist/vendor/solid-logic.js",
       "rdf-validate-shacl": "../dist/vendor/rdf-validate-shacl.js"
     }
   }
   </script>
   <script type="module">
-    // Side-effect imports needed by <sol-form>:
-    //   solid-ui sets window.UI on first eval (fieldFunction lives here).
-    //   solid-logic is exposed on window.solidLogic so swc's core/rdf.js
-    //     rendezvous on the same store.
-    // Then register <sol-form> by importing its module for its
-    // customElements.define side effect.
-    import 'solid-ui';
+    // BYO peers in the singleton-handshake order rdflib → solid-logic →
+    // solid-ui: solid-logic self-registers its singleton store
+    // (Symbol.for('solid-logic-singleton')) that swc's core/rdf.js adopts;
+    // solid-ui then sets window.UI (fieldFunction) that sol-form renders
+    // through. (rdflib is pulled in transitively by both, via the importmap.)
     import * as solidLogic from 'solid-logic';
+    import 'solid-ui';
     if (typeof window !== 'undefined') window.solidLogic = solidLogic;
-    import '../web/sol-form.js';
-    import '../web/sol-include.js';
+    // Register the curated component set via the sol-basic ESM ENTRY — not the
+    // IIFE bundle. The bundle is a classic script that would define sol-form
+    // before this deferred module sets window.UI, racing the auto-rendering
+    // demo; the ESM entry shares this module graph so init order holds.
+    import '../web/sol-basic.js';
   </script>
 
 </head>

help/sol-form-help.html

@@ -8,9 +8,12 @@
   <link rel="stylesheet" href="../web/styles/sol-query-help.css">
   <link rel="stylesheet" href="../web/styles/help.css">
   <script src="../web/scripts/prefs.js"></script>
+  <!-- sol-basic bundle registers sol-login. rdflib UMD ($rdf) + the inrupt
+       auth UMD (window.solidClientAuthn) are sol-login's BYO peers; load
+       both before the bundle. -->
   <script src="../dist/vendor/rdflib.umd.js"></script>
   <script src="../dist/vendor/@inrupt-solid-client-authn-browser.umd.js"></script>
-  <script src="../dist/solid-web-components.bundle.min.js"></script>
+  <script src="../dist/sol-basic.bundle.min.js"></script>
   <style>
     body { padding-top: 8px; }
     b { color: orange; }

help/sol-login-help.html

@@ -114,7 +114,10 @@ <h2>Menus from RDF definition files</h2>
   -->
 
   <!--
-    Solid-web-components (required)
+    Solid-web-components (required) : this demo's menu launches a sol-query
+    item, which is NOT in sol-basic — so it uses the broader self-contained
+    bundle. For a menu that only launches sol-basic components, sol-basic
+    (+ rdflib UMD) is enough; see sol-button / sol-form help.
   -->
   <script src="../dist/solid-web-components.bundle.min.js"></script>
 <!-- ---------------------------------------------------------------- -->

help/sol-menu-from-rdf.html

@@ -256,6 +256,27 @@ export default [
       inlineDynamicImports: true,
     },
   },
+  // ── sol-basic (curated subset: include/button/menu/login/form/settings +
+  //    the helpers those six instantiate by tag: accordion/modal/window/
+  //    tree-edit). dompurify/marked/n3/rdf-validate-shacl are bundled IN;
+  //    rdflib stays the lone BYO peer ($rdf global). solid-ui/solid-logic/
+  //    auth are runtime globals the components probe — never imported, so
+  //    there is nothing to externalize for them. ─────────────────────────────
+  {
+    input:   'web/sol-basic.js',
+    external: (id) => id === 'rdflib' || id.startsWith('https://esm.sh/'),
+    plugins: bundlePlugins,
+    output: {
+      file:      minify
+        ? 'dist/sol-basic.bundle.min.js'
+        : 'dist/sol-basic.bundle.js',
+      format:    'iife',
+      name:      'SolBasic',
+      exports:   'named',
+      inlineDynamicImports: true,
+      globals:   { rdflib: '$rdf' },
+    },
+  },
   // ── all-in-one bundle: every component, rdflib externalized as $rdf ─────────
   // rdflib is treated as a runtime peer (BYO), shipped as
   // `dist/vendor/rdflib.umd.js` which self-publishes `window.$rdf`. Page

rollup.config.js

@@ -0,0 +1,54 @@
+/**
+ * sol-basic.js — curated bundle entry: the everyday-app subset.
+ *
+ * Registers exactly six author-facing components:
+ *   sol-include, sol-button, sol-menu, sol-login, sol-form, sol-settings
+ * …plus the helpers those six conjure / instantiate by tag name at runtime.
+ * These helpers are COMPOSED INTERNALLY — not meant to be author-placed —
+ * but they're global custom elements all the same, so they must be
+ * registered for the six to run at full capacity:
+ *   sol-accordion   — settings panel chrome (static dep of sol-settings)
+ *   sol-default     — singleton holding shared non-CSS defaults (proxy, …)
+ *   sol-modal       — the "modal" display surface + the editor-self gear popup
+ *   sol-window      — the "floating" display surface
+ *   sol-tree-edit   — sol-menu's editor (settings/gear mount it via core/editor)
+ *   sol-breadcrumb  — sol-tree-edit's drill-in/out navigation crumb
+ * The author-facing surface for the conjured ones is the region KEYWORD
+ * (region="modal" / "floating"), not the tag — see core/display-target.js.
+ * Nothing else is pulled in.
+ *
+ * Everything these components need is bundled IN (dompurify, marked, n3,
+ * rdf-validate-shacl are inlined). Bring-your-own runtime peers, loaded
+ * BEFORE this bundle, IN THIS ORDER (rdflib → solid-logic → solid-ui — a
+ * singleton handshake; see project memory):
+ *   - rdflib                              → `window.$rdf` (vendored UMD script tag)
+ *   - solid-logic                         → singleton rdflib store (ESM, importmap)
+ *   - solid-ui                            → `window.UI` widgets (ESM, importmap)
+ *   - @inrupt/solid-client-authn-browser  → `window.solidClientAuthn`
+ *     (only sol-login; vendored UMD script tag)
+ *
+ * NOTE: solid-ui/solid-logic ship only as ESM, so a page that uses sol-form
+ * or sol-settings needs an importmap for those two plus a tiny bootstrap
+ * module that imports them (side-effects window.UI + the store). The
+ * include/button/menu/login subset, which never touches window.UI, can run
+ * from just the rdflib (+auth) UMD script tags and this bundle.
+ */
+
+import './sol-include.js';
+import './sol-button.js';
+import './sol-menu.js';
+import './sol-login.js';
+import './sol-form.js';
+import './sol-settings.js';   // statically pulls in sol-accordion
+
+// Registered-by-tag helpers the six conjure / instantiate at runtime:
+import './sol-default.js';    // singleton holding shared non-CSS defaults (proxy, region…)
+import './sol-modal.js';      // modal display surface + editor-self gear popup
+import './sol-window.js';     // floating-window display surface
+import './sol-tree-edit.js';  // sol-menu's editor
+import './sol-breadcrumb.js'; // sol-tree-edit's drill-in/out navigation crumb
+
+// Surface the JS API on `window.SolBasic.*` for hosts that need the class
+// symbols, not just the registered custom-element tags.
+export { AuthManager } from './sol-login.js';
+export { solFetch } from '../core/auth-fetch.js';