@uipath/apollo-react 6.72.0 → 6.74.0

package/dist/canvas/stories/templates/LayoutPreviewsPage.js

@@ -0,0 +1,1223 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { ArrowUpRight, LayoutPanelTop, PanelRight, PanelsTopLeft } from "lucide-react";
+const buildStoryHref = (storyId)=>{
+    let extra = '';
+    try {
+        const params = new URLSearchParams(window.top?.location.search ?? '');
+        params.delete('path');
+        extra = params.toString();
+    } catch  {}
+    return `./?path=/story/${storyId}${extra ? `&${extra}` : ''}`;
+};
+function Bar({ className, on }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('h-1.5 shrink-0 rounded-full', on ? 'bg-brand/45' : 'bg-foreground-subtle/25', className)
+    });
+}
+function Box({ className, on }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('shrink-0 rounded-[3px]', on ? 'bg-brand/20' : 'bg-foreground-subtle/15', className)
+    });
+}
+function Zone({ on, className, children }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('overflow-hidden rounded-md border', on ? 'border-brand bg-brand-subtle ring-1 ring-brand/30' : 'border-border-subtle bg-surface-raised', className),
+        children: children
+    });
+}
+function CanvasGraph() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "absolute inset-0 bg-[radial-gradient(var(--color-foreground-subtle)_0.5px,transparent_0.5px)] bg-size-[8px_8px] opacity-40",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "absolute left-[18%] top-[38%] flex items-center",
+            children: [
+                /*#__PURE__*/ jsx(Box, {
+                    className: "h-4 w-7 border border-border-subtle bg-surface"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "h-px w-4 bg-foreground-subtle/60"
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    className: "h-4 w-7 border border-brand bg-surface"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "h-px w-4 bg-foreground-subtle/60"
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    className: "h-4 w-7 border border-border-subtle bg-surface"
+                })
+            ]
+        })
+    });
+}
+function CanvasZone({ on, className }) {
+    return /*#__PURE__*/ jsxs(Zone, {
+        on: on,
+        className: cn('relative min-w-0 flex-1', className),
+        children: [
+            /*#__PURE__*/ jsx(CanvasGraph, {}),
+            /*#__PURE__*/ jsxs("div", {
+                className: "absolute right-1.5 top-1.5 flex gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        className: "h-2.5 w-8 bg-surface"
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        className: "size-2.5 bg-surface"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function SidebarRail({ on }) {
+    return /*#__PURE__*/ jsxs(Zone, {
+        on: on,
+        className: "flex w-6 flex-col items-center gap-1.5 py-1.5",
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                on: on,
+                className: "size-2.5 bg-brand/70"
+            }),
+            [
+                0,
+                1,
+                2,
+                3
+            ].map((i)=>/*#__PURE__*/ jsx(Box, {
+                    on: on,
+                    className: "size-2.5"
+                }, i)),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex-1"
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                on: on,
+                className: "size-2.5"
+            })
+        ]
+    });
+}
+function SidebarExpanded({ on }) {
+    return /*#__PURE__*/ jsxs(Zone, {
+        on: on,
+        className: "flex w-[26%] flex-col gap-1.5 p-1.5",
+        children: [
+            /*#__PURE__*/ jsx(Bar, {
+                on: on,
+                className: "w-3/5"
+            }),
+            [
+                0,
+                1,
+                2,
+                3
+            ].map((i)=>/*#__PURE__*/ jsxs("div", {
+                    className: cn('flex items-center gap-1 rounded-sm p-0.5', 0 === i && 'bg-brand/15'),
+                    children: [
+                        /*#__PURE__*/ jsx(Box, {
+                            on: on,
+                            className: cn('size-2', 0 === i && 'bg-brand/70')
+                        }),
+                        /*#__PURE__*/ jsx(Bar, {
+                            on: on,
+                            className: i % 2 ? 'w-2/5' : 'w-3/5'
+                        })
+                    ]
+                }, i))
+        ]
+    });
+}
+function FieldStack({ on, count = 3 }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: Array.from({
+            length: count
+        }, (_, i)=>/*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: on,
+                        className: "h-1 w-2/5"
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        on: on,
+                        className: "h-2.5 w-full"
+                    })
+                ]
+            }, i))
+    });
+}
+function PanelBody({ on, children }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex h-full flex-col gap-1.5 p-1.5",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: on,
+                        className: "w-2/5"
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        on: on,
+                        className: "size-2"
+                    })
+                ]
+            }),
+            children ?? /*#__PURE__*/ jsx(FieldStack, {
+                on: on
+            })
+        ]
+    });
+}
+function BottomPanel({ on, collapsed }) {
+    return /*#__PURE__*/ jsxs(Zone, {
+        on: on,
+        className: cn('absolute inset-x-1.5 bottom-1.5', collapsed ? 'h-4' : 'h-[34%]'),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-1 p-1",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        on: on,
+                        className: "h-2 w-7 bg-brand/40"
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        on: on,
+                        className: "h-2 w-6"
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        on: on,
+                        className: "h-2 w-6"
+                    })
+                ]
+            }),
+            !collapsed && /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-1 px-1.5",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: on,
+                        className: "w-3/4"
+                    }),
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: on,
+                        className: "w-1/2"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function StandaloneShell({ sidebar, right, bottom, takeover, highlight, rightContent }) {
+    const on = (region)=>highlight.includes(region);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative flex aspect-[16/10] gap-1.5 bg-surface p-1.5",
+        children: [
+            'rail' === sidebar && /*#__PURE__*/ jsx(SidebarRail, {
+                on: on('sidebar')
+            }),
+            'expanded' === sidebar && /*#__PURE__*/ jsx(SidebarExpanded, {
+                on: on('sidebar')
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "relative min-w-0 flex-1",
+                children: [
+                    /*#__PURE__*/ jsx(CanvasZone, {
+                        on: on('canvas'),
+                        className: "absolute inset-0"
+                    }),
+                    right && /*#__PURE__*/ jsx(Zone, {
+                        on: on('right'),
+                        className: cn('absolute right-1.5 top-1.5 shadow-sm', 'executions' === bottom || 'collapsed' === bottom ? 'bottom-7' : 'bottom-1.5', rightContent ? 'w-[46%]' : 'w-[34%]'),
+                        children: rightContent ?? /*#__PURE__*/ jsx(PanelBody, {
+                            on: on('right')
+                        })
+                    }),
+                    'properties' === bottom && /*#__PURE__*/ jsx(Zone, {
+                        on: on('bottom'),
+                        className: "absolute inset-x-1.5 bottom-1.5 h-[40%]",
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "grid h-full grid-cols-3 gap-1.5 p-1.5",
+                            children: [
+                                /*#__PURE__*/ jsx(FieldStack, {
+                                    on: on('bottom'),
+                                    count: 2
+                                }),
+                                /*#__PURE__*/ jsx(FieldStack, {
+                                    on: on('bottom'),
+                                    count: 2
+                                }),
+                                /*#__PURE__*/ jsx(FieldStack, {
+                                    on: on('bottom'),
+                                    count: 2
+                                })
+                            ]
+                        })
+                    }),
+                    ('executions' === bottom || 'collapsed' === bottom) && /*#__PURE__*/ jsx("div", {
+                        className: cn('absolute inset-0', right && 'right-[36%]'),
+                        children: /*#__PURE__*/ jsx(BottomPanel, {
+                            on: on('bottom'),
+                            collapsed: 'collapsed' === bottom
+                        })
+                    })
+                ]
+            }),
+            takeover && /*#__PURE__*/ jsx("div", {
+                className: "absolute inset-0 grid place-items-center bg-foreground/15 p-3",
+                children: /*#__PURE__*/ jsxs(Zone, {
+                    on: on('takeover'),
+                    className: "flex size-full flex-col shadow-lg",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center justify-between border-b border-brand/30 p-1.5",
+                            children: [
+                                /*#__PURE__*/ jsx(Bar, {
+                                    on: true,
+                                    className: "w-1/4"
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    className: "h-2.5 w-8 bg-brand/60"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex min-h-0 flex-1",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex w-1/4 flex-col gap-1.5 border-r border-brand/30 p-1.5",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Bar, {
+                                            on: true,
+                                            className: "w-3/4"
+                                        }),
+                                        /*#__PURE__*/ jsx(Bar, {
+                                            on: true,
+                                            className: "w-1/2"
+                                        }),
+                                        /*#__PURE__*/ jsx(Bar, {
+                                            on: true,
+                                            className: "w-2/3"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "flex flex-1 flex-col gap-1.5 p-1.5",
+                                    children: /*#__PURE__*/ jsx(FieldStack, {
+                                        on: true,
+                                        count: 2
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function DockShell({ panels, highlight }) {
+    const on = (region)=>highlight.includes(region);
+    const tabbed = (label, isOn, body, className)=>/*#__PURE__*/ jsxs("div", {
+            className: cn('flex min-w-0 flex-col border', isOn ? 'border-brand bg-brand-subtle' : 'border-border-subtle bg-surface-raised', className),
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: cn('flex h-3.5 shrink-0 items-end gap-0.5 border-b px-0.5', isOn ? 'border-brand/40 bg-brand/10' : 'border-border-subtle bg-surface'),
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: cn('flex h-2.5 items-center rounded-t-[2px] border-t-2 px-1', isOn ? 'border-brand bg-brand-subtle' : 'border-foreground-subtle/40 bg-surface-raised'),
+                        children: label
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "relative min-h-0 flex-1",
+                    children: body
+                })
+            ]
+        });
+    const hasInput = panels.includes('input');
+    const hasProperties = panels.includes('properties');
+    const hasOutput = panels.includes('output');
+    const multi = panels.length > 1;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex aspect-[16/10] flex-col bg-surface",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex h-3 shrink-0 items-center gap-1 border-b border-border-subtle px-1.5",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        className: "size-1.5 rounded-full"
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        className: "size-1.5 rounded-full"
+                    }),
+                    /*#__PURE__*/ jsx(Bar, {
+                        className: "h-1 w-10"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex min-h-0 flex-1",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex w-5 shrink-0 flex-col items-center gap-1.5 border-r border-border-subtle py-1.5",
+                        children: [
+                            /*#__PURE__*/ jsx(Box, {
+                                className: "size-2 bg-brand/60"
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                className: "size-2"
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                className: "size-2"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex min-w-0 flex-1 flex-col",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex min-h-0 flex-1",
+                                children: [
+                                    tabbed(/*#__PURE__*/ jsx(Bar, {
+                                        on: on('canvas'),
+                                        className: "h-1 w-5"
+                                    }), on('canvas'), /*#__PURE__*/ jsx(CanvasGraph, {}), 'flex-1'),
+                                    hasInput && !multi && tabbed(/*#__PURE__*/ jsx(Bar, {
+                                        on: true,
+                                        className: "h-1 w-4"
+                                    }), on('input'), /*#__PURE__*/ jsx(PanelBody, {
+                                        on: on('input')
+                                    }), 'w-[34%]'),
+                                    hasProperties && tabbed(/*#__PURE__*/ jsx(Bar, {
+                                        on: on('right'),
+                                        className: "h-1 w-6"
+                                    }), on('right'), /*#__PURE__*/ jsx(PanelBody, {
+                                        on: on('right')
+                                    }), 'w-[34%]'),
+                                    hasOutput && !multi && tabbed(/*#__PURE__*/ jsx(Bar, {
+                                        on: true,
+                                        className: "h-1 w-5"
+                                    }), on('output'), /*#__PURE__*/ jsx(PanelBody, {
+                                        on: on('output')
+                                    }), 'w-[34%]')
+                                ]
+                            }),
+                            multi && /*#__PURE__*/ jsxs("div", {
+                                className: "flex h-[36%] shrink-0",
+                                children: [
+                                    hasInput && tabbed(/*#__PURE__*/ jsx(Bar, {
+                                        on: true,
+                                        className: "h-1 w-4"
+                                    }), on('input'), /*#__PURE__*/ jsxs("div", {
+                                        className: "flex flex-col gap-1 p-1.5",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Bar, {
+                                                on: true,
+                                                className: "w-3/4"
+                                            }),
+                                            /*#__PURE__*/ jsx(Bar, {
+                                                on: true,
+                                                className: "w-1/2"
+                                            })
+                                        ]
+                                    }), 'flex-1'),
+                                    hasOutput && tabbed(/*#__PURE__*/ jsx(Bar, {
+                                        on: true,
+                                        className: "h-1 w-5"
+                                    }), on('output'), /*#__PURE__*/ jsxs("div", {
+                                        className: "flex flex-col gap-1 p-1.5",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Bar, {
+                                                on: true,
+                                                className: "w-2/3"
+                                            }),
+                                            /*#__PURE__*/ jsx(Bar, {
+                                                on: true,
+                                                className: "w-1/3"
+                                            })
+                                        ]
+                                    }), 'flex-1')
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "h-2 shrink-0 bg-brand/70"
+            })
+        ]
+    });
+}
+function Tabs3({ active = 0 }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex gap-1 rounded-sm bg-brand/10 p-0.5",
+        children: [
+            0,
+            1,
+            2
+        ].map((i)=>/*#__PURE__*/ jsx(Box, {
+                className: cn('h-2 flex-1', i === active ? 'bg-brand/35' : 'bg-transparent')
+            }, i))
+    });
+}
+function TokenInput({ error }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex h-3 items-center gap-1 rounded-[3px] border px-0.5', error ? 'border-error bg-error-background' : 'border-brand/40 bg-brand/5'),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "h-1.5 w-7 rounded-full bg-brand/60"
+            }),
+            /*#__PURE__*/ jsx(Bar, {
+                on: true,
+                className: "h-1 w-1/3"
+            })
+        ]
+    });
+}
+const contentBodies = {
+    properties: /*#__PURE__*/ jsxs(PanelBody, {
+        on: true,
+        children: [
+            /*#__PURE__*/ jsx(Tabs3, {}),
+            /*#__PURE__*/ jsx(FieldStack, {
+                on: true,
+                count: 3
+            })
+        ]
+    }),
+    forms: /*#__PURE__*/ jsxs(PanelBody, {
+        on: true,
+        children: [
+            [
+                0,
+                1
+            ].map((section)=>/*#__PURE__*/ jsxs("div", {
+                    className: "flex flex-col gap-1 rounded-sm border border-brand/30 p-1",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center justify-between",
+                            children: [
+                                /*#__PURE__*/ jsx(Bar, {
+                                    on: true,
+                                    className: "w-1/2"
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "size-1.5 rotate-45 border-b border-r border-brand"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(FieldStack, {
+                            on: true,
+                            count: 0 === section ? 2 : 1
+                        })
+                    ]
+                }, section)),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        className: "size-2 border border-brand bg-surface"
+                    }),
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: true,
+                        className: "w-1/2"
+                    })
+                ]
+            })
+        ]
+    }),
+    rules: /*#__PURE__*/ jsxs(PanelBody, {
+        on: true,
+        children: [
+            [
+                0,
+                1,
+                2
+            ].map((row)=>/*#__PURE__*/ jsxs("div", {
+                    className: "flex flex-col gap-1",
+                    children: [
+                        row > 0 && /*#__PURE__*/ jsx(Box, {
+                            className: "h-1.5 w-4 bg-brand/50"
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex gap-0.5",
+                            children: [
+                                /*#__PURE__*/ jsx(Box, {
+                                    on: true,
+                                    className: "h-2.5 flex-1"
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    on: true,
+                                    className: "h-2.5 w-4"
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    on: true,
+                                    className: "h-2.5 flex-1"
+                                })
+                            ]
+                        })
+                    ]
+                }, row)),
+            /*#__PURE__*/ jsx("div", {
+                className: "h-2.5 rounded-[3px] border border-dashed border-brand/60"
+            })
+        ]
+    }),
+    variables: /*#__PURE__*/ jsxs(PanelBody, {
+        on: true,
+        children: [
+            /*#__PURE__*/ jsx(Tabs3, {
+                active: 1
+            }),
+            [
+                0,
+                1,
+                2,
+                3
+            ].map((row)=>/*#__PURE__*/ jsxs("div", {
+                    className: "flex items-center justify-between gap-1",
+                    children: [
+                        /*#__PURE__*/ jsx(Bar, {
+                            on: true,
+                            className: row % 2 ? 'w-2/5' : 'w-1/2'
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            className: "h-2 w-5 rounded-full bg-brand/30"
+                        })
+                    ]
+                }, row))
+        ]
+    }),
+    node: /*#__PURE__*/ jsxs(PanelBody, {
+        on: true,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        className: "size-3 bg-brand/60"
+                    }),
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: true,
+                        className: "w-1/3"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex-1"
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        className: "size-2 border border-brand bg-surface"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Tabs3, {}),
+            /*#__PURE__*/ jsx(FieldStack, {
+                on: true,
+                count: 2
+            })
+        ]
+    }),
+    dap: /*#__PURE__*/ jsxs(PanelBody, {
+        on: true,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: true,
+                        className: "h-1 w-2/5"
+                    }),
+                    /*#__PURE__*/ jsx(TokenInput, {})
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: true,
+                        className: "h-1 w-1/3"
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "rounded-[3px] border border-brand/40 bg-brand/5",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex gap-0.5 border-b border-brand/20 p-0.5",
+                                children: [
+                                    /*#__PURE__*/ jsx(Box, {
+                                        on: true,
+                                        className: "size-1.5"
+                                    }),
+                                    /*#__PURE__*/ jsx(Box, {
+                                        on: true,
+                                        className: "size-1.5"
+                                    }),
+                                    /*#__PURE__*/ jsx(Box, {
+                                        on: true,
+                                        className: "size-1.5"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex flex-col gap-0.5 p-0.5",
+                                children: [
+                                    /*#__PURE__*/ jsx(Bar, {
+                                        on: true,
+                                        className: "h-1 w-3/4"
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "h-1.5 w-8 rounded-full bg-brand/60"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: true,
+                        className: "h-1 w-2/5"
+                    }),
+                    /*#__PURE__*/ jsx(TokenInput, {})
+                ]
+            })
+        ]
+    }),
+    'dap-validation': /*#__PURE__*/ jsxs(PanelBody, {
+        on: true,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: true,
+                        className: "h-1 w-2/5"
+                    }),
+                    /*#__PURE__*/ jsx(TokenInput, {})
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: true,
+                        className: "h-1 w-1/3"
+                    }),
+                    /*#__PURE__*/ jsx(TokenInput, {
+                        error: true
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "h-1 w-3/5 rounded-full bg-error/70"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsx(Bar, {
+                        on: true,
+                        className: "h-1 w-2/5"
+                    }),
+                    /*#__PURE__*/ jsx(TokenInput, {
+                        error: true
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "h-1 w-1/2 rounded-full bg-error/70"
+                    })
+                ]
+            })
+        ]
+    }),
+    'field-help': /*#__PURE__*/ jsx(PanelBody, {
+        on: true,
+        children: [
+            0,
+            1,
+            2
+        ].map((row)=>/*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-0.5",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-0.5",
+                        children: [
+                            /*#__PURE__*/ jsx(Bar, {
+                                on: true,
+                                className: "h-1 w-2/5"
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "size-1.5 rounded-full border border-brand"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        on: true,
+                        className: "h-2.5 w-full"
+                    }),
+                    /*#__PURE__*/ jsx(Bar, {
+                        className: "h-1 w-4/5 bg-foreground-subtle/30"
+                    })
+                ]
+            }, row))
+    })
+};
+const standalonePreviews = [
+    {
+        name: 'Canvas Only',
+        description: 'The canvas with no panels open. Start here for read-only or embedded flows.',
+        regions: [
+            'Canvas'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-standalone--canvas-only',
+        preview: /*#__PURE__*/ jsx(StandaloneShell, {
+            highlight: [
+                'canvas'
+            ]
+        })
+    },
+    {
+        name: 'Panel Right',
+        description: 'A floating properties panel opens beside the canvas when a node is selected.',
+        regions: [
+            'Canvas',
+            'Right panel'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-standalone--with-right-properties-panel',
+        preview: /*#__PURE__*/ jsx(StandaloneShell, {
+            right: true,
+            highlight: [
+                'right'
+            ]
+        })
+    },
+    {
+        name: 'Panel Bottom',
+        description: 'Properties dock along the bottom edge, keeping the full canvas width visible.',
+        regions: [
+            'Canvas',
+            'Bottom panel'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-standalone--with-bottom-properties-panel',
+        preview: /*#__PURE__*/ jsx(StandaloneShell, {
+            bottom: "properties",
+            highlight: [
+                'bottom'
+            ]
+        })
+    },
+    {
+        name: 'Bottom Executions',
+        description: 'A resizable tabbed panel for executions, datasets, evaluators, and eval runs.',
+        regions: [
+            'Canvas',
+            'Bottom panel'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-standalone--with-bottom-panel',
+        preview: /*#__PURE__*/ jsx(StandaloneShell, {
+            bottom: "executions",
+            highlight: [
+                'bottom'
+            ]
+        })
+    },
+    {
+        name: 'Sidebar Left',
+        description: 'A collapsible sidebar for variables, files, connections, and run history.',
+        regions: [
+            'Sidebar',
+            'Canvas'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-standalone--with-left-sidebar',
+        preview: /*#__PURE__*/ jsx(StandaloneShell, {
+            sidebar: "expanded",
+            highlight: [
+                'sidebar'
+            ]
+        })
+    },
+    {
+        name: 'Modal Takeover',
+        description: 'A full-surface modal for focused tasks such as testing or deep configuration.',
+        regions: [
+            'Sidebar',
+            'Canvas',
+            'Right panel',
+            'Takeover'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-standalone--with-takeover-modal',
+        preview: /*#__PURE__*/ jsx(StandaloneShell, {
+            sidebar: "rail",
+            right: true,
+            takeover: true,
+            highlight: [
+                'takeover'
+            ]
+        })
+    },
+    {
+        name: 'Workbench',
+        description: 'The full composition: sidebar rail, canvas, right panel, and a collapsible bottom panel.',
+        regions: [
+            'Sidebar',
+            'Canvas',
+            'Right panel',
+            'Bottom panel'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-standalone--full-workbench',
+        preview: /*#__PURE__*/ jsx(StandaloneShell, {
+            sidebar: "rail",
+            right: true,
+            bottom: "collapsed",
+            highlight: [
+                'sidebar',
+                'right',
+                'bottom'
+            ]
+        })
+    }
+];
+const vsCodePreviews = [
+    {
+        name: 'Canvas Only',
+        description: 'The canvas as a single Dockview tab. The host owns the surrounding chrome.',
+        regions: [
+            'Canvas'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-vs-code--canvas-only',
+        preview: /*#__PURE__*/ jsx(DockShell, {
+            panels: [],
+            highlight: [
+                'canvas'
+            ]
+        })
+    },
+    {
+        name: 'Right Panel',
+        description: 'Properties mount in a docked split that users can drag, tab, or resize.',
+        regions: [
+            'Canvas',
+            'Properties'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-vs-code--with-right-panel',
+        preview: /*#__PURE__*/ jsx(DockShell, {
+            panels: [
+                'properties'
+            ],
+            highlight: [
+                'right'
+            ]
+        })
+    },
+    {
+        name: 'Input Panel',
+        description: 'Shows the node input data next to the canvas in its own docked split.',
+        regions: [
+            'Canvas',
+            'Input'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-vs-code--with-input-panel',
+        preview: /*#__PURE__*/ jsx(DockShell, {
+            panels: [
+                'input'
+            ],
+            highlight: [
+                'input'
+            ]
+        })
+    },
+    {
+        name: 'Output Panel',
+        description: 'Shows the node output data next to the canvas in its own docked split.',
+        regions: [
+            'Canvas',
+            'Output'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-vs-code--with-output-panel',
+        preview: /*#__PURE__*/ jsx(DockShell, {
+            panels: [
+                'output'
+            ],
+            highlight: [
+                'output'
+            ]
+        })
+    },
+    {
+        name: 'Multi Panel',
+        description: 'Input, properties, and output open together. The host persists the arrangement.',
+        regions: [
+            'Canvas',
+            'Input',
+            'Properties',
+            'Output'
+        ],
+        storyId: 'apollo-react-canvas-templates-flow-vs-code--multi-panel',
+        preview: /*#__PURE__*/ jsx(DockShell, {
+            panels: [
+                'input',
+                'properties',
+                'output'
+            ],
+            highlight: [
+                'input',
+                'right',
+                'output'
+            ]
+        })
+    }
+];
+const contentPreviews = [
+    {
+        name: 'Properties',
+        description: 'The default node panel: tabbed parameters, error handling, and advanced settings.',
+        regions: [
+            'Tabs',
+            'Fields'
+        ],
+        variant: 'properties',
+        storyId: 'apollo-react-canvas-templates-flow-standalone--full-workbench'
+    },
+    {
+        name: 'Quick Form',
+        description: 'Schema-driven form sections for configuring a node without leaving the canvas.',
+        regions: [
+            'Sections',
+            'Fields'
+        ],
+        variant: 'forms'
+    },
+    {
+        name: 'Rule Building',
+        description: 'Condition rows joined by AND or OR, with a clear way to add another rule.',
+        regions: [
+            'Conditions',
+            'Operators'
+        ],
+        variant: 'rules'
+    },
+    {
+        name: 'Variables',
+        description: 'Inputs, outputs, and workflow variables for a node. Expands into a takeover.',
+        regions: [
+            'Tabs',
+            'Variable list',
+            'Takeover'
+        ],
+        variant: 'variables'
+    },
+    {
+        name: 'Node',
+        description: 'A node-specific panel, such as Send Email, that can open a full takeover editor.',
+        regions: [
+            'Header',
+            'Tabs',
+            'Takeover'
+        ],
+        variant: 'node'
+    },
+    {
+        name: 'DAP',
+        description: 'React DAP fields with variable tokens and a rich text body editor.',
+        regions: [
+            'Fields',
+            'Variable tokens',
+            'Rich text'
+        ],
+        variant: 'dap',
+        storyId: 'apollo-wind-patterns-layout-patterns--dap-send-email'
+    },
+    {
+        name: 'DAP Validation',
+        description: 'The DAP panel with validation triggered, showing inline field errors.',
+        regions: [
+            'Fields',
+            'Errors'
+        ],
+        variant: 'dap-validation',
+        storyId: 'apollo-wind-forms-guidance-field-validation--example'
+    },
+    {
+        name: 'Field Help',
+        description: 'Fields with help icons and helper text that explain what each value does.',
+        regions: [
+            'Fields',
+            'Help text'
+        ],
+        variant: 'field-help',
+        storyId: 'apollo-wind-forms-guidance-field-help--example'
+    }
+];
+function PreviewCard({ name, description, regions, storyId, preview }) {
+    const Wrapper = storyId ? 'a' : 'div';
+    return /*#__PURE__*/ jsxs(Wrapper, {
+        href: storyId ? buildStoryHref(storyId) : void 0,
+        target: storyId ? '_top' : void 0,
+        className: cn('group flex min-w-0 flex-col overflow-hidden rounded-xl border border-border-subtle bg-surface-raised transition-all', storyId && 'hover:border-brand/50 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-brand'),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "border-b border-border-subtle bg-surface-overlay p-3",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "overflow-hidden rounded-lg border border-border-subtle shadow-sm",
+                    children: preview
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-1 flex-col gap-2 p-4",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-start justify-between gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx("h3", {
+                                className: "text-sm font-semibold text-foreground",
+                                children: name
+                            }),
+                            storyId ? /*#__PURE__*/ jsx(ArrowUpRight, {
+                                className: "size-4 shrink-0 text-foreground-subtle transition-colors group-hover:text-brand"
+                            }) : /*#__PURE__*/ jsx("span", {
+                                className: "shrink-0 rounded-full bg-surface-overlay px-2 py-0.5 text-[10px] font-medium text-foreground-subtle",
+                                children: "No live story yet"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        className: "text-xs leading-5 text-foreground-muted",
+                        children: description
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "mt-auto flex flex-wrap gap-1 pt-1",
+                        children: regions.map((region)=>/*#__PURE__*/ jsx("span", {
+                                className: "rounded-full border border-border-subtle px-2 py-0.5 text-[10px] text-foreground-muted",
+                                children: region
+                            }, region))
+                    })
+                ]
+            })
+        ]
+    });
+}
+function Section({ icon: Icon, eyebrow, title, body, children }) {
+    return /*#__PURE__*/ jsxs("section", {
+        className: "mt-12",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-start gap-3",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "grid size-10 shrink-0 place-items-center rounded-xl bg-surface-overlay text-brand",
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            className: "size-5"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ jsx("p", {
+                                className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-foreground-subtle",
+                                children: eyebrow
+                            }),
+                            /*#__PURE__*/ jsx("h2", {
+                                className: "text-lg font-semibold text-foreground",
+                                children: title
+                            }),
+                            /*#__PURE__*/ jsx("p", {
+                                className: "mt-1 max-w-2xl text-sm leading-6 text-foreground-muted",
+                                children: body
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+                children: children
+            })
+        ]
+    });
+}
+function LayoutPreviewsPage() {
+    return /*#__PURE__*/ jsx("main", {
+        className: "min-h-screen bg-surface text-foreground",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "mx-auto max-w-6xl px-6 py-12 lg:px-10 lg:py-16",
+            children: [
+                /*#__PURE__*/ jsxs("header", {
+                    className: "max-w-3xl",
+                    children: [
+                        /*#__PURE__*/ jsx("p", {
+                            className: "text-xs font-semibold uppercase tracking-[0.12em] text-brand",
+                            children: "Canvas templates"
+                        }),
+                        /*#__PURE__*/ jsx("h1", {
+                            className: "mt-3 text-3xl font-semibold tracking-[-0.04em] sm:text-4xl",
+                            children: "Flow layout previews"
+                        }),
+                        /*#__PURE__*/ jsx("p", {
+                            className: "mt-4 max-w-2xl text-base leading-7 text-foreground-muted",
+                            children: "Every layout the Flow Workbench composes, at a glance. The highlighted region is what each layout adds. Select a card to open the live story."
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "mt-6 flex flex-wrap items-center gap-4 text-xs text-foreground-muted",
+                            children: [
+                                /*#__PURE__*/ jsxs("span", {
+                                    className: "flex items-center gap-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "size-3 rounded-sm border border-brand bg-brand-subtle"
+                                        }),
+                                        "Region this layout adds"
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("span", {
+                                    className: "flex items-center gap-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "size-3 rounded-sm border border-border-subtle bg-surface-raised"
+                                        }),
+                                        "Shared shell"
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Section, {
+                    icon: LayoutPanelTop,
+                    eyebrow: "Standalone",
+                    title: "Apollo owns the composition",
+                    body: "Panels float within the canvas and keep Apollo spacing and radius. Use these when the canvas is the primary product surface.",
+                    children: standalonePreviews.map((item)=>/*#__PURE__*/ jsx(PreviewCard, {
+                            ...item
+                        }, item.name))
+                }),
+                /*#__PURE__*/ jsx(Section, {
+                    icon: PanelsTopLeft,
+                    eyebrow: "VS Code",
+                    title: "The workbench owns the composition",
+                    body: "Dockview owns tabs, splits, drop targets, and resizing. Apollo supplies the same panel content that Standalone uses.",
+                    children: vsCodePreviews.map((item)=>/*#__PURE__*/ jsx(PreviewCard, {
+                            ...item
+                        }, item.name))
+                }),
+                /*#__PURE__*/ jsx(Section, {
+                    icon: PanelRight,
+                    eyebrow: "Right panel content",
+                    title: "What fills the right panel",
+                    body: "The Workbench right panel accepts different content types. The shell stays the same, only the panel body changes.",
+                    children: contentPreviews.map(({ variant, ...item })=>/*#__PURE__*/ jsx(PreviewCard, {
+                            ...item,
+                            preview: /*#__PURE__*/ jsx(StandaloneShell, {
+                                sidebar: "rail",
+                                right: true,
+                                highlight: [
+                                    'right'
+                                ],
+                                rightContent: contentBodies[variant]
+                            })
+                        }, item.name))
+                })
+            ]
+        })
+    });
+}
+export { LayoutPreviewsPage };