{
  "version": "2.8",
  "themes": {
    "Mode": [
      "Dark"
    ]
  },
  "variables": {
    "--background": {
      "type": "color",
      "value": [
        { "value": "#FFFFFF" },
        { "value": "#191919", "theme": { "Mode": "Dark" } }
      ]
    },
    "--foreground": {
      "type": "color",
      "value": [
        { "value": "#37352F" },
        { "value": "#ffffffcf", "theme": { "Mode": "Dark" } }
      ]
    },
    "--muted-foreground": {
      "type": "color",
      "value": [
        { "value": "#787774" },
        { "value": "#ffffff71", "theme": { "Mode": "Dark" } }
      ]
    },
    "--popover": {
      "type": "color",
      "value": [
        { "value": "#FFFFFF" },
        { "value": "#252525", "theme": { "Mode": "Dark" } }
      ]
    },
    "--popover-foreground": {
      "type": "color",
      "value": [
        { "value": "#37352F" },
        { "value": "#ffffffcf", "theme": { "Mode": "Dark" } }
      ]
    },
    "--border": {
      "type": "color",
      "value": [
        { "value": "#E9E9E7" },
        { "value": "#ffffff18", "theme": { "Mode": "Dark" } }
      ]
    },
    "--accent-blue": {
      "type": "color",
      "value": [
        { "value": "#2383E2" },
        { "value": "#4a9eff", "theme": { "Mode": "Dark" } }
      ]
    },
    "--sidebar": {
      "type": "color",
      "value": [
        { "value": "#F7F7F5" },
        { "value": "#202020", "theme": { "Mode": "Dark" } }
      ]
    },
    "--muted": {
      "type": "color",
      "value": [
        { "value": "#F1F1EF" },
        { "value": "#ffffff0e", "theme": { "Mode": "Dark" } }
      ]
    },
    "--font-primary": {
      "type": "font",
      "value": [{ "value": "Inter" }]
    },
    "--radius-sm": {
      "type": "number",
      "value": [{ "value": 4 }]
    },
    "--radius-md": {
      "type": "number",
      "value": [{ "value": 6 }]
    }
  },
  "children": [
    {
      "type": "frame",
      "id": "srtDD",
      "x": 0,
      "y": 0,
      "name": "Sort Dropdown — Direction Arrows",
      "clip": true,
      "width": 260,
      "height": 280,
      "fill": "$--popover",
      "cornerRadius": "$--radius-md",
      "stroke": {
        "align": "outside",
        "thickness": 1,
        "fill": "$--border"
      },
      "layout": "vertical",
      "padding": [8, 0],
      "children": [
        {
          "type": "frame",
          "id": "srtH1",
          "name": "dropdownHeader",
          "width": "fill_container",
          "height": 28,
          "padding": [0, 12],
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "srtHL",
              "name": "headerLabel",
              "content": "Sort by",
              "fontSize": 11,
              "fontWeight": 600,
              "fill": "$--muted-foreground",
              "fontFamily": "$--font-primary",
              "textTransform": "uppercase",
              "letterSpacing": 0.5
            }
          ]
        },
        {
          "type": "frame",
          "id": "srtR1",
          "name": "row-modified",
          "width": "fill_container",
          "height": 36,
          "padding": [0, 12],
          "alignItems": "center",
          "fill": "$--muted",
          "children": [
            {
              "type": "text",
              "id": "srtT1",
              "name": "label-modified",
              "content": "Modified",
              "fontSize": 13,
              "fontWeight": 500,
              "fill": "$--popover-foreground",
              "fontFamily": "$--font-primary",
              "width": "fill_container"
            },
            {
              "type": "frame",
              "id": "srtA1",
              "name": "arrows-modified",
              "gap": 2,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "srtU1",
                  "name": "arrow-up-active",
                  "content": "↑",
                  "fontSize": 13,
                  "fontWeight": 700,
                  "fill": "$--accent-blue"
                },
                {
                  "type": "text",
                  "id": "srtD1",
                  "name": "arrow-down",
                  "content": "↓",
                  "fontSize": 13,
                  "fontWeight": 400,
                  "fill": "$--muted-foreground"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "srtR2",
          "name": "row-title",
          "width": "fill_container",
          "height": 36,
          "padding": [0, 12],
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "srtT2",
              "name": "label-title",
              "content": "Title",
              "fontSize": 13,
              "fontWeight": 400,
              "fill": "$--popover-foreground",
              "fontFamily": "$--font-primary",
              "width": "fill_container"
            },
            {
              "type": "frame",
              "id": "srtA2",
              "name": "arrows-title",
              "gap": 2,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "srtU2",
                  "name": "arrow-up",
                  "content": "↑",
                  "fontSize": 13,
                  "fontWeight": 400,
                  "fill": "$--muted-foreground"
                },
                {
                  "type": "text",
                  "id": "srtD2",
                  "name": "arrow-down",
                  "content": "↓",
                  "fontSize": 13,
                  "fontWeight": 400,
                  "fill": "$--muted-foreground"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "srtR3",
          "name": "row-created",
          "width": "fill_container",
          "height": 36,
          "padding": [0, 12],
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "srtT3",
              "name": "label-created",
              "content": "Created",
              "fontSize": 13,
              "fontWeight": 400,
              "fill": "$--popover-foreground",
              "fontFamily": "$--font-primary",
              "width": "fill_container"
            },
            {
              "type": "frame",
              "id": "srtA3",
              "name": "arrows-created",
              "gap": 2,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "srtU3",
                  "name": "arrow-up",
                  "content": "↑",
                  "fontSize": 13,
                  "fontWeight": 400,
                  "fill": "$--muted-foreground"
                },
                {
                  "type": "text",
                  "id": "srtD3",
                  "name": "arrow-down",
                  "content": "↓",
                  "fontSize": 13,
                  "fontWeight": 400,
                  "fill": "$--muted-foreground"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "srtR4",
          "name": "row-type",
          "width": "fill_container",
          "height": 36,
          "padding": [0, 12],
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "srtT4",
              "name": "label-type",
              "content": "Type",
              "fontSize": 13,
              "fontWeight": 400,
              "fill": "$--popover-foreground",
              "fontFamily": "$--font-primary",
              "width": "fill_container"
            },
            {
              "type": "frame",
              "id": "srtA4",
              "name": "arrows-type",
              "gap": 2,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "srtU4",
                  "name": "arrow-up",
                  "content": "↑",
                  "fontSize": 13,
                  "fontWeight": 400,
                  "fill": "$--muted-foreground"
                },
                {
                  "type": "text",
                  "id": "srtD4",
                  "name": "arrow-down",
                  "content": "↓",
                  "fontSize": 13,
                  "fontWeight": 400,
                  "fill": "$--muted-foreground"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "srtSP",
          "name": "separator",
          "width": "fill_container",
          "height": 1,
          "fill": "$--border"
        },
        {
          "type": "frame",
          "id": "srtAN",
          "name": "annotation",
          "width": "fill_container",
          "padding": [6, 12],
          "children": [
            {
              "type": "text",
              "id": "srtAT",
              "name": "annotation-text",
              "content": "Click ↑↓ to toggle direction. Blue = active.",
              "fontSize": 11,
              "fill": "$--muted-foreground",
              "fontFamily": "$--font-primary"
            }
          ]
        }
      ]
    },
    {
      "type": "frame",
      "id": "srtBN",
      "x": 300,
      "y": 0,
      "name": "Sort Button — With Direction Indicator",
      "clip": true,
      "width": 400,
      "height": 200,
      "fill": "$--background",
      "cornerRadius": "$--radius-md",
      "stroke": {
        "align": "outside",
        "thickness": 1,
        "fill": "$--border"
      },
      "layout": "vertical",
      "padding": [16, 16],
      "gap": 16,
      "children": [
        {
          "type": "frame",
          "id": "srtBH",
          "name": "noteListHeader",
          "width": "fill_container",
          "height": 36,
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "srtBC",
              "name": "noteCount",
              "content": "42 notes",
              "fontSize": 12,
              "fill": "$--muted-foreground",
              "fontFamily": "$--font-primary",
              "width": "fill_container"
            },
            {
              "type": "frame",
              "id": "srtBB",
              "name": "sortButton",
              "padding": [4, 8],
              "cornerRadius": "$--radius-sm",
              "fill": "$--muted",
              "alignItems": "center",
              "gap": 4,
              "children": [
                {
                  "type": "text",
                  "id": "srtBL",
                  "name": "sortLabel",
                  "content": "Modified",
                  "fontSize": 12,
                  "fontWeight": 500,
                  "fill": "$--foreground",
                  "fontFamily": "$--font-primary"
                },
                {
                  "type": "text",
                  "id": "srtBA",
                  "name": "directionArrow",
                  "content": "↓",
                  "fontSize": 12,
                  "fontWeight": 600,
                  "fill": "$--accent-blue"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "srtSP2",
          "name": "divider",
          "width": "fill_container",
          "height": 1,
          "fill": "$--border"
        },
        {
          "type": "frame",
          "id": "srtEX",
          "name": "exampleNotes",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 2,
          "children": [
            {
              "type": "frame",
              "id": "srtN1",
              "name": "noteRow1",
              "width": "fill_container",
              "height": 32,
              "padding": [0, 8],
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "srtNT1",
                  "name": "noteTitle1",
                  "content": "Meeting Notes — Feb 22",
                  "fontSize": 13,
                  "fill": "$--foreground",
                  "fontFamily": "$--font-primary",
                  "width": "fill_container"
                },
                {
                  "type": "text",
                  "id": "srtND1",
                  "name": "noteDate1",
                  "content": "2 min ago",
                  "fontSize": 11,
                  "fill": "$--muted-foreground",
                  "fontFamily": "$--font-primary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "srtN2",
              "name": "noteRow2",
              "width": "fill_container",
              "height": 32,
              "padding": [0, 8],
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "srtNT2",
                  "name": "noteTitle2",
                  "content": "Project Roadmap",
                  "fontSize": 13,
                  "fill": "$--foreground",
                  "fontFamily": "$--font-primary",
                  "width": "fill_container"
                },
                {
                  "type": "text",
                  "id": "srtND2",
                  "name": "noteDate2",
                  "content": "1 hr ago",
                  "fontSize": 11,
                  "fill": "$--muted-foreground",
                  "fontFamily": "$--font-primary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "srtN3",
              "name": "noteRow3",
              "width": "fill_container",
              "height": 32,
              "padding": [0, 8],
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "srtNT3",
                  "name": "noteTitle3",
                  "content": "Weekly Review",
                  "fontSize": 13,
                  "fill": "$--foreground",
                  "fontFamily": "$--font-primary",
                  "width": "fill_container"
                },
                {
                  "type": "text",
                  "id": "srtND3",
                  "name": "noteDate3",
                  "content": "Yesterday",
                  "fontSize": 11,
                  "fill": "$--muted-foreground",
                  "fontFamily": "$--font-primary"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "srtAN2",
          "name": "annotation",
          "width": "fill_container",
          "padding": [6, 0],
          "children": [
            {
              "type": "text",
              "id": "srtAT2",
              "name": "annotation-text",
              "content": "Sort button shows property + direction arrow. Click to open dropdown.",
              "fontSize": 11,
              "fill": "$--muted-foreground",
              "fontFamily": "$--font-primary"
            }
          ]
        }
      ]
    }
  ]
}