@servlyadmin/runtime-core 0.1.0 → 0.1.3

package/dist/index.cjs

@@ -3,6 +3,9 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,30 +20,237 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/registry.ts
+var registry_exports = {};
+__export(registry_exports, {
+  buildRegistryFromBundle: () => buildRegistryFromBundle,
+  collectAllDependencies: () => collectAllDependencies,
+  createRegistry: () => createRegistry,
+  detectCircularDependencies: () => detectCircularDependencies,
+  extractDependencies: () => extractDependencies,
+  extractDependenciesFromCode: () => extractDependenciesFromCode
+});
+function createRegistry() {
+  const components = /* @__PURE__ */ new Map();
+  return {
+    get(id, version) {
+      if (version) {
+        const key = `${id}@${version}`;
+        if (components.has(key)) {
+          return components.get(key);
+        }
+      }
+      for (const [key, component] of components) {
+        if (key.startsWith(`${id}@`)) {
+          return component;
+        }
+      }
+      return components.get(id);
+    },
+    has(id, version) {
+      if (version) {
+        return components.has(`${id}@${version}`);
+      }
+      for (const key of components.keys()) {
+        if (key.startsWith(`${id}@`) || key === id) {
+          return true;
+        }
+      }
+      return false;
+    },
+    set(id, version, component) {
+      components.set(`${id}@${version}`, component);
+    }
+  };
+}
+function buildRegistryFromBundle(data) {
+  const registry = createRegistry();
+  registry.set(data.id, data.version, {
+    layout: data.layout,
+    propsInterface: data.propsInterface
+  });
+  if (data.bundle) {
+    for (const [key, component] of Object.entries(data.bundle)) {
+      const [id, version] = key.split("@");
+      if (id && version) {
+        registry.set(id, version, component);
+      }
+    }
+  }
+  return registry;
+}
+function extractDependencies(elements) {
+  const dependencies = [];
+  for (const element of elements) {
+    const config = element.configuration;
+    if (!config) continue;
+    if (config.componentViewRef) {
+      dependencies.push({
+        id: config.componentViewRef,
+        version: config.componentViewVersion,
+        type: "viewRef",
+        elementId: element.i
+      });
+    }
+    if (config.blueprint) {
+      dependencies.push({
+        id: config.blueprint,
+        version: config.blueprintVersion,
+        type: "blueprint",
+        elementId: element.i
+      });
+    }
+  }
+  return dependencies;
+}
+function extractDependenciesFromCode(code) {
+  const dependencies = [];
+  const pattern = /renderDynamicList\s*\(\s*\{[^}]*blueprint\s*:\s*["']([^"']+)["']/g;
+  let match;
+  while ((match = pattern.exec(code)) !== null) {
+    dependencies.push({
+      id: match[1],
+      type: "blueprint"
+    });
+  }
+  return dependencies;
+}
+async function collectAllDependencies(rootId, rootVersion, fetchComponent2, maxDepth = 10) {
+  const manifest = {};
+  const visited = /* @__PURE__ */ new Set();
+  async function collect(id, version, via, depth) {
+    if (depth > maxDepth) {
+      console.warn(`Max dependency depth (${maxDepth}) reached for ${id}`);
+      return;
+    }
+    const key = `${id}@${version || "latest"}`;
+    if (visited.has(key)) {
+      return;
+    }
+    visited.add(key);
+    try {
+      const component = await fetchComponent2(id, version);
+      if (!component) {
+        console.warn(`Dependency not found: ${id}@${version || "latest"}`);
+        return;
+      }
+      manifest[id] = {
+        version: version || "latest",
+        resolved: component.version,
+        type: via ? "viewRef" : "viewRef",
+        // Will be set by caller
+        via
+      };
+      const nestedDeps = extractDependencies(component.layout);
+      for (const dep of nestedDeps) {
+        await collect(dep.id, dep.version, id, depth + 1);
+      }
+    } catch (error) {
+      console.error(`Failed to fetch dependency ${id}:`, error);
+    }
+  }
+  const rootComponent = await fetchComponent2(rootId, rootVersion);
+  if (rootComponent) {
+    const rootDeps = extractDependencies(rootComponent.layout);
+    for (const dep of rootDeps) {
+      manifest[dep.id] = {
+        version: dep.version || "latest",
+        resolved: "",
+        // Will be filled when fetched
+        type: dep.type
+      };
+      await collect(dep.id, dep.version, void 0, 1);
+    }
+  }
+  return manifest;
+}
+function detectCircularDependencies(manifest) {
+  const graph = /* @__PURE__ */ new Map();
+  for (const [id, entry] of Object.entries(manifest)) {
+    if (entry.via) {
+      const deps = graph.get(entry.via) || [];
+      deps.push(id);
+      graph.set(entry.via, deps);
+    }
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const stack = /* @__PURE__ */ new Set();
+  const path = [];
+  function dfs(node) {
+    if (stack.has(node)) {
+      const cycleStart = path.indexOf(node);
+      return [...path.slice(cycleStart), node];
+    }
+    if (visited.has(node)) {
+      return null;
+    }
+    visited.add(node);
+    stack.add(node);
+    path.push(node);
+    const neighbors = graph.get(node) || [];
+    for (const neighbor of neighbors) {
+      const cycle = dfs(neighbor);
+      if (cycle) return cycle;
+    }
+    stack.delete(node);
+    path.pop();
+    return null;
+  }
+  for (const node of graph.keys()) {
+    const cycle = dfs(node);
+    if (cycle) return cycle;
+  }
+  return null;
+}
+var init_registry = __esm({
+  "src/registry.ts"() {
+    "use strict";
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnalyticsCollector: () => AnalyticsCollector,
   DEFAULT_CACHE_CONFIG: () => DEFAULT_CACHE_CONFIG,
   DEFAULT_RETRY_CONFIG: () => DEFAULT_RETRY_CONFIG,
+  LongTaskObserver: () => LongTaskObserver,
+  MemorySampler: () => MemorySampler,
+  SessionManager: () => SessionManager,
+  analytics: () => analytics,
   applyStyles: () => applyStyles,
+  batchFetchComponents: () => batchFetchComponents,
   buildClassName: () => buildClassName,
   buildElementStyles: () => buildElementStyles,
+  buildRegistryFromBundle: () => buildRegistryFromBundle,
   bumpVersion: () => bumpVersion,
   camelToKebab: () => camelToKebab,
   clearAllCaches: () => clearAllCaches,
   clearLocalStorageCache: () => clearLocalStorageCache,
   clearMemoryCache: () => clearMemoryCache,
   clearStyles: () => clearStyles,
+  collectAllDependencies: () => collectAllDependencies,
   compareVersions: () => compareVersions,
+  configureAnalytics: () => configureAnalytics,
+  createRegistry: () => createRegistry,
+  detectCircularDependencies: () => detectCircularDependencies,
   extractBindingKeys: () => extractBindingKeys,
+  extractDependencies: () => extractDependencies,
+  extractDependenciesFromCode: () => extractDependenciesFromCode,
   fetchComponent: () => fetchComponent,
+  fetchComponentWithDependencies: () => fetchComponentWithDependencies,
   formatStyleValue: () => formatStyleValue,
   formatVersion: () => formatVersion,
   generateTestCases: () => generateTestCases,
+  getAnalytics: () => getAnalytics,
   getCacheKey: () => getCacheKey,
+  getDependencyTree: () => getDependencyTree,
   getFromCache: () => getFromCache,
+  getLongTaskObserver: () => getLongTaskObserver,
   getMemoryCacheSize: () => getMemoryCacheSize,
+  getMemorySampler: () => getMemorySampler,
   getRegistryUrl: () => getRegistryUrl,
+  getSessionManager: () => getSessionManager,
   hasTemplateSyntax: () => hasTemplateSyntax,
   invalidateCache: () => invalidateCache,
   isComponentAvailable: () => isComponentAvailable,
@@ -49,6 +259,11 @@ __export(index_exports, {
   prefetchComponents: () => prefetchComponents,
   processStyles: () => processStyles,
   render: () => render,
+  renderDynamicList: () => renderDynamicList,
+  resetAnalytics: () => resetAnalytics,
+  resetLongTaskObserver: () => resetLongTaskObserver,
+  resetMemorySampler: () => resetMemorySampler,
+  resetSessionManager: () => resetSessionManager,
   resolveBindingPath: () => resolveBindingPath,
   resolveTemplate: () => resolveTemplate,
   resolveTemplateValue: () => resolveTemplateValue,
@@ -65,6 +280,516 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/analyticsTypes.ts
+var DEFAULT_ANALYTICS_CONFIG = {
+  enabled: true,
+  endpoint: "/api/v1/analytics/events",
+  batchSize: 50,
+  flushInterval: 3e4,
+  // 30 seconds
+  sampleRate: 1,
+  environment: "production",
+  debug: false
+};
+var MAX_ERROR_MESSAGE_LENGTH = 1e3;
+var MAX_STACK_TRACE_LENGTH = 500;
+var MAX_QUEUE_SIZE = 500;
+var MAX_RETRY_ATTEMPTS = 3;
+var SESSION_TIMEOUT_MS = 30 * 60 * 1e3;
+var SDK_VERSION = "1.0.0";
+
+// src/sessionManager.ts
+var SESSION_STORAGE_KEY = "servly_analytics_session";
+function generateUUID() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function isSessionStorageAvailable() {
+  try {
+    if (typeof sessionStorage === "undefined") {
+      return false;
+    }
+    const testKey = "__servly_test__";
+    sessionStorage.setItem(testKey, "test");
+    sessionStorage.removeItem(testKey);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function loadSession() {
+  if (!isSessionStorageAvailable()) {
+    return null;
+  }
+  try {
+    const stored = sessionStorage.getItem(SESSION_STORAGE_KEY);
+    if (!stored) {
+      return null;
+    }
+    return JSON.parse(stored);
+  } catch {
+    return null;
+  }
+}
+function saveSession(session) {
+  if (!isSessionStorageAvailable()) {
+    return;
+  }
+  try {
+    sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(session));
+  } catch {
+  }
+}
+function clearSession() {
+  if (!isSessionStorageAvailable()) {
+    return;
+  }
+  try {
+    sessionStorage.removeItem(SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
+function isSessionExpired(session) {
+  const now = Date.now();
+  return now - session.lastActivityAt > SESSION_TIMEOUT_MS;
+}
+var SessionManager = class {
+  constructor() {
+    this.session = null;
+    this.initialize();
+  }
+  /**
+   * Initialize session manager
+   */
+  initialize() {
+    const stored = loadSession();
+    if (stored && !isSessionExpired(stored)) {
+      this.session = stored;
+      this.touch();
+    } else {
+      this.createNewSession();
+    }
+  }
+  /**
+   * Create a new session
+   */
+  createNewSession() {
+    const now = Date.now();
+    this.session = {
+      id: generateUUID(),
+      createdAt: now,
+      lastActivityAt: now
+    };
+    saveSession(this.session);
+  }
+  /**
+   * Get current session ID
+   * Creates new session if expired
+   */
+  getSessionId() {
+    if (!this.session || isSessionExpired(this.session)) {
+      this.createNewSession();
+    }
+    return this.session.id;
+  }
+  /**
+   * Update last activity timestamp
+   */
+  touch() {
+    if (this.session) {
+      this.session.lastActivityAt = Date.now();
+      saveSession(this.session);
+    }
+  }
+  /**
+   * Force create a new session
+   */
+  rotate() {
+    this.createNewSession();
+  }
+  /**
+   * Clear current session
+   */
+  clear() {
+    this.session = null;
+    clearSession();
+  }
+  /**
+   * Get session info (for debugging)
+   */
+  getSessionInfo() {
+    return this.session ? { ...this.session } : null;
+  }
+};
+var sessionManagerInstance = null;
+function getSessionManager() {
+  if (!sessionManagerInstance) {
+    sessionManagerInstance = new SessionManager();
+  }
+  return sessionManagerInstance;
+}
+function resetSessionManager() {
+  if (sessionManagerInstance) {
+    sessionManagerInstance.clear();
+  }
+  sessionManagerInstance = null;
+}
+
+// src/analytics.ts
+var AnalyticsCollector = class {
+  constructor(config) {
+    this.eventQueue = [];
+    this.flushTimer = null;
+    this.isFlushing = false;
+    this.retryDelay = 1e3;
+    this.config = { ...DEFAULT_ANALYTICS_CONFIG, ...config };
+    this.isEnabled = this.config.enabled;
+    this.startFlushTimer();
+  }
+  // ============================================
+  // Configuration
+  // ============================================
+  /**
+   * Configure analytics
+   */
+  configure(config) {
+    this.config = { ...this.config, ...config };
+    this.isEnabled = this.config.enabled;
+    this.stopFlushTimer();
+    if (this.isEnabled) {
+      this.startFlushTimer();
+    }
+  }
+  /**
+   * Disable analytics collection
+   */
+  disable() {
+    this.isEnabled = false;
+    this.stopFlushTimer();
+    this.eventQueue = [];
+  }
+  /**
+   * Enable analytics collection
+   */
+  enable() {
+    this.isEnabled = true;
+    this.startFlushTimer();
+  }
+  /**
+   * Destroy and cleanup
+   */
+  destroy() {
+    this.disable();
+  }
+  // ============================================
+  // Event Tracking
+  // ============================================
+  /**
+   * Track component render
+   */
+  trackRender(componentId, version, duration, metadata) {
+    if (!this.shouldTrack()) {
+      return;
+    }
+    const event = {
+      type: "render",
+      componentId,
+      version,
+      timestamp: Date.now(),
+      sessionId: getSessionManager().getSessionId(),
+      appId: this.config.appId,
+      duration: Math.round(duration),
+      metadata
+    };
+    this.queueEvent(event);
+  }
+  /**
+   * Track component fetch
+   */
+  trackFetch(componentId, version, duration, fromCache, metadata) {
+    if (!this.shouldTrack()) {
+      return;
+    }
+    const event = {
+      type: "fetch",
+      componentId,
+      version,
+      timestamp: Date.now(),
+      sessionId: getSessionManager().getSessionId(),
+      appId: this.config.appId,
+      duration: Math.round(duration),
+      metadata: {
+        cacheHit: fromCache,
+        fetchDuration: Math.round(duration),
+        ...metadata
+      }
+    };
+    this.queueEvent(event);
+  }
+  /**
+   * Track error
+   */
+  trackError(componentId, version, error, context) {
+    if (!this.shouldTrack()) {
+      return;
+    }
+    const errorMessage = this.truncateString(
+      error.message || "Unknown error",
+      MAX_ERROR_MESSAGE_LENGTH
+    );
+    const stackTrace = error.stack ? this.truncateString(error.stack, MAX_STACK_TRACE_LENGTH) : void 0;
+    const event = {
+      type: "error",
+      componentId,
+      version,
+      timestamp: Date.now(),
+      sessionId: getSessionManager().getSessionId(),
+      appId: this.config.appId,
+      metadata: {
+        errorType: context?.errorType || "render",
+        errorMessage,
+        stackTrace,
+        bindingPath: context?.bindingPath,
+        elementId: context?.elementId
+      }
+    };
+    this.queueEvent(event);
+  }
+  // ============================================
+  // Queue Management
+  // ============================================
+  /**
+   * Check if event should be tracked (sampling + enabled)
+   */
+  shouldTrack() {
+    if (!this.isEnabled) {
+      return false;
+    }
+    if (this.config.sampleRate < 1) {
+      return Math.random() < this.config.sampleRate;
+    }
+    return true;
+  }
+  /**
+   * Add event to queue
+   */
+  queueEvent(event) {
+    if (this.eventQueue.length >= MAX_QUEUE_SIZE) {
+      this.eventQueue.shift();
+      this.log("Queue full, dropping oldest event");
+    }
+    this.eventQueue.push({
+      event,
+      retryCount: 0,
+      addedAt: Date.now()
+    });
+    if (this.eventQueue.length >= this.config.batchSize) {
+      this.flush();
+    }
+  }
+  /**
+   * Get current queue size
+   */
+  getQueueSize() {
+    return this.eventQueue.length;
+  }
+  // ============================================
+  // Flush Logic
+  // ============================================
+  /**
+   * Start the flush timer
+   */
+  startFlushTimer() {
+    if (this.flushTimer) {
+      return;
+    }
+    this.flushTimer = setInterval(() => {
+      this.flush();
+    }, this.config.flushInterval);
+  }
+  /**
+   * Stop the flush timer
+   */
+  stopFlushTimer() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+      this.flushTimer = null;
+    }
+  }
+  /**
+   * Flush events to server
+   */
+  async flush() {
+    if (this.isFlushing || this.eventQueue.length === 0) {
+      return;
+    }
+    this.isFlushing = true;
+    if (typeof requestIdleCallback !== "undefined") {
+      requestIdleCallback(
+        () => {
+          this.doFlush();
+        },
+        { timeout: 5e3 }
+      );
+    } else {
+      setTimeout(() => {
+        this.doFlush();
+      }, 0);
+    }
+  }
+  /**
+   * Perform the actual flush
+   */
+  async doFlush() {
+    const eventsToSend = this.eventQueue.splice(0, this.config.batchSize);
+    if (eventsToSend.length === 0) {
+      this.isFlushing = false;
+      return;
+    }
+    const request = {
+      events: eventsToSend.map((q) => q.event),
+      clientInfo: {
+        sdkVersion: SDK_VERSION,
+        environment: this.config.environment
+      }
+    };
+    try {
+      const response = await this.sendEvents(request);
+      if (response.success) {
+        this.log(`Flushed ${response.accepted} events`);
+        this.retryDelay = 1e3;
+      } else {
+        this.handleFailedEvents(eventsToSend, response);
+      }
+    } catch (error) {
+      this.handleNetworkError(eventsToSend, error);
+    } finally {
+      this.isFlushing = false;
+    }
+  }
+  /**
+   * Send events to the API
+   */
+  async sendEvents(request) {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.config.apiKey) {
+      headers["Authorization"] = `Bearer ${this.config.apiKey}`;
+    }
+    const response = await fetch(this.config.endpoint, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(request)
+    });
+    if (response.status === 429) {
+      const retryAfter = parseInt(response.headers.get("Retry-After") || "60", 10);
+      return {
+        success: false,
+        accepted: 0,
+        rejected: request.events.length,
+        retryAfter
+      };
+    }
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    return await response.json();
+  }
+  /**
+   * Handle failed events (partial success)
+   */
+  handleFailedEvents(events, response) {
+    const eventsToRetry = events.filter((e) => e.retryCount < MAX_RETRY_ATTEMPTS);
+    eventsToRetry.forEach((e) => {
+      e.retryCount++;
+      this.eventQueue.unshift(e);
+    });
+    const dropped = events.length - eventsToRetry.length;
+    if (dropped > 0) {
+      this.log(`Dropped ${dropped} events after max retries`);
+    }
+    if (response.retryAfter) {
+      this.scheduleRetry(response.retryAfter * 1e3);
+    }
+  }
+  /**
+   * Handle network error
+   */
+  handleNetworkError(events, error) {
+    this.log(`Network error: ${error}`);
+    const eventsToRetry = events.filter((e) => e.retryCount < MAX_RETRY_ATTEMPTS);
+    eventsToRetry.forEach((e) => {
+      e.retryCount++;
+      this.eventQueue.unshift(e);
+    });
+    this.scheduleRetry(this.retryDelay);
+    this.retryDelay = Math.min(this.retryDelay * 2, 3e4);
+  }
+  /**
+   * Schedule a retry flush
+   */
+  scheduleRetry(delayMs) {
+    setTimeout(() => {
+      this.flush();
+    }, delayMs);
+  }
+  // ============================================
+  // Utilities
+  // ============================================
+  /**
+   * Truncate string to max length
+   */
+  truncateString(str, maxLength) {
+    if (str.length <= maxLength) {
+      return str;
+    }
+    return str.substring(0, maxLength - 3) + "...";
+  }
+  /**
+   * Log debug message
+   */
+  log(message) {
+    if (this.config.debug) {
+      console.log(`[Analytics] ${message}`);
+    }
+  }
+};
+var analyticsInstance = null;
+function getAnalytics() {
+  if (!analyticsInstance) {
+    analyticsInstance = new AnalyticsCollector();
+  }
+  return analyticsInstance;
+}
+function configureAnalytics(config) {
+  getAnalytics().configure(config);
+}
+function resetAnalytics() {
+  if (analyticsInstance) {
+    analyticsInstance.destroy();
+  }
+  analyticsInstance = null;
+}
+var analytics = {
+  get instance() {
+    return getAnalytics();
+  },
+  configure: configureAnalytics,
+  trackRender: (componentId, version, duration, metadata) => getAnalytics().trackRender(componentId, version, duration, metadata),
+  trackFetch: (componentId, version, duration, fromCache, metadata) => getAnalytics().trackFetch(componentId, version, duration, fromCache, metadata),
+  trackError: (componentId, version, error, context) => getAnalytics().trackError(componentId, version, error, context),
+  flush: () => getAnalytics().flush(),
+  disable: () => getAnalytics().disable(),
+  enable: () => getAnalytics().enable()
+};
+
 // src/bindings.ts
 var BINDING_SOURCES = [
   "props",
@@ -171,44 +896,64 @@ function resolveTernaryValue(value, context) {
   if (value === "undefined") return void 0;
   return resolveExpression(value, context);
 }
-function resolveTemplate(template, context) {
+function resolveTemplate(template, context, componentId) {
   if (!template || typeof template !== "string") {
     return template;
   }
   if (!hasTemplateSyntax(template)) {
     return template;
   }
-  const singleMatch = template.match(/^\{\{([^}]+)\}\}$/);
-  if (singleMatch) {
-    const value = resolveExpression(singleMatch[1], context);
-    if (value === void 0 || value === null) {
-      return "";
-    }
-    return String(value);
-  }
-  return template.replace(TEMPLATE_REGEX, (match, expression) => {
-    const value = resolveExpression(expression, context);
-    if (value === void 0 || value === null) {
-      return "";
+  try {
+    const singleMatch = template.match(/^\{\{([^}]+)\}\}$/);
+    if (singleMatch) {
+      const value = resolveExpression(singleMatch[1], context);
+      if (value === void 0 || value === null) {
+        return "";
+      }
+      return String(value);
     }
-    if (typeof value === "object") {
-      return JSON.stringify(value);
+    return template.replace(TEMPLATE_REGEX, (match, expression) => {
+      const value = resolveExpression(expression, context);
+      if (value === void 0 || value === null) {
+        return "";
+      }
+      if (typeof value === "object") {
+        return JSON.stringify(value);
+      }
+      return String(value);
+    });
+  } catch (error) {
+    if (componentId) {
+      analytics.trackError(componentId, "latest", error, {
+        errorType: "binding",
+        bindingPath: template
+      });
     }
-    return String(value);
-  });
+    return "";
+  }
 }
-function resolveTemplateValue(template, context) {
+function resolveTemplateValue(template, context, componentId) {
   if (!template || typeof template !== "string") {
     return template;
   }
   if (!hasTemplateSyntax(template)) {
     return template;
   }
-  const singleMatch = template.match(/^\{\{([^}]+)\}\}$/);
-  if (singleMatch) {
-    return resolveExpression(singleMatch[1], context);
+  try {
+    const singleMatch = template.match(/^\{\{([^}]+)\}\}$/);
+    if (singleMatch) {
+      return resolveExpression(singleMatch[1], context);
+    }
+    return resolveTemplate(template, context, componentId);
+  } catch (error) {
+    if (componentId) {
+      analytics.trackError(componentId, "latest", error, {
+        errorType: "binding",
+        bindingPath: template
+      });
+    }
+    return void 0;
   }
-  return resolveTemplate(template, context);
 }
 function isPlainObject(value) {
   return Object.prototype.toString.call(value) === "[object Object]";
@@ -361,17 +1106,39 @@ function applyStyles(element, styles) {
     }
   }
 }
+var CANVAS_ONLY_STYLES = /* @__PURE__ */ new Set([
+  "transform",
+  "--translate-x",
+  "--translate-y",
+  "--width",
+  "--height",
+  "z-index",
+  "zIndex"
+]);
+function filterCanvasStyles(style) {
+  const filtered = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (CANVAS_ONLY_STYLES.has(key)) {
+      continue;
+    }
+    if (key === "transform" && typeof value === "string" && value.includes("translate(")) {
+      continue;
+    }
+    filtered[key] = value;
+  }
+  return filtered;
+}
 function buildElementStyles(element, context) {
   const config = element.configuration || {};
   const combined = {};
   if (element.style) {
-    Object.assign(combined, element.style);
+    Object.assign(combined, filterCanvasStyles(element.style));
   }
   if (config.style) {
-    Object.assign(combined, config.style);
+    Object.assign(combined, filterCanvasStyles(config.style));
   }
   if (config.cssVariables) {
-    Object.assign(combined, config.cssVariables);
+    Object.assign(combined, filterCanvasStyles(config.cssVariables));
   }
   return processStyles(combined, context);
 }
@@ -419,6 +1186,162 @@ function updateStyles(element, oldStyles, newStyles) {
   }
 }
 
+// src/memorySampler.ts
+var MemorySampler = class {
+  constructor() {
+    this.isSupported = this.checkSupport();
+  }
+  /**
+   * Check if memory API is available
+   */
+  checkSupport() {
+    if (typeof performance === "undefined") {
+      return false;
+    }
+    const perf = performance;
+    return typeof perf.memory !== "undefined";
+  }
+  /**
+   * Check if memory sampling is available
+   */
+  isAvailable() {
+    return this.isSupported;
+  }
+  /**
+   * Take a memory sample
+   * Returns null if memory API is not available
+   */
+  sample() {
+    if (!this.isSupported) {
+      return null;
+    }
+    const perf = performance;
+    if (!perf.memory) {
+      return null;
+    }
+    return {
+      heapUsedKB: Math.round(perf.memory.usedJSHeapSize / 1024),
+      heapTotalKB: Math.round(perf.memory.totalJSHeapSize / 1024),
+      timestamp: Date.now()
+    };
+  }
+  /**
+   * Calculate heap delta between two samples
+   * Returns the difference in KB (positive = memory increased)
+   */
+  calculateDelta(before, after) {
+    if (!before || !after) {
+      return null;
+    }
+    return after.heapUsedKB - before.heapUsedKB;
+  }
+};
+var memorySamplerInstance = null;
+function getMemorySampler() {
+  if (!memorySamplerInstance) {
+    memorySamplerInstance = new MemorySampler();
+  }
+  return memorySamplerInstance;
+}
+function resetMemorySampler() {
+  memorySamplerInstance = null;
+}
+
+// src/longTaskObserver.ts
+var LongTaskObserver = class {
+  constructor() {
+    this.observer = null;
+    this.longTaskCount = 0;
+    this.isObserving = false;
+    this.isSupported = this.checkSupport();
+  }
+  /**
+   * Check if PerformanceObserver with longtask support is available
+   */
+  checkSupport() {
+    if (typeof PerformanceObserver === "undefined") {
+      return false;
+    }
+    try {
+      const supportedTypes = PerformanceObserver.supportedEntryTypes;
+      return Array.isArray(supportedTypes) && supportedTypes.includes("longtask");
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Check if long task observation is available
+   */
+  isAvailable() {
+    return this.isSupported;
+  }
+  /**
+   * Start observing long tasks
+   */
+  start() {
+    if (!this.isSupported || this.isObserving) {
+      return;
+    }
+    this.longTaskCount = 0;
+    try {
+      this.observer = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        this.longTaskCount += entries.length;
+      });
+      this.observer.observe({ entryTypes: ["longtask"] });
+      this.isObserving = true;
+    } catch {
+      this.isSupported = false;
+    }
+  }
+  /**
+   * Stop observing and return the count of long tasks
+   */
+  stop() {
+    if (!this.isObserving || !this.observer) {
+      return this.longTaskCount;
+    }
+    try {
+      this.observer.disconnect();
+    } catch {
+    }
+    this.observer = null;
+    this.isObserving = false;
+    return this.longTaskCount;
+  }
+  /**
+   * Reset the long task counter
+   */
+  reset() {
+    this.longTaskCount = 0;
+  }
+  /**
+   * Get current count without stopping observation
+   */
+  getCount() {
+    return this.longTaskCount;
+  }
+  /**
+   * Check if currently observing
+   */
+  isActive() {
+    return this.isObserving;
+  }
+};
+var longTaskObserverInstance = null;
+function getLongTaskObserver() {
+  if (!longTaskObserverInstance) {
+    longTaskObserverInstance = new LongTaskObserver();
+  }
+  return longTaskObserverInstance;
+}
+function resetLongTaskObserver() {
+  if (longTaskObserverInstance) {
+    longTaskObserverInstance.stop();
+  }
+  longTaskObserverInstance = null;
+}
+
 // src/renderer.ts
 var COMPONENT_TO_TAG = {
   container: "div",
@@ -594,60 +1517,162 @@ function createElement(element, context, eventHandlers) {
   attachEventHandlers(domElement, element.i, eventHandlers, elementState);
   return elementState;
 }
-function renderElement(element, tree, context, eventHandlers, elementStates) {
+var globalRenderingStack = /* @__PURE__ */ new Set();
+function renderComponentRef(element, container, context, state) {
+  const config = element.configuration;
+  if (!config?.componentViewRef) return void 0;
+  const refId = config.componentViewRef;
+  const refVersion = config.componentViewVersion;
+  if (globalRenderingStack.has(refId)) {
+    console.warn(`Circular dependency detected: ${refId} is already being rendered`);
+    const placeholder = document.createElement("div");
+    placeholder.setAttribute("data-servly-circular", refId);
+    placeholder.textContent = `[Circular: ${refId}]`;
+    container.appendChild(placeholder);
+    return void 0;
+  }
+  let component;
+  if (state.componentRegistry) {
+    component = state.componentRegistry.get(refId, refVersion);
+  }
+  if (!component) {
+    const placeholder = document.createElement("div");
+    placeholder.setAttribute("data-servly-loading", refId);
+    placeholder.className = "servly-loading";
+    container.appendChild(placeholder);
+    if (state.onDependencyNeeded) {
+      state.onDependencyNeeded(refId, refVersion).then((loaded) => {
+        if (loaded && state.componentRegistry) {
+          state.componentRegistry.set(refId, refVersion || "latest", loaded);
+          container.innerHTML = "";
+          renderComponentRef(element, container, context, state);
+        }
+      }).catch((err) => {
+        console.error(`Failed to load dependency ${refId}:`, err);
+        placeholder.textContent = `[Failed to load: ${refId}]`;
+        placeholder.className = "servly-error";
+      });
+    }
+    return void 0;
+  }
+  const refProps = config.componentViewProps ? resolveTemplatesDeep(config.componentViewProps, context) : {};
+  globalRenderingStack.add(refId);
+  const refContext = {
+    props: refProps,
+    state: context.state,
+    context: context.context
+  };
+  try {
+    const result = render({
+      container,
+      elements: component.layout,
+      context: refContext,
+      componentRegistry: state.componentRegistry,
+      onDependencyNeeded: state.onDependencyNeeded
+    });
+    return result;
+  } finally {
+    globalRenderingStack.delete(refId);
+  }
+}
+function renderElement(element, tree, context, eventHandlers, elementStates, state) {
   const elementState = createElement(element, context, eventHandlers);
   elementStates.set(element.i, elementState);
+  const config = element.configuration;
+  if (config?.componentViewRef) {
+    const nestedResult = renderComponentRef(element, elementState.domElement, context, state);
+    if (nestedResult) {
+      elementState.nestedRender = nestedResult;
+    }
+    return elementState.domElement;
+  }
   const children = tree.get(element.i) || [];
   for (const child of children) {
-    const childElement = renderElement(child, tree, context, eventHandlers, elementStates);
+    const childElement = renderElement(child, tree, context, eventHandlers, elementStates, state);
     elementState.domElement.appendChild(childElement);
   }
   return elementState.domElement;
 }
 function render(options) {
-  const { container, elements, context, eventHandlers } = options;
-  const tree = buildTree(elements);
+  const { container, elements, context, eventHandlers, componentRegistry, onDependencyNeeded } = options;
+  const startTime = performance.now();
+  const memorySampler = getMemorySampler();
+  const longTaskObserver = getLongTaskObserver();
+  const memoryBefore = memorySampler.sample();
+  longTaskObserver.start();
   const rootElements = elements.filter((el) => !el.parent || el.parent === null);
-  const state = {
-    container,
-    elements,
-    context,
-    eventHandlers,
-    elementStates: /* @__PURE__ */ new Map(),
-    rootElement: null
-  };
-  container.innerHTML = "";
-  if (rootElements.length === 0) {
-    return {
-      rootElement: null,
-      update: (newContext) => update(state, newContext),
-      destroy: () => destroy(state)
-    };
-  }
-  if (rootElements.length === 1) {
-    state.rootElement = renderElement(
-      rootElements[0],
-      tree,
+  const componentId = rootElements[0]?.componentId || "unknown";
+  const version = "latest";
+  try {
+    const tree = buildTree(elements);
+    const state = {
+      container,
+      elements,
       context,
       eventHandlers,
-      state.elementStates
-    );
-    container.appendChild(state.rootElement);
-  } else {
-    const wrapper = document.createElement("div");
-    wrapper.setAttribute("data-servly-wrapper", "true");
-    for (const root of rootElements) {
-      const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates);
-      wrapper.appendChild(rootElement);
+      elementStates: /* @__PURE__ */ new Map(),
+      rootElement: null,
+      componentRegistry,
+      onDependencyNeeded,
+      renderingStack: /* @__PURE__ */ new Set()
+    };
+    container.innerHTML = "";
+    if (rootElements.length === 0) {
+      const duration2 = performance.now() - startTime;
+      const longTasks2 = longTaskObserver.stop();
+      analytics.trackRender(componentId, version, duration2, {
+        elementCount: 0,
+        longTaskCount: longTasks2
+      });
+      return {
+        rootElement: null,
+        update: (newContext) => update(state, newContext),
+        destroy: () => destroy(state)
+      };
     }
-    state.rootElement = wrapper;
-    container.appendChild(wrapper);
+    if (rootElements.length === 1) {
+      state.rootElement = renderElement(
+        rootElements[0],
+        tree,
+        context,
+        eventHandlers,
+        state.elementStates,
+        state
+      );
+      container.appendChild(state.rootElement);
+    } else {
+      const wrapper = document.createElement("div");
+      wrapper.setAttribute("data-servly-wrapper", "true");
+      for (const root of rootElements) {
+        const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates, state);
+        wrapper.appendChild(rootElement);
+      }
+      state.rootElement = wrapper;
+      container.appendChild(wrapper);
+    }
+    const duration = performance.now() - startTime;
+    const memoryAfter = memorySampler.sample();
+    const longTasks = longTaskObserver.stop();
+    const heapDelta = memorySampler.calculateDelta(memoryBefore, memoryAfter);
+    analytics.trackRender(componentId, version, duration, {
+      elementCount: elements.length,
+      heapDeltaKB: heapDelta ?? void 0,
+      longTaskCount: longTasks,
+      hasEventHandlers: !!eventHandlers && Object.keys(eventHandlers).length > 0,
+      hasDependencies: !!componentRegistry
+    });
+    return {
+      rootElement: state.rootElement,
+      update: (newContext) => update(state, newContext),
+      destroy: () => destroy(state)
+    };
+  } catch (error) {
+    longTaskObserver.stop();
+    analytics.trackError(componentId, version, error, {
+      errorType: "render"
+    });
+    throw error;
   }
-  return {
-    rootElement: state.rootElement,
-    update: (newContext) => update(state, newContext),
-    destroy: () => destroy(state)
-  };
 }
 function update(state, newContext) {
   state.context = newContext;
@@ -675,6 +1700,9 @@ function update(state, newContext) {
 function destroy(state) {
   for (const elementState of state.elementStates.values()) {
     detachEventHandlers(elementState);
+    if (elementState.nestedRender) {
+      elementState.nestedRender.destroy();
+    }
   }
   state.elementStates.clear();
   if (state.rootElement && state.rootElement.parentNode) {
@@ -682,6 +1710,66 @@ function destroy(state) {
   }
   state.rootElement = null;
 }
+function renderDynamicList(options) {
+  const {
+    targetContainer,
+    blueprint,
+    blueprintVersion,
+    data,
+    renderType = "renderInto",
+    itemKey = "item",
+    indexKey = "index",
+    componentRegistry,
+    context = { props: {} }
+  } = options;
+  let container;
+  if (typeof targetContainer === "string") {
+    container = document.querySelector(targetContainer);
+  } else {
+    container = targetContainer;
+  }
+  if (!container) {
+    console.error(`renderDynamicList: Container not found: ${targetContainer}`);
+    return [];
+  }
+  const blueprintComponent = componentRegistry.get(blueprint, blueprintVersion);
+  if (!blueprintComponent) {
+    console.error(`renderDynamicList: Blueprint not found: ${blueprint}`);
+    return [];
+  }
+  if (renderType === "renderInto") {
+    container.innerHTML = "";
+  }
+  const results = [];
+  const fragment = document.createDocumentFragment();
+  data.forEach((item, index) => {
+    const itemContainer = document.createElement("div");
+    itemContainer.setAttribute("data-servly-list-item", String(index));
+    const itemContext = {
+      props: {
+        ...context.props,
+        [itemKey]: item,
+        [indexKey]: index
+      },
+      state: context.state,
+      context: context.context
+    };
+    const result = render({
+      container: itemContainer,
+      elements: blueprintComponent.layout,
+      context: itemContext,
+      componentRegistry
+    });
+    results.push(result);
+    fragment.appendChild(itemContainer);
+  });
+  if (renderType === "prepend") {
+    container.insertBefore(fragment, container.firstChild);
+  } else {
+    container.appendChild(fragment);
+  }
+  return results;
+}
 
 // src/cache.ts
 var DEFAULT_CACHE_CONFIG = {
@@ -927,126 +2015,15 @@ function invalidateCache(id, version, config = DEFAULT_CACHE_CONFIG) {
   }
 }
 
-// src/version.ts
-function parseVersion(version) {
-  const match = version.match(/^(\d+)\.(\d+)\.(\d+)$/);
-  if (!match) return null;
-  return {
-    major: parseInt(match[1], 10),
-    minor: parseInt(match[2], 10),
-    patch: parseInt(match[3], 10)
-  };
-}
-function compareVersions(a, b) {
-  const parsedA = parseVersion(a);
-  const parsedB = parseVersion(b);
-  if (!parsedA || !parsedB) return 0;
-  if (parsedA.major !== parsedB.major) {
-    return parsedA.major > parsedB.major ? 1 : -1;
-  }
-  if (parsedA.minor !== parsedB.minor) {
-    return parsedA.minor > parsedB.minor ? 1 : -1;
-  }
-  if (parsedA.patch !== parsedB.patch) {
-    return parsedA.patch > parsedB.patch ? 1 : -1;
-  }
-  return 0;
-}
-function satisfiesVersion(version, specifier) {
-  if (specifier === "latest" || specifier === "*") {
-    return true;
-  }
-  const parsed = parseVersion(version);
-  if (!parsed) return false;
-  if (/^\d+\.\d+\.\d+$/.test(specifier)) {
-    return version === specifier;
-  }
-  if (specifier.startsWith("^")) {
-    const specParsed = parseVersion(specifier.slice(1));
-    if (!specParsed) return false;
-    if (parsed.major !== specParsed.major) return false;
-    if (parsed.major === 0) {
-      return parsed.minor === specParsed.minor && parsed.patch >= specParsed.patch;
-    }
-    return compareVersions(version, specifier.slice(1)) >= 0;
-  }
-  if (specifier.startsWith("~")) {
-    const specParsed = parseVersion(specifier.slice(1));
-    if (!specParsed) return false;
-    return parsed.major === specParsed.major && parsed.minor === specParsed.minor && parsed.patch >= specParsed.patch;
-  }
-  if (specifier.startsWith(">=")) {
-    return compareVersions(version, specifier.slice(2)) >= 0;
-  }
-  if (specifier.startsWith(">")) {
-    return compareVersions(version, specifier.slice(1)) > 0;
-  }
-  if (specifier.startsWith("<=")) {
-    return compareVersions(version, specifier.slice(2)) <= 0;
-  }
-  if (specifier.startsWith("<")) {
-    return compareVersions(version, specifier.slice(1)) < 0;
-  }
-  return false;
-}
-function resolveVersion(versions, specifier = "latest") {
-  if (versions.length === 0) {
-    return null;
-  }
-  const sorted = [...versions].sort((a, b) => compareVersions(b, a));
-  if (specifier === "latest" || specifier === "*") {
-    return sorted[0];
-  }
-  if (/^\d+\.\d+\.\d+$/.test(specifier)) {
-    return versions.includes(specifier) ? specifier : null;
-  }
-  for (const version of sorted) {
-    if (satisfiesVersion(version, specifier)) {
-      return version;
-    }
-  }
-  return null;
-}
-function bumpVersion(currentVersion, bumpType) {
-  const parsed = parseVersion(currentVersion);
-  if (!parsed) return "1.0.0";
-  switch (bumpType) {
-    case "major":
-      return `${parsed.major + 1}.0.0`;
-    case "minor":
-      return `${parsed.major}.${parsed.minor + 1}.0`;
-    case "patch":
-      return `${parsed.major}.${parsed.minor}.${parsed.patch + 1}`;
-    default:
-      return currentVersion;
-  }
-}
-function isValidSpecifier(specifier) {
-  if (specifier === "latest" || specifier === "*") {
-    return true;
-  }
-  if (/^\d+\.\d+\.\d+$/.test(specifier)) {
-    return true;
-  }
-  if (/^[\^~><]=?\d+\.\d+\.\d+$/.test(specifier)) {
-    return true;
-  }
-  return false;
-}
-function formatVersion(version) {
-  const parsed = parseVersion(version);
-  if (!parsed) return version;
-  return `v${parsed.major}.${parsed.minor}.${parsed.patch}`;
-}
-
 // src/fetcher.ts
+init_registry();
 var DEFAULT_RETRY_CONFIG = {
   maxRetries: 3,
   initialDelay: 1e3,
   maxDelay: 1e4,
   backoffMultiplier: 2
 };
-var registryBaseUrl = "/api/components";
+var registryBaseUrl = "/api/views/registry";
 function setRegistryUrl(url) {
   registryBaseUrl = url;
 }
@@ -1080,19 +2057,15 @@ async function resolveVersionFromApi(id, specifier, apiKey) {
   }
   try {
     const response = await fetch(
-      `${baseUrl}/${id}/versions?specifier=${encodeURIComponent(specifier)}`,
+      `${baseUrl}/${id}/resolve?specifier=${encodeURIComponent(specifier)}`,
       { headers }
     );
     if (!response.ok) {
       throw new Error(`Failed to resolve version: ${response.statusText}`);
     }
     const data = await response.json();
-    if (data.success && data.data?.resolvedVersion) {
-      return data.data.resolvedVersion;
-    }
-    if (data.data?.versions) {
-      const resolved = resolveVersion(data.data.versions, specifier);
-      if (resolved) return resolved;
+    if (data.success && data.data?.resolved) {
+      return data.data.resolved;
     }
     throw new Error(data.error || "Failed to resolve version");
   } catch (error) {
@@ -1100,7 +2073,7 @@ async function resolveVersionFromApi(id, specifier, apiKey) {
     return "latest";
   }
 }
-async function fetchFromRegistry(id, version, apiKey) {
+async function fetchFromRegistry(id, version, apiKey, includeBundle) {
   const baseUrl = getRegistryUrl();
   const headers = {
     "Content-Type": "application/json"
@@ -1108,25 +2081,39 @@ async function fetchFromRegistry(id, version, apiKey) {
   if (apiKey) {
     headers["Authorization"] = `Bearer ${apiKey}`;
   }
-  const url = version && version !== "latest" ? `${baseUrl}/${id}/versions/${version}` : `${baseUrl}/${id}`;
+  let url;
+  if (version && version !== "latest" && /^\d+\.\d+\.\d+/.test(version)) {
+    url = `${baseUrl}/${id}/versions/${version}`;
+  } else if (version && version !== "latest") {
+    url = `${baseUrl}/${id}?version=${encodeURIComponent(version)}`;
+  } else {
+    url = `${baseUrl}/${id}`;
+  }
+  if (includeBundle) {
+    url += (url.includes("?") ? "&" : "?") + "bundle=true";
+  }
   const response = await fetch(url, { headers });
   if (!response.ok) {
     if (response.status === 404) {
-      throw new Error(`Component not found: ${id}@${version}`);
+      throw new Error(`View not found: ${id}@${version}`);
     }
     if (response.status === 401) {
       throw new Error("Unauthorized: Invalid or missing API key");
     }
     if (response.status === 403) {
-      throw new Error("Forbidden: Access denied to this component");
+      throw new Error("Forbidden: Access denied to this view");
     }
-    throw new Error(`Failed to fetch component: ${response.statusText}`);
+    throw new Error(`Failed to fetch view: ${response.statusText}`);
   }
   const data = await response.json();
   if (!data.success || !data.data) {
-    throw new Error(data.error || "Failed to fetch component data");
+    throw new Error(data.error || "Failed to fetch view data");
   }
-  return data.data;
+  const result = data.data;
+  if (result.viewId && !result.id) {
+    result.id = result.viewId;
+  }
+  return result;
 }
 async function fetchComponent(id, options = {}) {
   const {
@@ -1136,19 +2123,32 @@ async function fetchComponent(id, options = {}) {
     cacheConfig = DEFAULT_CACHE_CONFIG,
     retryConfig = {},
     forceRefresh = false,
-    signal
+    signal,
+    bundleStrategy = "eager",
+    includeBundle = true
   } = options;
   const fullRetryConfig = {
     ...DEFAULT_RETRY_CONFIG,
     ...retryConfig
   };
+  const startTime = performance.now();
   if (!forceRefresh) {
     const cached = getFromCache(id, version, cacheStrategy, cacheConfig);
     if (cached) {
+      let registry;
+      if (cached.bundle) {
+        registry = buildRegistryFromBundle(cached);
+      }
+      const duration = performance.now() - startTime;
+      analytics.trackFetch(id, cached.version, duration, true, {
+        cacheHit: true,
+        fetchDuration: Math.round(duration)
+      });
       return {
         data: cached,
         fromCache: true,
-        version: cached.version
+        version: cached.version,
+        registry
       };
     }
   }
@@ -1156,28 +2156,52 @@ async function fetchComponent(id, options = {}) {
   if (!forceRefresh && resolvedVersion !== version) {
     const cached = getFromCache(id, resolvedVersion, cacheStrategy, cacheConfig);
     if (cached) {
+      let registry;
+      if (cached.bundle) {
+        registry = buildRegistryFromBundle(cached);
+      }
       return {
         data: cached,
         fromCache: true,
-        version: resolvedVersion
+        version: resolvedVersion,
+        registry
       };
     }
   }
   let lastError = null;
+  const shouldIncludeBundle = bundleStrategy !== "none" && includeBundle;
   for (let attempt = 0; attempt <= fullRetryConfig.maxRetries; attempt++) {
     if (signal?.aborted) {
       throw new Error("Fetch aborted");
     }
     try {
-      const data = await fetchFromRegistry(id, resolvedVersion, apiKey);
+      const data = await fetchFromRegistry(id, resolvedVersion, apiKey, shouldIncludeBundle);
       setInCache(id, resolvedVersion, data, cacheStrategy, cacheConfig);
       if (version !== resolvedVersion) {
         setInCache(id, version, data, cacheStrategy, cacheConfig);
       }
+      let registry;
+      let pendingDependencies;
+      if (data.bundle) {
+        registry = buildRegistryFromBundle(data);
+      } else if (data.dependencies && bundleStrategy === "lazy") {
+        pendingDependencies = Object.entries(data.dependencies).map(([depId, entry]) => ({
+          id: depId,
+          version: entry.resolved || entry.version
+        }));
+      }
+      const duration = performance.now() - startTime;
+      analytics.trackFetch(id, resolvedVersion, duration, false, {
+        cacheHit: false,
+        fetchDuration: Math.round(duration),
+        dependencyCount: data.dependencies ? Object.keys(data.dependencies).length : 0
+      });
       return {
         data,
         fromCache: false,
-        version: resolvedVersion
+        version: resolvedVersion,
+        registry,
+        pendingDependencies
       };
     } catch (error) {
       lastError = error instanceof Error ? error : new Error(String(error));
@@ -1190,12 +2214,66 @@ async function fetchComponent(id, options = {}) {
       }
     }
   }
-  throw lastError || new Error("Failed to fetch component");
+  const finalError = lastError || new Error("Failed to fetch component");
+  analytics.trackError(id, version, finalError, {
+    errorType: "fetch"
+  });
+  throw finalError;
+}
+async function fetchComponentWithDependencies(id, options = {}) {
+  const result = await fetchComponent(id, { ...options, includeBundle: true });
+  if (result.pendingDependencies && result.pendingDependencies.length > 0) {
+    const { createRegistry: createRegistry2 } = await Promise.resolve().then(() => (init_registry(), registry_exports));
+    const registry = result.registry || createRegistry2();
+    await Promise.all(
+      result.pendingDependencies.map(async (dep) => {
+        try {
+          const depResult = await fetchComponent(dep.id, {
+            ...options,
+            version: dep.version,
+            bundleStrategy: "none"
+            // Don't recursively bundle
+          });
+          registry.set(dep.id, depResult.version, {
+            layout: depResult.data.layout,
+            propsInterface: depResult.data.propsInterface
+          });
+        } catch (err) {
+          console.warn(`Failed to fetch dependency ${dep.id}:`, err);
+        }
+      })
+    );
+    result.registry = registry;
+    result.pendingDependencies = void 0;
+  }
+  return result;
+}
+async function batchFetchComponents(components, options = {}) {
+  const baseUrl = getRegistryUrl();
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (options.apiKey) {
+    headers["Authorization"] = `Bearer ${options.apiKey}`;
+  }
+  const response = await fetch(`${baseUrl}/batch`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ components })
+  });
+  if (!response.ok) {
+    throw new Error(`Batch fetch failed: ${response.statusText}`);
+  }
+  const data = await response.json();
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Batch fetch failed");
+  }
+  return data.data;
 }
 async function prefetchComponents(ids, options = {}) {
   const promises = ids.map(
     ({ id, version }) => fetchComponent(id, { ...options, version }).catch((error) => {
-      console.warn(`Failed to prefetch component ${id}:`, error);
+      console.warn(`Failed to prefetch view ${id}:`, error);
     })
   );
   await Promise.all(promises);
@@ -1204,19 +2282,164 @@ async function isComponentAvailable(id, version = "latest", options = {}) {
   const { cacheStrategy = "memory", cacheConfig = DEFAULT_CACHE_CONFIG } = options;
   const cached = getFromCache(id, version, cacheStrategy, cacheConfig);
   if (cached) {
-    return { available: true, cached: true };
+    return { available: true, cached: true, version: cached.version };
+  }
+  const baseUrl = getRegistryUrl();
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (options.apiKey) {
+    headers["Authorization"] = `Bearer ${options.apiKey}`;
   }
   try {
-    await fetchComponent(id, {
-      ...options,
-      version,
-      retryConfig: { maxRetries: 0 }
-    });
-    return { available: true, cached: false };
+    const url = version && version !== "latest" ? `${baseUrl}/${id}/available?version=${encodeURIComponent(version)}` : `${baseUrl}/${id}/available`;
+    const response = await fetch(url, { headers });
+    if (!response.ok) {
+      return { available: false, cached: false };
+    }
+    const data = await response.json();
+    if (data.success && data.data) {
+      return data.data;
+    }
+    return { available: false, cached: false };
   } catch {
     return { available: false, cached: false };
   }
 }
+async function getDependencyTree(id, options = {}) {
+  const baseUrl = getRegistryUrl();
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (options.apiKey) {
+    headers["Authorization"] = `Bearer ${options.apiKey}`;
+  }
+  const params = new URLSearchParams();
+  if (options.version) params.set("version", options.version);
+  if (options.depth) params.set("depth", String(options.depth));
+  const url = `${baseUrl}/${id}/dependencies${params.toString() ? "?" + params.toString() : ""}`;
+  const response = await fetch(url, { headers });
+  if (!response.ok) {
+    throw new Error(`Failed to get dependency tree: ${response.statusText}`);
+  }
+  const data = await response.json();
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to get dependency tree");
+  }
+  return data.data;
+}
+
+// src/version.ts
+function parseVersion(version) {
+  const match = version.match(/^(\d+)\.(\d+)\.(\d+)$/);
+  if (!match) return null;
+  return {
+    major: parseInt(match[1], 10),
+    minor: parseInt(match[2], 10),
+    patch: parseInt(match[3], 10)
+  };
+}
+function compareVersions(a, b) {
+  const parsedA = parseVersion(a);
+  const parsedB = parseVersion(b);
+  if (!parsedA || !parsedB) return 0;
+  if (parsedA.major !== parsedB.major) {
+    return parsedA.major > parsedB.major ? 1 : -1;
+  }
+  if (parsedA.minor !== parsedB.minor) {
+    return parsedA.minor > parsedB.minor ? 1 : -1;
+  }
+  if (parsedA.patch !== parsedB.patch) {
+    return parsedA.patch > parsedB.patch ? 1 : -1;
+  }
+  return 0;
+}
+function satisfiesVersion(version, specifier) {
+  if (specifier === "latest" || specifier === "*") {
+    return true;
+  }
+  const parsed = parseVersion(version);
+  if (!parsed) return false;
+  if (/^\d+\.\d+\.\d+$/.test(specifier)) {
+    return version === specifier;
+  }
+  if (specifier.startsWith("^")) {
+    const specParsed = parseVersion(specifier.slice(1));
+    if (!specParsed) return false;
+    if (parsed.major !== specParsed.major) return false;
+    if (parsed.major === 0) {
+      return parsed.minor === specParsed.minor && parsed.patch >= specParsed.patch;
+    }
+    return compareVersions(version, specifier.slice(1)) >= 0;
+  }
+  if (specifier.startsWith("~")) {
+    const specParsed = parseVersion(specifier.slice(1));
+    if (!specParsed) return false;
+    return parsed.major === specParsed.major && parsed.minor === specParsed.minor && parsed.patch >= specParsed.patch;
+  }
+  if (specifier.startsWith(">=")) {
+    return compareVersions(version, specifier.slice(2)) >= 0;
+  }
+  if (specifier.startsWith(">")) {
+    return compareVersions(version, specifier.slice(1)) > 0;
+  }
+  if (specifier.startsWith("<=")) {
+    return compareVersions(version, specifier.slice(2)) <= 0;
+  }
+  if (specifier.startsWith("<")) {
+    return compareVersions(version, specifier.slice(1)) < 0;
+  }
+  return false;
+}
+function resolveVersion(versions, specifier = "latest") {
+  if (versions.length === 0) {
+    return null;
+  }
+  const sorted = [...versions].sort((a, b) => compareVersions(b, a));
+  if (specifier === "latest" || specifier === "*") {
+    return sorted[0];
+  }
+  if (/^\d+\.\d+\.\d+$/.test(specifier)) {
+    return versions.includes(specifier) ? specifier : null;
+  }
+  for (const version of sorted) {
+    if (satisfiesVersion(version, specifier)) {
+      return version;
+    }
+  }
+  return null;
+}
+function bumpVersion(currentVersion, bumpType) {
+  const parsed = parseVersion(currentVersion);
+  if (!parsed) return "1.0.0";
+  switch (bumpType) {
+    case "major":
+      return `${parsed.major + 1}.0.0`;
+    case "minor":
+      return `${parsed.major}.${parsed.minor + 1}.0`;
+    case "patch":
+      return `${parsed.major}.${parsed.minor}.${parsed.patch + 1}`;
+    default:
+      return currentVersion;
+  }
+}
+function isValidSpecifier(specifier) {
+  if (specifier === "latest" || specifier === "*") {
+    return true;
+  }
+  if (/^\d+\.\d+\.\d+$/.test(specifier)) {
+    return true;
+  }
+  if (/^[\^~><]=?\d+\.\d+\.\d+$/.test(specifier)) {
+    return true;
+  }
+  return false;
+}
+function formatVersion(version) {
+  const parsed = parseVersion(version);
+  if (!parsed) return version;
+  return `v${parsed.major}.${parsed.minor}.${parsed.patch}`;
+}
 
 // src/testRunner.ts
 function runTestCase(elements, testCase, container) {
@@ -1472,29 +2695,51 @@ function getSampleValue(def) {
       return def.defaultValue;
   }
 }
+
+// src/index.ts
+init_registry();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnalyticsCollector,
   DEFAULT_CACHE_CONFIG,
   DEFAULT_RETRY_CONFIG,
+  LongTaskObserver,
+  MemorySampler,
+  SessionManager,
+  analytics,
   applyStyles,
+  batchFetchComponents,
   buildClassName,
   buildElementStyles,
+  buildRegistryFromBundle,
   bumpVersion,
   camelToKebab,
   clearAllCaches,
   clearLocalStorageCache,
   clearMemoryCache,
   clearStyles,
+  collectAllDependencies,
   compareVersions,
+  configureAnalytics,
+  createRegistry,
+  detectCircularDependencies,
   extractBindingKeys,
+  extractDependencies,
+  extractDependenciesFromCode,
   fetchComponent,
+  fetchComponentWithDependencies,
   formatStyleValue,
   formatVersion,
   generateTestCases,
+  getAnalytics,
   getCacheKey,
+  getDependencyTree,
   getFromCache,
+  getLongTaskObserver,
   getMemoryCacheSize,
+  getMemorySampler,
   getRegistryUrl,
+  getSessionManager,
   hasTemplateSyntax,
   invalidateCache,
   isComponentAvailable,
@@ -1503,6 +2748,11 @@ function getSampleValue(def) {
   prefetchComponents,
   processStyles,
   render,
+  renderDynamicList,
+  resetAnalytics,
+  resetLongTaskObserver,
+  resetMemorySampler,
+  resetSessionManager,
   resolveBindingPath,
   resolveTemplate,
   resolveTemplateValue,