@01.software/sdk 0.2.9-dev.260305.4f1735b → 0.2.9-dev.260306.4e16dd4

package/dist/flow.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+
+declare const FLOW_NODE_TYPES: readonly ["text", "image", "iframe", "note"];
+type FlowNodeType = (typeof FLOW_NODE_TYPES)[number];
+interface BaseNodeData {
+    label: string;
+}
+interface TextNodeData extends BaseNodeData {
+    nodeType: 'text';
+    body?: string;
+}
+interface ImageNodeData extends BaseNodeData {
+    nodeType: 'image';
+    imageId?: string;
+    imageUrl?: string;
+    alt?: string;
+    caption?: string;
+}
+interface IframeNodeData extends BaseNodeData {
+    nodeType: 'iframe';
+    url?: string;
+}
+interface NoteNodeData extends BaseNodeData {
+    nodeType: 'note';
+    body?: string;
+    color?: string;
+}
+type FlowNodeData = (TextNodeData | ImageNodeData | IframeNodeData | NoteNodeData) & Record<string, unknown>;
+interface FlowNodePosition {
+    x: number;
+    y: number;
+}
+interface FlowNode {
+    id: string;
+    type?: string;
+    position: FlowNodePosition;
+    data: FlowNodeData;
+    style?: React.CSSProperties;
+    width?: number;
+    height?: number;
+    measured?: {
+        width?: number;
+        height?: number;
+    };
+    [key: string]: unknown;
+}
+interface FlowEdge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string | null;
+    targetHandle?: string | null;
+    type?: string;
+    style?: React.CSSProperties;
+    [key: string]: unknown;
+}
+interface FlowViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface CanvasData {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    viewport: FlowViewport;
+}
+interface TextNodeSlotProps {
+    id: string;
+    data: TextNodeData;
+}
+interface ImageNodeSlotProps {
+    id: string;
+    data: ImageNodeData;
+}
+interface IframeNodeSlotProps {
+    id: string;
+    data: IframeNodeData;
+}
+interface NoteNodeSlotProps {
+    id: string;
+    data: NoteNodeData;
+}
+interface FlowNodeComponents {
+    Text?: React.ComponentType<TextNodeSlotProps>;
+    Image?: React.ComponentType<ImageNodeSlotProps>;
+    Iframe?: React.ComponentType<IframeNodeSlotProps>;
+    Note?: React.ComponentType<NoteNodeSlotProps>;
+}
+
+/**
+ * Renders a Flow canvas in read-only mode.
+ *
+ * Requires `@xyflow/react` peer dependency and its CSS:
+ * ```ts
+ * import '@xyflow/react/dist/style.css'
+ * ```
+ */
+interface FlowRendererProps {
+    /** Canvas data from Flow document's `canvas` field */
+    data: CanvasData;
+    /** Container className */
+    className?: string;
+    /** Container style */
+    style?: React.CSSProperties;
+    /** Custom node type components (memoize or define outside component to avoid re-renders) */
+    nodeComponents?: FlowNodeComponents;
+    /** Show background pattern (default: true) */
+    background?: boolean;
+    /** Allow user interaction - pan, zoom (default: false for read-only display) */
+    interactive?: boolean;
+    /** Fit view on mount (default: true) */
+    fitView?: boolean;
+}
+declare function FlowRenderer({ data, className, style, nodeComponents, background, interactive, fitView, }: FlowRendererProps): React.JSX.Element;
+
+export { type CanvasData, FLOW_NODE_TYPES, type FlowEdge, type FlowNode, type FlowNodeComponents, type FlowNodeData, type FlowNodePosition, type FlowNodeType, FlowRenderer, type FlowRendererProps, type FlowViewport, type IframeNodeData, type IframeNodeSlotProps, type ImageNodeData, type ImageNodeSlotProps, type NoteNodeData, type NoteNodeSlotProps, type TextNodeData, type TextNodeSlotProps };

package/dist/flow.js

@@ -0,0 +1,123 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/components/FlowRenderer/index.tsx
+import React from "react";
+import {
+  ReactFlow,
+  Background
+} from "@xyflow/react";
+
+// src/components/FlowRenderer/types.ts
+var FLOW_NODE_TYPES = ["text", "image", "iframe", "note"];
+
+// src/components/FlowRenderer/index.tsx
+function DefaultTextNode({ data }) {
+  const d = data;
+  return /* @__PURE__ */ React.createElement("div", { style: { padding: 12 } }, /* @__PURE__ */ React.createElement("strong", null, d.label), d.body && /* @__PURE__ */ React.createElement("p", { style: { margin: "8px 0 0", whiteSpace: "pre-wrap" } }, d.body));
+}
+function DefaultImageNode({ data }) {
+  const d = data;
+  return /* @__PURE__ */ React.createElement("div", { style: { padding: 12 } }, /* @__PURE__ */ React.createElement("strong", null, d.label), d.imageUrl && /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: d.imageUrl,
+      alt: d.alt || d.label,
+      style: { width: "100%", marginTop: 8, borderRadius: 4 }
+    }
+  ), d.caption && /* @__PURE__ */ React.createElement("p", { style: { margin: "4px 0 0", fontSize: "0.85em", opacity: 0.7 } }, d.caption));
+}
+function DefaultIframeNode({ data }) {
+  const d = data;
+  return /* @__PURE__ */ React.createElement("div", { style: { padding: 12 } }, /* @__PURE__ */ React.createElement("strong", null, d.label), d.url && /* @__PURE__ */ React.createElement(
+    "iframe",
+    {
+      src: d.url,
+      title: d.label,
+      style: { width: "100%", height: 150, border: "none", marginTop: 8, borderRadius: 4 }
+    }
+  ));
+}
+function DefaultNoteNode({ data }) {
+  const d = data;
+  return /* @__PURE__ */ React.createElement("div", { style: { padding: 12, backgroundColor: d.color || "#fef3c7", borderRadius: 4 } }, /* @__PURE__ */ React.createElement("strong", null, d.label), d.body && /* @__PURE__ */ React.createElement("p", { style: { margin: "8px 0 0", whiteSpace: "pre-wrap" } }, d.body));
+}
+function createNodeTypes(components) {
+  const types = {};
+  if (components == null ? void 0 : components.Text) {
+    const Text = components.Text;
+    types.text = (({ id, data }) => /* @__PURE__ */ React.createElement(Text, { id, data }));
+  } else {
+    types.text = DefaultTextNode;
+  }
+  if (components == null ? void 0 : components.Image) {
+    const Image = components.Image;
+    types.image = (({ id, data }) => /* @__PURE__ */ React.createElement(Image, { id, data }));
+  } else {
+    types.image = DefaultImageNode;
+  }
+  if (components == null ? void 0 : components.Iframe) {
+    const Iframe = components.Iframe;
+    types.iframe = (({ id, data }) => /* @__PURE__ */ React.createElement(Iframe, { id, data }));
+  } else {
+    types.iframe = DefaultIframeNode;
+  }
+  if (components == null ? void 0 : components.Note) {
+    const Note = components.Note;
+    types.note = (({ id, data }) => /* @__PURE__ */ React.createElement(Note, { id, data }));
+  } else {
+    types.note = DefaultNoteNode;
+  }
+  return types;
+}
+function FlowRenderer({
+  data,
+  className,
+  style,
+  nodeComponents,
+  background = true,
+  interactive = false,
+  fitView = true
+}) {
+  var _a, _b;
+  const nodeTypes = React.useMemo(() => createNodeTypes(nodeComponents), [nodeComponents]);
+  const defaultViewport = !fitView && data.viewport ? data.viewport : void 0;
+  return /* @__PURE__ */ React.createElement("div", { className, style: __spreadValues({ width: "100%", height: "100%" }, style) }, /* @__PURE__ */ React.createElement(
+    ReactFlow,
+    {
+      nodes: (_a = data.nodes) != null ? _a : [],
+      edges: (_b = data.edges) != null ? _b : [],
+      nodeTypes,
+      defaultViewport,
+      fitView,
+      nodesDraggable: interactive,
+      nodesConnectable: false,
+      elementsSelectable: interactive,
+      panOnDrag: interactive,
+      zoomOnScroll: interactive,
+      zoomOnPinch: interactive,
+      zoomOnDoubleClick: false
+    },
+    background && /* @__PURE__ */ React.createElement(Background, null)
+  ));
+}
+export {
+  FLOW_NODE_TYPES,
+  FlowRenderer
+};
+//# sourceMappingURL=flow.js.map

package/dist/flow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlowRenderer/index.tsx","../src/components/FlowRenderer/types.ts"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport {\n  ReactFlow,\n  Background,\n  type NodeTypes,\n  type NodeProps,\n} from '@xyflow/react'\nimport type {\n  CanvasData,\n  FlowNodeComponents,\n  TextNodeData,\n  ImageNodeData,\n  IframeNodeData,\n  NoteNodeData,\n} from './types'\n\nexport { FLOW_NODE_TYPES } from './types'\nexport type { CanvasData, FlowNodeComponents } from './types'\nexport type {\n  FlowNodeType,\n  FlowNode,\n  FlowEdge,\n  FlowViewport,\n  FlowNodeData,\n  TextNodeData,\n  ImageNodeData,\n  IframeNodeData,\n  NoteNodeData,\n  TextNodeSlotProps,\n  ImageNodeSlotProps,\n  IframeNodeSlotProps,\n  NoteNodeSlotProps,\n  FlowNodePosition,\n} from './types'\n\n// ── Default node renderers ──\n\nfunction DefaultTextNode({ data }: NodeProps) {\n  const d = data as unknown as TextNodeData\n  return (\n    <div style={{ padding: 12 }}>\n      <strong>{d.label}</strong>\n      {d.body && <p style={{ margin: '8px 0 0', whiteSpace: 'pre-wrap' }}>{d.body}</p>}\n    </div>\n  )\n}\n\nfunction DefaultImageNode({ data }: NodeProps) {\n  const d = data as unknown as ImageNodeData\n  return (\n    <div style={{ padding: 12 }}>\n      <strong>{d.label}</strong>\n      {d.imageUrl && (\n        <img\n          src={d.imageUrl}\n          alt={d.alt || d.label}\n          style={{ width: '100%', marginTop: 8, borderRadius: 4 }}\n        />\n      )}\n      {d.caption && (\n        <p style={{ margin: '4px 0 0', fontSize: '0.85em', opacity: 0.7 }}>{d.caption}</p>\n      )}\n    </div>\n  )\n}\n\nfunction DefaultIframeNode({ data }: NodeProps) {\n  const d = data as unknown as IframeNodeData\n  return (\n    <div style={{ padding: 12 }}>\n      <strong>{d.label}</strong>\n      {d.url && (\n        <iframe\n          src={d.url}\n          title={d.label}\n          style={{ width: '100%', height: 150, border: 'none', marginTop: 8, borderRadius: 4 }}\n        />\n      )}\n    </div>\n  )\n}\n\nfunction DefaultNoteNode({ data }: NodeProps) {\n  const d = data as unknown as NoteNodeData\n  return (\n    <div style={{ padding: 12, backgroundColor: d.color || '#fef3c7', borderRadius: 4 }}>\n      <strong>{d.label}</strong>\n      {d.body && <p style={{ margin: '8px 0 0', whiteSpace: 'pre-wrap' }}>{d.body}</p>}\n    </div>\n  )\n}\n\nfunction createNodeTypes(components?: FlowNodeComponents): NodeTypes {\n  const types: NodeTypes = {} as NodeTypes\n\n  if (components?.Text) {\n    const Text = components.Text\n    types.text = (({ id, data }: NodeProps) => (\n      <Text id={id} data={data as unknown as TextNodeData} />\n    )) as NodeTypes[string]\n  } else {\n    types.text = DefaultTextNode as NodeTypes[string]\n  }\n\n  if (components?.Image) {\n    const Image = components.Image\n    types.image = (({ id, data }: NodeProps) => (\n      <Image id={id} data={data as unknown as ImageNodeData} />\n    )) as NodeTypes[string]\n  } else {\n    types.image = DefaultImageNode as NodeTypes[string]\n  }\n\n  if (components?.Iframe) {\n    const Iframe = components.Iframe\n    types.iframe = (({ id, data }: NodeProps) => (\n      <Iframe id={id} data={data as unknown as IframeNodeData} />\n    )) as NodeTypes[string]\n  } else {\n    types.iframe = DefaultIframeNode as NodeTypes[string]\n  }\n\n  if (components?.Note) {\n    const Note = components.Note\n    types.note = (({ id, data }: NodeProps) => (\n      <Note id={id} data={data as unknown as NoteNodeData} />\n    )) as NodeTypes[string]\n  } else {\n    types.note = DefaultNoteNode as NodeTypes[string]\n  }\n\n  return types\n}\n\n// ── FlowRenderer ──\n\n/**\n * Renders a Flow canvas in read-only mode.\n *\n * Requires `@xyflow/react` peer dependency and its CSS:\n * ```ts\n * import '@xyflow/react/dist/style.css'\n * ```\n */\nexport interface FlowRendererProps {\n  /** Canvas data from Flow document's `canvas` field */\n  data: CanvasData\n  /** Container className */\n  className?: string\n  /** Container style */\n  style?: React.CSSProperties\n  /** Custom node type components (memoize or define outside component to avoid re-renders) */\n  nodeComponents?: FlowNodeComponents\n  /** Show background pattern (default: true) */\n  background?: boolean\n  /** Allow user interaction - pan, zoom (default: false for read-only display) */\n  interactive?: boolean\n  /** Fit view on mount (default: true) */\n  fitView?: boolean\n}\n\nexport function FlowRenderer({\n  data,\n  className,\n  style,\n  nodeComponents,\n  background = true,\n  interactive = false,\n  fitView = true,\n}: FlowRendererProps) {\n  const nodeTypes = React.useMemo(() => createNodeTypes(nodeComponents), [nodeComponents])\n\n  const defaultViewport = !fitView && data.viewport ? data.viewport : undefined\n\n  return (\n    <div className={className} style={{ width: '100%', height: '100%', ...style }}>\n      <ReactFlow\n        nodes={(data.nodes ?? []) as unknown as Parameters<typeof ReactFlow>[0]['nodes']}\n        edges={(data.edges ?? []) as unknown as Parameters<typeof ReactFlow>[0]['edges']}\n        nodeTypes={nodeTypes}\n        defaultViewport={defaultViewport}\n        fitView={fitView}\n        nodesDraggable={interactive}\n        nodesConnectable={false}\n        elementsSelectable={interactive}\n        panOnDrag={interactive}\n        zoomOnScroll={interactive}\n        zoomOnPinch={interactive}\n        zoomOnDoubleClick={false}\n      >\n        {background && <Background />}\n      </ReactFlow>\n    </div>\n  )\n}\n","import type React from 'react'\n\n// ── Node type constants ──\n\nexport const FLOW_NODE_TYPES = ['text', 'image', 'iframe', 'note'] as const\n\nexport type FlowNodeType = (typeof FLOW_NODE_TYPES)[number]\n\n// ── Per-type data ──\n\ninterface BaseNodeData {\n  label: string\n}\n\nexport interface TextNodeData extends BaseNodeData {\n  nodeType: 'text'\n  body?: string\n}\n\nexport interface ImageNodeData extends BaseNodeData {\n  nodeType: 'image'\n  imageId?: string\n  imageUrl?: string\n  alt?: string\n  caption?: string\n}\n\nexport interface IframeNodeData extends BaseNodeData {\n  nodeType: 'iframe'\n  url?: string\n}\n\nexport interface NoteNodeData extends BaseNodeData {\n  nodeType: 'note'\n  body?: string\n  color?: string\n}\n\nexport type FlowNodeData = (TextNodeData | ImageNodeData | IframeNodeData | NoteNodeData) &\n  Record<string, unknown>\n\n// ── Canvas types (mirrors @xyflow/react but standalone) ──\n\nexport interface FlowNodePosition {\n  x: number\n  y: number\n}\n\nexport interface FlowNode {\n  id: string\n  type?: string\n  position: FlowNodePosition\n  data: FlowNodeData\n  style?: React.CSSProperties\n  width?: number\n  height?: number\n  measured?: { width?: number; height?: number }\n  [key: string]: unknown\n}\n\nexport interface FlowEdge {\n  id: string\n  source: string\n  target: string\n  sourceHandle?: string | null\n  targetHandle?: string | null\n  type?: string\n  style?: React.CSSProperties\n  [key: string]: unknown\n}\n\nexport interface FlowViewport {\n  x: number\n  y: number\n  zoom: number\n}\n\nexport interface CanvasData {\n  nodes: FlowNode[]\n  edges: FlowEdge[]\n  viewport: FlowViewport\n}\n\n// ── Component slot props ──\n\nexport interface TextNodeSlotProps {\n  id: string\n  data: TextNodeData\n}\n\nexport interface ImageNodeSlotProps {\n  id: string\n  data: ImageNodeData\n}\n\nexport interface IframeNodeSlotProps {\n  id: string\n  data: IframeNodeData\n}\n\nexport interface NoteNodeSlotProps {\n  id: string\n  data: NoteNodeData\n}\n\nexport interface FlowNodeComponents {\n  Text?: React.ComponentType<TextNodeSlotProps>\n  Image?: React.ComponentType<ImageNodeSlotProps>\n  Iframe?: React.ComponentType<IframeNodeSlotProps>\n  Note?: React.ComponentType<NoteNodeSlotProps>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,OAGK;;;ACJA,IAAM,kBAAkB,CAAC,QAAQ,SAAS,UAAU,MAAM;;;ADmCjE,SAAS,gBAAgB,EAAE,KAAK,GAAc;AAC5C,QAAM,IAAI;AACV,SACE,oCAAC,SAAI,OAAO,EAAE,SAAS,GAAG,KACxB,oCAAC,gBAAQ,EAAE,KAAM,GAChB,EAAE,QAAQ,oCAAC,OAAE,OAAO,EAAE,QAAQ,WAAW,YAAY,WAAW,KAAI,EAAE,IAAK,CAC9E;AAEJ;AAEA,SAAS,iBAAiB,EAAE,KAAK,GAAc;AAC7C,QAAM,IAAI;AACV,SACE,oCAAC,SAAI,OAAO,EAAE,SAAS,GAAG,KACxB,oCAAC,gBAAQ,EAAE,KAAM,GAChB,EAAE,YACD;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,EAAE;AAAA,MACP,KAAK,EAAE,OAAO,EAAE;AAAA,MAChB,OAAO,EAAE,OAAO,QAAQ,WAAW,GAAG,cAAc,EAAE;AAAA;AAAA,EACxD,GAED,EAAE,WACD,oCAAC,OAAE,OAAO,EAAE,QAAQ,WAAW,UAAU,UAAU,SAAS,IAAI,KAAI,EAAE,OAAQ,CAElF;AAEJ;AAEA,SAAS,kBAAkB,EAAE,KAAK,GAAc;AAC9C,QAAM,IAAI;AACV,SACE,oCAAC,SAAI,OAAO,EAAE,SAAS,GAAG,KACxB,oCAAC,gBAAQ,EAAE,KAAM,GAChB,EAAE,OACD;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,EAAE;AAAA,MACP,OAAO,EAAE;AAAA,MACT,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,QAAQ,QAAQ,WAAW,GAAG,cAAc,EAAE;AAAA;AAAA,EACrF,CAEJ;AAEJ;AAEA,SAAS,gBAAgB,EAAE,KAAK,GAAc;AAC5C,QAAM,IAAI;AACV,SACE,oCAAC,SAAI,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,SAAS,WAAW,cAAc,EAAE,KAChF,oCAAC,gBAAQ,EAAE,KAAM,GAChB,EAAE,QAAQ,oCAAC,OAAE,OAAO,EAAE,QAAQ,WAAW,YAAY,WAAW,KAAI,EAAE,IAAK,CAC9E;AAEJ;AAEA,SAAS,gBAAgB,YAA4C;AACnE,QAAM,QAAmB,CAAC;AAE1B,MAAI,yCAAY,MAAM;AACpB,UAAM,OAAO,WAAW;AACxB,UAAM,QAAQ,CAAC,EAAE,IAAI,KAAK,MACxB,oCAAC,QAAK,IAAQ,MAAuC;AAAA,EAEzD,OAAO;AACL,UAAM,OAAO;AAAA,EACf;AAEA,MAAI,yCAAY,OAAO;AACrB,UAAM,QAAQ,WAAW;AACzB,UAAM,SAAS,CAAC,EAAE,IAAI,KAAK,MACzB,oCAAC,SAAM,IAAQ,MAAwC;AAAA,EAE3D,OAAO;AACL,UAAM,QAAQ;AAAA,EAChB;AAEA,MAAI,yCAAY,QAAQ;AACtB,UAAM,SAAS,WAAW;AAC1B,UAAM,UAAU,CAAC,EAAE,IAAI,KAAK,MAC1B,oCAAC,UAAO,IAAQ,MAAyC;AAAA,EAE7D,OAAO;AACL,UAAM,SAAS;AAAA,EACjB;AAEA,MAAI,yCAAY,MAAM;AACpB,UAAM,OAAO,WAAW;AACxB,UAAM,QAAQ,CAAC,EAAE,IAAI,KAAK,MACxB,oCAAC,QAAK,IAAQ,MAAuC;AAAA,EAEzD,OAAO;AACL,UAAM,OAAO;AAAA,EACf;AAEA,SAAO;AACT;AA6BO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAAA,EACd,UAAU;AACZ,GAAsB;AA3KtB;AA4KE,QAAM,YAAY,MAAM,QAAQ,MAAM,gBAAgB,cAAc,GAAG,CAAC,cAAc,CAAC;AAEvF,QAAM,kBAAkB,CAAC,WAAW,KAAK,WAAW,KAAK,WAAW;AAEpE,SACE,oCAAC,SAAI,WAAsB,OAAO,iBAAE,OAAO,QAAQ,QAAQ,UAAW,UACpE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,UAAK,UAAL,YAAc,CAAC;AAAA,MACvB,QAAQ,UAAK,UAAL,YAAc,CAAC;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,cAAc;AAAA,MACd,aAAa;AAAA,MACb,mBAAmB;AAAA;AAAA,IAElB,cAAc,oCAAC,gBAAW;AAAA,EAC7B,CACF;AAEJ;","names":[]}

package/dist/index.cjs

@@ -1205,6 +1205,8 @@ var COLLECTIONS = [
   "playlists",
   "playlist-images",
   "musics",
+  "flows",
+  "flow-images",
   "forms",
   "form-submissions",
   "media"