11249 Commits

Author	SHA1	Message	Date
Alonso Torres	43f3bda8b5	✨ Add mcp browser extension (#12627) ... * 🐛 Fail MCP tasks at once when their plugin connection closes A response only counts when it comes from the connection the task went to, so a task sent over a connection that then closes can never finish. It used to wait for its full timeout. The plugin bridge now fails such tasks as soon as their connection closes. Connections also log their close code and reason, to tell a page closing its socket from a browser or network failure. * ✨ Announce the MCP session to a browser extension Let a browser extension learn which tab holds an MCP session, so it can keep the browser from discarding that tab. While the MCP plugin runs, the page listens for the extension's hello message, and says it is ready once it listens, so that a content script that said hello too early says it again. After a hello, the page posts its session ID and connection status, and posts them again on every status change. When the plugin stops, it reports the session as disconnected. The plugin also reports "disconnected" while it reconnects on its own, for instance after a page resume, so the page announces "connecting" then and "disconnected" only once the user has stopped the connection. Otherwise the extension would forget the session at every reconnect. The page only accepts messages posted on its own window by its own origin, posts to its own origin only, and sends nothing before the extension asks. It reaches the window through app.util.globals, whose stand-in for the unit tests accepts postMessage. * ✨ Keep Penpot tabs connected to MCP from being frozen Chrome freezes some background tabs, for instance busy ones while Battery Saver is on, and a frozen page cannot run the MCP plugin. Chrome does not freeze a page that holds a Web Lock, so the page holds a lock named penpot-mcp-session from the moment the user asks to connect until the connection stops: on disconnect, logout, MCP being turned off or the MCP runtime starting again. The lock is shared, so several tabs can hold it at once. Browsers without Web Locks skip it, and when the lock request fails, the next connection request tries again. Firefox does not freeze background pages, so the lock changes nothing there. * ✨ Add a browser extension that keeps MCP tabs from being discarded A browser may discard a background tab to save memory. A discarded Penpot tab reloads when the user returns to it and loses its MCP session. Add mcp/packages/browser-extension, a Manifest V3 extension for Chrome and Firefox, built from one source into dist/chrome and dist/firefox. It is written in TypeScript, bundled with esbuild and imports the protocol types from mcp-common. The package joins the mcp workspace, so the build, test and fmt scripts of mcp/ cover it; the server release build skips it. Its content script runs on design.penpot.app, on the test environments under penpot.dev and on local development instances. It asks the page for its MCP session on load, again when the page says it is ready and when the page returns from the back/forward cache, and forwards each valid session announcement to the background. It accepts only messages the page posted on its own window from its own origin, and posts its hello to that origin only. It also tells the background when the page is hidden. The background records which tab holds each MCP session. A tab holds the session it last announced as connected, until its page announces a disconnect, is hidden, or the tab is closed or replaced. The map lives in chrome.storage.session, so it survives restarts of the background and clears when the browser closes. While a tab holds a session, the browser may not discard it automatically. The extension asks only for the storage permission. Chrome runs the background as a service worker; Firefox runs it as an event page and needs the add-on ID, mcp-extension@penpot.app, and Firefox 140. The toolbar popup lists the connected tabs. The icon is the Penpot logo, white on a black rounded square, with the SVG source next to the PNGs. A README explains how the extension works and how to build and load it. * 🐛 Ask MCP plugins for heartbeats so hidden tabs do not look frozen The server refuses to send a task to a plugin whose last heartbeat is older than 30 s, taking its tab for frozen. The plugin sent heartbeats only from a 10 s timer, and Chrome runs the timers of a hidden page as rarely as once a minute: without Energy Saver after about a minute hidden, and at once with it. A Penpot tab hidden for a minute therefore failed that check about half the time, although it could run tasks. Chrome handles socket messages of a hidden page at once, and a frozen page cannot handle them at all. The server now sends each plugin a heartbeat request every 10 s, and the plugin answers it with a heartbeat, so the heartbeat age again tells a frozen tab from a hidden one. The plugin keeps its timer, so it still sends heartbeats to a server that does not ask. A plugin that does not know the request passes it to the plugin code, which ignores it.	2026-11-03 10:07:50 +01:00
Andrey Antukh	93d36d04d8	✨ Stabilize fragmented file data across snapshots and GC (#12420) ... * ✨ Stabilize fragmented file data across snapshots and GC Snapshots, automatic and user, now store pointer-based rows that share fragments with the live file instead of duplicating page content. `get-file-snapshot` resolves those pointers on the server so version previews keep rendering plain data, and `restore!` reuses the shared rows. Export still materializes (the package carries no fragments) and import regenerates them. `file-gc` treats the main file and every unpurged snapshot as liveness roots, reads the file unrealized, and reattaches the original pointer wherever the cleaned value is unchanged, so a pass over an untouched file writes no fragments and a pass over an edited file keeps the ids of the pages it did not touch. Snapshot creation and the restore backup take the file row `FOR SHARE`, which serializes them with the pass and closes the race that let a new snapshot reference fragments the pass was about to mark. All backend pointer bindings go through the `fdata/with-pointers`, `with-tracked`, `with-tracked-pointers` and `with-untracked` macros. The loader reads fragments a previous pass marked until `objects-gc` purges them, and the frontend fails loudly with retry instead of dropping an unresolved fragment. Review fixes in this branch: the automatic snapshot attaches before pending migrations, `realize-pointers` is the single verb, `reattach-unchanged` takes the identity fast path, the restore guard takes its revn from the backup read, and `PointerMap.withMeta` generates a fresh id when metadata changes. Tests cover both snapshot writers (red without the lock), snapshot sharing and pin release through the real delete and purge paths, reattach against orphan marking, preview after offload, the pointer binding contracts and the with-meta id change. Closes #12410 AI-assisted-by: muse-spark-1.3-contributor AI-assisted-by: deepseek-v4.1-flash ♻️ Pin no-churn behavior for untouched pages Pin the behavior the churn verification measured: a save keeps the fragment id of every page it does not touch, with a page of eleven keys (PersistentHashMap), a 46-shape objects map and a nine-page index (hash map). Also pin the mixed case: a data-level objects-map flip rewrites the old pointer pages once and the next save keeps the new ids. The memory records the identity rule behind it: re-assoc with the same value returns the same map in array and hash maps alike. Closes #12410 AI-assisted-by: deepseek-v4.1-flash ⚡ Stop loading untouched pages when enabling objects-map `enable-objects-map` wrapped every page on every save, and reading a page's objects forced its PointerMap to load the fragment. A save of one page in a seven-page file therefore made seven fragment reads. Skip unloaded pointers: their fragment was already wrapped by the encode-file that wrote it, so loading it only to wrap it again is a no-op. The save now loads only the pages it edits. A page with a plain fragment (a data-level feature flip) keeps its plain fragment until it is first loaded or edited; a migration that enables the feature must rewrite the data itself. Cover the change with load-count tests for save and restore, update the flip test to the new contract, and drop the stale restore comment. Closes #12410 AI-assisted-by: deepseek-v4.1-flash ⚡ Keep page fragment ids through pending migrations Applying a pending migration on read realized the file, ran the migration and persisted it again; the persist wrapped every plain page in a new PointerMap, so every page got a new fragment id even when the migration did not change it. That leaves the fragment cache cold and rewrites every fragment on the first read after a deploy. Capture the original pointers before realizing, reattach the unchanged positions after migrating (same value comparison file-gc already uses), persist the reattached file and return the realized one: the read contract is plain data. Read-only connections skip the persist and the reattach. A migration that adds objects-map skips the reattach so the pages get wrapped. Move the three helpers to fdata so file-gc and the migration path share them, and cover the path with a real 0031 migration test: the unchanged page keeps its id, the changed page gets a new one, the caller gets realized data and a second read does not migrate again. Closes #12410 AI-assisted-by: deepseek-v4.1-flash * 🐛 Realize library pointers with each library's own loader Fragment rows are keyed by file id, and every caller binds the fragment loader of the file it works on. get-resolved-file-libraries returned libraries with their pages still as pointers, so the first read of a library page under fdata/pointer-map asked the consuming file for the fragment and failed with :fragment-not-found. That broke migrations and file validation for every file using a pointer-mapped library. The weak-map loader now realizes each library's pointers with the library's own id. The test fails without the change. AI-assisted-by: claude-opus-5-5 Signed-off-by: Álvaro Tejero Cantero <alvorithm@teje.ro> * 🐛 Restore the pointer-map require the repair path still needs The branch dropped `app.util.pointer-map` from the namespace while the auto-repair path (added to develop before this branch) still rebinds `pmap/*tracked*` around validation and repair in `repair-preexisting-damage` and `process-changes-and-validate`. The namespace did not compile, so the whole backend failed to load. Those toggles do not fit the fdata macros: `with-untracked` binds nil and `with-tracked` creates a fresh atom, while the repair path has to turn tracking off and restore the existing atom (and read it before the repair starts). Restore the require and keep the bindings explicit. Also pin the feature-off path with a test: with `fdata/pointer-map` off (the default), a save creates no fragments, file-gc writes nothing and the snapshot preview still returns plain data. Drop a stray `\n` char literal left at the end of one deftest. Update the memories with the exception to the macro rule, the snapshot FOR SHARE locking and the pre-migration automatic snapshot. Closes #12410 AI-assisted-by: deepseek-v4.1-flash * 🐛 Validate debug files with their own pointer loader The `/dbg/actions` file validation passed the file id where `get-resolved-file-libraries` expects the file map, so the library map was seeded with a nil key. It also validated a file read without realizing it, so the first page lookup of a pointer-mapped file raised "load is not supported when *load-fn* is not bind" and the endpoint could not validate exactly the files the feature touches. Read the file realized (validation walks every page and component anyway) and build the library map from the file. The library loader already resolves each library's pointers with its own id, so the realized file and its libraries validate as plain data. Covered by a handler-level test that fails before the change. AI-assisted-by: deepseek-v4.1-flash * ♻️ Bind the snapshot loader through the fdata helper `reduce-snapshots` hand-rolled the same `binding` that `fdata/with-pointers` builds (it also loaded the function's own pointer loader before entering the reduction). Use the macro so the rule holds there too and the namespace no longer needs `app.util.pointer-map`; the loader is identical (same cfg and file-id) and snapshot walking behaves the same. AI-assisted-by: deepseek-v4.1-flash * 📚 Note the pointer-binding exceptions and snapshot ordering Record what the feature review settled: - Two direct `binding`s stay on purpose: the fine-grained `*tracked*` toggles of `app.rpc.commands.files-update` (validation/repair turn tracking off and restore the existing atom) and `binfile.common/encode-file` (fresh tracked set inheriting the current one). Atom-scoped macros would only be worth it if the set grows. - The automatic snapshot is taken before the pending migration, and the pre-migration window is narrow: the `get-file` RPC migrates on read and its ETag hashes the available migrations, so a post-deploy read cannot be a 304 from the pre-deploy state. The old-format snapshot only appears when the save is the first request to touch the file after the deploy, and `get-file-snapshot` previews it as stored. AI-assisted-by: deepseek-v4.1-flash * 🐛 Apply pending migrations when previewing a version Automatic snapshots are attached before the save applies pending file migrations, so a version can store the old format. The preview RPC handed that data to the UI as stored, and the viewport renders it with the current code. Realize the snapshot with the live file id (fragments are keyed by file, not by snapshot), normalize its migrations to a set (the decoder keeps the pgarray as a vector, and `set/difference` would compare indexes) and apply the pending migrations with the pure `fmg/migrate-file` and the live libraries. Nothing is persisted: the stored version keeps its data and restoring it re-migrates on the next read. The response now carries the snapshot's migrations. Use `:features` the way `get-file` does for `fdata/objects-map`: a client that does not declare it gets plain objects. The historical feature set is not checked against the enabled one on purpose: a version may predate a feature change. Cover the preview of a snapshot with a pending migration and the objects realization; both pin that the stored row is untouched. Update the file-data memory with the preview contract and the vector/set trap. AI-assisted-by: deepseek-v4.1-flash * 🐛 Decode snapshot migrations as an ordered set `file-snapshots/decode-snapshot` handed the `file_change.migrations` pgarray as a vector. `set/difference` falls back to index lookups when the first collection is shorter than the second, so the pending set was right only by accident: a stored subset happens to work, while a stored set larger than `available-migrations` (a snapshot taken by a newer build) marks every available migration as pending and re-applies it to already migrated data. Decode it as a `d/ordered-set`, the type the rest of the code and `schema:file` expect. This also covers `restore!` and the snapshot list, and it lets `get-file-snapshot` drop the `(into #{} ...)` normalization it was carrying. Re-wrap the union in `fmg/migrate` so the invariant holds even when a caller hands a plain set. A snapshot with NULL `migrations` predates SQL migration 0140 and keeps the format version of its time. Pin that legacy path: the preview regenerates the applied set from that version, migrates in memory and leaves the stored row untouched. Update the file-data memory with the invariant and the legacy path. AI-assisted-by: deepseek-v4.1-flash * 🐛 Fix flaky waiting-gauge assertion in climit test The throwable-while-waiting test asserted the exact list of waiting-gauge publications, but the component sampler republishes the same count when its first tick lands inside the recorded window under load. Assert only the last value, which is the contract the helper documents. AI-assisted-by: muse-spark-1.3 --------- Signed-off-by: Álvaro Tejero Cantero <alvorithm@teje.ro> Co-authored-by: Álvaro Tejero Cantero <alvorithm@teje.ro>	2026-11-02 15:02:55 +01:00
Belén Albeza	79aebcca49	🐛 Free the worker's copy of a page when leaving it (#12751) ... * 🐛 Stop worker index updates from adding nil-keyed entries When a commit touched a page the worker had not indexed, or deleted the indexed page, `:index/update` ran the selection and snap updates with a nil page. That left entries under a nil key (and a stale selection index for a deleted page) for the rest of the session. Skip updates for pages the worker does not hold, since a later `:index/initialize` sends the whole page again, and drop the selection and snap indexes when the changes delete the page. AI-assisted-by: claude-opus-5-5 * 🐛 Free the worker's copy of a page when leaving it The worker kept every visited page, with its selection and snap indexes, for the whole session. On large files each visited page added hundreds of MB to the worker heap. Add an `:index/finalize` worker command that drops a page and its indexes, and send it from `finalize-page`, which runs on every page switch and when leaving the workspace. Coming back to a page indexes it again from the full page, as before. Closes #12738 AI-assisted-by: claude-opus-5-5	2026-11-02 12:12:57 +01:00
Andrey Antukh	29373fff9f	✨ Rework the progress of the import and export dialogs (#12192) ... * ✨ Rework the import dialog The import wizard paints a Check/Upload/Import stepper derived from the dialog status, plus a phase title, a description and a progress bar per phase, and its rows follow the new design: folder icon, file name and a size subtitle. While checking, the dialog shows no rows and no spinner, because the phase header already carries the message. The wizard writes the job milestone once, in the header (`jp/current-milestone-text`), since every file of a container reports the same one. A row keeps its name and its size, says "Ready" once its container finished uploading, and shows the error text when it fails; the button that drops a file only appears while the wizard still offers its import step. The `jobs.queued` label now reads "Waiting job slot". The bar measures the whole import: determinate while the containers are uploaded, weighted by their size (`imp/upload-pct`), and animated otherwise, because the stages of a job are not comparable. The phase title counts the files, and `imp/imported-count` counts them done with the job's own counter, so the number moves while a container rebuilds its files one by one. The analysis reads the entries of a version 3 package in one pass: a file shows what it occupies inside its container, its own entries plus the storage objects its media and thumbnails reference, while what the container weighs stays in `:container-size`, the size the upload bar is weighed on. The ready step waits for the end of the analysis (`imp/ready-to-import?`), not for every known file, so Continue never leaves out the files that arrive later. Tests cover the file sizes, the upload percentage, the done counter, the wizard step and the milestone in course. The change also adds `-XX:NativeMemoryTracking=summary` to the backend devenv so `jcmd` shows native memory, and documents the wizard, the promise call styles (`mem:clojure/promesa`) and two CSS pitfalls: a logical `inline-size` wins over an inline physical `width`, and Rumext leaves a plain `:style` map raw, so inline styles leave CLJS as `#js` objects. AI-assisted-by: glm-5.3-flash AI-assisted-by: deepseek-v4.1-flash * ✨ Rework the export dialog Every exported file is its own job, so each row reports its own state: folder icon, name and a size-plus-`.penpot` subtitle; waiting for a worker; running with the milestone of the job and an animated bar; or exported with a tick. A failed row paints red, takes the close icon and shows the hint of the job, or a generic label, through `files-export-modal.export-error`. Success, failure and cancellation replace each other, so a row never reports two outcomes at once. The ids of the messages are canonicalized to string before they match a row, because they cross serialization boundaries. The export result now carries `:size`, so the subtitle says the format until the job produces the artifact and the size once it exists; a transport failure builds a synthetic error, so a nil `ex-data` no longer leaves the row hanging. The header counts the files and says whether the export runs or ended; since every file has its own job, it paints no global bar. Closing changes too: the Close button is gone. While files are in flight the footer offers Cancel export and the X cancels as well, which marks the loading rows cancelled and leaves them in place, so their outcome can be read; once every row reached a terminal state the footer offers Done, which dismisses the dialog. The retry button of the finished design is left out, because the client has no retry mechanism yet. Styles come along: the rows scroll while the header and the footer stay put, and the new phase header, row and bar follow the tokens of the import wizard. The title key becomes `files-export-modal.title`, and the new keys cover the header, the row states and the buttons. AI-assisted-by: muse-spark-1.3 * ♻️ Inline the binfile job adapters into their task handlers The wrappers in app.binfile.jobs only forwarded to the core, so each task handler now composes its own run: frozen cfg, active check, progress bridge and format dispatch. export-cfg freezes the whole export (file-ids, export-type, output) and v3/export-files! takes it as its single argument; ::bfc/ids becomes ::bfc/file-ids. The bridge keeps one job: bfj/run forwards the cfg to its callback, and check-active answers with it to thread the run. AI-assisted-by: muse-spark-1.3 * 🐛 Migrate binfile tests to the single-arg export-files! The refactor made v3/export-files! take a single cfg carrying ::bfc/file-ids and ::bfc/output, but six calls in binfile_test (added by the tokens handling change) still used the old two-arg form with ::bfc/ids. Move them to the new form, as the rest of the file already does. AI-assisted-by: muse-spark-1.3 * 🐛 Fix export artifact expectations to include file size The export flow now reports the artifact size, but the stale expectations dropped it and failed the frontend suite. Include the size in both assertions so they match the emitted message. AI-assisted-by: muse-spark-1.3-contributor * 🐛 Migrate remaining export-files! test callers to the single-arg form rpc_binfile_test and offload_file_data_test still passed the output apart and used ::bfc/ids; move both into the cfg as ::bfc/file-ids/::bfc/output. * 🐛 Hide the downloads hint when no file was exported After Cancel or when every job failed, the export header said "0 files exported · Check your downloads folder."; drop the hint then. * ♻️ Read the object of a container entry once The index of a container asked twice for the object of the same zip entry: once to test it and once as the key of the update. Resolve it once, in the branch that owns it, so the entries of a file never pay for a question that does not apply to them. Addresses a review note on #12192. AI-assisted-by: deepseek-v4.1-flash * ♻️ Never size an import row with its container's weight A row of a version 3 package took the size of the container whenever the container held no entry for its file, while the comment beside it promised the opposite. An unknown size now stays nil, which the row already understands: it paints no subtitle instead of a number that belongs to the whole package. The test carries a file the manifest lists and the container does not hold, and the memory records what the row does then. Addresses a review note on #12192. AI-assisted-by: deepseek-v4.1-flash * 🐛 Retry pool stats read until snapshot is consistent Hikari exposes each pool counter through a separate MXBean call, so a borrow or return between the reads can leave one snapshot off by one. The test read once and failed in CI with total 2 vs active + idle 3. Read up to 20 times with a 10ms pause until total equals active + idle, then assert on the stable snapshot. The invariant stays strict; only the transient race is tolerated. AI-assisted-by: muse-spark-1.3-contributor --------- Co-authored-by: Elena Torro <elenatorro@gmail.com>	2026-11-02 12:12:39 +01:00
Alejandro Alonso	94836cb8c8	Merge remote-tracking branch 'origin/staging' into develop	2026-10-30 13:22:09 +01:00
Eva Marco	0fa1077b9a	🐛 Render no type attribute on DS buttons used as links (#12709) ... * 🐛 Render no type attribute on DS buttons used as links With `to`, button* renders an <a href> but still passed type="button". On an anchor, type is a MIME type hint, so "button" is invalid HTML. The type now applies only when the element is a <button> (still "button" by default). New "As Link" story with two tests: the link has its href and no type, and a plain button keeps type="button". AI-assisted-by: claude-opus-5-5 * 📚 Document the DS button as a link The Semantics section only said that button* accepts `to`. It now says when to use it (the control goes to another URL), what it renders (an <a href> with the button style and no type), how to keep the in-app navigation on a plain click, and shows the "As Link" story. AI-assisted-by: claude-opus-5-5	2026-10-29 18:10:16 +01:00
Eva Marco	12dd4d19d0	♻️ Use a DS icon button for Share in the workspace header (#12681) ... * ♻️ Use a DS icon button for Share in the workspace header The Share link of the right header becomes an icon-button* with the DS share icon, like its neighbours (comments, history, viewer). It gets keyboard focus, a name and the DS tooltip and hover. It also makes Share visible again on develop: since the share icon moved to currentColor, the legacy icon drew with the transparent color of its svg. The button is 32px wide instead of 28px, so the zoom, comments and history controls move 4px to the left. AI-assisted-by: claude-opus-5-5 * 🔥 Remove the share link styles from the workspace header Delete .share-btn and its svg rule, which no markup uses since Share is a DS icon button. refactor/ stays only for the menu placeholders. No visual change (0 px). AI-assisted-by: claude-opus-5-5	2026-10-29 18:10:02 +01:00
Eva Marco	66f1f689f8	♻️ Use the DS select for the gradient type in the colorpicker (#12653) ... * ♻️ Use the DS select for the gradient type in the colorpicker The Linear / Radial select of the gradient options used the legacy select. It now uses select* with string ids, converted back to the gradient type keyword in the handler. Visible changes: the DS select look (label 1px higher, DS list with taller rows and the DS check mark, opening 2px lower). The list still opens inside the colorpicker, so it needs no portal. The "Create a RADIAL gradient" e2e test picks the type by role instead of a DOM position that only matched the legacy markup. New ds visual test "Gradient type select": closed, hover, open and changed. AI-assisted-by: claude-opus-5-5 * ♻️ Move colorpicker gradient styles off the deprecated styles gradients.scss now uses DS spacing, sizes, borders, typography and logical properties, and resolves the --menu-shadow-color alias. The deprecated import stays only for %input-element: the stop offset input moves to the DS with the numeric inputs group. The offset input uses body-small (line-height 1.3 instead of 1.4); the input keeps its height, so nothing moves. 0px difference against the previous commit, including a new shot of the whole gradient panel. gradients.cljs uses an icon-text class that has no rule in this file. AI-assisted-by: claude-opus-5-5	2026-10-29 18:09:35 +01:00
Alonso Torres	cb8f563bb2	🐛 Keep swapped and moved children in place when a component syncs (#12716) ... * 🐛 Keep swapped and moved children in place when a component syncs A sync resets an untouched shape of a copy to the main's geometry and the layout then moves it back. Children the sync keeps, because they are swapped or the user moved them, did not take the first move but did take the second, so each sync pushed them away from their parent by the gap between the copy and the main (e.g. a swapped icon in a copy that fills a wider layout). The sync now moves those children by the offset it applies to their parent. Flex-child attributes still sync as before, so swapped children keep their absolute position. Closes #12657 * 🐛 Place swapped children where the swap puts them on sync and switch A swapped child that the user never moved now goes to the top-left of the shape it replaced, as a swap does: on a sync, the place of the main's slot occupant; on a variant switch, the place of the new variant's occupant. A swapped child the user moved keeps its offset inside its parent. This stops the variant switch from leaving the swapped child at its old position while the new variant is created at the main's size, and puts back children that drifted before the sync fix the next time their copy syncs. * 🐛 Make kept children follow their parent's constraints on component sync When a sync resets the size of a copy's shape, for example a copy root that fills a wider layout, the layout then grows it back and moves its children by their constraints. Children the sync keeps (moved by the user, or swapped) only followed the parent's top-left, so with a right, center or scale constraint they drifted on every sync, and a swapped child with a scale constraint grew on every sync. The sync now passes the parent's geometry before and after down the tree, and kept children follow that change through their constraints. Untouched swapped children also undo the change through their constraints before they go to the swap place, so they keep their size. The default constraint modifier returns empty modifiers instead of an empty vector, which add-modifiers could not take. * 🐛 Make swapped children follow their parent's constraints on switch A variant switch only moved a swapped child by the parent's position change. When the new variant's root had a different size, a user-moved child with a right constraint drifted, and a scale-constrained one kept its grown size. The switch now applies the parent change from the old parent to the new one through the child's constraints. An untouched swapped child then takes the place of the shape it replaces, as a swap does. * 🐛 Sync nested swapped copies before the copies that hold them A swapped child is a copy of its own component, so one sync handles it twice: once on its own, and once when the copy that holds it places it. Each step read the shape from the data as it was before the sync, so the step that ran last won, and the order came from the order of shape ids. When the swapped child came last, it wrote its old size and position back over the placement, leaving its x and selrect apart, and a swapped child with a scale constraint grew on every sync. The sync now visits the most deeply nested shapes first, and each step reads the shapes as the earlier steps left them, so the placement always comes last and builds on the child's own sync. * 🐛 Keep moved children with a scale constraint at their size on switch A variant switch carries the size of a child the user moved as an override. In a copy that fills a wider layout, a child with a scale constraint already has the size the layout gave it, so the switch carried that size onto the new variant, created at the main's size, and the layout then scaled it again: the child grew on every switch. Before comparing, the switch now resizes the previous child the way its constraints follow the change from its old parent to its new one. A child that only grew with the layout then matches the main and is not carried as an override. * 🐛 Keep the content of swapped children at its size on sync and switch When a sync or a variant switch undid the parent change on a swapped child through its constraints, it applied the child's resize to every shape inside it. The layout then grows the child back through its own constraint, but its content follows its own constraints (left and top by default), so it stayed shrunk: the shape inside a swapped icon with a scale constraint lost most of its width on every switch. The change of the swapped child now goes down its subtree the way a layout update does, each shape through its own constraints. * 🐛 Accept mixed and empty values in the layout size constraints menu With several shapes or a group selected, the sidebar merges the layout item attributes and tokens of the shapes: nil when a shape lacks one, :multiple when they differ. The props schema of layout-size-constraints* only accepted the values of a single shape, so selecting such shapes with fill sizing raised "invalid props". The schema now accepts nil and :multiple, as the numeric inputs those values go to do. * ♻️ Share the swapped child follow-parent step between sync and switch The component sync and the variant switch both make a swapped child and its children follow the parent change through their constraints and then move them to the swap place. Both now use generate-follow-parent, so the two paths stay the same. The helper that writes geometry without marking it touched is renamed to update-geometry-untouched. Adds a test for a swapped child without absolute position in a slot without layout, and fixes the test comments on why constraints are set again after a swap.	2026-10-29 17:30:16 +01:00
Andrey Antukh	65a76a21cd	Merge remote-tracking branch 'origin/staging' into develop	2026-10-29 16:31:26 +01:00
Eva Marco	2607ec89fa	♻️ Move the profile page to the DS and make the Update overlay a button (#12651) ... * ♻️ Make the profile photo Update overlay a button The "Update" overlay on the profile photo was a span with an on-click, so the keyboard could not reach it. It is now a button: it shows on keyboard focus as well as on hover. The button centers its line in the circle, so a 4px bottom padding keeps the label where the span drew it (0px difference). New ds visual test "Profile page controls": the page at rest, the overlay on hover and on focus, Save enabled, and the Change email link on hover. AI-assisted-by: claude-opus-5-5 * ♻️ Move profile page styles off the deprecated styles profile.scss imported the whole deprecated module and kept a long copy of shared settings rules. It now uses the DS tokens, sizes, borders, z-index and typography. The deprecated import stays only for %button-primary: the save button is the shared forms submit button. Deleted selectors that match nothing in profile.cljs: .btn-secondary (both), .field, .field-title, .field-text, .custom-input, .custom-select, .two-columns, .subtitle, .notification-icon, .notification-text, .notification-text-email, .newsletter-subs, the h1, h3, p and hr rules, the form rule (both forms set their own flex) and the link hover underline (the global link rule already does it). Typographies: the page title uses title-large (line-height 1.4 instead of 1.15), the Change email link title-small (line-height 1.2 instead of the default), and the Update overlay title-large with its own line-height. Visible change: the taller title line moves the title 3px down and the rest of the page 6px down. Nothing else changes. AI-assisted-by: claude-opus-5-5 * ♻️ Give the profile page links, title and photo classes The links and the profile photo get their own classes instead of bare a and img selectors, and the page title uses the DS heading with title-large (it already used that typography). The link wrapper drops a class with no styles, and the rule for the file input goes: the shared uploader hides that input inline, so the rule did nothing. No visual change. AI-assisted-by: claude-opus-5-5 * 💄 Use one DS typography and the accent color for the profile links "Change email" took title-small from its container, overridden by the global link styles (14px, weight 500), and "Want to remove your account?" had no typography and inherited 16px. Both links now use body-medium and --color-accent-primary, as design asked in the review. The "Change email" line is taller with the 1.4 line height, so Save settings and the link below it sit 3px lower. AI-assisted-by: claude-opus-5-5	2026-10-29 12:09:56 +01:00
Pablo Alba	9dc222c642	🐛 Fix bad characters allowed on variants properties (#12688)	2026-10-29 10:13:33 +01:00
Eva Marco	705ea42622	🐛 Keep the default cursor in the token dropdown of numeric inputs (#12680) ... A numeric input that can be scrubbed sets the ew-resize cursor on its wrapper, and the token dropdown renders inside that wrapper, so the whole list inherited the scrub cursor. Give the options dropdown the default cursor, so it never takes the cursor of the control that opens it. AI-assisted-by: claude-opus-5-5	2026-10-29 09:04:05 +01:00
Eva Marco	1962860f04	🐛 Reduce thumbnail re-renders and report throttled update loops (#12610) ... * 🐛 Stop thumbnail subscribers re-rendering on every store change A thumbnail loaded from the server keeps a media id as :uri, and workspace-thumbnail-by-id resolves it into a new map on each read. The ref compared values with identical?, so every root frame, every component in the assets panel and the interactions layer re-rendered on every store change, mouse moves included. Compare by value instead. This does not loop by itself, but it adds work to every commit and brings other update loops closer to React's limit. Relates to #12580 AI-assisted-by: claude-opus-5-5 * ✨ Report update loops throttled by the update scheduler When the scheduler throttles an update loop, it only logs a console warning, so a loop that no longer crashes leaves no trace. Send an error report too, with the events in flight and the last events, at most once per report window. Relates to #12580 AI-assisted-by: claude-opus-5-5 * 🐛 Report throttled update loops as unhandled exceptions The throttled update loop report used the handled-exception event, which only lands in the audit log: error reports and alerts read unhandled-exception and exception-page. A throttled loop is an application defect (its cause has :type :internal), and the point of the report is to find those loops, so it is now an unhandled exception. AI-assisted-by: claude-opus-5-5	2026-10-29 09:02:55 +01:00
Eva Marco	a3fe43c1ec	🐛 Report raw fetch failures as connectivity errors (#12624) ... * 🐛 Report raw fetch failures as connectivity errors A fetch that fails outside app.util.http (zip.js, plugins, schema loads) rejects with a bare TypeError such as "Failed to fetch". It reached the global handlers and was reported as an unhandled crash, with no stack and no URL. The global handlers now wrap the browser's network TypeErrors as :network (or :offline when the browser says so), so they get the connection toast and a compact handled report. Response body reads in app.util.http also wrap a TypeError as :network with the request uri, as fetch itself already did. Relates to #12581 AI-assisted-by: claude-opus-5-5 * 🐛 Treat only network TypeErrors on body read as connectivity errors process-response-type turned every TypeError from a body read into a :network error, so a bug such as "body stream already read" showed a connection toast. It now uses network-failure?, which moves to app.util.http so that both the http client and the global error handlers share it. Add Firefox's "Error in body stream" message. Tests now check :offline and :network separately by setting navigator.onLine, and read-error builds on async/->promise. AI-assisted-by: claude-opus-5-5	2026-10-29 09:02:45 +01:00
Dr. Dominik Jain	e20a0d748e	✨ Add OAuth support for MCP server (#12480) ... * 🎉 Add OAuth support for remote MCP connections Add MCP-specific discovery, client registration, and approval endpoints. Exchange single-use authorization codes with PKCE for the fixed MCP user token, enabling MCP and creating the token on approval when needed. Use self-contained client IDs without new database tables or stored client records. Keep temporary authorization state in Redis/Valkey. Accept bearer credentials while preserving query-parameter connections. Enable OAuth through PENPOT_MCP_AUTH_URI in multi-user mode. Document the environment variable in the README and implementation details in Serena. Explain protocol and concurrency decisions in the Clojure code. Cover token provisioning, OAuth state, client registration, HTTP flows, and the approval page with tests. AI-assisted-by: gpt-6 * 🐛 Wait for devenv initialization before starting builds Docker reports a container as Running as soon as its main process starts, while the entrypoint may still be preparing the development environment. manage.sh used that status to launch tmux jobs, allowing frontend builds to race with ownership changes to /opt/rustup and Cargo setup. On a fresh container, rustup could fail with Permission denied before the frontend watcher started. Nginx would later serve the existing JavaScript, leaving source changes absent from the running app despite restarting devenv. Wait for nginx's local health endpoint before launching the jobs. Nginx starts after entrypoint setup, so its response confirms that setup has finished. Allow up to 120 seconds and report a timeout without starting the jobs if initialization does not complete. Validation: shell syntax and whitespace checks pass. AI-assisted-by: gpt-6 * ♻️ Share the login modal with MCP authorization Extract the viewer login modal and its styles into a shared auth component, retaining the viewer wrapper and its close behavior. Use the modal on the MCP approval page and preserve the pending request through login. Closing it clears the saved return URL and shows a cancellation message without further actions. Cover return URL handling and cancellation with frontend tests. AI-assisted-by: gpt-6 * ✨ Show client icons in MCP authorization Preserve HTTPS logo URLs from client registration and published metadata and show the icon beside the application name on the approval page. Ignore unusable URLs and hide failed images without blocking approval. Update the access description to refer to MCP connections established from Penpot. Cover logo metadata and approval responses in backend tests. AI-assisted-by: gpt-6 * 🐛 Follow the system theme when no preference is configured Default to the system theme in the shared resolver used by the app and plugins. Preserve explicit light and dark choices, including the legacy default value that means dark. Reuse the reactive theme hook in progress widgets and show the system preference in settings for accounts without a configured theme. Verify preference resolution with regression tests and browser checks. All 1,474 frontend tests pass. AI-assisted-by: gpt-6 * 🐛 Replace expired MCP tokens during OAuth approval Settings can give an MCP token an expiry date. OAuth approval reused the newest MCP token without checking it, so an expired token reached the client and never matched a plugin connection. Approval now treats an expired token as missing and creates a new one. Token exchange rejects a code whose token expired after approval with invalid_grant. AI-assisted-by: claude-opus-5-5 * 🐛 Log unexpected errors on MCP OAuth endpoints The OAuth routes sit outside the shared HTTP middleware, so the shared error handler never saw them, and their own handler turned unexpected failures into a 503 without logging anything. Failures in the session middleware of the approval endpoints had no handler at all. Unexpected failures now also go through the shared error handler for its logging, while clients still get an OAuth error body. The OAuth error handler also wraps the session middleware of the approval endpoints. AI-assisted-by: claude-opus-5-5 * 🔧 Add devenv script to run the MCP server with OAuth start-mcp-devenv-oauth starts the MCP server in multi-user mode with PENPOT_MCP_AUTH_URI derived from PENPOT_PUBLIC_URI, to test OAuth in the devenv. Agentic tooling still uses the single-user start-mcp-devenv. AI-assisted-by: claude-opus-5-5 * 🐛 Fix failing test case --------- Co-authored-by: alonso.torres <alonso.torres@kaleidos.net>	2026-10-28 18:40:04 +01:00
Eva Marco	8951c57ee6	♻️ Use DS buttons and icons in the dashboard fonts page (#12533) ... * ♻️ Use DS buttons and icons in the dashboard fonts page The fonts page moves off the deprecated icons and raw buttons: - "Add custom font", "Upload all", "Upload" and "Save" become DS primary buttons and "Dismiss all" a secondary one. - The remove, cancel and menu controls of the font rows become ghost DS icon buttons named "Remove", "Cancel" and "Options"; the menu one says whether its menu is open. Two of them were spans. - The delete control of a font style was a span; it is now a button named "Delete font style" with the DS close icon, still shown only on hover. - The warning and empty list icons use the DS icons. The loading placeholder keeps the legacy loader: there is no DS one. The font menu offset grows by the 6px the taller menu button added, so the menu opens where it did. New key: dashboard.fonts.delete-variant (en, es). A visual test covers a font ready to upload, the style hover, the font menu and the edition row. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard fonts styles to logical properties Physical sizes, offsets, margins and paddings become logical properties and the DS typography module is used without a namespace. The element selectors (section title, inputs, hero text) stay, with a comment: they have no class. The shared dashboard header styles (common-dashboard) still come from refactor/: ten dashboard modules use them, so they move in their own change. No visual change. AI-assisted-by: claude-opus-5-5 * ♻️ Use the DS loader and heading in the dashboard fonts page The fonts loading placeholder used the legacy loader icon, drawn as an outline in a 32px box. It now uses the DS loader*, the same animated pencil as the other dashboard loading screens. Its box is 9px tall, so the label moves 6px up. The section title h3 is now a heading* with the title-small typography and its own class, so the SCSS no longer styles the bare element. The legacy loader icon has no other use, so its SVG and def are gone. AI-assisted-by: claude-opus-5-5 * ♻️ Give the dashboard fonts inputs and hero text classes The font name and search inputs and the hero text get their own classes instead of bare input and p selectors, and the hero title uses the DS heading with title-large instead of the global h2 rule. The title keeps its 24px size and weight; the DS line height (1.4 instead of 1.15) moves the hero content about 6px down. AI-assisted-by: claude-opus-5-5 * 🐛 Give the fonts placeholder icon its color back Removing the legacy loader also removed the .icon svg rule, which gave the empty placeholder text icon its color, so the icon had none. The icon now has its own class with the secondary foreground color, and the wrapper div without styles goes. AI-assisted-by: claude-opus-5-5	2026-10-28 16:11:52 +01:00
Eva Marco	66c67660f9	♻️ Use DS typographies in the debug shape panel and drop a dead selector (#12650) ... * 🔥 Remove a commented-out selector from the debug shape panel .shape-info-title was left commented out with a "check by hand" TODO in #12484. Nothing uses it, so delete it instead of keeping it as a comment. AI-assisted-by: claude-opus-5-5 * ♻️ Use DS typographies in the debug shape panel The panel text and the shape title only set a font size, with a "no exact DS typography match" TODO. body-small and body-medium differ from them only in the line-height, so use them directly and drop the TODOs. Visible change: the panel lines get the DS line-height (1.3 for the text, 1.4 for the shape title) instead of the browser default, so rows grow a little taller. The panel is debug-only. AI-assisted-by: claude-opus-5-5	2026-10-28 14:27:51 +01:00
Eva Marco	e308c2eca6	♻️ Use the DS stroke width in the migrated DS icons (#12673) ... * ♻️ Use the DS stroke width in the migrated DS icons The DS icons in the areas already moved to the DS set their own stroke width (1px, 1.33px or 2.25px) to match the legacy icons. They now keep the DS stroke width, so some icon lines get slightly thinner or thicker: copy button, context menu, layer row, comments filter, assets section, share link, dashboard sidebar, team pages, templates, team switcher and subscription icons. AI-assisted-by: claude-opus-5-5 * ♻️ Give the share link page rows a class The page rows of the share link permissions get their own class instead of a bare li selector. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-28 14:27:38 +01:00
Eva Marco	da36e36836	✨ Add the share, handlers and snap icons to the DS (#12659) ... * ✨ Add the share, handlers and snap icons to the DS The share button and the path editing bar could not move to the DS buttons because their icons were missing from the DS icon set. As agreed with design: - handlers-equal, handlers-independent, handlers-mirror and snap join the DS as they are (their SVGs already follow the DS format). - share keeps its drawing, moved onto the 16x16 grid as a single path with no fixed color. - snap-nodes is deleted: nothing used it, and snap is the icon of the snap nodes button. The legacy share button in the workspace header uses the same SVG: its icon is about 6% smaller and now takes the hover color, which the fixed stroke color blocked before. AI-assisted-by: claude-opus-5-5 * 🐛 Show the share icon lines outside the app The share SVG had no fill or stroke, so plain SVG viewers used the defaults (black fill, no stroke) and drew only three dots. Set fill="none" and stroke="currentColor", like settings.svg. The app already sets both in CSS, so nothing changes there. AI-assisted-by: claude-opus-5-5 * 🐛 Show the handlers and snap icons right outside the app Like share, these SVGs had no fill or stroke, so plain SVG viewers filled the shapes black and drew no lines. Set fill="none" and stroke="currentColor". The app sets both in CSS, so nothing changes there. AI-assisted-by: claude-opus-5-5	2026-10-28 14:26:43 +01:00
Eva Marco	980ed0a719	♻️ Use DS icon buttons to close the subscription dialogs (#12539) ... * ♻️ Use DS icon buttons to close the subscription dialogs The close buttons of the five subscription dialogs (plan management, success, Nitrate subscription, contact sales and manual cancel) were raw buttons with no name. They become ghost DS icon buttons named "Close"; the class that places them in the corner goes on the tooltip wrapper, so they stay where they were and only show the DS hover. The plans page link-style buttons stay raw: they have no DS equivalent. A visual test covers the plans page and the plan management dialog. AI-assisted-by: claude-opus-5-5 * ♻️ Move settings subscription styles closer to the DS The settings subscription stylesheet inlines the deprecated button-style mixin and %button-icon placeholder, resolves its legacy color aliases and font weight, uses logical properties and the DS typography module without a namespace. The rules on icon svgs that have no class keep a comment; two that match nothing (the dropdown arrow svg and .radio-btns) are commented out with a TODO. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor. No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the settings subscription The SCSS refactor of the settings subscription left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .icon-dropdown svg, .radio-btns, .radio-btns label. No visual change. AI-assisted-by: claude-opus-5-5 * ♻️ Give the subscription icons classes and drop unused props Review fixes for the subscription styles: - The plan icon span sets the letter color with color, not stroke on a bare svg, and drops fill, stroke-width and color: transparent, which do nothing on a span. - The plan icon border uses $b-2 (was 1.75px), so it is 0.25px thicker. - The letter gets its own class for its 2.25px stroke. With the default stroke it looks too thin next to the border. - The open link and editors arrow icons get a cta-icon class instead of the bare svg selector, and take the button color. The arrow used an icon-dropdown class with no rule. AI-assisted-by: claude-opus-5-5 * ♻️ Use the DS stroke width and color in the subscription icons The plan letter and the member icons keep the DS stroke width (the plan letter line gets thinner), the member icons set their color instead of the stroke, and the props copied from the button icon placeholder go. The success dialog logo gets its own class instead of a bare svg selector. AI-assisted-by: claude-opus-5-5	2026-10-28 12:11:06 +01:00
Eva Marco	1109e38852	♻️ Use DS icons in the dashboard lists and placeholders (#12536) ... * ♻️ Use DS icons in the dashboard lists and placeholders The trash project options button becomes a ghost DS icon button, as in the projects list, and says whether its menu is open. The search placeholders, the empty project "create new file" button, the comments placeholder and the legacy import library tag use the DS icons. The legacy search icon had no fill rule, so its lens was filled black; the DS one is not. Two fixtures make the trash testable: a deleted project, and deleted files due in 2100 (the existing ones expired in 2024, so the trash dropped them). A visual test covers the trash row, the empty project button, the project rename field and the comments placeholder. AI-assisted-by: claude-opus-5-5 * 🐛 Remove the hidden close control from the dashboard rename field The rename field of dashboard projects and files had a close control next to the input that never showed: its legacy icon is drawn with a stroke, but the styles only set a fill. It could not be reached with the keyboard or a screen reader, and a click on it did what leaving the field does: the blur saves the name first, and its handler saved it too. It only left a pointer cursor over an empty spot. Enter, Escape and leaving the field keep working as before. No visual change. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard trash, comments and rename styles to the DS The trash, comments panel and rename field stylesheets resolve their legacy color aliases, sizes, font sizes, mixins and the menu shadow to DS tokens and values, and use logical properties. The comments panel and the rename field no longer import refactor/; the trash keeps only the shared dashboard header styles (common-dashboard), used by ten dashboard modules. Four selectors that the modules do not use are commented out with a TODO. The comments dropdown z-index (4) has no DS token and keeps a TODO. No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard trash and comments The SCSS refactor of the dashboard trash and comments left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .thread-group, .comments-icon-small, .add-file-btn, .add-icon. No visual change. AI-assisted-by: claude-opus-5-5 * 🐛 Use px2rem for the unread dot size in dashboard comments The unread dot used $sz-8, which the DS sizes do not define, so the integration bundle build failed. It now uses px2rem(8), the same 8px. AI-assisted-by: claude-opus-5-5 * ♻️ Use DS typography and z-index in the dashboard comments Review fixes for the dashboard lists styles: - The comments dropdown title uses the headline-small typography. It was 11px regular, so it is now 12px medium (larger and bolder). - The comments dropdown uses --z-index-dropdown instead of a raw 4. - The rename field selector is the class alone; the input type is not needed to win over the input defaults (0px change). The visual test now also captures the whole comments dropdown, so the title change shows. AI-assisted-by: claude-opus-5-5 * 🔥 Remove dead rules from the dashboard comments styles The comments dropdown has no separators, so its hr rule matched nothing, and the comments icon set the default stroke width. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-28 12:10:47 +01:00
Alejandro Alonso	4dc684dd9c	Merge remote-tracking branch 'origin/staging' into develop	2026-10-28 11:50:56 +01:00
Pablo Alba	0532f15cee	🐛 Fix tab on variant name doesn't validate formula (#12655) ... * 🐛 Fix tab on variant name doesn't validate formula * ✨ Move helpers to common * ✨ Mr proposed changes	2026-10-28 11:44:38 +01:00
Eva Marco	4d416bd3f2	♻️ Use DS icons and buttons in the settings sidebar and email modal (#12541) ... * ♻️ Use DS icons and buttons in the settings sidebar and email modal - The settings sidebar back arrow and "Contact us" icon use the DS icons. The arrow keeps its place; the small DS icon draws 12px inside a 16px box, so the feedback icon sits 2px to the right and its margin shrinks to keep the label in place. - The change email modal close button becomes a ghost DS icon button named "Close"; the class that places it goes on the tooltip wrapper. The form submit buttons of the settings pages stay: they are the shared forms submit button. A visual test covers the settings sidebar and the change email modal. AI-assisted-by: claude-opus-5-5 * ♻️ Move settings sidebar and email modal styles to the DS The settings sidebar no longer imports refactor/: its legacy mixins, sizes and color aliases resolve to DS values and tokens, with logical properties. Its z-index (1) has no DS token and keeps a TODO. The change email modal does the same and keeps refactor/ only for the modal placeholders (%modal-*), which move with the modals refactor. Its legacy uppercase title becomes the DS headline-small typography, which differs only in its size (12px instead of 11px): the modal grows 2px. Two unused selectors are commented out with a TODO. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the change email modal The SCSS refactor of the change email modal left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .select-title, .cancel-button. No visual change. AI-assisted-by: claude-opus-5-5 * ♻️ Tidy the settings sidebar and change email styles The sidebar uses --z-index-panels instead of auto, the change email submit button gets its own class instead of a bare button selector, and the sidebar icons keep the DS stroke width (only the feedback icon line gets thinner). AI-assisted-by: claude-opus-5-5	2026-10-28 10:39:35 +01:00
Eva Marco	b1018c77b7	♻️ Use DS icons in the legacy context notification (#12542) ... * ♻️ Use DS icons in the legacy context notification The legacy context notification (still used by the global context notifications, the fonts page, the team, change email, delete account and export modals) draws its level icon with the DS icons instead of the deprecated icon set, colored through the color property. The icons are the same drawings, so nothing changes on screen. The component stays: the DS context notification has no links, which the global context notifications use. A visual test covers the info and warning levels and a warning with html content. AI-assisted-by: claude-opus-5-5 * ♻️ Move the legacy context notification styles to the DS The legacy context notification no longer imports refactor/: its sizes, spacing, borders and alert color aliases resolve to DS tokens, with logical properties. The legacy body-small typography becomes the DS one, which differs only in its line height (1.3 instead of 1.4): one line notifications do not change, and multi-line ones are about 1.5px shorter per extra line. The unused .default level is commented out with a TODO. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the legacy context notification The SCSS refactor of the legacy context notification left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .default. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-28 10:39:20 +01:00
Alejandro Alonso	a8e8a54a2b	Merge remote-tracking branch 'origin/staging' into develop	2026-10-28 10:35:31 +01:00
Eva Marco	08228324db	♻️ Use DS icons in the dashboard templates section (#12535) ... The arrow and add icons of the dashboard libraries and templates section use the DS icons and get their color from the color property. The collapse button says whether the section is expanded, and the left scroll button, which had no name, is now named "Previous". The scroll buttons stay raw: they are round 36px buttons with no DS equivalent. The template cards are anchors without href; they go to the anchors backlog. A new fixture lists eight builtin templates, and a visual test covers the cards, a card hover, the scroll buttons and the collapsed title. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-28 09:21:00 +01:00
Eva Marco	c05b2e2ead	♻️ Use DS buttons and icons in the share link modal (#12562) ... * ♻️ Use DS buttons and icons in the share link modal - The close button becomes a ghost DS icon button named "Close"; the class that places it goes on the tooltip wrapper. - "Get link", "Destroy link" and the confirmation buttons were raw inputs; they become DS primary, destructive and secondary buttons. - The copy link button stays a raw segment of the link field; its icon becomes the DS clipboard icon, a bit larger than the legacy drawing. - "Manage permissions" stays a link-style toggle; its arrow becomes the DS icon (the rotation still shows the state) and it says whether the permissions are expanded. The page checkboxes and the permission selects stay for their own groups. A new create share link fixture and a visual test cover the modal before and after getting a link, with the permissions expanded, and the destroy confirmation. AI-assisted-by: claude-opus-5-5 * ♻️ Move share link modal styles closer to the DS The share link stylesheet resolves its legacy sizes, spacing, mixins, z-index and color aliases to DS values and tokens, with logical properties. The copy button inlines %button-secondary with local color variables, so it looks the same at rest, on hover, on focus and while pressed; the visual test now also covers its hover. The legacy typographies become the DS ones, each differing in one detail: the title and "Manage permissions" use headline-small (12px instead of 11px) and the texts body-small (line height 1.3 instead of 1.4), so the modal changes height by about 1px. refactor/ stays only for the modal container, the link input and the page checkboxes. AI-assisted-by: claude-opus-5-5 * ♻️ Use a DS icon button for the share link copy button The copy button next to the link was a raw button with the secondary button styles inlined in share_link.scss. It is now a secondary icon-button* named "Copy link", so the .copy-button block goes away (review feedback). Visible changes: the DS secondary look (grey icon at rest, no lighter background on hover) and a 32px wide button instead of 28px, so the link text ends 4px earlier. AI-assisted-by: claude-opus-5-5	2026-10-28 09:20:41 +01:00
Eva Marco	ac52c41903	♻️ Use DS icons in the comments panel filter (#12561) ... * ♻️ Use DS icons in the comments panel filter The comments panel filter (workspace and viewer sidebar) draws its trigger arrow and menu ticks with the DS icons, as the viewer comments filter does. The trigger button says whether its menu is open (aria-expanded, aria-haspopup). The menu items stay: they move with the menus group. The dropdown item placeholder styles any svg inside a span with a 12px box and a stroke color, so the tick icon class sets its 16px box and currentColor stroke. Nothing changes on screen. A visual test covers the trigger and the open menu. AI-assisted-by: claude-opus-5-5 * ♻️ Move comments panel styles closer to the DS The comments panel stylesheet resolves its legacy sizes, spacing, mixins and color aliases to DS values and tokens, with logical properties, and inlines the asset element placeholder of the filter trigger. refactor/ stays only for the dropdown placeholders, which move with the menus group. The legacy body-small typography becomes the DS one, which differs only in its line height (1.3 instead of 1.4): the menu labels sit 1px higher. The trigger looks the same at rest and on hover; the visual test now also covers the hover. AI-assisted-by: claude-opus-5-5	2026-10-28 09:20:22 +01:00
Pablo Alba	f1d15aee4b	✨ Keep toast for file reparation open until user closes it (#12662)	2026-10-27 19:47:10 +01:00
Eva Marco	f6f9df9a1a	♻️ Use DS icons in the layer row buttons (#12477) ... * ♻️ Use DS icons in the layer row buttons The expand, visibility and lock buttons of the layer rows drew their icons with the deprecated icon set (arrow, shown, hide, unlock, lock). Use the DS icon instead. The buttons stay raw: they are segments of the layer row, with backgrounds that follow the row state. The icons get a class each, so their colors move from svg rules to those classes, and they keep the old stroke weight. The DS icon draws 12px inside a 16px box: - The expand button start padding goes from 8px to 6px, so the arrow stays in place. - The visibility and lock buttons leave 12px for the icon, so their icons do not shrink (flex-shrink: 0) and stay centered, uncut. The rows look the same as before, pixel for pixel. Add a visual test with a selected, hidden and blocked layer and a hovered row. AI-assisted-by: claude-opus-5-5 * ♻️ Move the layer name styles off the deprecated styles The layer name and its rename input used the deprecated body-small typography, mixins, spacing and token aliases. They now use the DS body-small typography, sizes, borders and px2rem(), and the layer row color aliases resolve to their DS tokens, in layer_item.scss too. The DS body-small has a 1.3 line-height instead of 1.4, so the layer names sit 1px higher. The name color is one local variable for every state; the rename input sets it too, since it also has .element-name. A visual test now covers the rename input. AI-assisted-by: claude-opus-5-5	2026-10-27 16:01:53 +01:00
Alonso Torres	a70712fce4	🐛 Fix issue with compononent not sync on move (#11981)	2026-10-27 15:44:30 +01:00
Eva Marco	c26a67a8dd	♻️ Use a DS button for previous in the onboarding questions (#12550) ... * ♻️ Use a DS button for previous in the onboarding questions The "Previous" button of the onboarding questions becomes a DS secondary button; it was a raw button with the deprecated modal cancel styles. It is a bit narrower and its label uses the DS typography. "Next" stays: it is the shared forms submit button. The "Other" option icon stays too: it belongs to the forms image radio buttons, which move with the radio buttons group. A visual test covers the step 2 buttons at rest and with "Previous" hovered. AI-assisted-by: claude-opus-5-5 * ♻️ Move onboarding questions styles closer to the DS The onboarding questions stylesheet resolves its legacy modal color aliases to DS tokens, uses logical properties and the DS typography module without a namespace. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor. No visual change (checked on steps 1 and 2; only the shuffled options differ between runs). AI-assisted-by: claude-opus-5-5	2026-10-27 14:07:42 +01:00
Eva Marco	29e79edc66	♻️ Use DS buttons and icons in the dashboard team pages (#12531) ... * ♻️ Use DS buttons and icons in the dashboard team pages The team pages (members, invitations, webhooks and settings) and their modals move off the deprecated icons and raw buttons: - The member and webhook row menus become ghost DS icon buttons named "Options", with aria-expanded. - The member and invitation role selectors become buttons with aria-haspopup and aria-expanded, and use the DS arrow icon. They were divs; one carried a role and an id repeated on every row. - The four modal close buttons become ghost DS icon buttons named "Close"; the class that places them goes on the tooltip wrapper. - "Create webhook" becomes a DS primary button. - The webhook status, team image and settings icons use the DS icons. The invitation checkbox tick stays until the checkbox migration. A visual test covers the role and row menus, the resend and webhook modals and the team image overlay. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard team styles to logical properties and DS tokens The remaining legacy color aliases resolve to their DS tokens, physical offsets and margins become logical properties, and the DS typography module is used without a namespace. Four selectors that team.cljs does not use are commented out with a TODO. refactor/ stays only for component-family placeholders: %input-checkbox and %checkbox-icon (checkboxes) and %modal-* (modals). The shared dashboard header styles (common-dashboard) are used by ten dashboard modules and move in their own change. No visual change. AI-assisted-by: claude-opus-5-5 * 🐛 Open the team row menus below their button The member and webhook row menus were placed from the bottom of their cell with a fixed offset, so their position depended on the menu height and the button height. The two-item webhook menu covered its button, the member menu covered the lower part of it, and the taller DS icon button moved both 3px down. They now open 4px below the button. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard team pages The SCSS refactor left four rules commented out with a TODO because team.cljs does not use them. CSS modules scope the classes to this module and no other source uses them, so they go: .dashboard-top-cta, .error-notification, .empty-invitations-buttons and .invitations-dropdown. No visual change. AI-assisted-by: claude-opus-5-5 * 🐛 Find the member role selector as a button in the dashboard test The "Bug 9443" test looked for the member role selector as a combobox. The selector is now a button with aria-haspopup, so the test failed in CI. It now looks for a button named "Admin", and checks that the owner has no such button. AI-assisted-by: claude-opus-5-5	2026-10-27 12:19:47 +01:00
Alejandro Alonso	deb5771248	✨ Use WASM for SVG markup in code inspect and copy (#12567) (#12608) ... When render-wasm is active, generate SVG for the Code inspector and Copy as SVG from the WASM export path instead of classic SVG codegen. Add multi-root render_shapes_svg so multi-select stays one document. Closes #12567	2026-10-27 12:05:30 +01:00
Eva Marco	112e6dedd7	♻️ Use DS icons in the copy button (#12558) ... * ♻️ Use DS icons in the copy button The shared copy button (Inspect attribute rows and code blocks, share link, integrations) draws its clipboard and tick icons with the DS icons at the small size, colored through the color property. The button itself stays: it wraps whole rows. The icons are the same drawings, so nothing changes on screen. A visual test covers an Inspect computed attribute row and the code block copy button, at rest, on hover and after copying. AI-assisted-by: claude-opus-5-5 * ♻️ Move copy button styles off the deprecated styles The copy button stylesheet no longer imports refactor/: the button-style, flex-center and copy-wrapper-base mixins are inlined with DS values, the tertiary button and icon color aliases resolve to their DS tokens, and physical properties become logical ones. No visual change (whole viewer visual spec compared; the code tab syntax highlighting loads late on a cold first run, with either stylesheet). AI-assisted-by: claude-opus-5-5	2026-10-27 11:41:36 +01:00
Eva Marco	8800ff4bc9	♻️ Use DS buttons and icons in the assets tab (#12559) ... * ♻️ Use DS buttons and icons in the assets tab - "Add library" and "Manage library" become DS primary and secondary buttons, full width with the label centered; they keep their test id. - The filter button stays a raw segment of the search bar; its legacy icon becomes the DS filter icon. Its opened state comes before the focus and hover rules, as the legacy placeholder did, so the focus border still shows. - The create/rename group modal gets a ghost DS icon button named "Close", placed on the tooltip wrapper, and DS cancel (secondary) and create/rename (primary) buttons instead of raw inputs. A visual test covers the add and manage library buttons, the filter at rest, on hover and opened, and the create group modal. AI-assisted-by: claude-opus-5-5 * ♻️ Move assets tab styles off the deprecated styles assets.scss no longer imports refactor/: its mixins, sizes, spacing and input / button icon color aliases resolve to DS values and tokens, with logical properties. The unused .sections-container, .section-item and .section-btn rules are deleted (the filter menu is the shared context menu). assets/groups.scss does the same and keeps refactor/ only for the modal placeholders (%modal-*) and %input-with-label. Its legacy uppercase title becomes the DS headline-small typography, which differs only in its size (12px instead of 11px): the group modal grows 2px. AI-assisted-by: claude-opus-5-5	2026-10-27 11:41:23 +01:00
Eva Marco	33d304c0af	♻️ Use DS icons in the dashboard sidebar (#12534) ... * ♻️ Use DS icons in the dashboard sidebar The search, clear search, pinned projects placeholder and logout icons of the dashboard sidebar use the DS icons, and they get their color from the color property. The two search buttons had untranslated test names as their labels ("dashboard-search"); they are now named "Search" and "Clear search". The pin keeps its place: the DS small icon draws 12px inside a 16px box, so its margins shrink by 2px. New key: dashboard.clear-search (en, es). The dashboard page object looks the search button up by its new name. A visual test covers the search box with and without a term, the pinned projects placeholder and the profile menu. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard sidebar styles off the deprecated styles Legacy color aliases resolve to their DS tokens, deprecated mixins, sizes and font variables are inlined with DS values, physical properties become logical ones and the DS typography module is used without a namespace. An invalid max-width with two values, which the browser ignored, is gone. Two rules that match nothing are commented out with a TODO: the profile menu arrow svg rule (the arrow is the DS icon svg itself) and the upgrade plan section, which sidebar.cljs does not use. refactor/ stays only for the profile menu placeholders (%menu-dropdown, %menu-item-base) and the shared dashboard header styles (common-dashboard). No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard sidebar The SCSS refactor of the dashboard sidebar left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .profile-dropdown-item .open-arrow svg, .upgrade-plan-section, .penpot-free, .no-limits, .power-up. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-27 11:41:19 +01:00
Eva Marco	afd838ea5b	♻️ Use DS buttons in the dashboard team modals (#12537) ... * ♻️ Use DS buttons in the dashboard team modals The close buttons of the create/rename team modal, the team permission notice and the two "before you leave" modals become ghost DS icon buttons named "Close"; the class that places them goes on the tooltip wrapper. The cancel and "promote and leave" inputs of the leave modals become DS buttons: secondary, and destructive once a member is picked (primary and disabled before). Two fixtures make the leave and reassign modal testable (the logged-in user owns the second team, which has another member). A visual test covers the create team modal and the leave and reassign modal. AI-assisted-by: claude-opus-5-5 * ♻️ Move dashboard team modal styles closer to the DS The change owner and team form stylesheets resolve their legacy color aliases, spacing and typography mixins to DS tokens and use the DS typography module without a namespace. The legacy uppercase title becomes the DS headline-small typography, which differs only in its size (12px instead of 11px): the "before you leave" title grows 1px and the modal 2px. Unused selectors are commented out with a TODO. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor, and the input placeholders. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard team modals The SCSS refactor of the dashboard team modals left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .input-wrapper, .cancel-button, &.danger. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-27 10:58:13 +01:00
Eva Marco	19fc9ebce8	♻️ Use DS icons in the viewer flows and interactions menus (#12520) ... * ♻️ Use DS icons in the viewer flows and interactions menus The flows and interactions triggers in the viewer header were divs with a click handler, and their menus lived inside them. They are now buttons with aria-expanded and aria-haspopup, and each menu sits next to its button in a wrapper, since a button cannot hold the menu entries. The play, arrow and tick icons use DS icons. The menu entries stay as they are. A visual test covers the interactions menu closed and open; the test files have no flows, and the flows trigger shares its styles. AI-assisted-by: claude-opus-5-5 * ♻️ Move viewer interactions styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties. The DS icons take their color from the text and no longer shrink, so the old icon placeholders go away. The DS body-small line-height is more compact, so the trigger labels sit 1px higher. The refactor/ import stays only for the shared menu placeholders. AI-assisted-by: claude-opus-5-5	2026-10-27 10:47:07 +01:00
Eva Marco	9854f8e54f	♻️ Move dashboard subscription styles off the deprecated styles (#12538) ... * ♻️ Move dashboard subscription styles off the deprecated styles The subscription stylesheet inlines the deprecated button-style and flex-center mixins, resolves its legacy color aliases and sizes to DS tokens, uses logical properties and the DS typography module without a namespace. Three rules that match nothing (the arrow svg, .cta-link and .open-arrow) are commented out with a TODO. The subscription controls need no DS change: the plan card, the current plan card and the manage subscription link have no DS equivalent, and they use no legacy icons. refactor/ stays only for the power up menu item placeholder and the shared dashboard header styles. A visual test covers the sidebar plan card (closed and open), the team settings plan and the members seats warnings. No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the dashboard subscription The SCSS refactor of the dashboard subscription left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .icon-dropdown svg, .cta-link, .open-arrow. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-27 10:23:55 +01:00
Eva Marco	411f661bdb	♻️ Use DS buttons in the delete shared libraries modal (#12554) ... * ♻️ Use DS buttons in the delete shared libraries modal The delete shared libraries modal (unpublish a library, delete a shared file or project) gets a ghost DS icon button named "Close", placed on the tooltip wrapper, and DS buttons for cancel (secondary) and accept (destructive for the danger style, primary otherwise) instead of raw inputs. The buttons are narrower and the accept button takes the DS destructive red. A new empty library references fixture and a visual test cover the unpublish library modal from the workspace main menu. AI-assisted-by: claude-opus-5-5 * ♻️ Move delete shared libraries modal styles closer to the DS The delete shared libraries stylesheet resolves its legacy modal color aliases to DS tokens, uses a logical property and the DS typography module without a namespace. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor. Two unused selectors are commented out with a TODO. No visual change. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the delete shared libraries modal The SCSS refactor of the delete shared libraries modal left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: &.transparent, .list-wrapper. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-27 10:20:11 +01:00
Eva Marco	f07452e36b	♻️ Use DS buttons and icons in the inspect code tab (#12521) ... * ♻️ Use DS buttons and icons in the inspect code tab "Copy all code" becomes a DS secondary button, and the expand panel buttons ghost DS icon buttons labelled "Expand panel" (new key, en and es). The collapse toggles of the CSS and markup blocks stay raw buttons, since they sit in a 12px column; their arrow uses DS icons and they get a name and aria-expanded. The copy buttons belong to the shared copy button and move with it. A visual test covers the code tab buttons, expanded and collapsed. AI-assisted-by: claude-opus-5-5 * ♻️ Move inspect code tab styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties. The 11px uppercase titles become the 12px DS headline-small, the only difference. The code typography keeps its values with a TODO: the DS code-font names "Roboto Mono", while the app loads "robotomono". The full-width "Copy all code" DS button centers its label explicitly. The refactor/ import stays only for the copy buttons, styled here until the shared copy button moves to the DS. AI-assisted-by: claude-opus-5-5	2026-10-26 17:55:54 +01:00
Eva Marco	96b62f6475	♻️ Use DS buttons in the delete account modal (#12540) ... * ♻️ Use DS buttons in the delete account modal The close button of the delete account modal becomes a ghost DS icon button named "Close"; the class that places it goes on the tooltip wrapper. The cancel and delete buttons become DS secondary and destructive buttons, so their labels no longer wrap and the delete button takes the DS destructive red. The delete button keeps its test id. A visual test covers the modal at rest and with the close and delete buttons hovered. AI-assisted-by: claude-opus-5-5 * ♻️ Move delete account modal styles closer to the DS The delete account stylesheet resolves its legacy sizes, spacing, mixins and color aliases to DS tokens and uses logical properties and the DS typography module without a namespace. The legacy uppercase title becomes the DS headline-small typography, which differs only in its size (12px instead of 11px), so the title and the content below sit 1px lower. The organization counts used a fixed dark-theme gray; they now use the themed DS secondary foreground. Two unused selectors are commented out with a TODO. refactor/ stays only for the modal placeholders (%modal-*), which move with the modals refactor. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the delete account modal The SCSS refactor of the delete account modal left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .fields-row, .select-title. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-26 17:17:46 +01:00
Eva Marco	376ecda94e	♻️ Move viewport top bar styles off the deprecated styles (#12488) ... * ♻️ Move viewport top bar styles off the deprecated styles The viewport top bars (view only bar of the inspect tab, path edition bar) already use DS buttons. Move top_bar.scss to DS sizes, borders, spacing tokens and logical properties, resolve the panel and shadow color aliases, and drop the refactor import. The unused done-btn class, the last user of the deprecated button placeholders here, goes away. The two z-index values have no DS token, so they stay with a TODO. Add a visual test of the view only bar; it looks the same as before, pixel for pixel. AI-assisted-by: claude-opus-5-5 * ♻️ Use the body-small typography in the viewport top bar title The title only set a 12px font size, which body-small already has. Use the DS typography instead of the inline size and its TODO. The view only bar looks the same, pixel for pixel. AI-assisted-by: claude-opus-5-5	2026-10-26 15:53:05 +01:00
Eva Marco	86e01d56a2	🐛 Update canvas and keep local sets when switching tokens source (#12442) ... Setting a library as tokens source did not update shapes that use tokens, because set-tokens-source never ran the token propagation that every other token operation runs. Run it after the commit. Going back to the local tokens, or unlinking the library that was the source, left no local set active: the file has a single tokens status, and switching to a library replaced it with the library's one. Keep the status of the file's own tokens lib aside in a new optional :own-tokens-status attribute while an external library is the source, and restore it when the file is its own source again. Exporting without libraries and absorbing a deleted source library restore it as well. Closes #12430 AI-assisted-by: claude-opus-5-5	2026-10-26 15:23:05 +01:00
Filip Sajdak	576bf4ed3d	✨ Close search and shortcuts panels with Escape (#12374) ... * ✨ Close search and shortcuts panels with Escape The workspace search and shortcuts panels could only be dismissed with the mouse, which interrupts keyboard-first workflows. A new use-escape-to-close hook gives each panel an on-key-down handler that closes it on Escape while the user is working in it: the latest pointer press or focus change must have landed inside the panel, or the panel must hold focus when it opens (a panel that autofocuses its search box, such as Shortcuts, is closed by the first Escape). Focus left behind in a panel after the user moved on to the canvas does not count, so Escape keeps its usual meaning there. The handler never stops the event. The global Escape shortcut still runs and finishes in-progress operations such as path drawing; an earlier version stopped propagation and left a half-drawn path that failed shape validation on the next commit. In the search panel an open filters menu takes the first Escape and the panel closes on the second. The history panel needs no handler: Escape already closes it through the :interrupt it emits. Closes #9540 AI-assisted-by: claude-opus-5-5 AI-assisted-by: claude-sonnet-5-5 Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> * 📎 Add e2e test for closing panels with Escape Cover the Escape handling added for the layers search and shortcuts panels with four Playwright cases on the mocked workspace: - Escape closes the layers search panel. - With the search filters menu open, the first Escape closes only the menu and the second closes the panel. - Escape closes the shortcuts panel right after it opens with `?`. The panel autofocuses its search box, so the first Escape must close it instead of only blurring the box. - A path drawn while focus sits in the shortcuts panel is finished by Escape, which proves the panel does not swallow the global shortcut. The first three cases fail on develop. The shortcuts case also fails when the hook does not seed its tracker from the focused element. AI-assisted-by: claude-sonnet-5-5 Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> * 🐛 Close History with Escape when opened by shortcut or menu Only the header button opened History through initialize-history, which removes the :document-history flag on the next :interrupt. The Ctrl/Cmd+Alt+H shortcut and the "Version history" menu item toggled the flag directly, so the global Escape left the panel open. Both now emit initialize-history, like the header, and keep their own event origin. Two e2e cases cover the shortcut and the menu; both fail without this change. AI-assisted-by: claude-sonnet-5-5 Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> * ♻️ Apply review suggestions to Escape-to-close Use dom/child? instead of .contains in the Escape hook and drop the redundant nil checks. Drive the path test through clickAt so its clicks wait for the path tool. Add a negative Search case: Escape reaches the panel after the last click landed on the viewport, and the panel stays open. That case fails when the containment check is removed. AI-assisted-by: claude-sonnet-5-5 Signed-off-by: Filip Sajdak <filip.sajdak@siili.com> --------- Signed-off-by: Filip Sajdak <filip.sajdak@siili.com>	2026-10-26 14:42:43 +01:00
Eva Marco	e24e9dc747	♻️ Use DS buttons and icons in the viewer header (#12523) ... * ♻️ Use DS buttons and icons in the viewer header The section buttons, full screen and edit become ghost DS icon buttons (the last two were spans), with aria-pressed where they toggle. Share and "Log in or sign up" become DS buttons. The zoom widget becomes a button that toggles its menu, like the workspace one, with DS zoom buttons inside. The breadcrumb and the current board name become buttons with aria-expanded, and the page menu moves next to its button. The arrow and tick icons use DS icons. The logo stays: it is brand art. A visual test covers the header in two sections and both menus. AI-assisted-by: claude-opus-5-5 * ♻️ Move viewer header styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties, and the button placeholders go away. The section buttons column goes from a fixed 92px to auto, since the three 32px DS buttons no longer fit; the 1fr side columns keep it centered. The zoom widget follows the workspace header one. The 11px project name becomes the 12px DS headline-small. The global .selected rule also highlighted the current page in the page menu: that row keeps its highlight through its own rule. The refactor/ import stays only for the shared menu placeholders; the options z-index (10) has no DS token and keeps a TODO. AI-assisted-by: claude-opus-5-5	2026-10-26 14:39:06 +01:00
Eva Marco	48a5875a71	♻️ Use DS icon buttons in the viewer board navigation (#12527) ... * ♻️ Use DS icon buttons in the viewer board navigation The previous, next and first board buttons of the viewer become secondary DS icon buttons with the DS arrow and reload icons. They keep their size and the viewer background at rest; on hover they take the DS secondary look. The first board button had no accessible name; it is now labelled. The position classes move to the tooltip wrappers, so the fullscreen and comments sidebar offsets still apply. New key: viewer.go-to-first-board (en, es). A visual test covers the buttons at rest and on hover. AI-assisted-by: claude-opus-5-5 * ♻️ Move viewer styles off the deprecated styles Spacing, sizes, borders, typographies and color aliases move to DS tokens and logical properties, and the file no longer imports refactor/. The section scrollbar uses the DS custom-scrollbar mixin; the text selection and placeholder styles that %new-scrollbar gave to the comments layer stay, with DS tokens of the same value. An invalid padding-right with four values, which the browser ignored, is gone. The DS body-small typography differs from the old one only in a more compact line-height, so the board counter sits 1px higher. The z-index values (10, 2) have no DS token and keep a TODO. The .viewer-header, .not-fixed, .fixed and .frame-children rules are not used by this module and are commented out with a TODO. AI-assisted-by: claude-opus-5-5 * 🔥 Remove unused styles from the viewer The SCSS refactor of the viewer left rules commented out with a TODO because the module does not use them, or because they target an svg inside a DS icon that is the svg itself. CSS modules scope the classes to this module and no other source uses them, so they go: .viewer-header, .not-fixed, .fixed, .frame-children g. No visual change. AI-assisted-by: claude-opus-5-5	2026-10-26 12:48:43 +01:00