@glyphjs/runtime 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -400,11 +400,13 @@ var RuntimeContext = react.createContext(null);
 function RuntimeProvider({
   registry,
   references,
+  documentId,
   theme,
   className,
   style: consumerStyle,
   onDiagnostic,
   onNavigate,
+  onInteraction,
   children
 }) {
   const resolvedThemeObject = react.useMemo(() => resolveTheme(theme), [theme]);
@@ -420,11 +422,13 @@ function RuntimeProvider({
     () => ({
       registry,
       references,
+      documentId,
       theme: resolvedTheme,
       onDiagnostic: onDiagnostic ?? noop,
-      onNavigate: onNavigate ?? noop
+      onNavigate: onNavigate ?? noop,
+      onInteraction
     }),
-    [registry, references, resolvedTheme, onDiagnostic, onNavigate]
+    [registry, references, documentId, resolvedTheme, onDiagnostic, onNavigate, onInteraction]
   );
   const style = react.useMemo(
     () => ({ ...resolvedThemeObject.variables, ...consumerStyle }),
@@ -781,6 +785,12 @@ function GlyphRawHtml({ block }) {
   const clean = DOMPurify__default.default.sanitize(data.value);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: clean } });
 }
+function RichText({ content, style, className }) {
+  if (Array.isArray(content)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { style, className, children: /* @__PURE__ */ jsxRuntime.jsx(InlineRenderer, { nodes: content }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style, className, children: content });
+}
 
 // src/renderers/index.ts
 var builtInRenderers = {
@@ -795,7 +805,7 @@ var builtInRenderers = {
 };
 
 // src/plugins/resolve-props.ts
-function resolveComponentProps(block, definition, references, onNavigate, themeContext, layoutHints, containerContext) {
+function resolveComponentProps(block, definition, references, onNavigate, themeContext, layoutHints, containerContext, onInteraction) {
   const parseResult = definition.schema.safeParse(block.data);
   const data = parseResult.success ? parseResult.data : (() => {
     const err = parseResult.error;
@@ -825,7 +835,7 @@ function resolveComponentProps(block, definition, references, onNavigate, themeC
       }
     }
   }
-  return {
+  const props = {
     data,
     block,
     outgoingRefs,
@@ -835,6 +845,10 @@ function resolveComponentProps(block, definition, references, onNavigate, themeC
     layout: layoutHints,
     container: containerContext
   };
+  if (onInteraction) {
+    props.onInteraction = onInteraction;
+  }
+  return props;
 }
 var defaultConfig = {
   enabled: true,
@@ -1024,7 +1038,7 @@ function ReferenceIndicator({
   );
 }
 function BlockDispatch({ block, layout, container }) {
-  const { registry, references, theme, onNavigate } = useRuntime();
+  const { registry, references, theme, documentId, onNavigate, onInteraction } = useRuntime();
   const { incomingRefs, outgoingRefs } = useReferences(block.id);
   const hasRefs = incomingRefs.length > 0 || outgoingRefs.length > 0;
   if (block.type.startsWith("ui:")) {
@@ -1040,6 +1054,9 @@ function BlockDispatch({ block, layout, container }) {
       }
     }
   }
+  const handleInteraction = onInteraction && block.metadata?.interactive === true ? (event) => {
+    onInteraction({ ...event, documentId });
+  } : void 0;
   let content;
   const overrideDef = registry.getOverride(block.type);
   if (overrideDef) {
@@ -1058,7 +1075,8 @@ function BlockDispatch({ block, layout, container }) {
         handleNavigate,
         theme,
         layout,
-        container
+        container,
+        handleInteraction
       );
       const Renderer = definition.render;
       content = /* @__PURE__ */ jsxRuntime.jsx(Renderer, { ...props });
@@ -1650,7 +1668,7 @@ function createGlyphRuntime(config) {
       setThemeState(currentTheme);
       setVersion(registryVersion);
     }, []);
-    react.useMemo(() => {
+    react.useEffect(() => {
       listeners.add(forceUpdate);
       return () => {
         listeners.delete(forceUpdate);
@@ -1661,9 +1679,11 @@ function createGlyphRuntime(config) {
       {
         registry,
         references: ir.references,
+        documentId: ir.id,
         theme,
         onDiagnostic: config.onDiagnostic,
         onNavigate: config.onNavigate,
+        onInteraction: config.onInteraction,
         children: /* @__PURE__ */ jsxRuntime.jsx(GlyphDocument, { ir, className, animation: config.animation })
       }
     );
@@ -1715,6 +1735,25 @@ function SSRPlaceholder({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
 
+// src/debounce.ts
+function debounceInteractions(callback, delay = 300) {
+  const timers = /* @__PURE__ */ new Map();
+  return (event) => {
+    const key = `${event.blockId}:${event.kind}`;
+    const existing = timers.get(key);
+    if (existing !== void 0) {
+      clearTimeout(existing);
+    }
+    timers.set(
+      key,
+      setTimeout(() => {
+        timers.delete(key);
+        callback(event);
+      }, delay)
+    );
+  };
+}
+
 exports.AnimationContext = AnimationContext;
 exports.AnimationProvider = AnimationProvider;
 exports.BlockDiagnosticIndicator = BlockDiagnosticIndicator;
@@ -1740,6 +1779,7 @@ exports.LayoutProvider = LayoutProvider;
 exports.PluginRegistry = PluginRegistry;
 exports.PresentationLayout = PresentationLayout;
 exports.ReferenceIndicator = ReferenceIndicator;
+exports.RichText = RichText;
 exports.RuntimeProvider = RuntimeProvider;
 exports.SSRPlaceholder = SSRPlaceholder;
 exports.ThemeProvider = ThemeProvider;
@@ -1747,6 +1787,7 @@ exports.builtInRenderers = builtInRenderers;
 exports.createGlyphRuntime = createGlyphRuntime;
 exports.createResolveVar = createResolveVar;
 exports.darkTheme = darkTheme;
+exports.debounceInteractions = debounceInteractions;
 exports.isDarkTheme = isDarkTheme;
 exports.lightTheme = lightTheme;
 exports.mergeThemeDefaults = mergeThemeDefaults;