mirror of
https://github.com/PrefectHQ/fastmcp.git
synced 2026-08-09 07:09:11 +02:00
1 line
80 KiB
JavaScript
1 line
80 KiB
JavaScript
window.__FASTMCP_PREFAB_DEMOS__ = {"bar-chart":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n</head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"p-6\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"BarChart\",\n \"data\": [\n {\n \"quarter\": \"Q1\",\n \"revenue\": 42000,\n \"costs\": 28000\n },\n {\n \"quarter\": \"Q2\",\n \"revenue\": 51000,\n \"costs\": 31000\n },\n {\n \"quarter\": \"Q3\",\n \"revenue\": 47000,\n \"costs\": 29000\n },\n {\n \"quarter\": \"Q4\",\n \"revenue\": 63000,\n \"costs\": 35000\n }\n ],\n \"series\": [\n {\n \"dataKey\": \"revenue\",\n \"label\": \"Revenue\"\n },\n {\n \"dataKey\": \"costs\",\n \"label\": \"Costs\"\n }\n ],\n \"xAxis\": \"quarter\",\n \"height\": 250,\n \"stacked\": false,\n \"horizontal\": false,\n \"barRadius\": 4,\n \"showLegend\": true,\n \"showTooltip\": true,\n \"animate\": true,\n \"showGrid\": true,\n \"showYAxis\": true,\n \"yAxisFormat\": \"auto\"\n }\n ]\n }\n ]\n }\n}</script>\n</body>\n</html>","contacts":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n</head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 p-6\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"DataTable\",\n \"columns\": [\n {\n \"key\": \"name\",\n \"header\": \"Name\",\n \"sortable\": true\n },\n {\n \"key\": \"email\",\n \"header\": \"Email\",\n \"sortable\": false\n },\n {\n \"key\": \"category\",\n \"header\": \"Category\",\n \"sortable\": false\n }\n ],\n \"rows\": [\n {\n \"name\": \"Arthur Dent\",\n \"email\": \"arthur@earth.com\",\n \"category\": {\n \"type\": \"Badge\",\n \"label\": \"Customer\",\n \"variant\": \"success\"\n }\n },\n {\n \"name\": \"Ford Prefect\",\n \"email\": \"ford@betelgeuse.org\",\n \"category\": {\n \"type\": \"Badge\",\n \"label\": \"Partner\",\n \"variant\": \"secondary\"\n }\n },\n {\n \"name\": \"Trillian Astra\",\n \"email\": \"trillian@heartofgold.com\",\n \"category\": {\n \"type\": \"Badge\",\n \"label\": \"Customer\",\n \"variant\": \"success\"\n }\n },\n {\n \"name\": \"Zaphod Beeblebrox\",\n \"email\": \"zaphod@galaxy.gov\",\n \"category\": {\n \"type\": \"Badge\",\n \"label\": \"Vendor\",\n \"variant\": \"outline\"\n }\n }\n ],\n \"search\": true,\n \"paginated\": false,\n \"pageSize\": 10\n },\n {\n \"type\": \"Separator\",\n \"orientation\": \"horizontal\"\n },\n {\n \"content\": \"Add Contact\",\n \"type\": \"H3\"\n },\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Form\",\n \"onSubmit\": {\n \"action\": \"showToast\",\n \"message\": \"Contact saved! (preview demo \\u2014 no backend wired)\",\n \"variant\": \"success\"\n },\n \"children\": [\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"name\": \"name\",\n \"type\": \"Input\",\n \"inputType\": \"text\",\n \"placeholder\": \"Full name\",\n \"disabled\": false,\n \"readOnly\": false,\n \"required\": true\n },\n {\n \"name\": \"email\",\n \"type\": \"Input\",\n \"inputType\": \"text\",\n \"placeholder\": \"name@example.com\",\n \"disabled\": false,\n \"readOnly\": false,\n \"required\": true\n }\n ]\n },\n {\n \"name\": \"category\",\n \"type\": \"Select\",\n \"size\": \"default\",\n \"disabled\": false,\n \"required\": false,\n \"invalid\": false,\n \"children\": [\n {\n \"type\": \"SelectOption\",\n \"value\": \"Customer\",\n \"label\": \"Customer\",\n \"selected\": false,\n \"disabled\": false\n },\n {\n \"type\": \"SelectOption\",\n \"value\": \"Partner\",\n \"label\": \"Partner\",\n \"selected\": false,\n \"disabled\": false\n },\n {\n \"type\": \"SelectOption\",\n \"value\": \"Vendor\",\n \"label\": \"Vendor\",\n \"selected\": false,\n \"disabled\": false\n }\n ]\n },\n {\n \"type\": \"Button\",\n \"label\": \"Save Contact\",\n \"variant\": \"default\",\n \"size\": \"default\",\n \"disabled\": false\n }\n ]\n }\n ]\n }\n ]\n }\n}</script>\n</body>\n</html>","dashboard":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n</head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 p-6\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"cssClass\": \"gap-6\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"type\": \"Metric\",\n \"label\": \"Revenue (Q1-Q4)\",\n \"value\": \"$220,500\"\n },\n {\n \"type\": \"Metric\",\n \"label\": \"Deals\",\n \"value\": \"4\"\n }\n ]\n },\n {\n \"type\": \"BarChart\",\n \"data\": [\n {\n \"month\": \"Jan\",\n \"revenue\": 48200,\n \"costs\": 31000\n },\n {\n \"month\": \"Feb\",\n \"revenue\": 52100,\n \"costs\": 32500\n },\n {\n \"month\": \"Mar\",\n \"revenue\": 61800,\n \"costs\": 34200\n },\n {\n \"month\": \"Apr\",\n \"revenue\": 58400,\n \"costs\": 33800\n }\n ],\n \"series\": [\n {\n \"dataKey\": \"revenue\",\n \"label\": \"Revenue\"\n },\n {\n \"dataKey\": \"costs\",\n \"label\": \"Costs\"\n }\n ],\n \"xAxis\": \"month\",\n \"height\": 200,\n \"stacked\": false,\n \"horizontal\": false,\n \"barRadius\": 4,\n \"showLegend\": true,\n \"showTooltip\": true,\n \"animate\": true,\n \"showGrid\": true,\n \"showYAxis\": true,\n \"yAxisFormat\": \"auto\"\n },\n {\n \"type\": \"Separator\",\n \"orientation\": \"horizontal\"\n },\n {\n \"type\": \"DataTable\",\n \"columns\": [\n {\n \"key\": \"account\",\n \"header\": \"Account\",\n \"sortable\": true\n },\n {\n \"key\": \"value\",\n \"header\": \"Value\",\n \"sortable\": true\n },\n {\n \"key\": \"stage\",\n \"header\": \"Stage\",\n \"sortable\": false\n }\n ],\n \"rows\": [\n {\n \"account\": \"Acme Corp\",\n \"value\": \"$84,000\",\n \"stage\": {\n \"type\": \"Badge\",\n \"label\": \"Won\",\n \"variant\": \"success\"\n }\n },\n {\n \"account\": \"Globex Inc\",\n \"value\": \"$52,000\",\n \"stage\": {\n \"type\": \"Badge\",\n \"label\": \"Negotiation\",\n \"variant\": \"secondary\"\n }\n },\n {\n \"account\": \"Initech\",\n \"value\": \"$31,500\",\n \"stage\": {\n \"type\": \"Badge\",\n \"label\": \"Proposal\",\n \"variant\": \"secondary\"\n }\n },\n {\n \"account\": \"Wayne Enterprises\",\n \"value\": \"$45,000\",\n \"stage\": {\n \"type\": \"Badge\",\n \"label\": \"Lost\",\n \"variant\": \"destructive\"\n }\n }\n ],\n \"search\": false,\n \"paginated\": false,\n \"pageSize\": 10\n }\n ]\n }\n ]\n }\n}</script>\n</body>\n</html>","data-table":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n</head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 p-6\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"DataTable\",\n \"columns\": [\n {\n \"key\": \"name\",\n \"header\": \"Name\",\n \"sortable\": true\n },\n {\n \"key\": \"role\",\n \"header\": \"Role\",\n \"sortable\": true\n },\n {\n \"key\": \"dept\",\n \"header\": \"Dept\",\n \"sortable\": true\n }\n ],\n \"rows\": [\n {\n \"name\": \"Alice Chen\",\n \"role\": \"Staff Engineer\",\n \"dept\": \"Platform\"\n },\n {\n \"name\": \"Bob Martinez\",\n \"role\": \"Lead Designer\",\n \"dept\": \"Design\"\n },\n {\n \"name\": \"Carol Johnson\",\n \"role\": \"Senior Engineer\",\n \"dept\": \"Platform\"\n },\n {\n \"name\": \"David Kim\",\n \"role\": \"Product Manager\",\n \"dept\": \"Product\"\n },\n {\n \"name\": \"Eva Mueller\",\n \"role\": \"Engineer\",\n \"dept\": \"Platform\"\n },\n {\n \"name\": \"Frank Lee\",\n \"role\": \"Data Scientist\",\n \"dept\": \"ML\"\n },\n {\n \"name\": \"Grace Park\",\n \"role\": \"Eng Manager\",\n \"dept\": \"Platform\"\n }\n ],\n \"search\": true,\n \"paginated\": false,\n \"pageSize\": 10\n }\n ]\n }\n ]\n }\n}</script>\n</body>\n</html>","hitchhikers":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab Showcase</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n<style>html, body, #root { background: transparent !important; }</style></head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"onMount\": {\n \"action\": \"setInterval\",\n \"duration\": 400,\n \"onTick\": {\n \"action\": \"setState\",\n \"key\": \"ctx_tick\",\n \"value\": \"{{ ctx_tick + 1 }}\"\n }\n },\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n \"type\": \"Grid\",\n \"children\": [\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Register Towel\"\n },\n {\n \"type\": \"CardDescription\",\n \"content\": \"The most important item in the galaxy\"\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-3\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"name\": \"combobox_1\",\n \"type\": \"Combobox\",\n \"placeholder\": \"Type...\",\n \"searchPlaceholder\": \"Search types...\",\n \"disabled\": false,\n \"invalid\": false,\n \"children\": [\n {\n \"type\": \"ComboboxOption\",\n \"value\": \"bath\",\n \"label\": \"Bath\",\n \"disabled\": false\n },\n {\n \"type\": \"ComboboxOption\",\n \"value\": \"beach\",\n \"label\": \"Beach\",\n \"disabled\": false\n },\n {\n \"type\": \"ComboboxOption\",\n \"value\": \"interstellar\",\n \"label\": \"Interstellar\",\n \"disabled\": false\n },\n {\n \"type\": \"ComboboxOption\",\n \"value\": \"micro\",\n \"label\": \"Microfiber\",\n \"disabled\": false\n }\n ]\n },\n {\n \"name\": \"datepicker_1\",\n \"type\": \"DatePicker\",\n \"placeholder\": \"Registration date\"\n }\n ]\n }\n ]\n },\n {\n \"type\": \"CardFooter\",\n \"children\": [\n {\n \"cssClass\": \"gap-2\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"type\": \"Dialog\",\n \"title\": \"Towel Registered!\",\n \"description\": \"Your towel has been added to the galactic registry.\",\n \"dismissible\": true,\n \"children\": [\n {\n \"type\": \"Button\",\n \"label\": \"Register\",\n \"variant\": \"default\",\n \"size\": \"default\",\n \"disabled\": false\n },\n {\n \"content\": \"Don't forget to bring it.\",\n \"type\": \"Text\"\n }\n ]\n },\n {\n \"type\": \"Button\",\n \"label\": \"Cancel\",\n \"variant\": \"outline\",\n \"size\": \"default\",\n \"disabled\": false\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Condition\",\n \"cases\": [\n {\n \"when\": \"{{ !pressed }}\",\n \"children\": [\n {\n \"type\": \"Button\",\n \"label\": \"This is probably the best button to press.\",\n \"variant\": \"success\",\n \"size\": \"default\",\n \"disabled\": false,\n \"onClick\": {\n \"action\": \"setState\",\n \"key\": \"pressed\",\n \"value\": true\n }\n }\n ]\n }\n ],\n \"else\": [\n {\n \"type\": \"Button\",\n \"label\": \"Please do not press this button again.\",\n \"variant\": \"destructive\",\n \"size\": \"default\",\n \"disabled\": false,\n \"onClick\": {\n \"action\": \"setState\",\n \"key\": \"pressed\",\n \"value\": false\n }\n }\n ]\n },\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Ship Status\"\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-3\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"cssClass\": \"items-center justify-between\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"content\": \"heart-of-gold\",\n \"type\": \"Text\"\n },\n {\n \"type\": \"HoverCard\",\n \"openDelay\": 0,\n \"closeDelay\": 200,\n \"children\": [\n {\n \"type\": \"Badge\",\n \"label\": \"In Orbit\",\n \"variant\": \"default\"\n },\n {\n \"cssClass\": \"gap-2\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"content\": \"heart-of-gold\",\n \"type\": \"Text\"\n },\n {\n \"content\": \"Deployed 2h ago\",\n \"type\": \"Muted\"\n },\n {\n \"type\": \"Progress\",\n \"value\": 100.0,\n \"max\": 100.0,\n \"variant\": \"success\",\n \"size\": \"default\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"cssClass\": \"pf-progress-flat\",\n \"type\": \"Progress\",\n \"value\": 100.0,\n \"max\": 100.0,\n \"variant\": \"default\",\n \"size\": \"default\",\n \"indicatorClass\": \"bg-yellow-400\"\n },\n {\n \"cssClass\": \"items-center justify-between\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"content\": \"vogon-poetry\",\n \"type\": \"Text\"\n },\n {\n \"type\": \"Tooltip\",\n \"content\": \"64% \\u2014 ETA 12 min\",\n \"delay\": 0,\n \"children\": [\n {\n \"type\": \"Badge\",\n \"variant\": \"secondary\",\n \"children\": [\n {\n \"type\": \"Loader\",\n \"variant\": \"spin\",\n \"size\": \"sm\"\n },\n {\n \"content\": \"Deploying\",\n \"type\": \"Text\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Progress\",\n \"value\": 64.0,\n \"max\": 100.0,\n \"variant\": \"default\",\n \"size\": \"default\"\n },\n {\n \"cssClass\": \"items-center justify-between\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"content\": \"deep-thought\",\n \"type\": \"Text\"\n },\n {\n \"type\": \"Tooltip\",\n \"content\": \"Computing... 7.5 million years remaining\",\n \"delay\": 0,\n \"children\": [\n {\n \"type\": \"Badge\",\n \"variant\": \"outline\",\n \"children\": [\n {\n \"type\": \"Loader\",\n \"variant\": \"ios\",\n \"size\": \"sm\"\n },\n {\n \"content\": \"Soon...\",\n \"type\": \"Text\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Progress\",\n \"value\": 12.0,\n \"max\": 100.0,\n \"variant\": \"default\",\n \"size\": \"default\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Planet Ratings\"\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"type\": \"RadarChart\",\n \"data\": [\n {\n \"axis\": \"Views\",\n \"earth\": 30,\n \"mag\": 95\n },\n {\n \"axis\": \"Fjords\",\n \"earth\": 65,\n \"mag\": 100\n },\n {\n \"axis\": \"Pubs\",\n \"earth\": 90,\n \"mag\": 10\n },\n {\n \"axis\": \"Mice\",\n \"earth\": 40,\n \"mag\": 85\n },\n {\n \"axis\": \"Tea\",\n \"earth\": 95,\n \"mag\": 15\n },\n {\n \"axis\": \"Safety\",\n \"earth\": 45,\n \"mag\": 70\n }\n ],\n \"series\": [\n {\n \"dataKey\": \"earth\",\n \"label\": \"Earth\"\n },\n {\n \"dataKey\": \"mag\",\n \"label\": \"Magrathea\"\n }\n ],\n \"axisKey\": \"axis\",\n \"height\": 200,\n \"filled\": true,\n \"showDots\": false,\n \"showLegend\": true,\n \"showTooltip\": true,\n \"animate\": true,\n \"showGrid\": true\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Survival Odds\"\n }\n ]\n },\n {\n \"cssClass\": \"w-fit mx-auto\",\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"type\": \"Ring\",\n \"value\": 42.0,\n \"min\": 0,\n \"max\": 100,\n \"label\": \"42%\",\n \"variant\": \"info\",\n \"size\": \"lg\",\n \"thickness\": 12.0,\n \"indicatorClass\": \"group-hover:drop-shadow-[0_0_24px_rgba(59,130,246,0.9)]\"\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"cssClass\": \"gap-2 items-center\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Improbability Drive\"\n },\n {\n \"cssClass\": \"text-blue-500\",\n \"type\": \"Loader\",\n \"variant\": \"pulse\",\n \"size\": \"sm\"\n }\n ]\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-2\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"name\": \"improbability\",\n \"value\": 42.0,\n \"type\": \"Slider\",\n \"min\": 0.0,\n \"max\": 100.0,\n \"disabled\": false,\n \"size\": \"default\"\n },\n {\n \"cssClass\": \"items-center justify-between\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"content\": \"Probable\",\n \"type\": \"Muted\"\n },\n {\n \"content\": \"Infinite\",\n \"type\": \"Muted\"\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Carousel\",\n \"visible\": 1,\n \"gap\": 16,\n \"direction\": \"up\",\n \"loop\": true,\n \"autoAdvance\": 3000,\n \"continuous\": false,\n \"speed\": 2,\n \"effect\": \"slide\",\n \"dimInactive\": false,\n \"showControls\": false,\n \"controlsPosition\": \"outside\",\n \"showDots\": false,\n \"pauseOnHover\": true,\n \"align\": \"start\",\n \"slidesToScroll\": 1,\n \"drag\": true,\n \"children\": [\n {\n \"type\": \"Alert\",\n \"variant\": \"success\",\n \"icon\": \"circle-check\",\n \"children\": [\n {\n \"type\": \"AlertTitle\",\n \"content\": \"Don't Panic\"\n },\n {\n \"type\": \"AlertDescription\",\n \"content\": \"Normality achieved.\"\n }\n ]\n },\n {\n \"type\": \"Alert\",\n \"variant\": \"destructive\",\n \"icon\": \"triangle-alert\",\n \"children\": [\n {\n \"type\": \"AlertTitle\",\n \"content\": \"Display Department\"\n },\n {\n \"type\": \"AlertDescription\",\n \"content\": \"Beware of the leopard.\"\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Prefect Horizon Config\"\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-3\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"name\": \"autoscale\",\n \"value\": true,\n \"type\": \"Switch\",\n \"label\": \"Auto-scale agents\",\n \"size\": \"default\",\n \"disabled\": false,\n \"required\": false\n },\n {\n \"type\": \"Separator\",\n \"orientation\": \"horizontal\"\n },\n {\n \"name\": \"code_mode\",\n \"value\": true,\n \"type\": \"Switch\",\n \"label\": \"Code Mode\",\n \"size\": \"default\",\n \"disabled\": false,\n \"required\": false\n },\n {\n \"type\": \"Separator\",\n \"orientation\": \"horizontal\"\n },\n {\n \"name\": \"cache\",\n \"value\": false,\n \"type\": \"Switch\",\n \"label\": \"Tool call caching\",\n \"size\": \"default\",\n \"disabled\": false,\n \"required\": false\n }\n ]\n }\n ]\n },\n {\n \"type\": \"CardFooter\",\n \"children\": [\n {\n \"type\": \"Button\",\n \"label\": \"Save Preferences\",\n \"variant\": \"default\",\n \"size\": \"default\",\n \"disabled\": false,\n \"onClick\": {\n \"action\": \"showToast\",\n \"message\": \"Preferences saved!\"\n }\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Travel Class\"\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"name\": \"travel_class\",\n \"type\": \"RadioGroup\",\n \"children\": [\n {\n \"name\": \"radio_1\",\n \"value\": false,\n \"type\": \"Radio\",\n \"option\": \"economy\",\n \"label\": \"Economy\",\n \"disabled\": false,\n \"required\": false\n },\n {\n \"name\": \"radio_2\",\n \"value\": false,\n \"type\": \"Radio\",\n \"option\": \"business\",\n \"label\": \"Business Class\",\n \"disabled\": false,\n \"required\": false\n },\n {\n \"name\": \"radio_3\",\n \"value\": true,\n \"type\": \"Radio\",\n \"option\": \"improbability\",\n \"label\": \"Infinite Improbability\",\n \"disabled\": false,\n \"required\": false\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"cssClass\": \"md:col-span-2\",\n \"type\": \"GridItem\",\n \"colSpan\": 1,\n \"rowSpan\": 1,\n \"children\": [\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 grid-cols-2 h-32\",\n \"type\": \"Grid\",\n \"children\": [\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Context Window\"\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-6 justify-center h-full\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"cssClass\": \"items-center justify-between\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"content\": \"{{ ctx_tick % 20 * 3 + 20 }}% used\",\n \"type\": \"Text\"\n },\n {\n \"content\": \"{{ (ctx_tick % 20 * 3 + 20) * 2 }}k / 200k tokens\",\n \"type\": \"Muted\"\n }\n ]\n },\n {\n \"type\": \"Tooltip\",\n \"content\": \"Auto-compact buffer: 12%\",\n \"delay\": 0,\n \"children\": [\n {\n \"type\": \"Progress\",\n \"value\": \"{{ ctx_tick % 20 * 3 + 20 }}\",\n \"max\": 100.0,\n \"variant\": \"{{ ctx_tick % 20 * 3 + 20 > 70 ? 'destructive' : (ctx_tick % 20 * 3 + 20 <= 33 ? 'success' : 'default') }}\",\n \"size\": \"default\"\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"cssClass\": \"pb-0 gap-0\",\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"type\": \"Metric\",\n \"label\": \"Fjords designed\",\n \"value\": \"1,847\",\n \"delta\": \"+3 coastlines\"\n }\n ]\n },\n {\n \"cssClass\": \"h-16\",\n \"type\": \"Sparkline\",\n \"data\": [\n 820,\n 950,\n 1100,\n 980,\n 1250,\n 1400,\n 1350,\n 1500,\n 1680,\n 1847\n ],\n \"variant\": \"success\",\n \"fill\": true,\n \"curve\": \"linear\",\n \"strokeWidth\": 1.5\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Towel Incidents\"\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"type\": \"BarChart\",\n \"data\": [\n {\n \"month\": \"Jan\",\n \"lost\": 8,\n \"found\": 5\n },\n {\n \"month\": \"Feb\",\n \"lost\": 24,\n \"found\": 15\n },\n {\n \"month\": \"Mar\",\n \"lost\": 12,\n \"found\": 28\n },\n {\n \"month\": \"Apr\",\n \"lost\": 35,\n \"found\": 19\n },\n {\n \"month\": \"May\",\n \"lost\": 18,\n \"found\": 38\n },\n {\n \"month\": \"Jun\",\n \"lost\": 42,\n \"found\": 30\n }\n ],\n \"series\": [\n {\n \"dataKey\": \"lost\",\n \"label\": \"Lost\"\n },\n {\n \"dataKey\": \"found\",\n \"label\": \"Found\"\n }\n ],\n \"xAxis\": \"month\",\n \"height\": 200,\n \"stacked\": false,\n \"horizontal\": false,\n \"barRadius\": 4,\n \"showLegend\": true,\n \"showTooltip\": true,\n \"animate\": true,\n \"showGrid\": true,\n \"showYAxis\": true,\n \"yAxisFormat\": \"auto\"\n }\n ]\n }\n ]\n },\n {\n \"cssClass\": \"gap-4 grid-cols-2\",\n \"type\": \"Grid\",\n \"children\": [\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-2\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"name\": \"checkbox_1\",\n \"value\": true,\n \"type\": \"Checkbox\",\n \"label\": \"Towel packed\",\n \"disabled\": false,\n \"required\": false\n },\n {\n \"name\": \"checkbox_2\",\n \"value\": true,\n \"type\": \"Checkbox\",\n \"label\": \"Guide charged\",\n \"disabled\": false,\n \"required\": false\n },\n {\n \"name\": \"checkbox_3\",\n \"value\": false,\n \"type\": \"Checkbox\",\n \"label\": \"Babel fish inserted\",\n \"disabled\": false,\n \"required\": false\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"type\": \"CardTitle\",\n \"content\": \"Marvin's Mood\"\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-3\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"content\": \"How's life?\",\n \"type\": \"P\"\n },\n {\n \"cssClass\": \"gap-2\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"Button\",\n \"label\": \"Meh\",\n \"variant\": \"default\",\n \"size\": \"default\",\n \"disabled\": false,\n \"onClick\": {\n \"action\": \"showToast\",\n \"message\": \"Noted. Enthusiasm levels nominal.\"\n }\n },\n {\n \"type\": \"Button\",\n \"label\": \"Depressed\",\n \"variant\": \"info\",\n \"size\": \"default\",\n \"disabled\": false,\n \"onClick\": {\n \"action\": \"showToast\",\n \"message\": \"I think you ought to know I'm feeling very depressed.\"\n }\n },\n {\n \"type\": \"Button\",\n \"label\": \"Don't talk to me about life\",\n \"variant\": \"warning\",\n \"size\": \"default\",\n \"disabled\": false,\n \"onClick\": {\n \"action\": \"showToast\",\n \"message\": \"Brain the size of a planet and they ask me to pick up a piece of paper.\"\n }\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-2 items-center\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"type\": \"Loader\",\n \"variant\": \"dots\",\n \"size\": \"sm\"\n },\n {\n \"content\": \"Marvin is thinking...\",\n \"type\": \"Muted\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"type\": \"DataTable\",\n \"columns\": [\n {\n \"key\": \"crew\",\n \"header\": \"Crew\",\n \"sortable\": true\n },\n {\n \"key\": \"species\",\n \"header\": \"Species\",\n \"sortable\": true\n },\n {\n \"key\": \"towel\",\n \"header\": \"Towel?\",\n \"sortable\": true\n },\n {\n \"key\": \"status\",\n \"header\": \"Status\",\n \"sortable\": true\n }\n ],\n \"rows\": [\n {\n \"crew\": \"Arthur Dent\",\n \"species\": \"Human\",\n \"towel\": \"Yes\",\n \"status\": \"Confused\"\n },\n {\n \"crew\": \"Ford Prefect\",\n \"species\": \"Betelgeusian\",\n \"towel\": \"Always\",\n \"status\": \"Drinking\"\n },\n {\n \"crew\": \"Zaphod\",\n \"species\": \"Betelgeusian\",\n \"towel\": \"Lost it\",\n \"status\": \"Presidential\"\n },\n {\n \"crew\": \"Trillian\",\n \"species\": \"Human\",\n \"towel\": \"Yes\",\n \"status\": \"Navigating\"\n },\n {\n \"crew\": \"Marvin\",\n \"species\": \"Android\",\n \"towel\": \"No point\",\n \"status\": \"Depressed\"\n },\n {\n \"crew\": \"Slartibartfast\",\n \"species\": \"Magrathean\",\n \"towel\": \"Somewhere\",\n \"status\": \"Designing\"\n }\n ],\n \"search\": true,\n \"paginated\": false,\n \"pageSize\": 10\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n },\n \"state\": {\n \"ctx_tick\": 0,\n \"improbability\": 42\n }\n}</script>\n</body>\n</html>","pie-chart":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n</head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"p-6\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"type\": \"PieChart\",\n \"data\": [\n {\n \"category\": \"Bug\",\n \"count\": 42\n },\n {\n \"category\": \"Feature\",\n \"count\": 28\n },\n {\n \"category\": \"Docs\",\n \"count\": 15\n },\n {\n \"category\": \"Infra\",\n \"count\": 10\n }\n ],\n \"dataKey\": \"count\",\n \"nameKey\": \"category\",\n \"height\": 240,\n \"innerRadius\": 50,\n \"showLabel\": false,\n \"paddingAngle\": 0,\n \"showLegend\": true,\n \"showTooltip\": true,\n \"animate\": true\n }\n ]\n }\n ]\n }\n}</script>\n</body>\n</html>","reactive":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n</head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 p-6\",\n \"let\": {\n \"data\": \"{{ region == 'south' ? south : region == 'west' ? west : north }}\"\n },\n \"type\": \"Column\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 items-center\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"cssClass\": \"w-40\",\n \"name\": \"region\",\n \"type\": \"Select\",\n \"size\": \"default\",\n \"disabled\": false,\n \"required\": false,\n \"invalid\": false,\n \"children\": [\n {\n \"type\": \"SelectOption\",\n \"value\": \"north\",\n \"label\": \"North\",\n \"selected\": false,\n \"disabled\": false\n },\n {\n \"type\": \"SelectOption\",\n \"value\": \"south\",\n \"label\": \"South\",\n \"selected\": false,\n \"disabled\": false\n },\n {\n \"type\": \"SelectOption\",\n \"value\": \"west\",\n \"label\": \"West\",\n \"selected\": false,\n \"disabled\": false\n }\n ]\n },\n {\n \"cssClass\": \"ml-auto\",\n \"name\": \"show_target\",\n \"value\": false,\n \"type\": \"Switch\",\n \"size\": \"default\",\n \"disabled\": false,\n \"required\": false\n },\n {\n \"cssClass\": \"text-sm text-muted-foreground\",\n \"content\": \"Show target\",\n \"type\": \"Text\"\n }\n ]\n },\n {\n \"type\": \"BarChart\",\n \"data\": \"{{ data }}\",\n \"series\": [\n {\n \"dataKey\": \"sales\",\n \"label\": \"Sales\"\n }\n ],\n \"xAxis\": \"month\",\n \"height\": 200,\n \"stacked\": false,\n \"horizontal\": false,\n \"barRadius\": 4,\n \"showLegend\": true,\n \"showTooltip\": true,\n \"animate\": true,\n \"showGrid\": true,\n \"showYAxis\": true,\n \"yAxisFormat\": \"auto\"\n },\n {\n \"type\": \"Condition\",\n \"cases\": [\n {\n \"when\": \"{{ show_target }}\",\n \"children\": [\n {\n \"type\": \"Metric\",\n \"label\": \"Q1 Target\",\n \"value\": \"$75,000\"\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n },\n \"state\": {\n \"region\": \"north\",\n \"north\": [\n {\n \"month\": \"Jan\",\n \"sales\": 22000\n },\n {\n \"month\": \"Feb\",\n \"sales\": 25500\n },\n {\n \"month\": \"Mar\",\n \"sales\": 24200\n }\n ],\n \"south\": [\n {\n \"month\": \"Jan\",\n \"sales\": 5800\n },\n {\n \"month\": \"Feb\",\n \"sales\": 6400\n },\n {\n \"month\": \"Mar\",\n \"sales\": 5600\n }\n ],\n \"west\": [\n {\n \"month\": \"Jan\",\n \"sales\": 6000\n },\n {\n \"month\": \"Feb\",\n \"sales\": 6000\n },\n {\n \"month\": \"Mar\",\n \"sales\": 5600\n }\n ],\n \"show_target\": true\n }\n}</script>\n</body>\n</html>","team-directory-reactive":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n</head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 p-6\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Grid\",\n \"columnTemplate\": \"1fr 2fr\",\n \"children\": [\n {\n \"type\": \"PieChart\",\n \"data\": [\n {\n \"office\": \"San Francisco\",\n \"count\": 3\n },\n {\n \"office\": \"New York\",\n \"count\": 2\n },\n {\n \"office\": \"London\",\n \"count\": 1\n },\n {\n \"office\": \"Berlin\",\n \"count\": 1\n }\n ],\n \"dataKey\": \"count\",\n \"nameKey\": \"office\",\n \"height\": 300,\n \"innerRadius\": 0,\n \"showLabel\": false,\n \"paddingAngle\": 0,\n \"showLegend\": true,\n \"showTooltip\": true,\n \"animate\": true\n },\n {\n \"type\": \"DataTable\",\n \"columns\": [\n {\n \"key\": \"name\",\n \"header\": \"Name\",\n \"sortable\": true\n },\n {\n \"key\": \"role\",\n \"header\": \"Role\",\n \"sortable\": true\n },\n {\n \"key\": \"office\",\n \"header\": \"Office\",\n \"sortable\": true\n }\n ],\n \"rows\": [\n {\n \"name\": \"Alice Chen\",\n \"role\": \"Staff Engineer\",\n \"office\": \"San Francisco\",\n \"email\": \"alice@company.com\",\n \"projects\": 3\n },\n {\n \"name\": \"Bob Martinez\",\n \"role\": \"Lead Designer\",\n \"office\": \"New York\",\n \"email\": \"bob@company.com\",\n \"projects\": 5\n },\n {\n \"name\": \"Carol Johnson\",\n \"role\": \"Senior Engineer\",\n \"office\": \"London\",\n \"email\": \"carol@company.com\",\n \"projects\": 2\n },\n {\n \"name\": \"David Kim\",\n \"role\": \"Product Manager\",\n \"office\": \"San Francisco\",\n \"email\": \"david@company.com\",\n \"projects\": 7\n },\n {\n \"name\": \"Eva Mueller\",\n \"role\": \"Engineer\",\n \"office\": \"Berlin\",\n \"email\": \"eva@company.com\",\n \"projects\": 1\n },\n {\n \"name\": \"Frank Lee\",\n \"role\": \"Data Scientist\",\n \"office\": \"San Francisco\",\n \"email\": \"frank@company.com\",\n \"projects\": 4\n },\n {\n \"name\": \"Grace Park\",\n \"role\": \"Engineering Manager\",\n \"office\": \"New York\",\n \"email\": \"grace@company.com\",\n \"projects\": 6\n }\n ],\n \"search\": true,\n \"paginated\": false,\n \"pageSize\": 10,\n \"onRowClick\": {\n \"action\": \"setState\",\n \"key\": \"selected\",\n \"value\": \"{{ $event }}\"\n }\n }\n ]\n },\n {\n \"type\": \"Condition\",\n \"cases\": [\n {\n \"when\": \"{{ selected }}\",\n \"children\": [\n {\n \"type\": \"Card\",\n \"children\": [\n {\n \"type\": \"CardHeader\",\n \"children\": [\n {\n \"cssClass\": \"gap-2 items-center\",\n \"type\": \"Row\",\n \"children\": [\n {\n \"content\": \"{{ selected.name }}\",\n \"type\": \"H3\"\n },\n {\n \"type\": \"Badge\",\n \"label\": \"{{ selected.office }}\",\n \"variant\": \"default\"\n }\n ]\n }\n ]\n },\n {\n \"type\": \"CardContent\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 grid-cols-3\",\n \"type\": \"Grid\",\n \"children\": [\n {\n \"cssClass\": \"gap-0\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"content\": \"Role\",\n \"type\": \"Small\"\n },\n {\n \"content\": \"{{ selected.role }}\",\n \"type\": \"Text\"\n }\n ]\n },\n {\n \"cssClass\": \"gap-0\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"content\": \"Email\",\n \"type\": \"Small\"\n },\n {\n \"content\": \"{{ selected.email }}\",\n \"type\": \"Text\"\n }\n ]\n },\n {\n \"cssClass\": \"gap-0\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"content\": \"Active Projects\",\n \"type\": \"Small\"\n },\n {\n \"content\": \"{{ selected.projects }}\",\n \"type\": \"Text\"\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n },\n \"state\": {\n \"selected\": null\n }\n}</script>\n</body>\n</html>","team-directory":"<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Prefab</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" crossorigin href=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css\">\n <script type=\"module\" crossorigin src=\"https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js\"></script>\n</head>\n<body>\n <div id=\"root\" style=\"max-width:64rem;margin:0 auto;padding:2rem\"></div>\n <script id=\"prefab:initial-data\" type=\"application/json\">{\n \"$prefab\": {\n \"version\": \"0.2\"\n },\n \"view\": {\n \"cssClass\": \"pf-app-root\",\n \"type\": \"Div\",\n \"children\": [\n {\n \"cssClass\": \"gap-4 p-6\",\n \"type\": \"Column\",\n \"children\": [\n {\n \"cssClass\": \"gap-4\",\n \"type\": \"Grid\",\n \"columnTemplate\": \"1fr 2fr\",\n \"children\": [\n {\n \"type\": \"PieChart\",\n \"data\": [\n {\n \"office\": \"San Francisco\",\n \"count\": 3\n },\n {\n \"office\": \"New York\",\n \"count\": 2\n },\n {\n \"office\": \"London\",\n \"count\": 1\n },\n {\n \"office\": \"Berlin\",\n \"count\": 1\n }\n ],\n \"dataKey\": \"count\",\n \"nameKey\": \"office\",\n \"height\": 300,\n \"innerRadius\": 0,\n \"showLabel\": false,\n \"paddingAngle\": 0,\n \"showLegend\": true,\n \"showTooltip\": true,\n \"animate\": true\n },\n {\n \"type\": \"DataTable\",\n \"columns\": [\n {\n \"key\": \"name\",\n \"header\": \"Name\",\n \"sortable\": true\n },\n {\n \"key\": \"role\",\n \"header\": \"Role\",\n \"sortable\": true\n },\n {\n \"key\": \"office\",\n \"header\": \"Office\",\n \"sortable\": true\n }\n ],\n \"rows\": [\n {\n \"name\": \"Alice Chen\",\n \"role\": \"Staff Engineer\",\n \"office\": \"San Francisco\"\n },\n {\n \"name\": \"Bob Martinez\",\n \"role\": \"Lead Designer\",\n \"office\": \"New York\"\n },\n {\n \"name\": \"Carol Johnson\",\n \"role\": \"Senior Engineer\",\n \"office\": \"London\"\n },\n {\n \"name\": \"David Kim\",\n \"role\": \"Product Manager\",\n \"office\": \"San Francisco\"\n },\n {\n \"name\": \"Eva Mueller\",\n \"role\": \"Engineer\",\n \"office\": \"Berlin\"\n },\n {\n \"name\": \"Frank Lee\",\n \"role\": \"Data Scientist\",\n \"office\": \"San Francisco\"\n },\n {\n \"name\": \"Grace Park\",\n \"role\": \"Engineering Manager\",\n \"office\": \"New York\"\n }\n ],\n \"search\": true,\n \"paginated\": false,\n \"pageSize\": 10\n }\n ]\n }\n ]\n }\n ]\n }\n}</script>\n</body>\n</html>"};
|