sol-components 2.1.0

package/web/utils/renderers/markdown.js

@@ -0,0 +1,19 @@
+export async function renderMarkdown(content, outputEl) {
+  const { marked } = await import('marked');
+
+  marked.setOptions({ gfm: true, breaks: false });
+  const html = marked.parse(content);
+
+  outputEl.innerHTML = '';
+  const wrapper = document.createElement('div');
+  wrapper.className = 'sle-md-preview';
+  wrapper.innerHTML = html;
+
+  // Make links open in a new tab safely
+  wrapper.querySelectorAll('a').forEach(a => {
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+  });
+
+  outputEl.appendChild(wrapper);
+}

package/web/utils/renderers/mermaid.js

@@ -0,0 +1,54 @@
+let mermaidReady = false;
+let _mermaid = null;
+let _mmdSeq = 0;
+
+async function ensureMermaid() {
+  if (mermaidReady) return _mermaid;
+  const m = await import('https://esm.sh/mermaid@10');
+  const mermaid = m.default || m.mermaid || m;
+  mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose' });
+  _mermaid = mermaid;
+  mermaidReady = true;
+  return mermaid;
+}
+
+export async function renderMermaid(content, outputEl) {
+  // Strip %% comment lines ourselves before handing the source to
+  // Mermaid — its built-in comment handling is unreliable when a
+  // diagram opens with a comment block. %%{…}%% init directives are
+  // NOT comments and are kept.
+  const trimmed = content
+    .split(/\r?\n/)
+    .filter(line => !/^\s*%%(?!\{)/.test(line))
+    .join('\n')
+    .trim();
+  if (!trimmed) {
+    outputEl.innerHTML = '<p style="padding:1rem;color:#888">Enter a Mermaid diagram above.</p>';
+    return;
+  }
+
+  let mermaid;
+  try {
+    mermaid = await ensureMermaid();
+  } catch (e) {
+    outputEl.innerHTML = '<p style="padding:1rem;color:#c0392b">Failed to load Mermaid library.</p>';
+    return;
+  }
+
+  const id = 'mmd-' + (++_mmdSeq);
+  try {
+    const { svg } = await mermaid.render(id, trimmed);
+    outputEl.innerHTML = svg;
+    // Make the diagram responsive — fit the preview pane as it is
+    // resized / zoomed, instead of Mermaid's fixed pixel max-width.
+    const svgEl = outputEl.querySelector('svg');
+    if (svgEl) { svgEl.style.maxWidth = '100%'; svgEl.style.height = 'auto'; }
+  } catch (e) {
+    // Mermaid leaves orphan elements on parse errors — clean up
+    const orphan = document.getElementById('d' + id);
+    if (orphan) orphan.remove();
+    outputEl.innerHTML = `<pre style="padding:1rem;color:#c0392b;white-space:pre-wrap;font-size:.85em">Diagram error: ${
+      (e.message || String(e)).replace(/<[^>]*>/g, '')
+    }</pre>`;
+  }
+}

package/web/utils/renderers/turtle.js

@@ -0,0 +1,51 @@
+import { drawForceGraph } from './d3-force.js';
+import { rdf } from '../../../core/rdf.js';
+
+export async function renderTurtle(content, outputEl) {
+  if (!rdf.isReady()) throw new Error('rdflib not available');
+
+  const store = rdf.graph();
+  try {
+    rdf.parse(content, store, 'http://example.org/', 'text/turtle');
+  } catch (e) {
+    throw new Error(`Turtle parse error: ${e.message}`);
+  }
+
+  const labelPredicates = new Set([
+    'http://www.w3.org/2000/01/rdf-schema#label',
+    'http://xmlns.com/foaf/0.1/name',
+    'http://www.w3.org/2004/02/skos/core#prefLabel',
+    'http://purl.org/dc/elements/1.1/title',
+    'http://purl.org/dc/terms/title',
+    'https://schema.org/name',
+  ]);
+
+  // Just the local term: everything after the last '/' or '#'.
+  const shortId = uri => uri.split(/[/#]/).pop() || uri;
+
+  const nodes = new Map();
+  const links = [];
+
+  store.statements.forEach(({ subject: s, predicate: p, object: o }) => {
+    if (!nodes.has(s.value)) nodes.set(s.value, { id: s.value, label: shortId(s.value), displayLabel: null, properties: [] });
+
+    if (o.termType === 'NamedNode') {
+      if (!nodes.has(o.value)) nodes.set(o.value, { id: o.value, label: shortId(o.value), displayLabel: null, properties: [] });
+      links.push({ source: s.value, target: o.value, label: shortId(p.value) });
+    } else if (o.termType === 'Literal') {
+      const node = nodes.get(s.value);
+      if (labelPredicates.has(p.value)) {
+        node.displayLabel = o.value;
+      } else {
+        node.properties.push(`${shortId(p.value)} ${o.value}`);
+      }
+    }
+  });
+
+  if (nodes.size === 0) {
+    outputEl.innerHTML = '<p style="padding:1rem;color:#888">No triples to display.</p>';
+    return;
+  }
+
+  await drawForceGraph(outputEl, { nodes: [...nodes.values()], links });
+}

package/web/utils/sol-query-triple-patterns.js

@@ -0,0 +1,151 @@
+/**
+ * Triple-pattern parser and SPARQL converter.
+ * Converts a strict 3-part triple pattern (subject predicate object) to SPARQL.
+ *
+ * Grammar (strict — matches the W3C triple-pattern spec):
+ *   subject:   named-var (?x) | <uri> | prefix:local
+ *   predicate: named-var | <uri> | prefix:local
+ *   object:    named-var | <uri> | prefix:local | "literal"[@lang|^^<datatype>]
+ *
+ * Rejected: bare `?` (all variables must be named), bare words, unquoted
+ * literals, numeric literals without quotes.
+ */
+
+const NAMED_VAR_RE = /^\?[A-Za-z_][A-Za-z0-9_]*$/;
+
+export class TriplePatternParser {
+  constructor(endpoint) {
+    this.endpoint = endpoint;
+  }
+
+  /**
+   * Parse a triple-pattern string into a SPARQL SELECT query.
+   * @param {string} pattern - "subject predicate object"
+   * @returns {string} A valid SPARQL SELECT query
+   * @throws {Error} If the pattern is invalid
+   */
+  parse(pattern) {
+    const tokens = _tokenizeTriplePattern(pattern);
+    if (tokens.length !== 3) {
+      throw new Error(`Triple pattern must have exactly 3 parts: subject predicate object (got ${tokens.length})`);
+    }
+    const [s, p, o] = tokens.map(t => this.expandTerm(t));
+    return `SELECT * WHERE { ${s} ${p} ${o} }`;
+  }
+
+  expandTerm(term) {
+    if (term === '?') {
+      throw new Error('Bare "?" is not allowed — use a named variable like "?x"');
+    }
+    if (term.startsWith('?')) {
+      if (!NAMED_VAR_RE.test(term)) {
+        throw new Error(`Invalid variable "${term}" — must match ?[A-Za-z_][A-Za-z0-9_]*`);
+      }
+      return term;
+    }
+    if (term.startsWith('<') && term.endsWith('>')) return term;
+    if (term.startsWith('"')) {
+      if (!/^"([^"\\]|\\.)*"(@[A-Za-z-]+|\^\^<[^>]+>)?$/.test(term)) {
+        throw new Error(`Malformed literal "${term}" — must be "value" with optional @lang or ^^<datatype>`);
+      }
+      return term;
+    }
+    if (_isCurie(term)) return term;
+    throw new Error(
+      `Unrecognized term "${term}" — must be a named variable (?x), <uri>, prefix:local, or quoted "literal"`
+    );
+  }
+}
+
+/** Validator for triple-pattern syntax. */
+export class TriplePatternValidator {
+  static validate(input) {
+    if (!input || typeof input !== 'string') {
+      return { valid: false, error: 'Input must be a non-empty string' };
+    }
+    let tokens;
+    try { tokens = _tokenizeTriplePattern(input); }
+    catch (e) { return { valid: false, error: e.message }; }
+
+    if (tokens.length !== 3) {
+      return { valid: false, error: `Triple pattern needs exactly 3 parts — got ${tokens.length}` };
+    }
+    const p = new TriplePatternParser('');
+    try {
+      p.expandTerm(tokens[0]);
+      p.expandTerm(tokens[1]);
+      p.expandTerm(tokens[2]);
+    } catch (e) {
+      return { valid: false, error: e.message };
+    }
+    return { valid: true };
+  }
+
+  static getHelpMessage() {
+    return `
+Triple-pattern format: subject predicate object
+
+Examples:
+  ?person foaf:name "Alice"         — People named Alice
+  <http://example.org/me> ?p ?o     — All properties of a subject
+  ?s ?p ?o                          — All triples
+  ex:alice ex:knows ?friend         — Alice's friends
+
+Term types:
+  ?name          — Named variable (bare "?" is NOT allowed)
+  <uri>          — Full URI
+  prefix:local   — Prefixed URI (CURIE)
+  "literal"      — String literal (bare words and numbers are NOT accepted)
+  "x"@en         — Literal with language tag
+  "1"^^<http://www.w3.org/2001/XMLSchema#integer>  — Typed literal
+    `.trim();
+  }
+}
+
+// ── Internal helpers ─────────────────────────────────────────────────────────
+function _isCurie(term) {
+  const m = term.match(/^([A-Za-z_][A-Za-z0-9_-]*):([^\s]*)$/);
+  if (!m) return false;
+  if (/^(https?|ftp|file|urn|mailto|data|tel|news|gopher|ldap|about):/i.test(term)) return false;
+  return true;
+}
+
+function _tokenizeTriplePattern(input) {
+  const out = [];
+  const s = String(input).trim();
+  let i = 0;
+  while (i < s.length) {
+    while (i < s.length && /\s/.test(s[i])) i++;
+    if (i >= s.length) break;
+    if (s[i] === '"') {
+      let j = i + 1;
+      while (j < s.length && s[j] !== '"') {
+        if (s[j] === '\\' && j + 1 < s.length) j += 2;
+        else j++;
+      }
+      if (j >= s.length) throw new Error(`Unterminated literal starting at position ${i}`);
+      j++;
+      if (s[j] === '@') {
+        j++;
+        while (j < s.length && /[A-Za-z-]/.test(s[j])) j++;
+      } else if (s[j] === '^' && s[j + 1] === '^' && s[j + 2] === '<') {
+        j += 3;
+        while (j < s.length && s[j] !== '>') j++;
+        if (j >= s.length) throw new Error('Unterminated datatype IRI');
+        j++;
+      }
+      out.push(s.slice(i, j));
+      i = j;
+    } else {
+      let j = i;
+      while (j < s.length && !/\s/.test(s[j])) j++;
+      out.push(s.slice(i, j));
+      i = j;
+    }
+  }
+  return out;
+}
+
+// Back-compat aliases (deprecated — prefer the new names).
+export const MiniQueryParser = TriplePatternParser;
+export const MiniQueryValidator = TriplePatternValidator;

package/web/utils/sol-query-ui.js

@@ -0,0 +1,250 @@
+import { mkLink } from '../views/_helpers.js';
+import { render as renderTable } from '../views/table.js';
+
+// W3C SPARQL Query Results JSON envelope helper.
+function w3c(vars, bindings) { return { head: { vars }, results: { bindings } }; }
+
+export class SparqlResultsRenderer {
+  constructor(container) {
+    this.container = container;
+    this._bnodeData = new Map();
+    this._modal     = null;
+
+    // Bnode-link clicks: open modal with the node's properties
+    container.addEventListener('click', e => {
+      const a = e.target.closest('a.bnode-link');
+      if (!a) return;
+      e.preventDefault();
+      const idx  = parseInt(a.dataset.bnodeIdx, 10);
+      const data = this._bnodeData.get(idx);
+      if (data) this._showBnodeModal(data);
+    });
+  }
+
+  showLoading(message = 'Loading results...') {
+    this.container.innerHTML = `<div class="loading" role="status" aria-live="polite">${message}</div>`;
+  }
+
+  showError(message) {
+    this.container.innerHTML = `<div class="error" role="alert">${message}</div>`;
+  }
+
+  showNoResults() {
+    this.container.innerHTML = '<div class="loading" role="status" aria-live="polite">No results found</div>';
+  }
+
+  // ── Main entry point ────────────────────────────────────────────────────────
+  // viewFn: a free function with signature render(container, data, host, options)
+  // `data` is the W3C SPARQL Query Results JSON envelope:
+  //   { head: { vars: string[] }, results: { bindings: Row[] } }
+  renderResults(data, viewFn, options = {}) {
+    this._bnodeData.clear();
+
+    const vars     = data.head.vars;
+    const bindings = data.results.bindings;
+
+    if (!bindings || bindings.length === 0) {
+      this.showNoResults();
+      return;
+    }
+
+    // 1 row × 1 column → scalar value, no table
+    if (vars.length === 1 && bindings.length === 1) {
+      const val = bindings[0][vars[0]];
+      this.container.innerHTML = '';
+      if (val && val.type === 'uri') {
+        this.container.appendChild(mkLink(val));
+      } else {
+        const span = document.createElement('span');
+        span.className = 'single-value';
+        span.textContent = val ? val.value : '';
+        this.container.appendChild(span);
+      }
+      return;
+    }
+
+    const pivoted = this._pivotSPO(data);
+    if (pivoted) {
+      this.container.innerHTML = '';
+      this._renderView(pivoted, viewFn, options);
+      return;
+    }
+
+    const grouped = this._groupByPredicate(data);
+
+    this.container.innerHTML = '';
+    this._renderView(grouped, viewFn, options);
+  }
+
+  _renderView(data, viewFn, options) {
+    const mkBnodeLink = v => this._mkBnodeLink(v);
+    viewFn(this.container, data, null, { ...options, mkBnodeLink });
+  }
+
+  // ── Pivot s,p,o → predicates as columns, subjects as rows ─────────────────
+  _pivotSPO(data) {
+    const v = data.head.vars;
+    const hasSPO = v.length === 3 && v[0]==='s' && v[1]==='p' && v[2]==='o';
+    const hasPO  = v.length === 2 && v[0]==='p' && v[1]==='o';
+    if (!hasSPO && !hasPO) return null;
+
+    const subjectOrder = [];
+    const subjects     = new Map();
+    const predOrder    = [];
+    const predSet      = new Set();
+
+    for (const row of data.results.bindings) {
+      const sKey = hasSPO ? (row.s?.value ?? '') : '';
+      const pURI = row.p?.value ?? '';
+
+      if (!subjects.has(sKey)) {
+        subjectOrder.push(sKey);
+        subjects.set(sKey, new Map());
+      }
+      if (!predSet.has(pURI)) { predSet.add(pURI); predOrder.push(pURI); }
+
+      const predMap = subjects.get(sKey);
+      if (!predMap.has(pURI)) predMap.set(pURI, []);
+      if (row.o) predMap.get(pURI).push(row.o);
+    }
+
+    const _short = uri => uri.replace(/.*[/#]([^/#]+)\/?$/, '$1') || uri;
+    const names  = predOrder.map(_short);
+    const seen   = {};
+    for (let i = 0; i < names.length; i++) {
+      const n = names[i];
+      if (seen[n] !== undefined) {
+        names[seen[n]] = predOrder[seen[n]];
+        names[i]       = predOrder[i];
+      } else { seen[n] = i; }
+    }
+
+    const bindings = subjectOrder.map(sKey => {
+      const predMap = subjects.get(sKey);
+      const row = {};
+      for (let i = 0; i < predOrder.length; i++) {
+        const vals = predMap.get(predOrder[i]);
+        if (!vals || vals.length === 0) {
+          row[names[i]] = { type: 'literal', value: '' };
+        } else if (vals.length === 1) {
+          row[names[i]] = vals[0];
+        } else {
+          row[names[i]] = { type: 'multi', values: vals };
+        }
+      }
+      return row;
+    });
+
+    return w3c(names, bindings);
+  }
+
+  // ── Group rows by non-object columns, collect 'o' values ──────────────────
+  _groupByPredicate(data) {
+    const vars = data.head.vars;
+    if (!vars.includes('o')) return data;
+
+    const keyVars = vars.filter(v => v !== 'o');
+    const order   = [];
+    const map     = new Map();
+
+    for (const row of data.results.bindings) {
+      const key = keyVars.map(v => row[v]?.value ?? '').join('\x00');
+      if (!map.has(key)) {
+        order.push(key);
+        const newRow = {};
+        keyVars.forEach(v => newRow[v] = row[v]);
+        newRow._oVals = row.o ? [row.o] : [];
+        map.set(key, newRow);
+      } else if (row.o) {
+        map.get(key)._oVals.push(row.o);
+      }
+    }
+
+    const bindings = order.map(key => {
+      const row  = map.get(key);
+      const vals = row._oVals;
+      delete row._oVals;
+      row.o = vals.length === 0 ? { type: 'literal', value: '' }
+            : vals.length === 1 ? vals[0]
+            : { type: 'multi', values: vals };
+      return row;
+    });
+
+    return w3c(vars, bindings);
+  }
+
+  // ── Blank-node link + modal ────────────────────────────────────────────────
+  _mkBnodeLink(value) {
+    const a = document.createElement('a');
+    a.href        = '#';
+    a.className   = 'bnode-link';
+    a.textContent = '[…]';
+    a.title       = 'Click to view blank node properties';
+    const idx = this._bnodeData.size;
+    this._bnodeData.set(idx, value._data);
+    a.dataset.bnodeIdx = String(idx);
+    return a;
+  }
+
+  _showBnodeModal(data) {
+    const modal = this._getOrCreateModal();
+    const body  = modal.querySelector('.bnode-modal-body');
+    body.innerHTML = '';
+    const sub = new SparqlResultsRenderer(body);
+    sub.renderResults(data, renderTable, { hideHeader: true });
+    this._lastFocus = (this.container.getRootNode().activeElement) || document.activeElement;
+    modal.classList.add('active');
+    const closeBtn = modal.querySelector('.bnode-modal-close');
+    if (closeBtn) closeBtn.focus();
+  }
+
+  _closeModal() {
+    if (!this._modal) return;
+    this._modal.classList.remove('active');
+    if (this._lastFocus && typeof this._lastFocus.focus === 'function') {
+      try { this._lastFocus.focus(); } catch { /* element may be gone */ }
+    }
+    this._lastFocus = null;
+  }
+
+  _getOrCreateModal() {
+    if (this._modal) return this._modal;
+    const modal = document.createElement('div');
+    modal.className = 'bnode-modal';
+    modal.setAttribute('role', 'dialog');
+    modal.setAttribute('aria-modal', 'true');
+    modal.setAttribute('aria-label', 'Blank node properties');
+    modal.innerHTML = `
+      <div class="bnode-modal-inner" tabindex="-1">
+        <button class="sol-btn sol-btn-danger bnode-modal-close" aria-label="Close">×</button>
+        <div class="bnode-modal-body"></div>
+      </div>`;
+    modal.querySelector('.bnode-modal-close')
+         .addEventListener('click', () => this._closeModal());
+    modal.addEventListener('click', e => { if (e.target === modal) this._closeModal(); });
+    // Focus trap: Tab cycles within the dialog while it's open.
+    modal.addEventListener('keydown', e => {
+      if (e.key !== 'Tab' || !modal.classList.contains('active')) return;
+      const focusables = modal.querySelectorAll(
+        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"]), input, select, textarea'
+      );
+      if (!focusables.length) return;
+      const first = focusables[0];
+      const last  = focusables[focusables.length - 1];
+      const root  = modal.getRootNode();
+      const active = root.activeElement === modal ? document.activeElement : root.activeElement;
+      if (e.shiftKey && active === first) { last.focus(); e.preventDefault(); }
+      else if (!e.shiftKey && active === last) { first.focus(); e.preventDefault(); }
+    });
+    (this.container.parentNode ?? this.container).appendChild(modal);
+    this._modal = modal;
+    this._escHandler = e => {
+      if (e.key === 'Escape' && modal.classList.contains('active')) this._closeModal();
+    };
+    document.addEventListener('keydown', this._escHandler);
+    return modal;
+  }
+}
+
+// CSS now lives in ../styles/sol-query-css.js — import { CSS, sheet } from there.
+export { CSS as getDefaultStylesCSS, sheet as defaultStylesSheet } from '../styles/sol-query-css.js';

package/web/utils/sol-query-views.js

@@ -0,0 +1,32 @@
+// Built-in result views, shared by the <sol-query> element (web/sol-query.js)
+// and the data-from-query activator (core/from-query.js) so neither pulls in the
+// other. Each entry returns the view's render function on demand; the all-in-one
+// Rollup bundle inlines these `import()`s, ESM consumers fetch only what they use.
+const BUILTIN_VIEW_LOADERS = {
+  table:           () => import('../views/table.js'),
+  dl:              () => import('../views/dl.js'),
+  list:            () => import('../views/list.js'),
+  accordion:       () => import('../views/accordion.js'),
+  anchorlist:      () => import('../views/anchorlist.js'),
+  'auto-complete': () => import('../views/auto-complete.js'),
+  menu:            () => import('../views/menu.js'),
+  rolodex:         () => import('../views/rolodex.js'),
+  select:          () => import('../views/select.js'),
+  tabs:            () => import('../views/tabs.js'),
+};
+
+// Views whose results go through SparqlResultsRenderer preprocessing (pivot
+// s/p/o, group predicates, scalar display); others are called as fn(container,
+// data, host).
+export const PREPROCESS_VIEWS = new Set(['table', 'dl', 'list']);
+
+const _viewCache = new Map();
+export async function loadBuiltinView(name) {
+  if (_viewCache.has(name)) return _viewCache.get(name);
+  const loader = BUILTIN_VIEW_LOADERS[name];
+  if (!loader) return null;
+  const mod = await loader();
+  const fn  = mod.render ?? mod.default;
+  _viewCache.set(name, fn);
+  return fn;
+}

package/web/views/_helpers.js

@@ -0,0 +1,34 @@
+// Cell-rendering helpers shared across view renderers.
+
+export function mkLink(val) {
+  const a = document.createElement('a');
+  a.href = val.value;
+  a.textContent = val.value.replace(/.*[/#]([^/#]+)\/?$/, '$1') || val.value;
+  a.title = val.value;
+  a.dataset.uri = val.value;
+  a.target = '_blank';
+  a.rel = 'noopener noreferrer';
+  return a;
+}
+
+export function termText(val) {
+  if (!val) return '';
+  if (val.type === 'uri') return val.value.replace(/.*[/#]([^/#]+)\/?$/, '$1') || val.value;
+  return val.value;
+}
+
+export function appendCell(parent, cell, mkBnodeLink) {
+  if (!cell) { parent.appendChild(document.createTextNode('')); return; }
+  if (cell.type === 'multi') {
+    cell.values.forEach((v, i) => {
+      if (i > 0) parent.appendChild(document.createTextNode(', '));
+      appendCell(parent, v, mkBnodeLink);
+    });
+  } else if (cell.type === 'bnode' && mkBnodeLink) {
+    parent.appendChild(mkBnodeLink(cell));
+  } else if (cell.type === 'uri') {
+    parent.appendChild(mkLink(cell));
+  } else {
+    parent.appendChild(document.createTextNode(cell.value ?? ''));
+  }
+}