sol-components 2.1.0

package/web/utils/live-edit-help/jsonld.js

@@ -0,0 +1,55 @@
+export const jsonldHelp = {
+  title: 'JSON-LD Reference',
+  sections: [
+    {
+      heading: 'Core Keywords',
+      items: [
+        {
+          title: '@context',
+          description: 'Maps short keys to full URIs.',
+          code: `{\n  "@context": {\n    "name": "http://xmlns.com/foaf/0.1/name",\n    "Person": "http://xmlns.com/foaf/0.1/Person"\n  }\n}`
+        },
+        {
+          title: '@id and @type',
+          description: 'Identify the resource and its RDF type.',
+          code: `{\n  "@id": "http://example.org/people/abebe",\n  "@type": "foaf:Person",\n  "name": "Abebe Girma"\n}`
+        },
+        {
+          title: '@graph',
+          description: 'Array of multiple resources in one document.',
+          code: `{\n  "@context": {"name": "foaf:name"},\n  "@graph": [\n    {"@id": ":catalina", "name": "Catalina Ruiz"},\n    {"@id": ":soo-jin",  "name": "Soo-Jin Park"}\n  ]\n}`
+        }
+      ]
+    },
+    {
+      heading: 'Linking Resources',
+      items: [
+        {
+          title: 'Object reference',
+          description: 'Link to another resource by @id.',
+          code: `{\n  "@id": ":catalina",\n  "knows": {"@id": ":soo-jin"}\n}`
+        },
+        {
+          title: 'Array of references',
+          description: 'Multiple values with @type: @id in context.',
+          code: `{\n  "@context": {\n    "knows": {"@id":"foaf:knows","@type":"@id"}\n  },\n  "@id": ":nadia",\n  "knows": [":catalina", ":layla"]\n}`
+        }
+      ]
+    },
+    {
+      heading: 'Typed Values',
+      items: [
+        {
+          title: 'Language-tagged strings',
+          description: 'Use @language in a value object.',
+          code: `{\n  "name": {"@value": "Kenji Watanabe", "@language": "en"},\n  "altName": {"@value": "渡辺健二", "@language": "ja"}\n}`
+        },
+        {
+          title: 'Typed literals',
+          description: 'Attach an XSD type to a value.',
+          code: `{\n  "age": {"@value": "29", "@type": "xsd:integer"},\n  "joined": {"@value": "2021-03-15", "@type": "xsd:date"}\n}`
+        }
+      ]
+    }
+  ]
+};

package/web/utils/live-edit-help/markdown.js

@@ -0,0 +1,52 @@
+export const markdownHelp = {
+  title: 'Markdown Reference',
+  sections: [
+    {
+      heading: 'Text Formatting',
+      items: [
+        { title: 'Emphasis', description: 'Italic, bold, or bold-italic text.', code: `*italic*  _also italic_\n**bold**  __also bold__\n***bold italic***` },
+        { title: 'Inline Code', description: 'Short code spans.', code: 'Use `const x = 5;` inline.' },
+        { title: 'Strikethrough', description: 'Cross out text.', code: '~~removed~~' }
+      ]
+    },
+    {
+      heading: 'Headings',
+      items: [
+        { title: 'ATX Style', description: '# symbols set heading level 1–6.', code: `# Heading 1\n## Heading 2\n### Heading 3` }
+      ]
+    },
+    {
+      heading: 'Lists',
+      items: [
+        { title: 'Unordered', description: '-, *, or + as bullet markers.', code: `- Amara Okafor — Lagos\n- Priya Sharma — Mumbai\n- Nadia Bintang — Jakarta` },
+        { title: 'Ordered', description: 'Numbers followed by a period.', code: `1. First priority\n2. Second priority\n3. Third priority` },
+        { title: 'Nested', description: 'Indent with two or four spaces.', code: `- Africa\n  - Nigeria\n  - Kenya\n- Asia\n  - India\n  - Japan` }
+      ]
+    },
+    {
+      heading: 'Links & Images',
+      items: [
+        { title: 'Link', description: 'Text in brackets, URL in parentheses.', code: `[Visit Example](https://example.com)` },
+        { title: 'Image', description: 'Like a link but prefixed with !', code: `![Alt text](https://example.com/photo.png)` }
+      ]
+    },
+    {
+      heading: 'Blocks',
+      items: [
+        { title: 'Code Block', description: 'Fence with triple backticks, optionally with language.', code: '```python\nprint("مرحبا بالعالم")  # Arabic: Hello World\n```' },
+        { title: 'Blockquote', description: 'Prefix lines with >.', code: `> "We are the ones we have been waiting for."\n> — June Jordan` },
+        { title: 'Horizontal Rule', description: 'Three or more dashes on their own line.', code: `---` }
+      ]
+    },
+    {
+      heading: 'Tables',
+      items: [
+        {
+          title: 'GFM Table',
+          description: 'Pipes separate columns; the second row sets alignment.',
+          code: `| Name | City | Role |\n|------|------|------|\n| Layla Al-Hassan | Amman | Data Scientist |\n| Thien Nguyen | Ho Chi Minh City | Engineer |`
+        }
+      ]
+    }
+  ]
+};

package/web/utils/live-edit-help/mermaid.js

@@ -0,0 +1,48 @@
+export const mermaidHelp = {
+  title: 'Mermaid Diagram Reference',
+  sections: [
+    {
+      heading: 'Flowchart',
+      items: [
+        { title: 'Direction', description: 'TD (top-down), LR (left-right), BT, RL.', code: `graph LR\n    A[Start] --> B[Process] --> C[End]` },
+        { title: 'Node shapes', description: 'Rectangles, rounded, diamonds, circles.', code: `graph TD\n    A[Rectangle]\n    B(Rounded)\n    C{Diamond}\n    D((Circle))\n    A --> B --> C --> D` },
+        { title: 'Labels on edges', description: 'Add text to arrows.', code: `graph LR\n    Lagos -->|sends PR| Mumbai\n    Mumbai -->|approves| Jakarta` }
+      ]
+    },
+    {
+      heading: 'Sequence Diagram',
+      items: [
+        {
+          title: 'Participants and messages',
+          description: 'Model interactions between named actors.',
+          code: `sequenceDiagram\n    participant D as Diego (Mexico)\n    participant A as Amara (Nigeria)\n    D->>A: Pull-request review?\n    A-->>D: Approved ✓`
+        },
+        {
+          title: 'Loops and alternatives',
+          description: 'Control flow in sequences.',
+          code: `sequenceDiagram\n    loop Daily standup\n        Priya->>Nadia: Status?\n        Nadia-->>Priya: On track\n    end`
+        }
+      ]
+    },
+    {
+      heading: 'Class Diagram',
+      items: [
+        {
+          title: 'Classes and relationships',
+          description: 'UML-style class diagram.',
+          code: `classDiagram\n    class Person {\n        +String name\n        +String location\n        +connect(other)\n    }\n    Person <|-- Engineer\n    Person <|-- Designer`
+        }
+      ]
+    },
+    {
+      heading: 'Gantt Chart',
+      items: [
+        {
+          title: 'Project timeline',
+          description: 'Tasks with start and duration.',
+          code: `gantt\n    title Q2 Roadmap\n    dateFormat YYYY-MM-DD\n    section Lagos team\n    Feature A :a1, 2024-04-01, 14d\n    section Mumbai team\n    Feature B :2024-04-08, 21d`
+        }
+      ]
+    }
+  ]
+};

package/web/utils/live-edit-help/turtle.js

@@ -0,0 +1,85 @@
+export const turtleHelp = {
+  title: 'Turtle RDF Reference',
+  sections: [
+    {
+      heading: 'Prefixes',
+      items: [
+        {
+          title: 'Declare Namespaces',
+          description: 'Bind short prefixes to long URI namespaces.',
+          code: `@prefix rdf:  <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .\n@prefix foaf: <http://xmlns.com/foaf/0.1/> .\n@prefix :     <http://example.org/> .`
+        }
+      ]
+    },
+    {
+      heading: 'Triples',
+      items: [
+        {
+          title: 'Subject · Predicate · Object',
+          description: 'Each statement has three parts ending with a period.',
+          code: `:amara foaf:name "Amara Okafor" .\n:amara foaf:knows :kenji .`
+        },
+        {
+          title: 'Type shortcut',
+          description: '`a` is shorthand for `rdf:type`.',
+          code: `:amara a foaf:Person .`
+        },
+        {
+          title: 'Multiple predicates (;)',
+          description: 'Semicolons share the same subject.',
+          code: `:amara a foaf:Person ;\n    foaf:name "Amara Okafor" ;\n    foaf:location "Lagos, Nigeria" .`
+        },
+        {
+          title: 'Multiple objects (,)',
+          description: 'Commas share subject and predicate.',
+          code: `:amara foaf:knows :kenji, :priya, :layla .`
+        }
+      ]
+    },
+    {
+      heading: 'Literals',
+      items: [
+        {
+          title: 'Plain string',
+          description: 'Text in double quotes.',
+          code: `:amara foaf:name "Amara Okafor" .`
+        },
+        {
+          title: 'Language tag',
+          description: 'Attach a BCP-47 language code.',
+          code: `:amara rdfs:label "Amara Okafor"@en .\n:amara rdfs:label "アマラ・オカフォー"@ja .`
+        },
+        {
+          title: 'Typed literal',
+          description: 'Attach an XSD datatype.',
+          code: `:amara foaf:age "31"^^xsd:integer .\n:amara schema:birthDate "1993-04-12"^^xsd:date .`
+        }
+      ]
+    },
+    {
+      heading: 'Common Vocabularies',
+      items: [
+        {
+          title: 'FOAF',
+          description: 'Describing people and social links.',
+          code: `@prefix foaf: <http://xmlns.com/foaf/0.1/> .\n\n:kenji a foaf:Person ;\n    foaf:name "Kenji Watanabe" ;\n    foaf:mbox <mailto:kenji@example.org> ;\n    foaf:knows :priya .`
+        },
+        {
+          title: 'Schema.org',
+          description: 'Rich metadata for people, places, events.',
+          code: `@prefix schema: <https://schema.org/> .\n\n:layla a schema:Person ;\n    schema:name "Layla Al-Hassan" ;\n    schema:jobTitle "Data Scientist" ;\n    schema:addressLocality "Amman" ;\n    schema:addressCountry "JO" .`
+        }
+      ]
+    },
+    {
+      heading: 'Blank Nodes',
+      items: [
+        {
+          title: 'Anonymous resources',
+          description: 'Resources without a URI, using [ ] syntax.',
+          code: `:abebe foaf:knows [\n    a foaf:Person ;\n    foaf:name "Yewande Adebayo"\n] .`
+        }
+      ]
+    }
+  ]
+};

package/web/utils/rdf-config.js

@@ -0,0 +1,125 @@
+/**
+ * rdf-config.js — read a subject's direct properties from a Turtle
+ * file as a flat `{ predicateUri: value | value[] }` JS object.
+ *
+ * Companion to `feed-fetch.js#parseSourceList`. Config files follow
+ * the direct-predicate pattern documented in
+ * claude/plans/PLAN-vocab-migration.md:
+ *
+ *   @prefix geo:    <http://www.w3.org/2003/01/geo/wgs84_pos#> .
+ *   @prefix schema: <http://schema.org/> .
+ *
+ *   <#Settings>
+ *     geo:lat 45.52 ;
+ *     geo:long -122.68 ;
+ *     schema:addressLocality "Portland, OR" .
+ *
+ * resolves to:
+ *
+ *   {
+ *     'http://www.w3.org/2003/01/geo/wgs84_pos#lat':       45.52,
+ *     'http://www.w3.org/2003/01/geo/wgs84_pos#long':     -122.68,
+ *     'http://schema.org/addressLocality':                "Portland, OR",
+ *   }
+ *
+ * Multi-valued predicates (`dct:source <a>, <b>, <c>`) come back as
+ * arrays in document order; single-valued predicates stay scalar.
+ *
+ * Literal values are typed from their xsd datatype (`true` → boolean,
+ * `9` → integer, `45.52` → decimal, anything else → string). NamedNode
+ * objects come back as their URI string.
+ *
+ * Component code is responsible for the predicate URI → its own
+ * internal name mapping. See `sol-weather.js` for the canonical
+ * example. The reader stays component-agnostic.
+ *
+ * The previous PropertyValue indirection pattern (schema:additionalProperty
+ * → PropertyValue node → schema:name + schema:value) was migrated out
+ * in favour of direct predicates. See PLAN-vocab-migration.md for the
+ * predicate choices and the rationale.
+ *
+ * All RDF goes through `core/rdf.js`, so a page that already has rdflib
+ * live (via importmap or vendored ESM) shares it here.
+ */
+
+import { rdf } from '../../core/rdf.js';
+
+/** Last URI segment — used only for picking the local name of an xsd
+ *  datatype URI when typing literal values. */
+function localName(uri) {
+  const i = Math.max(uri.lastIndexOf('#'), uri.lastIndexOf('/'));
+  return i === -1 ? uri : uri.slice(i + 1);
+}
+
+/** Convert one RDF object node to a JS primitive based on its datatype. */
+function typedValue(node) {
+  if (!node) return null;
+  if (node.termType === 'NamedNode') return node.value;
+  if (node.termType !== 'Literal')    return node.value;
+
+  const local = localName(node.datatype?.value || '');
+  switch (local) {
+    case 'boolean':
+      return node.value === 'true' || node.value === '1';
+    case 'integer':
+    case 'int':
+    case 'long':
+    case 'short':
+    case 'byte':
+    case 'nonNegativeInteger':
+    case 'positiveInteger':
+    case 'negativeInteger':
+    case 'nonPositiveInteger':
+      return parseInt(node.value, 10);
+    case 'decimal':
+    case 'double':
+    case 'float':
+      return parseFloat(node.value);
+    default:
+      return node.value;
+  }
+}
+
+/**
+ * Fetch a TTL file and return one subject's direct properties as a
+ * flat JS object keyed by predicate URI.
+ *
+ * @param  {string} sourceUri  "file.ttl#Subject" — the fragment is required.
+ * @return {Promise<Object>}   { predicateUri: value | value[], ... }
+ * @throws on HTTP failure, on a missing rdflib, on a missing fragment.
+ */
+export async function loadConfig(sourceUri) {
+  const abs = new URL(sourceUri || '', document.baseURI).href;
+  const hashIdx = abs.indexOf('#');
+  if (hashIdx === -1) {
+    throw new Error(`source needs a subject fragment — got "${sourceUri}"`);
+  }
+  const fileUri = abs.slice(0, hashIdx);
+
+  const resp = await fetch(fileUri);
+  if (!resp.ok) throw new Error(`HTTP ${resp.status} fetching ${fileUri}`);
+  const text = await resp.text();
+
+  if (!rdf.isReady()) throw new Error('RDF config needs rdflib on the page');
+  const store = rdf.graph();
+  rdf.parse(text, store, fileUri, 'text/turtle');
+
+  const subject = rdf.sym(abs);
+  const out = {};
+
+  // Walk every triple with the requested subject. Group by predicate;
+  // arrays accumulate when a predicate has more than one object.
+  const append = (predUri, value) => {
+    if (Array.isArray(out[predUri])) out[predUri].push(value);
+    else if (predUri in out)         out[predUri] = [out[predUri], value];
+    else                             out[predUri] = value;
+  };
+  for (const st of store.statementsMatching(subject, null, null)) {
+    // Skip rdf:type — it's a class declaration, not a setting value.
+    if (st.predicate.value === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type') continue;
+    append(st.predicate.value, typedValue(st.object));
+  }
+  return out;
+}
+
+export default loadConfig;

package/web/utils/renderers/csv.js

@@ -0,0 +1,124 @@
+function detectDelimiter(line) {
+  for (const d of [',', ';', '\t', '|']) if (line.includes(d)) return d;
+  return ',';
+}
+
+function parseCSVLine(line, delim) {
+  const cells = [];
+  let cur = '', inQ = false;
+  for (let i = 0; i < line.length; i++) {
+    const c = line[i];
+    if (c === '"') {
+      if (inQ && line[i + 1] === '"') { cur += '"'; i++; }
+      else inQ = !inQ;
+    } else if (c === delim && !inQ) {
+      cells.push(cur.trim()); cur = '';
+    } else cur += c;
+  }
+  cells.push(cur.trim());
+  return cells;
+}
+
+export function parseCSV(text) {
+  const lines = text.trim().split('\n').filter(l => l.trim());
+  if (!lines.length) throw new Error('No CSV data');
+  const delim = detectDelimiter(lines[0]);
+  return lines.map(l => parseCSVLine(l, delim));
+}
+
+export function renderCSV(content, outputEl) {
+  const rows = parseCSV(content);
+
+  const wrap = document.createElement('div');
+  wrap.style.cssText = 'overflow:auto;width:100%;height:100%';
+  const table = document.createElement('table');
+  table.className = 'csv-tbl';
+  table.setAttribute('role', 'table');
+
+  const thead = document.createElement('thead');
+  const tbody = document.createElement('tbody');
+
+  rows.forEach((row, ri) => {
+    const tr = document.createElement('tr');
+    row.forEach(cell => {
+      const el = document.createElement(ri === 0 ? 'th' : 'td');
+      const n = Number(cell);
+      el.textContent = (cell !== '' && !isNaN(n) && isFinite(n)) ? _fmt(n) : cell;
+      tr.appendChild(el);
+    });
+    (ri === 0 ? thead : tbody).appendChild(tr);
+  });
+
+  table.appendChild(thead);
+  table.appendChild(tbody);
+  wrap.appendChild(table);
+  outputEl.innerHTML = '';
+  outputEl.appendChild(wrap);
+  return rows;
+}
+
+export function calcStats(rows) {
+  if (rows.length < 2) return null;
+  const headers = rows[0];
+  const data = rows.slice(1);
+  const stats = {};
+
+  headers.forEach((h, ci) => {
+    const col = data.map(r => r[ci] || '').filter(Boolean);
+    if (!col.length) { stats[h] = { type: 'empty' }; return; }
+    const nums = col.map(Number).filter(v => !isNaN(v) && v !== Infinity);
+    if (nums.length === col.length) {
+      const sorted = [...nums].sort((a, b) => a - b);
+      const sum = sorted.reduce((a, b) => a + b, 0);
+      const mid = Math.floor(sorted.length / 2);
+      stats[h] = {
+        type: 'numeric', count: sorted.length,
+        min: sorted[0], max: sorted[sorted.length - 1],
+        mean: (sum / sorted.length).toFixed(2),
+        median: sorted.length % 2 ? sorted[mid].toFixed(2) : ((sorted[mid - 1] + sorted[mid]) / 2).toFixed(2),
+        sum: sum.toFixed(2),
+      };
+    } else {
+      const freq = {};
+      col.forEach(v => { freq[v] = (freq[v] || 0) + 1; });
+      const entries = Object.entries(freq);
+      const maxCount = Math.max(...entries.map(e => e[1]));
+      const atMax = entries.filter(e => e[1] === maxCount);
+      const mostCommon = atMax.length === 1 ? atMax[0][0] : null;
+      stats[h] = { type: 'text', count: col.length, unique: new Set(col).size, mostCommon };
+    }
+  });
+  return stats;
+}
+
+function _fmt(n) {
+  return Number(n).toLocaleString('en-US', { maximumFractionDigits: 2 });
+}
+
+export function renderStats(stats, containerEl) {
+  if (!stats) { containerEl.innerHTML = '<p>Not enough data.</p>'; return; }
+  let html = '';
+  for (const [h, s] of Object.entries(stats)) {
+    html += `<div class="stat-col"><h3>${h}</h3>`;
+    if (s.type === 'empty') {
+      html += '<p>No data</p>';
+    } else if (s.type === 'numeric') {
+      html += `<table class="stat-table">
+        <tr><td>Count</td><td>${_fmt(s.count)}</td></tr>
+        <tr><td>Min</td><td>${_fmt(s.min)}</td></tr>
+        <tr><td>Max</td><td>${_fmt(s.max)}</td></tr>
+        <tr><td>Sum</td><td>${_fmt(s.sum)}</td></tr>
+        <tr><td>Mean</td><td>${_fmt(s.mean)}</td></tr>
+        <tr><td>Median</td><td>${_fmt(s.median)}</td></tr>
+      </table>`;
+    } else {
+      html += `<table class="stat-table">
+        <tr><td>Count</td><td>${_fmt(s.count)}</td></tr>
+        <tr><td>Unique</td><td>${_fmt(s.unique)}</td></tr>
+        <tr><td>Most common</td><td>${s.mostCommon != null ? `"${s.mostCommon}"` : '(no unique leader)'}</td></tr>
+      </table>`;
+    }
+    html += '</div>';
+  }
+  containerEl.innerHTML = html;
+}

package/web/utils/renderers/d3-force.js

@@ -0,0 +1,82 @@
+// Shared D3 force-directed graph renderer used by turtle and jsonld renderers.
+
+/**
+ * Draw a force-directed graph into `container`.
+ * @param {Element} container  — DOM element to render into
+ * @param {{ nodes: Array, links: Array }} graphData
+ *   nodes: [{ id, label, displayLabel?, properties? }]
+ *   links: [{ source, target, label }]
+ */
+export async function drawForceGraph(container, graphData) {
+  const d3 = await import('https://esm.sh/d3@7');
+
+  container.innerHTML = '';
+  const width  = container.clientWidth  || 700;
+  const height = container.clientHeight || 480;
+
+  const svg = d3.select(container)
+    .append('svg')
+    .attr('width', width).attr('height', height)
+    .attr('viewBox', [0, 0, width, height])
+    .style('width', '100%').style('height', '100%');
+
+  svg.append('defs').append('marker')
+    .attr('id', 'arr').attr('viewBox', '-0 -5 10 10')
+    .attr('refX', 26).attr('refY', 0)
+    .attr('orient', 'auto').attr('markerWidth', 6).attr('markerHeight', 6)
+    .append('path').attr('d', 'M0,-5L10,0L0,5').attr('fill', '#95a5a6');
+
+  // Resolve string ids → node objects for d3 links
+  const nodeById = new Map(graphData.nodes.map(n => [n.id, n]));
+  const links = graphData.links.map(l => ({
+    ...l,
+    source: nodeById.get(l.source) || l.source,
+    target: nodeById.get(l.target) || l.target,
+  }));
+
+  const sim = d3.forceSimulation(graphData.nodes)
+    .force('link',      d3.forceLink(links).id(d => d.id).distance(140))
+    .force('charge',    d3.forceManyBody().strength(-380))
+    .force('center',    d3.forceCenter(width / 2, height / 2))
+    .force('collision', d3.forceCollide(38));
+
+  const linkG = svg.append('g').attr('fill', 'none').attr('stroke', '#95a5a6').attr('stroke-width', 1.5);
+  const linkEl = linkG.selectAll('line').data(links).join('line')
+    .attr('marker-end', 'url(#arr)');
+
+  const linkLabel = svg.append('g').selectAll('text').data(links).join('text')
+    .style('font-size', 'var(--font-app)').attr('fill', '#999').attr('text-anchor', 'middle')
+    .text(d => d.label);
+
+  const nodeG = svg.append('g');
+  const nodeEl = nodeG.selectAll('g').data(graphData.nodes).join('g')
+    .attr('class', 'node')
+    .call(d3.drag()
+      .on('start', (ev) => { if (!ev.active) sim.alphaTarget(0.3).restart(); ev.subject.fx = ev.subject.x; ev.subject.fy = ev.subject.y; })
+      .on('drag',  (ev) => { ev.subject.fx = ev.x; ev.subject.fy = ev.y; })
+      .on('end',   (ev) => { if (!ev.active) sim.alphaTarget(0); ev.subject.fx = null; ev.subject.fy = null; }));
+
+  nodeEl.append('circle').attr('r', 20).attr('fill', '#4a9eff').attr('fill-opacity', 0.8).attr('stroke', '#fff').attr('stroke-width', 2);
+
+  nodeEl.append('text').attr('dy', 34).attr('text-anchor', 'middle')
+    .style('font-size', 'calc(var(--font-app) * 1.2)')
+    .each(function(d) {
+      const t = d3.select(this);
+      const label = d.displayLabel || d.label;
+      t.append('tspan').attr('x', 0).attr('font-weight', d.displayLabel ? 'bold' : 'normal').text(label);
+      (d.properties || []).slice(0, 2).forEach((p, i) => {
+        t.append('tspan').attr('x', 0).attr('dy', '1.1em').style('font-size', 'var(--font-app)').attr('fill', '#888').text(p);
+      });
+    });
+
+  sim.on('tick', () => {
+    linkEl.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
+          .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
+    linkLabel
+      .attr('x', d => (d.source.x + d.target.x) / 2)
+      .attr('y', d => (d.source.y + d.target.y) / 2);
+    nodeEl.attr('transform', d => `translate(${d.x},${d.y})`);
+  });
+
+  return () => sim.stop();
+}

package/web/utils/renderers/graphviz.js

@@ -0,0 +1,13 @@
+export async function renderGraphviz(content, outputEl) {
+  const resp = await fetch('https://kroki.io/graphviz/svg', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ diagram_source: content }),
+  });
+  if (!resp.ok) throw new Error(`Graphviz render failed: ${resp.statusText}`);
+  const svg = await resp.text();
+  outputEl.innerHTML = svg;
+  // Ensure SVG fills the container
+  const svgEl = outputEl.querySelector('svg');
+  if (svgEl) { svgEl.style.maxWidth = '100%'; svgEl.style.height = 'auto'; }
+}

package/web/utils/renderers/html.js

@@ -0,0 +1,10 @@
+export function renderHtml(content, outputEl) {
+  outputEl.innerHTML = '';
+  const iframe = document.createElement('iframe');
+  iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+  iframe.setAttribute('title', 'HTML preview');
+  iframe.style.cssText = 'width:100%;height:100%;border:0;display:block';
+  outputEl.appendChild(iframe);
+  const doc = iframe.contentDocument || iframe.contentWindow.document;
+  doc.open(); doc.write(content); doc.close();
+}

package/web/utils/renderers/jsonld.js

@@ -0,0 +1,63 @@
+import { drawForceGraph } from './d3-force.js';
+
+const LABEL_KEYS = new Set([
+  'http://xmlns.com/foaf/0.1/name', 'https://schema.org/name',
+  'http://www.w3.org/2000/01/rdf-schema#label',
+  'http://purl.org/dc/elements/1.1/title',
+  'name', 'label', 'title',
+]);
+
+export async function renderJsonLd(content, outputEl) {
+  let data;
+  try { data = JSON.parse(content); } catch (e) { throw new Error(`JSON parse error: ${e.message}`); }
+
+  const resources = data['@graph'] || (data['@id'] ? [data] : [data]);
+  const nodes = new Map();
+  const links = [];
+  const shortKey = k => k.split(/[/#:]/).pop() || k;
+
+  // All declared subject IRIs — used to detect plain-string IRI references
+  // (valid in JSON-LD when @type:@id is set in @context)
+  const allIds = new Set(resources.map(r => r['@id']).filter(Boolean));
+
+  resources.forEach(res => {
+    const id = res['@id'] || ('_:' + Math.random().toString(36).slice(2));
+    if (!nodes.has(id)) nodes.set(id, { id, label: shortKey(id) || 'blank', displayLabel: null, properties: [] });
+    const node = nodes.get(id);
+
+    Object.entries(res).forEach(([key, val]) => {
+      if (key.startsWith('@')) return;
+      const isLabel = LABEL_KEYS.has(key);
+      const vals = Array.isArray(val) ? val : [val];
+
+      vals.forEach(item => {
+        if (typeof item === 'object' && item !== null && item['@id']) {
+          const tid = item['@id'];
+          if (!nodes.has(tid)) nodes.set(tid, { id: tid, label: shortKey(tid), displayLabel: null, properties: [] });
+          links.push({ source: id, target: tid, label: shortKey(key) });
+        } else if (typeof item === 'string') {
+          if (!isLabel && allIds.has(item)) {
+            // String value is an IRI referencing another resource in the graph
+            if (!nodes.has(item)) nodes.set(item, { id: item, label: shortKey(item), displayLabel: null, properties: [] });
+            links.push({ source: id, target: item, label: shortKey(key) });
+          } else if (isLabel && !node.displayLabel) {
+            node.displayLabel = item;
+          } else {
+            node.properties.push(`${shortKey(key)}: ${item}`);
+          }
+        } else if (typeof item === 'object' && item !== null && item['@value']) {
+          const v = String(item['@value']);
+          if (isLabel && !node.displayLabel) node.displayLabel = v;
+          else node.properties.push(`${shortKey(key)}: ${v}`);
+        }
+      });
+    });
+  });
+
+  if (nodes.size === 0) {
+    outputEl.innerHTML = '<p style="padding:1rem;color:#888">No resources found. Document needs @graph or @id.</p>';
+    return;
+  }
+
+  await drawForceGraph(outputEl, { nodes: [...nodes.values()], links });
+}