@particle-academy/fancy-flow 0.9.0 → 0.10.1

package/dist/registry/index.d.cts

@@ -2,7 +2,7 @@ import { a as NodeKindDefinition, P as PortSpec } from '../types-DKqaUjF_.cjs';
 export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-DKqaUjF_.cjs';
 import { F as FlowNode, P as PortDescriptor } from '../types-BS3Gwnkq.cjs';
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import { NodeProps, NodeTypes } from '@xyflow/react';
 
 /**
@@ -45,31 +45,30 @@ declare function resolveNodePorts(node: Pick<FlowNode, "data">, kind?: Pick<Node
 };
 
 /**
- * Rich user input — the adapter seam.
+ * Rich user input — the injection point.
  *
  * `rich_user_input` pauses a run on a fully authored page (long-form content,
  * required reading + confirmation, multi-section forms) rather than a flat
- * field list. Authoring and rendering that document needs a document model
- * (fancy-cms Stages) and a device frame for the preview (react-fancy's
- * FauxClient) — neither of which fancy-flow depends on.
+ * field list. That page IS a fancy-cms document — fancy-flow defines no
+ * document schema of its own and never re-implements one.
  *
- * So the host registers them once, and the node lights up:
+ * The wiring ships in the box. Import the subpath once and the node lights up:
  *
- * ```tsx
- * import { FauxClient } from "@particle-academy/react-fancy";
- * import { StagesViewer } from "@particle-academy/fancy-cms-ui";
- * import { registerRichInputAdapter } from "@particle-academy/fancy-flow";
- *
- * registerRichInputAdapter({
- *   FauxClient,
- *   renderDocument: (doc) => <StagesViewer doc={doc} />,
- * });
+ * ```ts
+ * import "@particle-academy/fancy-flow/rich-input";
  * ```
  *
- * Until then the node still registers and still round-trips its config — it
- * just renders an "unavailable" body explaining what to install. Keeping the
- * dependency optional is deliberate: fancy-cms is an early-release beta, and a
- * workflow editor should not hard-require a CMS to draw a canvas.
+ * That module registers fancy-cms's `PageDoc` + `CmsPage` renderer + `Editor`
+ * against this seam. It lives on a separate entry so `@particle-academy/
+ * fancy-cms-ui` and `@particle-academy/react-fancy` stay OPTIONAL peers — most
+ * flows never use a rich input, and a workflow editor should not drag a CMS
+ * into every install.
+ *
+ * The seam stays public so a host can substitute a different document engine,
+ * but that is the escape hatch, not the expected path.
+ *
+ * Until something registers, the node still registers and still round-trips
+ * its config — it renders a "how to enable" body rather than an empty card.
  */
 type RichInputAdapter = {
     /**
@@ -77,11 +76,13 @@ type RichInputAdapter = {
      * frame that mimics a browser window or device and scales its content down
      * to fit. Used to preview the authored page inside the node card.
      */
-    FauxClient?: (props: {
-        variant?: "browser" | "device" | "bare";
-        children?: ReactNode;
-        [key: string]: unknown;
-    }) => ReactNode;
+    FauxClient?: ComponentType<any>;
+    /**
+     * Props for the frame — e.g. `{ variant: "browser", width: 1280, scale: "fit" }`
+     * so a full-width page renders at its real width and scales down into the
+     * node card instead of reflowing to a cramped layout that misrepresents it.
+     */
+    frameProps?: Record<string, unknown>;
     /** Render the stored document read-only, for the in-node preview. */
     renderDocument?: (doc: unknown) => ReactNode;
     /** Editor mounted in the config panel via `renderDocumentField`. */

package/dist/registry/index.d.ts

@@ -2,7 +2,7 @@ import { a as NodeKindDefinition, P as PortSpec } from '../types-BocBFh6l.js';
 export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-BocBFh6l.js';
 import { F as FlowNode, P as PortDescriptor } from '../types-BS3Gwnkq.js';
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import { NodeProps, NodeTypes } from '@xyflow/react';
 
 /**
@@ -45,31 +45,30 @@ declare function resolveNodePorts(node: Pick<FlowNode, "data">, kind?: Pick<Node
 };
 
 /**
- * Rich user input — the adapter seam.
+ * Rich user input — the injection point.
  *
  * `rich_user_input` pauses a run on a fully authored page (long-form content,
  * required reading + confirmation, multi-section forms) rather than a flat
- * field list. Authoring and rendering that document needs a document model
- * (fancy-cms Stages) and a device frame for the preview (react-fancy's
- * FauxClient) — neither of which fancy-flow depends on.
+ * field list. That page IS a fancy-cms document — fancy-flow defines no
+ * document schema of its own and never re-implements one.
  *
- * So the host registers them once, and the node lights up:
+ * The wiring ships in the box. Import the subpath once and the node lights up:
  *
- * ```tsx
- * import { FauxClient } from "@particle-academy/react-fancy";
- * import { StagesViewer } from "@particle-academy/fancy-cms-ui";
- * import { registerRichInputAdapter } from "@particle-academy/fancy-flow";
- *
- * registerRichInputAdapter({
- *   FauxClient,
- *   renderDocument: (doc) => <StagesViewer doc={doc} />,
- * });
+ * ```ts
+ * import "@particle-academy/fancy-flow/rich-input";
  * ```
  *
- * Until then the node still registers and still round-trips its config — it
- * just renders an "unavailable" body explaining what to install. Keeping the
- * dependency optional is deliberate: fancy-cms is an early-release beta, and a
- * workflow editor should not hard-require a CMS to draw a canvas.
+ * That module registers fancy-cms's `PageDoc` + `CmsPage` renderer + `Editor`
+ * against this seam. It lives on a separate entry so `@particle-academy/
+ * fancy-cms-ui` and `@particle-academy/react-fancy` stay OPTIONAL peers — most
+ * flows never use a rich input, and a workflow editor should not drag a CMS
+ * into every install.
+ *
+ * The seam stays public so a host can substitute a different document engine,
+ * but that is the escape hatch, not the expected path.
+ *
+ * Until something registers, the node still registers and still round-trips
+ * its config — it renders a "how to enable" body rather than an empty card.
  */
 type RichInputAdapter = {
     /**
@@ -77,11 +76,13 @@ type RichInputAdapter = {
      * frame that mimics a browser window or device and scales its content down
      * to fit. Used to preview the authored page inside the node card.
      */
-    FauxClient?: (props: {
-        variant?: "browser" | "device" | "bare";
-        children?: ReactNode;
-        [key: string]: unknown;
-    }) => ReactNode;
+    FauxClient?: ComponentType<any>;
+    /**
+     * Props for the frame — e.g. `{ variant: "browser", width: 1280, scale: "fit" }`
+     * so a full-width page renders at its real width and scales down into the
+     * node card instead of reflowing to a cramped layout that misrepresents it.
+     */
+    frameProps?: Record<string, unknown>;
     /** Render the stored document read-only, for the in-node preview. */
     renderDocument?: (doc: unknown) => ReactNode;
     /** Editor mounted in the config panel via `renderDocumentField`. */

package/dist/registry.cjs

@@ -60,15 +60,14 @@ function RichInputPreview({ config }) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-rich-preview", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-rich-preview__title", children: title }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-rich-preview__unavailable", children: [
-        "Needs a document adapter. Install",
-        " ",
+        "Add ",
         /* @__PURE__ */ jsxRuntime.jsx("code", { children: "@particle-academy/fancy-cms-ui" }),
         " +",
         " ",
         /* @__PURE__ */ jsxRuntime.jsx("code", { children: "@particle-academy/react-fancy" }),
-        ", then call",
+        ", then",
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "registerRichInputAdapter()" }),
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: 'import "@particle-academy/fancy-flow/rich-input"' }),
         "."
       ] })
     ] });
@@ -77,7 +76,7 @@ function RichInputPreview({ config }) {
   const Frame = a.FauxClient;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-rich-preview", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-rich-preview__title", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-rich-preview__frame", children: Frame ? /* @__PURE__ */ jsxRuntime.jsx(Frame, { variant: "browser", children: body }) : body })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-rich-preview__frame", children: Frame ? /* @__PURE__ */ jsxRuntime.jsx(Frame, { ...a.frameProps ?? { variant: "browser" }, children: body }) : body })
   ] });
 }