symbiote-ui 0.3.0-alpha.4

package/display/CodeBlock/CodeBlock.js

@@ -0,0 +1,220 @@
+import Symbiote from "@symbiotejs/symbiote";
+import template from "./CodeBlock.tpl.js";
+import css from "./CodeBlock.css.js";
+import {
+  highlight as highlightJS,
+  renderMarkdown,
+  highlightSQL,
+  highlightJSON,
+  highlightCSS,
+  highlightHTML,
+  highlightYAML,
+  highlightShell,
+  highlightINI,
+  highlightLang,
+  highlightPlain,
+} from "../highlight.js";
+
+export class CodeBlock extends Symbiote {
+  init$ = {
+    code: "",
+    lang: "js",
+    highlighted: "",
+    lineNums: "",
+    isMarkdown: false,
+    isImage: false,
+    imageSrc: "",
+    imageApiBase: "",
+    squiggles: [],
+  };
+
+  renderCallback() {
+    this.sub("code", (code) => {
+      if (!code) {
+        this.$.highlighted = "";
+        this.$.lineNums = "";
+        return;
+      }
+
+      const lang = this.$.lang;
+
+      if (lang === "image") {
+        this.$.isMarkdown = false;
+        this.$.isImage = true;
+        this.$.imageSrc = this._resolveImageSrc(code);
+        this.$.highlighted = "";
+        this.$.lineNums = "";
+        return;
+      }
+
+      this.$.isImage = false;
+
+      if (lang === "md" || lang === "markdown") {
+        this.$.isMarkdown = true;
+        this.$.highlighted = renderMarkdown(code, { basePath: this._basePath || "" });
+        this.$.lineNums = "";
+      } else {
+        this.$.isMarkdown = false;
+
+        let highlighted;
+
+        if (lang === "sql") {
+          highlighted = highlightSQL(code);
+        } else if (lang === "json") {
+          try {
+            highlighted = highlightJSON(JSON.stringify(JSON.parse(code), null, 2));
+          } catch {
+            highlighted = highlightJSON(code);
+          }
+        } else if (lang === "css") {
+          highlighted = highlightCSS(code);
+        } else if (lang === "html" || lang === "htm" || lang === "xml") {
+          highlighted = highlightHTML(code);
+        } else if (lang === "yaml" || lang === "yml") {
+          highlighted = highlightYAML(code);
+        } else if (lang === "sh" || lang === "bash") {
+          highlighted = highlightShell(code);
+        } else if (lang === "env" || lang === "ini" || lang === "conf" || lang === "cfg" || lang === "toml") {
+          highlighted = highlightINI(code);
+        } else if (
+          lang === "python" ||
+          lang === "ruby" ||
+          lang === "go" ||
+          lang === "rust" ||
+          lang === "java" ||
+          lang === "kotlin" ||
+          lang === "swift" ||
+          lang === "c" ||
+          lang === "csharp" ||
+          lang === "php" ||
+          lang === "dart" ||
+          lang === "lua" ||
+          lang === "dockerfile"
+        ) {
+          highlighted = highlightLang(code, lang);
+        } else if (lang === "typescript" || lang === "graphql" || lang === "prisma") {
+          highlighted = highlightJS(code);
+        } else if (lang === "plain" || lang === "txt" || lang === "csv") {
+          highlighted = highlightPlain(code);
+        } else {
+          highlighted = highlightJS(code);
+        }
+
+        this.$.highlighted = highlighted;
+
+        const lineCount = code.split("\n").length;
+        const lineNums = [];
+
+        for (let line = 1; line <= lineCount; line++) {
+          lineNums.push(line);
+        }
+
+        this.$.lineNums = lineNums.join("\n");
+      }
+    });
+
+    this.sub("isMarkdown", (value) => {
+      this.toggleAttribute("mode-markdown", value);
+    });
+
+    this.sub("isImage", (value) => {
+      this.toggleAttribute("mode-image", value);
+    });
+  }
+
+  setBasePath(path) {
+    this._basePath = path;
+  }
+
+  setImageApiBase(base) {
+    this.$.imageApiBase = base || "";
+  }
+
+  setContent(code, lang = "plain", options = {}) {
+    if (options.basePath !== undefined) this.setBasePath(options.basePath);
+    if (options.imageApiBase !== undefined) this.setImageApiBase(options.imageApiBase);
+    this.$.lang = lang || "plain";
+    this.$.code = "";
+    this.$.code = code || "";
+  }
+
+  _resolveImageSrc(src) {
+    if (!src) return "";
+    if (/^(https?:|data:|blob:|file:)/.test(src)) return src;
+    let base = this.$.imageApiBase || this.getAttribute("image-api-base") || "";
+    return base ? `${base}${encodeURIComponent(src)}` : src;
+  }
+
+  scrollToLine(line) {
+    const pre = this.querySelector(".cb-pre");
+    const scroll = this.querySelector(".cb-scroll");
+
+    if (!pre || !scroll) return;
+
+    const lineHeight = parseFloat(window.getComputedStyle(pre).lineHeight) || 19.2;
+
+    scroll.scrollTo({
+      top: Math.max(0, (line - 1) * lineHeight - scroll.clientHeight / 2 + lineHeight / 2),
+      behavior: "smooth",
+    });
+  }
+
+  setDiagnostics(messages) {
+    this._diagnostics = messages;
+    this._renderSquiggles();
+  }
+
+  clearDiagnostics() {
+    this._diagnostics = [];
+    this.$.squiggles = [];
+  }
+
+  _renderSquiggles() {
+    const pre = this.querySelector(".cb-pre");
+    const lineHeight = pre ? parseFloat(window.getComputedStyle(pre).lineHeight) || 19.2 : 19.2;
+    const padTop = pre ? parseFloat(window.getComputedStyle(pre).paddingTop) || 12 : 12;
+    const gutterW = this.querySelector(".cb-gutter")?.offsetWidth || 44;
+
+    const squiggles = (this._diagnostics || []).map((diagnostic) => ({
+      top: `${(diagnostic.line - 1) * lineHeight + padTop}px`,
+      left: `${gutterW}px`,
+      sevClass: `cb-sev-${diagnostic.severity}`,
+      titleText: `${diagnostic.ruleId || "lint"}: ${diagnostic.message}`,
+    }));
+
+    this.$.squiggles = squiggles;
+  }
+}
+
+CodeBlock.template = template;
+CodeBlock.rootStyles = css;
+CodeBlock.reg("code-block");
+
+class CbSquiggle extends Symbiote {
+  init$ = {
+    top: "0px",
+    left: "0px",
+    sevClass: "",
+    titleText: "",
+  };
+
+  renderCallback() {
+    this.sub("sevClass", (className) => {
+      this.className = `cb-squiggle ${className}`;
+    });
+
+    this.sub("top", (value) => {
+      this.style.top = value;
+    });
+
+    this.sub("left", (value) => {
+      this.style.left = value;
+    });
+
+    this.sub("titleText", (value) => {
+      this.title = value;
+    });
+  }
+}
+
+CbSquiggle.reg("cb-squiggle");

package/display/CodeBlock/CodeBlock.tpl.js

@@ -0,0 +1,11 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+  <div class="cb-scroll">
+    <pre class="cb-gutter" bind="textContent: lineNums"></pre>
+    <pre class="cb-pre"><code bind="innerHTML: highlighted"></code></pre>
+    <div class="cb-md" bind="innerHTML: highlighted"></div>
+    <div class="cb-img-wrap"><img class="cb-img" bind="src: imageSrc"></div>
+    <div class="cb-squiggle-layer" ${{ itemize: 'squiggles', 'item-tag': 'cb-squiggle' }}></div>
+  </div>
+`;

package/display/DataTable/DataTable.css.js

@@ -0,0 +1,101 @@
+export default /*css*/ `
+sn-data-table {
+  display: block;
+  min-width: 0;
+  color: var(--sn-data-table-color);
+  font-family: var(--sn-font-ui);
+}
+
+sn-data-table[hidden] {
+  display: none !important;
+}
+
+.sn-data-table {
+  box-sizing: border-box;
+  min-width: 0;
+  border: 1px solid var(--sn-data-table-border);
+  border-radius: var(--sn-data-table-radius);
+  background: var(--sn-data-table-bg);
+  overflow: hidden;
+}
+
+.sn-data-table-scroll {
+  min-width: 0;
+  overflow: auto;
+}
+
+.sn-data-table table {
+  width: 100%;
+  min-width: var(--sn-data-table-min-width);
+  border-collapse: collapse;
+}
+
+.sn-data-table th,
+.sn-data-table td {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--sn-data-table-cell-padding);
+  text-align: start;
+  vertical-align: middle;
+}
+
+.sn-data-table th {
+  border-block-end: 1px solid var(--sn-data-table-header-border);
+  background: var(--sn-data-table-header-bg);
+  color: var(--sn-data-table-header-color);
+  font-size: var(--sn-data-table-header-size);
+  font-weight: var(--sn-data-table-header-weight);
+  line-height: var(--sn-data-table-line-height);
+  text-transform: var(--sn-data-table-header-transform);
+  white-space: nowrap;
+}
+
+.sn-data-table td {
+  border-block-end: 1px solid var(--sn-data-table-row-border);
+  color: var(--sn-data-table-color);
+  font-size: var(--sn-data-table-cell-size);
+  line-height: var(--sn-data-table-line-height);
+}
+
+.sn-data-table tr:last-child td {
+  border-block-end: 0;
+}
+
+.sn-data-table [data-align="end"] {
+  text-align: end;
+}
+
+.sn-data-table [data-align="center"] {
+  text-align: center;
+}
+
+.sn-data-table-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sn-data-table-cell-gap);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sn-data-table-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sn-data-table-marker {
+  flex: 0 0 auto;
+  width: var(--sn-data-table-marker-size);
+  height: var(--sn-data-table-marker-size);
+  border-radius: var(--sn-data-table-marker-radius);
+  background: var(--sn-data-table-marker-color, var(--sn-node-selected));
+}
+
+.sn-data-table-empty {
+  padding: var(--sn-data-table-empty-padding);
+  color: var(--sn-data-table-empty-color);
+  font-size: var(--sn-data-table-cell-size);
+  line-height: var(--sn-data-table-line-height);
+}
+`;

package/display/DataTable/DataTable.js

@@ -0,0 +1,136 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { escapeHtml } from '../markdown-formatter.js';
+import '../Badge/Badge.js';
+import template from './DataTable.tpl.js';
+import css from './DataTable.css.js';
+
+function escapeAttr(value) {
+  return escapeHtml(String(value ?? '')).replaceAll('`', '`');
+}
+
+function normalizeMarker(value) {
+  let marker = String(value ?? '').trim();
+  if (/^var\(--sn-[a-z0-9-]+\)$/i.test(marker)) return marker;
+  return '';
+}
+
+function normalizeVariant(value) {
+  let variant = String(value ?? '').trim();
+  if (['success', 'info', 'warning', 'error'].includes(variant)) return variant;
+  return '';
+}
+
+function normalizeColumns(columns) {
+  if (!Array.isArray(columns)) return [];
+  return columns
+    .filter((column) => column && typeof column === 'object' && column.key)
+    .map((column) => ({
+      key: String(column.key),
+      label: String(column.label ?? column.key),
+      align: column.align === 'end' || column.align === 'center' ? column.align : 'start',
+    }));
+}
+
+function normalizeRows(rows) {
+  return Array.isArray(rows) ? rows.filter((row) => row && typeof row === 'object') : [];
+}
+
+function resolveCell(row, column) {
+  let source = row.cells && typeof row.cells === 'object'
+    ? row.cells[column.key]
+    : row[column.key];
+  if (source && typeof source === 'object' && !Array.isArray(source)) {
+    return source;
+  }
+  return { text: source };
+}
+
+function renderCellContent(cell) {
+  let markerValue = normalizeMarker(cell.marker);
+  let marker = markerValue
+    ? `<span class="sn-data-table-marker" style="--sn-data-table-marker-color: ${escapeAttr(markerValue)}"></span>`
+    : '';
+  let content = cell.badge && typeof cell.badge === 'object'
+    ? renderBadge(cell.badge)
+    : `<span class="sn-data-table-text">${escapeHtml(cell.text ?? '')}</span>`;
+  return `<span class="sn-data-table-cell">${marker}${content}</span>`;
+}
+
+function renderBadge(badge) {
+  let label = escapeHtml(badge.label ?? badge.text ?? '');
+  let variant = normalizeVariant(badge.variant);
+  let variantAttr = variant ? ` variant="${variant}"` : '';
+  return `<sn-badge${variantAttr}>${label}</sn-badge>`;
+}
+
+function renderHead(columns) {
+  if (columns.length === 0) return '';
+  let cells = columns.map((column) => {
+    return `<th scope="col" data-align="${column.align}">${escapeHtml(column.label)}</th>`;
+  }).join('');
+  return `<tr>${cells}</tr>`;
+}
+
+function renderBody(columns, rows) {
+  return rows.map((row) => {
+    let cells = columns.map((column) => {
+      let cell = resolveCell(row, column);
+      let align = cell.align === 'end' || cell.align === 'center' ? cell.align : column.align;
+      return `<td data-align="${align}">${renderCellContent(cell)}</td>`;
+    }).join('');
+    let rowId = row.id ? ` data-row-id="${escapeAttr(row.id)}"` : '';
+    return `<tr${rowId}>${cells}</tr>`;
+  }).join('');
+}
+
+export class DataTable extends Symbiote {
+  init$ = {
+    headHtml: '',
+    bodyHtml: '',
+    emptyText: 'No rows',
+    isEmpty: true,
+  };
+
+  #columns = [];
+  #rows = [];
+
+  setColumns(columns = []) {
+    this.#columns = normalizeColumns(columns);
+    this.#render();
+  }
+
+  setRows(rows = []) {
+    this.#rows = normalizeRows(rows);
+    this.#render();
+  }
+
+  setData({ columns = this.#columns, rows = this.#rows, emptyText = this.$.emptyText } = {}) {
+    this.#columns = normalizeColumns(columns);
+    this.#rows = normalizeRows(rows);
+    this.set$({ emptyText: String(emptyText ?? 'No rows') });
+    this.#render();
+  }
+
+  getData() {
+    return {
+      columns: [...this.#columns],
+      rows: [...this.#rows],
+    };
+  }
+
+  #render() {
+    let isEmpty = this.#columns.length === 0 || this.#rows.length === 0;
+    this.set$({
+      headHtml: renderHead(this.#columns),
+      bodyHtml: renderBody(this.#columns, this.#rows),
+      isEmpty,
+    });
+    this.toggleAttribute('empty', isEmpty);
+  }
+}
+
+DataTable.template = template;
+DataTable.rootStyles = css;
+DataTable.reg('sn-data-table');
+
+export default DataTable;

package/display/DataTable/DataTable.tpl.js

@@ -0,0 +1,13 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<section class="sn-data-table">
+  <div class="sn-data-table-empty" ${{ textContent: 'emptyText', '@hidden': '!isEmpty' }}></div>
+  <div class="sn-data-table-scroll" ${{ '@hidden': 'isEmpty' }}>
+    <table>
+      <thead ${{ innerHTML: 'headHtml' }}></thead>
+      <tbody ${{ innerHTML: 'bodyHtml' }}></tbody>
+    </table>
+  </div>
+</section>
+`;

package/display/EmptyState/EmptyState.css.js

@@ -0,0 +1,33 @@
+export default /*css*/ `
+sn-empty-state {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sn-empty-state-gap);
+  width: 100%;
+  min-height: var(--sn-empty-state-min-height);
+  height: var(--sn-empty-state-height);
+  padding: var(--sn-empty-state-padding);
+  color: var(--sn-empty-state-color);
+  font-family: var(--sn-font);
+  font-size: var(--sn-empty-state-font-size);
+  font-style: var(--sn-empty-state-font-style);
+  line-height: var(--sn-empty-state-line-height);
+  text-align: center;
+}
+
+sn-empty-state[hidden] {
+  display: none !important;
+}
+
+sn-empty-state[variant="error"] {
+  color: var(--sn-empty-state-error-color);
+}
+
+sn-empty-state .material-symbols-outlined {
+  flex: 0 0 auto;
+  font-size: var(--sn-empty-state-icon-size);
+  line-height: 1;
+}
+`;

package/display/EmptyState/EmptyState.js

@@ -0,0 +1,17 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import template from './EmptyState.tpl.js';
+import css from './EmptyState.css.js';
+
+export class EmptyState extends Symbiote {
+  constructor() {
+    super();
+    this.templateProcessors.add(slotProcessor);
+  }
+}
+
+EmptyState.template = template;
+EmptyState.rootStyles = css;
+EmptyState.reg('sn-empty-state');
+
+export default EmptyState;

package/display/EmptyState/EmptyState.tpl.js

@@ -0,0 +1,3 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`<slot></slot>`;

package/display/EventFeed/EventFeed.css.js

@@ -0,0 +1,145 @@
+export default /*css*/ `
+sn-event-feed {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  color: var(--sn-text);
+  font-family: var(--sn-font);
+  font-size: 12px;
+}
+
+sn-event-feed[hidden],
+sn-event-feed-item[hidden] {
+  display: none !important;
+}
+
+.sn-event-feed {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.sn-event-feed-header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 12px;
+  border-block-end: 1px solid var(--sn-node-border);
+  background: var(--sn-node-header-bg);
+  color: var(--sn-text-dim);
+  font-size: 11px;
+}
+
+.sn-event-feed-count {
+  color: var(--sn-text);
+  font-family: var(--sn-font-mono);
+}
+
+.sn-event-feed-body-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+.sn-event-feed-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+sn-event-feed-item {
+  display: block;
+  border: 1px solid var(--sn-node-border);
+  border-radius: var(--sn-card-radius);
+  background: var(--sn-bg-overlay);
+}
+
+sn-event-feed-item:hover {
+  background: var(--sn-node-hover);
+}
+
+.sn-event-feed-item {
+  padding: 8px;
+}
+
+.sn-event-feed-item-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-block-end: 6px;
+  color: var(--sn-text);
+  font-family: var(--sn-font-mono);
+  font-size: 11px;
+}
+
+.sn-event-feed-arrow {
+  width: 18px;
+  color: var(--sn-cat-server);
+  font-weight: 700;
+}
+
+.sn-event-feed-item[data-is-call="false"] .sn-event-feed-arrow {
+  color: var(--sn-success-color);
+}
+
+.sn-event-feed-item[data-success="false"] .sn-event-feed-arrow {
+  color: var(--sn-danger-color);
+}
+
+.sn-event-feed-tool {
+  min-width: 100px;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.sn-event-feed-time {
+  flex: 1 1 auto;
+  color: var(--sn-text-dim);
+  font-size: 10px;
+  text-align: end;
+}
+
+.sn-event-feed-duration {
+  color: var(--sn-cat-data);
+  font-size: 10px;
+}
+
+.sn-event-feed-body {
+  padding: 6px;
+  border-radius: var(--sn-list-item-radius);
+  background: var(--sn-bg-overlay);
+  color: var(--sn-text-dim);
+  font-family: var(--sn-font-mono);
+  font-size: 11px;
+  word-break: break-word;
+}
+
+.sn-event-feed-result {
+  color: var(--sn-text);
+}
+
+.sn-event-feed-raw {
+  max-height: 200px;
+  margin: 0;
+  overflow: auto;
+  color: var(--sn-text-dim);
+  font-size: 10px;
+  white-space: pre-wrap;
+}
+
+.sn-event-feed-error {
+  color: var(--sn-danger-color);
+  font-weight: 700;
+}
+
+.sn-event-feed-empty {
+  padding: 30px;
+}
+`;