* ✨ 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>
* 🐛 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
* ✨ 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>
* 🐛 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
* ♻️ 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
* ♻️ 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
* 🐛 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.
pnpm 12.5.1 -> 12.16.1: the tarball pin of docker/devenv and of the
media-processor, exporter and mcp images, the packageManager field of
every workspace manifest, and the lockfile metadata of the 11
workspaces. The new pnpm also normalizes one engine range per lockfile
(>=18.* to >=18).
node 24.21.0 -> 24.22.2: devenv NODE_VERSION and both NODE_SHA256,
.nvmrc, and the runtime pin of the two plugins-deploy workflows. The
dhi.io image tags stay as they are until their digests are available.
AI-assisted-by: deepseek-v4.1-flash
Since accounts without a theme follow the system one (#12480), the ds
Playwright project renders the light theme: headless Chromium reports a
light color scheme. Its screenshots stopped matching the ones taken
before, and the app is reviewed on the dark theme. Set colorScheme to
dark for the ds project only; the default and render-wasm projects keep
their behavior.
AI-assisted-by: claude-opus-5-5
* ♻️ 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
Sass adds @charset "UTF-8" to every module with non-ASCII characters,
and concatSass joined the modules as they came, so main.css carried it
in the middle of the file. Browsers only honor @charset as the first
rule, and the server sends text/css with no charset. When the browser
did not take the page encoding for the stylesheet, it read main.css as
Latin-1 and CSS content such as the bullet of the library element
counts showed as "•".
Drop every @charset while joining the modules and put one at the start.
Closes#12677
AI-assisted-by: claude-opus-5-5
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
* 🐛 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
* 🐛 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
* 🎉 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>
* ♻️ 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
* 🔥 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
* ♻️ 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
* ✨ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
* ♻️ 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
