symbiote-ui 0.3.0-alpha.4

package/ui/overlay-stack.js

@@ -0,0 +1,89 @@
+const DEFAULT_OVERLAY_Z_BASE = 20000;
+
+let overlayZCounter = DEFAULT_OVERLAY_Z_BASE;
+let overlayHomes = new WeakMap();
+
+function readOverlayBase(element) {
+  if (typeof getComputedStyle !== 'function' || !element) return DEFAULT_OVERLAY_Z_BASE;
+  let value = getComputedStyle(element).getPropertyValue('--sn-overlay-z-base').trim();
+  let number = Number.parseInt(value, 10);
+  return Number.isFinite(number) ? number : DEFAULT_OVERLAY_Z_BASE;
+}
+
+function collectCustomProperties(style) {
+  let names = new Set();
+  if (!style) return names;
+  for (let i = 0; i < style.length; i += 1) {
+    let name = style.item?.(i) || style[i];
+    if (typeof name === 'string' && name.startsWith('--sn-')) {
+      names.add(name);
+    }
+  }
+  return names;
+}
+
+export function nextOverlayZIndex(element = null) {
+  overlayZCounter = Math.max(overlayZCounter, readOverlayBase(element));
+  overlayZCounter += 1;
+  return overlayZCounter;
+}
+
+export function bringOverlayToFront(element) {
+  let zIndex = nextOverlayZIndex(element);
+  if (element?.style) {
+    element.style.zIndex = String(zIndex);
+    element.setAttribute?.('data-overlay-z', String(zIndex));
+  }
+  return zIndex;
+}
+
+export function resetOverlayStack(value = DEFAULT_OVERLAY_Z_BASE) {
+  overlayZCounter = Number.isFinite(value) ? value : DEFAULT_OVERLAY_Z_BASE;
+}
+
+export function syncOverlayTheme(element, themeSource) {
+  if (!element?.style || !themeSource || typeof getComputedStyle !== 'function') return;
+
+  let computed = getComputedStyle(themeSource);
+  let inline = themeSource.style;
+  let names = new Set([
+    ...collectCustomProperties(computed),
+    ...collectCustomProperties(inline),
+  ]);
+
+  for (let name of names) {
+    let value = computed.getPropertyValue(name).trim() || inline?.getPropertyValue(name)?.trim();
+    if (value) element.style.setProperty(name, value);
+  }
+}
+
+export function mountOverlayToDocument(element, themeSource = element?.parentElement) {
+  let body = element?.ownerDocument?.body;
+  if (!element || !body) return false;
+
+  if (!overlayHomes.has(element)) {
+    overlayHomes.set(element, {
+      parent: element.parentNode,
+      nextSibling: element.nextSibling,
+    });
+  }
+
+  syncOverlayTheme(element, themeSource);
+  element.toggleAttribute('data-overlay-portal', true);
+  if (element.parentNode !== body) body.appendChild(element);
+  return true;
+}
+
+export function restoreOverlayHome(element) {
+  let home = overlayHomes.get(element);
+  if (!element || !home?.parent) return false;
+
+  if (home.nextSibling?.parentNode === home.parent) {
+    home.parent.insertBefore(element, home.nextSibling);
+  } else {
+    home.parent.appendChild(element);
+  }
+  element.removeAttribute('data-overlay-portal');
+  overlayHomes.delete(element);
+  return true;
+}

package/ui/shared-styles.js

@@ -0,0 +1,26 @@
+const sharedUiStyles = `
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+  background: var(--sn-panel-bg);
+  color: var(--sn-text);
+  overflow: hidden;
+  font-family: var(--sn-font);
+  font-size: 13px;
+}
+
+/* Utility Animations */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Icon Size Utilities */
+.icon-sm { font-size: 14px; }
+.icon-md { font-size: 16px; }
+.icon-lg { font-size: 18px; }
+`;
+
+export { sharedUiStyles };
+export default sharedUiStyles;

package/webmcp.js

@@ -0,0 +1,37 @@
+export function getModelContext(target = globalThis.document) {
+  return target?.modelContext || globalThis.navigator?.modelContext || null;
+}
+
+export function createToolDescriptor(options) {
+  return { ...options };
+}
+
+export async function createNativeToolDescriptor(options) {
+  let { ToolDescriptor } = await import('@symbiotejs/symbiote/webmcp');
+  return new ToolDescriptor(options);
+}
+
+export async function registerWebMcpTool(options, target = globalThis.document) {
+  let context = getModelContext(target);
+  if (!context || typeof context.registerTool !== 'function') {
+    return { nativeActive: false, descriptor: createToolDescriptor(options), unregister: () => {} };
+  }
+
+  let nativeActive = true;
+  let descriptor;
+  if (typeof globalThis.HTMLElement !== 'function') {
+    nativeActive = false;
+    descriptor = createToolDescriptor(options);
+  } else try {
+    descriptor = await createNativeToolDescriptor(options);
+  } catch {
+    nativeActive = false;
+    descriptor = createToolDescriptor(options);
+  }
+  let registration = context.registerTool(descriptor);
+  let unregister = typeof registration === 'function'
+    ? registration
+    : () => registration?.dispose?.() || registration?.unregister?.();
+
+  return { nativeActive, descriptor, unregister };
+}