@pen.dev/cli 0.2.8

package/dist/out/data/nitro.lib.pen

@@ -0,0 +1,4923 @@
+{
+  "version": "2.8",
+  "children": [
+    {
+      "type": "frame",
+      "id": "rgGjc",
+      "x": 0,
+      "y": 0,
+      "name": "nitro: design system components",
+      "theme": {
+        "Mode": "Light"
+      },
+      "clip": true,
+      "width": 3200,
+      "height": 4200,
+      "fill": "$--background",
+      "layout": "none",
+      "children": [
+        {
+          "type": "frame",
+          "id": "k1Tgo",
+          "x": 1000,
+          "y": 2400,
+          "name": "Sidebar",
+          "context": "Vertical sidebar navigation with app logo, grouped menu items with icons, and user account section at bottom for application navigation.",
+          "reusable": true,
+          "width": 280,
+          "height": "fill_container(640)",
+          "fill": "$--sidebar",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "outside",
+            "thickness": {
+              "right": 1
+            },
+            "fill": "$--sidebar-border"
+          },
+          "layout": "vertical",
+          "children": [
+            {
+              "type": "frame",
+              "id": "VYllj",
+              "name": "Sidebar Header",
+              "width": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "vertical",
+              "gap": 8,
+              "padding": 24,
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "l7RL5",
+                  "name": "logo",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1
+                  },
+                  "gap": 8,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "8JXzO",
+                      "name": "mark",
+                      "width": 24,
+                      "height": 24,
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1
+                      },
+                      "layout": "none",
+                      "children": [
+                        {
+                          "type": "rectangle",
+                          "id": "FMQdm",
+                          "x": 0,
+                          "y": 0,
+                          "name": "base",
+                          "fill": "#0f5ffeff",
+                          "width": 24,
+                          "height": 24,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1
+                          }
+                        },
+                        {
+                          "type": "path",
+                          "id": "3yEjL",
+                          "x": 0,
+                          "y": 0,
+                          "name": "base",
+                          "geometry": "M12 0l12 12-12 12-12-12 12-12z",
+                          "fill": "#e5eeffff",
+                          "width": 24,
+                          "height": 24,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1
+                          }
+                        },
+                        {
+                          "type": "rectangle",
+                          "id": "pMvB1",
+                          "x": 6,
+                          "y": 6,
+                          "name": "Rectangle 1",
+                          "fill": "#002266ff",
+                          "width": 12,
+                          "height": 12,
+                          "stroke": {
+                            "align": "inside",
+                            "thickness": 1
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "type": "text",
+                      "id": "lSLqU",
+                      "name": "Nitro",
+                      "fill": "$--sidebar-primary-foreground",
+                      "content": "Nitro",
+                      "lineHeight": 1,
+                      "fontFamily": "$--font-primary",
+                      "fontSize": 16,
+                      "fontWeight": "500"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "2c8Tk",
+              "name": "Sidebar Content",
+              "slot": [
+                "4jfFd",
+                "cpj5L",
+                "hZwCK"
+              ],
+              "width": "fill_container",
+              "height": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "vertical"
+            },
+            {
+              "type": "frame",
+              "id": "r93lc",
+              "name": "Sidebar Footer",
+              "width": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 8,
+              "padding": 24,
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "PEigC",
+                  "name": "Text",
+                  "width": "fill_container",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1
+                  },
+                  "layout": "vertical",
+                  "gap": 4,
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "iv8Ku",
+                      "name": "Name",
+                      "fill": "$--sidebar-foreground",
+                      "textGrowth": "fixed-width",
+                      "width": "fill_container",
+                      "content": "Joe Doe",
+                      "lineHeight": 1.5,
+                      "fontFamily": "$--font-primary",
+                      "fontSize": 16,
+                      "fontWeight": "500"
+                    },
+                    {
+                      "type": "text",
+                      "id": "dIC1K",
+                      "name": "Email",
+                      "fill": "$--sidebar-foreground",
+                      "textGrowth": "fixed-width",
+                      "width": "fill_container",
+                      "content": "joe@acmecorp.com",
+                      "lineHeight": 1.5,
+                      "fontFamily": "$--font-primary",
+                      "fontSize": 16,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "icon_font",
+                  "id": "iTy4X",
+                  "width": 24,
+                  "height": 24,
+                  "iconFontName": "ellipsis-vertical",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--sidebar-foreground"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "ZaNGp",
+          "x": 200,
+          "y": 3153,
+          "name": "Progress",
+          "context": "Horizontal progress bar with blue filled portion on gray background for visualizing task or loading completion percentage.",
+          "reusable": true,
+          "clip": true,
+          "width": 360,
+          "height": 16,
+          "fill": "$--accent",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--border"
+          },
+          "layout": "none",
+          "children": [
+            {
+              "type": "rectangle",
+              "id": "Lvl5A",
+              "x": 0,
+              "y": 0,
+              "name": "Progress",
+              "fill": "$--primary",
+              "width": 180,
+              "height": 16,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              }
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "1YXlW",
+          "x": 2200,
+          "y": 1424,
+          "name": "Radio Description/Selected",
+          "context": "An unselected radio button with label and supporting description text stacked vertically.",
+          "reusable": true,
+          "width": 400,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 8,
+          "children": [
+            {
+              "id": "nHN2V",
+              "type": "ref",
+              "ref": "WNAgm",
+              "x": 0,
+              "y": 0
+            },
+            {
+              "type": "frame",
+              "id": "vhRBd",
+              "name": "Text and supporting text",
+              "width": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "vertical",
+              "gap": 4,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "oQ1Oc",
+                  "name": "Label Text",
+                  "fill": "$--foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Pathfinder Neo",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "text",
+                  "id": "IHHiJ",
+                  "name": "Supporting text",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Compact rover optimized for short-range missions.",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "normal"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "DIw3s",
+          "x": 2200,
+          "y": 3943,
+          "name": "Tooltip",
+          "context": "Small tooltip popup with text label displaying contextual help or description when hovering over UI elements.",
+          "reusable": true,
+          "clip": true,
+          "fill": "$--popover",
+          "cornerRadius": "$--radius-xs",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--border"
+          },
+          "effect": {
+            "type": "shadow",
+            "shadowType": "outer",
+            "color": "#0000000f",
+            "offset": {
+              "x": 0,
+              "y": 2
+            },
+            "blur": 3.5,
+            "spread": -1
+          },
+          "gap": 8,
+          "padding": [
+            6,
+            12
+          ],
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "n9TMF",
+              "name": "Tooltip Text",
+              "fill": "$--foreground",
+              "content": "Tooltip",
+              "lineHeight": 1.4285714285714286,
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "iSf6e",
+          "x": 2200,
+          "y": 1796,
+          "name": "Switch/Checked",
+          "context": "Checked toggle switch with blue background and white circle on right, with label text for binary settings controls.",
+          "reusable": true,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 12,
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "5BqEF",
+              "name": "switch",
+              "clip": true,
+              "width": 32,
+              "height": 20,
+              "fill": "$--primary",
+              "cornerRadius": "$--radius-pill",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "padding": [
+                0,
+                4
+              ],
+              "justifyContent": "end",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "dLoqn",
+                  "name": "dot",
+                  "clip": true,
+                  "width": 12,
+                  "height": 12,
+                  "fill": "$--primary-foreground",
+                  "cornerRadius": "$--radius-pill",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1
+                  },
+                  "layout": "none"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "pioH2",
+              "name": "Switch Label",
+              "fill": "$--foreground",
+              "content": "Power-saving mode",
+              "lineHeight": 1.5,
+              "fontFamily": "$--font-primary",
+              "fontSize": 16,
+              "fontWeight": "normal"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "mFYne",
+          "x": 2200,
+          "y": 3591,
+          "name": "Textarea Group/Default",
+          "context": "A textarea group with label above an 80px tall input area.",
+          "reusable": true,
+          "width": 340,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "layout": "vertical",
+          "gap": 6,
+          "children": [
+            {
+              "type": "frame",
+              "id": "Z1MiM",
+              "name": "Label Text",
+              "width": "fill_container",
+              "fill": {
+                "type": "color",
+                "color": "$--white",
+                "enabled": false
+              },
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "Bh1if",
+                  "name": "Label Text",
+                  "fill": "$--foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Label Text",
+                  "lineHeight": 1.4285714285714286,
+                  "textAlignVertical": "middle",
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "500"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "fdaH0",
+              "name": "Textarea",
+              "width": "fill_container",
+              "height": 80,
+              "fill": "$--card",
+              "cornerRadius": "$--radius-none",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1,
+                "fill": "$--input"
+              },
+              "gap": 8,
+              "padding": [
+                12,
+                16
+              ],
+              "children": [
+                {
+                  "type": "text",
+                  "id": "RsVzA",
+                  "name": "Input Value",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Placeholder",
+                  "lineHeight": 1.4285714285714286,
+                  "textAlignVertical": "middle",
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "normal"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "duDYz",
+          "x": 2200,
+          "y": 3319,
+          "name": "Input OTP Group/Default",
+          "context": "An input group for one-time password entry, featuring segmented input boxes for individual digit entry.",
+          "reusable": true,
+          "width": 274,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "layout": "vertical",
+          "gap": 6,
+          "children": [
+            {
+              "type": "frame",
+              "id": "DxhGi",
+              "name": "Label Text",
+              "width": "fill_container",
+              "fill": {
+                "type": "color",
+                "color": "$--white",
+                "enabled": false
+              },
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "UPxWE",
+                  "name": "Label Text",
+                  "fill": "$--foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Label Text",
+                  "lineHeight": 1.4285714285714286,
+                  "textAlignVertical": "middle",
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "500"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "RwxPv",
+              "name": "Input OTP Container",
+              "width": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": -1,
+              "justifyContent": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "FIZAO",
+                  "name": "Input OTP",
+                  "clip": true,
+                  "width": "fill_container",
+                  "height": 40,
+                  "fill": "$--card",
+                  "cornerRadius": "$--radius-none",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "$--input"
+                  },
+                  "layout": "vertical",
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "pxiyT",
+                      "name": "0",
+                      "enabled": false,
+                      "fill": "$--foreground",
+                      "content": "0",
+                      "lineHeight": 1.4285714285714286,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "yksK3",
+                  "name": "Input OTP",
+                  "clip": true,
+                  "width": "fill_container",
+                  "height": 40,
+                  "fill": "$--card",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "$--input"
+                  },
+                  "layout": "vertical",
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "6oQRn",
+                      "name": "0",
+                      "enabled": false,
+                      "fill": "$--foreground",
+                      "content": "0",
+                      "lineHeight": 1.4285714285714286,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "T0LsE",
+                  "name": "Input OTP",
+                  "clip": true,
+                  "width": "fill_container",
+                  "height": 40,
+                  "fill": "$--card",
+                  "cornerRadius": "$--radius-none",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "$--input"
+                  },
+                  "layout": "vertical",
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "BMNue",
+                      "name": "0",
+                      "enabled": false,
+                      "fill": "$--foreground",
+                      "content": "0",
+                      "lineHeight": 1.4285714285714286,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "Z30aA",
+                  "name": "Input OTP Divider",
+                  "clip": true,
+                  "width": 40,
+                  "height": 40,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": {
+                      "top": 1,
+                      "bottom": 1,
+                      "left": 1
+                    }
+                  },
+                  "layout": "vertical",
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "secdk",
+                      "name": "•",
+                      "fill": "$--foreground",
+                      "content": "•",
+                      "lineHeight": 1.4285714285714286,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "qhgy8",
+                  "name": "Input OTP",
+                  "clip": true,
+                  "width": "fill_container",
+                  "height": 40,
+                  "fill": "$--card",
+                  "cornerRadius": "$--radius-none",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "$--input"
+                  },
+                  "layout": "vertical",
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "eE1sT",
+                      "name": "0",
+                      "enabled": false,
+                      "fill": "$--foreground",
+                      "content": "0",
+                      "lineHeight": 1.4285714285714286,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "cSy0i",
+                  "name": "Input OTP",
+                  "clip": true,
+                  "width": "fill_container",
+                  "height": 40,
+                  "fill": "$--card",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "$--input"
+                  },
+                  "layout": "vertical",
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "yuff0",
+                      "name": "0",
+                      "enabled": false,
+                      "fill": "$--foreground",
+                      "content": "0",
+                      "lineHeight": 1.4285714285714286,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "3dMrT",
+                  "name": "Input OTP",
+                  "clip": true,
+                  "width": "fill_container",
+                  "height": 40,
+                  "fill": "$--card",
+                  "cornerRadius": "$--radius-none",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1,
+                    "fill": "$--input"
+                  },
+                  "layout": "vertical",
+                  "justifyContent": "center",
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "oYmKU",
+                      "name": "0",
+                      "enabled": false,
+                      "fill": "$--foreground",
+                      "content": "0",
+                      "lineHeight": 1.4285714285714286,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "normal"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "O03YO",
+          "x": 2200,
+          "y": 2908,
+          "name": "Select Group/Default",
+          "context": "Select group combining label text with a select dropdown trigger showing placeholder and chevron.",
+          "reusable": true,
+          "width": 274,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "layout": "vertical",
+          "gap": 6,
+          "children": [
+            {
+              "type": "frame",
+              "id": "H6Dmi",
+              "name": "Label Text",
+              "width": "fill_container",
+              "fill": {
+                "type": "color",
+                "color": "$--white",
+                "enabled": false
+              },
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "EJCCp",
+                  "name": "Label Text",
+                  "fill": "$--foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Label Text",
+                  "lineHeight": 1.4285714285714286,
+                  "textAlignVertical": "middle",
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "500"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "AETRu",
+              "name": "Select Trigger",
+              "width": "fill_container",
+              "height": 40,
+              "fill": "$--card",
+              "cornerRadius": "$--radius-none",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1,
+                "fill": "$--input"
+              },
+              "gap": 10,
+              "padding": [
+                8,
+                16
+              ],
+              "justifyContent": "space_between",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "7Thbt",
+                  "name": "Select option",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Select option",
+                  "lineHeight": 1.4285714285714286,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "icon_font",
+                  "id": "QUTg2",
+                  "width": 16,
+                  "height": 16,
+                  "iconFontName": "chevron-down",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "5wVfn",
+          "x": 2200,
+          "y": 2476,
+          "name": "Input Group/Default",
+          "context": "A complete input field group with label text above the input.",
+          "reusable": true,
+          "width": 274,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "layout": "vertical",
+          "gap": 6,
+          "children": [
+            {
+              "type": "frame",
+              "id": "u8QE6",
+              "name": "Label Text",
+              "width": "fill_container",
+              "fill": {
+                "type": "color",
+                "color": "$--white",
+                "enabled": false
+              },
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "652t2",
+                  "name": "Label Text",
+                  "fill": "$--foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Label Text",
+                  "lineHeight": 1.4285714285714286,
+                  "textAlignVertical": "middle",
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "500"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "TJYFY",
+              "name": "Input",
+              "width": "fill_container",
+              "height": 40,
+              "fill": "$--card",
+              "cornerRadius": "$--radius-none",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1,
+                "fill": "$--input"
+              },
+              "gap": 8,
+              "padding": [
+                8,
+                16
+              ],
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "QEFFJ",
+                  "name": "Input Value",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Placeholder",
+                  "lineHeight": 1.4285714285714286,
+                  "textAlignVertical": "middle",
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "normal"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "rKZOv",
+          "x": 1000,
+          "y": 200,
+          "name": "Dropdown",
+          "reusable": true,
+          "slot": [],
+          "width": 240,
+          "height": 80,
+          "fill": "$--popover",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--border"
+          },
+          "effect": {
+            "type": "shadow",
+            "shadowType": "outer",
+            "color": "#0000000f",
+            "offset": {
+              "x": 0,
+              "y": 2
+            },
+            "blur": 3.5,
+            "spread": -1
+          },
+          "layout": "vertical",
+          "padding": 4,
+          "alignItems": "center"
+        },
+        {
+          "type": "frame",
+          "id": "aSENS",
+          "x": 200,
+          "y": 200,
+          "name": "Accordion/Open",
+          "context": "An expanded accordion item displaying both the question title with chevron icon and the revealed content text underneath.",
+          "reusable": true,
+          "width": 480,
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "$--border"
+          },
+          "layout": "vertical",
+          "children": [
+            {
+              "type": "frame",
+              "id": "tHS4D",
+              "name": "Accordion Trigger",
+              "width": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 18,
+              "padding": [
+                16,
+                0
+              ],
+              "justifyContent": "space_between",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "2BrwF",
+                  "name": "Accordion Trigger",
+                  "fill": "$--foreground",
+                  "content": "What is a micro-interaction?",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "500"
+                },
+                {
+                  "type": "frame",
+                  "id": "A8QF0",
+                  "name": "Icon",
+                  "width": 16,
+                  "height": 16,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1
+                  },
+                  "layout": "none",
+                  "children": [
+                    {
+                      "type": "icon_font",
+                      "id": "dGmWu",
+                      "x": 0,
+                      "y": 0,
+                      "width": 16,
+                      "height": 16,
+                      "iconFontName": "chevron-up",
+                      "iconFontFamily": "lucide",
+                      "fill": "$--foreground"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "jzTtf",
+              "name": "Accordion Content",
+              "clip": true,
+              "width": "fill_container",
+              "layout": "vertical",
+              "padding": [
+                0,
+                0,
+                16,
+                0
+              ],
+              "children": [
+                {
+                  "type": "text",
+                  "id": "NlDxQ",
+                  "name": "Accordion Content",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Micro-interactions are events which have one main task — a single purpose — and they are found all over your device and within apps.",
+                  "lineHeight": 1.4285714285714286,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "normal"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "vnlpI",
+          "x": 200,
+          "y": 498,
+          "name": "Alert/Info",
+          "context": "Informational alert with blue background, info icon, title and description text for displaying system status updates.",
+          "reusable": true,
+          "width": "fill_container(640)",
+          "fill": "$--color-info",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "left": 2
+            },
+            "fill": "$--color-info-foreground"
+          },
+          "gap": 16,
+          "padding": 16,
+          "children": [
+            {
+              "type": "frame",
+              "id": "H0OXD",
+              "name": "Icon",
+              "clip": true,
+              "width": 24,
+              "height": 24,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "LdX1y",
+                  "x": 0,
+                  "y": 0,
+                  "width": 24,
+                  "height": 24,
+                  "iconFontName": "info",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--color-info-foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "pyRnv",
+              "name": "contents",
+              "width": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "vertical",
+              "gap": 4,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "31Ytp",
+                  "name": "Alert Title",
+                  "fill": "$--color-info-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Rover status update",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "500"
+                },
+                {
+                  "type": "text",
+                  "id": "lr3SU",
+                  "name": "Alert Description",
+                  "fill": "$--color-info-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Spirit-9 completed its nightly diagnostics. All systems are running within optimal parameters.",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "normal"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "Flr2U",
+          "x": 200,
+          "y": 1572,
+          "name": "Label/Success",
+          "context": "Success label badge with green background displaying category or status text like 'Explorer' for indicating positive states.",
+          "reusable": true,
+          "fill": "$--color-success",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 10,
+          "padding": [
+            8,
+            12
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "nrDvY",
+              "name": "Text",
+              "fill": "$--color-success-foreground",
+              "content": "Explorer",
+              "lineHeight": 1.1428571428571428,
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "1OPV7",
+          "x": 200,
+          "y": 1432,
+          "name": "Avatar/Text",
+          "context": "Circular avatar with text initials 'PJ' on dark gray background for representing user identity without profile image.",
+          "reusable": true,
+          "width": 40,
+          "height": 40,
+          "fill": "$--secondary",
+          "cornerRadius": "$--radius-pill",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "layout": "vertical",
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "FkQCg",
+              "name": "Avatar Title",
+              "fill": "$--secondary-foreground",
+              "content": "PJ",
+              "lineHeight": 1.4285714285714286,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-secondary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "FBAaz",
+          "x": 456,
+          "y": 1920,
+          "name": "Breadcrumb Item/Ellipsis",
+          "context": "Breadcrumb ellipsis item with three dots icon for collapsing multiple intermediate navigation levels in long breadcrumb trails.",
+          "reusable": true,
+          "width": 20,
+          "height": 20,
+          "fill": {
+            "type": "color",
+            "color": "$--white",
+            "enabled": false
+          },
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 8,
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "bsrXo",
+              "name": "Icon",
+              "width": 16,
+              "height": 16,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "GG1ut",
+                  "x": 0,
+                  "y": 0,
+                  "width": 16,
+                  "height": 16,
+                  "iconFontName": "ellipsis",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "HOJRj",
+          "x": 200,
+          "y": 1920,
+          "name": "Breadcrumb Item/Current",
+          "context": "Current page breadcrumb item with darker foreground text indicating the active page in the navigation hierarchy.",
+          "reusable": true,
+          "fill": {
+            "type": "color",
+            "color": "$--white",
+            "enabled": false
+          },
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 8,
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "OUzQk",
+              "name": "Breadcrumb Item",
+              "fill": "$--foreground",
+              "content": "Breadcrumb Item",
+              "lineHeight": 1.4285714285714286,
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "normal"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "ycIFH",
+          "x": 436,
+          "y": 2344,
+          "name": "Button/Ghost",
+          "context": "Standard ghost button with subtle gray background, dark text and icon, for minimal visual weight actions.",
+          "reusable": true,
+          "fill": "$--accent",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 6,
+          "padding": [
+            10,
+            16
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "aWqVc",
+              "name": "Leading Icon",
+              "width": 20,
+              "height": 20,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "mIsYg",
+                  "x": 2,
+                  "y": 2,
+                  "width": 16,
+                  "height": 16,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "OvCBb",
+              "name": "Button",
+              "fill": "$--foreground",
+              "content": "Button",
+              "lineHeight": 1.4285714285714286,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "D3JR9",
+          "x": 200,
+          "y": 2344,
+          "name": "Button/Large/Ghost",
+          "context": "Large ghost button with subtle gray background, dark text and icon, for low-emphasis actions without competing visually.",
+          "reusable": true,
+          "fill": "$--accent",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 6,
+          "padding": [
+            16,
+            24
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "4lr0o",
+              "name": "plus",
+              "width": 24,
+              "height": 24,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "KZQVX",
+                  "x": 2,
+                  "y": 2,
+                  "width": 20,
+                  "height": 20,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "WQmQt",
+              "name": "Button",
+              "fill": "$--foreground",
+              "content": "Button",
+              "lineHeight": 1.5556,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "bf6GF",
+          "x": 436,
+          "y": 2040,
+          "name": "Button/Default",
+          "context": "Standard primary button with blue background, white text and icon, for important action triggers.",
+          "reusable": true,
+          "fill": "$--primary",
+          "cornerRadius": "$--radius-none",
+          "gap": 6,
+          "padding": [
+            10,
+            16
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "RBuHZ",
+              "name": "Leading Icon",
+              "width": 20,
+              "height": 20,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "mXH06",
+                  "x": 2,
+                  "y": 2,
+                  "width": 16,
+                  "height": 16,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--primary-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "MBpWS",
+              "name": "Button",
+              "fill": "$--primary-foreground",
+              "content": "Button",
+              "lineHeight": 1.4286,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "Simex",
+          "x": 436,
+          "y": 2116,
+          "name": "Button/Secondary",
+          "context": "Standard secondary button with dark gray background, white text and icon, for secondary actions alongside primary buttons.",
+          "reusable": true,
+          "fill": "$--secondary",
+          "cornerRadius": "$--radius-none",
+          "gap": 6,
+          "padding": [
+            10,
+            16
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "lgnDy",
+              "name": "Leading Icon",
+              "width": 20,
+              "height": 20,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "p1Ejp",
+                  "x": 2,
+                  "y": 2,
+                  "width": 16,
+                  "height": 16,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--secondary-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "Ac6zv",
+              "name": "Button",
+              "fill": "$--secondary-foreground",
+              "content": "Button",
+              "lineHeight": 1.4286,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "nB1vw",
+          "x": 436,
+          "y": 2192,
+          "name": "Button/Destructive",
+          "context": "Standard destructive button with red background, white text and icon, for dangerous actions requiring user confirmation.",
+          "reusable": true,
+          "fill": "$--destructive",
+          "cornerRadius": "$--radius-none",
+          "gap": 6,
+          "padding": [
+            10,
+            16
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "VJ2ti",
+              "name": "Leading Icon",
+              "width": 20,
+              "height": 20,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "02N81",
+                  "x": 2,
+                  "y": 2,
+                  "width": 16,
+                  "height": 16,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--destructive-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "0BBS6",
+              "name": "Button",
+              "fill": "$--destructive-foreground",
+              "content": "Button",
+              "lineHeight": 1.4286,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "zR7aJ",
+          "x": 436,
+          "y": 2268,
+          "name": "Button/Outline",
+          "context": "Standard outline button with border, transparent background and dark text with icon, for tertiary actions.",
+          "reusable": true,
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--input"
+          },
+          "gap": 6,
+          "padding": [
+            10,
+            16
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "uuR0c",
+              "name": "Leading Icon",
+              "width": 20,
+              "height": 20,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "1zGAv",
+                  "x": 2,
+                  "y": 2,
+                  "width": 16,
+                  "height": 16,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "PRqbh",
+              "name": "Button",
+              "fill": "$--foreground",
+              "content": "Button",
+              "lineHeight": 1.4286,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "VaL3A",
+          "x": 200,
+          "y": 2268,
+          "name": "Button/Large/Outline",
+          "context": "Large outline button with border, transparent background and text with icon, for less prominent actions in button groups.",
+          "reusable": true,
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--input"
+          },
+          "gap": 6,
+          "padding": [
+            16,
+            24
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "rXBND",
+              "name": "plus",
+              "width": 24,
+              "height": 24,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "c2J6V",
+                  "x": 2,
+                  "y": 2,
+                  "width": 20,
+                  "height": 20,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "56y4n",
+              "name": "Button",
+              "fill": "$--foreground",
+              "content": "Button",
+              "lineHeight": 1.5556,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "2g3Sk",
+          "x": 200,
+          "y": 2040,
+          "name": "Button/Large/Default",
+          "context": "Large primary button with blue background, white text and icon, for main call-to-action interactions.",
+          "reusable": true,
+          "fill": "$--primary",
+          "cornerRadius": "$--radius-none",
+          "gap": 6,
+          "padding": [
+            16,
+            24
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "u67q0",
+              "name": "Leading Icon",
+              "width": 24,
+              "height": 24,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "dcCXM",
+                  "x": 2,
+                  "y": 2,
+                  "width": 20,
+                  "height": 20,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--primary-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "dW25q",
+              "name": "Button",
+              "fill": "$--primary-foreground",
+              "content": "Button",
+              "lineHeight": 1.5555555555555556,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "6GMz5",
+          "x": 200,
+          "y": 2116,
+          "name": "Button/Large/Secondary",
+          "context": "Large secondary button with dark gray background, white text and icon, for alternative or less prominent actions.",
+          "reusable": true,
+          "fill": "$--secondary",
+          "cornerRadius": "$--radius-none",
+          "gap": 6,
+          "padding": [
+            16,
+            24
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "k1TPL",
+              "name": "plus",
+              "width": 24,
+              "height": 24,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "uERiF",
+                  "x": 2,
+                  "y": 2,
+                  "width": 20,
+                  "height": 20,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--secondary-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "tMyPi",
+              "name": "Button",
+              "fill": "$--secondary-foreground",
+              "content": "Button",
+              "lineHeight": 1.5555555555555556,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "LuPaZ",
+          "x": 200,
+          "y": 2192,
+          "name": "Button/Large/Destructive",
+          "context": "Large destructive button with red background, white text and icon, for critical or irreversible actions like delete.",
+          "reusable": true,
+          "fill": "$--destructive",
+          "cornerRadius": "$--radius-none",
+          "gap": 6,
+          "padding": [
+            16,
+            24
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "P94C6",
+              "name": "plus",
+              "width": 24,
+              "height": 24,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "Il0u0",
+                  "x": 2,
+                  "y": 2,
+                  "width": 20,
+                  "height": 20,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--destructive-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "tEhpT",
+              "name": "Button",
+              "fill": "$--destructive-foreground",
+              "content": "Button",
+              "lineHeight": 1.5556,
+              "textAlign": "center",
+              "textAlignVertical": "middle",
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "id": "XpAYs",
+          "type": "ref",
+          "reusable": true,
+          "ref": "aSENS",
+          "x": 200,
+          "y": 352,
+          "name": "Accordion/Closed",
+          "context": "A collapsible accordion item in its closed state with a question title and a chevron-down icon, featuring a bottom border for visual separation.",
+          "descendants": {
+            "dGmWu": {
+              "iconFontFamily": "lucide",
+              "iconFontName": "chevron-down"
+            },
+            "jzTtf": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "jWJ7T",
+          "type": "ref",
+          "reusable": true,
+          "ref": "vnlpI",
+          "x": 200,
+          "y": 646,
+          "name": "Alert/Success",
+          "context": "Success alert with green background, checkmark icon, title and message for confirming completed actions or positive outcomes.",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "left": 2
+            },
+            "fill": "$--color-success-foreground"
+          },
+          "fill": "$--color-success",
+          "width": "fill_container(640)",
+          "descendants": {
+            "LdX1y": {
+              "iconFontFamily": "lucide",
+              "iconFontName": "circle-check",
+              "fill": "$--color-success-foreground"
+            },
+            "31Ytp": {
+              "content": "Mission approved",
+              "fill": "$--color-success-foreground"
+            },
+            "lr3SU": {
+              "content": "Your request to rent the Curiosity-X rover has been confirmed. Deployment scheduled for Sol 482.",
+              "fill": "$--color-success-foreground"
+            }
+          }
+        },
+        {
+          "id": "7vQ96",
+          "type": "ref",
+          "reusable": true,
+          "ref": "jWJ7T",
+          "x": 200,
+          "y": 794,
+          "fill": "$--color-warning",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "left": 2
+            },
+            "fill": "$--color-warning-foreground"
+          },
+          "flipX": false,
+          "flipY": false,
+          "width": "fill_container(640)",
+          "height": "fit_content",
+          "textGrowth": "auto",
+          "context": "Warning alert with orange background, alert icon, title and cautionary message for displaying potential issues or concerns.",
+          "name": "Alert/Warning",
+          "descendants": {
+            "LdX1y": {
+              "fill": "$--color-warning-foreground",
+              "iconFontFamily": "lucide",
+              "iconFontName": "circle-alert"
+            },
+            "31Ytp": {
+              "content": "Terrain instability detected",
+              "fill": "$--color-warning-foreground"
+            },
+            "lr3SU": {
+              "content": "The selected route crosses an area with loose regolith. Proceed with caution or reroute to a safer path.",
+              "fill": "$--color-warning-foreground"
+            }
+          }
+        },
+        {
+          "id": "Ebad8",
+          "type": "ref",
+          "reusable": true,
+          "ref": "7vQ96",
+          "x": 200,
+          "y": 942,
+          "fill": "$--color-error",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "left": 2
+            },
+            "fill": "$--color-error-foreground"
+          },
+          "name": "Alert/Error",
+          "context": "Error alert with red/pink background, close icon, title and error message for displaying critical issues or failures.",
+          "width": "fill_container(640)",
+          "descendants": {
+            "LdX1y": {
+              "iconFontFamily": "lucide",
+              "iconFontName": "circle-x",
+              "fill": "$--color-error-foreground"
+            },
+            "31Ytp": {
+              "content": "Communication link lost",
+              "fill": "$--color-error-foreground"
+            },
+            "lr3SU": {
+              "content": "Rover telemetry signal interrupted. Check your base antenna alignment or retry connection in 10 minutes.",
+              "fill": "$--color-error-foreground"
+            }
+          }
+        },
+        {
+          "id": "SXwEW",
+          "type": "ref",
+          "reusable": true,
+          "ref": "1OPV7",
+          "x": 280,
+          "y": 1432,
+          "context": "Circular avatar placeholder with gray background for displaying user profile images.",
+          "name": "Avatar/Image",
+          "fill": {
+            "type": "image",
+            "enabled": true,
+            "url": "",
+            "mode": "fill"
+          },
+          "descendants": {
+            "FkQCg": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "SAgX1",
+          "type": "ref",
+          "reusable": true,
+          "ref": "Flr2U",
+          "x": 200,
+          "y": 1644,
+          "context": "Warning label badge with orange background displaying text like 'Transporter' for highlighting items needing attention.",
+          "name": "Label/Warning",
+          "fill": "$--color-warning",
+          "descendants": {
+            "nrDvY": {
+              "content": "Transporter",
+              "fill": "$--color-warning-foreground"
+            }
+          }
+        },
+        {
+          "id": "RzQ1P",
+          "type": "ref",
+          "reusable": true,
+          "ref": "Flr2U",
+          "x": 200,
+          "y": 1788,
+          "name": "Label/Secondary",
+          "context": "Secondary label badge with gray background displaying text like 'Pioneer' for neutral categorization or status indication.",
+          "fill": "$--secondary",
+          "descendants": {
+            "nrDvY": {
+              "content": "Pioneer",
+              "fill": "$--secondary-foreground"
+            }
+          }
+        },
+        {
+          "id": "Cq7qy",
+          "type": "ref",
+          "reusable": true,
+          "ref": "Flr2U",
+          "x": 200,
+          "y": 1716,
+          "name": "Label/Info",
+          "context": "Info label badge with blue background displaying text like 'Hauler' for informational categorization or metadata.",
+          "fill": "$--color-info",
+          "descendants": {
+            "nrDvY": {
+              "content": "Hauler",
+              "fill": "$--color-info-foreground"
+            }
+          }
+        },
+        {
+          "id": "dO92O",
+          "type": "ref",
+          "reusable": true,
+          "ref": "HOJRj",
+          "x": 328,
+          "y": 1920,
+          "name": "Breadcrumb Item/Default",
+          "context": "Default breadcrumb item with muted gray text showing intermediate navigation level, clickable to return to that page.",
+          "descendants": {
+            "OUzQk": {
+              "fill": "$--muted-foreground"
+            }
+          }
+        },
+        {
+          "id": "fOKM5",
+          "type": "ref",
+          "reusable": true,
+          "ref": "FBAaz",
+          "x": 496,
+          "y": 1920,
+          "context": "Breadcrumb separator with chevron-right icon for visually dividing navigation items in breadcrumb trails.",
+          "name": "Breadcrumb Item/Separator",
+          "descendants": {
+            "GG1ut": {
+              "iconFontFamily": "lucide",
+              "iconFontName": "chevron-right"
+            }
+          }
+        },
+        {
+          "id": "M3eGn",
+          "type": "ref",
+          "reusable": true,
+          "ref": "2g3Sk",
+          "x": 340,
+          "y": 2040,
+          "padding": 16,
+          "context": "Large primary icon button with blue background, for main call-to-action interactions.",
+          "name": "Icon Button/Large/Default",
+          "descendants": {
+            "dW25q": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "QDfXC",
+          "type": "ref",
+          "reusable": true,
+          "ref": "6GMz5",
+          "x": 340,
+          "y": 2116,
+          "padding": 16,
+          "context": "Large secondary icon button with dark gray background, for alternative or less prominent actions.",
+          "name": "Icon Button/Large/Secondary",
+          "descendants": {
+            "tMyPi": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "ZHKhF",
+          "type": "ref",
+          "reusable": true,
+          "ref": "LuPaZ",
+          "x": 340,
+          "y": 2192,
+          "padding": 16,
+          "context": "Large destructive icon button with red background, for critical or irreversible actions like delete.",
+          "name": "Icon Button/Large/Destructive",
+          "descendants": {
+            "tEhpT": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "GonPz",
+          "type": "ref",
+          "reusable": true,
+          "ref": "VaL3A",
+          "x": 340,
+          "y": 2268,
+          "padding": 16,
+          "context": "Large outline icon button with border and transparent background for less prominent actions in button groups.",
+          "name": "Icon Button/Large/Outline",
+          "descendants": {
+            "56y4n": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "Y2Ed3",
+          "type": "ref",
+          "reusable": true,
+          "ref": "D3JR9",
+          "x": 340,
+          "y": 2344,
+          "padding": 16,
+          "context": "Large ghost icon button with subtle gray background, for low-emphasis actions without competing visually.",
+          "name": "Icon Button/Large/Ghost",
+          "descendants": {
+            "WQmQt": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "HHAiX",
+          "type": "ref",
+          "reusable": true,
+          "ref": "ycIFH",
+          "x": 556,
+          "y": 2344,
+          "padding": 10,
+          "context": "Standard ghost icon button with subtle gray background, for minimal visual weight actions.",
+          "name": "Icon Button/Ghost",
+          "descendants": {
+            "OvCBb": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "M1eE5",
+          "type": "ref",
+          "reusable": true,
+          "ref": "nB1vw",
+          "x": 556,
+          "y": 2192,
+          "padding": 10,
+          "context": "Standard destructive icon button with red background, for dangerous actions requiring user confirmation.",
+          "name": "Icon Button/Destructive",
+          "descendants": {
+            "0BBS6": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "37iqV",
+          "type": "ref",
+          "reusable": true,
+          "ref": "zR7aJ",
+          "x": 556,
+          "y": 2268,
+          "padding": 10,
+          "context": "Standard outline button with border, transparent background, for tertiary actions.",
+          "name": "Icon Button/Outline",
+          "descendants": {
+            "PRqbh": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "XBNx3",
+          "type": "ref",
+          "reusable": true,
+          "ref": "Simex",
+          "x": 556,
+          "y": 2116,
+          "padding": 10,
+          "context": "Standard secondary icon button with dark gray background, for secondary actions alongside primary buttons.",
+          "name": "Icon Button/Secondary",
+          "descendants": {
+            "Ac6zv": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "5bwDI",
+          "type": "ref",
+          "reusable": true,
+          "ref": "bf6GF",
+          "x": 556,
+          "y": 2040,
+          "padding": 10,
+          "context": "Standard primary icon button with blue background, for important action triggers.",
+          "name": "Icon Button/Default",
+          "descendants": {
+            "MBpWS": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "type": "frame",
+          "id": "tcMJ2",
+          "x": 200,
+          "y": 2500,
+          "name": "Card",
+          "context": "Card component with header, title, description, form content and footer buttons for displaying grouped information and actions.",
+          "reusable": true,
+          "width": 360,
+          "fill": "$--card",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--border"
+          },
+          "effect": {
+            "type": "shadow",
+            "shadowType": "outer",
+            "color": "#0000000d",
+            "offset": {
+              "x": 0,
+              "y": 1
+            },
+            "blur": 1.75
+          },
+          "layout": "vertical",
+          "children": [
+            {
+              "type": "frame",
+              "id": "Ad3wl",
+              "name": "Card Header",
+              "slot": [],
+              "width": "fill_container",
+              "height": 68,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "vertical",
+              "gap": 8,
+              "padding": 24,
+              "justifyContent": "center"
+            },
+            {
+              "type": "frame",
+              "id": "dgIRA",
+              "name": "Card Content",
+              "slot": [],
+              "width": "fill_container",
+              "height": 68,
+              "stroke": {
+                "align": "inside",
+                "thickness": 2
+              },
+              "layout": "vertical",
+              "gap": 8,
+              "padding": 24,
+              "justifyContent": "center"
+            },
+            {
+              "type": "frame",
+              "id": "XQCHD",
+              "name": "Card Actions",
+              "slot": [],
+              "width": "fill_container",
+              "height": 68,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 8,
+              "padding": 24,
+              "alignItems": "center"
+            }
+          ]
+        },
+        {
+          "id": "Kw3hB",
+          "type": "ref",
+          "reusable": true,
+          "ref": "tcMJ2",
+          "x": 200,
+          "y": 1150,
+          "width": 480,
+          "context": "",
+          "name": "Dialog",
+          "descendants": {
+            "Ad3wl": {
+              "height": "fit_content",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "StkoQ",
+                  "name": "Dialog Title",
+                  "fill": "$--card-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Add a title here",
+                  "lineHeight": 1.5555555555555556,
+                  "textAlignVertical": "middle",
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 18,
+                  "fontWeight": "500"
+                },
+                {
+                  "type": "text",
+                  "id": "VUhw9",
+                  "name": "Dialog Description",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "And add a detailed description here.",
+                  "lineHeight": 1.4285714285714286,
+                  "textAlignVertical": "middle",
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            "dgIRA": {
+              "enabled": false
+            },
+            "XQCHD": {
+              "height": "fit_content",
+              "children": [
+                {
+                  "id": "jglDt",
+                  "type": "ref",
+                  "ref": "bf6GF",
+                  "x": 24,
+                  "y": 24,
+                  "descendants": {
+                    "RBuHZ": {
+                      "enabled": false
+                    },
+                    "MBpWS": {
+                      "content": "Continue"
+                    }
+                  }
+                },
+                {
+                  "id": "5wzoN",
+                  "type": "ref",
+                  "ref": "zR7aJ",
+                  "x": 121,
+                  "y": 24,
+                  "descendants": {
+                    "uuR0c": {
+                      "enabled": false
+                    },
+                    "PRqbh": {
+                      "content": "Cancel",
+                      "x": 16,
+                      "y": 10
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "type": "frame",
+          "id": "ahgnz",
+          "x": 200,
+          "y": 2827,
+          "name": "Tab Item/Active",
+          "reusable": true,
+          "fill": "$--secondary",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "effect": {
+            "type": "shadow",
+            "shadowType": "outer",
+            "color": "#0000000f",
+            "offset": {
+              "x": 0,
+              "y": 1
+            },
+            "blur": 3.5,
+            "spread": -1
+          },
+          "gap": 8,
+          "padding": [
+            6,
+            12
+          ],
+          "children": [
+            {
+              "type": "text",
+              "id": "z2WJL",
+              "name": "Label Selected",
+              "fill": "$--secondary-foreground",
+              "content": "Tab",
+              "lineHeight": 1.4285714285714286,
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "normal"
+            }
+          ]
+        },
+        {
+          "id": "wf5LJ",
+          "type": "ref",
+          "reusable": true,
+          "ref": "ahgnz",
+          "x": 200,
+          "y": 2879,
+          "fill": "$--white",
+          "effect": [],
+          "name": "Tab Item/Inactive",
+          "descendants": {
+            "z2WJL": {
+              "fill": "$--accent-foreground"
+            }
+          }
+        },
+        {
+          "type": "frame",
+          "id": "zX0Hk",
+          "x": 200,
+          "y": 2933,
+          "name": "Tabs",
+          "context": "A horizontal tab navigation component, allowing users to switch between content views.",
+          "reusable": true,
+          "slot": [
+            "ahgnz",
+            "wf5LJ"
+          ],
+          "clip": true,
+          "width": 80,
+          "height": 40,
+          "fill": "$--card",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--input"
+          },
+          "gap": 8,
+          "padding": 4,
+          "alignItems": "center"
+        },
+        {
+          "id": "o98ZG",
+          "type": "ref",
+          "ref": "zX0Hk",
+          "x": 200,
+          "y": 3013,
+          "width": "fit_content",
+          "children": [
+            {
+              "id": "ll8qy",
+              "type": "ref",
+              "ref": "ahgnz",
+              "x": 4,
+              "y": 4,
+              "descendants": {
+                "z2WJL": {
+                  "content": "Integrations"
+                }
+              }
+            },
+            {
+              "id": "ayWVq",
+              "type": "ref",
+              "ref": "wf5LJ",
+              "x": 111,
+              "y": 4,
+              "descendants": {
+                "z2WJL": {
+                  "content": "Billing"
+                }
+              }
+            },
+            {
+              "id": "lBGNk",
+              "type": "ref",
+              "ref": "wf5LJ",
+              "x": 181,
+              "y": 4,
+              "descendants": {
+                "z2WJL": {
+                  "content": "Profile"
+                }
+              }
+            },
+            {
+              "id": "GdraB",
+              "type": "ref",
+              "ref": "wf5LJ",
+              "x": 254,
+              "y": 4,
+              "descendants": {
+                "z2WJL": {
+                  "content": "Advanced"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "rVqRa",
+          "x": 1622,
+          "y": 3755,
+          "name": "Pagination Item/Active",
+          "reusable": true,
+          "width": 40,
+          "height": 40,
+          "fill": "$--background",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--border"
+          },
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "1pyAE",
+              "name": "1",
+              "fill": "$--foreground",
+              "content": "1",
+              "lineHeight": 1.4285714285714286,
+              "fontFamily": "$--font-secondary",
+              "fontSize": 14,
+              "fontWeight": "normal"
+            }
+          ]
+        },
+        {
+          "id": "XsUIt",
+          "type": "ref",
+          "reusable": true,
+          "ref": "rVqRa",
+          "x": 1682,
+          "y": 3755,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "fill": [],
+          "name": "Pagination Item/Default"
+        },
+        {
+          "id": "iHPe4",
+          "type": "ref",
+          "reusable": true,
+          "ref": "rVqRa",
+          "x": 1742,
+          "y": 3755,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "fill": [],
+          "name": "Pagination Item/Ellipsis",
+          "children": [
+            {
+              "type": "icon_font",
+              "id": "HXjFL",
+              "width": 16,
+              "height": 16,
+              "iconFontName": "ellipsis",
+              "iconFontFamily": "lucide",
+              "fill": "$--muted-foreground"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "OprrH",
+          "x": 1622,
+          "y": 3835,
+          "name": "Pagination",
+          "reusable": true,
+          "gap": 4,
+          "children": [
+            {
+              "id": "yEtx4",
+              "type": "ref",
+              "ref": "ycIFH",
+              "x": 0,
+              "y": 0,
+              "descendants": {
+                "aWqVc": {
+                  "enabled": false
+                },
+                "OvCBb": {
+                  "content": "Previous"
+                }
+              }
+            },
+            {
+              "type": "frame",
+              "id": "4t8AC",
+              "name": "Page Numbers Slot",
+              "slot": [
+                "rVqRa",
+                "XsUIt",
+                "iHPe4"
+              ],
+              "clip": true,
+              "width": 40,
+              "height": 40,
+              "gap": 4
+            },
+            {
+              "id": "QtvqN",
+              "type": "ref",
+              "ref": "ycIFH",
+              "x": 135,
+              "y": 0,
+              "descendants": {
+                "aWqVc": {
+                  "enabled": false
+                },
+                "OvCBb": {
+                  "content": "Next"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "id": "92ihz",
+          "type": "ref",
+          "reusable": true,
+          "ref": "tcMJ2",
+          "x": 1000,
+          "y": 3161,
+          "width": 400,
+          "context": "",
+          "name": "Card Action",
+          "descendants": {
+            "Ad3wl": {
+              "height": "fit_content",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "text",
+                  "id": "YACIK",
+                  "name": "title",
+                  "fill": "$--card-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Solar Efficiency Pack",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "500"
+                }
+              ]
+            },
+            "dgIRA": {
+              "height": "fit_content",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "vbkGA",
+                  "name": "title",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Boosts rover endurance by optimizing solar panel alignment.",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            "XQCHD": {
+              "height": "fit_content",
+              "children": [
+                {
+                  "id": "yGOg0",
+                  "type": "ref",
+                  "ref": "Simex",
+                  "x": 24,
+                  "y": 24,
+                  "descendants": {
+                    "Ac6zv": {
+                      "content": "Request"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "id": "Sprth",
+          "type": "ref",
+          "reusable": true,
+          "ref": "tcMJ2",
+          "x": 1419,
+          "y": 3161,
+          "width": 400,
+          "context": "",
+          "name": "Card Plain",
+          "descendants": {
+            "Ad3wl": {
+              "height": "fit_content",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "text",
+                  "id": "nSAAw",
+                  "name": "title",
+                  "fill": "$--card-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Active Rovers",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "500"
+                }
+              ]
+            },
+            "dgIRA": {
+              "height": "fit_content",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "IWeZM",
+                  "name": "title",
+                  "fill": "$--card-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "1,280",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-secondary",
+                  "fontSize": 32,
+                  "fontWeight": "normal"
+                },
+                {
+                  "id": "MBvZ6",
+                  "type": "ref",
+                  "ref": "SAgX1",
+                  "x": 24,
+                  "y": 80,
+                  "descendants": {
+                    "nrDvY": {
+                      "content": "-12%"
+                    }
+                  }
+                }
+              ]
+            },
+            "XQCHD": {
+              "enabled": false,
+              "children": []
+            }
+          }
+        },
+        {
+          "id": "mQSLP",
+          "type": "ref",
+          "reusable": true,
+          "ref": "tcMJ2",
+          "x": 1000,
+          "y": 3511,
+          "width": 400,
+          "context": "",
+          "name": "Card Image",
+          "descendants": {
+            "Ad3wl": {
+              "height": "fit_content",
+              "padding": 0,
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "lc3Vg",
+                  "name": "image-placeholder",
+                  "width": "fill_container",
+                  "height": 160,
+                  "fill": "$--background",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": {
+                      "bottom": 1
+                    },
+                    "fill": "$--border"
+                  },
+                  "layout": "none"
+                }
+              ]
+            },
+            "dgIRA": {
+              "height": "fit_content",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "PM6Ww",
+                  "name": "title",
+                  "fill": "$--card-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Aurora Scout",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 24,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "text",
+                  "id": "tI9og",
+                  "name": "title",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "SKU: LS-2029",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-secondary",
+                  "fontSize": 16,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            "XQCHD": {
+              "height": "fit_content",
+              "justifyContent": "space_between",
+              "alignItems": "start",
+              "children": [
+                {
+                  "id": "oetQ0",
+                  "type": "ref",
+                  "ref": "Simex",
+                  "x": 24,
+                  "y": 24,
+                  "descendants": {
+                    "Ac6zv": {
+                      "content": "Book now"
+                    }
+                  }
+                },
+                {
+                  "id": "8Er0C",
+                  "type": "ref",
+                  "ref": "SAgX1",
+                  "x": 308,
+                  "y": 24,
+                  "descendants": {
+                    "nrDvY": {
+                      "content": "$45.00"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "type": "frame",
+          "id": "hZwCK",
+          "x": 1320,
+          "y": 2413,
+          "name": "Sidebar Section Title",
+          "reusable": true,
+          "width": 280,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "padding": [
+            8,
+            24
+          ],
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "ypbD4",
+              "name": "Operations",
+              "fill": "$--sidebar-foreground",
+              "textGrowth": "fixed-width",
+              "width": "fill_container",
+              "content": "Title",
+              "lineHeight": 1.1428571428571428,
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "4jfFd",
+          "x": 1320,
+          "y": 2490,
+          "name": "Sidebar Item/Active",
+          "reusable": true,
+          "width": 280,
+          "fill": "$--sidebar-accent",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "left": 2
+            },
+            "fill": "$--sidebar-primary"
+          },
+          "gap": 12,
+          "padding": [
+            12,
+            24
+          ],
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "j8Do9",
+              "name": "Leading Icon",
+              "clip": true,
+              "width": 24,
+              "height": 24,
+              "fill": {
+                "type": "color",
+                "color": "#ffffffff",
+                "enabled": false
+              },
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "JTWa5",
+                  "x": 0,
+                  "y": 0,
+                  "width": 24,
+                  "height": 24,
+                  "iconFontName": "grip",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--sidebar-accent-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "wawnU",
+              "name": "Item Title",
+              "fill": "$--sidebar-accent-foreground",
+              "textGrowth": "fixed-width",
+              "width": "fill_container",
+              "content": "Item",
+              "lineHeight": 1.5,
+              "fontFamily": "Roboto",
+              "fontSize": 16,
+              "fontWeight": "normal"
+            }
+          ]
+        },
+        {
+          "id": "cpj5L",
+          "type": "ref",
+          "reusable": true,
+          "ref": "4jfFd",
+          "x": 1320,
+          "y": 2578,
+          "name": "Sidebar Item/Default",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "left": 2
+            }
+          },
+          "fill": [],
+          "descendants": {
+            "JTWa5": {
+              "fill": "$--sidebar-foreground"
+            },
+            "wawnU": {
+              "fill": "$--sidebar-foreground"
+            }
+          }
+        },
+        {
+          "type": "frame",
+          "id": "N2veC",
+          "x": 1000,
+          "y": 1486,
+          "name": "Data Table Header",
+          "reusable": true,
+          "width": "fill_container(1024)",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 16,
+          "justifyContent": "space_between",
+          "alignItems": "center",
+          "children": [
+            {
+              "id": "gGXIM",
+              "type": "ref",
+              "ref": "pQZMf",
+              "x": 0,
+              "y": 0,
+              "descendants": {
+                "QEFFJ": {
+                  "content": "Search…"
+                }
+              }
+            },
+            {
+              "id": "oslC0",
+              "type": "ref",
+              "ref": "zR7aJ",
+              "x": 924,
+              "y": 0
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "jMuOx",
+          "x": 1000,
+          "y": 2000,
+          "name": "Data Table Footer",
+          "reusable": true,
+          "width": "fill_container(1024)",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 16,
+          "justifyContent": "space_between",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "ZUPbZ",
+              "name": "0 of 5 row(s) selected.",
+              "fill": "$--muted-foreground",
+              "content": "Showing 10 records",
+              "lineHeight": 1.4285714285714286,
+              "fontFamily": "$--font-secondary",
+              "fontSize": 14,
+              "fontWeight": "normal"
+            },
+            {
+              "id": "OZwkJ",
+              "type": "ref",
+              "ref": "OprrH",
+              "x": 827,
+              "y": 0
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "YHeNj",
+          "x": 1000,
+          "y": 1356,
+          "name": "Table Column Header",
+          "reusable": true,
+          "width": "fill_container(293)",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            }
+          },
+          "gap": 8,
+          "padding": 12,
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "jE7QJ",
+              "name": "Label",
+              "fill": "$--muted-foreground",
+              "textGrowth": "fixed-width",
+              "width": "fill_container",
+              "content": "Name",
+              "lineHeight": 1.4285714285714286,
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "normal"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "mOJ51",
+          "x": 1000,
+          "y": 1224,
+          "name": "Table Cell",
+          "reusable": true,
+          "slot": [],
+          "width": "fill_container(293)",
+          "height": "fit_content(44)",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "right": 1
+            }
+          },
+          "gap": 8,
+          "padding": 12,
+          "alignItems": "center"
+        },
+        {
+          "type": "frame",
+          "id": "UvBer",
+          "x": 1000,
+          "y": 1160,
+          "name": "Table Row",
+          "reusable": true,
+          "slot": [
+            "mOJ51",
+            "YHeNj"
+          ],
+          "width": "fill_container(1024)",
+          "height": "fit_content(44)",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "$--border"
+          },
+          "alignItems": "center"
+        },
+        {
+          "type": "frame",
+          "id": "0IOYd",
+          "x": 1000,
+          "y": 836,
+          "name": "Table",
+          "reusable": true,
+          "slot": [
+            "UvBer"
+          ],
+          "width": "fill_container(1024)",
+          "height": 300,
+          "fill": "$--background",
+          "cornerRadius": "$--radius-none",
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--border"
+          },
+          "layout": "vertical",
+          "alignItems": "center"
+        },
+        {
+          "type": "frame",
+          "id": "nitroDataTable",
+          "x": 1000,
+          "y": 1559,
+          "name": "Data Table",
+          "reusable": true,
+          "clip": true,
+          "width": "fill_container(1024)",
+          "layout": "vertical",
+          "gap": 16,
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "ndtHeader1",
+              "name": "Data Table Header",
+              "width": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 16,
+              "justifyContent": "space_between",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "ndtInput1",
+                  "name": "Input/Default",
+                  "width": 274,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1
+                  },
+                  "layout": "vertical",
+                  "gap": 6,
+                  "children": [
+                    {
+                      "type": "frame",
+                      "id": "ndtLabel1",
+                      "name": "Label Text",
+                      "enabled": false,
+                      "width": "fill_container",
+                      "fill": {
+                        "type": "color",
+                        "color": "$--white",
+                        "enabled": false
+                      },
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1
+                      },
+                      "gap": 8,
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "ndtLabelTxt1",
+                          "name": "Label Text",
+                          "fill": "$--foreground",
+                          "textGrowth": "fixed-width",
+                          "width": "fill_container",
+                          "content": "Label Text",
+                          "lineHeight": 1.4285714285714286,
+                          "textAlignVertical": "middle",
+                          "fontFamily": "$--font-secondary",
+                          "fontSize": 14,
+                          "fontWeight": "500"
+                        }
+                      ]
+                    },
+                    {
+                      "type": "frame",
+                      "id": "ndtInputField1",
+                      "name": "Input",
+                      "width": "fill_container",
+                      "height": 40,
+                      "fill": "$--background",
+                      "cornerRadius": "$--radius-none",
+                      "stroke": {
+                        "align": "inside",
+                        "thickness": 1,
+                        "fill": "$--input"
+                      },
+                      "gap": 8,
+                      "padding": [
+                        8,
+                        16
+                      ],
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "ndtInputVal1",
+                          "name": "Input Value",
+                          "fill": "$--muted-foreground",
+                          "content": "Search…",
+                          "lineHeight": 1.4285714285714286,
+                          "textAlignVertical": "middle",
+                          "fontFamily": "$--font-secondary",
+                          "fontSize": 14,
+                          "fontWeight": "normal"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "id": "ndtBtn1",
+                  "type": "ref",
+                  "ref": "zR7aJ",
+                  "x": 924,
+                  "y": 0
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "ndtContent1",
+              "name": "Data Table Content",
+              "slot": [
+                "UvBer"
+              ],
+              "clip": true,
+              "width": "fill_container",
+              "height": "fit_content(260)",
+              "layout": "vertical",
+              "justifyContent": "center",
+              "alignItems": "center"
+            },
+            {
+              "id": "ndtFooterRef1",
+              "type": "ref",
+              "ref": "jMuOx",
+              "x": 0,
+              "y": 332
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "prR5j",
+          "x": 1000,
+          "y": 368,
+          "name": "List Title",
+          "reusable": true,
+          "width": 240,
+          "cornerRadius": 2,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 8,
+          "padding": [
+            8,
+            6,
+            8,
+            32
+          ],
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "text",
+              "id": "cSn1L",
+              "name": "Label",
+              "fill": "$--muted-foreground",
+              "textGrowth": "fixed-width",
+              "width": "fill_container",
+              "content": "List Title",
+              "lineHeight": 1.3333333333333333,
+              "fontFamily": "$--font-primary",
+              "fontSize": 12,
+              "fontWeight": "500"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "w9NG6",
+          "x": 1000,
+          "y": 440,
+          "name": "List Item/Checked",
+          "reusable": true,
+          "width": 240,
+          "cornerRadius": 2,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 8,
+          "padding": [
+            6,
+            8
+          ],
+          "justifyContent": "space_between",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "abNjF",
+              "name": "Item Content Left",
+              "gap": 8,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "NtZFn",
+                  "name": "Leading Icon",
+                  "width": 16,
+                  "height": 16,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1
+                  },
+                  "layout": "none",
+                  "children": [
+                    {
+                      "type": "icon_font",
+                      "id": "l4N9R",
+                      "x": 0,
+                      "y": 0,
+                      "width": 16,
+                      "height": 16,
+                      "iconFontName": "check",
+                      "iconFontFamily": "lucide",
+                      "fill": "$--foreground"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "pcBXI",
+                  "name": "Label",
+                  "fill": "$--foreground",
+                  "content": "List Item",
+                  "lineHeight": 1.4285714285714286,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "ZSC5K",
+              "name": "Item Content Right",
+              "gap": 8,
+              "children": [
+                {
+                  "type": "text",
+                  "id": "H23bT",
+                  "name": "⇧⌘A",
+                  "opacity": 0.6000000238418579,
+                  "fill": "$--foreground",
+                  "content": "⇧⌘A",
+                  "lineHeight": 1.3333333333333333,
+                  "textAlign": "right",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "frame",
+                  "id": "ecp79",
+                  "name": "Trailing Icon",
+                  "width": 16,
+                  "height": 16,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 0.6666666865348816
+                  },
+                  "layout": "none",
+                  "children": [
+                    {
+                      "type": "icon_font",
+                      "id": "fEhDh",
+                      "x": 0,
+                      "y": 0,
+                      "width": 16,
+                      "height": 16,
+                      "iconFontName": "chevron-right",
+                      "iconFontFamily": "lucide",
+                      "fill": "$--foreground"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "Kj9Qt",
+          "x": 1000,
+          "y": 584,
+          "name": "List Search Box/Filled",
+          "reusable": true,
+          "width": 240,
+          "cornerRadius": 2,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 8,
+          "padding": [
+            6,
+            8
+          ],
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "icon_font",
+              "id": "bBk1e",
+              "width": 16,
+              "height": 16,
+              "iconFontName": "search",
+              "iconFontFamily": "lucide",
+              "fill": "$--foreground"
+            },
+            {
+              "type": "text",
+              "id": "FBD6R",
+              "name": "Label",
+              "fill": "$--foreground",
+              "textGrowth": "fixed-width",
+              "width": "fill_container",
+              "content": "Search Query",
+              "lineHeight": 1.4285714285714286,
+              "fontFamily": "$--font-primary",
+              "fontSize": 14,
+              "fontWeight": "normal"
+            },
+            {
+              "type": "icon_font",
+              "id": "tP6xD",
+              "width": 16,
+              "height": 16,
+              "iconFontName": "x",
+              "iconFontFamily": "lucide",
+              "fill": "$--foreground"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "PNbOn",
+          "x": 1000,
+          "y": 320,
+          "name": "List Divider",
+          "reusable": true,
+          "width": 240,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 8,
+          "padding": [
+            4,
+            0
+          ],
+          "justifyContent": "center",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "line",
+              "id": "Sqzmj",
+              "name": "Line",
+              "width": "fill_container",
+              "height": 0,
+              "stroke": {
+                "align": "center",
+                "thickness": 1,
+                "fill": "$--border"
+              }
+            }
+          ]
+        },
+        {
+          "id": "uKgA7",
+          "type": "ref",
+          "reusable": true,
+          "ref": "w9NG6",
+          "x": 1000,
+          "y": 512,
+          "name": "List Item/Unchecked",
+          "descendants": {
+            "l4N9R": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "DQzsK",
+          "type": "ref",
+          "reusable": true,
+          "ref": "Kj9Qt",
+          "x": 1000,
+          "y": 656,
+          "name": "List Search Box/Default",
+          "descendants": {
+            "bBk1e": {
+              "fill": "$--muted-foreground"
+            },
+            "FBD6R": {
+              "fill": "$--muted-foreground",
+              "content": "Search…"
+            },
+            "tP6xD": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "5ee9F",
+          "type": "ref",
+          "reusable": true,
+          "ref": "tcMJ2",
+          "x": 2200,
+          "y": 200,
+          "name": "Modal/Left",
+          "context": "Modal dialog with left-aligned title, subtitle, content area and footer action buttons for focused user tasks.",
+          "effect": {
+            "type": "shadow",
+            "shadowType": "outer",
+            "color": "#0000000a",
+            "offset": {
+              "x": 0,
+              "y": 10
+            },
+            "blur": 8.75
+          },
+          "descendants": {
+            "Ad3wl": {
+              "height": "fit_content",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "IO907",
+                  "name": "Card Title",
+                  "fill": "$--foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Modal Title",
+                  "lineHeight": 1.4,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 20,
+                  "fontWeight": "500"
+                },
+                {
+                  "type": "text",
+                  "id": "nXJcT",
+                  "name": "Modal Subtitle",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Modal Subtitle",
+                  "lineHeight": 1.4285714285714286,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 14,
+                  "fontWeight": "normal"
+                }
+              ]
+            },
+            "XQCHD": {
+              "layout": "vertical",
+              "height": "fit_content",
+              "children": [
+                {
+                  "id": "L86fG",
+                  "type": "ref",
+                  "ref": "bf6GF",
+                  "x": 24,
+                  "y": 24,
+                  "width": "fill_container",
+                  "descendants": {
+                    "MBpWS": {
+                      "content": "Action"
+                    }
+                  }
+                },
+                {
+                  "id": "jH8oM",
+                  "type": "ref",
+                  "ref": "Simex",
+                  "x": 24,
+                  "y": 72,
+                  "width": "fill_container",
+                  "descendants": {
+                    "Ac6zv": {
+                      "content": "Action"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "id": "Ld8Zw",
+          "type": "ref",
+          "reusable": true,
+          "ref": "5ee9F",
+          "x": 2200,
+          "y": 548,
+          "context": "Modal dialog with center-aligned title, subtitle, content and footer buttons for balanced, focused user interactions.",
+          "name": "Modal/Center",
+          "descendants": {
+            "IO907": {
+              "textAlign": "center"
+            },
+            "nXJcT": {
+              "textAlign": "center"
+            }
+          }
+        },
+        {
+          "id": "g8g59",
+          "type": "ref",
+          "reusable": true,
+          "ref": "5ee9F",
+          "x": 2200,
+          "y": 896,
+          "name": "Modal/Icon",
+          "context": "Modal dialog with left-aligned header containing icon, scrollable main content, and footer with centered action buttons.",
+          "descendants": {
+            "IO907": {
+              "type": "frame",
+              "id": "mx8W7",
+              "name": "Icon Wrapper",
+              "width": 48,
+              "height": 48,
+              "fill": "$--accent",
+              "cornerRadius": "$--radius-xs",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "gap": 10,
+              "justifyContent": "center",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "IuTTB",
+                  "width": 24,
+                  "height": 24,
+                  "iconFontName": "triangle-alert",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--accent-foreground"
+                }
+              ]
+            },
+            "nXJcT": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "type": "frame",
+          "id": "WNAgm",
+          "x": 2200,
+          "y": 1296,
+          "name": "Radio/Selected",
+          "reusable": true,
+          "width": 16,
+          "height": 24,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "layout": "none",
+          "children": [
+            {
+              "type": "frame",
+              "id": "GBv9a",
+              "x": 0,
+              "y": 4,
+              "name": "radio",
+              "clip": true,
+              "width": 16,
+              "height": 16,
+              "fill": "$--primary",
+              "cornerRadius": 8,
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "ellipse",
+                  "id": "NsL5F",
+                  "x": 6,
+                  "y": 6,
+                  "name": "dot",
+                  "fill": "$--primary-foreground",
+                  "width": 4,
+                  "height": 4,
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": 1
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "X2c40",
+          "type": "ref",
+          "reusable": true,
+          "ref": "WNAgm",
+          "x": 2200,
+          "y": 1360,
+          "name": "Radio/Default",
+          "descendants": {
+            "GBv9a": {
+              "stroke": {
+                "align": "inside",
+                "thickness": 1,
+                "fill": "$--input"
+              },
+              "fill": "$--background"
+            },
+            "NsL5F": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "gug5Q",
+          "type": "ref",
+          "reusable": true,
+          "ref": "1YXlW",
+          "x": 2200,
+          "y": 1516,
+          "name": "Radio Description/Unselected",
+          "flipX": false,
+          "flipY": false,
+          "width": 400,
+          "height": "fit_content",
+          "textGrowth": "auto",
+          "descendants": {
+            "nHN2V": {
+              "id": "GsNS6",
+              "type": "ref",
+              "ref": "X2c40",
+              "x": 0,
+              "y": 0
+            }
+          }
+        },
+        {
+          "id": "ymB1F",
+          "type": "ref",
+          "reusable": true,
+          "ref": "1YXlW",
+          "x": 2200,
+          "y": 1608,
+          "width": "fit_content",
+          "name": "Radio/Selected",
+          "context": "A selected radio button with label.",
+          "descendants": {
+            "vhRBd": {
+              "width": "fit_content"
+            },
+            "oQ1Oc": {
+              "width": 376,
+              "height": 24,
+              "textGrowth": "auto"
+            },
+            "IHHiJ": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "CJWag",
+          "type": "ref",
+          "reusable": true,
+          "ref": "gug5Q",
+          "x": 2200,
+          "y": 1672,
+          "width": "fit_content",
+          "context": "A unselected radio button with label.",
+          "descendants": {
+            "vhRBd": {
+              "width": "fit_content"
+            },
+            "oQ1Oc": {
+              "width": 376,
+              "height": 24,
+              "textGrowth": "auto"
+            },
+            "IHHiJ": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "nE3IN",
+          "type": "ref",
+          "reusable": true,
+          "ref": "iSf6e",
+          "x": 2200,
+          "y": 1860,
+          "name": "Switch/Unchecked",
+          "context": "Unchecked toggle switch with blue background and white circle on left, with label text for binary settings controls.",
+          "descendants": {
+            "5BqEF": {
+              "justifyContent": "start",
+              "alignItems": "center",
+              "fill": "$--input"
+            }
+          }
+        },
+        {
+          "type": "frame",
+          "id": "fAUpL",
+          "x": 2200.007211688673,
+          "y": 2112,
+          "name": "Checkbox Description/Checked",
+          "context": "Checked checkbox with label and supporting description text.",
+          "reusable": true,
+          "rotation": -0.008608319284900577,
+          "width": 400,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "gap": 8,
+          "children": [
+            {
+              "id": "m1D7l",
+              "type": "ref",
+              "ref": "cvozN",
+              "x": 0,
+              "y": 0
+            },
+            {
+              "type": "frame",
+              "id": "8qR0f",
+              "name": "Text and supporting text",
+              "width": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1
+              },
+              "layout": "vertical",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "VnYde",
+                  "name": "Label Text",
+                  "fill": "$--foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Enable autonomous navigation",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "text",
+                  "id": "7CUFw",
+                  "name": "Supporting text",
+                  "fill": "$--muted-foreground",
+                  "textGrowth": "fixed-width",
+                  "width": "fill_container",
+                  "content": "Let the rover find the safest route on its own.",
+                  "lineHeight": 1.5,
+                  "fontFamily": "$--font-primary",
+                  "fontSize": 16,
+                  "fontWeight": "normal"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "cvozN",
+          "x": 2200,
+          "y": 1984,
+          "name": "Checkbox/Checked",
+          "reusable": true,
+          "width": 16,
+          "height": 24,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1
+          },
+          "layout": "none",
+          "children": [
+            {
+              "type": "frame",
+              "id": "I3CGB",
+              "x": 0,
+              "y": 4,
+              "name": "checkbox",
+              "clip": true,
+              "width": 16,
+              "height": 16,
+              "fill": "$--primary",
+              "cornerRadius": "$--radius-none",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1,
+                "fill": "$--primary"
+              },
+              "layout": "none",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "6qszF",
+                  "x": 2,
+                  "y": 2,
+                  "width": 12,
+                  "height": 12,
+                  "iconFontName": "check",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--primary-foreground"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "RQOOy",
+          "type": "ref",
+          "reusable": true,
+          "ref": "cvozN",
+          "x": 2200,
+          "y": 2048,
+          "name": "Checkbox/Unchecked",
+          "descendants": {
+            "I3CGB": {
+              "fill": "$--background",
+              "stroke": {
+                "align": "inside",
+                "thickness": 1,
+                "fill": "$--input"
+              }
+            },
+            "6qszF": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "Ku2gW",
+          "type": "ref",
+          "reusable": true,
+          "ref": "fAUpL",
+          "x": 2200.007211688673,
+          "y": 2200,
+          "name": "Checkbox Description/Unchecked",
+          "context": "Unchecked checkbox with label and supporting description text.",
+          "descendants": {
+            "m1D7l": {
+              "id": "qVI2Z",
+              "type": "ref",
+              "ref": "RQOOy",
+              "x": 0,
+              "y": 0
+            }
+          }
+        },
+        {
+          "id": "gfOPx",
+          "type": "ref",
+          "reusable": true,
+          "ref": "fAUpL",
+          "x": 2200.007211688673,
+          "y": 2288,
+          "width": "fit_content",
+          "name": "Checkbox/Checked",
+          "context": "Checked checkbox with label.",
+          "descendants": {
+            "8qR0f": {
+              "width": "fit_content"
+            },
+            "VnYde": {
+              "width": 376,
+              "height": 24,
+              "textGrowth": "auto"
+            },
+            "7CUFw": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "P6OMg",
+          "type": "ref",
+          "reusable": true,
+          "ref": "Ku2gW",
+          "x": 2200.007211688673,
+          "y": 2352,
+          "width": "fit_content",
+          "context": "Checked checkbox with label.",
+          "name": "Checkbox/Unchecked",
+          "descendants": {
+            "8qR0f": {
+              "width": "fit_content"
+            },
+            "VnYde": {
+              "width": 376,
+              "height": 24,
+              "textGrowth": "auto"
+            },
+            "7CUFw": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "iUDk1",
+          "type": "ref",
+          "reusable": true,
+          "ref": "5wVfn",
+          "x": 2200,
+          "y": 2582,
+          "name": "Input Group/Filled",
+          "context": "A filled variant of a complete input field group with label text above the input.",
+          "descendants": {
+            "QEFFJ": {
+              "fill": "$--foreground",
+              "content": "Input Value"
+            }
+          }
+        },
+        {
+          "id": "pQZMf",
+          "type": "ref",
+          "reusable": true,
+          "ref": "5wVfn",
+          "x": 2200,
+          "y": 2688,
+          "name": "Input/Default",
+          "context": "An input field.",
+          "descendants": {
+            "u8QE6": {
+              "enabled": false
+            },
+            "TJYFY": {
+              "x": 0,
+              "y": 0
+            }
+          }
+        },
+        {
+          "id": "dUXxc",
+          "type": "ref",
+          "reusable": true,
+          "ref": "iUDk1",
+          "x": 2200,
+          "y": 2768,
+          "name": "Input/Filled",
+          "context": "A filled variant of an input field.",
+          "descendants": {
+            "u8QE6": {
+              "enabled": false
+            },
+            "TJYFY": {
+              "x": 0,
+              "y": 0
+            }
+          }
+        },
+        {
+          "id": "ymaKv",
+          "type": "ref",
+          "reusable": true,
+          "ref": "O03YO",
+          "x": 2200,
+          "y": 3014,
+          "name": "Select Group/Filled",
+          "context": "A filled variant of a select group combining label text with a select dropdown trigger showing placeholder and chevron.",
+          "descendants": {
+            "7Thbt": {
+              "content": "Selected option",
+              "fill": "$--foreground"
+            }
+          }
+        },
+        {
+          "id": "fdrVg",
+          "type": "ref",
+          "reusable": true,
+          "ref": "O03YO",
+          "x": 2200,
+          "y": 3120,
+          "context": "A select.",
+          "name": "Select/Default",
+          "descendants": {
+            "H6Dmi": {
+              "enabled": false
+            }
+          }
+        },
+        {
+          "id": "3XkKV",
+          "type": "ref",
+          "reusable": true,
+          "ref": "ymaKv",
+          "x": 2200,
+          "y": 3200,
+          "context": "A filled variant of a select.",
+          "name": "Select/Filled",
+          "descendants": {
+            "H6Dmi": {
+              "enabled": false
+            },
+            "7Thbt": {
+              "content": "Selected option"
+            }
+          }
+        },
+        {
+          "id": "NJoRZ",
+          "type": "ref",
+          "reusable": true,
+          "ref": "duDYz",
+          "x": 2200,
+          "y": 3425,
+          "name": "Input OTP Group/Filled",
+          "context": "A filled input group for one-time password entry, featuring segmented input boxes for individual digit entry.",
+          "descendants": {
+            "pxiyT": {
+              "enabled": true
+            },
+            "6oQRn": {
+              "enabled": true
+            },
+            "BMNue": {
+              "enabled": true
+            },
+            "eE1sT": {
+              "enabled": true
+            },
+            "yuff0": {
+              "enabled": true
+            },
+            "oYmKU": {
+              "enabled": true
+            }
+          }
+        },
+        {
+          "id": "nlc9W",
+          "type": "ref",
+          "reusable": true,
+          "ref": "mFYne",
+          "x": 2200,
+          "y": 3737,
+          "name": "Textarea Group/Filled",
+          "context": "A textarea group with label above an 80px tall filled input area."
+        }
+      ]
+    }
+  ],
+  "themes": {
+    "Mode": [
+      "Light",
+      "Dark"
+    ]
+  },
+  "variables": {
+    "--sidebar": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#FFFFFF"
+        },
+        {
+          "value": "#2E2F33",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--sidebar-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#5B5F66"
+        },
+        {
+          "value": "#A0A6B2",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--sidebar-primary": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#0F5FFE"
+        },
+        {
+          "value": "#0F5FFE",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--sidebar-primary-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#002266"
+        },
+        {
+          "value": "#f5f5f5",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--sidebar-border": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#E1E2E5"
+        },
+        {
+          "value": "#414347",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--sidebar-accent": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#333333"
+        },
+        {
+          "value": "#1F1F1F",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--sidebar-accent-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#F5F5F5"
+        },
+        {
+          "value": "#F5F5F5",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--sidebar-ring": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#E1E2E5"
+        },
+        {
+          "value": "#414347",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--background": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#F5F5F5"
+        },
+        {
+          "value": "#252629",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#333333"
+        },
+        {
+          "value": "#F5F5F5",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--card": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#FFFFFF"
+        },
+        {
+          "value": "#1F1F1F",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--card-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#111111"
+        },
+        {
+          "value": "#FFFFFF",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--popover": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#FFFFFF"
+        },
+        {
+          "value": "#1F1F1F",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--popover-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#111111"
+        },
+        {
+          "value": "#FFFFFF",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--primary": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#0F5FFE"
+        },
+        {
+          "value": "#0F5FFE",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--primary-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#FFFFFF"
+        },
+        {
+          "value": "#F5F5F5",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--secondary": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#333333"
+        },
+        {
+          "value": "#414347",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--secondary-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#FFFFFF"
+        },
+        {
+          "value": "#FFFFFF",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--muted": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#F2F3F0"
+        },
+        {
+          "value": "#2E2E2E",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--muted-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#5B5F66"
+        },
+        {
+          "value": "#A0A6B2",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--accent": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#F2F3F0"
+        },
+        {
+          "value": "#252629",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--accent-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#111111"
+        },
+        {
+          "value": "#F2F3F0",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--destructive": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#A62911"
+        },
+        {
+          "value": "#A62911",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--border": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#E1E2E5"
+        },
+        {
+          "value": "#2E2E2E",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--input": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#9DA4B3"
+        },
+        {
+          "value": "#414347",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--ring": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#E1E2E5"
+        },
+        {
+          "value": "#666666",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--white": {
+      "type": "color",
+      "value": "#FFFFFF"
+    },
+    "--black": {
+      "type": "color",
+      "value": "#000000"
+    },
+    "--font-primary": {
+      "type": "string",
+      "value": "Roboto"
+    },
+    "--font-secondary": {
+      "type": "string",
+      "value": [
+        {
+          "value": "Roboto Mono",
+          "theme": {
+            "Mode": "Light"
+          }
+        },
+        {
+          "value": "Roboto Mono",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--radius-none": {
+      "type": "number",
+      "value": 0
+    },
+    "--radius-pill": {
+      "type": "number",
+      "value": 999
+    },
+    "--color-success": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#DDF0C9"
+        },
+        {
+          "value": "#4A4E49",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--color-success-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#1A3300"
+        },
+        {
+          "value": "#D1F0C9",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--color-warning": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#F5E6D7"
+        },
+        {
+          "value": "#4F4E4C",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--color-warning-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#663300"
+        },
+        {
+          "value": "#F5E1CE",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--color-error": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#F5D7F3"
+        },
+        {
+          "value": "#57474A",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--color-error-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#66005E"
+        },
+        {
+          "value": "#F5C4CC",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--color-info": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#C9D6F0"
+        },
+        {
+          "value": "#3C4352",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--color-info-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#001133"
+        },
+        {
+          "value": "#B2CCFF",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    },
+    "--radius-xs": {
+      "type": "number",
+      "value": 2
+    },
+    "--destructive-foreground": {
+      "type": "color",
+      "value": [
+        {
+          "value": "#FFFFFF"
+        },
+        {
+          "value": "#FFFFFF",
+          "theme": {
+            "Mode": "Dark"
+          }
+        }
+      ]
+    }
+  }
+}