@ovalbee/flow-viewer 0.0.1

package/README.md

@@ -0,0 +1,16 @@
+# @ovalbee/flow-viewer
+
+Read-only Vue components for displaying OvalBee workflow graphs.
+
+## Components
+
+- `FlowPreview` renders a lightweight SVG preview suitable for cards.
+- `FlowViewer` renders an interactive graph with pan, zoom, controls, and a minimap.
+
+Import the package styles once through the package entrypoint:
+
+```ts
+import { FlowPreview, FlowViewer } from '@ovalbee/flow-viewer';
+```
+
+Vue and the `@vue-flow` packages are peer dependencies.

package/dist/FlowPreview.vue.d.ts

@@ -0,0 +1,12 @@
+import { Component } from 'vue';
+import { FlowPreviewDocument } from './types';
+type __VLS_Props = {
+    preview: FlowPreviewDocument | null;
+    icons?: Record<string, Component>;
+    iconUrl?: (name: string) => string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icons: Record<string, Component>;
+    iconUrl: (name: string) => string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/FlowViewer.vue.d.ts

@@ -0,0 +1,21 @@
+import { FlowViewerDocument } from './types';
+type __VLS_Props = {
+    document: FlowViewerDocument;
+    fitViewOnInit?: boolean;
+    showControls?: boolean;
+    showMiniMap?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    initialZoom?: number;
+    theme?: 'light' | 'dark';
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fitViewOnInit: boolean;
+    showControls: boolean;
+    showMiniMap: boolean;
+    minZoom: number;
+    maxZoom: number;
+    initialZoom: number;
+    theme: "light" | "dark";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/FlowViewerNode.vue.d.ts

@@ -0,0 +1,8 @@
+import { NodeProps } from '@vue-flow/core';
+import { FlowViewerCatalogNode } from './types';
+type FlowViewerNodeData = FlowViewerCatalogNode & {
+    connectedHandles: Set<string>;
+};
+type __VLS_Props = NodeProps<FlowViewerNodeData>;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/FlowViewerNote.vue.d.ts

@@ -0,0 +1,5 @@
+import { NodeProps } from '@vue-flow/core';
+import { FlowViewerNote } from './types';
+type __VLS_Props = NodeProps<FlowViewerNote>;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/flow-viewer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("@vue-flow/core"),I=require("@vue-flow/controls"),L=require("@vue-flow/minimap"),z=Symbol("flow-viewer-details"),O=["aria-label"],A={class:"ob-flow-viewer-node__header"},R=["innerHTML"],X={key:1},Z={class:"ob-flow-viewer-node__title-wrap"},Y={class:"ob-flow-viewer-node__title"},W={class:"ob-flow-viewer-node__key"},U={class:"ob-flow-viewer-node__description ob-flow-viewer-node__description--clamped"},G={key:1,class:"ob-flow-viewer-node__widget-image","aria-hidden":"true"},q=e.defineComponent({__name:"FlowViewerNode",props:{id:{},type:{},selected:{type:Boolean},connectable:{type:[Boolean,Number,String,Function]},position:{},dimensions:{},label:{},isValidTargetPos:{type:Function},isValidSourcePos:{type:Function},parent:{},parentNodeId:{},dragging:{type:Boolean},resizing:{type:Boolean},zIndex:{},targetPosition:{},sourcePosition:{},dragHandle:{},data:{},events:{}},setup(n){const d=n,v=e.inject(z),x=d.data.available?d.data.description:"This node template is unavailable.";return(r,c)=>{var m,f;return e.openBlock(),e.createElementBlock("article",{class:e.normalizeClass(["ob-flow-viewer-node",{"ob-flow-viewer-node--unavailable":!n.data.available}]),tabindex:"0","aria-label":`${n.data.name} node`,onMouseenter:c[0]||(c[0]=o=>{var i;return(i=e.unref(v))==null?void 0:i.show(n.data,o)}),onMouseleave:c[1]||(c[1]=o=>{var i;return(i=e.unref(v))==null?void 0:i.hide()}),onClick:c[2]||(c[2]=o=>{var i;return(i=e.unref(v))==null?void 0:i.show(n.data,o)}),onFocus:c[3]||(c[3]=o=>{var i;return(i=e.unref(v))==null?void 0:i.show(n.data,o)}),onBlur:c[4]||(c[4]=o=>{var i;return(i=e.unref(v))==null?void 0:i.hide()})},[e.createElementVNode("header",A,[e.createElementVNode("span",{class:"ob-flow-viewer-node__icon",style:e.normalizeStyle({"--ob-node-icon-color":((m=n.data.icon)==null?void 0:m.color)??"#64748b"}),"aria-hidden":"true"},[(f=n.data.icon)!=null&&f.svg?(e.openBlock(),e.createElementBlock("span",{key:0,class:"ob-flow-viewer-node__icon-svg",innerHTML:n.data.icon.svg},null,8,R)):(e.openBlock(),e.createElementBlock("span",X,e.toDisplayString(n.data.available?n.data.name.slice(0,1).toUpperCase():"?"),1))],4),e.createElementVNode("span",Z,[e.createElementVNode("strong",Y,e.toDisplayString(n.data.name),1),e.createElementVNode("span",W,e.toDisplayString(n.data.key),1)])]),e.createElementVNode("p",U,e.toDisplayString(e.unref(x)),1),n.data.widgetPreview&&n.data.available?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["ob-flow-viewer-node__widget",`ob-flow-viewer-node__widget--${n.data.widgetPreview}`]),"aria-label":"Widget preview"},[n.data.widgetPreview==="button"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[c[5]||(c[5]=e.createElementVNode("span",{class:"ob-flow-viewer-node__widget-icon"},"↗",-1)),c[6]||(c[6]=e.createElementVNode("span",{class:"ob-flow-viewer-node__widget-label"},null,-1))],64)):n.data.widgetPreview==="dataset"?(e.openBlock(),e.createElementBlock("span",G)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[c[7]||(c[7]=e.createElementVNode("span",null,null,-1)),c[8]||(c[8]=e.createElementVNode("span",null,null,-1))],64))],2)):e.createCommentVNode("",!0),n.data.connectedHandles.has("target")?(e.openBlock(),e.createBlock(e.unref(g.Handle),{key:1,type:"target",position:e.unref(g.Position).Top},null,8,["position"])):e.createCommentVNode("",!0),n.data.connectedHandles.has("left")?(e.openBlock(),e.createBlock(e.unref(g.Handle),{key:2,id:"left",type:"target",position:e.unref(g.Position).Left},null,8,["position"])):e.createCommentVNode("",!0),n.data.connectedHandles.has("right")?(e.openBlock(),e.createBlock(e.unref(g.Handle),{key:3,id:"right",type:"target",position:e.unref(g.Position).Right},null,8,["position"])):e.createCommentVNode("",!0),n.data.connectedHandles.has("source")?(e.openBlock(),e.createBlock(e.unref(g.Handle),{key:4,type:"source",position:e.unref(g.Position).Bottom},null,8,["position"])):e.createCommentVNode("",!0),n.data.connectedHandles.has("left-source")?(e.openBlock(),e.createBlock(e.unref(g.Handle),{key:5,id:"left-source",type:"source",position:e.unref(g.Position).Left},null,8,["position"])):e.createCommentVNode("",!0),n.data.connectedHandles.has("right-source")?(e.openBlock(),e.createBlock(e.unref(g.Handle),{key:6,id:"right-source",type:"source",position:e.unref(g.Position).Right},null,8,["position"])):e.createCommentVNode("",!0)],42,O)}}}),j=e.defineComponent({__name:"FlowViewerNote",props:{id:{},type:{},selected:{type:Boolean},connectable:{type:[Boolean,Number,String,Function]},position:{},dimensions:{},label:{},isValidTargetPos:{type:Function},isValidSourcePos:{type:Function},parent:{},parentNodeId:{},dragging:{type:Boolean},resizing:{type:Boolean},zIndex:{},targetPosition:{},sourcePosition:{},dragHandle:{},data:{},events:{}},setup(n){const d=n,v=e.computed(()=>({width:`${d.data.appearance.width}px`,minHeight:d.data.appearance.height?`${d.data.appearance.height}px`:void 0}));return(x,r)=>(e.openBlock(),e.createElementBlock("article",{class:e.normalizeClass(["ob-flow-viewer-note",`ob-flow-viewer-note--${n.data.appearance.color}`]),style:e.normalizeStyle(v.value)},e.toDisplayString(n.data.content),7))}}),K=["data-theme"],J=["data-theme"],Q={class:"ob-flow-viewer-tooltip__header"},ee=["innerHTML"],te={key:1},oe={class:"ob-flow-viewer-tooltip__title-wrap"},ne={class:"ob-flow-viewer-tooltip__body"},ie={key:0,class:"ob-flow-viewer-tooltip__unavailable"},ae={key:1,class:"ob-flow-viewer-tooltip__description"},le={key:2,class:"ob-flow-viewer-node__ports"},se={class:"ob-flow-viewer-node__port-group"},ce={key:0,class:"ob-flow-viewer-node__empty"},re={key:0},de={class:"ob-flow-viewer-node__port-group ob-flow-viewer-node__port-group--outputs"},ue={key:0,class:"ob-flow-viewer-node__empty"},me={key:0},S=72,P=64,pe=1.45,we=e.defineComponent({__name:"FlowViewer",props:{document:{},fitViewOnInit:{type:Boolean,default:!1},showControls:{type:Boolean,default:!0},showMiniMap:{type:Boolean,default:!0},minZoom:{default:.1},maxZoom:{default:2},initialZoom:{default:.8},theme:{default:"light"}},setup(n){const d=n,v={catalog:e.markRaw(q),note:e.markRaw(j)};function x(t){if(t.kind==="note")return t.appearance.height??130;const a=t.description?Math.min(2,Math.max(1,Math.ceil(t.description.length/34))):t.available?0:1,u=a>0?10+a*19.5:0,h=t.available&&t.widgetPreview?10+(t.widgetPreview==="dataset"?72:32):0;return 60+u+h}const r=e.ref(null);let c=null;function m(){c!==null&&(clearTimeout(c),c=null)}function f(){m(),c=setTimeout(()=>{r.value=null,c=null},140)}e.onBeforeUnmount(m);function o(t){const a=new Set;for(const u of d.document.edges)u.source===t&&a.add(u.sourceHandle??"source"),u.target===t&&a.add(u.targetHandle??"target");return a}function i(t,a){m();const u=a.currentTarget;if(!(u instanceof HTMLElement))return;const h=u.getBoundingClientRect(),l=12,s=Math.min(404,window.innerWidth-l*2),y=Math.min(520,window.innerHeight-l*2);let w=h.right+l+s/2;w+s/2>window.innerWidth-l&&(w=h.left-l-s/2),w=Math.max(s/2+l,Math.min(w,window.innerWidth-s/2-l)),r.value={node:t,x:w,y:Math.max(l,Math.min(h.top,window.innerHeight-y-l))}}function p(){f()}e.provide(z,{show:i,hide:p});const k=e.computed(()=>{const t=new Map(d.document.nodes.map(s=>[s.id,{...s.position}])),a=Math.min(...d.document.nodes.map(s=>s.position.x)),u=Math.max(...d.document.nodes.map(s=>s.position.x)),h=(a+u)/2;for(const s of t.values())s.x=h+(s.x-h)*pe;for(let s=0;s<d.document.nodes.length;s+=1)for(const y of d.document.edges){if(y.sourceHandle||y.targetHandle)continue;const w=t.get(y.source),B=t.get(y.target);if(!(!w||!B||Math.abs(w.x-B.x)>=40)&&(B.x=w.x,B.y>w.y)){const E=d.document.nodes.find($=>$.id===y.source);E&&(B.y=Math.max(B.y,w.y+x(E)+S))}}const l=[...d.document.nodes].sort((s,y)=>s.position.y-y.position.y||s.position.x-y.position.x);for(const[s,y]of l.entries()){const w=t.get(y.id);if(w)for(const B of l.slice(0,s)){const E=t.get(B.id);if(!E)continue;const $=y.kind==="note"?y.appearance.width:260,D=B.kind==="note"?B.appearance.width:260;w.x>=E.x+D+P||E.x>=w.x+$+P||(w.y=Math.max(w.y,E.y+x(B)+S))}}return t}),b=e.computed(()=>d.document.nodes.map(t=>{const a=k.value.get(t.id)??t.position;return t.kind==="note"?{id:t.id,type:"note",position:a,data:t,style:{width:`${t.appearance.width}px`,height:t.appearance.height?`${t.appearance.height}px`:void 0}}:{id:t.id,type:"catalog",position:a,data:{...t,connectedHandles:o(t.id)},selectable:!1}})),_=e.computed(()=>d.document.edges.map((t,a)=>({id:`viewer-edge-${a}-${t.source}-${t.target}`,source:t.source,target:t.target,sourceHandle:t.sourceHandle,targetHandle:t.targetHandle,type:g.ConnectionLineType.SmoothStep,data:t.data,style:t.isVisual?{strokeDasharray:"6 4"}:void 0,selectable:!1}))),F=e.computed(()=>{if(d.document.nodes.length===0)return{minX:0,minY:0,maxX:0,maxY:0};let t=1/0,a=1/0,u=-1/0,h=-1/0;for(const l of d.document.nodes){const s=k.value.get(l.id)??l.position,y=l.kind==="note"?l.appearance.width:260,w=x(l);t=Math.min(t,s.x),a=Math.min(a,s.y),u=Math.max(u,s.x+y),h=Math.max(h,s.y+w)}return{minX:t,minY:a,maxX:u,maxY:h}});function T(t){if(d.fitViewOnInit){t.fitView({padding:.15,maxZoom:1});return}const a=F.value,u=d.initialZoom;t.setViewport({x:t.dimensions.value.width/2-(a.minX+a.maxX)/2*u,y:24-a.minY*u,zoom:u})}return(t,a)=>{var u,h;return e.openBlock(),e.createElementBlock("div",{class:"ob-flow-viewer","data-theme":n.theme},[e.createVNode(e.unref(g.VueFlow),{nodes:b.value,edges:_.value,"node-types":v,"fit-view-on-init":!1,"min-zoom":n.minZoom,"max-zoom":n.maxZoom,"nodes-draggable":!1,"nodes-connectable":!1,"elements-selectable":!0,"select-nodes-on-drag":!1,"connect-on-click":!1,"zoom-on-double-click":!1,"delete-key-code":[],"multi-selection-key-code":[],"pan-on-drag":!0,"pan-on-scroll":!0,"zoom-on-scroll":!1,"zoom-on-pinch":!0,class:"ob-flow-viewer__canvas",onPaneReady:T},{default:e.withCtx(()=>[n.showControls?(e.openBlock(),e.createBlock(e.unref(I.Controls),{key:0,"show-interactive":!1})):e.createCommentVNode("",!0),n.showMiniMap?(e.openBlock(),e.createBlock(e.unref(L.MiniMap),{key:1,pannable:!0,zoomable:!0})):e.createCommentVNode("",!0)]),_:1},8,["nodes","edges","min-zoom","max-zoom"]),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[r.value?(e.openBlock(),e.createElementBlock("section",{key:0,class:"ob-flow-viewer-tooltip","data-theme":n.theme,style:e.normalizeStyle({left:`${r.value.x}px`,top:`${r.value.y}px`}),role:"tooltip",tabindex:"0",onMouseenter:m,onMouseleave:p,onFocusin:m,onFocusout:p},[e.createElementVNode("header",Q,[e.createElementVNode("span",{class:"ob-flow-viewer-tooltip__icon",style:e.normalizeStyle({"--ob-node-icon-color":((u=r.value.node.icon)==null?void 0:u.color)??"#64748b"}),"aria-hidden":"true"},[(h=r.value.node.icon)!=null&&h.svg?(e.openBlock(),e.createElementBlock("span",{key:0,class:"ob-flow-viewer-node__icon-svg",innerHTML:r.value.node.icon.svg},null,8,ee)):(e.openBlock(),e.createElementBlock("span",te,e.toDisplayString(r.value.node.available?r.value.node.name.slice(0,1).toUpperCase():"?"),1))],4),e.createElementVNode("span",oe,[e.createElementVNode("strong",null,e.toDisplayString(r.value.node.name),1),e.createElementVNode("code",null,e.toDisplayString(r.value.node.key),1)])]),e.createElementVNode("div",ne,[r.value.node.available?r.value.node.description?(e.openBlock(),e.createElementBlock("p",ae,e.toDisplayString(r.value.node.description),1)):e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",ie," This node template is unavailable. ")),r.value.node.available?(e.openBlock(),e.createElementBlock("div",le,[e.createElementVNode("div",se,[a[0]||(a[0]=e.createElementVNode("span",{class:"ob-flow-viewer-node__port-heading"},"Inputs",-1)),r.value.node.inputs.length===0?(e.openBlock(),e.createElementBlock("span",ce,"None")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value.node.inputs,l=>(e.openBlock(),e.createElementBlock("span",{key:l.key,class:"ob-flow-viewer-node__port"},[e.createElementVNode("span",null,e.toDisplayString(l.name),1),l.description?(e.openBlock(),e.createElementBlock("small",re,e.toDisplayString(l.description),1)):e.createCommentVNode("",!0)]))),128))]),e.createElementVNode("div",de,[a[1]||(a[1]=e.createElementVNode("span",{class:"ob-flow-viewer-node__port-heading"},"Outputs",-1)),r.value.node.outputs.length===0?(e.openBlock(),e.createElementBlock("span",ue,"None")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value.node.outputs,l=>(e.openBlock(),e.createElementBlock("span",{key:l.key,class:"ob-flow-viewer-node__port"},[e.createElementVNode("span",null,e.toDisplayString(l.name),1),l.description?(e.openBlock(),e.createElementBlock("small",me,e.toDisplayString(l.description),1)):e.createCommentVNode("",!0)]))),128))])])):e.createCommentVNode("",!0)])],44,J)):e.createCommentVNode("",!0)]))],8,K)}}}),fe={class:"ob-flow-preview"},ye=["viewBox"],he=["d"],ve=["x","y"],ge=["x","y"],ke=["href","x","y"],Be=["x","y"],xe=["x","y"],N=260,V=100,M=140,be=140,C=48,H=26,_e=e.defineComponent({__name:"FlowPreview",props:{preview:{},icons:{default:()=>({})},iconUrl:{type:Function,default:void 0}},setup(n){const d=n,v=e.computed(()=>{var o,i;const m=((o=d.preview)==null?void 0:o.n)??[],f=new Map(m.map(p=>[p.id,{x:p.x,y:p.y}]));for(let p=0;p<m.length;p+=1)for(const k of((i=d.preview)==null?void 0:i.e)??[]){const b=f.get(k.s),_=f.get(k.t);b&&_&&Math.abs(b.x-_.x)<be&&(_.x=b.x)}return m.map(p=>({...p,...f.get(p.id)??{x:p.x,y:p.y}}))}),x=e.computed(()=>{const m=v.value;if(m.length===0)return"0 0 1 1";let f=1/0,o=1/0,i=-1/0,p=-1/0;for(const k of m)f=Math.min(f,k.x),o=Math.min(o,k.y),i=Math.max(i,k.x+N),p=Math.max(p,k.y+V);return`${f-M} ${o-M} ${i-f+M*2} ${p-o+M*2}`}),r=e.computed(()=>new Map(v.value.map(m=>[m.id,m])));function c(m,f){const o=r.value.get(m),i=r.value.get(f);if(!o||!i)return"";const p=o.x+N/2,k=o.y+V/2,b=i.x+N/2,_=i.y+V/2;return`M ${p} ${k} L ${b} ${_}`}return(m,f)=>(e.openBlock(),e.createElementBlock("div",fe,[n.preview&&n.preview.n.length>0?(e.openBlock(),e.createElementBlock("svg",{key:0,class:"ob-flow-preview__svg",viewBox:x.value,preserveAspectRatio:"xMidYMid meet"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.preview.e,(o,i)=>(e.openBlock(),e.createElementBlock("path",{key:i,d:c(o.s,o.t),class:"ob-flow-preview__edge","vector-effect":"non-scaling-stroke"},null,8,he))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,o=>(e.openBlock(),e.createElementBlock("rect",{key:o.id,x:o.x,y:o.y,width:N,height:V,rx:"16",class:"ob-flow-preview__node","vector-effect":"non-scaling-stroke"},null,8,ve))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,o=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:`content-${o.id}`},[e.createElementVNode("rect",{x:o.x+18,y:o.y+18,width:"64",height:"64",rx:"16",class:"ob-flow-preview__icon-background",style:e.normalizeStyle(o.c?{fill:o.c}:void 0)},null,12,ge),o.i&&n.icons[o.i]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.icons[o.i]),{key:0,x:o.x+H,y:o.y+H,size:C,color:"white","stroke-width":2.5,"aria-hidden":"true"},null,8,["x","y"])):o.i&&n.iconUrl?(e.openBlock(),e.createElementBlock("image",{key:1,href:n.iconUrl(o.i),x:o.x+H,y:o.y+H,width:C,height:C},null,8,ke)):(e.openBlock(),e.createElementBlock("text",{key:2,x:o.x+50,y:o.y+68,fill:"white","font-size":"42","font-family":"sans-serif","text-anchor":"middle"}," * ",8,Be)),e.createElementVNode("rect",{x:o.x+100,y:o.y+45,width:"128",height:"10",rx:"5",class:"ob-flow-preview__line"},null,8,xe)],64))),128))],8,ye)):e.createCommentVNode("",!0)]))}});exports.FlowPreview=_e;exports.FlowViewer=we;

package/dist/flow-viewer.css

@@ -0,0 +1 @@
+.vue-flow{position:relative;width:100%;height:100%;overflow:hidden;z-index:0;direction:ltr}.vue-flow__container{position:absolute;height:100%;width:100%;left:0;top:0}.vue-flow__pane{z-index:1}.vue-flow__pane.draggable{cursor:grab}.vue-flow__pane.selection{cursor:pointer}.vue-flow__pane.dragging{cursor:grabbing}.vue-flow__transformationpane{transform-origin:0 0;z-index:2;pointer-events:none}.vue-flow__viewport{z-index:4;overflow:clip}.vue-flow__selection{z-index:6}.vue-flow__edge-labels{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible{outline:none}.vue-flow .vue-flow__edges{pointer-events:none;overflow:visible}.vue-flow__edge-path,.vue-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.vue-flow__edge{pointer-events:visibleStroke;cursor:pointer}.vue-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__edge.animated path.vue-flow__edge-interaction{stroke-dasharray:none;animation:none}.vue-flow__edge.inactive{pointer-events:none}.vue-flow__edge.selected,.vue-flow__edge:focus,.vue-flow__edge:focus-visible{outline:none}.vue-flow__edge.selected .vue-flow__edge-path,.vue-flow__edge:focus .vue-flow__edge-path,.vue-flow__edge:focus-visible .vue-flow__edge-path{stroke:#555}.vue-flow__edge-textwrapper{pointer-events:all}.vue-flow__edge-textbg{fill:#fff}.vue-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__connection{pointer-events:none}.vue-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__connectionline{z-index:1001}.vue-flow__nodes{pointer-events:none;transform-origin:0 0}.vue-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.vue-flow__node.draggable{cursor:grab;pointer-events:all}.vue-flow__node.draggable.dragging{cursor:grabbing}.vue-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.vue-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.vue-flow__nodesselection-rect.dragging{cursor:grabbing}.vue-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px}.vue-flow__handle.connectable{pointer-events:all;cursor:crosshair}.vue-flow__handle-bottom{left:50%;bottom:0;transform:translate(-50%,50%)}.vue-flow__handle-top{left:50%;top:0;transform:translate(-50%,-50%)}.vue-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.vue-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.vue-flow__edgeupdater{cursor:move;pointer-events:all}.vue-flow__panel{position:absolute;z-index:5;margin:15px}.vue-flow__panel.top{top:0}.vue-flow__panel.bottom{bottom:0}.vue-flow__panel.left{left:0}.vue-flow__panel.right{right:0}.vue-flow__panel.center{left:50%;transform:translate(-50%)}@keyframes dashdraw{0%{stroke-dashoffset:10}}.vue-flow__controls{box-shadow:0 0 2px 1px #00000014}.vue-flow__controls-button{background:#fefefe;border:none;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:5px}.vue-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.vue-flow__controls-button:hover{background:#f4f4f4}.vue-flow__controls-button:disabled{pointer-events:none}.vue-flow__controls-button:disabled svg{fill-opacity:.4}.vue-flow__minimap{background-color:#fff}.vue-flow__minimap.pannable{cursor:grab}.vue-flow__minimap.dragging{cursor:grabbing}.vue-flow__minimap-mask.pannable{cursor:grab}.ob-flow-viewer{--ob-flow-viewer-background: #f8fafc;--ob-flow-viewer-surface: #ffffff;--ob-flow-viewer-surface-muted: #f1f5f9;--ob-flow-viewer-border: #dbe2ea;--ob-flow-viewer-text: #172033;--ob-flow-viewer-text-muted: #64748b;--ob-flow-viewer-edge: #94a3b8}.ob-flow-viewer{position:relative;width:100%;height:100%;min-height:320px;overflow:hidden;color:var(--ob-flow-viewer-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--ob-flow-viewer-background)}.ob-flow-viewer[data-theme=dark]{--ob-flow-viewer-background: #0f172a;--ob-flow-viewer-surface: #172033;--ob-flow-viewer-surface-muted: #263247;--ob-flow-viewer-border: #344258;--ob-flow-viewer-text: #e5e7eb;--ob-flow-viewer-text-muted: #9aa8bc;--ob-flow-viewer-edge: #64748b}.ob-flow-viewer__canvas{width:100%;height:100%;background-color:var(--ob-flow-viewer-background);background-image:radial-gradient(circle,#dce4ee 1px,transparent 1px);background-position:0 0;background-size:15px 15px}.ob-flow-viewer .vue-flow__edge-path{stroke:var(--ob-flow-viewer-edge);stroke-width:1.5}.ob-flow-viewer .vue-flow__node{cursor:default;pointer-events:auto!important}.ob-flow-viewer-node .vue-flow__handle{width:8px;height:8px;pointer-events:none;background:var(--ob-flow-viewer-surface);border:2px solid var(--ob-flow-viewer-edge);border-radius:50%}.ob-flow-viewer .vue-flow__controls,.ob-flow-viewer .vue-flow__minimap{overflow:hidden;border:1px solid var(--ob-flow-viewer-border);border-radius:6px;box-shadow:0 4px 12px #0f172a14}.ob-flow-viewer .vue-flow__controls-button{color:var(--ob-flow-viewer-text);background:var(--ob-flow-viewer-surface);border-color:var(--ob-flow-viewer-border)}.ob-flow-viewer .vue-flow__controls-button svg{max-width:10px;max-height:10px}.ob-flow-viewer .vue-flow__minimap{right:auto;bottom:10px;left:54px;width:160px;height:110px;background:color-mix(in srgb,var(--ob-flow-viewer-surface) 92%,transparent)}.ob-flow-viewer .vue-flow__minimap-node{fill:var(--ob-flow-viewer-edge)}.ob-flow-viewer-node{position:relative;box-sizing:border-box;width:260px;padding:14px;background:var(--ob-flow-viewer-surface);border:1px solid var(--ob-flow-viewer-border);border-radius:12px;box-shadow:0 2px 8px #0f172a14;outline:none;transition:border-color .16s ease,box-shadow .16s ease}.ob-flow-viewer-node:hover,.ob-flow-viewer-node:focus-visible{z-index:5;border-color:var(--ob-flow-viewer-edge);box-shadow:0 6px 16px #0f172a1c}.ob-flow-viewer-node--unavailable{border-style:dashed;opacity:.78}.ob-flow-viewer-node__header{display:flex;gap:9px;align-items:center;min-width:0}.ob-flow-viewer-node__icon{display:grid;flex:0 0 32px;width:32px;height:32px;place-items:center;overflow:hidden;color:#fff;font-size:14px;font-weight:700;background:var(--ob-node-icon-color);border-radius:8px}.ob-flow-viewer-node__icon-svg,.ob-flow-viewer-node__icon-svg svg{display:block;width:17px;height:17px}.ob-flow-viewer-node__icon-svg svg{color:#fff}.ob-flow-viewer-node__title-wrap{display:flex;min-width:0;flex-direction:column;gap:2px}.ob-flow-viewer-node__title,.ob-flow-viewer-node__key{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ob-flow-viewer-node__title{font-size:14px;font-weight:650;line-height:1.3}.ob-flow-viewer-node__key{color:var(--ob-flow-viewer-text-muted);font-size:10.5px;line-height:1.3}.ob-flow-viewer-node__description{margin:10px 0 0;color:var(--ob-flow-viewer-text-muted);font-size:13px;line-height:1.5;white-space:normal}.ob-flow-viewer-node__description--clamped{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ob-flow-viewer-node__widget{display:flex;align-items:center;height:32px;padding:7px;margin-top:10px;background:var(--ob-flow-viewer-surface-muted);border-radius:7px}.ob-flow-viewer-node__widget--button{gap:7px;width:112px}.ob-flow-viewer-node__widget-icon{display:grid;width:18px;height:18px;place-items:center;color:var(--ob-flow-viewer-text-muted);font-size:11px;background:color-mix(in srgb,var(--ob-flow-viewer-text-muted) 12%,transparent);border-radius:5px}.ob-flow-viewer-node__widget-label{width:62px;height:7px;background:color-mix(in srgb,var(--ob-flow-viewer-text-muted) 18%,transparent);border-radius:999px}.ob-flow-viewer-node__widget--dataset{justify-content:center;height:72px}.ob-flow-viewer-node__widget-image{position:relative;width:30px;height:23px;border:2px solid color-mix(in srgb,var(--ob-flow-viewer-text-muted) 40%,transparent);border-radius:5px}.ob-flow-viewer-node__widget-image:before{position:absolute;top:4px;left:5px;width:4px;height:4px;background:color-mix(in srgb,var(--ob-flow-viewer-text-muted) 42%,transparent);border-radius:50%;content:""}.ob-flow-viewer-node__widget-image:after{position:absolute;right:4px;bottom:4px;left:4px;height:8px;background:color-mix(in srgb,var(--ob-flow-viewer-text-muted) 24%,transparent);clip-path:polygon(0 100%,35% 28%,52% 64%,72% 8%,100% 100%);content:""}.ob-flow-viewer-node__widget--lines{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}.ob-flow-viewer-node__widget--lines span{width:82%;height:6px;background:color-mix(in srgb,var(--ob-flow-viewer-text-muted) 18%,transparent);border-radius:999px}.ob-flow-viewer-node__widget--lines span:last-child{width:58%}.ob-flow-viewer-tooltip{--ob-flow-viewer-surface: #ffffff;--ob-flow-viewer-border: #dbe2ea;--ob-flow-viewer-text: #172033;--ob-flow-viewer-text-muted: #64748b;--ob-flow-viewer-surface-muted: hsl(220 16% 98%);position:fixed;z-index:100;box-sizing:border-box;width:min(404px,calc(100% - 24px));max-height:min(520px,calc(100vh - 24px));padding:0;overflow:auto;pointer-events:auto;background:var(--ob-flow-viewer-surface);border:1px solid var(--ob-flow-viewer-border);border-radius:14px;box-shadow:0 14px 36px #0f172a29;transform:translate(-50%);scrollbar-color:color-mix(in srgb,var(--ob-flow-viewer-text-muted) 34%,transparent) transparent;scrollbar-width:thin}.ob-flow-viewer-tooltip::-webkit-scrollbar{width:9px}.ob-flow-viewer-tooltip::-webkit-scrollbar-track,.ob-flow-viewer-tooltip::-webkit-scrollbar-corner{background:transparent}.ob-flow-viewer-tooltip::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ob-flow-viewer-text-muted) 34%,transparent);background-clip:padding-box;border:3px solid transparent;border-radius:999px}.ob-flow-preview{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;padding:6px 6px 0}.ob-flow-preview__svg{width:100%;height:100%}.ob-flow-preview__edge{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-opacity:.15}.ob-flow-preview__node{fill:#fff;stroke:var(--ob-flow-viewer-border, #dbe2ea);stroke-width:1}.ob-flow-preview__icon-background{fill:#eef1f5}.ob-flow-preview__line{fill:var(--ob-flow-viewer-border, #dbe2ea)}[data-theme=dark] .ob-flow-preview__node,.dark .ob-flow-preview__node{fill:#263247}.ob-flow-viewer-tooltip[data-theme=dark]{--ob-flow-viewer-surface: #172033;--ob-flow-viewer-border: #344258;--ob-flow-viewer-text: #e5e7eb;--ob-flow-viewer-text-muted: #9aa8bc;--ob-flow-viewer-surface-muted: #263247}.ob-flow-viewer-tooltip__header{display:flex;gap:10px;align-items:center;min-width:0;padding:14px 16px;border-bottom:1px solid var(--ob-flow-viewer-border)}.ob-flow-viewer-tooltip__body{background:var(--ob-flow-viewer-surface-muted)}.ob-flow-viewer-tooltip__icon{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;overflow:hidden;color:#fff;font-size:14px;font-weight:700;background:var(--ob-node-icon-color);border-radius:9px}.ob-flow-viewer-tooltip__title-wrap{display:flex;min-width:0;flex-direction:column;gap:1px}.ob-flow-viewer-tooltip__title-wrap strong{overflow:hidden;font-size:13px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.ob-flow-viewer-tooltip__title-wrap code{color:var(--ob-flow-viewer-text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;line-height:1.35}.ob-flow-viewer-tooltip__unavailable{margin:0;padding:14px 16px;color:var(--ob-flow-viewer-text-muted);font-size:11px;line-height:1.5}.ob-flow-viewer-tooltip__description{margin:0;padding:14px 16px 0;color:var(--ob-flow-viewer-text-muted);font-size:11px;line-height:1.55}.ob-flow-viewer-node__ports{display:flex;flex-direction:column;gap:14px;padding:14px 16px 16px}.ob-flow-viewer-node__port-group{display:flex;min-width:0;flex-direction:column;gap:9px}.ob-flow-viewer-node__port-group--outputs{padding-top:14px;border-top:1px solid var(--ob-flow-viewer-border)}.ob-flow-viewer-node__port-heading{color:var(--ob-flow-viewer-text);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ob-flow-viewer-node__port{display:grid;grid-template-columns:minmax(116px,.8fr) minmax(0,1.2fr);column-gap:14px;min-width:0;color:var(--ob-flow-viewer-text-muted);font-size:11px}.ob-flow-viewer-node__port>span{grid-row:1;grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ob-flow-viewer-node__port small{display:-webkit-box;grid-row:1 / span 2;grid-column:2;margin:0;overflow:hidden;color:color-mix(in srgb,var(--ob-flow-viewer-text-muted) 82%,transparent);font-size:10px;line-height:1.45;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3}.ob-flow-viewer-node__empty{color:var(--ob-flow-viewer-text-muted);font-size:10px;font-style:italic}.ob-flow-viewer-note{box-sizing:border-box;min-width:140px;padding:14px;color:#334155;font-size:12px;line-height:1.5;white-space:pre-wrap;border:1px solid #e2c56d;border-radius:4px 4px 12px;box-shadow:0 5px 16px #0f172a1a}.ob-flow-viewer-note--yellow{background:#fef3c7;border-color:#f5d56c}.ob-flow-viewer-note--blue{background:#dbeafe;border-color:#93c5fd}.ob-flow-viewer-note--green{background:#dcfce7;border-color:#86efac}.ob-flow-viewer-note--rose{background:#ffe4e6;border-color:#fda4af}.ob-flow-viewer-note--violet{background:#ede9fe;border-color:#c4b5fd}.ob-flow-viewer-note--slate{background:#e2e8f0;border-color:#94a3b8}@media (prefers-reduced-motion: reduce){.ob-flow-viewer-node{transition:none}}

package/dist/flow-viewer.js

@@ -0,0 +1,531 @@
+import { defineComponent as A, inject as J, createElementBlock as i, openBlock as n, unref as f, normalizeClass as Z, createElementVNode as w, createCommentVNode as y, createBlock as H, normalizeStyle as S, toDisplayString as k, Fragment as P, computed as T, markRaw as Y, ref as Q, onBeforeUnmount as ee, provide as te, createVNode as oe, withCtx as ne, Teleport as ie, renderList as F, resolveDynamicComponent as ae } from "vue";
+import { Handle as V, Position as C, ConnectionLineType as se, VueFlow as le } from "@vue-flow/core";
+import { Controls as re } from "@vue-flow/controls";
+import { MiniMap as de } from "@vue-flow/minimap";
+const G = Symbol("flow-viewer-details"), ce = ["aria-label"], ue = { class: "ob-flow-viewer-node__header" }, we = ["innerHTML"], pe = { key: 1 }, he = { class: "ob-flow-viewer-node__title-wrap" }, me = { class: "ob-flow-viewer-node__title" }, fe = { class: "ob-flow-viewer-node__key" }, ve = { class: "ob-flow-viewer-node__description ob-flow-viewer-node__description--clamped" }, ye = {
+  key: 1,
+  class: "ob-flow-viewer-node__widget-image",
+  "aria-hidden": "true"
+}, ge = /* @__PURE__ */ A({
+  __name: "FlowViewerNode",
+  props: {
+    id: {},
+    type: {},
+    selected: { type: Boolean },
+    connectable: { type: [Boolean, Number, String, Function] },
+    position: {},
+    dimensions: {},
+    label: {},
+    isValidTargetPos: { type: Function },
+    isValidSourcePos: { type: Function },
+    parent: {},
+    parentNodeId: {},
+    dragging: { type: Boolean },
+    resizing: { type: Boolean },
+    zIndex: {},
+    targetPosition: {},
+    sourcePosition: {},
+    dragHandle: {},
+    data: {},
+    events: {}
+  },
+  setup(o) {
+    const u = o, _ = J(G), N = u.data.available ? u.data.description : "This node template is unavailable.";
+    return (c, d) => {
+      var h, g;
+      return n(), i("article", {
+        class: Z(["ob-flow-viewer-node", { "ob-flow-viewer-node--unavailable": !o.data.available }]),
+        tabindex: "0",
+        "aria-label": `${o.data.name} node`,
+        onMouseenter: d[0] || (d[0] = (t) => {
+          var a;
+          return (a = f(_)) == null ? void 0 : a.show(o.data, t);
+        }),
+        onMouseleave: d[1] || (d[1] = (t) => {
+          var a;
+          return (a = f(_)) == null ? void 0 : a.hide();
+        }),
+        onClick: d[2] || (d[2] = (t) => {
+          var a;
+          return (a = f(_)) == null ? void 0 : a.show(o.data, t);
+        }),
+        onFocus: d[3] || (d[3] = (t) => {
+          var a;
+          return (a = f(_)) == null ? void 0 : a.show(o.data, t);
+        }),
+        onBlur: d[4] || (d[4] = (t) => {
+          var a;
+          return (a = f(_)) == null ? void 0 : a.hide();
+        })
+      }, [
+        w("header", ue, [
+          w("span", {
+            class: "ob-flow-viewer-node__icon",
+            style: S({ "--ob-node-icon-color": ((h = o.data.icon) == null ? void 0 : h.color) ?? "#64748b" }),
+            "aria-hidden": "true"
+          }, [
+            (g = o.data.icon) != null && g.svg ? (n(), i("span", {
+              key: 0,
+              class: "ob-flow-viewer-node__icon-svg",
+              innerHTML: o.data.icon.svg
+            }, null, 8, we)) : (n(), i("span", pe, k(o.data.available ? o.data.name.slice(0, 1).toUpperCase() : "?"), 1))
+          ], 4),
+          w("span", he, [
+            w("strong", me, k(o.data.name), 1),
+            w("span", fe, k(o.data.key), 1)
+          ])
+        ]),
+        w("p", ve, k(f(N)), 1),
+        o.data.widgetPreview && o.data.available ? (n(), i("div", {
+          key: 0,
+          class: Z(["ob-flow-viewer-node__widget", `ob-flow-viewer-node__widget--${o.data.widgetPreview}`]),
+          "aria-label": "Widget preview"
+        }, [
+          o.data.widgetPreview === "button" ? (n(), i(P, { key: 0 }, [
+            d[5] || (d[5] = w("span", { class: "ob-flow-viewer-node__widget-icon" }, "↗", -1)),
+            d[6] || (d[6] = w("span", { class: "ob-flow-viewer-node__widget-label" }, null, -1))
+          ], 64)) : o.data.widgetPreview === "dataset" ? (n(), i("span", ye)) : (n(), i(P, { key: 2 }, [
+            d[7] || (d[7] = w("span", null, null, -1)),
+            d[8] || (d[8] = w("span", null, null, -1))
+          ], 64))
+        ], 2)) : y("", !0),
+        o.data.connectedHandles.has("target") ? (n(), H(f(V), {
+          key: 1,
+          type: "target",
+          position: f(C).Top
+        }, null, 8, ["position"])) : y("", !0),
+        o.data.connectedHandles.has("left") ? (n(), H(f(V), {
+          key: 2,
+          id: "left",
+          type: "target",
+          position: f(C).Left
+        }, null, 8, ["position"])) : y("", !0),
+        o.data.connectedHandles.has("right") ? (n(), H(f(V), {
+          key: 3,
+          id: "right",
+          type: "target",
+          position: f(C).Right
+        }, null, 8, ["position"])) : y("", !0),
+        o.data.connectedHandles.has("source") ? (n(), H(f(V), {
+          key: 4,
+          type: "source",
+          position: f(C).Bottom
+        }, null, 8, ["position"])) : y("", !0),
+        o.data.connectedHandles.has("left-source") ? (n(), H(f(V), {
+          key: 5,
+          id: "left-source",
+          type: "source",
+          position: f(C).Left
+        }, null, 8, ["position"])) : y("", !0),
+        o.data.connectedHandles.has("right-source") ? (n(), H(f(V), {
+          key: 6,
+          id: "right-source",
+          type: "source",
+          position: f(C).Right
+        }, null, 8, ["position"])) : y("", !0)
+      ], 42, ce);
+    };
+  }
+}), xe = /* @__PURE__ */ A({
+  __name: "FlowViewerNote",
+  props: {
+    id: {},
+    type: {},
+    selected: { type: Boolean },
+    connectable: { type: [Boolean, Number, String, Function] },
+    position: {},
+    dimensions: {},
+    label: {},
+    isValidTargetPos: { type: Function },
+    isValidSourcePos: { type: Function },
+    parent: {},
+    parentNodeId: {},
+    dragging: { type: Boolean },
+    resizing: { type: Boolean },
+    zIndex: {},
+    targetPosition: {},
+    sourcePosition: {},
+    dragHandle: {},
+    data: {},
+    events: {}
+  },
+  setup(o) {
+    const u = o, _ = T(() => ({
+      width: `${u.data.appearance.width}px`,
+      minHeight: u.data.appearance.height ? `${u.data.appearance.height}px` : void 0
+    }));
+    return (N, c) => (n(), i("article", {
+      class: Z(["ob-flow-viewer-note", `ob-flow-viewer-note--${o.data.appearance.color}`]),
+      style: S(_.value)
+    }, k(o.data.content), 7));
+  }
+}), be = ["data-theme"], _e = ["data-theme"], ke = { class: "ob-flow-viewer-tooltip__header" }, Me = ["innerHTML"], $e = { key: 1 }, He = { class: "ob-flow-viewer-tooltip__title-wrap" }, Ne = { class: "ob-flow-viewer-tooltip__body" }, Pe = {
+  key: 0,
+  class: "ob-flow-viewer-tooltip__unavailable"
+}, Te = {
+  key: 1,
+  class: "ob-flow-viewer-tooltip__description"
+}, Ie = {
+  key: 2,
+  class: "ob-flow-viewer-node__ports"
+}, Be = { class: "ob-flow-viewer-node__port-group" }, ze = {
+  key: 0,
+  class: "ob-flow-viewer-node__empty"
+}, Ve = { key: 0 }, Ce = { class: "ob-flow-viewer-node__port-group ob-flow-viewer-node__port-group--outputs" }, Fe = {
+  key: 0,
+  class: "ob-flow-viewer-node__empty"
+}, Se = { key: 0 }, W = 72, U = 64, Le = 1.45, Je = /* @__PURE__ */ A({
+  __name: "FlowViewer",
+  props: {
+    document: {},
+    fitViewOnInit: { type: Boolean, default: !1 },
+    showControls: { type: Boolean, default: !0 },
+    showMiniMap: { type: Boolean, default: !0 },
+    minZoom: { default: 0.1 },
+    maxZoom: { default: 2 },
+    initialZoom: { default: 0.8 },
+    theme: { default: "light" }
+  },
+  setup(o) {
+    const u = o, _ = {
+      catalog: Y(ge),
+      note: Y(xe)
+    };
+    function N(e) {
+      if (e.kind === "note") return e.appearance.height ?? 130;
+      const s = e.description ? Math.min(2, Math.max(1, Math.ceil(e.description.length / 34))) : e.available ? 0 : 1, p = s > 0 ? 10 + s * 19.5 : 0, b = e.available && e.widgetPreview ? 10 + (e.widgetPreview === "dataset" ? 72 : 32) : 0;
+      return 60 + p + b;
+    }
+    const c = Q(null);
+    let d = null;
+    function h() {
+      d !== null && (clearTimeout(d), d = null);
+    }
+    function g() {
+      h(), d = setTimeout(() => {
+        c.value = null, d = null;
+      }, 140);
+    }
+    ee(h);
+    function t(e) {
+      const s = /* @__PURE__ */ new Set();
+      for (const p of u.document.edges)
+        p.source === e && s.add(p.sourceHandle ?? "source"), p.target === e && s.add(p.targetHandle ?? "target");
+      return s;
+    }
+    function a(e, s) {
+      h();
+      const p = s.currentTarget;
+      if (!(p instanceof HTMLElement)) return;
+      const b = p.getBoundingClientRect(), l = 12, r = Math.min(404, window.innerWidth - l * 2), x = Math.min(520, window.innerHeight - l * 2);
+      let v = b.right + l + r / 2;
+      v + r / 2 > window.innerWidth - l && (v = b.left - l - r / 2), v = Math.max(r / 2 + l, Math.min(v, window.innerWidth - r / 2 - l)), c.value = {
+        node: e,
+        x: v,
+        y: Math.max(l, Math.min(b.top, window.innerHeight - x - l))
+      };
+    }
+    function m() {
+      g();
+    }
+    te(G, { show: a, hide: m });
+    const M = T(() => {
+      const e = new Map(u.document.nodes.map((r) => [r.id, { ...r.position }])), s = Math.min(...u.document.nodes.map((r) => r.position.x)), p = Math.max(...u.document.nodes.map((r) => r.position.x)), b = (s + p) / 2;
+      for (const r of e.values())
+        r.x = b + (r.x - b) * Le;
+      for (let r = 0; r < u.document.nodes.length; r += 1)
+        for (const x of u.document.edges) {
+          if (x.sourceHandle || x.targetHandle) continue;
+          const v = e.get(x.source), $ = e.get(x.target);
+          if (!(!v || !$ || Math.abs(v.x - $.x) >= 40) && ($.x = v.x, $.y > v.y)) {
+            const z = u.document.nodes.find((R) => R.id === x.source);
+            z && ($.y = Math.max(
+              $.y,
+              v.y + N(z) + W
+            ));
+          }
+        }
+      const l = [...u.document.nodes].sort(
+        (r, x) => r.position.y - x.position.y || r.position.x - x.position.x
+      );
+      for (const [r, x] of l.entries()) {
+        const v = e.get(x.id);
+        if (v)
+          for (const $ of l.slice(0, r)) {
+            const z = e.get($.id);
+            if (!z) continue;
+            const R = x.kind === "note" ? x.appearance.width : 260, q = $.kind === "note" ? $.appearance.width : 260;
+            v.x >= z.x + q + U || z.x >= v.x + R + U || (v.y = Math.max(
+              v.y,
+              z.y + N($) + W
+            ));
+          }
+      }
+      return e;
+    }), I = T(() => u.document.nodes.map((e) => {
+      const s = M.value.get(e.id) ?? e.position;
+      return e.kind === "note" ? {
+        id: e.id,
+        type: "note",
+        position: s,
+        data: e,
+        style: {
+          width: `${e.appearance.width}px`,
+          height: e.appearance.height ? `${e.appearance.height}px` : void 0
+        }
+      } : {
+        id: e.id,
+        type: "catalog",
+        position: s,
+        data: {
+          ...e,
+          connectedHandles: t(e.id)
+        },
+        selectable: !1
+      };
+    })), B = T(() => u.document.edges.map((e, s) => ({
+      id: `viewer-edge-${s}-${e.source}-${e.target}`,
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle,
+      targetHandle: e.targetHandle,
+      type: se.SmoothStep,
+      data: e.data,
+      style: e.isVisual ? { strokeDasharray: "6 4" } : void 0,
+      selectable: !1
+    }))), j = T(() => {
+      if (u.document.nodes.length === 0) return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+      let e = 1 / 0, s = 1 / 0, p = -1 / 0, b = -1 / 0;
+      for (const l of u.document.nodes) {
+        const r = M.value.get(l.id) ?? l.position, x = l.kind === "note" ? l.appearance.width : 260, v = N(l);
+        e = Math.min(e, r.x), s = Math.min(s, r.y), p = Math.max(p, r.x + x), b = Math.max(b, r.y + v);
+      }
+      return { minX: e, minY: s, maxX: p, maxY: b };
+    });
+    function K(e) {
+      if (u.fitViewOnInit) {
+        e.fitView({ padding: 0.15, maxZoom: 1 });
+        return;
+      }
+      const s = j.value, p = u.initialZoom;
+      e.setViewport({
+        x: e.dimensions.value.width / 2 - (s.minX + s.maxX) / 2 * p,
+        y: 24 - s.minY * p,
+        zoom: p
+      });
+    }
+    return (e, s) => {
+      var p, b;
+      return n(), i("div", {
+        class: "ob-flow-viewer",
+        "data-theme": o.theme
+      }, [
+        oe(f(le), {
+          nodes: I.value,
+          edges: B.value,
+          "node-types": _,
+          "fit-view-on-init": !1,
+          "min-zoom": o.minZoom,
+          "max-zoom": o.maxZoom,
+          "nodes-draggable": !1,
+          "nodes-connectable": !1,
+          "elements-selectable": !0,
+          "select-nodes-on-drag": !1,
+          "connect-on-click": !1,
+          "zoom-on-double-click": !1,
+          "delete-key-code": [],
+          "multi-selection-key-code": [],
+          "pan-on-drag": !0,
+          "pan-on-scroll": !0,
+          "zoom-on-scroll": !1,
+          "zoom-on-pinch": !0,
+          class: "ob-flow-viewer__canvas",
+          onPaneReady: K
+        }, {
+          default: ne(() => [
+            o.showControls ? (n(), H(f(re), {
+              key: 0,
+              "show-interactive": !1
+            })) : y("", !0),
+            o.showMiniMap ? (n(), H(f(de), {
+              key: 1,
+              pannable: !0,
+              zoomable: !0
+            })) : y("", !0)
+          ]),
+          _: 1
+        }, 8, ["nodes", "edges", "min-zoom", "max-zoom"]),
+        (n(), H(ie, { to: "body" }, [
+          c.value ? (n(), i("section", {
+            key: 0,
+            class: "ob-flow-viewer-tooltip",
+            "data-theme": o.theme,
+            style: S({ left: `${c.value.x}px`, top: `${c.value.y}px` }),
+            role: "tooltip",
+            tabindex: "0",
+            onMouseenter: h,
+            onMouseleave: m,
+            onFocusin: h,
+            onFocusout: m
+          }, [
+            w("header", ke, [
+              w("span", {
+                class: "ob-flow-viewer-tooltip__icon",
+                style: S({ "--ob-node-icon-color": ((p = c.value.node.icon) == null ? void 0 : p.color) ?? "#64748b" }),
+                "aria-hidden": "true"
+              }, [
+                (b = c.value.node.icon) != null && b.svg ? (n(), i("span", {
+                  key: 0,
+                  class: "ob-flow-viewer-node__icon-svg",
+                  innerHTML: c.value.node.icon.svg
+                }, null, 8, Me)) : (n(), i("span", $e, k(c.value.node.available ? c.value.node.name.slice(0, 1).toUpperCase() : "?"), 1))
+              ], 4),
+              w("span", He, [
+                w("strong", null, k(c.value.node.name), 1),
+                w("code", null, k(c.value.node.key), 1)
+              ])
+            ]),
+            w("div", Ne, [
+              c.value.node.available ? c.value.node.description ? (n(), i("p", Te, k(c.value.node.description), 1)) : y("", !0) : (n(), i("p", Pe, " This node template is unavailable. ")),
+              c.value.node.available ? (n(), i("div", Ie, [
+                w("div", Be, [
+                  s[0] || (s[0] = w("span", { class: "ob-flow-viewer-node__port-heading" }, "Inputs", -1)),
+                  c.value.node.inputs.length === 0 ? (n(), i("span", ze, "None")) : y("", !0),
+                  (n(!0), i(P, null, F(c.value.node.inputs, (l) => (n(), i("span", {
+                    key: l.key,
+                    class: "ob-flow-viewer-node__port"
+                  }, [
+                    w("span", null, k(l.name), 1),
+                    l.description ? (n(), i("small", Ve, k(l.description), 1)) : y("", !0)
+                  ]))), 128))
+                ]),
+                w("div", Ce, [
+                  s[1] || (s[1] = w("span", { class: "ob-flow-viewer-node__port-heading" }, "Outputs", -1)),
+                  c.value.node.outputs.length === 0 ? (n(), i("span", Fe, "None")) : y("", !0),
+                  (n(!0), i(P, null, F(c.value.node.outputs, (l) => (n(), i("span", {
+                    key: l.key,
+                    class: "ob-flow-viewer-node__port"
+                  }, [
+                    w("span", null, k(l.name), 1),
+                    l.description ? (n(), i("small", Se, k(l.description), 1)) : y("", !0)
+                  ]))), 128))
+                ])
+              ])) : y("", !0)
+            ])
+          ], 44, _e)) : y("", !0)
+        ]))
+      ], 8, be);
+    };
+  }
+}), Oe = { class: "ob-flow-preview" }, De = ["viewBox"], Ee = ["d"], Ae = ["x", "y"], Re = ["x", "y"], Xe = ["href", "x", "y"], Ze = ["x", "y"], Ye = ["x", "y"], L = 260, O = 100, D = 140, We = 140, X = 48, E = 26, Qe = /* @__PURE__ */ A({
+  __name: "FlowPreview",
+  props: {
+    preview: {},
+    icons: { default: () => ({}) },
+    iconUrl: { type: Function, default: void 0 }
+  },
+  setup(o) {
+    const u = o, _ = T(() => {
+      var t, a;
+      const h = ((t = u.preview) == null ? void 0 : t.n) ?? [], g = new Map(h.map((m) => [m.id, { x: m.x, y: m.y }]));
+      for (let m = 0; m < h.length; m += 1)
+        for (const M of ((a = u.preview) == null ? void 0 : a.e) ?? []) {
+          const I = g.get(M.s), B = g.get(M.t);
+          I && B && Math.abs(I.x - B.x) < We && (B.x = I.x);
+        }
+      return h.map((m) => ({
+        ...m,
+        ...g.get(m.id) ?? { x: m.x, y: m.y }
+      }));
+    }), N = T(() => {
+      const h = _.value;
+      if (h.length === 0) return "0 0 1 1";
+      let g = 1 / 0, t = 1 / 0, a = -1 / 0, m = -1 / 0;
+      for (const M of h)
+        g = Math.min(g, M.x), t = Math.min(t, M.y), a = Math.max(a, M.x + L), m = Math.max(m, M.y + O);
+      return `${g - D} ${t - D} ${a - g + D * 2} ${m - t + D * 2}`;
+    }), c = T(
+      () => new Map(_.value.map((h) => [h.id, h]))
+    );
+    function d(h, g) {
+      const t = c.value.get(h), a = c.value.get(g);
+      if (!t || !a) return "";
+      const m = t.x + L / 2, M = t.y + O / 2, I = a.x + L / 2, B = a.y + O / 2;
+      return `M ${m} ${M} L ${I} ${B}`;
+    }
+    return (h, g) => (n(), i("div", Oe, [
+      o.preview && o.preview.n.length > 0 ? (n(), i("svg", {
+        key: 0,
+        class: "ob-flow-preview__svg",
+        viewBox: N.value,
+        preserveAspectRatio: "xMidYMid meet"
+      }, [
+        (n(!0), i(P, null, F(o.preview.e, (t, a) => (n(), i("path", {
+          key: a,
+          d: d(t.s, t.t),
+          class: "ob-flow-preview__edge",
+          "vector-effect": "non-scaling-stroke"
+        }, null, 8, Ee))), 128)),
+        (n(!0), i(P, null, F(_.value, (t) => (n(), i("rect", {
+          key: t.id,
+          x: t.x,
+          y: t.y,
+          width: L,
+          height: O,
+          rx: "16",
+          class: "ob-flow-preview__node",
+          "vector-effect": "non-scaling-stroke"
+        }, null, 8, Ae))), 128)),
+        (n(!0), i(P, null, F(_.value, (t) => (n(), i(P, {
+          key: `content-${t.id}`
+        }, [
+          w("rect", {
+            x: t.x + 18,
+            y: t.y + 18,
+            width: "64",
+            height: "64",
+            rx: "16",
+            class: "ob-flow-preview__icon-background",
+            style: S(t.c ? { fill: t.c } : void 0)
+          }, null, 12, Re),
+          t.i && o.icons[t.i] ? (n(), H(ae(o.icons[t.i]), {
+            key: 0,
+            x: t.x + E,
+            y: t.y + E,
+            size: X,
+            color: "white",
+            "stroke-width": 2.5,
+            "aria-hidden": "true"
+          }, null, 8, ["x", "y"])) : t.i && o.iconUrl ? (n(), i("image", {
+            key: 1,
+            href: o.iconUrl(t.i),
+            x: t.x + E,
+            y: t.y + E,
+            width: X,
+            height: X
+          }, null, 8, Xe)) : (n(), i("text", {
+            key: 2,
+            x: t.x + 50,
+            y: t.y + 68,
+            fill: "white",
+            "font-size": "42",
+            "font-family": "sans-serif",
+            "text-anchor": "middle"
+          }, " * ", 8, Ze)),
+          w("rect", {
+            x: t.x + 100,
+            y: t.y + 45,
+            width: "128",
+            height: "10",
+            rx: "5",
+            class: "ob-flow-preview__line"
+          }, null, 8, Ye)
+        ], 64))), 128))
+      ], 8, De)) : y("", !0)
+    ]));
+  }
+});
+export {
+  Qe as FlowPreview,
+  Je as FlowViewer
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FlowViewer } from './FlowViewer.vue';
+export { default as FlowPreview } from './FlowPreview.vue';
+export type { FlowPreviewDocument, FlowViewerCatalogNode, FlowViewerDocument, FlowViewerEdge, FlowViewerField, FlowViewerIcon, FlowViewerNode, FlowViewerNote, FlowViewerNoteColor, FlowViewerPosition, } from './types';

package/dist/types.d.ts

@@ -0,0 +1,71 @@
+export type FlowViewerPosition = {
+    x: number;
+    y: number;
+};
+export type FlowViewerIcon = {
+    color: string;
+    svg: string;
+};
+export type FlowViewerField = {
+    key: string;
+    name: string;
+    description?: string;
+    type: string;
+};
+export type FlowViewerCatalogNode = {
+    id: string;
+    kind: 'node';
+    position: FlowViewerPosition;
+    name: string;
+    key: string;
+    version: number;
+    description: string;
+    icon?: FlowViewerIcon;
+    widgetPreview: 'button' | 'dataset' | 'lines' | null;
+    inputs: FlowViewerField[];
+    outputs: FlowViewerField[];
+    setup?: {
+        requiredInputs: FlowViewerField[];
+    } | null;
+    available: boolean;
+};
+export type FlowPreviewDocument = {
+    n: Array<{
+        id: string;
+        x: number;
+        y: number;
+        w: boolean;
+        c?: string;
+        i?: string;
+    }>;
+    e: Array<{
+        s: string;
+        t: string;
+    }>;
+};
+export type FlowViewerNoteColor = 'yellow' | 'blue' | 'green' | 'rose' | 'violet' | 'slate';
+export type FlowViewerNote = {
+    id: string;
+    kind: 'note';
+    position: FlowViewerPosition;
+    content: string;
+    appearance: {
+        width: number;
+        height?: number;
+        color: FlowViewerNoteColor;
+    };
+};
+export type FlowViewerNode = FlowViewerCatalogNode | FlowViewerNote;
+export type FlowViewerEdge = {
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+    extraOffset?: number;
+    isVisual?: boolean;
+    data?: Record<string, unknown>;
+};
+export type FlowViewerDocument = {
+    nodes: FlowViewerNode[];
+    edges: FlowViewerEdge[];
+};

package/dist/viewerContext.d.ts

@@ -0,0 +1,7 @@
+import { InjectionKey } from 'vue';
+import { FlowViewerCatalogNode } from './types';
+export type FlowViewerDetailsContext = {
+    show: (node: FlowViewerCatalogNode, event: MouseEvent | FocusEvent) => void;
+    hide: () => void;
+};
+export declare const flowViewerDetailsKey: InjectionKey<FlowViewerDetailsContext>;

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@ovalbee/flow-viewer",
+  "version": "0.0.1",
+  "description": "Read-only Vue viewer for OvalBee flow graphs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oval-bee/ovalbee.git",
+    "directory": "packages/flow-viewer"
+  },
+  "homepage": "https://github.com/oval-bee/ovalbee/tree/main/packages/flow-viewer",
+  "bugs": {
+    "url": "https://github.com/oval-bee/ovalbee/issues"
+  },
+  "type": "module",
+  "main": "./dist/flow-viewer.cjs",
+  "module": "./dist/flow-viewer.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/flow-viewer.js",
+      "require": "./dist/flow-viewer.cjs"
+    },
+    "./style.css": "./dist/flow-viewer.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "@vue-flow/core": "^1.47.0",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/minimap": "^1.5.4",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue-flow/core": "^1.47.0",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/minimap": "^1.5.4",
+    "typescript": "~5.6.3",
+    "vite": "^6.0.3",
+    "vite-plugin-dts": "^4.3.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  },
+  "keywords": [
+    "ovalbee",
+    "vue",
+    "vue-flow",
+    "flow-viewer"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit",
+    "build": "vue-tsc --noEmit && vite build"
+  }
+}