symbiote-ui 0.3.0-alpha.4

package/display/OutputListPreview/OutputListPreview.css.js

@@ -0,0 +1,109 @@
+export default /*css*/ `
+:host,
+output-list-preview {
+  display: block;
+  color: var(--sn-text);
+  font-family: var(--sn-font-ui, inherit);
+}
+
+:host([hidden]),
+output-list-preview[hidden] {
+  display: none !important;
+}
+
+.output-list-preview {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sn-output-preview-gap);
+  min-width: 0;
+  padding: var(--sn-output-preview-padding);
+  border: 1px solid var(--sn-output-preview-border);
+  border-radius: var(--sn-output-preview-radius);
+  background: var(--sn-output-preview-bg);
+}
+
+.output-list-preview-head,
+.output-list-preview-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 18px;
+  color: var(--sn-output-preview-muted, var(--sn-text-dim));
+  font-size: 11px;
+}
+
+.output-list-preview-title {
+  overflow: hidden;
+  color: var(--sn-output-preview-title, var(--sn-text));
+  font-size: 12px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.output-list-preview-count,
+.output-list-preview-foot {
+  font-family: var(--sn-font-mono, monospace);
+}
+
+.output-list-preview-items {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.output-list-preview-empty {
+  padding: 8px 0;
+  color: var(--sn-output-preview-muted, var(--sn-text-dim));
+  font-size: 12px;
+}
+
+.output-list-preview-item {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 3px 10px;
+  min-height: 38px;
+  padding: 8px 10px;
+  border: 1px solid var(--sn-output-preview-item-border);
+  border-radius: var(--sn-output-preview-item-radius);
+  background: var(--sn-output-preview-item-bg);
+}
+
+.output-list-preview-label,
+.output-list-preview-description,
+.output-list-preview-meta,
+.output-list-preview-status {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.output-list-preview-label {
+  color: var(--sn-output-preview-label, var(--sn-text));
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.output-list-preview-description {
+  grid-column: 1 / -1;
+  color: var(--sn-output-preview-muted, var(--sn-text-dim));
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.output-list-preview-meta,
+.output-list-preview-status {
+  color: var(--sn-output-preview-muted, var(--sn-text-dim));
+  font-family: var(--sn-font-mono, monospace);
+  font-size: 10px;
+}
+
+.output-list-preview-status {
+  justify-self: end;
+  max-width: 120px;
+}
+`;

package/display/OutputListPreview/OutputListPreview.js

@@ -0,0 +1,77 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { escapeHtml } from '../markdown-formatter.js';
+import { normalizeOutputList } from '../output-preview.js';
+import template from './OutputListPreview.tpl.js';
+import css from './OutputListPreview.css.js';
+
+function renderItem(item) {
+  let status = item.status
+    ? `<span class="output-list-preview-status">${escapeHtml(item.status)}</span>`
+    : '';
+  let description = item.description
+    ? `<span class="output-list-preview-description">${escapeHtml(item.description)}</span>`
+    : '';
+  let meta = item.meta
+    ? `<span class="output-list-preview-meta">${escapeHtml(item.meta)}</span>`
+    : `<span class="output-list-preview-meta">${escapeHtml(item.kind)}</span>`;
+
+  return `
+    <article class="output-list-preview-item" data-kind="${escapeHtml(item.kind)}">
+      <span class="output-list-preview-label">${escapeHtml(item.label)}</span>
+      ${status}
+      ${description}
+      ${meta}
+    </article>
+  `;
+}
+
+export class OutputListPreview extends Symbiote {
+  init$ = {
+    title: 'Output',
+    countText: '0 items',
+    emptyText: 'No output',
+    itemsHtml: '',
+    truncatedText: '',
+    isEmpty: true,
+    isTruncated: false,
+    showHeader: true,
+  };
+
+  #normalized = normalizeOutputList([]);
+
+  renderCallback() {
+    this.sub('isEmpty', (value) => {
+      this.toggleAttribute('empty', Boolean(value));
+    });
+  }
+
+  setValue(value, options = {}) {
+    this.setData(normalizeOutputList(value, options));
+  }
+
+  setItems(value, options = {}) {
+    this.setValue(value, options);
+  }
+
+  setData(data = normalizeOutputList([])) {
+    this.#normalized = data;
+    let plural = data.visible === 1 ? 'item' : 'items';
+    this.set$({
+      countText: `${data.visible}/${data.total} ${plural}`,
+      itemsHtml: data.items.map(renderItem).join(''),
+      truncatedText: data.truncated ? `${data.total - data.visible} more not shown` : '',
+      isEmpty: data.empty,
+      isTruncated: data.truncated,
+    });
+  }
+
+  getData() {
+    return this.#normalized;
+  }
+}
+
+OutputListPreview.template = template;
+OutputListPreview.rootStyles = css;
+OutputListPreview.reg('output-list-preview');
+
+export default OutputListPreview;

package/display/OutputListPreview/OutputListPreview.tpl.js

@@ -0,0 +1,13 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<section class="output-list-preview">
+  <header class="output-list-preview-head" ${{ '@hidden': '!showHeader' }}>
+    <span class="output-list-preview-title" ${{ textContent: 'title' }}></span>
+    <span class="output-list-preview-count" ${{ textContent: 'countText' }}></span>
+  </header>
+  <div class="output-list-preview-empty" ${{ textContent: 'emptyText', '@hidden': '!isEmpty' }}></div>
+  <div class="output-list-preview-items" ${{ innerHTML: 'itemsHtml', '@hidden': 'isEmpty' }}></div>
+  <footer class="output-list-preview-foot" ${{ textContent: 'truncatedText', '@hidden': '!isTruncated' }}></footer>
+</section>
+`;

package/display/SourceEditor/SourceEditor.css.js

@@ -0,0 +1,39 @@
+export default `
+:host {
+  display: block;
+}
+
+source-editor {
+  display: block;
+  height: 100%;
+  min-height: 0;
+}
+
+source-editor textarea {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  border: 0;
+  outline: 0;
+  resize: none;
+  padding: var(--sn-source-editor-padding);
+  background: var(--sn-source-editor-bg);
+  color: var(--sn-source-editor-color);
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-source-editor-font-size);
+  line-height: var(--sn-source-editor-line-height);
+  tab-size: var(--sn-source-editor-tab-size);
+}
+
+source-editor textarea::placeholder {
+  color: var(--sn-source-editor-placeholder-color);
+}
+
+source-editor textarea:disabled,
+source-editor textarea[readonly] {
+  cursor: default;
+  opacity: 0.82;
+}
+`;

package/display/SourceEditor/SourceEditor.js

@@ -0,0 +1,129 @@
+import Symbiote from '@symbiotejs/symbiote';
+import template from './SourceEditor.tpl.js';
+import css from './SourceEditor.css.js';
+
+function emit(component, name, detail = {}) {
+  component.dispatchEvent(new CustomEvent(name, {
+    bubbles: true,
+    composed: true,
+    detail,
+  }));
+}
+
+export class SourceEditor extends Symbiote {
+  init$ = {
+    value: '',
+    language: 'plain',
+    placeholder: '',
+    ariaLabel: 'Source editor',
+    readonly: false,
+    disabled: false,
+    dirty: false,
+    onInput: () => this._handleInput(),
+    onKeyDown: (event) => this._handleKeyDown(event),
+  };
+
+  renderCallback() {
+    this.sub('value', (value) => {
+      let editor = this.ref?.editor;
+      if (editor && editor.value !== value) {
+        editor.value = value || '';
+      }
+    });
+
+    this.sub('language', (value) => {
+      this.setAttribute('data-language', value || 'plain');
+    });
+
+    this.sub('dirty', (value) => {
+      this.toggleAttribute('dirty', Boolean(value));
+    });
+  }
+
+  get value() {
+    return this.getContent();
+  }
+
+  set value(value) {
+    this.setContent(value);
+  }
+
+  get disabled() {
+    return Boolean(this.$.disabled);
+  }
+
+  set disabled(value) {
+    this.$.disabled = Boolean(value);
+  }
+
+  get readOnly() {
+    return Boolean(this.$.readonly);
+  }
+
+  set readOnly(value) {
+    this.$.readonly = Boolean(value);
+  }
+
+  getContent() {
+    return this.ref?.editor?.value ?? this.$.value ?? '';
+  }
+
+  setContent(value, options = {}) {
+    let content = String(value ?? '');
+    this.$.value = content;
+    if (this.ref?.editor && this.ref.editor.value !== content) {
+      this.ref.editor.value = content;
+    }
+    this.setDirty(Boolean(options.dirty));
+  }
+
+  setEditable(editable) {
+    this.$.disabled = !editable;
+  }
+
+  setLanguage(language) {
+    this.$.language = language || 'plain';
+  }
+
+  setDirty(dirty) {
+    this.$.dirty = Boolean(dirty);
+  }
+
+  focus() {
+    this.ref?.editor?.focus();
+  }
+
+  select() {
+    this.ref?.editor?.select();
+  }
+
+  _handleInput() {
+    let value = this.getContent();
+    this.$.value = value;
+    this.setDirty(true);
+    emit(this, 'source-editor-input', {
+      value,
+      dirty: this.$.dirty,
+      language: this.$.language,
+    });
+  }
+
+  _handleKeyDown(event) {
+    if (event.key !== 'Tab' || event.metaKey || event.ctrlKey || event.altKey) return;
+
+    let editor = this.ref?.editor;
+    if (!editor || editor.disabled || editor.readOnly) return;
+
+    event.preventDefault();
+    let start = editor.selectionStart;
+    let end = editor.selectionEnd;
+    let tab = '  ';
+    editor.value = `${editor.value.slice(0, start)}${tab}${editor.value.slice(end)}`;
+    editor.selectionStart = editor.selectionEnd = start + tab.length;
+    this._handleInput();
+  }
+}
+
+SourceEditor.template = template;
+SourceEditor.rootStyles = css;
+SourceEditor.reg('source-editor');

package/display/SourceEditor/SourceEditor.tpl.js

@@ -0,0 +1,10 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+  <textarea ref="editor"
+    spellcheck="false"
+    autocomplete="off"
+    autocapitalize="off"
+    bind="placeholder: placeholder; disabled: disabled; readOnly: readonly; ariaLabel: ariaLabel"
+    ${{ oninput: 'onInput', onkeydown: 'onKeyDown' }}></textarea>
+`;

package/display/SourceViewer/SourceViewer.css.js

@@ -0,0 +1,80 @@
+export default `
+:host {
+  display: block;
+}
+
+  source-viewer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+  source-viewer:not([has-file]) code-block {
+    display: none;
+  }
+  .sv-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 11px;
+    color: var(--sn-text-dim);
+    border-bottom: 1px solid var(--sn-source-border);
+    background: var(--sn-source-header-bg);
+    gap: var(--sn-source-toolbar-gap);
+  }
+  .sv-filename {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+  .sv-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--sn-source-toolbar-gap);
+    flex-shrink: 0;
+  }
+  .sv-stats {
+    font-size: 10px;
+    color: var(--sn-cat-server);
+    white-space: nowrap;
+  }
+  .sv-action {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    padding: 2px 8px;
+    border: 1px solid var(--sn-source-border);
+    border-radius: var(--sn-source-action-radius);
+    background: var(--sn-source-action-bg);
+    color: var(--sn-text-dim);
+    font-family: inherit;
+    font-size: 10px;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 120ms ease;
+  }
+  .sv-action .material-symbols-outlined {
+    font-size: var(--sn-source-action-icon-size);
+    line-height: 1;
+  }
+  .sv-action:hover {
+    background: var(--sn-source-action-hover-bg);
+    color: var(--sn-text);
+  }
+  source-viewer[mode-raw] .sv-action {
+    background: var(--sn-accent-bg-subtle);
+    border-color: var(--sn-cat-server);
+    color: var(--sn-cat-server);
+  }
+  .sv-action[hidden] {
+    display: none;
+  }
+  code-block {
+    flex: 1;
+    min-height: 0;
+  }
+`;