@hashgraphonline/standards-sdk 0.1.144 → 0.1.145

package/dist/es/standards-sdk.es48.js

@@ -1,409 +1,477 @@
-class BlockStateManager {
-  constructor(logger) {
-    this.blockStates = /* @__PURE__ */ new Map();
-    this.stateListeners = /* @__PURE__ */ new Map();
-    this.messageHandlers = /* @__PURE__ */ new Map();
-    this.schemas = /* @__PURE__ */ new Map();
-    this.persistentBlocks = /* @__PURE__ */ new Set();
-    this.unusedBlocks = /* @__PURE__ */ new Set();
-    this.maxBlockStates = 1e3;
+import { WasmExecutor } from "./standards-sdk.es51.js";
+import { HashLinkScanner } from "./standards-sdk.es49.js";
+import { HashLinkResolver } from "./standards-sdk.es50.js";
+class BlockRenderer {
+  constructor(logger, gutenbergBridge, templateEngine, stateManager) {
+    this.MAX_DEPTH = 10;
     this.logger = logger;
+    this.gutenbergBridge = gutenbergBridge;
+    this.templateEngine = templateEngine;
+    this.stateManager = stateManager;
+    this.hashLinkScanner = new HashLinkScanner(logger);
   }
   /**
-   * Create isolated state for a block instance
+   * Render a block
    */
-  createBlockState(blockId, initialState) {
-    this.logger.debug("Creating block state", { blockId });
-    if (this.schemas.has(blockId)) {
-      this.validateState(blockId, initialState);
-    }
-    while (this.blockStates.size >= this.maxBlockStates) {
-      if (this.unusedBlocks.size > 0) {
-        this.cleanupUnusedStates();
-      } else {
-        this.evictOldestBlock();
+  async render(block, options = {}) {
+    try {
+      this.currentBlock = block;
+      this.currentOptions = options;
+      if (options.assembly) {
+        this.assembly = options.assembly;
       }
-    }
-    this.blockStates.set(blockId, { ...initialState });
-    this.logger.debug("Block state created", {
-      blockId,
-      stateKeys: Object.keys(initialState)
-    });
-  }
-  /**
-   * Get current state for a block
-   */
-  getBlockState(blockId) {
-    if (!this.blockStates.has(blockId)) {
-      return null;
-    }
-    return { ...this.blockStates.get(blockId) };
-  }
-  /**
-   * Check if block state exists
-   */
-  hasBlockState(blockId) {
-    return this.blockStates.has(blockId);
-  }
-  /**
-   * Update block state and emit events
-   */
-  updateBlockState(blockId, updates) {
-    if (!this.blockStates.has(blockId)) {
-      throw new Error(`Block state not found: ${blockId}`);
-    }
-    const oldState = { ...this.blockStates.get(blockId) };
-    const newState = { ...oldState, ...updates };
-    if (this.schemas.has(blockId)) {
-      this.validateState(blockId, newState);
-    }
-    this.blockStates.set(blockId, newState);
-    const listeners = this.stateListeners.get(blockId) || [];
-    for (const listener of listeners) {
-      try {
-        listener(newState, oldState, blockId);
-      } catch (error) {
-        this.logger.error("State change listener error", { blockId, error });
+      if (options.actionRegistry) {
+        this.actionRegistry = options.actionRegistry;
       }
-    }
-    this.logger.debug("Block state updated", { blockId, updates });
-  }
-  /**
-   * Destroy block state and cleanup
-   */
-  destroyBlockState(blockId) {
-    this.logger.debug("Destroying block state", { blockId });
-    this.blockStates.delete(blockId);
-    this.stateListeners.delete(blockId);
-    this.messageHandlers.delete(blockId);
-    this.schemas.delete(blockId);
-    this.persistentBlocks.delete(blockId);
-    this.unusedBlocks.delete(blockId);
-    this.logger.debug("Block state destroyed", { blockId });
-  }
-  /**
-   * Listen for state changes on a block
-   */
-  onStateChange(blockId, listener) {
-    if (!this.stateListeners.has(blockId)) {
-      this.stateListeners.set(blockId, []);
-    }
-    this.stateListeners.get(blockId).push(listener);
-  }
-  /**
-   * Remove state change listener
-   */
-  removeStateChangeListener(blockId, listener) {
-    const listeners = this.stateListeners.get(blockId);
-    if (listeners) {
-      const index = listeners.indexOf(listener);
-      if (index > -1) {
-        listeners.splice(index, 1);
+      if (options.network && !this.wasmExecutor) {
+        this.wasmExecutor = new WasmExecutor(this.logger, options.network);
       }
+      if (options.initialState) {
+        this.stateManager.setBlockState(block.id, options.initialState);
+      }
+      let state = this.stateManager.getBlockState(block.id) || {
+        attributes: {},
+        actionResults: {}
+      };
+      if (!state.attributes || typeof state.attributes !== "object") {
+        this.logger.warn("Invalid state structure, fixing...", { state });
+        state = {
+          attributes: state || {},
+          actionResults: {}
+        };
+      }
+      let actions = {};
+      let attributes = block.attributes || {};
+      if (this.assembly) {
+        const assemblyBlock = this.assembly.state?.blocks?.find(
+          (b) => b.block_t_id === block.id || b.block_t_id === block.t_id
+        );
+        if (assemblyBlock) {
+          actions = assemblyBlock.actions || {};
+          attributes = {
+            ...assemblyBlock.attributes,
+            ...attributes
+          };
+        }
+      }
+      const defaultAttributes = {};
+      if (block.attributes) {
+        Object.entries(block.attributes).forEach(
+          ([key, attrDef]) => {
+            if (attrDef && typeof attrDef === "object" && "default" in attrDef) {
+              defaultAttributes[key] = attrDef.default;
+            }
+          }
+        );
+      }
+      const mergedAttributes = { ...defaultAttributes };
+      if (attributes && typeof attributes === "object") {
+        Object.entries(attributes).forEach(([key, value]) => {
+          if (typeof value !== "object" || value === null) {
+            mergedAttributes[key] = value;
+          }
+        });
+      }
+      if (state.attributes && typeof state.attributes === "object") {
+        Object.entries(state.attributes).forEach(([key, value]) => {
+          if (typeof value !== "object" || value === null) {
+            mergedAttributes[key] = value;
+          }
+        });
+      }
+      state.attributes = { ...mergedAttributes };
+      this.stateManager.setBlockState(block.id, state);
+      const templateContext = {
+        attributes: mergedAttributes,
+        actions,
+        blockId: block.id,
+        actionResults: state.actionResults || {}
+      };
+      this.logger.debug("Template context", {
+        blockId: block.id,
+        attributes: templateContext.attributes,
+        hasActions: !!actions,
+        actionKeys: Object.keys(actions),
+        rawState: state,
+        mergedAttributes
+      });
+      let html = await this.templateEngine.render(
+        block.template || "",
+        templateContext
+      );
+      if (this.shouldProcessHashLinks(options)) {
+        html = await this.processHashLinks(html, block, options);
+      }
+      if (options.container && typeof window !== "undefined") {
+        const container = typeof options.container === "string" ? document.querySelector(options.container) : options.container;
+        if (container instanceof HTMLElement) {
+          container.innerHTML = html;
+          if (block.styles) {
+            this.applyStyles(block.id, block.styles);
+          }
+          this.setupEventHandlers(container, block.id);
+          return {
+            element: container,
+            html,
+            cleanup: () => this.cleanup(block.id)
+          };
+        }
+      }
+      return { html };
+    } catch (error) {
+      this.logger.error("Block render failed", {
+        blockId: block.id,
+        error
+      });
+      throw error;
     }
   }
   /**
-   * Listen for messages sent to a block
+   * Apply block styles
    */
-  onBlockMessage(blockId, handler) {
-    if (!this.messageHandlers.has(blockId)) {
-      this.messageHandlers.set(blockId, []);
+  applyStyles(blockId, styles) {
+    if (typeof document === "undefined") return;
+    const styleId = `hashlink-styles-${blockId}`;
+    let styleElement = document.getElementById(styleId);
+    if (!styleElement) {
+      styleElement = document.createElement("style");
+      styleElement.id = styleId;
+      document.head.appendChild(styleElement);
     }
-    this.messageHandlers.get(blockId).push(handler);
+    styleElement.textContent = styles;
   }
   /**
-   * Send message from one block to another
+   * Setup event handlers for block
    */
-  sendBlockMessage(fromBlock, toBlock, type, payload) {
-    const message = {
-      type,
-      payload,
-      fromBlock,
-      toBlock
-    };
-    const handlers = this.messageHandlers.get(toBlock) || [];
-    for (const handler of handlers) {
-      try {
-        handler(message);
-      } catch (error) {
-        this.logger.error("Block message handler error", {
-          fromBlock,
-          toBlock,
-          type,
-          error
+  setupEventHandlers(container, blockId) {
+    this.stateManager.onStateChange(blockId, (state) => {
+      this.updateBlockUI(container, state);
+    });
+    container.querySelectorAll("[data-action]").forEach((element) => {
+      element.addEventListener("click", async (e) => {
+        e.preventDefault();
+        const actionTopicId = element.dataset.action;
+        const paramsStr = element.dataset.params;
+        this.logger.debug("Action button clicked", {
+          actionTopicId,
+          paramsStr,
+          hasAction: !!actionTopicId
         });
-      }
-    }
-    this.logger.debug("Block message sent", { fromBlock, toBlock, type });
-  }
-  /**
-   * Broadcast message to all blocks
-   */
-  broadcastMessage(type, payload) {
-    for (const blockId of this.blockStates.keys()) {
-      const handlers = this.messageHandlers.get(blockId) || [];
-      const message = {
-        type,
-        payload,
-        fromBlock: "system",
-        toBlock: blockId
-      };
-      for (const handler of handlers) {
-        try {
-          handler(message);
-        } catch (error) {
-          this.logger.error("Broadcast message handler error", {
-            blockId,
-            type,
-            error
-          });
+        if (actionTopicId) {
+          await this.executeAction(blockId, actionTopicId, paramsStr);
         }
-      }
-    }
-    this.logger.debug("Message broadcasted", {
-      type,
-      blockCount: this.blockStates.size
+      });
     });
   }
   /**
-   * Bind action result to block state
+   * Update the block display by re-rendering with new state
    */
-  async bindActionResult(blockId, actionName, result, binding) {
-    if (!this.blockStates.has(blockId)) {
-      throw new Error(`Block state not found: ${blockId}`);
-    }
-    const currentState = this.getBlockState(blockId);
-    let newState;
+  async updateBlockDisplay(blockId, newState) {
     try {
-      if (result.success && binding.onSuccess) {
-        newState = binding.onSuccess(currentState, result);
-      } else if (!result.success && binding.onError) {
-        newState = binding.onError(currentState, result);
-      } else {
+      this.logger.debug("updateBlockDisplay called", { blockId, newState });
+      const blockElement = document.querySelector(
+        `[data-block-id="${blockId}"]`
+      );
+      if (!blockElement || !blockElement.parentElement) {
+        this.logger.warn("Block element not found for re-render", { blockId });
         return;
       }
-      if (newState) {
-        this.updateBlockState(blockId, newState);
+      const container = blockElement.parentElement;
+      if (this.currentBlock && this.currentBlock.id === blockId && this.currentOptions) {
+        const updatedOptions = {
+          ...this.currentOptions,
+          container,
+          initialState: newState
+        };
+        const renderResult = await this.render(
+          this.currentBlock,
+          updatedOptions
+        );
+        this.logger.debug("Block re-rendered with updated state", {
+          blockId,
+          newState
+        });
+      } else {
       }
-      this.logger.debug("Action result bound to state", {
-        blockId,
-        actionName,
-        success: result.success
-      });
     } catch (error) {
-      this.logger.error("Action result binding failed", {
+      this.logger.error("Failed to re-render block", {
         blockId,
-        actionName,
-        error
+        error: error.message
       });
-      throw error;
-    }
-  }
-  /**
-   * Persist block state to storage
-   */
-  async persistBlockState(blockId) {
-    if (!this.storageBackend) {
-      this.logger.warn("No storage backend configured");
-      this.persistentBlocks.add(blockId);
-      return;
-    }
-    if (!this.blockStates.has(blockId)) {
-      throw new Error(`Block state not found: ${blockId}`);
-    }
-    try {
-      const state = this.blockStates.get(blockId);
-      await this.storageBackend.setItem(blockId, JSON.stringify(state));
-      this.persistentBlocks.add(blockId);
-      this.logger.debug("Block state persisted", { blockId });
-    } catch (error) {
-      this.logger.error("Failed to persist block state", { blockId, error });
     }
   }
   /**
-   * Restore block state from storage
+   * Execute a WASM action
    */
-  async restoreBlockState(blockId) {
-    if (!this.storageBackend) {
-      this.logger.warn("No storage backend configured");
-      return;
-    }
+  async executeAction(blockId, actionTopicId, paramsStr) {
     try {
-      const stored = await this.storageBackend.getItem(blockId);
-      if (stored) {
-        const state = JSON.parse(stored);
-        this.blockStates.set(blockId, state);
-        this.persistentBlocks.add(blockId);
-        this.logger.debug("Block state restored", { blockId });
+      this.logger.debug("Executing action", { blockId, actionTopicId });
+      let params = {};
+      if (paramsStr) {
+        try {
+          params = JSON.parse(paramsStr);
+        } catch (e) {
+          this.logger.warn("Failed to parse action params", { paramsStr });
+        }
+      }
+      const currentState = this.stateManager.getBlockState(blockId) || {
+        attributes: {},
+        actionResults: {}
+      };
+      if (this.wasmExecutor && this.actionRegistry) {
+        this.logger.debug("Looking up action in registry", { actionTopicId });
+        const action = await this.actionRegistry.getActionByTopicId(actionTopicId);
+        this.logger.debug("Action lookup result", {
+          found: !!action,
+          actionTopicId,
+          actionData: action
+        });
+        if (!action) {
+          throw new Error(`Action not found: ${actionTopicId}`);
+        }
+        this.logger.debug("Executing WASM", {
+          actionData: action,
+          params,
+          state: currentState.attributes
+        });
+        const result = await this.wasmExecutor.execute(action, {
+          method: "POST",
+          params,
+          state: currentState.attributes
+        });
+        this.logger.debug("WASM execution result", { result });
+        if (result.success && result.data) {
+          const operation = params.operation || "default";
+          let wasmData = result.data;
+          if (wasmData.success && wasmData.data) {
+            wasmData = wasmData.data;
+          }
+          const newState = {
+            ...currentState,
+            attributes: {
+              ...currentState.attributes,
+              ...wasmData
+            },
+            actionResults: {
+              ...currentState.actionResults,
+              [operation]: wasmData
+            }
+          };
+          this.stateManager.updateBlockState(blockId, newState);
+          await this.updateBlockDisplay(blockId, newState);
+        } else {
+          this.logger.error("Action execution failed", { result });
+        }
+      } else {
+        this.stateManager.sendMessage(blockId, "action", {
+          action: actionTopicId,
+          params
+        });
       }
     } catch (error) {
-      this.logger.error("Failed to restore block state", { blockId, error });
+      this.logger.error("Failed to execute action", {
+        blockId,
+        actionTopicId,
+        error: error.message
+      });
+      this.stateManager.sendMessage(blockId, "action-error", {
+        action: actionTopicId,
+        error: error.message
+      });
     }
   }
   /**
-   * Check if block state is persistent
-   */
-  isPersistent(blockId) {
-    return this.persistentBlocks.has(blockId);
-  }
-  /**
-   * Set storage backend
+   * Update block UI on state change
    */
-  setStorageBackend(backend) {
-    this.storageBackend = backend;
-  }
-  /**
-   * Set validation schema for a block
-   */
-  setBlockStateSchema(blockId, schema) {
-    this.schemas.set(blockId, schema);
-    this.logger.debug("Block state schema set", { blockId });
-  }
-  /**
-   * Set maximum number of block states
-   */
-  setMaxBlockStates(max) {
-    this.maxBlockStates = max;
-  }
-  /**
-   * Get active block count
-   */
-  getActiveBlockCount() {
-    return this.blockStates.size;
+  updateBlockUI(container, state) {
+    Object.entries(state).forEach(([key, value]) => {
+      const elements = container.querySelectorAll(`[data-bind="${key}"]`);
+      elements.forEach((element) => {
+        if (element instanceof HTMLElement) {
+          element.textContent = String(value);
+        }
+      });
+    });
   }
   /**
-   * Mark block as unused for cleanup
+   * Cleanup block resources
    */
-  markBlockUnused(blockId) {
-    this.unusedBlocks.add(blockId);
+  cleanup(blockId) {
+    const styleElement = document.getElementById(`hashlink-styles-${blockId}`);
+    if (styleElement) {
+      styleElement.remove();
+    }
+    this.stateManager.removeBlockState(blockId);
   }
   /**
-   * Clean up unused block states
+   * Check if HashLink processing should be enabled
    */
-  cleanupUnusedStates() {
-    for (const blockId of this.unusedBlocks) {
-      this.destroyBlockState(blockId);
+  shouldProcessHashLinks(options) {
+    const depth = options.depth || 0;
+    const maxDepth = options.maxDepth || this.MAX_DEPTH;
+    if (depth >= maxDepth) {
+      this.logger.warn(
+        "Max render depth reached, skipping HashLink processing",
+        {
+          depth,
+          maxDepth
+        }
+      );
+      return false;
     }
-    this.unusedBlocks.clear();
-    this.logger.debug("Unused states cleaned up");
+    return !!(options.network && (options.blockLoader || this.blockLoader));
   }
   /**
-   * Evict oldest non-persistent block to make room
+   * Initialize HashLink resolver if needed
    */
-  evictOldestBlock() {
-    for (const blockId of this.blockStates.keys()) {
-      if (!this.persistentBlocks.has(blockId)) {
-        this.destroyBlockState(blockId);
-        this.logger.debug("Evicted block to make room", { blockId });
-        return;
+  ensureHashLinkResolver(options) {
+    if (!this.hashLinkResolver && options.network) {
+      this.blockLoader = options.blockLoader || this.blockLoader;
+      this.hrlResolver = options.hrlResolver || this.hrlResolver;
+      if (this.blockLoader && this.hrlResolver) {
+        this.hashLinkResolver = new HashLinkResolver(
+          this.logger,
+          this.blockLoader,
+          this.hrlResolver,
+          options.network
+        );
       }
     }
-    this.logger.warn("Cannot evict blocks - all are persistent");
-  }
-  /**
-   * Get listener count for a block (for testing)
-   */
-  getListenerCount(blockId) {
-    const stateListeners = this.stateListeners.get(blockId)?.length || 0;
-    const messageHandlers = this.messageHandlers.get(blockId)?.length || 0;
-    return stateListeners + messageHandlers;
   }
   /**
-   * Validate state against schema
+   * Process HashLinks in rendered HTML
    */
-  validateState(blockId, state) {
-    const schema = this.schemas.get(blockId);
-    if (!schema) return;
-    if (schema.type === "object") {
-      if (typeof state !== "object" || state === null) {
-        throw new Error("State validation failed: expected object");
+  async processHashLinks(html, parentBlock, options) {
+    this.ensureHashLinkResolver(options);
+    if (!this.hashLinkResolver) {
+      this.logger.warn("HashLink resolver not available, skipping processing");
+      return html;
+    }
+    this.hashLinkResolver.pushRenderStack(parentBlock.id);
+    try {
+      const references = await this.hashLinkScanner.scanTemplate(html);
+      if (references.length === 0) {
+        return html;
       }
-      if (schema.required) {
-        for (const prop of schema.required) {
-          if (!(prop in state)) {
-            throw new Error(
-              `State validation failed: missing required property '${prop}'`
-            );
-          }
+      this.logger.debug("Processing HashLinks", {
+        parentBlockId: parentBlock.id,
+        referenceCount: references.length
+      });
+      const parentContext = {
+        blockId: parentBlock.id,
+        depth: (options.depth || 0) + 1,
+        parentContext: options.parentContext,
+        attributes: options.initialState?.attributes || {},
+        actions: {},
+        assembly: this.assembly,
+        maxDepth: options.maxDepth || this.MAX_DEPTH
+      };
+      if (this.assembly) {
+        const assemblyBlock = this.assembly.state?.blocks?.find(
+          (b) => b.block_t_id === parentBlock.id || b.block_t_id === parentBlock.t_id
+        );
+        if (assemblyBlock?.actions) {
+          parentContext.actions = assemblyBlock.actions;
         }
       }
-      if (schema.properties) {
-        for (const [prop, propSchema] of Object.entries(schema.properties)) {
-          if (prop in state) {
-            const value = state[prop];
-            const expectedType = propSchema.type;
-            if (expectedType === "string" && typeof value !== "string") {
-              throw new Error(
-                `State validation failed: property '${prop}' must be string`
-              );
-            }
-            if (expectedType === "number" && typeof value !== "number") {
-              throw new Error(
-                `State validation failed: property '${prop}' must be number`
+      let processedHtml = html;
+      for (let i = 0; i < references.length; i++) {
+        const ref = references[i];
+        try {
+          const resolved = await this.hashLinkResolver.resolveReference(
+            ref,
+            parentContext
+          );
+          if (resolved.error) {
+            this.logger.error("Failed to resolve HashLink", {
+              uri: ref.uri,
+              error: resolved.error
+            });
+            const errorHtml = `<!-- HashLink Error: ${resolved.error} -->`;
+            processedHtml = processedHtml.replace(ref.placeholder, errorHtml);
+            continue;
+          }
+          let childHtml;
+          if (resolved.definition) {
+            const childBlock = {
+              id: resolved.blockId,
+              template: resolved.template || "",
+              attributes: resolved.definition.attributes,
+              p: "hcs-12",
+              op: "register",
+              name: resolved.definition.name,
+              version: "1.0.0",
+              title: resolved.definition.title,
+              description: resolved.definition.description
+            };
+            const childState = {
+              attributes: resolved.attributes,
+              actionResults: {}
+            };
+            const childTemplateContext = {
+              attributes: resolved.attributes,
+              actions: resolved.actions,
+              blockId: resolved.blockId,
+              actionResults: {}
+            };
+            if (resolved.template) {
+              childHtml = await this.templateEngine.render(
+                resolved.template,
+                childTemplateContext
               );
-            }
-            if (expectedType === "number" && propSchema.minimum !== void 0) {
-              if (value < propSchema.minimum) {
-                throw new Error(
-                  `State validation failed: property '${prop}' below minimum`
+              const childOptions = {
+                ...options,
+                depth: parentContext.depth,
+                parentContext,
+                initialState: childState
+              };
+              if (this.shouldProcessHashLinks(childOptions)) {
+                childHtml = await this.processHashLinks(
+                  childHtml,
+                  childBlock,
+                  childOptions
                 );
               }
+            } else {
+              childHtml = "<!-- Block has no template -->";
             }
+          } else if (resolved.template) {
+            childHtml = resolved.template;
+          } else {
+            childHtml = "<!-- Empty block -->";
+          }
+          if (ref.loading === "lazy") {
+            childHtml = this.wrapLazyLoad(childHtml, ref);
           }
+          processedHtml = processedHtml.replace(ref.placeholder, childHtml);
+        } catch (error) {
+          this.logger.error("Error processing HashLink", {
+            uri: ref.uri,
+            error: error.message
+          });
+          const errorHtml = `<!-- HashLink Error: ${error.message} -->`;
+          processedHtml = processedHtml.replace(ref.placeholder, errorHtml);
         }
       }
+      return processedHtml;
+    } finally {
+      this.hashLinkResolver.popRenderStack(parentBlock.id);
     }
   }
   /**
-   * Set block state (alias for updateBlockState)
-   */
-  setBlockState(blockId, state) {
-    if (!this.blockStates.has(blockId)) {
-      this.createBlockState(blockId, state);
-    } else {
-      this.updateBlockState(blockId, state);
-    }
-  }
-  /**
-   * Remove block state
+   * Wrap content for lazy loading
    */
-  removeBlockState(blockId) {
-    this.blockStates.delete(blockId);
-    this.stateListeners.delete(blockId);
-    this.messageHandlers.delete(blockId);
-    this.persistentBlocks.delete(blockId);
-    this.schemas.delete(blockId);
-    if (this.storageBackend) {
-      this.storageBackend.removeItem(blockId).catch((error) => {
-        this.logger.error("Failed to remove persisted state", {
-          blockId,
-          error
-        });
-      });
-    }
-    this.logger.debug("Block state removed", { blockId });
-  }
-  /**
-   * Send message to a block
-   */
-  sendMessage(blockId, type, data, fromBlock = "system") {
-    const handlers = this.messageHandlers.get(blockId) || [];
-    const message = {
-      type,
-      payload: data,
-      fromBlock,
-      toBlock: blockId
-    };
-    for (const handler of handlers) {
-      try {
-        handler(message);
-      } catch (error) {
-        this.logger.error("Message handler error", { blockId, type, error });
-      }
-    }
+  wrapLazyLoad(html, ref) {
+    const wrapperId = `lazy-${ref.uri.replace(/[^a-zA-Z0-9]/g, "-")}`;
+    return `
+      <div id="${wrapperId}" class="hashlink-lazy-container" data-hashlink-lazy="${ref.uri}">
+        <div class="hashlink-lazy-placeholder">Loading...</div>
+        <template class="hashlink-lazy-content">${html}</template>
+      </div>
+    `;
   }
 }
 export {
-  BlockStateManager
+  BlockRenderer
 };
 //# sourceMappingURL=standards-sdk.es48.js.map