symbiote-ui 0.3.0-alpha.4

package/layout/LayoutTree.js

@@ -0,0 +1,373 @@
+/**
+ * @fileoverview BSP (Binary Space Partitioning) Layout Tree
+ * Implements Blender-style area splitting/joining mechanics.
+ */
+
+/**
+ * @typedef {'horizontal' | 'vertical'} SplitDirection
+ */
+
+/**
+ * @typedef {Object} PanelNode
+ * @property {string} id - Unique node ID
+ * @property {'panel'} type - Node type
+ * @property {string} panelType - Panel content type (e.g., 'viewport', 'timeline')
+ * @property {boolean} [collapsed] - Whether panel is collapsed
+ * @property {Object} [panelState] - Panel-specific state
+ */
+
+/**
+ * @typedef {Object} SplitNode
+ * @property {string} id - Unique node ID
+ * @property {'split'} type - Node type
+ * @property {SplitDirection} direction - Split direction
+ * @property {number} ratio - Split ratio (0-1), size of first child
+ * @property {LayoutNode} first - First child node
+ * @property {LayoutNode} second - Second child node
+ */
+
+/**
+ * @typedef {PanelNode | SplitNode} LayoutNode
+ */
+
+let idCounter = 0
+
+/**
+ * Generate unique node ID
+ * @returns {string}
+ */
+export function generateId() {
+  return `node_${++idCounter}_${Date.now().toString(36)}`
+}
+
+/**
+ * Create a panel node
+ * @param {string} panelType - Panel content type
+ * @param {Object} [panelState] - Initial panel state
+ * @returns {PanelNode}
+ */
+export function createPanel(panelType, panelState = {}) {
+  return {
+    id: generateId(),
+    type: 'panel',
+    panelType,
+    panelState,
+    collapsed: false,
+  }
+}
+
+/**
+ * Create a split node
+ * @param {SplitDirection} direction - Split direction
+ * @param {LayoutNode} first - First child
+ * @param {LayoutNode} second - Second child
+ * @param {number} [ratio=0.5] - Split ratio
+ * @returns {SplitNode}
+ */
+export function createSplit(direction, first, second, ratio = 0.5) {
+  return {
+    id: generateId(),
+    type: 'split',
+    direction,
+    ratio,
+    first,
+    second,
+  }
+}
+
+/**
+ * Find a node by ID in the tree
+ * @param {LayoutNode} root - Root node
+ * @param {string} id - Node ID to find
+ * @returns {LayoutNode | null}
+ */
+export function findNode(root, id) {
+  if (root.id === id) return root
+  if (root.type === 'split') {
+    return findNode(root.first, id) || findNode(root.second, id)
+  }
+  return null
+}
+
+/**
+ * Find parent of a node
+ * @param {LayoutNode} root - Root node
+ * @param {string} id - Child node ID
+ * @returns {{ parent: SplitNode, which: 'first' | 'second' } | null}
+ */
+export function findParent(root, id) {
+  if (root.type !== 'split') return null
+
+  if (root.first.id === id) return { parent: root, which: 'first' }
+  if (root.second.id === id) return { parent: root, which: 'second' }
+
+  return findParent(root.first, id) || findParent(root.second, id)
+}
+
+/**
+ * Split a panel into two
+ * @param {LayoutNode} root - Root node
+ * @param {string} panelId - Panel ID to split
+ * @param {SplitDirection} direction - Split direction
+ * @param {number} [ratio=0.5] - Split ratio
+ * @param {string} [newPanelType] - Type for new panel (defaults to same as original)
+ * @returns {LayoutNode} - New root node
+ */
+export function splitPanel(root, panelId, direction, ratio = 0.5, newPanelType) {
+  let node = findNode(root, panelId)
+  if (!node || node.type !== 'panel') {
+    return root
+  }
+
+  let newPanel = createPanel(newPanelType || node.panelType)
+  let splitNode = createSplit(direction, node, newPanel, ratio)
+
+
+  if (root.id === panelId) {
+    return splitNode
+  }
+
+
+  let parentInfo = findParent(root, panelId)
+  if (parentInfo) {
+    parentInfo.parent[parentInfo.which] = splitNode
+  }
+
+  return root
+}
+
+/**
+ * Join two panels (remove one panel and its parent split)
+ * @param {LayoutNode} root - Root node
+ * @param {string} panelToRemove - Panel ID to remove
+ * @returns {LayoutNode} - New root node
+ */
+export function joinPanels(root, panelToRemove) {
+  let parentInfo = findParent(root, panelToRemove)
+  if (!parentInfo) {
+    return root
+  }
+
+  let { parent, which } = parentInfo
+  let survivor = which === 'first' ? parent.second : parent.first
+
+
+  let grandparentInfo = findParent(root, parent.id)
+  if (!grandparentInfo) {
+    return survivor
+  }
+
+
+  grandparentInfo.parent[grandparentInfo.which] = survivor
+  return root
+}
+
+/**
+ * Update split ratio
+ * @param {LayoutNode} root - Root node
+ * @param {string} splitId - Split node ID
+ * @param {number} ratio - New ratio (0-1)
+ * @returns {LayoutNode} - Same root (mutated)
+ */
+export function resizeSplit(root, splitId, ratio) {
+  let node = findNode(root, splitId)
+  if (!node || node.type !== 'split') {
+    return root
+  }
+
+  node.ratio = Math.max(0.1, Math.min(0.9, ratio))
+  return root
+}
+
+/**
+ * Serialize layout to JSON string
+ * @param {LayoutNode} root - Root node
+ * @returns {string}
+ */
+export function serialize(root) {
+  return JSON.stringify(root)
+}
+
+/**
+ * Deserialize layout from JSON string
+ * @param {string} json - JSON string
+ * @returns {LayoutNode}
+ */
+export function deserialize(json) {
+  return JSON.parse(json)
+}
+
+/**
+ * Clone a layout tree (deep copy)
+ * @param {LayoutNode} root - Root node
+ * @returns {LayoutNode}
+ */
+export function clone(root) {
+  return deserialize(serialize(root))
+}
+
+/**
+ * Get all panel nodes in tree
+ * @param {LayoutNode} root - Root node
+ * @returns {PanelNode[]}
+ */
+export function getAllPanels(root) {
+  return collectPanels(root)
+}
+
+export function isPanelNode(node) {
+  return !!node && node.type === 'panel'
+}
+
+export function isSplitNode(node) {
+  return !!node && node.type === 'split'
+}
+
+/**
+ * Collect panel nodes from a layout tree.
+ * @param {LayoutNode | Object | null} root
+ * @param {Object} [options]
+ * @param {boolean} [options.includeGlobal=true] Include panels marked as global.
+ * @returns {PanelNode[]}
+ */
+export function collectPanels(root, options = {}) {
+  let { includeGlobal = true } = options
+  let panels = []
+
+  function walk(node) {
+    if (!node) return
+    if (Array.isArray(node)) {
+      node.forEach(walk)
+      return
+    }
+    if (isPanelNode(node)) {
+      if (includeGlobal || !node.global) panels.push(node)
+      return
+    }
+    if (node.first) walk(node.first)
+    if (node.second) walk(node.second)
+  }
+
+  walk(root)
+  if (includeGlobal && root && typeof root === 'object' && !Array.isArray(root)) {
+    walk(root.global)
+    walk(root.globals)
+    walk(root.globalPanels)
+  }
+  return panels
+}
+
+/**
+ * Collect panel type ids from a layout tree.
+ * @param {LayoutNode | Object | null} root
+ * @param {Object} [options]
+ * @param {boolean} [options.includeGlobal=true] Include panels marked as global.
+ * @returns {string[]}
+ */
+export function collectPanelTypes(root, options = {}) {
+  return collectPanels(root, options)
+    .map((panel) => panel.panelType)
+    .filter(Boolean)
+}
+
+/**
+ * Return the first non-global panel type from a layout tree.
+ * @param {LayoutNode | Object | null} root
+ * @returns {string | null}
+ */
+export function getPrimaryPanelType(root) {
+  return collectPanels(root, { includeGlobal: false })[0]?.panelType || null
+}
+
+/**
+ * Check that every requested panel type exists in a layout tree.
+ * @param {LayoutNode | Object | null} root
+ * @param {Iterable<string>} requiredPanelTypes
+ * @param {Object} [options]
+ * @returns {boolean}
+ */
+export function hasEveryPanelType(root, requiredPanelTypes, options = {}) {
+  let available = new Set(collectPanelTypes(root, options))
+  for (let panelType of requiredPanelTypes || []) {
+    if (!available.has(panelType)) return false
+  }
+  return true
+}
+
+/**
+ * Check whether any of the requested panel types exists in a layout tree.
+ * @param {LayoutNode | Object | null} root
+ * @param {Iterable<string>} panelTypes
+ * @param {Object} [options]
+ * @returns {boolean}
+ */
+export function hasAnyPanelType(root, panelTypes, options = {}) {
+  let available = new Set(collectPanelTypes(root, options))
+  for (let panelType of panelTypes || []) {
+    if (available.has(panelType)) return true
+  }
+  return false
+}
+
+/**
+ * Build sidebar submenu descriptors from panels in a layout tree.
+ * @param {LayoutNode | Object | null} root
+ * @param {object} panelDefinitions
+ * @param {Object} [options]
+ * @param {boolean} [options.includeGlobal=false] Include panels marked as global.
+ * @param {number} [options.minPanels=2] Minimum count required before returning items.
+ * @returns {{title: string, icon: string, panelId: string, isMaster: boolean, panelType: string}[]}
+ */
+export function createSidebarSubPanels(root, panelDefinitions = {}, options = {}) {
+  let { includeGlobal = false, minPanels = 2 } = options
+  let panels = collectPanels(root, { includeGlobal })
+  if (panels.length < minPanels) return []
+  return panels.map((panel, index) => {
+    let panelType = panel.panelType || 'panel'
+    let config = panelDefinitions[panelType] || {}
+    return {
+      title: config.title || panelType,
+      icon: config.icon || 'dashboard',
+      panelId: panel.id || `${panelType}-${index}`,
+      isMaster: index === 0,
+      panelType,
+    }
+  })
+}
+
+/**
+ * Update a node's properties by ID
+ * @param {LayoutNode} root - Root node
+ * @param {string} nodeId - Node ID to update
+ * @param {Object} updates - Properties to update
+ * @returns {boolean} - True if node was found and updated
+ */
+export function updateNode(root, nodeId, updates) {
+  let node = findNode(root, nodeId)
+  if (!node) return false
+  Object.assign(node, updates)
+  return true
+}
+
+/**
+ * Validate that a layout tree matches validation rules
+ * @param {LayoutNode} root
+ * @param {Object} config
+ * @param {Iterable<string>} [config.disallowedPanelTypes]
+ * @param {Iterable<string>} [config.requiredPanelTypes]
+ * @param {string} [config.expectedPrimary]
+ * @returns {boolean}
+ */
+export function matchesSection(root, config = {}) {
+  if (!root) return false
+  if (config.disallowedPanelTypes) {
+    if (hasAnyPanelType(root, config.disallowedPanelTypes)) return false
+  }
+  if (config.requiredPanelTypes) {
+    if (!hasEveryPanelType(root, config.requiredPanelTypes)) return false
+  }
+  if (config.expectedPrimary) {
+    return collectPanelTypes(root, { includeGlobal: false }).includes(config.expectedPrimary)
+  }
+  return true
+}

package/layout/PanelMenu/PanelMenu.css.js

@@ -0,0 +1,43 @@
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  panel-menu {
+    position: fixed;
+    z-index: var(--sn-panel-menu-z, var(--sn-overlay-z-base, 20000));
+    pointer-events: none;
+
+    .menu-container {
+      pointer-events: auto;
+      background: var(--sn-ctx-bg);
+      border: 1px solid var(--sn-ctx-border);
+      border-radius: 6px;
+      box-shadow: 0 4px 12px var(--sn-shadow-color);
+      min-width: 160px;
+      padding: 4px 0;
+    }
+
+    .menu-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      cursor: pointer;
+      color: var(--sn-text);
+      font-size: 0.85rem;
+      transition: background 0.1s;
+
+      &:hover {
+        background: var(--sn-node-hover);
+      }
+
+      &[active] {
+        color: var(--sn-node-selected);
+      }
+
+      .material-symbols-outlined {
+        font-size: 18px;
+        opacity: 0.8;
+      }
+    }
+  }
+`;

package/layout/PanelMenu/PanelMenu.js

@@ -0,0 +1,95 @@
+/**
+ * @fileoverview PanelMenu - Dropdown menu for panel type selection
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { bringOverlayToFront } from '../../ui/overlay-stack.js';
+import { template } from './PanelMenu.tpl.js';
+import { styles } from './PanelMenu.css.js';
+
+export class PanelMenu extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+    visible: false,
+    panelId: '',
+    items: [],
+    currentType: '',
+
+    onItemClick: (e) => {
+      let type = e.target.closest('[data-type]')?.dataset.type;
+      if (type) {
+        this.dispatchEvent(
+          new CustomEvent('panel-type-select', {
+            bubbles: true,
+            composed: true,
+            detail: { panelId: this.$.panelId, type },
+          })
+        );
+        this.hide();
+      }
+    },
+  };
+
+  /**
+   * Show menu at position
+   * @param {number} x
+   * @param {number} y
+   * @param {string} panelId
+   * @param {string} currentType
+   * @param {Array<{type: string, title: string, icon: string}>} items
+   */
+  show(x, y, panelId, currentType, items) {
+    ensureMaterialSymbols(items.map((item) => item.icon || 'dashboard'));
+    this.$.panelId = panelId;
+    this.$.currentType = currentType;
+    ensureMaterialSymbols(items.map((item) => item.icon || 'dashboard'));
+
+
+    this.$.items = items.map((item) => ({
+      ...item,
+      icon: item.icon || 'dashboard',
+      title: item.title || item.type,
+      isActive: item.type === currentType,
+    }));
+
+    this.style.left = `${x}px`;
+    this.style.top = `${y}px`;
+    bringOverlayToFront(this);
+    this.$.visible = true;
+
+
+    if (typeof setTimeout !== 'undefined') {
+      setTimeout(() => {
+        if (typeof document !== 'undefined') {
+          document.addEventListener('pointerdown', this._onOutsideClick);
+        }
+      }, 0);
+    }
+  }
+
+  hide() {
+    this.$.visible = false;
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('pointerdown', this._onOutsideClick);
+    }
+  }
+
+  _onOutsideClick = (e) => {
+    if (!this.contains(e.target)) {
+      this.hide();
+    }
+  };
+
+  disconnectedCallback() {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('pointerdown', this._onOutsideClick);
+    }
+  }
+}
+
+PanelMenu.template = template;
+PanelMenu.rootStyles = styles;
+
+PanelMenu.reg('panel-menu');

package/layout/PanelMenu/PanelMenu.tpl.js

@@ -0,0 +1,17 @@
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div class="menu-container" ${{ '@hidden': '!visible' }}>
+    <div class="menu-items" itemize="items">
+      <template>
+        <div
+          class="menu-item"
+          ${{ onclick: '^onItemClick', '@data-type': 'type', '@active': 'isActive' }}
+        >
+          <span class="material-symbols-outlined">{{icon}}</span>
+          <span>{{title}}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+`;

package/layout/ProjectTabs/ProjectTabs.css.js

@@ -0,0 +1,188 @@
+export default /*css*/ `
+:host,
+project-tabs {
+  display: block;
+  height: var(--sn-tabs-height);
+  background: var(--sn-tabs-bg);
+  flex-shrink: 0;
+  user-select: none;
+  position: relative;
+}
+
+:host::after,
+project-tabs::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--sn-tabs-border);
+  z-index: 1;
+}
+
+.tab-bar {
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  padding: 0 12px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  position: relative;
+  z-index: 2;
+}
+
+.tab-bar::-webkit-scrollbar {
+  display: none;
+}
+
+.tab,
+project-tab-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px 0 12px;
+  height: var(--sn-tabs-item-height);
+  border: 1px solid transparent;
+  border-bottom: none;
+  background: transparent;
+  color: var(--sn-text-dim);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: inherit;
+  white-space: nowrap;
+  transition: background 0.15s, color 0.15s;
+  position: relative;
+  border-radius: var(--sn-tabs-radius);
+  margin: 0 2px;
+}
+
+.tab .material-symbols-outlined,
+project-tab-item .material-symbols-outlined {
+  font-size: 15px;
+  color: var(--tab-accent, var(--sn-tabs-accent));
+}
+
+.tab:hover,
+project-tab-item:hover {
+  background: var(--sn-tabs-hover-bg);
+  color: var(--sn-text);
+}
+
+.tab[active],
+project-tab-item[active] {
+  background: var(--sn-tabs-active-bg);
+  color: var(--sn-text);
+}
+
+.tab[active]::before,
+project-tab-item[active]::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: calc(-1 * var(--sn-tabs-corner-size));
+  width: var(--sn-tabs-corner-size);
+  height: var(--sn-tabs-corner-size);
+  pointer-events: none;
+  background: radial-gradient(circle at 0 0, transparent var(--sn-tabs-corner-cut), var(--sn-tabs-active-bg) var(--sn-tabs-corner-size));
+}
+
+.tab[active]::after,
+project-tab-item[active]::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: calc(-1 * var(--sn-tabs-corner-size));
+  width: var(--sn-tabs-corner-size);
+  height: var(--sn-tabs-corner-size);
+  pointer-events: none;
+  background: radial-gradient(circle at 100% 0, transparent var(--sn-tabs-corner-cut), var(--sn-tabs-active-bg) var(--sn-tabs-corner-size));
+}
+
+.tab:not([active]):not(:hover)::after,
+project-tab-item:not([active]):not(:hover)::after {
+  content: '';
+  position: absolute;
+  right: -2px;
+  top: 25%;
+  height: 50%;
+  width: 1px;
+  background: var(--sn-tabs-divider);
+}
+
+.tab:not([active]):not(:hover):has(+ .tab[active])::after,
+.tab:not([active]):not(:hover):has(+ project-tab-item[active])::after,
+.tab:not([active]):not(:hover):has(+ .tab:hover)::after,
+.tab:not([active]):not(:hover):has(+ project-tab-item:hover)::after,
+project-tab-item:not([active]):not(:hover):has(+ project-tab-item[active])::after,
+project-tab-item:not([active]):not(:hover):has(+ project-tab-item:hover)::after,
+.tab:not([active]):not(:hover):has(+ div > project-tab-item:first-child[active])::after,
+.tab:not([active]):not(:hover):has(+ div > project-tab-item:first-child:hover)::after,
+.tab:not([active]):not(:hover):last-child::after,
+project-tab-item:not([active]):not(:hover):last-child::after,
+.tab:not([active]):not(:hover):has(+ div:empty)::after {
+  content: none;
+}
+
+.tab-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: transparent;
+  border: none;
+  color: var(--sn-text-dim);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+
+.tab:hover .tab-close,
+.tab[active] .tab-close,
+project-tab-item:hover .tab-close,
+project-tab-item[active] .tab-close {
+  opacity: 1;
+}
+
+.tab-close:hover {
+  background: color-mix(in srgb, var(--sn-text) 20%, transparent);
+  color: var(--sn-text);
+}
+
+.tab-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--sn-text-dim);
+  cursor: pointer;
+  font-size: 18px;
+  transition: background 0.15s, color 0.15s;
+  margin-left: 4px;
+  margin-bottom: 2px;
+}
+
+.tab-add:hover {
+  background: color-mix(in srgb, var(--sn-text) 10%, transparent);
+  color: var(--sn-text);
+}
+
+.tab-filler {
+  flex: 1;
+}
+
+.tab-items {
+  display: flex;
+  align-items: stretch;
+}
+`;