@flyo/nitro-next 1.11.0 → 1.12.0

package/dist/client.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Block, Entity } from '@flyo/nitro-typescript';
+import { Entity, Block } from '@flyo/nitro-typescript';
 import { ImageLoaderProps } from 'next/image';
 
 /**

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Block, Entity } from '@flyo/nitro-typescript';
+import { Entity, Block } from '@flyo/nitro-typescript';
 import { ImageLoaderProps } from 'next/image';
 
 /**

package/dist/client.js

@@ -49,6 +49,7 @@ function FlyoClientWrapper({
       return;
     }
     (0, import_nitro_js_bridge.reload)();
+    (0, import_nitro_js_bridge.scrollTo)();
     const wireAll = () => {
       const elements = document.querySelectorAll("[data-flyo-uid]");
       elements.forEach((el) => {

package/dist/client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { highlightAndClick, wysiwyg, reload} from '@flyo/nitro-js-bridge';\nimport { Block, Entity } from \"@flyo/nitro-typescript\";\nimport type { ImageLoaderProps } from 'next/image';\n\nconst FLYO_CDN_HOST = 'storage.flyo.cloud';\n\n/**\n * Check if running in production environment\n */\nexport const isProd = process.env.NODE_ENV === 'production';\n\n/**\n * Type for WYSIWYG node structure\n */\nexport interface WysiwygNode {\n  type: string;\n  content?: WysiwygNode[];\n  [key: string]: unknown;\n}\n\n/**\n * Type for WYSIWYG JSON that can be a node, array of nodes, or doc structure\n */\nexport type WysiwygJson = WysiwygNode | WysiwygNode[] | { type: 'doc'; content: WysiwygNode[] };\n\n/**\n * Helper function to get editable props\n */\nexport function editable(block: Block): { 'data-flyo-uid'?: string } {\n  if (typeof block.uid === 'string' && block.uid.trim() !== '') {\n    return { 'data-flyo-uid': block.uid };\n  }\n  return {};\n}\n\n/**\n * Internal client component that sets up live editing functionality\n */\nexport function FlyoClientWrapper({ \n  children,\n}: { \n  children: React.ReactNode;\n}) {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    reload();\n\n    const wireAll = () => {\n      const elements = document.querySelectorAll('[data-flyo-uid]');\n      elements.forEach((el) => {\n        const uid = el.getAttribute('data-flyo-uid');\n        if (uid && el instanceof HTMLElement) {\n          highlightAndClick(uid, el);\n        }\n      });\n    };\n\n    wireAll();\n\n    const observer = new MutationObserver((mutations) => {\n      const hasRelevantChanges = mutations.some(mutation => \n        Array.from(mutation.addedNodes).some(node => {\n          if (node.nodeType === Node.ELEMENT_NODE) {\n            const element = node as Element;\n            return element.hasAttribute('data-flyo-uid') || \n                   element.querySelector('[data-flyo-uid]');\n          }\n          return false;\n        })\n      );\n\n      if (hasRelevantChanges) {\n        wireAll();\n      }\n    });\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  return <>{children}</>;\n}\n\n/**\n * WYSIWYG component for rendering ProseMirror/TipTap JSON content\n * \n * Uses the `wysiwyg()` function from `@flyo/nitro-js-bridge` to convert\n * nodes to HTML. All consecutive non-custom nodes are joined into a single\n * HTML string so no extra wrapper `<div>` elements are added around each node.\n * \n * The component wraps all output in a single `<div>` with an optional\n * `className` (defaults to `\"wysiwyg\"`).\n * \n * @example\n * ```tsx\n * import { FlyoWysiwyg } from '@flyo/nitro-next/client';\n * import CustomImage from './CustomImage';\n * \n * export default function MyComponent({ block }) {\n *   return (\n *     <FlyoWysiwyg \n *       json={block.content.json} \n *       className=\"wysiwyg\"\n *       components={{\n *         image: CustomImage\n *       }} \n *     />\n *   );\n * }\n * ```\n */\nexport function FlyoWysiwyg({\n  json,\n  className = 'wysiwyg',\n  components = {},\n}: {\n  json: WysiwygJson;\n  className?: string;\n  components?: Record<string, React.ComponentType<{ node: WysiwygNode }>>;\n}) {\n  let nodes: WysiwygNode[] = [];\n\n  if (json) {\n    if (Array.isArray(json)) {\n      nodes = json;\n    } else if ('type' in json && json.type === 'doc' && Array.isArray(json.content)) {\n      nodes = json.content;\n    } else {\n      nodes = [json as WysiwygNode];\n    }\n  }\n\n  // If no custom components are provided, render all nodes as a single HTML block\n  const hasCustomComponents = nodes.some((node) => components[node.type]);\n\n  if (!hasCustomComponents) {\n    const html = nodes.map((node) => wysiwyg(node)).join('');\n    return <div className={className} dangerouslySetInnerHTML={{ __html: html }} />;\n  }\n\n  // When custom components are used, group consecutive non-custom nodes\n  // into single HTML blocks to avoid extra wrapper elements.\n  const groups: ({ type: 'custom'; component: React.ComponentType<{ node: WysiwygNode }>; node: WysiwygNode } | { type: 'html'; html: string })[] = [];\n\n  for (const node of nodes) {\n    const Component = components[node.type];\n    if (Component) {\n      groups.push({ type: 'custom', component: Component, node });\n    } else {\n      const html = wysiwyg(node);\n      const last = groups[groups.length - 1];\n      if (last && last.type === 'html') {\n        last.html += html;\n      } else {\n        groups.push({ type: 'html', html });\n      }\n    }\n  }\n\n  return (\n    <div className={className}>\n      {groups.map((group, index) => {\n        if (group.type === 'custom') {\n          return <group.component key={index} node={group.node} />;\n        }\n        return <div key={index} dangerouslySetInnerHTML={{ __html: group.html }} />;\n      })}\n    </div>\n  );\n}\n\n/**\n * Image loader for Flyo CDN that automatically handles image transformations.\n * Adds Flyo CDN host if not already present and applies width transformations.\n * \n * @param src - The image source URL (relative or absolute)\n * @param width - The desired width for the image\n * @returns Transformed image URL with Flyo CDN parameters\n * \n * @example\n * ```tsx\n * <Image\n *   loader={FlyoCdnLoader}\n *   src=\"me.png\"\n *   alt=\"Picture\"\n *   width={500}\n *   height={500}\n * />\n * ```\n */\nexport function FlyoCdnLoader({ src, width }: ImageLoaderProps): string {\n  let imageUrl = src;\n\n  // If src doesn't contain the Flyo CDN host, prefix it\n  if (!src.includes(FLYO_CDN_HOST)) {\n    // Remove leading slash if present to avoid double slashes\n    const cleanSrc = src.startsWith('/') ? src.slice(1) : src;\n    imageUrl = `https://${FLYO_CDN_HOST}/${cleanSrc}`;\n  }\n\n  // Append Flyo CDN transformation parameters\n  return `${imageUrl}/thumb/${width}xnull?format=webp`;\n}\n\n/**\n * FlyoMetric component for tracking entity metrics in production\n * \n * Automatically sends a metric tracking request to the Flyo API when:\n * - The environment is production (NODE_ENV === 'production')\n * - The entity has a metric API URL configured\n * \n * @param entity - The entity object containing entity_metric.api\n * \n * @example\n * ```tsx\n * import { FlyoMetric } from '@flyo/nitro-next/client';\n * \n * export default function BlogPost(props: RouteParams) {\n *   return nitroEntityRoute(props, {\n *     resolver,\n *     render: (entity: Entity) => (\n *       <>\n *         <FlyoMetric entity={entity} />\n *         <article>\n *           <h1>{entity.entity?.entity_title}</h1>\n *         </article>\n *       </>\n *     )\n *   });\n * }\n * ```\n */\nexport function FlyoMetric({ entity }: { entity: Entity }) {\n  useEffect(() => {\n    // Only track metrics in production and if API URL is available\n    if (isProd && entity?.entity?.entity_metric?.api) {\n      fetch(entity.entity.entity_metric.api);\n    }\n  }, [entity]);\n\n  // This component doesn't render anything\n  return null;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { highlightAndClick, wysiwyg, reload, scrollTo} from '@flyo/nitro-js-bridge';\nimport { Block, Entity } from \"@flyo/nitro-typescript\";\nimport type { ImageLoaderProps } from 'next/image';\n\nconst FLYO_CDN_HOST = 'storage.flyo.cloud';\n\n/**\n * Check if running in production environment\n */\nexport const isProd = process.env.NODE_ENV === 'production';\n\n/**\n * Type for WYSIWYG node structure\n */\nexport interface WysiwygNode {\n  type: string;\n  content?: WysiwygNode[];\n  [key: string]: unknown;\n}\n\n/**\n * Type for WYSIWYG JSON that can be a node, array of nodes, or doc structure\n */\nexport type WysiwygJson = WysiwygNode | WysiwygNode[] | { type: 'doc'; content: WysiwygNode[] };\n\n/**\n * Helper function to get editable props\n */\nexport function editable(block: Block): { 'data-flyo-uid'?: string } {\n  if (typeof block.uid === 'string' && block.uid.trim() !== '') {\n    return { 'data-flyo-uid': block.uid };\n  }\n  return {};\n}\n\n/**\n * Internal client component that sets up live editing functionality\n */\nexport function FlyoClientWrapper({ \n  children,\n}: { \n  children: React.ReactNode;\n}) {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    reload();\n    \n    scrollTo();\n\n    const wireAll = () => {\n      const elements = document.querySelectorAll('[data-flyo-uid]');\n      elements.forEach((el) => {\n        const uid = el.getAttribute('data-flyo-uid');\n        if (uid && el instanceof HTMLElement) {\n          highlightAndClick(uid, el);\n        }\n      });\n    };\n\n    wireAll();\n\n    const observer = new MutationObserver((mutations) => {\n      const hasRelevantChanges = mutations.some(mutation => \n        Array.from(mutation.addedNodes).some(node => {\n          if (node.nodeType === Node.ELEMENT_NODE) {\n            const element = node as Element;\n            return element.hasAttribute('data-flyo-uid') || \n                   element.querySelector('[data-flyo-uid]');\n          }\n          return false;\n        })\n      );\n\n      if (hasRelevantChanges) {\n        wireAll();\n      }\n    });\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  return <>{children}</>;\n}\n\n/**\n * WYSIWYG component for rendering ProseMirror/TipTap JSON content\n * \n * Uses the `wysiwyg()` function from `@flyo/nitro-js-bridge` to convert\n * nodes to HTML. All consecutive non-custom nodes are joined into a single\n * HTML string so no extra wrapper `<div>` elements are added around each node.\n * \n * The component wraps all output in a single `<div>` with an optional\n * `className` (defaults to `\"wysiwyg\"`).\n * \n * @example\n * ```tsx\n * import { FlyoWysiwyg } from '@flyo/nitro-next/client';\n * import CustomImage from './CustomImage';\n * \n * export default function MyComponent({ block }) {\n *   return (\n *     <FlyoWysiwyg \n *       json={block.content.json} \n *       className=\"wysiwyg\"\n *       components={{\n *         image: CustomImage\n *       }} \n *     />\n *   );\n * }\n * ```\n */\nexport function FlyoWysiwyg({\n  json,\n  className = 'wysiwyg',\n  components = {},\n}: {\n  json: WysiwygJson;\n  className?: string;\n  components?: Record<string, React.ComponentType<{ node: WysiwygNode }>>;\n}) {\n  let nodes: WysiwygNode[] = [];\n\n  if (json) {\n    if (Array.isArray(json)) {\n      nodes = json;\n    } else if ('type' in json && json.type === 'doc' && Array.isArray(json.content)) {\n      nodes = json.content;\n    } else {\n      nodes = [json as WysiwygNode];\n    }\n  }\n\n  // If no custom components are provided, render all nodes as a single HTML block\n  const hasCustomComponents = nodes.some((node) => components[node.type]);\n\n  if (!hasCustomComponents) {\n    const html = nodes.map((node) => wysiwyg(node)).join('');\n    return <div className={className} dangerouslySetInnerHTML={{ __html: html }} />;\n  }\n\n  // When custom components are used, group consecutive non-custom nodes\n  // into single HTML blocks to avoid extra wrapper elements.\n  const groups: ({ type: 'custom'; component: React.ComponentType<{ node: WysiwygNode }>; node: WysiwygNode } | { type: 'html'; html: string })[] = [];\n\n  for (const node of nodes) {\n    const Component = components[node.type];\n    if (Component) {\n      groups.push({ type: 'custom', component: Component, node });\n    } else {\n      const html = wysiwyg(node);\n      const last = groups[groups.length - 1];\n      if (last && last.type === 'html') {\n        last.html += html;\n      } else {\n        groups.push({ type: 'html', html });\n      }\n    }\n  }\n\n  return (\n    <div className={className}>\n      {groups.map((group, index) => {\n        if (group.type === 'custom') {\n          return <group.component key={index} node={group.node} />;\n        }\n        return <div key={index} dangerouslySetInnerHTML={{ __html: group.html }} />;\n      })}\n    </div>\n  );\n}\n\n/**\n * Image loader for Flyo CDN that automatically handles image transformations.\n * Adds Flyo CDN host if not already present and applies width transformations.\n * \n * @param src - The image source URL (relative or absolute)\n * @param width - The desired width for the image\n * @returns Transformed image URL with Flyo CDN parameters\n * \n * @example\n * ```tsx\n * <Image\n *   loader={FlyoCdnLoader}\n *   src=\"me.png\"\n *   alt=\"Picture\"\n *   width={500}\n *   height={500}\n * />\n * ```\n */\nexport function FlyoCdnLoader({ src, width }: ImageLoaderProps): string {\n  let imageUrl = src;\n\n  // If src doesn't contain the Flyo CDN host, prefix it\n  if (!src.includes(FLYO_CDN_HOST)) {\n    // Remove leading slash if present to avoid double slashes\n    const cleanSrc = src.startsWith('/') ? src.slice(1) : src;\n    imageUrl = `https://${FLYO_CDN_HOST}/${cleanSrc}`;\n  }\n\n  // Append Flyo CDN transformation parameters\n  return `${imageUrl}/thumb/${width}xnull?format=webp`;\n}\n\n/**\n * FlyoMetric component for tracking entity metrics in production\n * \n * Automatically sends a metric tracking request to the Flyo API when:\n * - The environment is production (NODE_ENV === 'production')\n * - The entity has a metric API URL configured\n * \n * @param entity - The entity object containing entity_metric.api\n * \n * @example\n * ```tsx\n * import { FlyoMetric } from '@flyo/nitro-next/client';\n * \n * export default function BlogPost(props: RouteParams) {\n *   return nitroEntityRoute(props, {\n *     resolver,\n *     render: (entity: Entity) => (\n *       <>\n *         <FlyoMetric entity={entity} />\n *         <article>\n *           <h1>{entity.entity?.entity_title}</h1>\n *         </article>\n *       </>\n *     )\n *   });\n * }\n * ```\n */\nexport function FlyoMetric({ entity }: { entity: Entity }) {\n  useEffect(() => {\n    // Only track metrics in production and if API URL is available\n    if (isProd && entity?.entity?.entity_metric?.api) {\n      fetch(entity.entity.entity_metric.api);\n    }\n  }, [entity]);\n\n  // This component doesn't render anything\n  return null;\n}\n"],"mappings":"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","names":[]}

package/dist/client.mjs

@@ -3,7 +3,7 @@
 
 // src/client.tsx
 import { useEffect } from "react";
-import { highlightAndClick, wysiwyg, reload } from "@flyo/nitro-js-bridge";
+import { highlightAndClick, wysiwyg, reload, scrollTo } from "@flyo/nitro-js-bridge";
 import { Fragment, jsx } from "react/jsx-runtime";
 var FLYO_CDN_HOST = "storage.flyo.cloud";
 var isProd = process.env.NODE_ENV === "production";
@@ -21,6 +21,7 @@ function FlyoClientWrapper({
       return;
     }
     reload();
+    scrollTo();
     const wireAll = () => {
       const elements = document.querySelectorAll("[data-flyo-uid]");
       elements.forEach((el) => {

package/dist/client.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { highlightAndClick, wysiwyg, reload} from '@flyo/nitro-js-bridge';\nimport { Block, Entity } from \"@flyo/nitro-typescript\";\nimport type { ImageLoaderProps } from 'next/image';\n\nconst FLYO_CDN_HOST = 'storage.flyo.cloud';\n\n/**\n * Check if running in production environment\n */\nexport const isProd = process.env.NODE_ENV === 'production';\n\n/**\n * Type for WYSIWYG node structure\n */\nexport interface WysiwygNode {\n  type: string;\n  content?: WysiwygNode[];\n  [key: string]: unknown;\n}\n\n/**\n * Type for WYSIWYG JSON that can be a node, array of nodes, or doc structure\n */\nexport type WysiwygJson = WysiwygNode | WysiwygNode[] | { type: 'doc'; content: WysiwygNode[] };\n\n/**\n * Helper function to get editable props\n */\nexport function editable(block: Block): { 'data-flyo-uid'?: string } {\n  if (typeof block.uid === 'string' && block.uid.trim() !== '') {\n    return { 'data-flyo-uid': block.uid };\n  }\n  return {};\n}\n\n/**\n * Internal client component that sets up live editing functionality\n */\nexport function FlyoClientWrapper({ \n  children,\n}: { \n  children: React.ReactNode;\n}) {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    reload();\n\n    const wireAll = () => {\n      const elements = document.querySelectorAll('[data-flyo-uid]');\n      elements.forEach((el) => {\n        const uid = el.getAttribute('data-flyo-uid');\n        if (uid && el instanceof HTMLElement) {\n          highlightAndClick(uid, el);\n        }\n      });\n    };\n\n    wireAll();\n\n    const observer = new MutationObserver((mutations) => {\n      const hasRelevantChanges = mutations.some(mutation => \n        Array.from(mutation.addedNodes).some(node => {\n          if (node.nodeType === Node.ELEMENT_NODE) {\n            const element = node as Element;\n            return element.hasAttribute('data-flyo-uid') || \n                   element.querySelector('[data-flyo-uid]');\n          }\n          return false;\n        })\n      );\n\n      if (hasRelevantChanges) {\n        wireAll();\n      }\n    });\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  return <>{children}</>;\n}\n\n/**\n * WYSIWYG component for rendering ProseMirror/TipTap JSON content\n * \n * Uses the `wysiwyg()` function from `@flyo/nitro-js-bridge` to convert\n * nodes to HTML. All consecutive non-custom nodes are joined into a single\n * HTML string so no extra wrapper `<div>` elements are added around each node.\n * \n * The component wraps all output in a single `<div>` with an optional\n * `className` (defaults to `\"wysiwyg\"`).\n * \n * @example\n * ```tsx\n * import { FlyoWysiwyg } from '@flyo/nitro-next/client';\n * import CustomImage from './CustomImage';\n * \n * export default function MyComponent({ block }) {\n *   return (\n *     <FlyoWysiwyg \n *       json={block.content.json} \n *       className=\"wysiwyg\"\n *       components={{\n *         image: CustomImage\n *       }} \n *     />\n *   );\n * }\n * ```\n */\nexport function FlyoWysiwyg({\n  json,\n  className = 'wysiwyg',\n  components = {},\n}: {\n  json: WysiwygJson;\n  className?: string;\n  components?: Record<string, React.ComponentType<{ node: WysiwygNode }>>;\n}) {\n  let nodes: WysiwygNode[] = [];\n\n  if (json) {\n    if (Array.isArray(json)) {\n      nodes = json;\n    } else if ('type' in json && json.type === 'doc' && Array.isArray(json.content)) {\n      nodes = json.content;\n    } else {\n      nodes = [json as WysiwygNode];\n    }\n  }\n\n  // If no custom components are provided, render all nodes as a single HTML block\n  const hasCustomComponents = nodes.some((node) => components[node.type]);\n\n  if (!hasCustomComponents) {\n    const html = nodes.map((node) => wysiwyg(node)).join('');\n    return <div className={className} dangerouslySetInnerHTML={{ __html: html }} />;\n  }\n\n  // When custom components are used, group consecutive non-custom nodes\n  // into single HTML blocks to avoid extra wrapper elements.\n  const groups: ({ type: 'custom'; component: React.ComponentType<{ node: WysiwygNode }>; node: WysiwygNode } | { type: 'html'; html: string })[] = [];\n\n  for (const node of nodes) {\n    const Component = components[node.type];\n    if (Component) {\n      groups.push({ type: 'custom', component: Component, node });\n    } else {\n      const html = wysiwyg(node);\n      const last = groups[groups.length - 1];\n      if (last && last.type === 'html') {\n        last.html += html;\n      } else {\n        groups.push({ type: 'html', html });\n      }\n    }\n  }\n\n  return (\n    <div className={className}>\n      {groups.map((group, index) => {\n        if (group.type === 'custom') {\n          return <group.component key={index} node={group.node} />;\n        }\n        return <div key={index} dangerouslySetInnerHTML={{ __html: group.html }} />;\n      })}\n    </div>\n  );\n}\n\n/**\n * Image loader for Flyo CDN that automatically handles image transformations.\n * Adds Flyo CDN host if not already present and applies width transformations.\n * \n * @param src - The image source URL (relative or absolute)\n * @param width - The desired width for the image\n * @returns Transformed image URL with Flyo CDN parameters\n * \n * @example\n * ```tsx\n * <Image\n *   loader={FlyoCdnLoader}\n *   src=\"me.png\"\n *   alt=\"Picture\"\n *   width={500}\n *   height={500}\n * />\n * ```\n */\nexport function FlyoCdnLoader({ src, width }: ImageLoaderProps): string {\n  let imageUrl = src;\n\n  // If src doesn't contain the Flyo CDN host, prefix it\n  if (!src.includes(FLYO_CDN_HOST)) {\n    // Remove leading slash if present to avoid double slashes\n    const cleanSrc = src.startsWith('/') ? src.slice(1) : src;\n    imageUrl = `https://${FLYO_CDN_HOST}/${cleanSrc}`;\n  }\n\n  // Append Flyo CDN transformation parameters\n  return `${imageUrl}/thumb/${width}xnull?format=webp`;\n}\n\n/**\n * FlyoMetric component for tracking entity metrics in production\n * \n * Automatically sends a metric tracking request to the Flyo API when:\n * - The environment is production (NODE_ENV === 'production')\n * - The entity has a metric API URL configured\n * \n * @param entity - The entity object containing entity_metric.api\n * \n * @example\n * ```tsx\n * import { FlyoMetric } from '@flyo/nitro-next/client';\n * \n * export default function BlogPost(props: RouteParams) {\n *   return nitroEntityRoute(props, {\n *     resolver,\n *     render: (entity: Entity) => (\n *       <>\n *         <FlyoMetric entity={entity} />\n *         <article>\n *           <h1>{entity.entity?.entity_title}</h1>\n *         </article>\n *       </>\n *     )\n *   });\n * }\n * ```\n */\nexport function FlyoMetric({ entity }: { entity: Entity }) {\n  useEffect(() => {\n    // Only track metrics in production and if API URL is available\n    if (isProd && entity?.entity?.entity_metric?.api) {\n      fetch(entity.entity.entity_metric.api);\n    }\n  }, [entity]);\n\n  // This component doesn't render anything\n  return null;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { highlightAndClick, wysiwyg, reload, scrollTo} from '@flyo/nitro-js-bridge';\nimport { Block, Entity } from \"@flyo/nitro-typescript\";\nimport type { ImageLoaderProps } from 'next/image';\n\nconst FLYO_CDN_HOST = 'storage.flyo.cloud';\n\n/**\n * Check if running in production environment\n */\nexport const isProd = process.env.NODE_ENV === 'production';\n\n/**\n * Type for WYSIWYG node structure\n */\nexport interface WysiwygNode {\n  type: string;\n  content?: WysiwygNode[];\n  [key: string]: unknown;\n}\n\n/**\n * Type for WYSIWYG JSON that can be a node, array of nodes, or doc structure\n */\nexport type WysiwygJson = WysiwygNode | WysiwygNode[] | { type: 'doc'; content: WysiwygNode[] };\n\n/**\n * Helper function to get editable props\n */\nexport function editable(block: Block): { 'data-flyo-uid'?: string } {\n  if (typeof block.uid === 'string' && block.uid.trim() !== '') {\n    return { 'data-flyo-uid': block.uid };\n  }\n  return {};\n}\n\n/**\n * Internal client component that sets up live editing functionality\n */\nexport function FlyoClientWrapper({ \n  children,\n}: { \n  children: React.ReactNode;\n}) {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    reload();\n    \n    scrollTo();\n\n    const wireAll = () => {\n      const elements = document.querySelectorAll('[data-flyo-uid]');\n      elements.forEach((el) => {\n        const uid = el.getAttribute('data-flyo-uid');\n        if (uid && el instanceof HTMLElement) {\n          highlightAndClick(uid, el);\n        }\n      });\n    };\n\n    wireAll();\n\n    const observer = new MutationObserver((mutations) => {\n      const hasRelevantChanges = mutations.some(mutation => \n        Array.from(mutation.addedNodes).some(node => {\n          if (node.nodeType === Node.ELEMENT_NODE) {\n            const element = node as Element;\n            return element.hasAttribute('data-flyo-uid') || \n                   element.querySelector('[data-flyo-uid]');\n          }\n          return false;\n        })\n      );\n\n      if (hasRelevantChanges) {\n        wireAll();\n      }\n    });\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  return <>{children}</>;\n}\n\n/**\n * WYSIWYG component for rendering ProseMirror/TipTap JSON content\n * \n * Uses the `wysiwyg()` function from `@flyo/nitro-js-bridge` to convert\n * nodes to HTML. All consecutive non-custom nodes are joined into a single\n * HTML string so no extra wrapper `<div>` elements are added around each node.\n * \n * The component wraps all output in a single `<div>` with an optional\n * `className` (defaults to `\"wysiwyg\"`).\n * \n * @example\n * ```tsx\n * import { FlyoWysiwyg } from '@flyo/nitro-next/client';\n * import CustomImage from './CustomImage';\n * \n * export default function MyComponent({ block }) {\n *   return (\n *     <FlyoWysiwyg \n *       json={block.content.json} \n *       className=\"wysiwyg\"\n *       components={{\n *         image: CustomImage\n *       }} \n *     />\n *   );\n * }\n * ```\n */\nexport function FlyoWysiwyg({\n  json,\n  className = 'wysiwyg',\n  components = {},\n}: {\n  json: WysiwygJson;\n  className?: string;\n  components?: Record<string, React.ComponentType<{ node: WysiwygNode }>>;\n}) {\n  let nodes: WysiwygNode[] = [];\n\n  if (json) {\n    if (Array.isArray(json)) {\n      nodes = json;\n    } else if ('type' in json && json.type === 'doc' && Array.isArray(json.content)) {\n      nodes = json.content;\n    } else {\n      nodes = [json as WysiwygNode];\n    }\n  }\n\n  // If no custom components are provided, render all nodes as a single HTML block\n  const hasCustomComponents = nodes.some((node) => components[node.type]);\n\n  if (!hasCustomComponents) {\n    const html = nodes.map((node) => wysiwyg(node)).join('');\n    return <div className={className} dangerouslySetInnerHTML={{ __html: html }} />;\n  }\n\n  // When custom components are used, group consecutive non-custom nodes\n  // into single HTML blocks to avoid extra wrapper elements.\n  const groups: ({ type: 'custom'; component: React.ComponentType<{ node: WysiwygNode }>; node: WysiwygNode } | { type: 'html'; html: string })[] = [];\n\n  for (const node of nodes) {\n    const Component = components[node.type];\n    if (Component) {\n      groups.push({ type: 'custom', component: Component, node });\n    } else {\n      const html = wysiwyg(node);\n      const last = groups[groups.length - 1];\n      if (last && last.type === 'html') {\n        last.html += html;\n      } else {\n        groups.push({ type: 'html', html });\n      }\n    }\n  }\n\n  return (\n    <div className={className}>\n      {groups.map((group, index) => {\n        if (group.type === 'custom') {\n          return <group.component key={index} node={group.node} />;\n        }\n        return <div key={index} dangerouslySetInnerHTML={{ __html: group.html }} />;\n      })}\n    </div>\n  );\n}\n\n/**\n * Image loader for Flyo CDN that automatically handles image transformations.\n * Adds Flyo CDN host if not already present and applies width transformations.\n * \n * @param src - The image source URL (relative or absolute)\n * @param width - The desired width for the image\n * @returns Transformed image URL with Flyo CDN parameters\n * \n * @example\n * ```tsx\n * <Image\n *   loader={FlyoCdnLoader}\n *   src=\"me.png\"\n *   alt=\"Picture\"\n *   width={500}\n *   height={500}\n * />\n * ```\n */\nexport function FlyoCdnLoader({ src, width }: ImageLoaderProps): string {\n  let imageUrl = src;\n\n  // If src doesn't contain the Flyo CDN host, prefix it\n  if (!src.includes(FLYO_CDN_HOST)) {\n    // Remove leading slash if present to avoid double slashes\n    const cleanSrc = src.startsWith('/') ? src.slice(1) : src;\n    imageUrl = `https://${FLYO_CDN_HOST}/${cleanSrc}`;\n  }\n\n  // Append Flyo CDN transformation parameters\n  return `${imageUrl}/thumb/${width}xnull?format=webp`;\n}\n\n/**\n * FlyoMetric component for tracking entity metrics in production\n * \n * Automatically sends a metric tracking request to the Flyo API when:\n * - The environment is production (NODE_ENV === 'production')\n * - The entity has a metric API URL configured\n * \n * @param entity - The entity object containing entity_metric.api\n * \n * @example\n * ```tsx\n * import { FlyoMetric } from '@flyo/nitro-next/client';\n * \n * export default function BlogPost(props: RouteParams) {\n *   return nitroEntityRoute(props, {\n *     resolver,\n *     render: (entity: Entity) => (\n *       <>\n *         <FlyoMetric entity={entity} />\n *         <article>\n *           <h1>{entity.entity?.entity_title}</h1>\n *         </article>\n *       </>\n *     )\n *   });\n * }\n * ```\n */\nexport function FlyoMetric({ entity }: { entity: Entity }) {\n  useEffect(() => {\n    // Only track metrics in production and if API URL is available\n    if (isProd && entity?.entity?.entity_metric?.api) {\n      fetch(entity.entity.entity_metric.api);\n    }\n  }, [entity]);\n\n  // This component doesn't render anything\n  return null;\n}\n"],"mappings":"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","names":[]}

package/dist/server.d.mts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Metadata, MetadataRoute } from 'next';
-import { Configuration, ConfigResponse, PagesApi, EntitiesApi, SitemapApi, SearchApi, Page, Entity, Block } from '@flyo/nitro-typescript';
+import { Entity, Block, ConfigResponse, Page, Configuration, EntitiesApi, PagesApi, SearchApi, SitemapApi } from '@flyo/nitro-typescript';
 
 /**
  * Interface for Nitro configuration state

package/dist/server.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Metadata, MetadataRoute } from 'next';
-import { Configuration, ConfigResponse, PagesApi, EntitiesApi, SitemapApi, SearchApi, Page, Entity, Block } from '@flyo/nitro-typescript';
+import { Entity, Block, ConfigResponse, Page, Configuration, EntitiesApi, PagesApi, SearchApi, SitemapApi } from '@flyo/nitro-typescript';
 
 /**
  * Interface for Nitro configuration state

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyo/nitro-next",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Connecting Flyo Headless Content Hub into your Next.js project.",
   "homepage": "https://dev.flyo.cloud/nitro",
   "keywords": [
@@ -46,7 +46,7 @@
     "dist"
   ],
   "dependencies": {
-    "@flyo/nitro-js-bridge": "^1.1.2",
+    "@flyo/nitro-js-bridge": "^1.3.0",
     "@flyo/nitro-typescript": "^1.2.0"
   },
   "peerDependencies": {