symbiote-ui 0.3.0-alpha.4

package/layout/ProjectTabs/ProjectTabs.js

@@ -0,0 +1,77 @@
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import css from './ProjectTabs.css.js';
+import tpl from './ProjectTabs.tpl.js';
+import { translate } from '../../locale/index.js';
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+export class ProjectTabs extends Symbiote {
+  init$ = {
+    activeId: null,
+    tabs: [],
+    homeIcon: 'home',
+    homeLabel: translate('tabs.home'),
+    addTitle: translate('tabs.openProject'),
+    onHomeClick: () => emit(this, 'project-tabs-home'),
+    onAddClick: () => emit(this, 'project-tabs-add'),
+  };
+
+  renderCallback() {
+    this.sub('activeId', (id) => this.setAttribute('active-id', id || ''));
+  }
+
+  setTabs(tabs = [], activeId = this.$.activeId) {
+    this.$.activeId = activeId || null;
+    this.$.tabs = tabs.map((tab) => ({
+      id: tab.id,
+      name: tab.name || tab.id,
+      color: tab.color || '',
+      icon: tab.icon || 'folder',
+      closeable: tab.closeable !== false,
+      isActive: tab.id === this.$.activeId,
+    }));
+  }
+}
+
+class ProjectTabItem extends Symbiote {
+  init$ = {
+    id: '',
+    name: '',
+    color: '',
+    icon: 'folder',
+    closeable: true,
+    isActive: false,
+    closeTitle: translate('tabs.close'),
+    onClick: (e) => {
+      if (e.target.closest('.tab-close')) return;
+      emit(this, 'project-tabs-select', { id: this.$.id });
+    },
+    onCloseClick: (e) => {
+      e.stopPropagation();
+      emit(this, 'project-tabs-close', { id: this.$.id });
+    },
+  };
+
+  renderCallback() {
+    this.sub('color', (color) => {
+      if (color) this.style.setProperty('--tab-accent', color);
+      else this.style.removeProperty('--tab-accent');
+    });
+    this.sub('isActive', (value) => this.toggleAttribute('active', value));
+    this.onclick = this.$.onClick;
+  }
+}
+
+ProjectTabItem.template = html`
+  <span class="material-symbols-outlined" ${{ textContent: 'icon' }}></span>
+  <span ${{ textContent: 'name' }}></span>
+  <button class="tab-close" ${{ title: 'closeTitle', onclick: 'onCloseClick', '@hidden': '!closeable' }}>×</button>
+`;
+
+ProjectTabItem.reg('project-tab-item');
+
+ProjectTabs.template = tpl;
+ProjectTabs.rootStyles = css;
+ProjectTabs.reg('project-tabs');

package/layout/ProjectTabs/ProjectTabs.tpl.js

@@ -0,0 +1,15 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<div class="tab-bar">
+  <button class="tab" ${{ '@active': '!activeId', onclick: 'onHomeClick' }}>
+    <span class="material-symbols-outlined" ${{ textContent: 'homeIcon' }}></span>
+    <span ${{ textContent: 'homeLabel' }}></span>
+  </button>
+  <div class="tab-items" itemize="tabs" item-tag="project-tab-item"></div>
+  <button class="tab-add" ${{ title: 'addTitle', onclick: 'onAddClick' }}>
+    <span class="material-symbols-outlined">add</span>
+  </button>
+  <div class="tab-filler"></div>
+</div>
+`;

package/layout/index.js

@@ -0,0 +1,40 @@
+/**
+ * @fileoverview SSR-safe layout primitives.
+ *
+ * This entrypoint exposes pure layout tree, routing, and section registry
+ * helpers. Browser custom elements are exposed from `symbiote-ui/ui`.
+ */
+
+export * as LayoutTree from './LayoutTree.js';
+export {
+  buildHash,
+  buildQuery,
+  getRoute,
+  navigate,
+  parseQuery,
+  registerGlobalParam,
+  setDefaultPanel,
+  setGlobalParam,
+  updateParams,
+} from './LayoutRouter/LayoutRouter.js';
+export {
+  setupPanelRouting,
+  syncWithRouter,
+} from './LayoutRouter/routerSync.js';
+export {
+  SECTION_SCOPES,
+  SectionRegistry,
+  createSectionRegistry,
+  normalizeSectionScope,
+  sectionMatchesScope,
+  withGlobalPanel,
+  registerSection,
+  getSection,
+  getSections,
+  getHomeSections,
+  getProjectSections,
+  getSectionsForScope,
+  getLayout,
+  hasSection,
+  clearSections,
+} from './LayoutRouter/SectionRegistry.js';

package/list/ListDetailShell/ListDetailShell.css.js

@@ -0,0 +1,128 @@
+export default /*css*/ `
+sn-list-detail-shell {
+  display: grid;
+  grid-template-columns: var(--sn-list-detail-sidebar-width) minmax(0, 1fr);
+  min-width: 0;
+  min-height: var(--sn-list-detail-min-height);
+  height: var(--sn-list-detail-height);
+  border: 1px solid var(--sn-list-detail-border);
+  border-radius: var(--sn-list-detail-radius);
+  background: var(--sn-list-detail-bg);
+  color: var(--sn-list-detail-color);
+  font-family: var(--sn-font);
+  overflow: hidden;
+}
+
+sn-list-detail-shell[hidden] {
+  display: none !important;
+}
+
+sn-list-detail-shell .sn-list-detail-sidebar,
+sn-list-detail-shell .sn-list-detail-main {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+sn-list-detail-shell .sn-list-detail-sidebar {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  border-inline-end: 1px solid var(--sn-list-detail-border);
+  background: var(--sn-list-detail-sidebar-bg);
+}
+
+sn-list-detail-shell .sn-list-detail-main {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  background: var(--sn-list-detail-main-bg);
+}
+
+sn-list-detail-shell .sn-list-detail-header {
+  display: flex;
+  align-items: center;
+  gap: var(--sn-list-detail-header-gap);
+  min-width: 0;
+  min-height: var(--sn-list-detail-header-min-height);
+  padding: var(--sn-list-detail-header-padding);
+  border-block-end: 1px solid var(--sn-list-detail-border);
+  background: var(--sn-list-detail-header-bg);
+}
+
+sn-list-detail-shell .sn-list-detail-icon {
+  flex: 0 0 auto;
+  color: var(--sn-list-detail-icon-color);
+  font-size: var(--sn-list-detail-icon-size);
+  line-height: 1;
+}
+
+sn-list-detail-shell .sn-list-detail-title,
+sn-list-detail-shell .sn-list-detail-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+sn-list-detail-shell .sn-list-detail-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--sn-list-detail-title-color);
+  font-size: var(--sn-list-detail-title-size);
+  font-weight: var(--sn-list-detail-title-weight);
+  text-transform: var(--sn-list-detail-title-transform);
+}
+
+sn-list-detail-shell .sn-list-detail-heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+sn-list-detail-shell .sn-list-detail-description {
+  color: var(--sn-list-detail-description-color);
+  font-size: var(--sn-list-detail-description-size);
+}
+
+sn-list-detail-shell .sn-list-detail-list,
+sn-list-detail-shell .sn-list-detail-body {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+sn-list-detail-shell .sn-list-detail-list {
+  padding: var(--sn-list-detail-list-padding);
+}
+
+sn-list-detail-shell .sn-list-detail-body {
+  padding: var(--sn-list-detail-main-padding);
+}
+
+sn-list-detail-shell .sn-list-detail-list-empty,
+sn-list-detail-shell .sn-list-detail-empty {
+  padding: var(--sn-list-detail-empty-padding);
+}
+
+sn-list-detail-shell[has-detail] .sn-list-detail-empty,
+sn-list-detail-shell:not([has-detail]) .sn-list-detail-body {
+  display: none;
+}
+
+sn-list-detail-shell[detail-mode="compact"] {
+  --sn-list-detail-main-padding: 8px;
+  --sn-list-detail-header-min-height: 36px;
+}
+
+@media (max-width: 720px) {
+  sn-list-detail-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(180px, 40%) minmax(0, 1fr);
+  }
+
+  sn-list-detail-shell .sn-list-detail-sidebar {
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--sn-list-detail-border);
+  }
+}
+`;

package/list/ListDetailShell/ListDetailShell.js

@@ -0,0 +1,72 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import template from './ListDetailShell.tpl.js';
+import css from './ListDetailShell.css.js';
+
+const ATTR_TO_PROP = {
+  'sidebar-title': 'sidebarTitle',
+  'sidebar-icon': 'sidebarIcon',
+  'detail-title': 'detailTitle',
+  'detail-icon': 'detailIcon',
+  'detail-description': 'detailDescription',
+  'detail-mode': 'detailMode',
+};
+
+export class ListDetailShell extends Symbiote {
+  static observedAttributes = [...Object.keys(ATTR_TO_PROP), 'has-detail'];
+
+  init$ = {
+    sidebarTitle: '',
+    sidebarIcon: '',
+    detailTitle: '',
+    detailIcon: '',
+    detailDescription: '',
+    detailMode: '',
+    hasDetail: false,
+  };
+
+  constructor() {
+    super();
+    this.templateProcessors.add(slotProcessor);
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+    this._syncAttributes();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === 'has-detail') {
+      this.$.hasDetail = newValue !== null;
+      return;
+    }
+    let prop = ATTR_TO_PROP[name];
+    if (prop) {
+      this.$[prop] = newValue ?? '';
+      return;
+    }
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+  }
+
+  get hasDetail() {
+    return this.hasAttribute('has-detail');
+  }
+
+  set hasDetail(value) {
+    this.toggleAttribute('has-detail', Boolean(value));
+  }
+
+  _syncAttributes() {
+    for (let [attr, prop] of Object.entries(ATTR_TO_PROP)) {
+      this.$[prop] = this.getAttribute(attr) ?? '';
+    }
+    this.$.hasDetail = this.hasAttribute('has-detail');
+  }
+}
+
+ListDetailShell.template = template;
+ListDetailShell.rootStyles = css;
+ListDetailShell.reg('sn-list-detail-shell');
+
+export default ListDetailShell;

package/list/ListDetailShell/ListDetailShell.tpl.js

@@ -0,0 +1,36 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<section class="sn-list-detail-sidebar">
+  <header class="sn-list-detail-header">
+    <slot name="list-header"></slot>
+    <span class="sn-list-detail-icon material-symbols-outlined" ${{ textContent: 'sidebarIcon', '@hidden': '!sidebarIcon' }}></span>
+    <span class="sn-list-detail-title" ${{ textContent: 'sidebarTitle', '@hidden': '!sidebarTitle' }}></span>
+    <slot name="sidebar-actions"></slot>
+  </header>
+  <div class="sn-list-detail-list">
+    <slot name="list"></slot>
+  </div>
+  <div class="sn-list-detail-list-empty">
+    <slot name="list-empty"></slot>
+  </div>
+</section>
+
+<section class="sn-list-detail-main">
+  <header class="sn-list-detail-header">
+    <slot name="detail-header"></slot>
+    <span class="sn-list-detail-icon material-symbols-outlined" ${{ textContent: 'detailIcon', '@hidden': '!detailIcon' }}></span>
+    <span class="sn-list-detail-heading">
+      <span class="sn-list-detail-title" ${{ textContent: 'detailTitle', '@hidden': '!detailTitle' }}></span>
+      <span class="sn-list-detail-description" ${{ textContent: 'detailDescription', '@hidden': '!detailDescription' }}></span>
+    </span>
+    <slot name="detail-actions"></slot>
+  </header>
+  <div class="sn-list-detail-body">
+    <slot name="detail"></slot>
+  </div>
+  <div class="sn-list-detail-empty">
+    <slot name="detail-empty"></slot>
+  </div>
+</section>
+`;

package/list/ListItem/ListItem.css.js

@@ -0,0 +1,111 @@
+export default /*css*/ `
+:host,
+sn-list-item {
+  display: block;
+  color: var(--sn-text);
+}
+
+:host([hidden]),
+sn-list-item[hidden]  {
+  display: none !important;
+}
+
+.sn-list-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--sn-list-item-gap);
+  min-height: var(--sn-list-item-min-height);
+  padding: var(--sn-list-item-padding);
+  border: 1px solid transparent;
+  border-radius: var(--sn-list-item-radius);
+  background: var(--sn-list-item-bg);
+  color: inherit;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition:
+    background 0.14s ease,
+    border-color 0.14s ease,
+    color 0.14s ease;
+}
+
+.sn-list-item:hover {
+  background: var(--sn-list-item-hover-bg);
+}
+
+.sn-list-item:focus-visible {
+  border-color: var(--sn-list-item-focus-border);
+}
+
+:host([active]) .sn-list-item,
+sn-list-item[active] .sn-list-item {
+  background: var(--sn-list-item-active-bg);
+  border-color: var(--sn-list-item-active-border);
+}
+
+:host([disabled]),
+sn-list-item[disabled]  {
+  color: var(--sn-list-item-disabled-color);
+}
+
+:host([disabled]) .sn-list-item,
+sn-list-item[disabled] .sn-list-item {
+  cursor: default;
+  opacity: 0.58;
+}
+
+:host([disabled]) .sn-list-item:hover,
+sn-list-item[disabled] .sn-list-item:hover {
+  background: var(--sn-list-item-bg);
+}
+
+.sn-list-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 var(--sn-list-item-icon-size);
+  width: var(--sn-list-item-icon-size);
+  height: var(--sn-list-item-icon-size);
+  color: var(--sn-list-item-icon-color);
+  font-family: var(--sn-icon-font);
+  font-size: var(--sn-list-item-icon-font-size);
+  line-height: 1;
+}
+
+.sn-list-item-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.sn-list-item-label,
+.sn-list-item-description,
+.sn-list-item-meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sn-list-item-label {
+  color: var(--sn-list-item-label-color);
+  font-size: var(--sn-list-item-label-size);
+  font-weight: var(--sn-list-item-label-weight);
+}
+
+.sn-list-item-description {
+  color: var(--sn-list-item-description-color);
+  font-size: var(--sn-list-item-description-size);
+  line-height: 1.25;
+}
+
+.sn-list-item-meta {
+  flex: 0 1 auto;
+  max-width: var(--sn-list-item-meta-max-width);
+  color: var(--sn-list-item-meta-color);
+  font-family: var(--sn-font-mono, monospace);
+  font-size: var(--sn-list-item-meta-size);
+}
+`;

package/list/ListItem/ListItem.js

@@ -0,0 +1,66 @@
+import Symbiote from '@symbiotejs/symbiote';
+import template from './ListItem.tpl.js';
+import css from './ListItem.css.js';
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+export class ListItem extends Symbiote {
+  init$ = {
+    label: '',
+    description: '',
+    icon: '',
+    meta: '',
+    active: false,
+    disabled: false,
+    item: null,
+
+    onSelect: (event) => {
+      if (this.$.disabled) {
+        event.preventDefault();
+        return;
+      }
+      emit(this, 'sn-list-item-select', { item: this.$.item });
+    },
+
+    onKeydown: (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      this.$.onSelect(event);
+    },
+  };
+
+  renderCallback() {
+    this.sub('active', (value) => {
+      this.toggleAttribute('active', Boolean(value));
+    });
+
+    this.sub('disabled', (value) => {
+      let disabled = Boolean(value);
+      this.toggleAttribute('disabled', disabled);
+      this.ref.item.setAttribute('aria-disabled', String(disabled));
+      this.ref.item.tabIndex = disabled ? -1 : 0;
+    });
+  }
+
+  setItem(item = null) {
+    this.$.item = item;
+    if (!item || typeof item !== 'object') return;
+
+    this.set$({
+      label: item.label || '',
+      description: item.description || '',
+      icon: item.icon || '',
+      meta: item.meta || '',
+      active: Boolean(item.active),
+      disabled: Boolean(item.disabled),
+    });
+  }
+}
+
+ListItem.template = template;
+ListItem.rootStyles = css;
+ListItem.reg('sn-list-item');
+
+export default ListItem;

package/list/ListItem/ListItem.tpl.js

@@ -0,0 +1,18 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<div
+  class="sn-list-item"
+  ref="item"
+  role="button"
+  tabindex="0"
+  ${{ onclick: 'onSelect', onkeydown: 'onKeydown' }}
+>
+  <span class="sn-list-item-icon" ${{ textContent: 'icon', '@hidden': '!icon' }}></span>
+  <span class="sn-list-item-body">
+    <span class="sn-list-item-label" ${{ textContent: 'label' }}></span>
+    <span class="sn-list-item-description" ${{ textContent: 'description', '@hidden': '!description' }}></span>
+  </span>
+  <span class="sn-list-item-meta" ${{ textContent: 'meta', '@hidden': '!meta' }}></span>
+</div>
+`;