@servlyadmin/runtime-core 0.1.0 → 0.1.2

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,27 +20,224 @@ 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, {
   DEFAULT_CACHE_CONFIG: () => DEFAULT_CACHE_CONFIG,
   DEFAULT_RETRY_CONFIG: () => DEFAULT_RETRY_CONFIG,
   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,
+  createRegistry: () => createRegistry,
+  detectCircularDependencies: () => detectCircularDependencies,
   extractBindingKeys: () => extractBindingKeys,
+  extractDependencies: () => extractDependencies,
+  extractDependenciesFromCode: () => extractDependenciesFromCode,
   fetchComponent: () => fetchComponent,
+  fetchComponentWithDependencies: () => fetchComponentWithDependencies,
   formatStyleValue: () => formatStyleValue,
   formatVersion: () => formatVersion,
   generateTestCases: () => generateTestCases,
   getCacheKey: () => getCacheKey,
+  getDependencyTree: () => getDependencyTree,
   getFromCache: () => getFromCache,
   getMemoryCacheSize: () => getMemoryCacheSize,
   getRegistryUrl: () => getRegistryUrl,
@@ -49,6 +249,7 @@ __export(index_exports, {
   prefetchComponents: () => prefetchComponents,
   processStyles: () => processStyles,
   render: () => render,
+  renderDynamicList: () => renderDynamicList,
   resolveBindingPath: () => resolveBindingPath,
   resolveTemplate: () => resolveTemplate,
   resolveTemplateValue: () => resolveTemplateValue,
@@ -361,17 +562,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);
 }
@@ -594,18 +817,84 @@ 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 { container, elements, context, eventHandlers, componentRegistry, onDependencyNeeded } = options;
   const tree = buildTree(elements);
   const rootElements = elements.filter((el) => !el.parent || el.parent === null);
   const state = {
@@ -614,7 +903,10 @@ function render(options) {
     context,
     eventHandlers,
     elementStates: /* @__PURE__ */ new Map(),
-    rootElement: null
+    rootElement: null,
+    componentRegistry,
+    onDependencyNeeded,
+    renderingStack: /* @__PURE__ */ new Set()
   };
   container.innerHTML = "";
   if (rootElements.length === 0) {
@@ -630,14 +922,15 @@ function render(options) {
       tree,
       context,
       eventHandlers,
-      state.elementStates
+      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);
+      const rootElement = renderElement(root, tree, context, eventHandlers, state.elementStates, state);
       wrapper.appendChild(rootElement);
     }
     state.rootElement = wrapper;
@@ -675,6 +968,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 +978,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 +1283,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 +1325,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 +1341,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 +1349,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,7 +1391,9 @@ async function fetchComponent(id, options = {}) {
     cacheConfig = DEFAULT_CACHE_CONFIG,
     retryConfig = {},
     forceRefresh = false,
-    signal
+    signal,
+    bundleStrategy = "eager",
+    includeBundle = true
   } = options;
   const fullRetryConfig = {
     ...DEFAULT_RETRY_CONFIG,
@@ -1145,10 +1402,15 @@ async function fetchComponent(id, options = {}) {
   if (!forceRefresh) {
     const cached = getFromCache(id, version, cacheStrategy, cacheConfig);
     if (cached) {
+      let registry;
+      if (cached.bundle) {
+        registry = buildRegistryFromBundle(cached);
+      }
       return {
         data: cached,
         fromCache: true,
-        version: cached.version
+        version: cached.version,
+        registry
       };
     }
   }
@@ -1156,28 +1418,46 @@ 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
+        }));
+      }
       return {
         data,
         fromCache: false,
-        version: resolvedVersion
+        version: resolvedVersion,
+        registry,
+        pendingDependencies
       };
     } catch (error) {
       lastError = error instanceof Error ? error : new Error(String(error));
@@ -1192,10 +1472,60 @@ async function fetchComponent(id, options = {}) {
   }
   throw lastError || new Error("Failed to fetch component");
 }
+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 +1534,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,26 +1947,38 @@ function getSampleValue(def) {
       return def.defaultValue;
   }
 }
+
+// src/index.ts
+init_registry();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_CACHE_CONFIG,
   DEFAULT_RETRY_CONFIG,
   applyStyles,
+  batchFetchComponents,
   buildClassName,
   buildElementStyles,
+  buildRegistryFromBundle,
   bumpVersion,
   camelToKebab,
   clearAllCaches,
   clearLocalStorageCache,
   clearMemoryCache,
   clearStyles,
+  collectAllDependencies,
   compareVersions,
+  createRegistry,
+  detectCircularDependencies,
   extractBindingKeys,
+  extractDependencies,
+  extractDependenciesFromCode,
   fetchComponent,
+  fetchComponentWithDependencies,
   formatStyleValue,
   formatVersion,
   generateTestCases,
   getCacheKey,
+  getDependencyTree,
   getFromCache,
   getMemoryCacheSize,
   getRegistryUrl,
@@ -1503,6 +1990,7 @@ function getSampleValue(def) {
   prefetchComponents,
   processStyles,
   render,
+  renderDynamicList,
   resolveBindingPath,
   resolveTemplate,
   resolveTemplateValue,