@01.software/sdk 0.2.9-dev.260314.f493447 → 0.4.0

package/dist/ui/flow.js

@@ -94,6 +94,21 @@ var BUILT_IN_EDGE_TYPES = [
 // src/ui/Flow/useFlow.ts
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
+
+// src/core/query/query-keys.ts
+function collectionKeys(collection) {
+  return {
+    all: [collection],
+    lists: () => [collection, "list"],
+    list: (options) => [collection, "list", options],
+    details: () => [collection, "detail"],
+    detail: (id, options) => [collection, "detail", id, options],
+    infinites: () => [collection, "infinite"],
+    infinite: (options) => [collection, "infinite", options]
+  };
+}
+
+// src/ui/Flow/useFlow.ts
 function toNodeTypeDef(doc) {
   var _a, _b, _c, _d;
   return {
@@ -129,7 +144,7 @@ function useFlow(options) {
   const identifier = (_a = id != null ? id : slug) != null ? _a : "";
   const flowQuery = useQuery(
     {
-      queryKey: ["flows", identifier],
+      queryKey: collectionKeys("flows").detail(identifier),
       queryFn: () => __async(null, null, function* () {
         if (id) {
           return client.from("flows").findById(id);
@@ -148,7 +163,7 @@ function useFlow(options) {
   );
   const nodeTypesQuery = useQuery(
     {
-      queryKey: ["flow-node-types"],
+      queryKey: collectionKeys("flow-node-types").lists(),
       queryFn: () => __async(null, null, function* () {
         const result = yield client.from("flow-node-types").find({ limit: 100 });
         return result.docs;
@@ -159,7 +174,7 @@ function useFlow(options) {
   );
   const edgeTypesQuery = useQuery(
     {
-      queryKey: ["flow-edge-types"],
+      queryKey: collectionKeys("flow-edge-types").lists(),
       queryFn: () => __async(null, null, function* () {
         const result = yield client.from("flow-edge-types").find({ limit: 100 });
         return result.docs;

package/dist/ui/flow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/Flow/index.tsx","../../src/ui/Flow/types.ts","../../src/ui/Flow/built-in-node-types.ts","../../src/ui/Flow/built-in-edge-types.ts","../../src/ui/Flow/useFlow.ts"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport {\n  ReactFlow,\n  ReactFlowProvider,\n  Background,\n  MarkerType,\n  type NodeTypes,\n  type NodeProps,\n  type Edge,\n} from '@xyflow/react'\nimport type {\n  CanvasData,\n  DynamicNodeData,\n  DynamicNodeSlotProps,\n  EdgeTypeDef,\n  FlowEdge,\n  FlowNode,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n} from './types'\n\nexport type {\n  CanvasData,\n  DynamicNodeSlotProps,\n  FlowNode,\n  FlowEdge,\n  FlowViewport,\n  FlowNodePosition,\n  FlowNodeData,\n  DynamicNodeData,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n  EdgeTypeDef,\n} from './types'\nexport { isDynamicNode, isFrameNode } from './types'\nexport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nexport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\nexport { useFlow } from './useFlow'\nexport type { SDKClient, UseFlowOptions, UseFlowResult } from './useFlow'\n\n// ── Helpers ──\n\nfunction sanitizeUrl(url: string | undefined): string | undefined {\n  if (!url) return url\n  try {\n    const parsed = new URL(url)\n    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return url\n    return undefined\n  } catch {\n    return undefined\n  }\n}\n\nfunction toMarkerType(value: string): MarkerType | undefined {\n  if (value === 'arrow') return MarkerType.Arrow\n  if (value === 'arrowclosed') return MarkerType.ArrowClosed\n  return undefined\n}\n\n// ── Field renderer (type-aware, matching console style) ──\n\nfunction renderFieldValue(\n  key: string,\n  val: unknown,\n  fieldDef?: NodeTypeFieldDef,\n): React.ReactNode {\n  if (val == null || val === '') return null\n\n  const fieldType = fieldDef?.fieldType\n\n  // Image field — image only, no decoration\n  if (\n    fieldType === 'image' ||\n    (typeof val === 'object' && val !== null && 'url' in val)\n  ) {\n    const imgUrl =\n      typeof val === 'string' ? val : (val as { url?: string })?.url\n    const safeUrl = sanitizeUrl(imgUrl)\n    if (!safeUrl) return null\n    return (\n      <img\n        key={key}\n        src={safeUrl}\n        alt=\"\"\n        draggable={false}\n        style={{ flex: 1, minHeight: 0, width: '100%', objectFit: 'contain' }}\n      />\n    )\n  }\n\n  // All other fields — text only\n  return (\n    <div\n      key={key}\n      style={{\n        fontSize: 11,\n        whiteSpace: 'pre-wrap',\n        wordBreak: 'break-word',\n        overflow: 'hidden',\n        flexShrink: 0,\n      }}\n    >\n      {String(val)}\n    </div>\n  )\n}\n\n// ── Default dynamic node renderer (no typeDef) ──\n\nfunction DefaultDynamicNode({ data }: NodeProps) {\n  const d = data as unknown as DynamicNodeData\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {d.fields &&\n        Object.entries(d.fields)\n          .filter(([, v]) => v != null && v !== '')\n          .map(([key, val]) => renderFieldValue(key, val))}\n    </div>\n  )\n}\n\n// ── Enhanced dynamic node renderer (with NodeTypeDef) ──\n\nfunction EnhancedDynamicNode({\n  data,\n  typeDef,\n}: {\n  data: DynamicNodeData\n  typeDef: NodeTypeDef\n}) {\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {typeDef.fields.map((f) => {\n        const val = data.fields[f.name]\n        if (val == null || val === '') return null\n        return renderFieldValue(f.name, val, f)\n      })}\n    </div>\n  )\n}\n\n// ── Default frame node renderer ──\n\nfunction DefaultFrameNode({ data }: NodeProps) {\n  const d = data as unknown as FrameNodeData\n  const baseColor = d.color ?? 'rgba(128,128,128,0.15)'\n  const padding = d.padding ?? 20\n  const borderStyle = d.borderStyle ?? 'dashed'\n  const opacity = d.opacity ?? 0.15\n\n  // Apply opacity to rgba colors\n  const bgColor = (() => {\n    const m = baseColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/)\n    if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`\n    return baseColor\n  })()\n\n  return (\n    <div\n      style={{\n        backgroundColor: bgColor,\n        padding,\n        width: '100%',\n        height: '100%',\n        border:\n          borderStyle === 'none'\n            ? 'none'\n            : `2px ${borderStyle} rgba(128,128,128,0.3)`,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 11,\n          fontWeight: 600,\n          color: 'rgba(128,128,128,0.6)',\n          userSelect: 'none',\n        }}\n      >\n        {d.label}\n      </div>\n    </div>\n  )\n}\n\n// ── Node types builder ──\n\nfunction createNodeTypes(\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>,\n  nodeTypeDefsMap?: Map<string, NodeTypeDef>,\n): NodeTypes {\n  const types: NodeTypes = {} as NodeTypes\n\n  // Dynamic node type\n  types.dynamic = ((props: NodeProps) => {\n    const d = props.data as unknown as DynamicNodeData\n    const typeDef = nodeTypeDefsMap?.get(d.nodeTypeSlug)\n    const CustomRenderer = nodeRenderers?.[d.nodeTypeSlug]\n    if (CustomRenderer) {\n      return (\n        <CustomRenderer\n          id={props.id}\n          nodeTypeSlug={d.nodeTypeSlug}\n          label={d.label}\n          fields={d.fields}\n          nodeTypeDef={typeDef}\n        />\n      )\n    }\n    if (typeDef) {\n      return <EnhancedDynamicNode data={d} typeDef={typeDef} />\n    }\n    return <DefaultDynamicNode {...props} />\n  }) as NodeTypes[string]\n\n  // Frame node type\n  types.frame = DefaultFrameNode as NodeTypes[string]\n\n  return types\n}\n\n// ── Edge style resolver ──\n\nconst EDGE_TYPE_MAP: Record<string, string> = {\n  step: 'step',\n  smoothstep: 'smoothstep',\n  bezier: 'default',\n  default: 'default',\n}\n\nfunction applyEdgeStyles(\n  edges: FlowEdge[],\n  edgeTypeDefsMap?: Map<string, EdgeTypeDef>,\n): Edge[] {\n  if (!edgeTypeDefsMap?.size) return edges as unknown as Edge[]\n\n  return edges.map((edge) => {\n    const slug = edge.edgeTypeSlug\n    if (!slug) return edge as unknown as Edge\n\n    const def = edgeTypeDefsMap.get(slug)\n    if (!def) return edge as unknown as Edge\n\n    const styled: Edge = { ...(edge as unknown as Edge) }\n\n    // Edge type (line style) — canvas value takes precedence\n    if (!styled.type && def.lineStyle) {\n      styled.type = EDGE_TYPE_MAP[def.lineStyle] ?? 'default'\n    }\n\n    // Visual style — canvas style merged with def as fallback\n    styled.style = {\n      ...(def.color ? { stroke: def.color } : undefined),\n      ...(def.strokeWidth ? { strokeWidth: def.strokeWidth } : undefined),\n      ...edge.style,\n    }\n\n    // Animation — canvas value takes precedence\n    if (styled.animated == null && def.animated) styled.animated = true\n\n    // Markers — canvas value takes precedence over def\n    if (!styled.markerStart) {\n      const startType = toMarkerType(def.markerStart)\n      if (startType) {\n        styled.markerStart = {\n          type: startType,\n          ...(def.color ? { color: def.color } : undefined),\n        }\n      }\n    }\n    if (!styled.markerEnd) {\n      const endType = toMarkerType(def.markerEnd)\n      if (endType) {\n        styled.markerEnd = {\n          type: endType,\n          ...(def.color ? { color: def.color } : undefined),\n        }\n      }\n    }\n\n    return styled\n  })\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 renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>\n  /** Node type definitions for enhanced rendering (field-type-aware display) */\n  nodeTypeDefs?: NodeTypeDef[]\n  /** Edge type definitions for styled edges (color, stroke, markers, animation) */\n  edgeTypeDefs?: EdgeTypeDef[]\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  /** Called when a node is clicked */\n  onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void\n  /** Called when an edge is clicked */\n  onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void\n}\n\nexport function FlowRenderer({\n  data,\n  className,\n  style,\n  nodeRenderers,\n  nodeTypeDefs,\n  edgeTypeDefs,\n  background = true,\n  interactive = false,\n  fitView = true,\n  onNodeClick,\n  onEdgeClick,\n}: FlowRendererProps) {\n  const nodeTypeDefsMap = React.useMemo(() => {\n    if (!nodeTypeDefs?.length) return undefined\n    return new Map(nodeTypeDefs.map((d) => [d.slug, d]))\n  }, [nodeTypeDefs])\n\n  const edgeTypeDefsMap = React.useMemo(() => {\n    if (!edgeTypeDefs?.length) return undefined\n    return new Map(edgeTypeDefs.map((d) => [d.slug, d]))\n  }, [edgeTypeDefs])\n\n  const nodeTypes = React.useMemo(\n    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),\n    [nodeRenderers, nodeTypeDefsMap],\n  )\n\n  const styledEdges = React.useMemo(\n    () => applyEdgeStyles(data?.edges ?? [], edgeTypeDefsMap),\n    [data?.edges, edgeTypeDefsMap],\n  )\n\n  if (!data) return null\n\n  const defaultViewport = !fitView && data.viewport ? data.viewport : undefined\n\n  return (\n    <ReactFlowProvider>\n      <div\n        className={className}\n        style={{ width: '100%', height: '100%', ...style }}\n      >\n        <ReactFlow\n          nodes={\n            (data.nodes ?? []) as unknown as Parameters<\n              typeof ReactFlow\n            >[0]['nodes']\n          }\n          edges={styledEdges}\n          nodeTypes={nodeTypes}\n          defaultViewport={defaultViewport}\n          fitView={fitView}\n          onNodeClick={\n            onNodeClick as Parameters<typeof ReactFlow>[0]['onNodeClick']\n          }\n          onEdgeClick={\n            onEdgeClick as Parameters<typeof ReactFlow>[0]['onEdgeClick']\n          }\n          nodesDraggable={interactive ? undefined : false}\n          nodesConnectable={false}\n          elementsSelectable={interactive || !!onNodeClick || !!onEdgeClick}\n          panOnDrag={interactive}\n          zoomOnScroll={interactive}\n          zoomOnPinch={interactive}\n          zoomOnDoubleClick={false}\n        >\n          {background && <Background />}\n        </ReactFlow>\n      </div>\n    </ReactFlowProvider>\n  )\n}\n","import type React from 'react'\n\n// ── Dynamic node data ──\n\nexport interface DynamicNodeData {\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n}\n\nexport type FlowNodeData = DynamicNodeData & 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  draggable?: boolean\n  selectable?: boolean\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  animated?: boolean\n  markerStart?: unknown\n  markerEnd?: unknown\n  edgeTypeSlug?: string\n  fields?: Record<string, unknown>\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// ── Node type definitions (mirrors console's NodeTypeDef) ──\n\nexport interface NodeTypeFieldDef {\n  name: string\n  label: string\n  fieldType:\n    | 'text'\n    | 'textarea'\n    | 'number'\n    | 'url'\n    | 'color'\n    | 'image'\n    | 'select'\n    | 'toggle'\n  options?: { label: string; value: string }[]\n  defaultValue?: string\n  required?: boolean\n}\n\nexport interface NodeTypeDef {\n  slug: string\n  name: string\n  color: string\n  defaultSize: { width: number; height: number }\n  fields: NodeTypeFieldDef[]\n  transparentBackground?: boolean\n}\n\n// ── Edge type definitions (mirrors console's EdgeTypeDef) ──\n\nexport interface EdgeTypeDef {\n  slug: string\n  name: string\n  color: string\n  strokeWidth: number\n  animated: boolean\n  lineStyle: string\n  markerStart: string\n  markerEnd: string\n  fields: NodeTypeFieldDef[]\n}\n\n// ── Type guards ──\n\nexport function isDynamicNode(\n  node: FlowNode,\n): node is FlowNode & { data: DynamicNodeData } {\n  return node.type === 'dynamic'\n}\n\nexport function isFrameNode(\n  node: FlowNode,\n): node is FlowNode & { data: FrameNodeData } {\n  return node.type === 'frame'\n}\n\n// ── Component slot props ──\n\nexport interface DynamicNodeSlotProps {\n  id: string\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n  nodeTypeDef?: NodeTypeDef\n}\n\n// ── Frame node data ──\n\nexport interface FrameNodeData {\n  label: string\n  color?: string\n  padding?: number\n  borderStyle?: 'dashed' | 'solid' | 'none'\n  opacity?: number\n}\n","import type { NodeTypeDef } from './types'\n\nexport const BUILT_IN_NODE_TYPES: NodeTypeDef[] = [\n  {\n    slug: 'text',\n    name: 'Text',\n    color: '#e5e7eb',\n    defaultSize: { width: 200, height: 200 },\n    fields: [{ name: 'body', label: 'Body', fieldType: 'textarea' }],\n  },\n  {\n    slug: 'image',\n    name: 'Image',\n    color: '#e5e7eb',\n    transparentBackground: true,\n    defaultSize: { width: 200, height: 200 },\n    fields: [\n      { name: 'image', label: 'Image', fieldType: 'image' },\n      { name: 'alt', label: 'Alt Text', fieldType: 'text' },\n      { name: 'caption', label: 'Caption', fieldType: 'text' },\n    ],\n  },\n]\n","import type { EdgeTypeDef } from './types'\n\nexport const BUILT_IN_EDGE_TYPES: EdgeTypeDef[] = [\n  {\n    slug: 'default',\n    name: 'Default',\n    color: '',\n    strokeWidth: 2,\n    animated: false,\n    lineStyle: 'default',\n    markerStart: 'none',\n    markerEnd: 'arrow',\n    fields: [],\n  },\n]\n","'use client'\n\nimport { useQuery, type QueryClient } from '@tanstack/react-query'\nimport { useMemo } from 'react'\nimport type { CanvasData, NodeTypeDef, EdgeTypeDef } from './types'\nimport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nimport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\n\n// ── Client interface ──\n// Structurally compatible with both BrowserClient and ServerClient.\n// Lists only the collections useFlow actually queries so the generic\n// `from<T extends PublicCollection>` on the real clients satisfies this.\n\ntype FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFn = (...args: any[]) => any\n\nexport interface SDKClient {\n  from(collection: FlowCollection): {\n    find: AnyFn\n    findById: AnyFn\n  }\n  queryClient: QueryClient\n}\n\n// ── Options & Result ──\n\nexport interface UseFlowOptions {\n  /** SDK client instance (BrowserClient or ServerClient) */\n  client: SDKClient\n  /** Flow slug (URL-friendly identifier) */\n  slug?: string\n  /** Flow document ID (UUID) */\n  id?: string\n  /** Enable/disable data fetching (default: true) */\n  enabled?: boolean\n}\n\nexport interface UseFlowResult {\n  data: CanvasData | undefined\n  nodeTypeDefs: NodeTypeDef[]\n  edgeTypeDefs: EdgeTypeDef[]\n  flow: Record<string, unknown> | undefined\n  isLoading: boolean\n  error: Error | null\n}\n\n// ── Helpers ──\n\nfunction toNodeTypeDef(doc: Record<string, unknown>): NodeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? '#e5e7eb'),\n    defaultSize: (doc.defaultSize as NodeTypeDef['defaultSize']) ?? {\n      width: 200,\n      height: 200,\n    },\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as NodeTypeDef['fields'])\n      : [],\n    transparentBackground: Boolean(doc.transparentBackground),\n  }\n}\n\nfunction toEdgeTypeDef(doc: Record<string, unknown>): EdgeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? ''),\n    strokeWidth: (doc.strokeWidth as number) ?? 2,\n    animated: (doc.animated as boolean) ?? false,\n    lineStyle: String(doc.lineStyle ?? 'default'),\n    markerStart: String(doc.markerStart ?? 'none'),\n    markerEnd: String(doc.markerEnd ?? 'arrow'),\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as EdgeTypeDef['fields'])\n      : [],\n  }\n}\n\n// ── Hook ──\n\nexport function useFlow(options: UseFlowOptions): UseFlowResult {\n  const { client, slug, id, enabled = true } = options\n  const hasIdentifier = !!(slug || id)\n  const identifier = id ?? slug ?? ''\n\n  // Fetch flow document\n  const flowQuery = useQuery<Record<string, unknown>>(\n    {\n      queryKey: ['flows', identifier],\n      queryFn: async () => {\n        if (id) {\n          return client.from('flows').findById(id)\n        }\n        const result = await client.from('flows').find({\n          where: { slug: { equals: slug } },\n          limit: 1,\n        })\n        const doc = result.docs[0]\n        if (!doc) throw new Error(`Flow not found: ${slug}`)\n        return doc\n      },\n      enabled: enabled && hasIdentifier,\n    },\n    client.queryClient,\n  )\n\n  // Fetch tenant's custom node types\n  const nodeTypesQuery = useQuery<Record<string, unknown>[]>(\n    {\n      queryKey: ['flow-node-types'],\n      queryFn: async () => {\n        const result = await client.from('flow-node-types').find({ limit: 100 })\n        return result.docs\n      },\n      enabled,\n    },\n    client.queryClient,\n  )\n\n  // Fetch tenant's custom edge types\n  const edgeTypesQuery = useQuery<Record<string, unknown>[]>(\n    {\n      queryKey: ['flow-edge-types'],\n      queryFn: async () => {\n        const result = await client.from('flow-edge-types').find({ limit: 100 })\n        return result.docs\n      },\n      enabled,\n    },\n    client.queryClient,\n  )\n\n  // Merge built-in + API node types\n  const nodeTypeDefs = useMemo<NodeTypeDef[]>(() => {\n    const apiDefs = (nodeTypesQuery.data ?? []).map(toNodeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_NODE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_NODE_TYPES, ...customDefs]\n  }, [nodeTypesQuery.data])\n\n  // Merge built-in + API edge types\n  const edgeTypeDefs = useMemo<EdgeTypeDef[]>(() => {\n    const apiDefs = (edgeTypesQuery.data ?? []).map(toEdgeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_EDGE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_EDGE_TYPES, ...customDefs]\n  }, [edgeTypesQuery.data])\n\n  const flow = flowQuery.data\n  const canvas = flow?.canvas as CanvasData | undefined\n\n  return {\n    data: canvas,\n    nodeTypeDefs,\n    edgeTypeDefs,\n    flow,\n    isLoading:\n      flowQuery.isLoading ||\n      nodeTypesQuery.isLoading ||\n      edgeTypesQuery.isLoading,\n    error:\n      (flowQuery.error as Error | null) ??\n      (nodeTypesQuery.error as Error | null) ??\n      (edgeTypesQuery.error as Error | null),\n  }\n}\n"],"mappings":"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","names":["_a","_a"]}
+{"version":3,"sources":["../../src/ui/Flow/index.tsx","../../src/ui/Flow/types.ts","../../src/ui/Flow/built-in-node-types.ts","../../src/ui/Flow/built-in-edge-types.ts","../../src/ui/Flow/useFlow.ts","../../src/core/query/query-keys.ts"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport {\n  ReactFlow,\n  ReactFlowProvider,\n  Background,\n  MarkerType,\n  type NodeTypes,\n  type NodeProps,\n  type Edge,\n} from '@xyflow/react'\nimport type {\n  CanvasData,\n  DynamicNodeData,\n  DynamicNodeSlotProps,\n  EdgeTypeDef,\n  FlowEdge,\n  FlowNode,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n} from './types'\n\nexport type {\n  CanvasData,\n  DynamicNodeSlotProps,\n  FlowNode,\n  FlowEdge,\n  FlowViewport,\n  FlowNodePosition,\n  FlowNodeData,\n  DynamicNodeData,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n  EdgeTypeDef,\n} from './types'\nexport { isDynamicNode, isFrameNode } from './types'\nexport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nexport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\nexport { useFlow } from './useFlow'\nexport type { SDKClient, UseFlowOptions, UseFlowResult } from './useFlow'\n\n// ── Helpers ──\n\nfunction sanitizeUrl(url: string | undefined): string | undefined {\n  if (!url) return url\n  try {\n    const parsed = new URL(url)\n    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return url\n    return undefined\n  } catch {\n    return undefined\n  }\n}\n\nfunction toMarkerType(value: string): MarkerType | undefined {\n  if (value === 'arrow') return MarkerType.Arrow\n  if (value === 'arrowclosed') return MarkerType.ArrowClosed\n  return undefined\n}\n\n// ── Field renderer (type-aware, matching console style) ──\n\nfunction renderFieldValue(\n  key: string,\n  val: unknown,\n  fieldDef?: NodeTypeFieldDef,\n): React.ReactNode {\n  if (val == null || val === '') return null\n\n  const fieldType = fieldDef?.fieldType\n\n  // Image field — image only, no decoration\n  if (\n    fieldType === 'image' ||\n    (typeof val === 'object' && val !== null && 'url' in val)\n  ) {\n    const imgUrl =\n      typeof val === 'string' ? val : (val as { url?: string })?.url\n    const safeUrl = sanitizeUrl(imgUrl)\n    if (!safeUrl) return null\n    return (\n      <img\n        key={key}\n        src={safeUrl}\n        alt=\"\"\n        draggable={false}\n        style={{ flex: 1, minHeight: 0, width: '100%', objectFit: 'contain' }}\n      />\n    )\n  }\n\n  // All other fields — text only\n  return (\n    <div\n      key={key}\n      style={{\n        fontSize: 11,\n        whiteSpace: 'pre-wrap',\n        wordBreak: 'break-word',\n        overflow: 'hidden',\n        flexShrink: 0,\n      }}\n    >\n      {String(val)}\n    </div>\n  )\n}\n\n// ── Default dynamic node renderer (no typeDef) ──\n\nfunction DefaultDynamicNode({ data }: NodeProps) {\n  const d = data as unknown as DynamicNodeData\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {d.fields &&\n        Object.entries(d.fields)\n          .filter(([, v]) => v != null && v !== '')\n          .map(([key, val]) => renderFieldValue(key, val))}\n    </div>\n  )\n}\n\n// ── Enhanced dynamic node renderer (with NodeTypeDef) ──\n\nfunction EnhancedDynamicNode({\n  data,\n  typeDef,\n}: {\n  data: DynamicNodeData\n  typeDef: NodeTypeDef\n}) {\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {typeDef.fields.map((f) => {\n        const val = data.fields[f.name]\n        if (val == null || val === '') return null\n        return renderFieldValue(f.name, val, f)\n      })}\n    </div>\n  )\n}\n\n// ── Default frame node renderer ──\n\nfunction DefaultFrameNode({ data }: NodeProps) {\n  const d = data as unknown as FrameNodeData\n  const baseColor = d.color ?? 'rgba(128,128,128,0.15)'\n  const padding = d.padding ?? 20\n  const borderStyle = d.borderStyle ?? 'dashed'\n  const opacity = d.opacity ?? 0.15\n\n  // Apply opacity to rgba colors\n  const bgColor = (() => {\n    const m = baseColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/)\n    if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`\n    return baseColor\n  })()\n\n  return (\n    <div\n      style={{\n        backgroundColor: bgColor,\n        padding,\n        width: '100%',\n        height: '100%',\n        border:\n          borderStyle === 'none'\n            ? 'none'\n            : `2px ${borderStyle} rgba(128,128,128,0.3)`,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 11,\n          fontWeight: 600,\n          color: 'rgba(128,128,128,0.6)',\n          userSelect: 'none',\n        }}\n      >\n        {d.label}\n      </div>\n    </div>\n  )\n}\n\n// ── Node types builder ──\n\nfunction createNodeTypes(\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>,\n  nodeTypeDefsMap?: Map<string, NodeTypeDef>,\n): NodeTypes {\n  const types: NodeTypes = {} as NodeTypes\n\n  // Dynamic node type\n  types.dynamic = ((props: NodeProps) => {\n    const d = props.data as unknown as DynamicNodeData\n    const typeDef = nodeTypeDefsMap?.get(d.nodeTypeSlug)\n    const CustomRenderer = nodeRenderers?.[d.nodeTypeSlug]\n    if (CustomRenderer) {\n      return (\n        <CustomRenderer\n          id={props.id}\n          nodeTypeSlug={d.nodeTypeSlug}\n          label={d.label}\n          fields={d.fields}\n          nodeTypeDef={typeDef}\n        />\n      )\n    }\n    if (typeDef) {\n      return <EnhancedDynamicNode data={d} typeDef={typeDef} />\n    }\n    return <DefaultDynamicNode {...props} />\n  }) as NodeTypes[string]\n\n  // Frame node type\n  types.frame = DefaultFrameNode as NodeTypes[string]\n\n  return types\n}\n\n// ── Edge style resolver ──\n\nconst EDGE_TYPE_MAP: Record<string, string> = {\n  step: 'step',\n  smoothstep: 'smoothstep',\n  bezier: 'default',\n  default: 'default',\n}\n\nfunction applyEdgeStyles(\n  edges: FlowEdge[],\n  edgeTypeDefsMap?: Map<string, EdgeTypeDef>,\n): Edge[] {\n  if (!edgeTypeDefsMap?.size) return edges as unknown as Edge[]\n\n  return edges.map((edge) => {\n    const slug = edge.edgeTypeSlug\n    if (!slug) return edge as unknown as Edge\n\n    const def = edgeTypeDefsMap.get(slug)\n    if (!def) return edge as unknown as Edge\n\n    const styled: Edge = { ...(edge as unknown as Edge) }\n\n    // Edge type (line style) — canvas value takes precedence\n    if (!styled.type && def.lineStyle) {\n      styled.type = EDGE_TYPE_MAP[def.lineStyle] ?? 'default'\n    }\n\n    // Visual style — canvas style merged with def as fallback\n    styled.style = {\n      ...(def.color ? { stroke: def.color } : undefined),\n      ...(def.strokeWidth ? { strokeWidth: def.strokeWidth } : undefined),\n      ...edge.style,\n    }\n\n    // Animation — canvas value takes precedence\n    if (styled.animated == null && def.animated) styled.animated = true\n\n    // Markers — canvas value takes precedence over def\n    if (!styled.markerStart) {\n      const startType = toMarkerType(def.markerStart)\n      if (startType) {\n        styled.markerStart = {\n          type: startType,\n          ...(def.color ? { color: def.color } : undefined),\n        }\n      }\n    }\n    if (!styled.markerEnd) {\n      const endType = toMarkerType(def.markerEnd)\n      if (endType) {\n        styled.markerEnd = {\n          type: endType,\n          ...(def.color ? { color: def.color } : undefined),\n        }\n      }\n    }\n\n    return styled\n  })\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 renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>\n  /** Node type definitions for enhanced rendering (field-type-aware display) */\n  nodeTypeDefs?: NodeTypeDef[]\n  /** Edge type definitions for styled edges (color, stroke, markers, animation) */\n  edgeTypeDefs?: EdgeTypeDef[]\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  /** Called when a node is clicked */\n  onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void\n  /** Called when an edge is clicked */\n  onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void\n}\n\nexport function FlowRenderer({\n  data,\n  className,\n  style,\n  nodeRenderers,\n  nodeTypeDefs,\n  edgeTypeDefs,\n  background = true,\n  interactive = false,\n  fitView = true,\n  onNodeClick,\n  onEdgeClick,\n}: FlowRendererProps) {\n  const nodeTypeDefsMap = React.useMemo(() => {\n    if (!nodeTypeDefs?.length) return undefined\n    return new Map(nodeTypeDefs.map((d) => [d.slug, d]))\n  }, [nodeTypeDefs])\n\n  const edgeTypeDefsMap = React.useMemo(() => {\n    if (!edgeTypeDefs?.length) return undefined\n    return new Map(edgeTypeDefs.map((d) => [d.slug, d]))\n  }, [edgeTypeDefs])\n\n  const nodeTypes = React.useMemo(\n    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),\n    [nodeRenderers, nodeTypeDefsMap],\n  )\n\n  const styledEdges = React.useMemo(\n    () => applyEdgeStyles(data?.edges ?? [], edgeTypeDefsMap),\n    [data?.edges, edgeTypeDefsMap],\n  )\n\n  if (!data) return null\n\n  const defaultViewport = !fitView && data.viewport ? data.viewport : undefined\n\n  return (\n    <ReactFlowProvider>\n      <div\n        className={className}\n        style={{ width: '100%', height: '100%', ...style }}\n      >\n        <ReactFlow\n          nodes={\n            (data.nodes ?? []) as unknown as Parameters<\n              typeof ReactFlow\n            >[0]['nodes']\n          }\n          edges={styledEdges}\n          nodeTypes={nodeTypes}\n          defaultViewport={defaultViewport}\n          fitView={fitView}\n          onNodeClick={\n            onNodeClick as Parameters<typeof ReactFlow>[0]['onNodeClick']\n          }\n          onEdgeClick={\n            onEdgeClick as Parameters<typeof ReactFlow>[0]['onEdgeClick']\n          }\n          nodesDraggable={interactive ? undefined : false}\n          nodesConnectable={false}\n          elementsSelectable={interactive || !!onNodeClick || !!onEdgeClick}\n          panOnDrag={interactive}\n          zoomOnScroll={interactive}\n          zoomOnPinch={interactive}\n          zoomOnDoubleClick={false}\n        >\n          {background && <Background />}\n        </ReactFlow>\n      </div>\n    </ReactFlowProvider>\n  )\n}\n","import type React from 'react'\n\n// ── Dynamic node data ──\n\nexport interface DynamicNodeData {\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n}\n\nexport type FlowNodeData = DynamicNodeData & 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  draggable?: boolean\n  selectable?: boolean\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  animated?: boolean\n  markerStart?: unknown\n  markerEnd?: unknown\n  edgeTypeSlug?: string\n  fields?: Record<string, unknown>\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// ── Node type definitions (mirrors console's NodeTypeDef) ──\n\nexport interface NodeTypeFieldDef {\n  name: string\n  label: string\n  fieldType:\n    | 'text'\n    | 'textarea'\n    | 'number'\n    | 'url'\n    | 'color'\n    | 'image'\n    | 'select'\n    | 'toggle'\n  options?: { label: string; value: string }[]\n  defaultValue?: string\n  required?: boolean\n}\n\nexport interface NodeTypeDef {\n  slug: string\n  name: string\n  color: string\n  defaultSize: { width: number; height: number }\n  fields: NodeTypeFieldDef[]\n  transparentBackground?: boolean\n}\n\n// ── Edge type definitions (mirrors console's EdgeTypeDef) ──\n\nexport interface EdgeTypeDef {\n  slug: string\n  name: string\n  color: string\n  strokeWidth: number\n  animated: boolean\n  lineStyle: string\n  markerStart: string\n  markerEnd: string\n  fields: NodeTypeFieldDef[]\n}\n\n// ── Type guards ──\n\nexport function isDynamicNode(\n  node: FlowNode,\n): node is FlowNode & { data: DynamicNodeData } {\n  return node.type === 'dynamic'\n}\n\nexport function isFrameNode(\n  node: FlowNode,\n): node is FlowNode & { data: FrameNodeData } {\n  return node.type === 'frame'\n}\n\n// ── Component slot props ──\n\nexport interface DynamicNodeSlotProps {\n  id: string\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n  nodeTypeDef?: NodeTypeDef\n}\n\n// ── Frame node data ──\n\nexport interface FrameNodeData {\n  label: string\n  color?: string\n  padding?: number\n  borderStyle?: 'dashed' | 'solid' | 'none'\n  opacity?: number\n}\n","import type { NodeTypeDef } from './types'\n\nexport const BUILT_IN_NODE_TYPES: NodeTypeDef[] = [\n  {\n    slug: 'text',\n    name: 'Text',\n    color: '#e5e7eb',\n    defaultSize: { width: 200, height: 200 },\n    fields: [{ name: 'body', label: 'Body', fieldType: 'textarea' }],\n  },\n  {\n    slug: 'image',\n    name: 'Image',\n    color: '#e5e7eb',\n    transparentBackground: true,\n    defaultSize: { width: 200, height: 200 },\n    fields: [\n      { name: 'image', label: 'Image', fieldType: 'image' },\n      { name: 'alt', label: 'Alt Text', fieldType: 'text' },\n      { name: 'caption', label: 'Caption', fieldType: 'text' },\n    ],\n  },\n]\n","import type { EdgeTypeDef } from './types'\n\nexport const BUILT_IN_EDGE_TYPES: EdgeTypeDef[] = [\n  {\n    slug: 'default',\n    name: 'Default',\n    color: '',\n    strokeWidth: 2,\n    animated: false,\n    lineStyle: 'default',\n    markerStart: 'none',\n    markerEnd: 'arrow',\n    fields: [],\n  },\n]\n","'use client'\n\nimport { useQuery, type QueryClient } from '@tanstack/react-query'\nimport { useMemo } from 'react'\nimport type { CanvasData, NodeTypeDef, EdgeTypeDef } from './types'\nimport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nimport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\nimport { collectionKeys } from '../../core/query/query-keys'\n\n// ── Client interface ──\n// Structurally compatible with both BrowserClient and ServerClient.\n// Lists only the collections useFlow actually queries so the generic\n// `from<T extends PublicCollection>` on the real clients satisfies this.\n\ntype FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFn = (...args: any[]) => any\n\nexport interface SDKClient {\n  from(collection: FlowCollection): {\n    find: AnyFn\n    findById: AnyFn\n  }\n  queryClient: QueryClient\n}\n\n// ── Options & Result ──\n\nexport interface UseFlowOptions {\n  /** SDK client instance (BrowserClient or ServerClient) */\n  client: SDKClient\n  /** Flow slug (URL-friendly identifier) */\n  slug?: string\n  /** Flow document ID (UUID) */\n  id?: string\n  /** Enable/disable data fetching (default: true) */\n  enabled?: boolean\n}\n\nexport interface UseFlowResult {\n  data: CanvasData | undefined\n  nodeTypeDefs: NodeTypeDef[]\n  edgeTypeDefs: EdgeTypeDef[]\n  flow: Record<string, unknown> | undefined\n  isLoading: boolean\n  error: Error | null\n}\n\n// ── Helpers ──\n\nfunction toNodeTypeDef(doc: Record<string, unknown>): NodeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? '#e5e7eb'),\n    defaultSize: (doc.defaultSize as NodeTypeDef['defaultSize']) ?? {\n      width: 200,\n      height: 200,\n    },\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as NodeTypeDef['fields'])\n      : [],\n    transparentBackground: Boolean(doc.transparentBackground),\n  }\n}\n\nfunction toEdgeTypeDef(doc: Record<string, unknown>): EdgeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? ''),\n    strokeWidth: (doc.strokeWidth as number) ?? 2,\n    animated: (doc.animated as boolean) ?? false,\n    lineStyle: String(doc.lineStyle ?? 'default'),\n    markerStart: String(doc.markerStart ?? 'none'),\n    markerEnd: String(doc.markerEnd ?? 'arrow'),\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as EdgeTypeDef['fields'])\n      : [],\n  }\n}\n\n// ── Hook ──\n\nexport function useFlow(options: UseFlowOptions): UseFlowResult {\n  const { client, slug, id, enabled = true } = options\n  const hasIdentifier = !!(slug || id)\n  const identifier = id ?? slug ?? ''\n\n  // Fetch flow document\n  const flowQuery = useQuery<Record<string, unknown>>(\n    {\n      queryKey: collectionKeys('flows').detail(identifier),\n      queryFn: async () => {\n        if (id) {\n          return client.from('flows').findById(id)\n        }\n        const result = await client.from('flows').find({\n          where: { slug: { equals: slug } },\n          limit: 1,\n        })\n        const doc = result.docs[0]\n        if (!doc) throw new Error(`Flow not found: ${slug}`)\n        return doc\n      },\n      enabled: enabled && hasIdentifier,\n    },\n    client.queryClient,\n  )\n\n  // Fetch tenant's custom node types\n  const nodeTypesQuery = useQuery<Record<string, unknown>[]>(\n    {\n      queryKey: collectionKeys('flow-node-types').lists(),\n      queryFn: async () => {\n        const result = await client.from('flow-node-types').find({ limit: 100 })\n        return result.docs\n      },\n      enabled,\n    },\n    client.queryClient,\n  )\n\n  // Fetch tenant's custom edge types\n  const edgeTypesQuery = useQuery<Record<string, unknown>[]>(\n    {\n      queryKey: collectionKeys('flow-edge-types').lists(),\n      queryFn: async () => {\n        const result = await client.from('flow-edge-types').find({ limit: 100 })\n        return result.docs\n      },\n      enabled,\n    },\n    client.queryClient,\n  )\n\n  // Merge built-in + API node types\n  const nodeTypeDefs = useMemo<NodeTypeDef[]>(() => {\n    const apiDefs = (nodeTypesQuery.data ?? []).map(toNodeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_NODE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_NODE_TYPES, ...customDefs]\n  }, [nodeTypesQuery.data])\n\n  // Merge built-in + API edge types\n  const edgeTypeDefs = useMemo<EdgeTypeDef[]>(() => {\n    const apiDefs = (edgeTypesQuery.data ?? []).map(toEdgeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_EDGE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_EDGE_TYPES, ...customDefs]\n  }, [edgeTypesQuery.data])\n\n  const flow = flowQuery.data\n  const canvas = flow?.canvas as CanvasData | undefined\n\n  return {\n    data: canvas,\n    nodeTypeDefs,\n    edgeTypeDefs,\n    flow,\n    isLoading:\n      flowQuery.isLoading ||\n      nodeTypesQuery.isLoading ||\n      edgeTypesQuery.isLoading,\n    error:\n      (flowQuery.error as Error | null) ??\n      (nodeTypesQuery.error as Error | null) ??\n      (edgeTypesQuery.error as Error | null),\n  }\n}\n","import type { PublicCollection, ApiQueryOptions } from '../client/types'\n\nexport function collectionKeys<T extends PublicCollection>(collection: T) {\n  return {\n    all: [collection] as const,\n    lists: () => [collection, 'list'] as const,\n    list: (options?: ApiQueryOptions) => [collection, 'list', options] as const,\n    details: () => [collection, 'detail'] as const,\n    detail: (id: string, options?: ApiQueryOptions) =>\n      [collection, 'detail', id, options] as const,\n    infinites: () => [collection, 'infinite'] as const,\n    infinite: (options?: Omit<ApiQueryOptions, 'page'>) =>\n      [collection, 'infinite', options] as const,\n  }\n}\n\nexport const customerKeys = {\n  all: ['customer'] as const,\n  me: () => ['customer', 'me'] as const,\n}\n"],"mappings":"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","names":["_a","_a"]}

package/dist/ui/form.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { F as Form } from '../payload-types-ggU6BNuH.cjs';
+import { F as Form } from '../payload-types-CZiaL4Wr.cjs';
 import { RichTextData } from './rich-text.cjs';
 import '@payloadcms/richtext-lexical';
 import '@payloadcms/richtext-lexical/lexical';

package/dist/ui/form.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { F as Form } from '../payload-types-ggU6BNuH.js';
+import { F as Form } from '../payload-types-CZiaL4Wr.js';
 import { RichTextData } from './rich-text.js';
 import '@payloadcms/richtext-lexical';
 import '@payloadcms/richtext-lexical/lexical';

package/dist/ui/video.cjs

@@ -0,0 +1,219 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/Video/index.tsx
+var Video_exports = {};
+__export(Video_exports, {
+  VideoPlayer: () => VideoPlayer,
+  getVideoGif: () => getVideoGif,
+  getVideoMp4Url: () => getVideoMp4Url,
+  getVideoStoryboard: () => getVideoStoryboard,
+  getVideoStreamUrl: () => getVideoStreamUrl,
+  getVideoThumbnail: () => getVideoThumbnail
+});
+module.exports = __toCommonJS(Video_exports);
+var import_react = __toESM(require("react"), 1);
+var import_mux_player_react = __toESM(require("@mux/mux-player-react"), 1);
+
+// src/utils/video.ts
+var MUX_IMAGE_BASE = "https://image.mux.com";
+var MUX_STREAM_BASE = "https://stream.mux.com";
+function getVideoThumbnail(playbackId, options) {
+  var _a;
+  const params = new URLSearchParams();
+  params.set("width", String((_a = options == null ? void 0 : options.width) != null ? _a : 640));
+  if (options == null ? void 0 : options.height) params.set("height", String(options.height));
+  if ((options == null ? void 0 : options.time) != null) params.set("time", String(options.time));
+  if (options == null ? void 0 : options.fitMode) params.set("fit_mode", options.fitMode);
+  if (options == null ? void 0 : options.flipH) params.set("flip_h", "true");
+  if (options == null ? void 0 : options.flipV) params.set("flip_v", "true");
+  if (options == null ? void 0 : options.rotate) params.set("rotate", String(options.rotate));
+  return `${MUX_IMAGE_BASE}/${playbackId}/thumbnail.jpg?${params}`;
+}
+function getVideoGif(playbackId, options) {
+  var _a;
+  const params = new URLSearchParams();
+  params.set("width", String((_a = options == null ? void 0 : options.width) != null ? _a : 320));
+  if ((options == null ? void 0 : options.start) != null) params.set("start", String(options.start));
+  if ((options == null ? void 0 : options.end) != null) params.set("end", String(options.end));
+  if (options == null ? void 0 : options.fps) params.set("fps", String(options.fps));
+  return `${MUX_IMAGE_BASE}/${playbackId}/animated.gif?${params}`;
+}
+function getVideoStoryboard(playbackId) {
+  return `${MUX_IMAGE_BASE}/${playbackId}/storyboard.vtt`;
+}
+function getVideoStreamUrl(playbackId) {
+  return `${MUX_STREAM_BASE}/${playbackId}.m3u8`;
+}
+function getVideoMp4Url(playbackId, resolution = "high") {
+  return `${MUX_STREAM_BASE}/${playbackId}/${resolution}.mp4`;
+}
+
+// src/ui/Video/index.tsx
+function resolvePlaybackId(video) {
+  var _a;
+  if (typeof video === "string") return video;
+  return (_a = video.muxPlaybackId) != null ? _a : null;
+}
+function resolveTitle(props) {
+  var _a;
+  if (props.title !== void 0) return props.title;
+  if (typeof props.video !== "string") return (_a = props.video.title) != null ? _a : void 0;
+  return void 0;
+}
+function resolvePoster(props) {
+  var _a;
+  if (props.poster) return props.poster;
+  if (typeof props.video !== "string" && props.video.thumbnail) {
+    const thumb = props.video.thumbnail;
+    if (typeof thumb === "object" && thumb !== null && "url" in thumb) {
+      const url = thumb.url;
+      if (url) return url;
+    }
+  }
+  const playbackId = resolvePlaybackId(props.video);
+  if (!playbackId) return void 0;
+  return getVideoThumbnail(playbackId, {
+    width: 1280,
+    time: (_a = props.thumbnailTime) != null ? _a : 0
+  });
+}
+function resolveAspectRatio(video) {
+  var _a;
+  if (typeof video === "string") return void 0;
+  return (_a = video.aspectRatio) != null ? _a : void 0;
+}
+function resolveStatus(video) {
+  var _a;
+  if (typeof video === "string") return "ready";
+  return (_a = video.status) != null ? _a : "waiting";
+}
+var VideoPlayer = (0, import_react.forwardRef)(
+  function VideoPlayer2(props, ref) {
+    const {
+      video,
+      accentColor,
+      primaryColor,
+      secondaryColor,
+      autoPlay,
+      loop,
+      muted,
+      preload = "metadata",
+      startTime,
+      streamType = "on-demand",
+      audio,
+      noHotKeys,
+      maxResolution,
+      placeholder,
+      placeholderClassName,
+      placeholderStyle,
+      className,
+      style,
+      onPlay,
+      onPause,
+      onEnded,
+      onTimeUpdate,
+      onLoadedData,
+      onError,
+      playerProps
+    } = props;
+    const playbackId = resolvePlaybackId(video);
+    const title = resolveTitle(props);
+    const poster = resolvePoster(props);
+    const aspectRatio = resolveAspectRatio(video);
+    const status = resolveStatus(video);
+    if (!playbackId || typeof video !== "string" && status !== "ready") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: placeholderClassName != null ? placeholderClassName : className,
+          style: __spreadValues({
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            aspectRatio: aspectRatio != null ? aspectRatio : "16/9",
+            backgroundColor: "#000",
+            color: "#888",
+            fontSize: 14,
+            width: "100%"
+          }, placeholderStyle)
+        },
+        placeholder != null ? placeholder : status === "preparing" ? "Video is processing..." : status === "errored" ? "Video processing failed" : "Video not available"
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_mux_player_react.default,
+      __spreadValues({
+        ref,
+        playbackId,
+        streamType,
+        accentColor,
+        primaryColor,
+        secondaryColor,
+        title,
+        autoPlay,
+        loop,
+        muted,
+        preload,
+        startTime,
+        poster,
+        audio,
+        nohotkeys: noHotKeys,
+        maxResolution,
+        className,
+        style: __spreadValues({
+          aspectRatio: aspectRatio != null ? aspectRatio : "16/9",
+          width: "100%"
+        }, style),
+        onPlay,
+        onPause,
+        onEnded,
+        onTimeUpdate,
+        onLoadedData,
+        onError
+      }, playerProps)
+    );
+  }
+);
+//# sourceMappingURL=video.cjs.map

package/dist/ui/video.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/Video/index.tsx","../../src/utils/video.ts"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, type CSSProperties } from 'react'\nimport MuxPlayer from '@mux/mux-player-react'\nimport type {\n  MuxPlayerRefAttributes,\n  MuxPlayerProps,\n} from '@mux/mux-player-react'\nimport type { Video, Image } from '../../payload-types'\nimport { getVideoThumbnail } from '../../utils/video'\n\n// Re-export video utilities for convenience\nexport {\n  getVideoThumbnail,\n  getVideoGif,\n  getVideoStreamUrl,\n  getVideoMp4Url,\n  getVideoStoryboard,\n  type VideoThumbnailOptions,\n  type VideoGifOptions,\n} from '../../utils/video'\n\n// ── CSS custom properties ──\n\nexport interface VideoPlayerCSSProperties extends CSSProperties {\n  [key: `--${string}`]: string | undefined\n}\n\n// ── Props ──\n\nexport interface VideoPlayerProps {\n  /** Video document or playbackId string */\n  video: Video | string\n\n  // ── Theming ──\n  /** Theme accent color */\n  accentColor?: string\n  /** Theme primary color (controls) */\n  primaryColor?: string\n  /** Theme secondary color (time display, etc.) */\n  secondaryColor?: string\n\n  // ── Playback ──\n  /** Title overlay (auto-resolved from Video.title if omitted) */\n  title?: string\n  /** Autoplay behavior */\n  autoPlay?: boolean | 'muted' | 'any'\n  /** Loop playback */\n  loop?: boolean\n  /** Muted by default */\n  muted?: boolean\n  /** Preload strategy (default: 'metadata') */\n  preload?: 'auto' | 'metadata' | 'none'\n  /** Start time in seconds */\n  startTime?: number\n  /** Stream type (default: 'on-demand') */\n  streamType?: 'on-demand' | 'live' | 'll-live'\n  /** Audio-only mode */\n  audio?: boolean\n  /** Disable keyboard shortcuts */\n  noHotKeys?: boolean\n  /** Max resolution cap */\n  maxResolution?: '720p' | '1080p' | '1440p' | '2160p'\n\n  // ── Poster ──\n  /** Thumbnail time for auto-generated poster (default: 0) */\n  thumbnailTime?: number\n  /** Custom poster URL (overrides auto-generated thumbnail) */\n  poster?: string\n\n  // ── Placeholder (when video not ready) ──\n  /** Placeholder text when video is not ready */\n  placeholder?: string\n  /** CSS class for the placeholder */\n  placeholderClassName?: string\n  /** Inline styles for the placeholder */\n  placeholderStyle?: CSSProperties\n\n  // ── Styling ──\n  /** CSS class */\n  className?: string\n  /** Inline styles (supports --mux CSS custom properties) */\n  style?: VideoPlayerCSSProperties\n\n  // ── Events ──\n  onPlay?: () => void\n  onPause?: () => void\n  onEnded?: () => void\n  onTimeUpdate?: () => void\n  onLoadedData?: () => void\n  onError?: () => void\n\n  // ── Escape hatch ──\n  /** Extra props forwarded directly to MuxPlayer */\n  playerProps?: Omit<\n    MuxPlayerProps,\n    | 'playbackId'\n    | 'streamType'\n    | 'accentColor'\n    | 'primaryColor'\n    | 'secondaryColor'\n    | 'title'\n    | 'autoPlay'\n    | 'loop'\n    | 'muted'\n    | 'preload'\n    | 'startTime'\n    | 'poster'\n    | 'audio'\n    | 'nohotkeys'\n    | 'maxResolution'\n    | 'className'\n    | 'style'\n  >\n}\n\n// ── Helpers ──\n\nfunction resolvePlaybackId(video: Video | string): string | null {\n  if (typeof video === 'string') return video\n  return video.muxPlaybackId ?? null\n}\n\nfunction resolveTitle(props: VideoPlayerProps): string | undefined {\n  if (props.title !== undefined) return props.title\n  if (typeof props.video !== 'string') return props.video.title ?? undefined\n  return undefined\n}\n\nfunction resolvePoster(props: VideoPlayerProps): string | undefined {\n  // 1. Explicit poster URL (highest priority)\n  if (props.poster) return props.poster\n\n  // 2. Video.thumbnail uploaded image\n  if (typeof props.video !== 'string' && props.video.thumbnail) {\n    const thumb = props.video.thumbnail\n    if (typeof thumb === 'object' && thumb !== null && 'url' in thumb) {\n      const url = (thumb as Image).url\n      if (url) return url\n    }\n  }\n\n  // 3. Auto-generate from Mux image API\n  const playbackId = resolvePlaybackId(props.video)\n  if (!playbackId) return undefined\n  return getVideoThumbnail(playbackId, {\n    width: 1280,\n    time: props.thumbnailTime ?? 0,\n  })\n}\n\nfunction resolveAspectRatio(video: Video | string): string | undefined {\n  if (typeof video === 'string') return undefined\n  return video.aspectRatio ?? undefined\n}\n\nfunction resolveStatus(video: Video | string): string {\n  if (typeof video === 'string') return 'ready'\n  return video.status ?? 'waiting'\n}\n\n// ── Component ──\n\n/**\n * Mux video player component.\n * Requires `@mux/mux-player-react` (optional peer dependency).\n *\n * @example Basic usage\n * ```tsx\n * import { VideoPlayer } from '@01.software/sdk/ui/video'\n *\n * <VideoPlayer video={videoDoc} />\n * ```\n *\n * @example With playback ID string\n * ```tsx\n * <VideoPlayer video=\"abc123def\" autoPlay=\"muted\" loop />\n * ```\n *\n * @example Custom theming with CSS custom properties\n * ```tsx\n * <VideoPlayer\n *   video={videoDoc}\n *   accentColor=\"#f43f5e\"\n *   primaryColor=\"#fff\"\n *   className=\"rounded-lg overflow-hidden\"\n *   style={{ '--controls-backdrop-color': 'rgba(0,0,0,0.6)' }}\n * />\n * ```\n *\n * @example Audio-only mode\n * ```tsx\n * <VideoPlayer video={videoDoc} audio />\n * ```\n */\nexport const VideoPlayer: React.ForwardRefExoticComponent<\n  VideoPlayerProps & React.RefAttributes<MuxPlayerRefAttributes>\n> = forwardRef<MuxPlayerRefAttributes, VideoPlayerProps>(\n  function VideoPlayer(props, ref) {\n    const {\n      video,\n      accentColor,\n      primaryColor,\n      secondaryColor,\n      autoPlay,\n      loop,\n      muted,\n      preload = 'metadata',\n      startTime,\n      streamType = 'on-demand',\n      audio,\n      noHotKeys,\n      maxResolution,\n      placeholder,\n      placeholderClassName,\n      placeholderStyle,\n      className,\n      style,\n      onPlay,\n      onPause,\n      onEnded,\n      onTimeUpdate,\n      onLoadedData,\n      onError,\n      playerProps,\n    } = props\n\n    const playbackId = resolvePlaybackId(video)\n    const title = resolveTitle(props)\n    const poster = resolvePoster(props)\n    const aspectRatio = resolveAspectRatio(video)\n    const status = resolveStatus(video)\n\n    // Show placeholder when no playbackId or video not ready\n    if (!playbackId || (typeof video !== 'string' && status !== 'ready')) {\n      return (\n        <div\n          className={placeholderClassName ?? className}\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            aspectRatio: aspectRatio ?? '16/9',\n            backgroundColor: '#000',\n            color: '#888',\n            fontSize: 14,\n            width: '100%',\n            ...placeholderStyle,\n          }}\n        >\n          {placeholder ??\n            (status === 'preparing'\n              ? 'Video is processing...'\n              : status === 'errored'\n                ? 'Video processing failed'\n                : 'Video not available')}\n        </div>\n      )\n    }\n\n    return (\n      <MuxPlayer\n        ref={ref}\n        playbackId={playbackId}\n        streamType={streamType}\n        accentColor={accentColor}\n        primaryColor={primaryColor}\n        secondaryColor={secondaryColor}\n        title={title}\n        autoPlay={autoPlay}\n        loop={loop}\n        muted={muted}\n        preload={preload}\n        startTime={startTime}\n        poster={poster}\n        audio={audio}\n        nohotkeys={noHotKeys}\n        maxResolution={maxResolution}\n        className={className}\n        style={{\n          aspectRatio: aspectRatio ?? '16/9',\n          width: '100%',\n          ...style,\n        }}\n        onPlay={onPlay}\n        onPause={onPause}\n        onEnded={onEnded}\n        onTimeUpdate={onTimeUpdate}\n        onLoadedData={onLoadedData}\n        onError={onError}\n        {...playerProps}\n      />\n    )\n  },\n)\n\n// ── Type Exports ──\n\nexport type { MuxPlayerRefAttributes as VideoPlayerRef } from '@mux/mux-player-react'\nexport type { Video as VideoData } from '../../payload-types'\n","const MUX_IMAGE_BASE = 'https://image.mux.com'\nconst MUX_STREAM_BASE = 'https://stream.mux.com'\n\n// ── Thumbnail ──\n\nexport interface VideoThumbnailOptions {\n  /** Width in pixels (default: 640) */\n  width?: number\n  /** Height in pixels (auto if omitted) */\n  height?: number\n  /** Time offset in seconds (default: 0) */\n  time?: number\n  /** Fit mode (default: 'smartcrop') */\n  fitMode?: 'preserve' | 'stretch' | 'crop' | 'smartcrop' | 'pad'\n  /** Flip horizontally */\n  flipH?: boolean\n  /** Flip vertically */\n  flipV?: boolean\n  /** Rotation in degrees (90, 180, 270) */\n  rotate?: 90 | 180 | 270\n}\n\n/**\n * Returns a Mux thumbnail URL for a video.\n *\n * @example\n * ```ts\n * getVideoThumbnail('abc123')\n * // => 'https://image.mux.com/abc123/thumbnail.jpg?width=640'\n *\n * getVideoThumbnail('abc123', { width: 320, time: 5 })\n * // => 'https://image.mux.com/abc123/thumbnail.jpg?width=320&time=5'\n * ```\n */\nexport function getVideoThumbnail(\n  playbackId: string,\n  options?: VideoThumbnailOptions,\n): string {\n  const params = new URLSearchParams()\n  params.set('width', String(options?.width ?? 640))\n  if (options?.height) params.set('height', String(options.height))\n  if (options?.time != null) params.set('time', String(options.time))\n  if (options?.fitMode) params.set('fit_mode', options.fitMode)\n  if (options?.flipH) params.set('flip_h', 'true')\n  if (options?.flipV) params.set('flip_v', 'true')\n  if (options?.rotate) params.set('rotate', String(options.rotate))\n  return `${MUX_IMAGE_BASE}/${playbackId}/thumbnail.jpg?${params}`\n}\n\n// ── Animated GIF ──\n\nexport interface VideoGifOptions {\n  /** Width in pixels (default: 320) */\n  width?: number\n  /** Start time in seconds (default: 0) */\n  start?: number\n  /** End time in seconds (default: start + 5) */\n  end?: number\n  /** Frames per second (default: 15) */\n  fps?: number\n}\n\n/**\n * Returns a Mux animated GIF URL for a video.\n *\n * @example\n * ```ts\n * getVideoGif('abc123')\n * // => 'https://image.mux.com/abc123/animated.gif?width=320'\n *\n * getVideoGif('abc123', { width: 240, start: 2, end: 6 })\n * // => 'https://image.mux.com/abc123/animated.gif?width=240&start=2&end=6'\n * ```\n */\nexport function getVideoGif(\n  playbackId: string,\n  options?: VideoGifOptions,\n): string {\n  const params = new URLSearchParams()\n  params.set('width', String(options?.width ?? 320))\n  if (options?.start != null) params.set('start', String(options.start))\n  if (options?.end != null) params.set('end', String(options.end))\n  if (options?.fps) params.set('fps', String(options.fps))\n  return `${MUX_IMAGE_BASE}/${playbackId}/animated.gif?${params}`\n}\n\n// ── Storyboard ──\n\n/**\n * Returns a Mux storyboard VTT URL for timeline hover previews.\n *\n * @example\n * ```ts\n * getVideoStoryboard('abc123')\n * // => 'https://image.mux.com/abc123/storyboard.vtt'\n * ```\n */\nexport function getVideoStoryboard(playbackId: string): string {\n  return `${MUX_IMAGE_BASE}/${playbackId}/storyboard.vtt`\n}\n\n// ── Stream / Playback URLs ──\n\n/**\n * Returns the HLS stream URL for a video.\n *\n * @example\n * ```ts\n * getVideoStreamUrl('abc123')\n * // => 'https://stream.mux.com/abc123.m3u8'\n * ```\n */\nexport function getVideoStreamUrl(playbackId: string): string {\n  return `${MUX_STREAM_BASE}/${playbackId}.m3u8`\n}\n\n/**\n * Returns a Mux MP4 download URL for a video.\n * Only available if the asset was created with `mp4_support` enabled.\n *\n * @example\n * ```ts\n * getVideoMp4Url('abc123', 'high')\n * // => 'https://stream.mux.com/abc123/high.mp4'\n * ```\n */\nexport function getVideoMp4Url(\n  playbackId: string,\n  resolution: 'high' | 'medium' | 'low' = 'high',\n): string {\n  return `${MUX_STREAM_BASE}/${playbackId}/${resolution}.mp4`\n}\n"],"mappings":"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","names":["VideoPlayer","React","MuxPlayer"]}

package/dist/ui/video.d.cts

@@ -0,0 +1,96 @@
+import React, { CSSProperties } from 'react';
+import { MuxPlayerProps, MuxPlayerRefAttributes } from '@mux/mux-player-react';
+export { MuxPlayerRefAttributes as VideoPlayerRef } from '@mux/mux-player-react';
+import { V as Video } from '../payload-types-CZiaL4Wr.cjs';
+export { e as VideoGifOptions, V as VideoThumbnailOptions, a as getVideoGif, c as getVideoMp4Url, d as getVideoStoryboard, b as getVideoStreamUrl, g as getVideoThumbnail } from '../video-DbLL8yuc.cjs';
+
+interface VideoPlayerCSSProperties extends CSSProperties {
+    [key: `--${string}`]: string | undefined;
+}
+interface VideoPlayerProps {
+    /** Video document or playbackId string */
+    video: Video | string;
+    /** Theme accent color */
+    accentColor?: string;
+    /** Theme primary color (controls) */
+    primaryColor?: string;
+    /** Theme secondary color (time display, etc.) */
+    secondaryColor?: string;
+    /** Title overlay (auto-resolved from Video.title if omitted) */
+    title?: string;
+    /** Autoplay behavior */
+    autoPlay?: boolean | 'muted' | 'any';
+    /** Loop playback */
+    loop?: boolean;
+    /** Muted by default */
+    muted?: boolean;
+    /** Preload strategy (default: 'metadata') */
+    preload?: 'auto' | 'metadata' | 'none';
+    /** Start time in seconds */
+    startTime?: number;
+    /** Stream type (default: 'on-demand') */
+    streamType?: 'on-demand' | 'live' | 'll-live';
+    /** Audio-only mode */
+    audio?: boolean;
+    /** Disable keyboard shortcuts */
+    noHotKeys?: boolean;
+    /** Max resolution cap */
+    maxResolution?: '720p' | '1080p' | '1440p' | '2160p';
+    /** Thumbnail time for auto-generated poster (default: 0) */
+    thumbnailTime?: number;
+    /** Custom poster URL (overrides auto-generated thumbnail) */
+    poster?: string;
+    /** Placeholder text when video is not ready */
+    placeholder?: string;
+    /** CSS class for the placeholder */
+    placeholderClassName?: string;
+    /** Inline styles for the placeholder */
+    placeholderStyle?: CSSProperties;
+    /** CSS class */
+    className?: string;
+    /** Inline styles (supports --mux CSS custom properties) */
+    style?: VideoPlayerCSSProperties;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: () => void;
+    onLoadedData?: () => void;
+    onError?: () => void;
+    /** Extra props forwarded directly to MuxPlayer */
+    playerProps?: Omit<MuxPlayerProps, 'playbackId' | 'streamType' | 'accentColor' | 'primaryColor' | 'secondaryColor' | 'title' | 'autoPlay' | 'loop' | 'muted' | 'preload' | 'startTime' | 'poster' | 'audio' | 'nohotkeys' | 'maxResolution' | 'className' | 'style'>;
+}
+/**
+ * Mux video player component.
+ * Requires `@mux/mux-player-react` (optional peer dependency).
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { VideoPlayer } from '@01.software/sdk/ui/video'
+ *
+ * <VideoPlayer video={videoDoc} />
+ * ```
+ *
+ * @example With playback ID string
+ * ```tsx
+ * <VideoPlayer video="abc123def" autoPlay="muted" loop />
+ * ```
+ *
+ * @example Custom theming with CSS custom properties
+ * ```tsx
+ * <VideoPlayer
+ *   video={videoDoc}
+ *   accentColor="#f43f5e"
+ *   primaryColor="#fff"
+ *   className="rounded-lg overflow-hidden"
+ *   style={{ '--controls-backdrop-color': 'rgba(0,0,0,0.6)' }}
+ * />
+ * ```
+ *
+ * @example Audio-only mode
+ * ```tsx
+ * <VideoPlayer video={videoDoc} audio />
+ * ```
+ */
+declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<MuxPlayerRefAttributes>>;
+
+export { Video as VideoData, VideoPlayer, type VideoPlayerCSSProperties, type VideoPlayerProps };