@flyo/nitro-next 1.12.1 → 2.0.0

package/dist/client.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Entity, Block } from '@flyo/nitro-typescript';
+import { Block, Entity } from '@flyo/nitro-typescript';
 import { ImageLoaderProps } from 'next/image';
 
 /**
@@ -119,5 +119,37 @@ declare function FlyoCdnLoader({ src, width }: ImageLoaderProps): string;
 declare function FlyoMetric({ entity }: {
     entity: Entity;
 }): null;
+/**
+ * A thin client wrapper that applies `editable()` to a root element while
+ * allowing server-rendered children (e.g. `NitroSlot`) to be passed in.
+ *
+ * In Next.js, a file marked `'use client'` turns all of its imports into
+ * client modules, so you cannot import server-only components like
+ * `NitroSlot` directly. The workaround is to keep the server part separate
+ * and pass it into this client wrapper via `children`.
+ *
+ * @example
+ * ```tsx
+ * // components/HeroBanner.tsx  (server component – no 'use client')
+ * import { Block } from '@flyo/nitro-typescript';
+ * import { NitroSlot } from '@flyo/nitro-next/server';
+ * import { EditableSection } from '@flyo/nitro-next/client';
+ *
+ * export function HeroBanner({ block }: { block: Block }) {
+ *   return (
+ *     <EditableSection block={block} className="hero">
+ *       <h2>{block?.content?.title}</h2>
+ *       <NitroSlot slot={block.slots?.content} />
+ *     </EditableSection>
+ *   );
+ * }
+ * ```
+ */
+declare function EditableSection({ block, children, className, as: Tag, }: {
+    block: Block;
+    children: React.ReactNode;
+    className?: string;
+    as?: React.ElementType;
+}): react_jsx_runtime.JSX.Element;
 
-export { FlyoCdnLoader, FlyoClientWrapper, FlyoMetric, FlyoWysiwyg, type WysiwygJson, type WysiwygNode, editable, isProd };
+export { EditableSection, FlyoCdnLoader, FlyoClientWrapper, FlyoMetric, FlyoWysiwyg, type WysiwygJson, type WysiwygNode, editable, isProd };

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Entity, Block } from '@flyo/nitro-typescript';
+import { Block, Entity } from '@flyo/nitro-typescript';
 import { ImageLoaderProps } from 'next/image';
 
 /**
@@ -119,5 +119,37 @@ declare function FlyoCdnLoader({ src, width }: ImageLoaderProps): string;
 declare function FlyoMetric({ entity }: {
     entity: Entity;
 }): null;
+/**
+ * A thin client wrapper that applies `editable()` to a root element while
+ * allowing server-rendered children (e.g. `NitroSlot`) to be passed in.
+ *
+ * In Next.js, a file marked `'use client'` turns all of its imports into
+ * client modules, so you cannot import server-only components like
+ * `NitroSlot` directly. The workaround is to keep the server part separate
+ * and pass it into this client wrapper via `children`.
+ *
+ * @example
+ * ```tsx
+ * // components/HeroBanner.tsx  (server component – no 'use client')
+ * import { Block } from '@flyo/nitro-typescript';
+ * import { NitroSlot } from '@flyo/nitro-next/server';
+ * import { EditableSection } from '@flyo/nitro-next/client';
+ *
+ * export function HeroBanner({ block }: { block: Block }) {
+ *   return (
+ *     <EditableSection block={block} className="hero">
+ *       <h2>{block?.content?.title}</h2>
+ *       <NitroSlot slot={block.slots?.content} />
+ *     </EditableSection>
+ *   );
+ * }
+ * ```
+ */
+declare function EditableSection({ block, children, className, as: Tag, }: {
+    block: Block;
+    children: React.ReactNode;
+    className?: string;
+    as?: React.ElementType;
+}): react_jsx_runtime.JSX.Element;
 
-export { FlyoCdnLoader, FlyoClientWrapper, FlyoMetric, FlyoWysiwyg, type WysiwygJson, type WysiwygNode, editable, isProd };
+export { EditableSection, FlyoCdnLoader, FlyoClientWrapper, FlyoMetric, FlyoWysiwyg, type WysiwygJson, type WysiwygNode, editable, isProd };

package/dist/client.js

@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/client.tsx
 var client_exports = {};
 __export(client_exports, {
+  EditableSection: () => EditableSection,
   FlyoCdnLoader: () => FlyoCdnLoader,
   FlyoClientWrapper: () => FlyoClientWrapper,
   FlyoMetric: () => FlyoMetric,
@@ -142,8 +143,17 @@ function FlyoMetric({ entity }) {
   }, [entity]);
   return null;
 }
+function EditableSection({
+  block,
+  children,
+  className,
+  as: Tag = "section"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ...editable(block), className, children });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  EditableSection,
   FlyoCdnLoader,
   FlyoClientWrapper,
   FlyoMetric,

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, 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":[]}
+{"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\n/**\n * A thin client wrapper that applies `editable()` to a root element while\n * allowing server-rendered children (e.g. `NitroSlot`) to be passed in.\n *\n * In Next.js, a file marked `'use client'` turns all of its imports into\n * client modules, so you cannot import server-only components like\n * `NitroSlot` directly. The workaround is to keep the server part separate\n * and pass it into this client wrapper via `children`.\n *\n * @example\n * ```tsx\n * // components/HeroBanner.tsx  (server component – no 'use client')\n * import { Block } from '@flyo/nitro-typescript';\n * import { NitroSlot } from '@flyo/nitro-next/server';\n * import { EditableSection } from '@flyo/nitro-next/client';\n *\n * export function HeroBanner({ block }: { block: Block }) {\n *   return (\n *     <EditableSection block={block} className=\"hero\">\n *       <h2>{block?.content?.title}</h2>\n *       <NitroSlot slot={block.slots?.content} />\n *     </EditableSection>\n *   );\n * }\n * ```\n */\nexport function EditableSection({\n  block,\n  children,\n  className,\n  as: Tag = 'section',\n}: {\n  block: Block;\n  children: React.ReactNode;\n  className?: string;\n  as?: React.ElementType;\n}) {\n  return (\n    <Tag {...editable(block)} className={className}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/client.mjs

@@ -114,7 +114,16 @@ function FlyoMetric({ entity }) {
   }, [entity]);
   return null;
 }
+function EditableSection({
+  block,
+  children,
+  className,
+  as: Tag = "section"
+}) {
+  return /* @__PURE__ */ jsx(Tag, { ...editable(block), className, children });
+}
 export {
+  EditableSection,
   FlyoCdnLoader,
   FlyoClientWrapper,
   FlyoMetric,

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, 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":[]}
+{"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\n/**\n * A thin client wrapper that applies `editable()` to a root element while\n * allowing server-rendered children (e.g. `NitroSlot`) to be passed in.\n *\n * In Next.js, a file marked `'use client'` turns all of its imports into\n * client modules, so you cannot import server-only components like\n * `NitroSlot` directly. The workaround is to keep the server part separate\n * and pass it into this client wrapper via `children`.\n *\n * @example\n * ```tsx\n * // components/HeroBanner.tsx  (server component – no 'use client')\n * import { Block } from '@flyo/nitro-typescript';\n * import { NitroSlot } from '@flyo/nitro-next/server';\n * import { EditableSection } from '@flyo/nitro-next/client';\n *\n * export function HeroBanner({ block }: { block: Block }) {\n *   return (\n *     <EditableSection block={block} className=\"hero\">\n *       <h2>{block?.content?.title}</h2>\n *       <NitroSlot slot={block.slots?.content} />\n *     </EditableSection>\n *   );\n * }\n * ```\n */\nexport function EditableSection({\n  block,\n  children,\n  className,\n  as: Tag = 'section',\n}: {\n  block: Block;\n  children: React.ReactNode;\n  className?: string;\n  as?: React.ElementType;\n}) {\n  return (\n    <Tag {...editable(block)} className={className}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/proxy.d.mts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import { NitroState } from './server.mjs';
+import { FlyoInstance } from './server.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import 'next';
@@ -9,37 +9,25 @@ import '@flyo/nitro-typescript';
  * Nitro Next.js Proxy Factory
  *
  * Creates a Next.js middleware that handles cache control headers.
- * Uses cache TTL values from the Nitro configuration state.
+ * Uses cache TTL values from the Flyo instance's configuration state.
  *
- * @param state The Nitro state containing cache configuration
+ * @param flyo The Flyo instance returned by initNitro()
  * @returns Next.js middleware function
  *
  * @example
  * ```ts
  * // src/middleware.ts
  * import { createProxy } from '@flyo/nitro-next/proxy';
- * import { flyoConfig } from './flyo.config';
+ * import { flyo } from './flyo.config';
  *
- * export default createProxy(flyoConfig());
+ * export default createProxy(flyo);
  *
  * export const config = {
  *   matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
  * };
  * ```
- *
- * @example
- * ```ts
- * // flyo.config.tsx
- * export const flyoConfig = initNitro({
- *   accessToken: process.env.FLYO_ACCESS_TOKEN!,
- *   baseUrl: process.env.SITE_URL || 'http://localhost:3000',
- *   liveEdit: process.env.FLYO_LIVE_EDIT === 'true',
- *   serverCacheTtl: 1200, // 20 minutes
- *   clientCacheTtl: 900,  // 15 minutes
- * });
- * ```
  */
-declare function createProxy(state: NitroState): () => NextResponse<unknown>;
+declare function createProxy(flyo: FlyoInstance): () => NextResponse<unknown>;
 /**
  * Proxy matcher configuration
  * Applies to all routes except Next.js internal routes

package/dist/proxy.d.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import { NitroState } from './server.js';
+import { FlyoInstance } from './server.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'next';
@@ -9,37 +9,25 @@ import '@flyo/nitro-typescript';
  * Nitro Next.js Proxy Factory
  *
  * Creates a Next.js middleware that handles cache control headers.
- * Uses cache TTL values from the Nitro configuration state.
+ * Uses cache TTL values from the Flyo instance's configuration state.
  *
- * @param state The Nitro state containing cache configuration
+ * @param flyo The Flyo instance returned by initNitro()
  * @returns Next.js middleware function
  *
  * @example
  * ```ts
  * // src/middleware.ts
  * import { createProxy } from '@flyo/nitro-next/proxy';
- * import { flyoConfig } from './flyo.config';
+ * import { flyo } from './flyo.config';
  *
- * export default createProxy(flyoConfig());
+ * export default createProxy(flyo);
  *
  * export const config = {
  *   matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
  * };
  * ```
- *
- * @example
- * ```ts
- * // flyo.config.tsx
- * export const flyoConfig = initNitro({
- *   accessToken: process.env.FLYO_ACCESS_TOKEN!,
- *   baseUrl: process.env.SITE_URL || 'http://localhost:3000',
- *   liveEdit: process.env.FLYO_LIVE_EDIT === 'true',
- *   serverCacheTtl: 1200, // 20 minutes
- *   clientCacheTtl: 900,  // 15 minutes
- * });
- * ```
  */
-declare function createProxy(state: NitroState): () => NextResponse<unknown>;
+declare function createProxy(flyo: FlyoInstance): () => NextResponse<unknown>;
 /**
  * Proxy matcher configuration
  * Applies to all routes except Next.js internal routes

package/dist/proxy.js

@@ -25,7 +25,8 @@ __export(proxy_exports, {
 });
 module.exports = __toCommonJS(proxy_exports);
 var import_server = require("next/server");
-function createProxy(state) {
+function createProxy(flyo) {
+  const { state } = flyo;
   return function proxy() {
     const res = import_server.NextResponse.next();
     if (state.liveEdit) {

package/dist/proxy.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/proxy.ts"],"sourcesContent":["import { NextResponse } from 'next/server';\nimport type { NitroState } from './server';\n\n/**\n * Nitro Next.js Proxy Factory\n * \n * Creates a Next.js middleware that handles cache control headers.\n * Uses cache TTL values from the Nitro configuration state.\n * \n * @param state The Nitro state containing cache configuration\n * @returns Next.js middleware function\n * \n * @example\n * ```ts\n * // src/middleware.ts\n * import { createProxy } from '@flyo/nitro-next/proxy';\n * import { flyoConfig } from './flyo.config';\n * \n * export default createProxy(flyoConfig());\n * \n * export const config = {\n *   matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],\n * };\n * ```\n * \n * @example\n * ```ts\n * // flyo.config.tsx\n * export const flyoConfig = initNitro({\n *   accessToken: process.env.FLYO_ACCESS_TOKEN!,\n *   baseUrl: process.env.SITE_URL || 'http://localhost:3000',\n *   liveEdit: process.env.FLYO_LIVE_EDIT === 'true',\n *   serverCacheTtl: 1200, // 20 minutes\n *   clientCacheTtl: 900,  // 15 minutes\n * });\n * ```\n */\nexport function createProxy(state: NitroState) {\n  return function proxy() {\n    const res = NextResponse.next();\n\n    if (state.liveEdit) {\n      // Development or live edit mode - no caching\n      res.headers.set('Vercel-CDN-Cache-Control', 'no-store');\n      res.headers.set('CDN-Cache-Control', 'no-store');\n      res.headers.set('Cache-Control', 'no-store');\n    } else {\n      // Production with caching enabled\n      const cdn = state.serverCacheTtl > 0 ? `max-age=${state.serverCacheTtl}` : 'no-store';\n      res.headers.set('Vercel-CDN-Cache-Control', cdn);\n      res.headers.set('CDN-Cache-Control', cdn);\n\n      if (state.clientCacheTtl > 0) {\n        res.headers.set('Cache-Control', `max-age=${state.clientCacheTtl}`);\n      } else {\n        res.headers.set('Cache-Control', 'no-store');\n      }\n    }\n\n    return res;\n  };\n}\n\n\n/**\n * Proxy matcher configuration\n * Applies to all routes except Next.js internal routes\n */\nexport const config = {\n  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA6B;AAqCtB,SAAS,YAAY,OAAmB;AAC7C,SAAO,SAAS,QAAQ;AACtB,UAAM,MAAM,2BAAa,KAAK;AAE9B,QAAI,MAAM,UAAU;AAElB,UAAI,QAAQ,IAAI,4BAA4B,UAAU;AACtD,UAAI,QAAQ,IAAI,qBAAqB,UAAU;AAC/C,UAAI,QAAQ,IAAI,iBAAiB,UAAU;AAAA,IAC7C,OAAO;AAEL,YAAM,MAAM,MAAM,iBAAiB,IAAI,WAAW,MAAM,cAAc,KAAK;AAC3E,UAAI,QAAQ,IAAI,4BAA4B,GAAG;AAC/C,UAAI,QAAQ,IAAI,qBAAqB,GAAG;AAExC,UAAI,MAAM,iBAAiB,GAAG;AAC5B,YAAI,QAAQ,IAAI,iBAAiB,WAAW,MAAM,cAAc,EAAE;AAAA,MACpE,OAAO;AACL,YAAI,QAAQ,IAAI,iBAAiB,UAAU;AAAA,MAC7C;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;AAOO,IAAM,SAAS;AAAA,EACpB,SAAS,CAAC,+CAA+C;AAC3D;","names":[]}
+{"version":3,"sources":["../src/proxy.ts"],"sourcesContent":["import { NextResponse } from 'next/server';\nimport type { FlyoInstance } from './server';\n\n/**\n * Nitro Next.js Proxy Factory\n *\n * Creates a Next.js middleware that handles cache control headers.\n * Uses cache TTL values from the Flyo instance's configuration state.\n *\n * @param flyo The Flyo instance returned by initNitro()\n * @returns Next.js middleware function\n *\n * @example\n * ```ts\n * // src/middleware.ts\n * import { createProxy } from '@flyo/nitro-next/proxy';\n * import { flyo } from './flyo.config';\n *\n * export default createProxy(flyo);\n *\n * export const config = {\n *   matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],\n * };\n * ```\n */\nexport function createProxy(flyo: FlyoInstance) {\n  const { state } = flyo;\n\n  return function proxy() {\n    const res = NextResponse.next();\n\n    if (state.liveEdit) {\n      // Development or live edit mode - no caching\n      res.headers.set('Vercel-CDN-Cache-Control', 'no-store');\n      res.headers.set('CDN-Cache-Control', 'no-store');\n      res.headers.set('Cache-Control', 'no-store');\n    } else {\n      // Production with caching enabled\n      const cdn = state.serverCacheTtl > 0 ? `max-age=${state.serverCacheTtl}` : 'no-store';\n      res.headers.set('Vercel-CDN-Cache-Control', cdn);\n      res.headers.set('CDN-Cache-Control', cdn);\n\n      if (state.clientCacheTtl > 0) {\n        res.headers.set('Cache-Control', `max-age=${state.clientCacheTtl}`);\n      } else {\n        res.headers.set('Cache-Control', 'no-store');\n      }\n    }\n\n    return res;\n  };\n}\n\n\n/**\n * Proxy matcher configuration\n * Applies to all routes except Next.js internal routes\n */\nexport const config = {\n  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA6B;AAyBtB,SAAS,YAAY,MAAoB;AAC9C,QAAM,EAAE,MAAM,IAAI;AAElB,SAAO,SAAS,QAAQ;AACtB,UAAM,MAAM,2BAAa,KAAK;AAE9B,QAAI,MAAM,UAAU;AAElB,UAAI,QAAQ,IAAI,4BAA4B,UAAU;AACtD,UAAI,QAAQ,IAAI,qBAAqB,UAAU;AAC/C,UAAI,QAAQ,IAAI,iBAAiB,UAAU;AAAA,IAC7C,OAAO;AAEL,YAAM,MAAM,MAAM,iBAAiB,IAAI,WAAW,MAAM,cAAc,KAAK;AAC3E,UAAI,QAAQ,IAAI,4BAA4B,GAAG;AAC/C,UAAI,QAAQ,IAAI,qBAAqB,GAAG;AAExC,UAAI,MAAM,iBAAiB,GAAG;AAC5B,YAAI,QAAQ,IAAI,iBAAiB,WAAW,MAAM,cAAc,EAAE;AAAA,MACpE,OAAO;AACL,YAAI,QAAQ,IAAI,iBAAiB,UAAU;AAAA,MAC7C;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;AAOO,IAAM,SAAS;AAAA,EACpB,SAAS,CAAC,+CAA+C;AAC3D;","names":[]}

package/dist/proxy.mjs

@@ -1,6 +1,7 @@
 // src/proxy.ts
 import { NextResponse } from "next/server";
-function createProxy(state) {
+function createProxy(flyo) {
+  const { state } = flyo;
   return function proxy() {
     const res = NextResponse.next();
     if (state.liveEdit) {

package/dist/proxy.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/proxy.ts"],"sourcesContent":["import { NextResponse } from 'next/server';\nimport type { NitroState } from './server';\n\n/**\n * Nitro Next.js Proxy Factory\n * \n * Creates a Next.js middleware that handles cache control headers.\n * Uses cache TTL values from the Nitro configuration state.\n * \n * @param state The Nitro state containing cache configuration\n * @returns Next.js middleware function\n * \n * @example\n * ```ts\n * // src/middleware.ts\n * import { createProxy } from '@flyo/nitro-next/proxy';\n * import { flyoConfig } from './flyo.config';\n * \n * export default createProxy(flyoConfig());\n * \n * export const config = {\n *   matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],\n * };\n * ```\n * \n * @example\n * ```ts\n * // flyo.config.tsx\n * export const flyoConfig = initNitro({\n *   accessToken: process.env.FLYO_ACCESS_TOKEN!,\n *   baseUrl: process.env.SITE_URL || 'http://localhost:3000',\n *   liveEdit: process.env.FLYO_LIVE_EDIT === 'true',\n *   serverCacheTtl: 1200, // 20 minutes\n *   clientCacheTtl: 900,  // 15 minutes\n * });\n * ```\n */\nexport function createProxy(state: NitroState) {\n  return function proxy() {\n    const res = NextResponse.next();\n\n    if (state.liveEdit) {\n      // Development or live edit mode - no caching\n      res.headers.set('Vercel-CDN-Cache-Control', 'no-store');\n      res.headers.set('CDN-Cache-Control', 'no-store');\n      res.headers.set('Cache-Control', 'no-store');\n    } else {\n      // Production with caching enabled\n      const cdn = state.serverCacheTtl > 0 ? `max-age=${state.serverCacheTtl}` : 'no-store';\n      res.headers.set('Vercel-CDN-Cache-Control', cdn);\n      res.headers.set('CDN-Cache-Control', cdn);\n\n      if (state.clientCacheTtl > 0) {\n        res.headers.set('Cache-Control', `max-age=${state.clientCacheTtl}`);\n      } else {\n        res.headers.set('Cache-Control', 'no-store');\n      }\n    }\n\n    return res;\n  };\n}\n\n\n/**\n * Proxy matcher configuration\n * Applies to all routes except Next.js internal routes\n */\nexport const config = {\n  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],\n};\n"],"mappings":";AAAA,SAAS,oBAAoB;AAqCtB,SAAS,YAAY,OAAmB;AAC7C,SAAO,SAAS,QAAQ;AACtB,UAAM,MAAM,aAAa,KAAK;AAE9B,QAAI,MAAM,UAAU;AAElB,UAAI,QAAQ,IAAI,4BAA4B,UAAU;AACtD,UAAI,QAAQ,IAAI,qBAAqB,UAAU;AAC/C,UAAI,QAAQ,IAAI,iBAAiB,UAAU;AAAA,IAC7C,OAAO;AAEL,YAAM,MAAM,MAAM,iBAAiB,IAAI,WAAW,MAAM,cAAc,KAAK;AAC3E,UAAI,QAAQ,IAAI,4BAA4B,GAAG;AAC/C,UAAI,QAAQ,IAAI,qBAAqB,GAAG;AAExC,UAAI,MAAM,iBAAiB,GAAG;AAC5B,YAAI,QAAQ,IAAI,iBAAiB,WAAW,MAAM,cAAc,EAAE;AAAA,MACpE,OAAO;AACL,YAAI,QAAQ,IAAI,iBAAiB,UAAU;AAAA,MAC7C;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;AAOO,IAAM,SAAS;AAAA,EACpB,SAAS,CAAC,+CAA+C;AAC3D;","names":[]}
+{"version":3,"sources":["../src/proxy.ts"],"sourcesContent":["import { NextResponse } from 'next/server';\nimport type { FlyoInstance } from './server';\n\n/**\n * Nitro Next.js Proxy Factory\n *\n * Creates a Next.js middleware that handles cache control headers.\n * Uses cache TTL values from the Flyo instance's configuration state.\n *\n * @param flyo The Flyo instance returned by initNitro()\n * @returns Next.js middleware function\n *\n * @example\n * ```ts\n * // src/middleware.ts\n * import { createProxy } from '@flyo/nitro-next/proxy';\n * import { flyo } from './flyo.config';\n *\n * export default createProxy(flyo);\n *\n * export const config = {\n *   matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],\n * };\n * ```\n */\nexport function createProxy(flyo: FlyoInstance) {\n  const { state } = flyo;\n\n  return function proxy() {\n    const res = NextResponse.next();\n\n    if (state.liveEdit) {\n      // Development or live edit mode - no caching\n      res.headers.set('Vercel-CDN-Cache-Control', 'no-store');\n      res.headers.set('CDN-Cache-Control', 'no-store');\n      res.headers.set('Cache-Control', 'no-store');\n    } else {\n      // Production with caching enabled\n      const cdn = state.serverCacheTtl > 0 ? `max-age=${state.serverCacheTtl}` : 'no-store';\n      res.headers.set('Vercel-CDN-Cache-Control', cdn);\n      res.headers.set('CDN-Cache-Control', cdn);\n\n      if (state.clientCacheTtl > 0) {\n        res.headers.set('Cache-Control', `max-age=${state.clientCacheTtl}`);\n      } else {\n        res.headers.set('Cache-Control', 'no-store');\n      }\n    }\n\n    return res;\n  };\n}\n\n\n/**\n * Proxy matcher configuration\n * Applies to all routes except Next.js internal routes\n */\nexport const config = {\n  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],\n};\n"],"mappings":";AAAA,SAAS,oBAAoB;AAyBtB,SAAS,YAAY,MAAoB;AAC9C,QAAM,EAAE,MAAM,IAAI;AAElB,SAAO,SAAS,QAAQ;AACtB,UAAM,MAAM,aAAa,KAAK;AAE9B,QAAI,MAAM,UAAU;AAElB,UAAI,QAAQ,IAAI,4BAA4B,UAAU;AACtD,UAAI,QAAQ,IAAI,qBAAqB,UAAU;AAC/C,UAAI,QAAQ,IAAI,iBAAiB,UAAU;AAAA,IAC7C,OAAO;AAEL,YAAM,MAAM,MAAM,iBAAiB,IAAI,WAAW,MAAM,cAAc,KAAK;AAC3E,UAAI,QAAQ,IAAI,4BAA4B,GAAG;AAC/C,UAAI,QAAQ,IAAI,qBAAqB,GAAG;AAExC,UAAI,MAAM,iBAAiB,GAAG;AAC5B,YAAI,QAAQ,IAAI,iBAAiB,WAAW,MAAM,cAAc,EAAE;AAAA,MACpE,OAAO;AACL,YAAI,QAAQ,IAAI,iBAAiB,UAAU;AAAA,MAC7C;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;AAOO,IAAM,SAAS;AAAA,EACpB,SAAS,CAAC,+CAA+C;AAC3D;","names":[]}