sol-components 2.1.0

package/web/sol-search.js

@@ -0,0 +1,402 @@
+/**
+ * <sol-search> — multi-engine search form, popup or inline.
+ *
+ * Two layouts, chosen by the `view` attribute:
+ *
+ *   view="button"  — (default) an icon trigger that opens a floating
+ *                    panel on click; the panel positions itself flush
+ *                    against the right edge of the trigger. Best for
+ *                    headers / toolbars where space is tight.
+ *   view="inline"  — the search field, Go button, and engine radios are
+ *                    rendered directly with no toggle. Best when you
+ *                    already have a dedicated strip for search.
+ *
+ * Engine sources, in order of precedence:
+ *   `source`   — URL of a Turtle file with a `schema:ItemList` whose
+ *                `schema:itemListElement`s are `hydra:IriTemplate`
+ *                entries (`hydra:template` = RFC 6570 search URL with
+ *                `{query}`, `dct:title` = display name,
+ *                `schema:position` = sort order). Parsed through
+ *                feed-fetch.js#parseEngineList, sharing the single
+ *                rdflib instance from core/rdf.js.
+ *   `engines`  — JSON array of {id,label,url} on the attribute itself.
+ *   built-ins  — a sensible default list (DuckDuckGo / Google /
+ *                Wikipedia / prefix.cc / LOV / Etymology / YouTube /
+ *                Wayback).
+ *
+ * Submitting opens the result in a shared "reader" window (the same
+ * window object is re-used across submissions so it never spawns a new
+ * tab per search).
+ *
+ * Attributes:
+ *   view             "button" | "inline"  (default: button)
+ *   source           "file.ttl#TopicName" — RDF engines list
+ *   engines          JSON array of {id,label,url}
+ *   default-engine   id (or url) of the engine that starts selected
+ *   placeholder      input placeholder (default: "Search…")
+ *
+ * @element sol-search
+ *
+ * @example
+ *   <sol-search></sol-search>
+ *   <sol-search view="inline" default-engine="ddg"></sol-search>
+ *   <sol-search view="inline" source="data/search-engines.ttl#SearchEngines"></sol-search>
+ */
+import { adopt } from '../core/adopt.js';
+import { define } from '../core/define.js';
+import { CSS as SEARCH_CSS, sheet as SEARCH_SHEET } from './styles/sol-search-css.js';
+import { parseEngineList } from './utils/feed-fetch.js';
+import { attachEditorSelfGear } from '../core/editor-self.js';
+
+/** Sensible defaults; callers can override via `engines` or `source`. */
+const DEFAULT_ENGINES = [
+  { id: 'ddg',     label: 'DuckDuckGo', url: 'https://duckduckgo.com/?q=' },
+  { id: 'g',       label: 'Google',     url: 'https://www.google.com/search?q=' },
+  { id: 'wp',      label: 'Wikipedia',  url: 'https://en.wikipedia.org/w/index.php?search=' },
+  { id: 'prefix',  label: 'prefix.cc',  url: 'https://prefix.cc/' },
+  { id: 'lov',     label: 'LOV',        url: 'https://lov.linkeddata.es/dataset/lov/terms?q=' },
+  { id: 'ety',     label: 'Etymology',  url: 'https://www.etymonline.com/search?q=' },
+  { id: 'yt',      label: 'YouTube',    url: 'https://www.youtube.com/results?search_query=' },
+  { id: 'wayback', label: 'Wayback',    url: 'https://web.archive.org/web/*/' },
+];
+
+/** Shared "reader" window — kept across submissions so the same off-canvas
+ *  window is re-used instead of spawning a fresh tab every time. Browsers
+ *  clear a window's name on cross-origin navigation, so we cannot look it
+ *  up by name later; we keep the handle that window.open() returns. */
+let readerWindow = null;
+
+/** A 1024×640 window flush against the right edge, vertically centred. */
+function readerFeatures() {
+  const w = 1024, h = 640;
+  const left = Math.max(0, window.screen.availWidth  - w);
+  const top  = Math.max(0, Math.round((window.screen.availHeight - h) / 2));
+  return `width=${w},height=${h},left=${left},top=${top}`;
+}
+
+/** Open `url` in the shared reader window; returns true when handled. */
+function openInReader(url) {
+  if (!url) return false;
+  if (readerWindow && !readerWindow.closed) {
+    readerWindow.location.href = url;
+    readerWindow.focus();
+    return true;
+  }
+  readerWindow = window.open(url, 'sol-search-reader', readerFeatures());
+  if (readerWindow) { readerWindow.focus(); return true; }
+  return false;
+}
+
+/** HTML-escape a value for safe interpolation into innerHTML. */
+function esc(s) {
+  return String(s).replace(/[&<>"']/g,
+    c => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[c]));
+}
+
+/** Derive a stable engine id from its label (slug-ish, lower-case). */
+function slugify(label) {
+  return String(label).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+}
+
+/** Build the result URL for an engine + query. RDF-sourced engines
+ *  carry `template` with a `{query}` placeholder (RFC 6570-ish);
+ *  built-in / JSON-attr engines carry `url` as a prefix that the query
+ *  is appended to. Both paths URI-encode the query. */
+function expandQuery(eng, q) {
+  const encoded = encodeURIComponent(q);
+  if (eng?.template) return eng.template.replace(/\{query\}/g, encoded);
+  if (eng?.url)      return eng.url + encoded;
+  return 'https://duckduckgo.com/?q=' + encoded;
+}
+
+// RDF parsing is delegated to feed-fetch.js#parseSourceList — the same
+// utility sol-feed uses for its bookmark/SKOS source files, which routes
+// through core/rdf.js (the single rdflib instance the suite shares).
+
+/**
+ * Multi-engine search component.
+ *
+ * @class SolSearch
+ * @extends HTMLElement
+ */
+class SolSearch extends HTMLElement {
+  static get observedAttributes() {
+    return ['view', 'source', 'engines', 'default-engine', 'placeholder'];
+  }
+
+  /** SHACL shape describing the engines list. Discovery via
+   *  &lt;sol-settings&gt; picks this up; the shape uses a forward
+   *  `schema:itemListElement` so the editor lists each
+   *  `hydra:IriTemplate` that's a member of the currently-edited
+   *  `schema:ItemList`. */
+  static get shape() {
+    return new URL('../shapes/search-engines.shacl', import.meta.url).href;
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._open    = false;              // only relevant when view=button
+    this._engines = DEFAULT_ENGINES;
+    this._view    = 'button';           // resolved in connectedCallback
+    this._built   = false;              // true once the shadow tree exists
+  }
+
+  async connectedCallback() {
+    // Reset for the re-entry case (view change triggers a rebuild).
+    this.shadowRoot.adoptedStyleSheets = [];
+    this.shadowRoot.innerHTML = '';
+    adopt(this.shadowRoot, { sheet: SEARCH_SHEET, css: SEARCH_CSS });
+
+    this._view = (this.getAttribute('view') || 'button').toLowerCase();
+    // Surface the view on the host so external rules / parts can select on it.
+    this.dataset.view = this._view;
+
+    // The form body is shared between layouts — the only difference is
+    // whether it's wrapped in an [open]-toggled panel and preceded by a
+    // trigger button. The .engines-line wrapper keeps the engines row
+    // as a single flex item below the input + Go row; the engines
+    // inside flex-wrap onto a second (or third) row as space allows.
+    const formHTML = `
+      <form class="form" part="form">
+        <div class="row">
+          <input class="q" type="search" name="q" autocomplete="off" part="input">
+          <button class="go" type="submit" part="submit">Go</button>
+        </div>
+        <div class="engines-line">
+          <div class="engines" aria-label="Search engine"></div>
+        </div>
+      </form>
+    `;
+
+    if (this._view === 'inline') {
+      // Render the form directly in the shadow root — no trigger, no
+      // floating panel, no document-level listeners. Engines simply
+      // wrap onto subsequent rows when the list outgrows the
+      // viewport.
+      const wrap = document.createElement('div');
+      wrap.innerHTML = formHTML;
+      while (wrap.firstChild) this.shadowRoot.appendChild(wrap.firstChild);
+    } else {
+      const wrap = document.createElement('div');
+      wrap.innerHTML = `
+        <button class="icon" type="button" part="trigger"
+                aria-haspopup="dialog" aria-expanded="false" title="Search">⌕</button>
+        <div class="panel" role="dialog" aria-modal="false" part="panel">
+          ${formHTML}
+          <span class="sr-only">Press Escape to close</span>
+        </div>
+      `;
+      while (wrap.firstChild) this.shadowRoot.appendChild(wrap.firstChild);
+      this.$btn   = this.shadowRoot.querySelector('button.icon');
+      this.$panel = this.shadowRoot.querySelector('.panel');
+
+      this._onDocPointerDown = (e) => {
+        const path = e.composedPath?.() ?? [];
+        if (!path.includes(this)) this.close();
+      };
+      this._onDocKeyDown = (e) => { if (e.key === 'Escape') this.close(); };
+
+      this.$btn.addEventListener('click', () => this.toggle());
+    }
+
+    this.$form    = this.shadowRoot.querySelector('form.form');
+    this.$q       = this.shadowRoot.querySelector('input.q');
+    this.$engines = this.shadowRoot.querySelector('.engines');
+
+    this._loadEngines();
+    this._renderEngines();
+    this._applyPlaceholder();
+    this._built = true;
+
+    this.$form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      this._doSearch();
+    });
+
+    // If a `source` is set, fetch + parse it as a schema:ItemList of
+    // hydra:IriTemplate engines (see feed-fetch.js#parseEngineList).
+    // The default / engines-attr list is shown in the meantime so the
+    // UI is never blank, and stays put if the source request fails.
+    const source = this.getAttribute('source');
+    if (source) {
+      try {
+        const list = await parseEngineList(source);
+        if (list && list.length) {
+          this._engines = list.map((item, i) => ({
+            id:       item.id || slugify(item.label) || `e${i}`,
+            label:    item.label,
+            template: item.template,
+          }));
+          this._loadEngines();
+          this._renderEngines();
+        }
+      } catch (err) {
+        // Source failed — leave the default / engines-attr list in
+        // place; surface to the console so the page author sees it.
+        console.warn(`[sol-search] source ${source}: ${err.message}`);
+      }
+    }
+
+    if (this.hasAttribute('editor-self')) attachEditorSelfGear(this);
+  }
+
+  disconnectedCallback() {
+    if (this._onDocPointerDown) {
+      document.removeEventListener('pointerdown', this._onDocPointerDown, { capture: true });
+    }
+    if (this._onDocKeyDown) {
+      document.removeEventListener('keydown', this._onDocKeyDown);
+    }
+    this._built = false;
+  }
+
+  /**
+   * Re-read `source` and rebuild the engines panel. Public hook used by
+   * external editors (e.g. dk-settings) after the engines TTL changes.
+   * sol-search loads its source inline in connectedCallback, so reload
+   * tears down and reconnects to walk the same path.
+   */
+  async reload() {
+    this.disconnectedCallback();
+    await this.connectedCallback();
+  }
+
+  attributeChangedCallback(name) {
+    // Static-attribute changes fire after the element is in the DOM but
+    // before our first connectedCallback runs (isConnected is already
+    // true). Bailing on `_built` is the correct gate — `connectedCallback`
+    // applies the attributes in order anyway, and we re-apply on later
+    // changes.
+    if (!this._built) return;
+
+    // Switching `view` requires a full rebuild — disconnect listeners,
+    // clear the root, and re-run connectedCallback (which resets the
+    // shadow root and re-loads the source if one is set).
+    if (name === 'view') {
+      this.disconnectedCallback();
+      this.connectedCallback();
+      return;
+    }
+    this._loadEngines();
+    this._renderEngines();
+    this._applyPlaceholder();
+  }
+
+  _loadEngines() {
+    // `engines` attribute beats the built-in defaults; an RDF `source`
+    // result (resolved in connectedCallback's tail) beats both.
+    const enginesAttr = this.getAttribute('engines');
+    if (enginesAttr) {
+      try {
+        const parsed = JSON.parse(enginesAttr);
+        if (Array.isArray(parsed) && parsed.length) this._engines = parsed;
+      } catch { /* leave whatever was there on bad JSON */ }
+    } else if (!this.getAttribute('source')) {
+      this._engines = DEFAULT_ENGINES;
+    }
+    const def = this.getAttribute('default-engine');
+    // Allow matching by id or by URL prefix — convenient when defaults
+    // are RDF-sourced and ids are slugified labels.
+    this._defaultEngine = def
+      || this._engines.find(e => /duckduckgo/i.test(e.label))?.id
+      || this._engines[0]?.id
+      || 'ddg';
+  }
+
+  _applyPlaceholder() {
+    if (!this.$q) return;
+    this.$q.setAttribute('placeholder', this.getAttribute('placeholder') || 'Search…');
+  }
+
+  _renderEngines() {
+    if (!this.$engines) return;
+    // Unique radio-group name per render so repeated re-renders don't
+    // accidentally cross-link with stale inputs in the same shadow root.
+    const name = `engine-${Math.random().toString(36).slice(2, 8)}`;
+    // Radios go directly in .engines — the container is a flex-wrap
+    // row, so a list that's too wide for one line continues on a
+    // second (or third) row beneath. No track wrapper, no carousel.
+    this.$engines.innerHTML = this._engines.map(eng => `
+      <label class="engine">
+        <input type="radio" name="${name}" value="${esc(eng.id)}">
+        <span>${esc(eng.label ?? eng.id)}</span>
+      </label>
+    `).join('');
+
+    const radios = [...this.shadowRoot.querySelectorAll(`input[name="${name}"]`)];
+    const pick = radios.find(r => r.value === this._defaultEngine) || radios[0];
+    if (pick) pick.checked = true;
+  }
+
+  /* ── view: button (popup) controls ─────────────────────────────────── */
+
+  toggle() {
+    if (this._view !== 'button') return;
+    this._open ? this.close() : this.openAtButton();
+  }
+
+  openAtButton() {
+    if (this._view !== 'button') return;
+    this._open = true;
+    this.$btn.setAttribute('aria-expanded', 'true');
+    this.$panel.setAttribute('open', '');
+
+    // Measure once visible, then position so the panel's right edge lines
+    // up with the trigger's right edge (drops down-and-left). Clamps into
+    // the viewport with a 10px margin.
+    this.$panel.style.left = '0px';
+    this.$panel.style.top  = '0px';
+
+    const btn   = this.$btn.getBoundingClientRect();
+    const panel = this.$panel.getBoundingClientRect();
+    const margin = 10;
+
+    let left = btn.right - panel.width;
+    let top  = btn.bottom + 4;
+    left = Math.max(margin, Math.min(left, window.innerWidth  - panel.width  - margin));
+    top  = Math.max(margin, Math.min(top,  window.innerHeight - panel.height - margin));
+
+    this.$panel.style.left = `${left}px`;
+    this.$panel.style.top  = `${top}px`;
+
+    document.addEventListener('pointerdown', this._onDocPointerDown, { capture: true });
+    document.addEventListener('keydown',     this._onDocKeyDown);
+    queueMicrotask(() => this.$q.focus());
+  }
+
+  close() {
+    if (this._view !== 'button') return;
+    if (!this._open) return;
+    this._open = false;
+    this.$btn.setAttribute('aria-expanded', 'false');
+    this.$panel.removeAttribute('open');
+    document.removeEventListener('pointerdown', this._onDocPointerDown, { capture: true });
+    document.removeEventListener('keydown',     this._onDocKeyDown);
+  }
+
+  /* ── shared submit ────────────────────────────────────────────────── */
+
+  _selectedEngine() {
+    const checked = this.shadowRoot.querySelector('input[type="radio"]:checked');
+    return this._engines.find(e => e.id === checked?.value) || this._engines[0];
+  }
+
+  _doSearch() {
+    const q = (this.$q.value || '').trim();
+    if (!q) return;
+    const eng = this._selectedEngine();
+    const url = expandQuery(eng, q);
+    if (!openInReader(url)) {
+      // Popup blocked; fall through to a normal new-tab open so the user
+      // still gets the search result rather than nothing.
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+    if (this._view === 'button') this.close();
+    // Inline view: leave the input populated so the user can refine and
+    // submit again without retyping.
+  }
+}
+
+define('sol-search', SolSearch);
+export { SolSearch };

package/web/sol-settings.js

@@ -0,0 +1,199 @@
+/**
+ * <sol-settings> — discovery-driven settings page.
+ *
+ * Walks the current document (crossing into every shadow root) for
+ * elements whose custom-element class declares an editor (`static get
+ * editor()` or `static get shape()`). For each, builds one accordion
+ * panel: summary shows a friendly label, body lazy-mounts the
+ * declared editor element on first expand, wired with the host's
+ * `source` / `from-rdf` subject. On successful save the host
+ * component's `reload()` (if present) is invoked.
+ *
+ * No configuration: drop a `<sol-settings></sol-settings>` anywhere
+ * on the page; widgets elsewhere on the page are picked up
+ * automatically. Hosts can render widgets into a keep-alive region pane so
+ * they stay mounted (hidden) when the user navigates to the settings page;
+ * otherwise discovery only sees widgets currently in the DOM.
+ *
+ * Attributes:
+ *   none
+ *
+ * Methods:
+ *   refresh() — re-walk and rebuild the accordion if the widget set
+ *               has changed (signature: tag + subject). Cheap no-op
+ *               when nothing changed. Use from consumer code when a
+ *               new editable widget is mounted after sol-settings
+ *               connected. (Tab activation triggers this automatically
+ *               via the sol-tab-activate listener.)
+ *
+ * Events (consumed):
+ *   sol-form-save — bubbling from any embedded editor; triggers
+ *                   `host.reload()` on the corresponding source widget.
+ */
+
+import { define } from '../core/define.js';
+import { buildEditorElement, triggerSelfEditor, editPlacement } from '../core/editor.js';
+import { findExtensionPoints } from '../core/extension-points.js';
+import './sol-accordion.js';
+
+class SolSettings extends HTMLElement {
+  connectedCallback() {
+    if (this._wired) return;
+    this._wired = true;
+    // Defer one microtask so the surrounding DOM (e.g., a sibling
+    // keep-alive wrapper that holds the dashboard widgets) is fully
+    // attached before discovery walks.
+    queueMicrotask(() => this._build());
+
+    // Re-discover when the editable-component set changes. Generic trigger: a
+    // debounced MutationObserver on the whole document — works with any app, no
+    // swc-specific navigation needed. `sol-tab-activate` stays as an extra hint
+    // for keep-alive tab UIs (harmless if no one fires it). The rebuild only
+    // happens when the discovered set actually changed (signature compare).
+    this._rebuild = () => {
+      if (this.offsetParent === null) return;   // we're hidden; ignore
+      this._rebuildIfChanged();
+    };
+    this._mo = new MutationObserver(() => {
+      clearTimeout(this._moTimer);
+      this._moTimer = setTimeout(this._rebuild, 50);
+    });
+    this._mo.observe(document.documentElement, { childList: true, subtree: true });
+    document.addEventListener('sol-tab-activate', this._rebuild);
+  }
+
+  disconnectedCallback() {
+    if (this._mo) { this._mo.disconnect(); this._mo = null; }
+    clearTimeout(this._moTimer);
+    if (this._rebuild) {
+      document.removeEventListener('sol-tab-activate', this._rebuild);
+      this._rebuild = null;
+    }
+  }
+
+  _build() {
+    const widgets = this._discover();
+    this._lastSignature = signatureOf(widgets);
+    this.innerHTML = '';
+    if (!widgets.length) {
+      this._empty();
+      return;
+    }
+
+    const accordion = document.createElement('sol-accordion');
+    accordion.setAttribute('start-closed', '');
+    widgets.forEach((w, i) => {
+      const panel = document.createElement('div');
+      const head = document.createElement('div');
+      head.textContent = w.label;
+      const body = document.createElement('div');
+      body.className = 'sol-settings-slot';
+      body.dataset.widgetIdx = String(i);
+      panel.append(head, body);
+      accordion.appendChild(panel);
+    });
+    this.appendChild(accordion);
+
+    // sol-accordion runs synchronously on connect; once it has cloned
+    // the author divs into <details>, attach lazy-mount handlers.
+    Promise.resolve().then(() => this._wireLazy(accordion, widgets));
+  }
+
+  _rebuildIfChanged() {
+    const widgets = this._discover();
+    const sig = signatureOf(widgets);
+    if (sig === this._lastSignature) return;
+    this._build();
+  }
+
+  refresh() { this._rebuildIfChanged(); }
+
+  _empty() {
+    const note = document.createElement('p');
+    note.className = 'sol-settings-empty';
+    note.textContent = 'No editable widgets found on this page.';
+    this.appendChild(note);
+  }
+
+  _wireLazy(accordion, widgets) {
+    const detailsList = accordion.querySelectorAll('details');
+    detailsList.forEach((det, i) => {
+      const widget = widgets[i];
+      if (!widget) return;
+      const section = det.querySelector('.accordion-content-section');
+      if (!section) return;
+      let mounted = false;
+      const mount = () => {
+        if (mounted) return;
+        mounted = true;
+        section.innerHTML = '';
+        // forms:"self" — the component renders its own editor; offer a trigger.
+        if (widget.spec && widget.spec.self) {
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'sol-settings-self-open';
+          btn.textContent = `Edit ${widget.label}…`;
+          btn.addEventListener('click', () => triggerSelfEditor(widget.el, widget.spec));
+          section.appendChild(btn);
+          return;
+        }
+        const editor = buildEditorElement(widget.el, widget.spec);
+        if (!editor) {
+          section.textContent = 'No editor available.';
+          return;
+        }
+        editor.addEventListener('sol-form-save', () => {
+          if (typeof widget.el.reload === 'function') {
+            widget.el.reload().catch(() => {});
+          }
+        });
+        section.appendChild(editor);
+      };
+      if (det.open) mount();
+      det.addEventListener('toggle', () => { if (det.open) mount(); });
+    });
+  }
+
+  // Editable widgets = every element offering the `edit` extension point. The
+  // walk + shadow-crossing + resolution lives in core/extension-points.js; this
+  // is just the `edit` case of the general protocol. Opt-out attr stays
+  // `data-settings-skip` for back-compat with pages that use it.
+  _discover() {
+    return findExtensionPoints('edit', { skipAttr: 'data-settings-skip' })
+      .filter(({ el }) => el !== this && !this.contains(el))
+      // inPlace editors render a gear ON the element itself — sol-settings
+      // gathers only the "collected" ones (the default placement).
+      .filter(({ el, spec }) => editPlacement(el, spec) === 'collected')
+      .map(({ el, spec }) => ({
+        el, spec,
+        label: el.getAttribute('label') || labelFromTag(el.localName),
+      }));
+  }
+}
+
+// Fallback label when an element has no `label` attribute. Drops the leading
+// vendor-prefix segment (sol-, dk-, my-, …) generically and title-cases the
+// rest — `sol-weather` → "Weather", `my-thing` → "Thing", `sol-dropdown-button`
+// → "Dropdown Button". Any component can override with an explicit `label`.
+function labelFromTag(tag) {
+  return tag
+    .replace(/^[a-z0-9]+-/, '')
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+/** Stable identity for a discovered widget set, used to detect when a
+ *  later re-discovery has actually changed anything. Tag + subject is
+ *  enough — two instances of the same widget with the same source
+ *  would render an identical accordion panel. */
+function signatureOf(widgets) {
+  return widgets
+    .map(w => `${w.el.localName}#${w.el.getAttribute('source') || w.el.getAttribute('from-rdf') || ''}`)
+    .sort()
+    .join('|');
+}
+
+define('sol-settings', SolSettings);
+export { SolSettings };
+export default SolSettings;

package/web/sol-solidos.js

@@ -0,0 +1,93 @@
+import { define } from '../core/define.js';
+import { ensureDocStyle } from '../core/adopt.js';
+
+function getMashlib() {
+  const w = typeof window !== 'undefined' ? window : {};
+  const g = typeof globalThis !== 'undefined' ? globalThis : (typeof self !== 'undefined' ? self : w);
+  const Mashlib = w.Mashlib || g.Mashlib;
+  const SolidLogic = w.SolidLogic || g.SolidLogic;
+  const $rdf = w.$rdf || g.$rdf;
+  const panes = w.panes || g.panes;
+  if (!Mashlib || !panes) return null;
+  const initMainPage = Mashlib.initMainPage || Mashlib.default?.initMainPage || Mashlib.default;
+  if (!initMainPage) return null;
+  return { Mashlib, initMainPage, SolidLogic, $rdf, panes };
+}
+
+// Hide mashlib's own header/footer chrome — when sol-solidos is mounted
+// inside a host shell (dk), the host already owns login + help/prefs
+// affordances, so a duplicate login button in mashlib's header is both
+// confusing and broken (popup-mode pod sessions don't reach mashlib's
+// default Inrupt session, so its login button stalls). Mashlib's reads
+// go through rdflib's patched Fetcher → solFetch → sol-auth-needed →
+// the host's <sol-login> chip handles the prompt and retries.
+const HOST_CSS = `
+  sol-solidos { display: block; width: 100%; height: 100%; }
+  sol-solidos > #PageHeader,
+  sol-solidos > #PageFooter { display: none; }
+`;
+
+class SolSolidos extends HTMLElement {
+  static get observedAttributes() { return ['source']; }
+
+  constructor() {
+    super();
+    this._ready = false;
+    this._m = null;
+    this._outliner = null;
+  }
+
+  connectedCallback() {
+    if (this.isConnected && !this._ready) this._init();
+  }
+
+  attributeChangedCallback(name, oldV, newV) {
+    if (name === 'source' && oldV !== newV && this._ready) {
+      this._goTo(newV);
+    }
+  }
+
+  _goTo(uri) {
+    if (!uri || !this._outliner) return;
+    const subject = this._m.$rdf.sym(uri);
+    this._outliner.GotoSubject(subject, true, undefined, true, undefined);
+  }
+
+  _init() {
+    const m = getMashlib();
+    if (!m) {
+      const w = typeof window !== 'undefined' ? window : {};
+      const g = typeof globalThis !== 'undefined' ? globalThis : {};
+      console.error('[sol-solidos] getMashlib() returned null. window.Mashlib:', w.Mashlib,
+        'globalThis.Mashlib:', g.Mashlib, 'window.panes:', w.panes, 'globalThis.panes:', g.panes);
+      this.textContent = 'mashlib not loaded \u2014 add <script src="mashlib.js"> to the page';
+      return;
+    }
+    this._m = m;
+    ensureDocStyle(document, 'sol-solidos-style', HOST_CSS);
+
+    // Build the DOM structure mashlib expects
+    this.innerHTML = `
+      <header id="PageHeader" role="banner"></header>
+      <main id="mainContent" tabindex="-1">
+        <div class="TabulatorOutline" id="DummyUUID">
+          <table id="outline"></table>
+          <div id="GlobalDashboard"></div>
+        </div>
+      </main>
+      <footer id="PageFooter" role="contentinfo"></footer>
+    `;
+
+    const SL = m.SolidLogic?.solidLogicSingleton || m.SolidLogic?.default?.solidLogicSingleton;
+    const store = SL?.store;
+    const uri = this.getAttribute('source') || window.location.href;
+
+    this._outliner = m.panes.getOutliner(document);
+    m.initMainPage(store, uri);
+
+    this._ready = true;
+  }
+}
+
+define('sol-solidos', SolSolidos);
+export default SolSolidos;