From bacd4e17a247ec07d9f4e187441a0f706768aa84 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Tue, 24 Feb 2026 16:01:41 +0100
Subject: [PATCH] design: merge vista-changes frames into ui-design.pen

---
 ui-design.pen | 880 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 880 insertions(+)

diff --git a/ui-design.pen b/ui-design.pen
index 6e3f9531..2a73d75c 100644
--- a/ui-design.pen
+++ b/ui-design.pen
@@ -18854,6 +18854,886 @@
           ]
         }
       ]
+    },
+    {
+      "type": "frame",
+      "id": "vc001",
+      "x": 0,
+      "y": 0,
+      "name": "Changes — sidebar section with pending notes",
+      "clip": true,
+      "width": 550,
+      "height": 500,
+      "fill": "$--background",
+      "layout": "horizontal",
+      "children": [
+        {
+          "type": "frame",
+          "id": "vc002",
+          "name": "Sidebar",
+          "width": 250,
+          "height": "fill_container",
+          "fill": "$--sidebar",
+          "layout": "vertical",
+          "children": [
+            {
+              "type": "frame",
+              "id": "vc003",
+              "name": "Filters",
+              "width": "fill_container",
+              "layout": "vertical",
+              "gap": 1,
+              "padding": [
+                8,
+                8
+              ],
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "vc004",
+                  "name": "filterAll",
+                  "width": "fill_container",
+                  "cornerRadius": 6,
+                  "gap": 8,
+                  "padding": [
+                    6,
+                    16
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "vc005",
+                      "text": "All Notes",
+                      "fontSize": 13,
+                      "fill": "$--foreground"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "vc006",
+                  "name": "filterFavorites",
+                  "width": "fill_container",
+                  "cornerRadius": 6,
+                  "gap": 8,
+                  "padding": [
+                    6,
+                    16
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "vc007",
+                      "text": "Favorites",
+                      "fontSize": 13,
+                      "fill": "$--foreground"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "vc008",
+                  "name": "filterTrash",
+                  "width": "fill_container",
+                  "cornerRadius": 6,
+                  "gap": 8,
+                  "padding": [
+                    6,
+                    16
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "vc009",
+                      "text": "Trash",
+                      "fontSize": 13,
+                      "fill": "$--foreground"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "vc010",
+                  "name": "filterChanges-active",
+                  "width": "fill_container",
+                  "fill": "#F5750018",
+                  "cornerRadius": 6,
+                  "gap": 8,
+                  "padding": [
+                    6,
+                    16
+                  ],
+                  "alignItems": "center",
+                  "justifyContent": "space-between",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "vc011",
+                      "text": "Changes",
+                      "fontSize": 13,
+                      "fontWeight": 500,
+                      "fill": "$--accent-orange"
+                    },
+                    {
+                      "type": "frame",
+                      "id": "vc012",
+                      "name": "badge",
+                      "fill": "$--accent-orange",
+                      "cornerRadius": 9999,
+                      "padding": [
+                        0,
+                        6
+                      ],
+                      "height": 20,
+                      "alignItems": "center",
+                      "children": [
+                        {
+                          "type": "text",
+                          "id": "vc013",
+                          "text": "3",
+                          "fontSize": 10,
+                          "fontWeight": 600,
+                          "fill": "$--white"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "vc014",
+          "name": "NoteList: Changes",
+          "width": 300,
+          "height": "fill_container",
+          "fill": "$--card",
+          "layout": "vertical",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "right": 1
+            },
+            "fill": "$--border"
+          },
+          "children": [
+            {
+              "type": "frame",
+              "id": "vc015",
+              "name": "header",
+              "width": "fill_container",
+              "height": 45,
+              "padding": [
+                0,
+                16
+              ],
+              "alignItems": "center",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "text",
+                  "id": "vc016",
+                  "text": "Changes",
+                  "fontSize": 14,
+                  "fontWeight": 600,
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc017",
+              "name": "note1-modified",
+              "width": "fill_container",
+              "padding": [
+                10,
+                16
+              ],
+              "gap": 4,
+              "layout": "vertical",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "vc018",
+                  "name": "titleRow",
+                  "gap": 6,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "ellipse",
+                      "id": "vc019",
+                      "name": "modifiedDot",
+                      "fill": "$--accent-orange",
+                      "width": 6,
+                      "height": 6
+                    },
+                    {
+                      "type": "text",
+                      "id": "vc020",
+                      "text": "Build Laputa App",
+                      "fontSize": 13,
+                      "fontWeight": 600,
+                      "fill": "$--foreground"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "vc021",
+                  "text": "This paragraph has bold text, italic text…",
+                  "fontSize": 12,
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc022",
+              "name": "note2-modified",
+              "width": "fill_container",
+              "padding": [
+                10,
+                16
+              ],
+              "gap": 4,
+              "layout": "vertical",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "vc023",
+                  "name": "titleRow",
+                  "gap": 6,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "ellipse",
+                      "id": "vc024",
+                      "name": "modifiedDot",
+                      "fill": "$--accent-orange",
+                      "width": 6,
+                      "height": 6
+                    },
+                    {
+                      "type": "text",
+                      "id": "vc025",
+                      "text": "Facebook Ads Strategy",
+                      "fontSize": 13,
+                      "fontWeight": 600,
+                      "fill": "$--foreground"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "vc026",
+                  "text": "Lookalike audiences from newsletter subscribers…",
+                  "fontSize": 12,
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc027",
+              "name": "note3-added",
+              "width": "fill_container",
+              "padding": [
+                10,
+                16
+              ],
+              "gap": 4,
+              "layout": "vertical",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "vc028",
+                  "name": "titleRow",
+                  "gap": 6,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "ellipse",
+                      "id": "vc029",
+                      "name": "modifiedDot",
+                      "fill": "$--accent-orange",
+                      "width": 6,
+                      "height": 6
+                    },
+                    {
+                      "type": "text",
+                      "id": "vc030",
+                      "text": "AI Agents Primer",
+                      "fontSize": 13,
+                      "fontWeight": 600,
+                      "fill": "$--foreground"
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "vc031",
+                  "text": "AI agents are autonomous systems that can plan…",
+                  "fontSize": 12,
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "frame",
+      "id": "vc100",
+      "x": 600,
+      "y": 0,
+      "name": "Changes — empty state (0 pending)",
+      "clip": true,
+      "width": 550,
+      "height": 400,
+      "fill": "$--background",
+      "layout": "horizontal",
+      "children": [
+        {
+          "type": "frame",
+          "id": "vc101",
+          "name": "Sidebar (no Changes item)",
+          "width": 250,
+          "height": "fill_container",
+          "fill": "$--sidebar",
+          "layout": "vertical",
+          "children": [
+            {
+              "type": "frame",
+              "id": "vc102",
+              "name": "Filters",
+              "width": "fill_container",
+              "layout": "vertical",
+              "gap": 1,
+              "padding": [
+                8,
+                8
+              ],
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "vc103",
+                  "name": "filterAll-active",
+                  "width": "fill_container",
+                  "fill": "#4a9eff18",
+                  "cornerRadius": 6,
+                  "gap": 8,
+                  "padding": [
+                    6,
+                    16
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "vc104",
+                      "text": "All Notes",
+                      "fontSize": 13,
+                      "fontWeight": 500,
+                      "fill": "$--primary"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "vc105",
+                  "name": "filterFavorites",
+                  "width": "fill_container",
+                  "cornerRadius": 6,
+                  "gap": 8,
+                  "padding": [
+                    6,
+                    16
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "vc106",
+                      "text": "Favorites",
+                      "fontSize": 13,
+                      "fill": "$--foreground"
+                    }
+                  ]
+                },
+                {
+                  "type": "frame",
+                  "id": "vc107",
+                  "name": "filterTrash",
+                  "width": "fill_container",
+                  "cornerRadius": 6,
+                  "gap": 8,
+                  "padding": [
+                    6,
+                    16
+                  ],
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "vc108",
+                      "text": "Trash",
+                      "fontSize": 13,
+                      "fill": "$--foreground"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc109",
+              "name": "annotation",
+              "width": "fill_container",
+              "padding": [
+                12,
+                16
+              ],
+              "children": [
+                {
+                  "type": "text",
+                  "id": "vc110",
+                  "text": "← No \"Changes\" item when 0 pending",
+                  "fontSize": 11,
+                  "fill": "$--muted-foreground",
+                  "fontStyle": "italic"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "vc111",
+          "name": "NoteList: All Notes",
+          "width": 300,
+          "height": "fill_container",
+          "fill": "$--card",
+          "layout": "vertical",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "right": 1
+            },
+            "fill": "$--border"
+          },
+          "children": [
+            {
+              "type": "frame",
+              "id": "vc112",
+              "name": "header",
+              "width": "fill_container",
+              "height": 45,
+              "padding": [
+                0,
+                16
+              ],
+              "alignItems": "center",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "text",
+                  "id": "vc113",
+                  "text": "Notes",
+                  "fontSize": 14,
+                  "fontWeight": 600,
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc114",
+              "name": "notesList",
+              "width": "fill_container",
+              "height": "fill_container",
+              "layout": "vertical",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "vc115",
+                  "name": "note-no-dot",
+                  "width": "fill_container",
+                  "padding": [
+                    10,
+                    16
+                  ],
+                  "gap": 4,
+                  "layout": "vertical",
+                  "stroke": {
+                    "align": "inside",
+                    "thickness": {
+                      "bottom": 1
+                    },
+                    "fill": "$--border"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "id": "vc116",
+                      "text": "Build Laputa App",
+                      "fontSize": 13,
+                      "fontWeight": 600,
+                      "fill": "$--foreground"
+                    },
+                    {
+                      "type": "text",
+                      "id": "vc117",
+                      "text": "No orange dot — all committed",
+                      "fontSize": 12,
+                      "fill": "$--muted-foreground"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "frame",
+      "id": "vc200",
+      "x": 0,
+      "y": 560,
+      "name": "Changes — real-time update (note disappears after save)",
+      "clip": true,
+      "width": 800,
+      "height": 300,
+      "fill": "$--background",
+      "layout": "horizontal",
+      "gap": 40,
+      "padding": [
+        20,
+        20
+      ],
+      "children": [
+        {
+          "type": "frame",
+          "id": "vc201",
+          "name": "Before: 3 pending",
+          "width": 340,
+          "height": "fill_container",
+          "fill": "$--card",
+          "layout": "vertical",
+          "cornerRadius": 8,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--border"
+          },
+          "children": [
+            {
+              "type": "frame",
+              "id": "vc202",
+              "name": "header",
+              "width": "fill_container",
+              "height": 36,
+              "padding": [
+                0,
+                12
+              ],
+              "alignItems": "center",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "text",
+                  "id": "vc203",
+                  "text": "Changes (before save)",
+                  "fontSize": 12,
+                  "fontWeight": 600,
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc204",
+              "name": "item1",
+              "width": "fill_container",
+              "padding": [
+                8,
+                12
+              ],
+              "gap": 6,
+              "alignItems": "center",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "ellipse",
+                  "id": "vc205",
+                  "fill": "$--accent-orange",
+                  "width": 6,
+                  "height": 6
+                },
+                {
+                  "type": "text",
+                  "id": "vc206",
+                  "text": "Build Laputa App",
+                  "fontSize": 12,
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc207",
+              "name": "item2-highlight",
+              "width": "fill_container",
+              "padding": [
+                8,
+                12
+              ],
+              "gap": 6,
+              "fill": "#F5750010",
+              "alignItems": "center",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "ellipse",
+                  "id": "vc208",
+                  "fill": "$--accent-orange",
+                  "width": 6,
+                  "height": 6
+                },
+                {
+                  "type": "text",
+                  "id": "vc209",
+                  "text": "Facebook Ads Strategy ← saving…",
+                  "fontSize": 12,
+                  "fontWeight": 500,
+                  "fill": "$--accent-orange"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc210",
+              "name": "item3",
+              "width": "fill_container",
+              "padding": [
+                8,
+                12
+              ],
+              "gap": 6,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "ellipse",
+                  "id": "vc211",
+                  "fill": "$--accent-orange",
+                  "width": 6,
+                  "height": 6
+                },
+                {
+                  "type": "text",
+                  "id": "vc212",
+                  "text": "AI Agents Primer",
+                  "fontSize": 12,
+                  "fill": "$--foreground"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "vc220",
+          "name": "After: 2 pending (note committed)",
+          "width": 340,
+          "height": "fill_container",
+          "fill": "$--card",
+          "layout": "vertical",
+          "cornerRadius": 8,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "$--border"
+          },
+          "children": [
+            {
+              "type": "frame",
+              "id": "vc221",
+              "name": "header",
+              "width": "fill_container",
+              "height": 36,
+              "padding": [
+                0,
+                12
+              ],
+              "alignItems": "center",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "text",
+                  "id": "vc222",
+                  "text": "Changes (after save + commit)",
+                  "fontSize": 12,
+                  "fontWeight": 600,
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc223",
+              "name": "item1",
+              "width": "fill_container",
+              "padding": [
+                8,
+                12
+              ],
+              "gap": 6,
+              "alignItems": "center",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              },
+              "children": [
+                {
+                  "type": "ellipse",
+                  "id": "vc224",
+                  "fill": "$--accent-orange",
+                  "width": 6,
+                  "height": 6
+                },
+                {
+                  "type": "text",
+                  "id": "vc225",
+                  "text": "Build Laputa App",
+                  "fontSize": 12,
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc226",
+              "name": "item2",
+              "width": "fill_container",
+              "padding": [
+                8,
+                12
+              ],
+              "gap": 6,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "ellipse",
+                  "id": "vc227",
+                  "fill": "$--accent-orange",
+                  "width": 6,
+                  "height": 6
+                },
+                {
+                  "type": "text",
+                  "id": "vc228",
+                  "text": "AI Agents Primer",
+                  "fontSize": 12,
+                  "fill": "$--foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "vc229",
+              "name": "removedNote",
+              "width": "fill_container",
+              "padding": [
+                12,
+                12
+              ],
+              "children": [
+                {
+                  "type": "text",
+                  "id": "vc230",
+                  "text": "Facebook Ads Strategy removed (committed)",
+                  "fontSize": 11,
+                  "fontStyle": "italic",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            }
+          ]
+        }
+      ]
     }
   ],
   "themes": {