{
  "version": "2.8",
  "children": [
    {
      "type": "frame",
      "id": "mni01",
      "x": 0,
      "y": 0,
      "name": "Modified Note Indicator — NoteList States",
      "width": 340,
      "height": "fit_content(600)",
      "fill": "$--card",
      "layout": "vertical",
      "children": [
        {
          "type": "text",
          "id": "mni01t",
          "fill": "$--muted-foreground",
          "content": "NoteList — Modified vs Clean",
          "fontFamily": "Inter",
          "fontSize": 10,
          "fontWeight": "600",
          "textTransform": "uppercase",
          "letterSpacing": 1,
          "width": "fill_container",
          "padding": [8, 16]
        },
        {
          "type": "frame",
          "id": "mni02",
          "name": "Note Item — Modified",
          "width": "fill_container",
          "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
          "layout": "vertical",
          "gap": 4,
          "padding": [14, 16],
          "children": [
            {
              "type": "frame",
              "id": "mni02r",
              "name": "titleRow",
              "width": "fill_container",
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "mni02tg",
                  "gap": 6,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "ellipse",
                      "id": "mni02dot",
                      "name": "Modified Indicator",
                      "width": 6,
                      "height": 6,
                      "fill": "$--accent-orange"
                    },
                    {
                      "type": "text",
                      "id": "mni02ti",
                      "fill": "$--foreground",
                      "content": "Build Laputa App",
                      "fontFamily": "Inter",
                      "fontSize": 13,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "icon_font",
                  "id": "mni02ic",
                  "width": 14,
                  "height": 14,
                  "iconFontName": "wrench",
                  "iconFontFamily": "phosphor",
                  "fill": "$--accent-red"
                }
              ]
            },
            {
              "type": "text",
              "id": "mni02sn",
              "fill": "$--muted-foreground",
              "textGrowth": "fixed-width",
              "width": "fill_container",
              "content": "Personal knowledge management app built with Tauri + React.",
              "lineHeight": 1.5,
              "fontFamily": "Inter",
              "fontSize": 12,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "mni02tm",
              "fill": "$--muted-foreground",
              "content": "2m ago",
              "fontFamily": "Inter",
              "fontSize": 11,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "mni03",
          "name": "Note Item — Clean (no indicator)",
          "width": "fill_container",
          "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
          "layout": "vertical",
          "gap": 4,
          "padding": [14, 16],
          "children": [
            {
              "type": "frame",
              "id": "mni03r",
              "name": "titleRow",
              "width": "fill_container",
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "mni03ti",
                  "fill": "$--foreground",
                  "content": "Facebook Ads Strategy",
                  "fontFamily": "Inter",
                  "fontSize": 13,
                  "fontWeight": "500"
                },
                {
                  "type": "icon_font",
                  "id": "mni03ic",
                  "width": 14,
                  "height": 14,
                  "iconFontName": "file-text",
                  "iconFontFamily": "phosphor",
                  "fill": "$--muted-foreground"
                }
              ]
            },
            {
              "type": "text",
              "id": "mni03sn",
              "fill": "$--muted-foreground",
              "textGrowth": "fixed-width",
              "width": "fill_container",
              "content": "Lookalike audiences convert 3x better than cold.",
              "lineHeight": 1.5,
              "fontFamily": "Inter",
              "fontSize": 12,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "mni03tm",
              "fill": "$--muted-foreground",
              "content": "1h ago",
              "fontFamily": "Inter",
              "fontSize": 11,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "mni04",
          "name": "Note Item — Added (new file)",
          "width": "fill_container",
          "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
          "layout": "vertical",
          "gap": 4,
          "padding": [14, 16],
          "children": [
            {
              "type": "frame",
              "id": "mni04r",
              "name": "titleRow",
              "width": "fill_container",
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "mni04tg",
                  "gap": 6,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "ellipse",
                      "id": "mni04dot",
                      "name": "Modified Indicator",
                      "width": 6,
                      "height": 6,
                      "fill": "$--accent-orange"
                    },
                    {
                      "type": "text",
                      "id": "mni04ti",
                      "fill": "$--foreground",
                      "content": "AI Agents Primer",
                      "fontFamily": "Inter",
                      "fontSize": 13,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "icon_font",
                  "id": "mni04ic",
                  "width": 14,
                  "height": 14,
                  "iconFontName": "file-text",
                  "iconFontFamily": "phosphor",
                  "fill": "$--muted-foreground"
                }
              ]
            },
            {
              "type": "text",
              "id": "mni04sn",
              "fill": "$--muted-foreground",
              "textGrowth": "fixed-width",
              "width": "fill_container",
              "content": "How autonomous agents are changing software development.",
              "lineHeight": 1.5,
              "fontFamily": "Inter",
              "fontSize": 12,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "mni04tm",
              "fill": "$--muted-foreground",
              "content": "5m ago",
              "fontFamily": "Inter",
              "fontSize": 11,
              "fontWeight": "normal"
            }
          ]
        }
      ]
    },
    {
      "type": "frame",
      "id": "mni10",
      "x": 380,
      "y": 0,
      "name": "Modified Note Indicator — TabBar States",
      "width": 800,
      "height": 120,
      "fill": "$--sidebar",
      "layout": "vertical",
      "children": [
        {
          "type": "text",
          "id": "mni10t",
          "fill": "$--muted-foreground",
          "content": "TabBar — Modified Dot on Dirty Tabs",
          "fontFamily": "Inter",
          "fontSize": 10,
          "fontWeight": "600",
          "textTransform": "uppercase",
          "letterSpacing": 1,
          "padding": [8, 16]
        },
        {
          "type": "frame",
          "id": "mni11",
          "name": "Tab Bar with Modified Indicators",
          "width": "fill_container",
          "height": 45,
          "fill": "$--sidebar",
          "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" },
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "id": "mni11a",
              "name": "Tab Active — Modified",
              "height": "fill_container",
              "fill": "$--background",
              "stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" },
              "gap": 6,
              "padding": [0, 14],
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "mni11at",
                  "fill": "$--foreground",
                  "content": "Build Laputa App",
                  "fontFamily": "Inter",
                  "fontSize": 12,
                  "fontWeight": "500"
                },
                {
                  "type": "ellipse",
                  "id": "mni11adot",
                  "name": "Tab Modified Dot",
                  "width": 6,
                  "height": 6,
                  "fill": "$--accent-orange"
                },
                {
                  "type": "icon_font",
                  "id": "mni11ax",
                  "width": 14,
                  "height": 14,
                  "iconFontName": "x",
                  "iconFontFamily": "lucide",
                  "fill": "$--muted-foreground"
                }
              ]
            },
            {
              "type": "frame",
              "id": "mni11b",
              "name": "Tab Inactive — Clean",
              "height": "fill_container",
              "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" },
              "gap": 6,
              "padding": [0, 14],
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "mni11bt",
                  "fill": "$--muted-foreground",
                  "content": "Facebook Ads Strategy",
                  "fontFamily": "Inter",
                  "fontSize": 12,
                  "fontWeight": "normal"
                },
                {
                  "type": "icon_font",
                  "id": "mni11bx",
                  "opacity": 0,
                  "width": 14,
                  "height": 14,
                  "iconFontName": "x",
                  "iconFontFamily": "lucide",
                  "fill": "$--muted-foreground"
                }
              ]
            },
            {
              "type": "frame",
              "id": "mni11c",
              "name": "Tab Inactive — Modified",
              "height": "fill_container",
              "stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" },
              "gap": 6,
              "padding": [0, 14],
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "mni11ct",
                  "fill": "$--muted-foreground",
                  "content": "AI Agents Primer",
                  "fontFamily": "Inter",
                  "fontSize": 12,
                  "fontWeight": "normal"
                },
                {
                  "type": "ellipse",
                  "id": "mni11cdot",
                  "name": "Tab Modified Dot",
                  "width": 6,
                  "height": 6,
                  "fill": "$--accent-orange"
                },
                {
                  "type": "icon_font",
                  "id": "mni11cx",
                  "opacity": 0,
                  "width": 14,
                  "height": 14,
                  "iconFontName": "x",
                  "iconFontFamily": "lucide",
                  "fill": "$--muted-foreground"
                }
              ]
            },
            {
              "type": "frame",
              "id": "mni11sp",
              "name": "tabSpacer",
              "width": "fill_container",
              "height": "fill_container",
              "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }
            },
            {
              "type": "frame",
              "id": "mni11ctrl",
              "name": "tabControls",
              "height": "fill_container",
              "stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" },
              "gap": 12,
              "padding": [0, 12],
              "justifyContent": "space_around",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "mni11plus",
                  "width": 16,
                  "height": 16,
                  "iconFontName": "plus",
                  "iconFontFamily": "phosphor",
                  "fill": "$--muted-foreground"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "frame",
      "id": "mni20",
      "x": 0,
      "y": 400,
      "name": "Modified Note Indicator — StatusBar Pending Count",
      "width": 800,
      "height": 80,
      "fill": "$--background",
      "layout": "vertical",
      "children": [
        {
          "type": "text",
          "id": "mni20t",
          "fill": "$--muted-foreground",
          "content": "StatusBar — Pending Changes Counter",
          "fontFamily": "Inter",
          "fontSize": 10,
          "fontWeight": "600",
          "textTransform": "uppercase",
          "letterSpacing": 1,
          "padding": [8, 16]
        },
        {
          "type": "frame",
          "id": "mni21",
          "name": "StatusBar with Pending Count",
          "width": "fill_container",
          "height": 30,
          "fill": "$--sidebar",
          "stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" },
          "padding": [0, 8],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "id": "mni21l",
              "name": "left",
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "mni21v",
                  "gap": 4,
                  "alignItems": "center",
                  "children": [
                    { "type": "icon_font", "id": "mni21fi", "width": 13, "height": 13, "iconFontName": "folder-open", "iconFontFamily": "lucide", "fill": "$--muted-foreground" },
                    { "type": "text", "id": "mni21fl", "fill": "$--muted-foreground", "content": "Demo v2", "fontFamily": "Inter", "fontSize": 11 }
                  ]
                },
                { "type": "text", "id": "mni21s1", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 },
                {
                  "type": "frame",
                  "id": "mni21br",
                  "gap": 4,
                  "alignItems": "center",
                  "children": [
                    { "type": "icon_font", "id": "mni21gi", "width": 13, "height": 13, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "$--muted-foreground" },
                    { "type": "text", "id": "mni21gl", "fill": "$--muted-foreground", "content": "main", "fontFamily": "Inter", "fontSize": 11 }
                  ]
                },
                { "type": "text", "id": "mni21s2", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 },
                {
                  "type": "frame",
                  "id": "mni21sy",
                  "gap": 4,
                  "alignItems": "center",
                  "children": [
                    { "type": "icon_font", "id": "mni21ri", "width": 13, "height": 13, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$--accent-green" },
                    { "type": "text", "id": "mni21rl", "fill": "$--muted-foreground", "content": "Synced 2m ago", "fontFamily": "Inter", "fontSize": 11 }
                  ]
                },
                { "type": "text", "id": "mni21s3", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 },
                {
                  "type": "frame",
                  "id": "mni21pd",
                  "name": "Pending Count",
                  "gap": 4,
                  "alignItems": "center",
                  "children": [
                    { "type": "icon_font", "id": "mni21pi", "width": 13, "height": 13, "iconFontName": "circle-dot", "iconFontFamily": "lucide", "fill": "$--accent-orange" },
                    { "type": "text", "id": "mni21pl", "fill": "$--muted-foreground", "content": "3 pending", "fontFamily": "Inter", "fontSize": 11 }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "mni21r",
              "name": "right",
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "mni21nc",
                  "gap": 4,
                  "alignItems": "center",
                  "children": [
                    { "type": "icon_font", "id": "mni21ni", "width": 13, "height": 13, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$--muted-foreground" },
                    { "type": "text", "id": "mni21nl", "fill": "$--muted-foreground", "content": "9,200 notes", "fontFamily": "Inter", "fontSize": 11 }
                  ]
                },
                { "type": "icon_font", "id": "mni21set", "width": 14, "height": 14, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }
              ]
            }
          ]
        }
      ]
    }
  ],
  "themes": { "Mode": ["Dark"] },
  "variables": {},
  "fonts": []
}